quick Wizard Main Component
This commit is contained in:
parent
832b08e715
commit
88f789bbb4
|
@ -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',
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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
|
||||
],
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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 { }
|
||||
|
|
|
@ -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({
|
||||
|
|
|
@ -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>
|
|
@ -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;
|
||||
}
|
|
@ -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"]);
|
||||
}
|
||||
|
||||
|
||||
}
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue