quick Wizard Main Component

This commit is contained in:
Diamantis Tziotzios 2019-03-01 17:15:25 +02:00
parent 832b08e715
commit 88f789bbb4
9 changed files with 227 additions and 16 deletions

View File

@ -53,6 +53,13 @@ const appRoutes: Routes = [
breadcrumb: true
}
},
{
path: 'quick-wizard',
loadChildren: './ui/quick-wizard/quick-wizard.module#OuickWizardModule',
data: {
breadcrumb: true
}
},
{
path: 'dataset-profiles',
loadChildren: './ui/admin/dataset-profile/dataset-profile.module#DatasetProfileModule',

View File

@ -19,6 +19,7 @@ import { BreadcrumbModule } from './ui/misc/breadcrumb/breadcrumb.module';
import { HelpContentModule } from './ui/misc/help-content/help-content.module';
import { NavigationModule } from './ui/misc/navigation/navigation.module';
import { LoginModule } from './ui/auth/login/login.module';
import { QuickWizardRoutingModule } from './ui/quick-wizard/quick-wizard.rooting';
// AoT requires an exported function for factories
export function HttpLoaderFactory(http: HttpClient) {

View File

@ -31,6 +31,7 @@ import { TimezoneService } from './services/timezone/timezone-service';
import { UserService } from './services/user/user.service';
import { CollectionUtils } from './services/utilities/collection-utils.service';
import { TypeUtils } from './services/utilities/type-utils.service';
import { QuickWizardService } from './services/quick-wizard/quick-wizard.service';
//
//
// This is shared module that provides all the services. Its imported only once on the AppModule.
@ -81,7 +82,8 @@ export class CoreServiceModule {
DatasetProfileService,
UserService,
DmpInvitationService,
DatasetExternalAutocompleteService
DatasetExternalAutocompleteService,
QuickWizardService
],
};
}

View File

