Merge remote-tracking branch 'origin/ui-redesign' into ui-redesign

This commit is contained in:
George Kalampokis 2020-08-25 17:30:42 +03:00
commit 1ee768c3a4
15 changed files with 1021 additions and 772 deletions

View File

@ -12,7 +12,9 @@
</mat-chip>
</ng-container>
</mat-chip-list>
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
<input matInput #autocompleteInput class="col" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)"> -->
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
<span *ngIf="_groupedItems">

View File

@ -1,5 +1,7 @@
<div class="row auto-complete">
<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)">
<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)">
<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)"> -->
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)">
<span *ngIf="_groupedItems">

View File

@ -40,7 +40,7 @@
<b>{{'DASHBOARD.DATASET-DESCRIPTIONS' | translate}}</b>
{{'DASHBOARD.DMP-ABOUT-END' | translate}}</p>
<div class="d-flex pt-4 pb-4 mt-3 mb-3">
<button mat-raised-button type="button" class="col-auto align-self-center yellow-btn" [routerLink]="['/datasets/new']">{{'DASHBOARD.ACTIONS.ADD-DATASET-DESCRIPTION' | translate}}</button>
<button mat-raised-button type="button" class="col-auto align-self-center yellow-btn" [routerLink]="['/new/dataset/']">{{'DASHBOARD.ACTIONS.ADD-DATASET-DESCRIPTION' | translate}}</button>
</div>
</div>
<div class="latest-activity-title">{{'DASHBOARD.LATEST-ACTIVITY' | translate}}</div>
@ -61,7 +61,7 @@
<app-recent-edited-dataset-activity (totalCountDatasets)="onCountDatasets($event)"></app-recent-edited-dataset-activity>
<div *ngIf="totalDatasets === 0" class="empty-list">{{'DASHBOARD.EMPTY-LIST' | translate}}</div>
<div *ngIf="totalDatasets === 0" class="col-auto d-flex justify-content-center">
<button mat-raised-button class="add-dataset" [routerLink]="['/datasets/new']">
<button mat-raised-button class="add-dataset" [routerLink]="['/new/dataset/']">
<mat-icon>add</mat-icon> {{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
</button>
</div>

View File

@ -25,6 +25,7 @@ import { AngularStickyThingsModule } from '@w11k/angular-sticky-things';
import { DatasetCopyDialogModule } from './dataset-wizard/dataset-copy-dialogue/dataset-copy-dialogue.module';
import { DatasetOverviewModule } from './overview/dataset-overview.module';
import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-criteria-dialogue/dataset-criteria-dialog.component';
import { DmpEditorComponent } from '../dmp/editor/dmp-editor.component';
@NgModule({
imports: [
@ -41,7 +42,7 @@ import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-crite
DatasetRoutingModule,
FormValidationErrorsDialogModule,
DatasetCopyDialogModule,
DatasetOverviewModule
DatasetOverviewModule,
],
declarations: [
DatasetListingComponent,
@ -55,7 +56,7 @@ import { DatasetCriteriaDialogComponent } from './listing/criteria/dataset-crite
DatasetExternalServiceDialogEditorComponent,
DatasetUploadDialogue,
DatasetListingItemComponent,
DatasetCriteriaDialogComponent
DatasetCriteriaDialogComponent,
],
entryComponents: [
DatasetExternalDataRepositoryDialogEditorComponent,

View File

@ -4,6 +4,7 @@ import { AuthGuard } from '../../core/auth-guard.service';
import { DatasetWizardComponent } from './dataset-wizard/dataset-wizard.component';
import { DatasetListingComponent } from './listing/dataset-listing.component';
import { DatasetOverviewComponent } from './overview/dataset-overview.component';
import { DmpEditorComponent } from '../dmp/editor/dmp-editor.component';
const routes: Routes = [
{

View File

@ -7,7 +7,7 @@
<p>{{'DATASET-LISTING.TEXT-INFO' | translate}} <u class="pointer" [routerLink]="['/explore']">{{'DATASET-LISTING.LINK-PUBLIC-DATASETS' | translate}}</u> {{'DATASET-LISTING.TEXT-INFO-REST' | translate}}</p>
<p class="mt-4 pt-2">{{'DATASET-LISTING.TEXT-INFO-PAR' | translate}}
<div class="col pl-0 pt-3">
<button mat-raised-button class="add-dataset align-self-center yellow-btn" [routerLink]="['/datasets/new']">
<button mat-raised-button class="add-dataset align-self-center yellow-btn" [routerLink]="['/new/dataset/']">
{{'DASHBOARD.ACTIONS.ADD-DATASET' | translate}}
</button>
</div>
@ -38,8 +38,8 @@
<div class="d-flex flex-row ml-auto">
<!-- Guided Tour -->
<div class="center-content" [style.display]=" (!isVisible && isAuthenticated()) ? 'block' : 'none'" (click)="restartTour()">
{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}
</div>
{{ 'GENERAL.ACTIONS.TAKE-A-TOUR'| translate }}
</div>
<!-- End of Guided Tour -->
<!-- Search Filter-->
<mat-form-field appearance="outline" class="search-form ml-auto col-auto" floatLabel="never">

View File

@ -80,6 +80,24 @@ const routes: Routes = [
title: 'GENERAL.TITLES.PLANS-NEW'
}
},
{
path: 'new/dataset',
component: DmpEditorComponent,
canActivate: [AuthGuard],
data: {
breadcrumbs: 'new/dataset',
title: 'GENERAL.TITLES.DATASET-NEW'
}
},
{
path: 'new/dataset/:dmpId',
component: DmpEditorComponent,
canActivate: [AuthGuard],
data: {
breadcrumbs: 'new/dataset',
title: 'GENERAL.TITLES.DATASET-NEW'
}
},
{
path: 'new_version/:id',
// component: DmpWizardComponent,

View File

@ -92,6 +92,10 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
if (this.formGroup.get('status').value === 1) {
this.formGroup.disable();
}
this.datasetWizardModel = new DatasetWizardEditorModel();
this.registerFormListeners();
if (this.datasetId) { // never gets in here
this.datasetWizardService.getSingle(this.datasetId)
.pipe(takeUntil(this._destroyed))
@ -200,10 +204,10 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
}
}
datasetProfileValueChanged(profiledId: string) {
if (profiledId && profiledId.length > 0) {
datasetProfileValueChanged(profileId: string) {
if (profileId && profileId.length > 0) {
this.formGroup.removeControl('datasetProfileDefinition');
this.getDefinition();
this.getDefinition(profileId);
}
}
@ -215,9 +219,9 @@ export class DatasetEditorDetailsComponent extends BaseComponent implements OnIn
});
}
getDefinition() {
getDefinition(profileId: string) {
// if (this.formGroup.invalid) { setTimeout(() => this.stepper.selectedIndex = 0); return; }
this.datasetWizardService.getDefinition(this.formGroup.get('profile').value)
this.datasetWizardService.getDefinition(profileId)
.pipe(takeUntil(this._destroyed))
.subscribe(item => {
this.datasetWizardModel.datasetProfileDefinition = new DatasetDescriptionFormEditorModel().fromModel(item);

View File

@ -24,7 +24,7 @@
</button>
</mat-form-field>
<mat-form-field *ngIf="isNewDataset">
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="profile" (click)="loadDatasetProfiles()">
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" [formControl]="this.formGroup.get('datasets')['controls'][0].get('profile')">
<mat-option *ngFor="let profile of availableProfiles" [value]="profile.id">
{{profile.label}}
</mat-option>

View File

@ -20,6 +20,9 @@ import { DmpEditorModel } from '../dmp-editor.model';
import { Router } from '@angular/router';
import { RequestItem } from '@app/core/query/request-item';
import { DatasetWizardService } from '@app/core/services/dataset-wizard/dataset-wizard.service';
import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset-wizard-editor.model';
import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
@Component({
selector: 'dataset-info',
@ -43,6 +46,8 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
selectedDmpProfileDefinition: DmpProfileDefinition;
profilesAutoCompleteConfiguration: MultipleAutoCompleteConfiguration;
datasetProfileDefinitionModel: DatasetDescriptionFormEditorModel;
constructor(
private language: TranslateService,
private configurationService: ConfigurationService,
@ -79,11 +84,11 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
this.formGroup.get('extraProperties').get('publicDate').patchValue(new Date());
}
// this.loadDatasetProfiles();
this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
this.formGroup.get('datasets')['controls'][0].get('dmp').valueChanges.pipe(takeUntil(this._destroyed))
.subscribe(x => {
console.log('value changes')
// this.registerFormListeners();
this.loadDatasetProfiles();
this.profilesAutoCompleteConfiguration = {
filterFn: this.filterProfiles.bind(this),
initialItems: (excludedItems: any[]) => this.filterProfiles('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
@ -124,20 +129,16 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
}
loadDatasetProfiles() {
console.log(this.formGroup);
console.log(this.dmp);
const datasetProfileRequestItem: RequestItem<DatasetProfileCriteria> = new RequestItem();
datasetProfileRequestItem.criteria = new DatasetProfileCriteria();
console.log(this.formGroup.value.id);
datasetProfileRequestItem.criteria.id = this.formGroup.value.id;
datasetProfileRequestItem.criteria.id = this.formGroup.get('datasets')['controls'][0].get('dmp').value.id;
if (datasetProfileRequestItem.criteria.id) {
this.datasetWizardService.getAvailableProfiles(datasetProfileRequestItem)
.pipe(takeUntil(this._destroyed))
.subscribe(items => {
this.availableProfiles = items;
});
.pipe(takeUntil(this._destroyed))
.subscribe(items => {
this.availableProfiles = items;
});
}
console.log(this.availableProfiles);
}
allAvailableProfiles(event: MouseEvent) {
@ -151,6 +152,50 @@ export class DatasetInfoComponent extends BaseComponent implements OnInit {
return false;
}
dmpValueChanged(dmp: DmpListingModel) {
if (dmp) {
this.formGroup.get('profile').enable();
this.loadDatasetProfiles();
}
else {
this.availableProfiles = [];
this.formGroup.get('profile').reset();
this.formGroup.get('profile').disable();
this.formGroup.removeControl('datasetProfileDefinition');
}
}
registerFormListeners() {
// this.formGroup.get('datasets')['controls'][0].get('dmp').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// this.dmpValueChanged(x);
// });
// this.formGroup.get('profile').valueChanges
// .pipe(takeUntil(this._destroyed))
// .subscribe(x => {
// //this.datasetProfileValueChanged(x);
// });
}
datasetProfileValueChanged(profiledId: string) {
if (profiledId && profiledId.length > 0) {
this.formGroup.removeControl('datasetProfileDefinition');
this.getDefinition();
}
}
getDefinition() {
// if (this.formGroup.invalid) { setTimeout(() => this.stepper.selectedIndex = 0); return; }
this.datasetWizardService.getDefinition(this.formGroup.get('profile').value)
.pipe(takeUntil(this._destroyed))
.subscribe(item => {
this.formGroup.get('datasets')['controls'][0].datasetProfileDefinition = new DatasetDescriptionFormEditorModel().fromModel(item);
this.datasetProfileDefinitionModel = this.formGroup.get('datasets')['controls'][0].datasetProfileDefinition;
this.formGroup.addControl('datasetProfileDefinition', this.datasetProfileDefinitionModel.buildForm());
});
}
addDataset(id: String) {
this.router.navigate(['/datasets/new/' + id]);
}

View File

@ -73,7 +73,7 @@
<div class="stepper-options">
<ol class="stepper-list">
<li *ngIf="!isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (4)</li>
<li *ngIf="isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}} (1)</li>
<li *ngIf="isNewDataset" (click)="changeStep(0)" [ngClass]="{'active': this.step === 0}">{{'DMP-EDITOR.STEPPER.MAIN-INFO' | translate}}</li>
<li *ngIf="!isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.FUNDING-INFO' | translate}} (3)</li>
<li *ngIf="isNewDataset" (click)="changeStep(1)" [ngClass]="{'active': this.step === 1}">{{'DMP-EDITOR.STEPPER.DATASET-INFO' | translate}}</li>
@ -84,7 +84,8 @@
<div>{{'DMP-EDITOR.STEPPER.DATASET' | translate}}</div>
<span *ngIf="dataset.value.status === 1" class="finalized-label"><mat-icon class="status-icon check-icon">check</mat-icon>{{'TYPES.DATASET-STATUS.FINALISED' | translate}}</span>
<ul class="dataset-list">
<li [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (8)</li>
<li *ngIf="!isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }} (8)</li>
<li *ngIf="isNewDataset" [ngClass]="{'active': this.step === i + stepsBeforeDatasets}">{{ dataset.get('label').value }}</li>
</ul>
</li>
</ol>

View File

@ -45,6 +45,7 @@ import { DatasetWizardEditorModel } from '@app/ui/dataset/dataset-wizard/dataset
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
import { DmpListingModel } from '@app/core/model/dmp/dmp-listing';
import { DmpCriteria } from '@app/core/query/dmp/dmp-criteria';
import { DatasetDescriptionFormEditorModel } from '@app/ui/misc/dataset-description-form/dataset-description-form.model';
@Component({
selector: 'app-dmp-editor-component',
@ -268,6 +269,8 @@ export class DmpEditorComponent extends BaseComponent implements OnInit, IBreadC
this.dmp.extraProperties.visible = false;
this.dmp.extraProperties.contact = this.authService.current().id;
const datasetWizardEditorModel = new DatasetWizardEditorModel();
// datasetWizardEditorModel.datasetProfileDefinition = new DatasetDescriptionFormEditorModel();
this.dmp.datasets.push(datasetWizardEditorModel);
this.formGroup = this.dmp.buildForm();

View File

@ -17,7 +17,7 @@
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<mat-form-field *ngIf="isNewDataset">
<app-single-auto-complete [required]="true" placeholder="{{'DATASET-EDITOR.FIELDS.SELECT-DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration"></app-single-auto-complete>
<app-single-auto-complete [required]="true" [formControl]="this.formGroup.get('datasets')['controls'][0].get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.SELECT-DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration"></app-single-auto-complete>
<!-- <app-single-auto-complete [required]="true" [formControl]="formGroup" placeholder="{{'DATASET-EDITOR.FIELDS.SELECT-DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration">
</app-single-auto-complete> -->
</mat-form-field>

View File

@ -1,6 +1,6 @@
import { BaseComponent } from '@common/base/base.component';
import { OnInit, Component, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormGroup, FormControl } from '@angular/forms';
import { TranslateService } from '@ngx-translate/core';
import { ConfigurationService } from '@app/core/services/configuration/configuration.service';
import { MultipleAutoCompleteConfiguration } from '@app/library/auto-complete/multiple/multiple-auto-complete-configuration';
@ -33,6 +33,8 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
@Input() isClone: boolean;
@Output() onFormChanged: EventEmitter<any> = new EventEmitter();
public formControl = new FormControl();
organisationsAutoCompleteConfiguration: MultipleAutoCompleteConfiguration = {
filterFn: this.filterOrganisations.bind(this),
initialItems: (excludedItems: any[]) => this.filterOrganisations('').pipe(map(result => result.filter(resultItem => (excludedItems || []).map(x => x.id).indexOf(resultItem.id) === -1))),
@ -81,6 +83,7 @@ export class MainInfoComponent extends BaseComponent implements OnInit {
this.formGroup.get('extraProperties').get('publicDate').patchValue(new Date());
}
// this.formControl = this.formGroup.get('datasets')['controls'][0].get('dmp');
this.formGroup.valueChanges.pipe(takeUntil(this._destroyed))
.subscribe(x => {
this.onFormChanged.emit();

File diff suppressed because it is too large Load Diff