@ -4,6 +4,7 @@ import { CardComponent } from './card/card.component';
import { DashboardComponent } from './dashboard.component';
import { DashboardRoutingModule } from './dashboard.routing';
import { RecentActivityComponent } from './recent-activity/recent-activity.component';
import { QuickWizardCreateAdd } from './quick-wizard-create-add/quick-wizard-create-add.component';
@NgModule({
imports: [
@ -13,7 +14,11 @@ import { RecentActivityComponent } from './recent-activity/recent-activity.compo
declarations: [
DashboardComponent,
RecentActivityComponent,
CardComponent
CardComponent,
QuickWizardCreateAdd
],
entryComponents: [
QuickWizardCreateAdd
]
})
export class DashboardModule { }

View File

@ -1,9 +1,11 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from './dashboard.component';
import { QuickWizardCreateAdd } from './quick-wizard-create-add/quick-wizard-create-add.component';
const routes: Routes = [
{ path: '', component: DashboardComponent }
{ path: '', component: DashboardComponent },
{ path: 'create-add', component: QuickWizardCreateAdd }
];
@NgModule({

View File

@ -0,0 +1,45 @@
<div class="dashboard" id="main-panel">
<div class="row">
<div class="col-1"></div>
<div class="col-4">
<div class="figure-card card">
<div class="card-header" (click)="navigateToCreate()"
[ngStyle]="{ 'background': linearCreateColor, 'box-shadow': boxShadow }">
<i class="material-icons">mode_edit</i>
</div>
<div class="card-content">
<p class="category">{{ category | translate }}</p>
<h3 class="title">{{'QUICKWIZARD.CREATE-ADD.CREATE.TITLE' | translate}}</h3>
<!-- <button mat-raised-button color="primary" (click)="navigateToCreate()">
<mat-icon>create_new_folder</mat-icon>
</button> -->
</div>
<!-- <div *ngIf="hasFootContent" class="card-footer">
</div> -->
</div>
</div>
<div class="col-1"></div>
<div class="col-4">
<div class="figure-card card">
<div class="card-header" (click)="navigateToAdd()"
[ngStyle]="{ 'background': linearAddColor, 'box-shadow': boxShadow }">
<i class="material-icons">subject</i>
</div>
<div class="card-content">
<p class="category">{{ category | translate }}</p>
<h3 class="title">{{'QUICKWIZARD.CREATE-ADD.ADD.TITLE' | translate}}</h3>
<!-- <button mat-raised-button color="primary" (click)="createNew()">
<mat-icon>create_new_folder</mat-icon>
</button> -->
</div>
<!-- <div *ngIf="hasFootContent" class="card-footer">
</div> -->
</div>
</div>
<div class="col-1"></div>
</div>
</div>

View File

@ -0,0 +1,68 @@
.figure-card {
display: inline-block;
position: relative;
width: 100%;
margin: 25px 0;
}
.card-content {
text-align: center;
padding: 15px 20px 13px 20px;
}
.card-header {
float: left;
text-align: center;
/*background: linear-gradient(60deg, #ffa726, #fb8c00);*/
/*box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4);*/
margin: -20px 15px 0;
border-radius: 3px;
padding: 15px;
position: relative;
}
.clickable{
cursor: pointer;
}
.card-header i {
font-size: 36px;
line-height: 56px;
width: 56px;
height: 56px;
color: #fff;
}
.category {
color: #999;
}
.card-footer {
margin: 0 20px 10px;
padding-top: 10px;
border-top: 1px solid #eee;
color: #999;
font-size: 12px;
position: relative;
}
.card-footer i {
font-size: 16px;
position: relative;
top: 4px;
color: #999;
}
.card {
padding: 25px 20px 20px 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.card {
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
border-radius: 6px;
color: rgba(0, 0, 0, 0.87);
background: #fff;
}

View File

@ -0,0 +1,40 @@
import { BaseComponent } from "../../../core/common/base/base.component";
import { OnInit, Component } from "@angular/core";
import { Router, ActivatedRoute } from "@angular/router";
import { TranslateService } from "@ngx-translate/core";
import { MatSnackBar } from "@angular/material";
@Component({
selector: 'app-quick-wizard-create-add-component',
templateUrl: 'quick-wizard-create-add.component.html',
styleUrls: ['./quick-wizard-create-add.component.scss']
})
export class QuickWizardCreateAdd extends BaseComponent implements OnInit {
linearCreateColor: string ="linear-gradient(60deg, #ef5350, #e53935)";
linearAddColor: string ="linear-gradient(60deg, #26c6da, #00acc1)";
constructor(
private router: Router,
private languageService: TranslateService,
public snackBar: MatSnackBar,
public route: ActivatedRoute
) {
super();
}
ngOnInit(): void {
}
navigateToCreate(){
this.router.navigate(["/quick-wizard"]);
}
navigateToAdd(){
this.router.navigate(["/quick-wizard-add"]);
}
}

View File

@ -20,7 +20,7 @@
"UNSUCCESSFUL-LOGIN": "Unsuccessful Login",
"SUCCESSFUL-DATASET-PROFILE-DELETE": "Successful Delete",
"UNSUCCESSFUL-DATASET-PROFILE-DELETE": "This profile can not deleted, because Datasets are associated with it",
"UNSUCCESSFUL-DELETE":"Unsuccessful Delete"
"UNSUCCESSFUL-DELETE": "Unsuccessful Delete"
},
"ERRORS": {
"HTTP-REQUEST-ERROR": "An Unexpected Error Has Occured"
@ -246,12 +246,12 @@
"DOWNLOAD-PDF": "Download PDF",
"DOWNLOAD-XML": "Download XML"
},
"UPLOAD":{
"UPLOAD": {
"UPLOAD-XML": "Import",
"UPLOAD-XML-FILE-TITLE":"Select Xml file with Dataset Profile to Upload",
"UPLOAD-XML-NAME":"Name Of Dataset Profile",
"UPLOAD-XML-IMPORT":"File",
"UPLOAD-XML-FILE-CANCEL":"Cansel"
"UPLOAD-XML-FILE-TITLE": "Select Xml file with Dataset Profile to Upload",
"UPLOAD-XML-NAME": "Name Of Dataset Profile",
"UPLOAD-XML-IMPORT": "File",
"UPLOAD-XML-FILE-CANCEL": "Cansel"
}
},
"DATASET-LISTING": {
@ -320,7 +320,7 @@
"SAVE": "Save",
"CANCEL": "Cancel",
"DELETE": "Delete",
"FINALIZE":"Finalise",
"FINALIZE": "Finalise",
"DOWNLOAD-XML": "Download XML"
}
},
@ -377,12 +377,12 @@
"STATUS": "Status",
"CREATED": "Created"
},
"UPLOAD":{
"UPLOAD": {
"UPLOAD-XML": "Import",
"UPLOAD-XML-FILE-TITLE":"Select Xml file with Dmp Profile to Upload",
"UPLOAD-XML-NAME":"Name Of Dmp Profile",
"UPLOAD-XML-IMPORT":"File",
"UPLOAD-XML-FILE-CANCEL":"Cansel"
"UPLOAD-XML-FILE-TITLE": "Select Xml file with Dmp Profile to Upload",
"UPLOAD-XML-NAME": "Name Of Dmp Profile",
"UPLOAD-XML-IMPORT": "File",
"UPLOAD-XML-FILE-CANCEL": "Cansel"
}
},
"DYNAMIC-FORM": {
@ -509,7 +509,7 @@
"FREE-TEXT": "Free Text",
"RADIO-BOX": "Radio Box",
"TEXT-AREA": "Text Area",
"DATE-PICKER":"Date Picker"
"DATE-PICKER": "Date Picker"
},
"DATASET-PROFILE-COMBO-BOX-TYPE": {
"WORD-LIST": "Word List",
@ -648,5 +648,46 @@
"VALIDATION": {
"AT-LEAST-ONE-DATASET-FINALISED": "You need to have at least one Dataset Finalized"
}
},
"QUICKWIZARD": {
"CREATE-ADD": {
"CREATE": {
"TITLE": "Create Dmp",
"QUICKWIZARD_CREATE": {
"TITLE": "Quick Create",
"ACTIONS": {
"DELETE": "Delete",
"SAVE": "Save",
"NEXT": "Next",
"BACK": "Back"
},
"FIRST-STEP": {
"TITLE": "Create Project",
"NEW-TITLE": "New Project",
"FIELDS": {
"LABEL": "Label",
"DESCRIPTION": "Description"
}
},
"SECOND-STEP": {
"TITLE": "Create Dmp",
"NEW-TITLE": "New Data Management Plan",
"FIELDS": {
"NAME": "Name of the Dmp",
"DESCRIPTION": "Description",
"PROFILE": "Dataset Profile"
}
},
"THIRD-STEP": {
"TITLE": "Create Dataset",
"NEW-TITLE":"New Dataset",
"DATASET-LABEL":"Dataset Name"
}
}
},
"ADD": {
"TITLE": "Add Dataset"
}
}
}
}