MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

various style fixes

This commit is contained in:
Diamantis Tziotzios 2018-11-29 14:26:18 +02:00
parent 92d9c2cf03
commit 592fc44025
40 changed files with 541 additions and 762 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

434
dmp-frontend/src/app/datasets/dataset-wizard/dataset-wizard.component.html
View File

@ -1,258 +1,250 @@
<div class="dataset-wizard"> <div class="dataset-wizard">
<h3 *ngIf="isNew">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h3> <h3 *ngIf="isNew">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h3>
<div fxLayout="row" fxLayoutAlign="space-between center"> <div class="row">
<div> <div class="col-auto">
<h3 *ngIf="!isNew ">{{datasetWizardModel?.label}} {{ 'GENERAL.NAMES.DATASET' | translate }}</h3> <h3 *ngIf="!isNew ">{{datasetWizardModel?.label}} {{ 'GENERAL.NAMES.DATASET' | translate }}</h3>
<h3 *ngIf="this.formGroup && this.formGroup.dirty"> - {{ 'GENERAL.STATUSES.EDIT' | translate }}</h3> <h3 *ngIf="this.formGroup && this.formGroup.dirty"> - {{ 'GENERAL.STATUSES.EDIT' | translate }}</h3>
<h3 *ngIf="this.formGroup && this.formGroup.get('status').value == DatasetStatus.Finalised && viewOnly"> - {{ <h3 *ngIf="this.formGroup && this.formGroup.get('status').value == DatasetStatus.Finalised && viewOnly"> - {{
'GENERAL.STATUSES.FINALISED' | translate }}</h3> 'GENERAL.STATUSES.FINALISED' | translate }}</h3>
</div> </div>
<button *ngIf="!editMode" mat-icon-button (click)="enableForm()"> <div class="col"></div>
<button *ngIf="!editMode" class="col-auto" mat-icon-button (click)="enableForm()">
<mat-icon class="mat-24">edit</mat-icon> <mat-icon class="mat-24">edit</mat-icon>
</button> </button>
<button *ngIf="editMode" mat-icon-button (click)="disableForm()"> <button *ngIf="editMode" class="col-auto" mat-icon-button (click)="disableForm()">
<mat-icon class="mat-24">lock</mat-icon> <mat-icon class="mat-24">lock</mat-icon>
</button> </button>
</div> </div>
<div *ngIf="this.datasetProfileDefinitionModel || this.datasetWizardModel?.datasetProfileDefinition"> <div *ngIf="this.datasetProfileDefinitionModel || this.datasetWizardModel?.datasetProfileDefinition">
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly" <button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="save();" type="button">{{
style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="save();" type="button">{{
'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button> 'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly" <button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status != 1 && !viewOnly" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="saveFinalize();" type="button">{{
style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="saveFinalize();" type="button">{{
'DATASET-WIZARD.ACTIONS.SAVE-AND-FINALISE' | translate }}</button> 'DATASET-WIZARD.ACTIONS.SAVE-AND-FINALISE' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" <button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="downloadPDF();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-PDF' | translate }}</button>
(click)="downloadPDF();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-PDF' | translate }}</button> <button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="downloadXML();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
<button mat-raised-button color="primary" *ngIf="datasetWizardModel&&datasetWizardModel?.status == 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
(click)="downloadXML();" type="button">{{ 'DATASET-WIZARD.ACTIONS.DOWNLOAD-XML' | translate }}</button>
<div class="fill-space"></div> <div class="fill-space"></div>
</div> </div>
<mat-horizontal-stepper [linear]="isLinear" #stepper> <div class="row">
<mat-step [stepControl]="formGroup"> <mat-horizontal-stepper [linear]="isLinear" class="col-12" #stepper>
<div *ngIf="this.isActiveStep(0)"> <mat-step class="step-container" [stepControl]="formGroup">
<ng-template matStepLabel>{{'DATASET-WIZARD.FIRST-STEP.TITLE' | translate}}</ng-template>
<form *ngIf="formGroup" [formGroup]="formGroup"> <form *ngIf="formGroup" [formGroup]="formGroup">
<app-single-auto-complete [required]="true" [reactiveFormControl]="formGroup.get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.DMP' | translate}}" <div *ngIf="this.isActiveStep(0)" class="row">
[configuration]="dmpAutoCompleteConfiguration"> <app-single-auto-complete class="col-md-6" [required]="true" [reactiveFormControl]="formGroup.get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.DMP' | translate}}" [configuration]="dmpAutoCompleteConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
<ng-template matStepLabel>{{'DATASET-WIZARD.FIRST-STEP.TITLE' | translate}}</ng-template> <mat-form-field class="col-md-6" formGroupName="profile">
<mat-form-field formGroupName="profile"> <mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="id">
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="id"> <mat-option *ngFor="let profile of availableProfiles" [value]="profile.id">
<mat-option *ngFor="let profile of availableProfiles" [value]="profile.id"> {{profile.label}}
{{profile.label}} </mat-option>
</mat-option> </mat-select>
</mat-select> <mat-error *ngIf="baseErrorModel?.status">{{baseErrorModel['Criteria.status']}}</mat-error>
<mat-error *ngIf="baseErrorModel?.status">{{baseErrorModel['Criteria.status']}}</mat-error> </mat-form-field>
</mat-form-field> <app-dataset-editor-component class="col-12" [formGroup]="formGroup"></app-dataset-editor-component>
<app-dataset-editor-component [formGroup]="formGroup"></app-dataset-editor-component> <div class="col-12">
<div class="navigation-buttons-container"> <div class="row">
<button matStepperNext mat-raised-button style="float:right;" color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | <div class="col"></div>
translate}} <div class="col-auto"><button matStepperNext mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button></div>
</button> </div>
</div>
</div> </div>
</form> </form>
</div> </mat-step>
</mat-step> <mat-step class="step-container" [stepControl]="formGroup">
<mat-step [stepControl]="formGroup"> <ng-template matStepLabel>{{'DATASET-WIZARD.SECOND-STEP.TITLE' | translate}}</ng-template>
<div *ngIf="this.isActiveStep(1)">
<form *ngIf="formGroup" [formGroup]="formGroup"> <form *ngIf="formGroup" [formGroup]="formGroup">
<ng-template matStepLabel>{{'DATASET-WIZARD.SECOND-STEP.TITLE' | translate}}</ng-template> <div *ngIf="this.isActiveStep(1)" class="row">
<mat-card class="col-12 external-item-card">
<div class="row">
<div class="col-12 row" *ngIf='!viewOnly'>
<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}</h4>
<div class="col"></div>
<div class="col-auto"><button class="col-auto" mat-raised-button color="primary" (click)="addDataRepository()">
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
</button>
</div>
</div>
</div>
<app-external-item-listing class="col-12" *ngIf="formGroup.get('dataRepositories') && dataRepositoriesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.dataRepositories" placeholder="{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}" [parentTemplate]='dataRepositoriesTemplate' [displayFunction]='dataRepositoryDisplayFunc' [subtitleFunction]='dataRepositoryDisplaySubtitleFunc' [formGroup]="formGroup.get('dataRepositories')" [viewOnly]='viewOnly' [autoCompleteConfiguration]="dataRepositoriesAutoCompleteConfiguration" (onItemChange)="dataRepositoriesOnItemChange($event)">
</app-external-item-listing>
<ng-template #dataRepositoriesTemplate let-suggestion let-i="index" let-callback="function">
<div class="col-12 row align-items-center">
<span class="col">
{{i+1}}) {{suggestion.get('label').value}}
</span>
<div class="col-auto">
<mat-form-field>
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES-INFO' | translate}}" type="text" name="info" [formControl]="suggestion.get('info')">
</mat-form-field>
</div>
<div class="col-auto" *ngIf='!viewOnly'>
<button mat-icon-button (click)="callback(i)">
<mat-icon>close</mat-icon>
</button>
</div>
</div>
</ng-template>
</mat-card>
<mat-card class="col-12 external-item-card">
<div class="row">
<div class="col-12 row" *ngIf='!viewOnly'>
<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}</h4>
<div class="col"></div>
<div class="col-auto"><button mat-raised-button color="primary" (click)="addExternalDataset()">
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
</button>
</div>
</div>
</div>
<app-external-item-listing class="col-12" *ngIf="formGroup.get('externalDatasets') && externalDatasetsTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.externalDatasets" placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}" [parentTemplate]='externalDatasetsTemplate' [displayFunction]='externalDatasetDisplayFunc' [subtitleFunction]='dataRepositoryDisplaySubtitleFunc' [formGroup]="formGroup.get('externalDatasets')" [viewOnly]='viewOnly' [autoCompleteConfiguration]="externalDatasetAutoCompleteConfiguration" (onItemChange)="externalDatasetsOnItemChange($event)">
</app-external-item-listing>
<mat-card> <ng-template #externalDatasetsTemplate let-suggestion let-i="index" let-callback="function">
<mat-card-header> <div class="col-12 row align-items-center">
<mat-card-title class="thick" *ngIf='!viewOnly'> <div class="col">
{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}} <p>
<button mat-raised-button color="primary" (click)="addDataRepository()"> {{i+1}}) {{suggestion.get('label').value}}
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}} </p>
</button> </div>
</mat-card-title> <div class="col-auto">
</mat-card-header> <mat-form-field>
<app-external-item-listing *ngIf="formGroup.get('dataRepositories') && dataRepositoriesTemplate && externalSourcesConfiguration" <input matInput placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASET-INFO' | translate}}" type="text" name="info" [formControl]="suggestion.get('info')">
[options]="externalSourcesConfiguration.dataRepositories" placeholder="{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}" </mat-form-field>
[parentTemplate]='dataRepositoriesTemplate' [displayFunction]='dataRepositoryDisplayFunc' [subtitleFunction]='dataRepositoryDisplaySubtitleFunc' </div>
[formGroup]="formGroup.get('dataRepositories')" [viewOnly]='viewOnly' [autoCompleteConfiguration]="dataRepositoriesAutoCompleteConfiguration"
(onItemChange)="dataRepositoriesOnItemChange($event)">
</app-external-item-listing>
<ng-template #dataRepositoriesTemplate let-suggestion let-i="index" let-callback="function"> <div class="col-auto">
<div class="col-md-2"> <mat-form-field>
<p> <mat-select placeholder="{{'DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-DATASET-TYPE' | translate}}" [formControl]="suggestion.get('type')">
{{i+1}}) {{suggestion.get('label').value}} <mat-option [value]="0">{{'TYPES.EXTERNAL-DATASET-TYPE.SOURCE' | translate}}</mat-option>
</p> <mat-option [value]="1">{{'TYPES.EXTERNAL-DATASET-TYPE.OUTPUT' | translate}}</mat-option>
</div> </mat-select>
<div class="col-md-8"> </mat-form-field>
<mat-form-field> </div>
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES-INFO' | translate}}" type="text" name="info" <div class="col-auto">
[formControl]="suggestion.get('info')"> <button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
</mat-form-field> <mat-icon>close</mat-icon>
</div> </button>
<div class="col-md-2" *ngIf='!viewOnly'> </div>
<button mat-button (click)="callback(i)"> </div>
<mat-icon>close</mat-icon> </ng-template>
</button> </mat-card>
</div>
</ng-template>
</mat-card>
<mat-card>
<mat-card-header>
<mat-card-title class="thick" *ngIf='!viewOnly'>
{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}
<button mat-raised-button color="primary" (click)="addExternalDataset()">
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
</button>
</mat-card-title>
</mat-card-header>
<app-external-item-listing *ngIf="formGroup.get('externalDatasets') && externalDatasetsTemplate && externalSourcesConfiguration"
[options]="externalSourcesConfiguration.externalDatasets" placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASETS' | translate}}"
[parentTemplate]='externalDatasetsTemplate' [displayFunction]='externalDatasetDisplayFunc' [subtitleFunction]='dataRepositoryDisplaySubtitleFunc'
[formGroup]="formGroup.get('externalDatasets')" [viewOnly]='viewOnly' [autoCompleteConfiguration]="externalDatasetAutoCompleteConfiguration"
(onItemChange)="externalDatasetsOnItemChange($event)">
</app-external-item-listing>
<ng-template #externalDatasetsTemplate let-suggestion let-i="index" let-callback="function"> <mat-card class="col-12 external-item-card">
<div class="col-md-2"> <div class="row">
<p> <div class="col-12 row" *ngIf='!viewOnly'>
{{i+1}}) {{suggestion.get('label').value}} <h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}</h4>
</p> <div class="col"></div>
</div> <div class="col-auto"><button mat-raised-button color="primary" (click)="addRegistry()">
<div class="col-md-4"> {{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
<mat-form-field> </button>
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASET-INFO' | translate}}" type="text" name="info" </div>
[formControl]="suggestion.get('info')"> </div>
</mat-form-field>
</div> </div>
<app-external-item-listing class="col-12" *ngIf="formGroup.get('registries') && registriesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.registries" placeholder="{{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}" [parentTemplate]='registriesTemplate' [displayFunction]='registriesDisplayFunc' [formGroup]="formGroup.get('registries')" [viewOnly]='viewOnly' [subtitleFunction]='dataRepositoryDisplaySubtitleFunc' [autoCompleteConfiguration]="registriesAutoCompleteConfiguration" (onItemChange)="registriesOnItemChange($event)">
</app-external-item-listing>
<div class="col-md-4"> <ng-template #registriesTemplate let-suggestion let-i="index" let-callback="function">
<mat-form-field> <div class="col-12 row align-items-center">
<mat-select placeholder="{{'DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-DATASET-TYPE' | translate}}" [formControl]="suggestion.get('type')"> <div class="col">
<mat-option [value]="0">{{'TYPES.EXTERNAL-DATASET-TYPE.SOURCE' | translate}}</mat-option> <p>
<mat-option [value]="1">{{'TYPES.EXTERNAL-DATASET-TYPE.OUTPUT' | translate}}</mat-option> {{i+1}}) {{suggestion.get('label').value}}
</mat-select> </p>
</mat-form-field> </div>
</div> <div class="col-auto">
<div class="col-md-2"> <button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
<button mat-button (click)="callback(i)" *ngIf='!viewOnly'> <mat-icon>close</mat-icon>
<mat-icon>close</mat-icon> </button>
</button> </div>
</div> </div>
</ng-template> </ng-template>
</mat-card> </mat-card>
<mat-card> <mat-card class="col-12 external-item-card">
<mat-card-header> <div class="row">
<mat-card-title class="thick" *ngIf='!viewOnly'> <div class="col-12 row" *ngIf='!viewOnly'>
{{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}} <h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}</h4>
<button mat-raised-button color="primary" (click)="addRegistry()"> <div class="col"></div>
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}} <div class="col-auto">
</button> <button mat-raised-button color="primary" (click)="addService()">
</mat-card-title> {{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
</mat-card-header> </button>
<app-external-item-listing *ngIf="formGroup.get('registries') && registriesTemplate && externalSourcesConfiguration" </div>
[options]="externalSourcesConfiguration.registries" placeholder="{{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}" </div>
[parentTemplate]='registriesTemplate' [displayFunction]='registriesDisplayFunc' [formGroup]="formGroup.get('registries')"
[viewOnly]='viewOnly' [subtitleFunction]='dataRepositoryDisplaySubtitleFunc' [autoCompleteConfiguration]="registriesAutoCompleteConfiguration"
(onItemChange)="registriesOnItemChange($event)">
</app-external-item-listing>
<ng-template #registriesTemplate let-suggestion let-i="index" let-callback="function">
<div class="col-md-2">
<p>
{{i+1}}) {{suggestion.get('label').value}}
</p>
</div> </div>
<div class="col-md-10"> <app-external-item-listing class="col-12" *ngIf="formGroup.get('services') && servicesTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.services" placeholder="{{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}" [parentTemplate]='servicesTemplate' [displayFunction]='servicesDisplayFunc' [formGroup]="formGroup.get('services')" [viewOnly]='viewOnly' [subtitleFunction]='dataRepositoryDisplaySubtitleFunc' [autoCompleteConfiguration]="servicesAutoCompleteConfiguration" (onItemChange)="servicesOnItemChange($event)">
<button mat-button (click)="callback(i)" *ngIf='!viewOnly'> </app-external-item-listing>
<mat-icon>close</mat-icon>
</button>
</div>
</ng-template>
</mat-card>
<mat-card> <ng-template #servicesTemplate let-suggestion let-i="index" let-callback="function">
<mat-card-header> <div class="col-12 row align-items-center">
<mat-card-title class="thick" *ngIf='!viewOnly'> <div class="col">
{{'DATASET-EDITOR.FIELDS.SERVICES' | translate}} <p>
<button mat-raised-button color="primary" (click)="addService()"> {{i+1}}) {{suggestion.get('label').value}}
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}} </p>
</button> </div>
</mat-card-title> <div class="col-auto">
</mat-card-header> <button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
<app-external-item-listing *ngIf="formGroup.get('services') && servicesTemplate && externalSourcesConfiguration" <mat-icon>close</mat-icon>
[options]="externalSourcesConfiguration.services" placeholder="{{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}" </button>
[parentTemplate]='servicesTemplate' [displayFunction]='servicesDisplayFunc' [formGroup]="formGroup.get('services')" </div>
[viewOnly]='viewOnly' [subtitleFunction]='dataRepositoryDisplaySubtitleFunc' [autoCompleteConfiguration]="servicesAutoCompleteConfiguration" </div>
(onItemChange)="servicesOnItemChange($event)"> </ng-template>
</app-external-item-listing> </mat-card>
<ng-template #servicesTemplate let-suggestion let-i="index" let-callback="function"> <mat-card class="col-12 external-item-card">
<div class="col-md-2"> <div class="row">
<p> <div class="col-12 row">
{{i+1}}) {{suggestion.get('label').value}} <h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}</h4>
</p> </div>
</div> </div>
<div class="col-md-10"> <app-external-item-listing *ngIf="formGroup.get('tags') && tagsTemplate && externalSourcesConfiguration" [options]="externalSourcesConfiguration.tags" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}" [parentTemplate]='tagsTemplate' [displayFunction]='tagsDisplayFunc' [formGroup]="formGroup.get('tags')" [viewOnly]='viewOnly' [subtitleFunction]='tagsDisplaySubtitleFunc' [autoCompleteConfiguration]="tagsAutoCompleteConfiguration" (onItemChange)="tagsOnItemChange($event)">
<button mat-button (click)="callback(i)" *ngIf='!viewOnly'> </app-external-item-listing>
<mat-icon>close</mat-icon>
</button>
</div>
</ng-template>
</mat-card>
<mat-card>
<mat-card-header>
<mat-card-title class="thick">
{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}
</mat-card-title>
</mat-card-header>
<app-external-item-listing *ngIf="formGroup.get('tags') && tagsTemplate && externalSourcesConfiguration"
[options]="externalSourcesConfiguration.tags" placeholder="{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}"
[parentTemplate]='tagsTemplate' [displayFunction]='tagsDisplayFunc' [formGroup]="formGroup.get('tags')"
[viewOnly]='viewOnly' [subtitleFunction]='tagsDisplaySubtitleFunc' [autoCompleteConfiguration]="tagsAutoCompleteConfiguration"
(onItemChange)="tagsOnItemChange($event)">
</app-external-item-listing>
<ng-template #tagsTemplate let-suggestion let-i="index" let-callback="function">
<div class="col-md-2">
<p>
{{i+1}}) {{suggestion.get('name').value}}
</p>
</div>
<div class="col-md-10">
<button mat-button (click)="callback(i)" *ngIf='!viewOnly'>
<mat-icon>close</mat-icon>
</button>
</div>
</ng-template>
</mat-card>
<ng-template #tagsTemplate let-suggestion let-i="index" let-callback="function">
<div class="col-12 row align-items-center">
<div class="col">
<p>
{{i+1}}) {{suggestion.get('name').value}}
</p>
</div>
<div class="col-auto">
<button mat-icon-button (click)="callback(i)" *ngIf='!viewOnly'>
<mat-icon>close</mat-icon>
</button>
</div>
</div>
</ng-template>
</mat-card>
</div>
<div class="row external-item-action-row">
<button class="col-auto" matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
<div class="col"></div>
<button class="col-auto" matStepperNext mat-raised-button color="primary" (click)="getDefinition()">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button>
</div>
</form>
</mat-step>
<mat-step class="step-container">
<ng-template matStepLabel>{{'DATASET-WIZARD.THIRD-STEP.TITLE' | translate}}</ng-template>
<div *ngIf="this.isActiveStep(2)" class="row">
<app-dynamic-form class="col-12" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [dataModel]="datasetWizardModel"></app-dynamic-form>
<div class="col-12 description-action-row">
<div class="row">
<div class="col-auto"><button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button></div>
<!-- <div class="col"></div>
<div class="col-auto"><button matStepperNext mat-raised-button color="primary" (click)="getDefinition()">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button></div> -->
</div>
</div>
</div>
</mat-step>
<!-- <mat-step class="step-container">
<ng-template matStepLabel>{{'DATASET-WIZARD.FOURTH-STEP.TITLE' | translate}}</ng-template>
<div *ngIf="this.isActiveStep(3)">
<app-dynamic-form-pending-questions-display class="full-width" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition" [form]="this.formGroup.get('datasetProfileDefinition')" [dataModel]="datasetWizardModel"></app-dynamic-form-pending-questions-display>
<div class="navigation-buttons-container"> <div class="navigation-buttons-container">
<button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button> <button style="margin-top:10px;" matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK'
<button matStepperNext mat-raised-button color="primary" style="float:right;" (click)="getDefinition()">{{'DATASET-WIZARD.ACTIONS.NEXT'
| translate}}</button> | translate}}</button>
</div> </div>
</form>
</div>
</mat-step>
<mat-step>
<div *ngIf="this.isActiveStep(2)">
<ng-template matStepLabel>{{'DATASET-WIZARD.THIRD-STEP.TITLE' | translate}}</ng-template>
<app-dynamic-form class="full-width" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition"
[form]="this.formGroup.get('datasetProfileDefinition')" [dataModel]="datasetWizardModel"></app-dynamic-form>
<div class="navigation-buttons-container">
<button style="margin-top:10px;" matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK'
| translate}}</button>
</div> </div>
</div> </mat-step> -->
</mat-step> </mat-horizontal-stepper>
<mat-step> </div>
<div *ngIf="this.isActiveStep(3)">
<ng-template matStepLabel>{{'DATASET-WIZARD.FOURTH-STEP.TITLE' | translate}}</ng-template>
<app-dynamic-form-pending-questions-display class="full-width" *ngIf="formGroup && datasetWizardModel && datasetWizardModel.datasetProfileDefinition"
[form]="this.formGroup.get('datasetProfileDefinition')" [dataModel]="datasetWizardModel"></app-dynamic-form-pending-questions-display>
<div class="navigation-buttons-container">
<button style="margin-top:10px;" matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK'
| translate}}</button>
</div>
</div>
</mat-step>
</mat-horizontal-stepper>
</div> </div>

60
dmp-frontend/src/app/datasets/dataset-wizard/dataset-wizard.component.scss
View File

@ -1,54 +1,14 @@
.full-width {
width: 100%;
}
.flex-container {
display: flex;
}
.input-table {
table-layout: fixed;
}
.table-card .mat-grid-tile {
background: rgba(0, 0, 0, 0.32);
}
.dataset-wizard { .dataset-wizard {
.full-width { .step-container {
width: 100%; margin-top: 1em;
} }
mat-form-field {
width: 100%;
padding: 3px;
}
td-chips {
margin-top: 20px;
}
.navigation-buttons-container {
margin-top: 20px;
}
.mat-card {
margin: 16px 0;
}
.fill-space {
flex: 1 1 auto;
}
p {
margin: 16px;
}
.left-button {
float: left;
}
.description-area {
height: 100px;
}
}
mat-card-title.thick { .external-item-card {
font-weight: bold; margin-top: 1em;
} }
h3{ .external-item-action-row,
margin-top: 0px; .description-action-row {
margin-top: 1em;
}
} }

5
dmp-frontend/src/app/datasets/dataset-wizard/dataset-wizard.component.ts
View File

@ -1,4 +1,4 @@
import { AfterViewInit, Component, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms'; import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { MatDialog, MatSnackBar, MatStepper } from '@angular/material'; import { MatDialog, MatSnackBar, MatStepper } from '@angular/material';
import { ActivatedRoute, Params, Router } from '@angular/router'; import { ActivatedRoute, Params, Router } from '@angular/router';
@ -46,8 +46,7 @@ import { ServicesReferencedModelHelperComponent } from '../dataset-referenced-mo
@Component({ @Component({
selector: 'app-dataset-wizard-component', selector: 'app-dataset-wizard-component',
templateUrl: 'dataset-wizard.component.html', templateUrl: 'dataset-wizard.component.html',
styleUrls: ['./dataset-wizard.component.scss'], styleUrls: ['./dataset-wizard.component.scss']
encapsulation: ViewEncapsulation.None,
}) })
export class DatasetWizardComponent extends BaseComponent implements OnInit, AfterViewInit, IBreadCrumbComponent { export class DatasetWizardComponent extends BaseComponent implements OnInit, AfterViewInit, IBreadCrumbComponent {
breadCrumbs: Observable<BreadcrumbItem[]>; breadCrumbs: Observable<BreadcrumbItem[]>;

23
dmp-frontend/src/app/datasets/editor/dataset-editor.component.html
View File

@ -1,28 +1,23 @@
<div class="project-editor"> <form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup"> <div class=" row project-editor">
<mat-form-field class="full-width"> <mat-form-field class="col-md-6">
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" <input matInput placeholder="{{'DATASET-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{baseErrorModel.label}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{baseErrorModel.label}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="full-width"> <mat-form-field class="col-md-6">
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri"> <input matInput placeholder="{{'DATASET-EDITOR.FIELDS.URI' | translate}}" type="text" name="uri" formControlName="uri">
<mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{baseErrorModel.uri}}</mat-error> <mat-error *ngIf="formGroup.get('uri').hasError('backendError')">{{baseErrorModel.uri}}</mat-error>
<mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('uri').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="full-width"> <mat-form-field class="col-12">
<textarea matInput class="description-area" placeholder="{{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}" <textarea matInput class="description-area" placeholder="{{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"></textarea>
formControlName="description"></textarea>
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{errorModel.description}}</mat-error> <mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{errorModel.description}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div>
</form>
</form>
<!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
</div>

129
dmp-frontend/src/app/dmps/editor/dmp-editor.component.html
View File

@ -1,82 +1,85 @@
<div class="data-management-plan-editor"> <div class="dmp-editor">
<div fxLayout="row" fxLayoutAlign="space-between center"> <div fxLayout="row" fxLayoutAlign="space-between center">
<mat-card-title *ngIf="isNew">{{'DMP-EDITOR.TITLE.NEW' | translate}}</mat-card-title> <mat-card-title *ngIf="isNew">{{'DMP-EDITOR.TITLE.NEW' | translate}}</mat-card-title>
<mat-card-title *ngIf="!isNew"> <mat-card-title *ngIf="!isNew">
<h3>{{formGroup?.get('label')?.value}} </h3> <h3>{{formGroup?.get('label')?.value}} </h3>
</mat-card-title> </mat-card-title>
<button *ngIf="!editMode" mat-icon-button (click)="enableForm()">
<mat-icon class="mat-24">edit</mat-icon>
</button>
<button *ngIf="editMode" mat-icon-button (click)="disableForm()">
<mat-icon class="mat-24">lock</mat-icon>
</button>
</div> </div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup"> <form *ngIf="formGroup" (ngSubmit)="formSubmit()" [formGroup]="formGroup">
<mat-card> <mat-card>
<mat-card-header> <mat-card-header>
<div class="fill-space"></div> <div class="col-12 row">
<div *ngIf="!isNew"> <div class="col"></div>
<div> <div *ngIf="!isNew" class="col-auto">
<button mat-button type="button" (click)="redirectToDatasets()"> <div class="row actions-row">
<mat-icon>arrow_right_alt</mat-icon>{{'DMP-EDITOR.ACTIONS.GO-TO-DATASETS' | translate}} <div class="col-auto" *ngIf="!editMode">
</button> <button mat-icon-button (click)="enableForm()">
</div> <mat-icon class="mat-24">edit</mat-icon>
<mat-menu #actionsMenu="matMenu"> </button>
<button mat-menu-item (click)="newVersion(this.dataManagementPlan.id, this.dataManagementPlan.label)"> </div>
<mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}} <div class="col-auto" *ngIf="editMode">
</button> <button mat-icon-button (click)="disableForm()">
<button mat-menu-item (click)="clone(this.dataManagementPlan.id)"> <mat-icon class="mat-24">lock</mat-icon>
<mat-icon>filter_none</mat-icon>{{'DMP-LISTING.ACTIONS.CLONE' | translate}} </button>
</button> </div>
<button mat-menu-item (click)="viewVersions(this.dataManagementPlan.groupId, this.dataManagementPlan.label)"> <div class="col-auto">
<mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}} <button mat-button type="button" (click)="redirectToDatasets()">
</button> <mat-icon>arrow_right_alt</mat-icon>
<button mat-menu-item (click)="downloadXml(this.dataManagementPlan.id)"> <span>{{'DMP-EDITOR.ACTIONS.GO-TO-DATASETS' | translate}}</span>
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-XML' | translate}} </button>
</button> </div>
<button mat-menu-item (click)="downloadDocx(this.dataManagementPlan.id)"> <mat-menu #actionsMenu="matMenu">
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-DOCX' | translate}} <button mat-menu-item (click)="newVersion(this.dataManagementPlan.id, this.dataManagementPlan.label)">
</button> <mat-icon>queue</mat-icon>{{'DMP-LISTING.ACTIONS.NEW-VERSION' | translate}}
<button mat-menu-item (click)="downloadPDF(this.dataManagementPlan.id)"> </button>
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-PDF' | translate}} <button mat-menu-item (click)="clone(this.dataManagementPlan.id)">
</button> <mat-icon>filter_none</mat-icon>{{'DMP-LISTING.ACTIONS.CLONE' | translate}}
</mat-menu> </button>
<div> <button mat-menu-item (click)="viewVersions(this.dataManagementPlan.groupId, this.dataManagementPlan.label)">
<button mat-icon-button type="button" [matMenuTriggerFor]="actionsMenu"> <mat-icon>library_books</mat-icon>{{'DMP-LISTING.ACTIONS.VIEW-VERSION' | translate}}
<mat-icon>more_vert</mat-icon> </button>
</button> <button mat-menu-item (click)="downloadXml(this.dataManagementPlan.id)">
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
</button>
<button mat-menu-item (click)="downloadDocx(this.dataManagementPlan.id)">
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-DOCX' | translate}}
</button>
<button mat-menu-item (click)="downloadPDF(this.dataManagementPlan.id)">
<mat-icon>save_alt</mat-icon>{{'DMP-LISTING.ACTIONS.DOWNLOAD-PDF' | translate}}
</button>
</mat-menu>
<button mat-icon-button class="col-auto" type="button" [matMenuTriggerFor]="actionsMenu">
<mat-icon>more_vert</mat-icon>
</button>
</div>
</div> </div>
</div> </div>
</mat-card-header> </mat-card-header>
<mat-card-content> <mat-card-content>
<div class="row"> <div class="row">
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" <input matInput placeholder="{{'DMP-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
required>
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{baseErrorModel.label}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{baseErrorModel.label}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field class="col-md-12"> <mat-form-field class="col-md-12">
<textarea matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" <textarea matInput class="description-area" placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description" required></textarea>
formControlName="description" required></textarea>
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{errorModel.description}}</mat-error> <mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{errorModel.description}}</mat-error>
<mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="formGroup.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<div class="col-md-6"> <div class="col-md-6">
<app-single-auto-complete required='true' [reactiveFormControl]="formGroup.get('project')" placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}" <app-single-auto-complete required='true' [reactiveFormControl]="formGroup.get('project')" placeholder="{{this.languageResolverService.getBy('dmpEditor') | translate}}" [configuration]="projectAutoCompleteConfiguration">
[configuration]="projectAutoCompleteConfiguration">
</app-single-auto-complete> </app-single-auto-complete>
</div> </div>
<!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> --> <!-- <app-dynamic-fields-project [formGroup]="formGroup"></app-dynamic-fields-project> -->
<div class="col-md-6"> <div class="col-md-6">
<div class="row"> <div class="row">
<app-multiple-auto-complete required='true' class="col-md-10" [reactiveFormControl]="formGroup.get('profiles')" <app-multiple-auto-complete required='true' class="col-md-10" [reactiveFormControl]="formGroup.get('profiles')" placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
placeholder="{{'DMP-EDITOR.FIELDS.PROFILES' | translate}}" [configuration]="profilesAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
<div class="col-md-2"> <div class="col-md-2">
<button mat-icon-button type="button" (click)="availableProfiles()"> <button mat-icon-button type="button" [disabled]="formGroup.get('profiles').disabled" (click)="availableProfiles()">
<mat-icon>view_list</mat-icon> <mat-icon>view_list</mat-icon>
</button> </button>
</div> </div>
@ -86,38 +89,34 @@
<div class="col-md-6"> <div class="col-md-6">
<app-multiple-auto-complete [reactiveFormControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" <app-multiple-auto-complete [reactiveFormControl]="formGroup.get('organisations')" placeholder="{{'DMP-EDITOR.FIELDS.ORGANISATIONS' | translate}}" [configuration]="organisationsAutoCompleteConfiguration">
[configuration]="organisationsAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<div class="row"> <div class="row">
<div class="col-md-10"> <div class="col-md-10">
<app-multiple-auto-complete [reactiveFormControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" <app-multiple-auto-complete [reactiveFormControl]="formGroup.get('researchers')" placeholder="{{'DMP-EDITOR.FIELDS.RESEARCHERS' | translate}}" [configuration]="researchersAutoCompleteConfiguration">
[configuration]="researchersAutoCompleteConfiguration">
</app-multiple-auto-complete> </app-multiple-auto-complete>
</div> </div>
<div class="col-md-2"> <div class="col-md-2">
<button mat-icon-button type="button" (click)="addResearcher()"> <button mat-icon-button [disabled]="formGroup.get('researchers').disabled" type="button" (click)="addResearcher()">
<mat-icon>add_circle</mat-icon> <mat-icon>add_circle</mat-icon>
</button> </button>
</div> </div>
</div> </div>
</div> </div>
<h3 mat-subheader class="col-md-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h3> <!-- <h3 mat-subheader class="col-md-12">{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}</h3>
<mat-form-field class="col-md-6"> <mat-form-field class="col-md-6">
<input type="text" placeholder="{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}" [formControl]="textCtrl" matInput <input type="text" placeholder="{{'DMP-EDITOR.FIELDS.PROFILE' | translate}}" [formControl]="textCtrl" matInput [matAutocomplete]="auto">
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith"> <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayWith">
<mat-option *ngFor="let option of filteredOptions | async" [value]="option" (click)="selectOption(option)"> <mat-option *ngFor="let option of filteredOptions | async" [value]="option" (click)="selectOption(option)">
{{ option.label }} {{ option.label }}
</mat-option> </mat-option>
</mat-autocomplete> </mat-autocomplete>
</mat-form-field> </mat-form-field>
<app-dynamic-dmp-field-resolver class="col-md-12" *ngIf="dataManagementPlan.definition" [formGroup]="formGroup" <app-dynamic-dmp-field-resolver class="col-md-12" *ngIf="dataManagementPlan.definition" [formGroup]="formGroup" [dataManagementPlanProfile]="dataManagementPlan.definition"></app-dynamic-dmp-field-resolver> -->
[dataManagementPlanProfile]="dataManagementPlan.definition"></app-dynamic-dmp-field-resolver>
<mat-form-field class="col-md-6"> <mat-form-field class="col-md-6">
<input matInput placeholder="Version" disabled [value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value"> <input matInput placeholder="Version" disabled [value]="formGroup.get('version').value== undefined ?0 :formGroup.get('version').value">
@ -134,16 +133,12 @@
</div> </div>
<div class="col-md-12"> <div class="col-md-12">
<div class="right-button"> <div class="row">
<button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' | <div class="col-auto"><button mat-raised-button color="primary" (click)="cancel()" type="button">{{'DMP-EDITOR.ACTIONS.CANCEL' | translate}}</button></div>
translate}}</button> <div class="col"></div>
<button *ngIf="this.formGroup.enabled" mat-raised-button color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE' <div class="col-auto" *ngIf="!isNew && this.formGroup.enabled"><button mat-raised-button color="primary" type="button" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)">{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}</button></div>
| translate}}</button> <div class="col-auto" *ngIf="this.formGroup.enabled"><button mat-raised-button color="primary" type="submit">{{'DMP-EDITOR.ACTIONS.SAVE' | translate}}</button></div>
<button *ngIf="dataManagementPlan.lockable && this.formGroup.enabled" type="button" mat-raised-button color="primary" <div class="col-auto" *ngIf="dataManagementPlan.lockable && this.formGroup.enabled"><button type="button" mat-raised-button color="primary" (click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE' | translate}}</button></div>
(click)="saveAndFinalize()">{{'DMP-EDITOR.ACTIONS.FINALISE'
| translate}}</button>
<button *ngIf="!isNew && this.formGroup.enabled" mat-raised-button color="primary" type="button" (click)="openConfirm(formGroup.get('label').value, formGroup.get('id').value)">{{'DMP-EDITOR.ACTIONS.DELETE'
| translate}}</button>
</div> </div>
</div> </div>
</div> </div>

31
dmp-frontend/src/app/dmps/editor/dmp-editor.component.scss
View File

@ -1,32 +1,3 @@
.input-table { .dmp-editor {
table-layout: fixed;
}
.table-card .mat-grid-tile {
background: rgba(0, 0, 0, 0.32);
}
.data-management-plan-editor {
.fill-space {
flex: 1 1 auto;
}
.mat-card {
margin: 16px 0;
}
p {
margin: 16px;
}
.left-button {
float: left;
}
.right-button {
float: right;
}
.description-area {
height: 100px;
}
}
h3{
margin-top: 0px;
} }

6
dmp-frontend/src/app/dmps/editor/dmp-editor.component.ts
View File

@ -34,6 +34,7 @@ import { IBreadCrumbComponent } from '../../shared/components/breadcrumb/definit
import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component'; import { SnackBarNotificationComponent } from '../../shared/components/notificaiton/snack-bar-notification.component';
import { JsonSerializer } from '../../utilities/JsonSerializer'; import { JsonSerializer } from '../../utilities/JsonSerializer';
import { DMPFinaliseDialogComponent } from './dmp-finalise-dialog/dmp-finalise-dialog.component'; import { DMPFinaliseDialogComponent } from './dmp-finalise-dialog/dmp-finalise-dialog.component';
import { Status } from '../../models/Status';
@Component({ @Component({
selector: 'app-dmp-editor-component', selector: 'app-dmp-editor-component',
@ -43,7 +44,7 @@ import { DMPFinaliseDialogComponent } from './dmp-finalise-dialog/dmp-finalise-d
}) })
export class DataManagementPlanEditorComponent extends BaseComponent implements AfterViewInit, IBreadCrumbComponent { export class DataManagementPlanEditorComponent extends BaseComponent implements AfterViewInit, IBreadCrumbComponent {
editMode = true; editMode = false;
breadCrumbs: Observable<BreadcrumbItem[]>; breadCrumbs: Observable<BreadcrumbItem[]>;
isNew = true; isNew = true;
@ -140,8 +141,7 @@ export class DataManagementPlanEditorComponent extends BaseComponent implements
.subscribe(async data => { .subscribe(async data => {
this.dataManagementPlan = JsonSerializer.fromJSONObject(data, DataManagementPlanModel); this.dataManagementPlan = JsonSerializer.fromJSONObject(data, DataManagementPlanModel);
this.formGroup = this.dataManagementPlan.buildForm(); this.formGroup = this.dataManagementPlan.buildForm();
this.editMode = this.dataManagementPlan.status !== 1; if (!this.editMode || this.dataManagementPlan.status === Status.Inactive) { this.formGroup.disable(); }
if (!this.editMode) { this.formGroup.disable(); }
if (this.formGroup.get('profile') && this.formGroup.get('profile').value) { if (this.formGroup.get('profile') && this.formGroup.get('profile').value) {
this.textCtrl.patchValue(this.formGroup.get('profile').value); this.textCtrl.patchValue(this.formGroup.get('profile').value);
} }

12
dmp-frontend/src/app/dmps/editor/dynamic-field-resolver/dynamic-dmp-field-resolver.component.scss
View File

@ -1,12 +0,0 @@
.full-width {
width: 100%;
}
.input-table {
table-layout: fixed;
}
.table-card .mat-grid-tile {
background: rgba(0, 0, 0, 0.32);
}

2
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.html
View File

@ -1,3 +1,3 @@
<app-auto-complete class="mat-form-field-full-width" placeholder="{{ form.get('data').value.label | translate }}" [inputData]="autoCompleteConfiguration" <app-auto-complete placeholder="{{ form.get('data').value.label | translate }}" [inputData]="autoCompleteConfiguration"
titleKey="label" [formCtrl]="form.get('value')" [displayFunction]="displayWith.bind(this)" [assignValueFunction]="assign.bind(this)"> titleKey="label" [formCtrl]="form.get('value')" [displayFunction]="displayWith.bind(this)" [assignValueFunction]="assign.bind(this)">
</app-auto-complete> </app-auto-complete>

14
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.ts
View File

@ -1,11 +1,10 @@
import { Field } from '../../../models/Field'; import { Component, Input, OnInit } from '@angular/core';
import { Component, OnInit, Input, Output, EventEmitter, forwardRef, ViewEncapsulation } from '@angular/core'; import { FormGroup } from '@angular/forms';
import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { DatasetProfileService } from '../../../services/dataset-profile.service';
import { ActivatedRoute } from '@angular/router'; import { ActivatedRoute } from '@angular/router';
import { RequestItem } from '../../../models/criteria/RequestItem';
import { BaseCriteria } from '../../../models/criteria/BaseCriteria';
import { AutocompleteLookupItem } from '../../../models/auto-complete/AutocompleteLookupItem'; import { AutocompleteLookupItem } from '../../../models/auto-complete/AutocompleteLookupItem';
import { RequestItem } from '../../../models/criteria/RequestItem';
import { Field } from '../../../models/Field';
import { DatasetProfileService } from '../../../services/dataset-profile.service';
import { AutoCompleteConfiguration } from '../../../shared/components/auto-complete/AutoCompleteConfiguration'; import { AutoCompleteConfiguration } from '../../../shared/components/auto-complete/AutoCompleteConfiguration';
declare var $: any; declare var $: any;
@ -13,8 +12,7 @@ declare var $: any;
@Component({ @Component({
selector: 'app-df-autocomplete', selector: 'app-df-autocomplete',
templateUrl: './autocomplete-remote.component.html', templateUrl: './autocomplete-remote.component.html',
styleUrls: ['./autocomplete-remote.component.css'], styleUrls: ['./autocomplete-remote.component.css']
encapsulation: ViewEncapsulation.None,
}) })
export class AutocompleteRemoteComponent implements OnInit/* , ControlValueAccessor */ { export class AutocompleteRemoteComponent implements OnInit/* , ControlValueAccessor */ {

3
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.css
View File

@ -1,3 +0,0 @@
.radio-label {
margin-left: 10px;
}

12
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
View File

@ -1,7 +1,5 @@
<div [formGroup]="form"> <mat-radio-group [formControl]="form.get('value')" [required]="field.validationRequired" style="display:inline-flex">
<mat-radio-group formControlName="value" [required]="field.validationRequired" style="display:inline-flex"> <mat-radio-button style="margin-right:15px;" name="{{field.id}}" value="true">Yes</mat-radio-button>
<mat-radio-button style="margin-right:15px;" name="{{field.id}}" value="true">Yes</mat-radio-button> <br>
<br> <mat-radio-button name="{{field.id}}" value="false">No</mat-radio-button>
<mat-radio-button name="{{field.id}}" value="false">No</mat-radio-button> </mat-radio-group>
</mat-radio-group>
</div>

7
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.css
View File

@ -1,7 +0,0 @@
.checkbox-label {
margin-left: 10px;
}
.checkbox-icon {
margin-left: 0px;
}

7
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
View File

@ -1,6 +1 @@
<div [formGroup]="form" class="form-group"> <mat-checkbox [formControl]="form.get('value')" [required]="field.validationRequired">{{field.data.label}}</mat-checkbox>
<mat-checkbox formControlName="value" [required]="field.validationRequired">{{field.data.label}}</mat-checkbox>
<!-- <input type="checkbox" formControlName="value"> -->
</div>
<!-- label="{{field.data.label}}" formControlName="form.get('value').value"-->

7
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.ts
View File

@ -1,14 +1,13 @@
import { Field } from '../../../models/Field'; import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms'; import { FormGroup } from '@angular/forms';
import { Component, Input, ViewEncapsulation, OnInit } from '@angular/core'; import { Field } from '../../../models/Field';
@Component({ @Component({
selector: 'app-df-checkbox', selector: 'app-df-checkbox',
templateUrl: './dynamic-field-checkbox.html', templateUrl: './dynamic-field-checkbox.html',
styleUrls: [ styleUrls: [
'./dynamic-field-checkbox.css' './dynamic-field-checkbox.css'
], ]
encapsulation: ViewEncapsulation.None
}) })
export class DynamicFieldCheckBoxComponent implements OnInit { export class DynamicFieldCheckBoxComponent implements OnInit {

3
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.css
View File

@ -0,0 +1,3 @@
.dynamic-field-dropdown {
width: 100%;
}

15
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
View File

@ -1,9 +1,6 @@
<div [formGroup]="form"> <mat-form-field class="dynamic-field-dropdown">
<mat-form-field> <mat-select [formControl]="form.get('value')" [required]="field.validationRequired">
<mat-select formControlName="value" [required]="field.validationRequired"> <mat-option *ngFor="let opt of field.data.options" [value]="assign(opt)">{{opt.label}}</mat-option>
<mat-option *ngFor="let opt of field.data.options" [value]="assign(opt)">{{opt.label}}</mat-option> </mat-select>
</mat-select> <mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> </mat-form-field>
</mat-form-field>
</div>

3
dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.ts
View File

@ -7,8 +7,7 @@ import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
templateUrl: './dynamic-field-dropdown.html', templateUrl: './dynamic-field-dropdown.html',
styleUrls: [ styleUrls: [
'./dynamic-field-dropdown.css' './dynamic-field-dropdown.css'
], ]
encapsulation: ViewEncapsulation.None
}) })
export class DynamicFieldDropdownComponent implements OnInit { export class DynamicFieldDropdownComponent implements OnInit {
@Input() field: Field; @Input() field: Field;

18
dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.css
View File

@ -1,18 +1,2 @@
.full-width { .dynamic-form-field {
width: 100%;
}
.field-component {
/* border:1px solid grey;
border-radius: 2px;
padding: 10px;
margin-bottom: 10px; */
}
.field-extended-desc {
color: lightslategray;
}
.content-left-margin {
margin-left: 10px;
} }

79
dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
View File

@ -1,73 +1,54 @@
<div *ngIf="form && field" [id]="field.id" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle"> <div *ngIf="form && field" [id]="field.id" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle" class="dynamic-form-field row">
<!-- <h5 *ngIf="field.title">{{field.title}}</h5> --> <!-- <h5 *ngIf="field.title">{{field.title}}</h5> -->
<div [class.content-left-margin]="field.title"> <h5 *ngIf="field.description" class="col-12">{{field.description}}</h5>
<h5 *ngIf="field.description">{{field.description}}</h5> <h5 *ngIf="field.extendedDescription" class="col-12">
<h5 *ngIf="field.extendedDescription" class="field-extended-desc"> <i>{{field.extendedDescription}}</i>
<i>{{field.extendedDescription}}</i> </h5>
</h5>
<div *ngSwitchCase="'freetext'"> <mat-form-field *ngSwitchCase="'freetext'" class="col-12">
<mat-form-field> <input matInput formControlName="value" placeholder="{{field.data.label}}" [required]="field.validationRequired">
<input matInput formControlName="value" placeholder="{{field.data.label}}" [required]="field.validationRequired"> <mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
| translate}}</mat-error> </mat-form-field>
</mat-form-field>
<div *ngSwitchCase="'combobox'" class="col-12">
<!--TODO-->
<div *ngIf="this.field.data.type === 'autocomplete'">
<app-df-autocomplete [form]="form" [field]="field"></app-df-autocomplete>
</div> </div>
<div *ngIf="this.field.data.type === 'wordlist'">
<div *ngSwitchCase="'combobox'"> <app-df-dropdown [form]="form" [field]="field"></app-df-dropdown>
<!--TODO-->
<div *ngIf="this.field.data.type === 'autocomplete'">
<app-df-autocomplete [form]="form" [field]="field"></app-df-autocomplete>
</div>
<div *ngIf="this.field.data.type === 'wordlist'">
<app-df-dropdown [form]="form" [field]="field"></app-df-dropdown>
</div>
</div> </div>
</div>
<div *ngSwitchCase="'checkBox'" class="checkbox"> <app-df-checkbox *ngSwitchCase="'checkBox'" class="checkbox" class="col-12" [form]="form" [field]="field"></app-df-checkbox>
<app-df-checkbox [form]="form" [field]="field"></app-df-checkbox>
</div>
<div *ngSwitchCase="'textarea'">
<mat-form-field>
<textarea matInput formControlName="value" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10"
[required]="field.validationRequired">
<mat-form-field *ngSwitchCase="'textarea'" class="col-12">
<textarea matInput formControlName="value" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="field.validationRequired">
</textarea> </textarea>
<button mat-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix mat-icon-button <button mat-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix mat-icon-button aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
aria-label="Clear" (click)="this.form.patchValue({'value': ''})"> <mat-icon>close</mat-icon>
<mat-icon>close</mat-icon> </button>
</button> <mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' </mat-form-field>
| translate}}</mat-error>
</mat-form-field>
</div> <app-df-boolean-decision *ngSwitchCase="'booleanDecision'" class="col-12" [form]="form" [field]="field"></app-df-boolean-decision>
<div *ngSwitchCase="'booleanDecision'"> <app-df-radiobox *ngSwitchCase="'radiobox'" class="col-12" [form]="form" [field]="field"></app-df-radiobox>
<app-df-boolean-decision [form]="form" [field]="field"></app-df-boolean-decision>
</div>
<div *ngSwitchCase="'radiobox'"> <div *ngSwitchCase="'label'" class="col-12"> </div>
<app-df-radiobox [form]="form" [field]="field"></app-df-radiobox>
</div>
<div *ngSwitchCase="'label'"> </div>
<!--<div [hidden]="isValid"> <!--<div [hidden]="isValid">
<mat-error *ngIf="isValidRequired">The field "{{field.data.label}}" <strong>required</strong></mat-error> <mat-error *ngIf="isValidRequired">The field "{{field.data.label}}" <strong>required</strong></mat-error>
<div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div> <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
<div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div> <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
<div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div> <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
</div>--> </div>-->
</div>
</div> </div>
<!-- <div [formGroup]="form" class="form-group"> <!-- <div [formGroup]="form" class="form-group">

3
dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts
View File

@ -13,8 +13,7 @@ import { VisibilityRulesService } from '../../utilities/visibility-rules/visibil
// styles: ['.checkBoxLabelCustom {font-weight: 700;}'] // styles: ['.checkBoxLabelCustom {font-weight: 700;}']
styleUrls: [ styleUrls: [
'./dynamic-form-field.component.css' './dynamic-form-field.component.css'
], ]
encapsulation: ViewEncapsulation.None
}) })
export class DynamicFormFieldComponent extends BaseComponent implements OnInit, OnChanges, OnDestroy { export class DynamicFormFieldComponent extends BaseComponent implements OnInit, OnChanges, OnDestroy {
@Input() field: Field; @Input() field: Field;

17
dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.css
View File

@ -1,18 +1,3 @@
.full-width { .dynamic-form-composite-field {
width: 100%;
}
.fieldset-component {
/* border:1px solid grey;
border-radius: 2px;
padding: 10px;
margin-bottom: 10px; */
}
.fieldset-extended-desc {
color: lightslategray;
}
.content-left-margin {
/* margin-left: 10px; */
} }

70
dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
View File

@ -1,47 +1,47 @@
<div *ngIf="form" [id]="compositeField.id" [formGroup]="form"> <div *ngIf="form" [id]="compositeField.id" [formGroup]="form" class="dynamic-form-composite-field row">
<div *ngIf="compositeField.fields.length == 1" class="fieldset-component"> <div *ngIf="compositeField.fields.length == 1" class="col-12">
<h5 *ngIf="compositeField.title" style="font-weight:bold; color: #3a3737;">{{compositeField.numbering}} <div class="row">
{{compositeField.title}} <h5 *ngIf="compositeField.title" style="font-weight:bold; color: #3a3737;" class="col-12">{{compositeField.numbering}}
<a *ngIf="this.markForConsiderationService.exists(compositeField)" (click)="markForConsideration()" style="cursor: pointer"> {{compositeField.title}}
Mark For Consideration <!-- <a *ngIf="this.markForConsiderationService.exists(compositeField)" (click)="markForConsideration()" style="cursor: pointer">
</a> Mark For Consideration
</h5> </a> -->
<div class="content-left-margin">
<h5 *ngIf="compositeField.description">{{compositeField.description}}</h5>
<h5 *ngIf="compositeField.extendedDescription" class="fieldset-extended-desc">
<i>{{compositeField.extendedDescription}}</i>
</h5> </h5>
<app-df-field *ngIf="compositeField.fields.length == 1" [field]="compositeField.fields[0]"></app-df-field> <h6 *ngIf="compositeField.description">{{compositeField.description}}</h6>
<h6 *ngIf="compositeField.extendedDescription" class="col-12">
<i>{{compositeField.extendedDescription}}</i>
</h6>
<app-df-field class="col-12" [field]="compositeField.fields[0]"></app-df-field>
</div> </div>
</div> </div>
<div *ngIf="compositeField.fields.length > 1" class="col-12">
<div class="row">
<div *ngIf="compositeField.fields.length > 1" class="fieldset-component"> <h5 *ngIf="compositeField.title" style="font-weight:bold; color: #3a3737;" class="col-12">{{compositeField.numbering}}{{compositeField.title}}</h5>
<h5 *ngIf="compositeField.title" style="font-weight:bold; color: #3a3737;">{{compositeField.numbering}}{{compositeField.title}}</h5> <div class="col-12">
<div class="content-left-margin"> <h5 *ngIf="compositeField.description" class="col-12">{{compositeField.description}}</h5>
<h5 *ngIf="compositeField.description">{{compositeField.description}}</h5> <h5 *ngIf="compositeField.extendedDescription" class="col-12">
<h5 *ngIf="compositeField.extendedDescription" class="fieldset-extended-desc"> <i>{{compositeField.extendedDescription}}</i>
<i>{{compositeField.extendedDescription}}</i> </h5>
</h5> <div *ngFor="let field of compositeField.fields; let i = index; trackBy: trackByFn " class="col-12">
<div *ngFor="let field of compositeField.fields; let i = index; trackBy: trackByFn "> <div class="row">
<div> <div class="col-12" *ngIf="(field?.multiplicity?.max - 1) > (field?.multiplicityItems?.length)">
<div *ngIf="(field?.multiplicity?.max - 1) > (field?.multiplicityItems?.length)"> <a (click)="addMultipleField(i)" style="cursor: pointer">
<a (click)="addMultipleField(i)" style="cursor: pointer"> Add one more field +
Add one more field + </a>
</a> </div>
</div> </div>
</div>
<app-df-field #{{}} [field]="field"></app-df-field> <div class="row">
<div *ngIf="field"> <app-df-field #{{}} [field]="field" class="col-12"></app-df-field>
<div *ngFor="let multipleField of field.multiplicityItems; let j = index; trackBy: trackByFn"> <div *ngIf="field" class="col-12">
<app-df-field [field]="multipleField"></app-df-field> <div *ngFor="let multipleField of field.multiplicityItems; let j = index; trackBy: trackByFn" class="row">
<app-df-field class="col-12" [field]="multipleField"></app-df-field>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>

3
dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
View File

@ -10,8 +10,7 @@ import { FormFocusService } from '../../utilities/form-focus-service/form-focus.
templateUrl: './dynamic-form-composite-field.html', templateUrl: './dynamic-form-composite-field.html',
styleUrls: [ styleUrls: [
'./dynamic-form-composite-field.css' './dynamic-form-composite-field.css'
], ]
encapsulation: ViewEncapsulation.None,
}) })
export class DynamicFormCompositeFieldComponent implements OnInit { export class DynamicFormCompositeFieldComponent implements OnInit {

10
dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
View File

@ -1,10 +1,8 @@
import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service'; import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { FieldGroup } from '../../models/FieldGroup'; import { FormArray, FormGroup } from '@angular/forms';
import { Component, Input, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { CompositeField } from '../../models/CompositeField'; import { CompositeField } from '../../models/CompositeField';
import { FieldGroup } from '../../models/FieldGroup';
import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
@Component({ @Component({

3
dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css
View File

@ -1,3 +0,0 @@
.section-component {
margin-bottom: 10px;
}

51
dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
View File

@ -1,9 +1,9 @@
<div class="panel-group" style="margin-top:10px;"> <div class="dynamic-form-section row">
<mat-accordion> <mat-accordion class="col-12">
<mat-expansion-panel expanded=true> <mat-expansion-panel class="row expansion-panel" expanded=true>
<mat-expansion-panel-header> <mat-expansion-panel-header>
<mat-panel-title> <mat-panel-title>
{{section.numbering}} {{section.title}} <h6>{{section.numbering}} {{section.title}}</h6>
</mat-panel-title> </mat-panel-title>
<mat-panel-description> <mat-panel-description>
<h3 *ngIf="section.description">{{section.description}}</h3> <h3 *ngIf="section.description">{{section.description}}</h3>
@ -11,34 +11,31 @@
</mat-panel-description> </mat-panel-description>
</mat-expansion-panel-header> </mat-expansion-panel-header>
<div *ngFor="let compositeField of section.compositeFields; let i = index; trackBy: trackByFn"> <div *ngFor="let compositeField of section.compositeFields; let i = index; trackBy: trackByFn" class="col-12">
<div *ngIf="isElementVisible(compositeField)"> <div *ngIf="isElementVisible(compositeField)" class="row">
<div *ngIf="(compositeField?.multiplicity?.max - 1) > (compositeField?.multiplicityItems?.length)"> <div *ngIf="(compositeField?.multiplicity?.max - 1) > (compositeField?.multiplicityItems?.length)" class="col-12">
<a (click)="addMultipleField(i)" style="cursor: pointer"> <button mat-button color="primary" (click)="addMultipleField(i)">
Add one more fieldset + Add one more fieldset +
</a>
</div>
<app-df-composite-field [compositeField]="compositeField"></app-df-composite-field>
<div *ngIf="compositeField">
<div *ngFor="let multipleCompositeField of compositeField.multiplicityItems; let j = index; trackBy: trackByFn">
<app-df-composite-field [compositeField]="multipleCompositeField"></app-df-composite-field>
</div>
<div *ngIf="compositeField.hasCommentField" [formGroup]="form.get('compositeFields').get(''+i)">
<mat-form-field>
<input matInput formControlName="commentFieldValue" placeholder="comment">
</mat-form-field>
</div>
<button mat-icon-button type="button" (click)="next(compositeField)">
<mat-icon>expand_more</mat-icon>
</button> </button>
</div> </div>
<app-df-composite-field class="col-12" [compositeField]="compositeField"></app-df-composite-field>
<div *ngIf="compositeField" class="col-12">
<div class="row">
<app-df-composite-field class="col-12" *ngFor="let multipleCompositeField of compositeField.multiplicityItems; let j = index; trackBy: trackByFn" [compositeField]="multipleCompositeField"></app-df-composite-field>
<mat-form-field *ngIf="compositeField.hasCommentField" class="col-12" [formGroup]="form.get('compositeFields').get(''+i)">
<input matInput formControlName="commentFieldValue" placeholder="comment">
</mat-form-field>
<div class="col"></div>
<button class="col-auto" mat-icon-button type="button" (click)="next(compositeField)">
<mat-icon>expand_more</mat-icon>
</button>
</div>
</div>
</div> </div>
</div> </div>
<div *ngIf="section?.sections" class="col-12">
<div *ngIf="section?.sections"> <div *ngFor="let itemsection of section.sections; let j = index;" class="row">
<div *ngFor="let itemsection of section.sections; let j = index;"> <app-df-section class="col-12" [section]="itemsection" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j"></app-df-section>
<app-df-section [section]="itemsection" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j"></app-df-section>
</div> </div>
</div> </div>
</mat-expansion-panel> </mat-expansion-panel>

5
dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.scss Normal file
View File

@ -0,0 +1,5 @@
.dynamic-form-section {
.expansion-panel {
margin-bottom: 1em;
}
}

5
dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
View File

@ -10,9 +10,8 @@ import { FormFocusService } from '../../utilities/form-focus-service/form-focus.
selector: 'app-df-section', selector: 'app-df-section',
templateUrl: './dynamic-form-section.html', templateUrl: './dynamic-form-section.html',
styleUrls: [ styleUrls: [
'./dynamic-form-section.css' './dynamic-form-section.scss'
], ]
encapsulation: ViewEncapsulation.None,
}) })
export class DynamicFormSectionComponent implements OnInit, AfterViewInit { export class DynamicFormSectionComponent implements OnInit, AfterViewInit {

33
dmp-frontend/src/app/form/dynamic-form/dynamic-form.component.html
View File

@ -1,32 +1,28 @@
<div class="dynamic-form-editor"> <form *ngIf="form" novalidate [formGroup]="form">
<!-- <mat-sidenav-container class="ng-sidebar-container"> --> <div class="dynamic-form-editor row">
<!-- <mat-sidenav mode="push" position="right" [(opened)]="visibleSidebar"> <!-- <mat-sidenav-container class="ng-sidebar-container"> -->
<!-- <mat-sidenav mode="push" position="right" [(opened)]="visibleSidebar">
<table-of-content class="toc-container full-height" [model]="datasetProfileDefinitionModel"></table-of-content> <table-of-content class="toc-container full-height" [model]="datasetProfileDefinitionModel"></table-of-content>
</mat-sidenav> --> </mat-sidenav> -->
<!-- <mat-sidenav-content> --> <!-- <mat-sidenav-content> -->
<!-- <button mat-raised-button color="primary" style="margin: 15px;" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button> --> <!-- <button mat-raised-button color="primary" style="margin: 15px;" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button> -->
<form *ngIf="form" novalidate [formGroup]="form">
<!-- <button mat-raised-button color="primary" *ngIf="dataModel&&dataModel.status.toString() != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" <!-- <button mat-raised-button color="primary" *ngIf="dataModel&&dataModel.status.toString() != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
(click)="save();" type="button">Save</button> (click)="save();" type="button">Save</button>
<button mat-raised-button color="primary" *ngIf="dataModel&&dataModel?.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" <button mat-raised-button color="primary" *ngIf="dataModel&&dataModel?.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
(click)="saveFinalize();" type="button">Save and Finalize</button> --> (click)="saveFinalize();" type="button">Save and Finalize</button> -->
<div> <!-- <ngb-pagination *ngIf="pages" [collectionSize]="pages.length*10" [page]="currentPageIndex" (pageChange)="changePageIndex($event)" aria-label="Default pagination"></ngb-pagination> -->
<div class="alignment-center"> <app-progress-bar class="col-12" *ngIf="form" [formGroup]="form"></app-progress-bar>
<!-- <ngb-pagination *ngIf="pages" [collectionSize]="pages.length*10" [page]="currentPageIndex" (pageChange)="changePageIndex($event)" aria-label="Default pagination"></ngb-pagination> -->
<app-progress-bar *ngIf="form" [formGroup]="form"></app-progress-bar>
</div>
</div>
<div *ngIf='datasetProfileDefinitionModel' class="col-md-12" id="form-container"> <div *ngIf='datasetProfileDefinitionModel' class="col-12" id="form-container">
<!-- <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()"> --> <!-- <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()"> -->
<mat-vertical-stepper #stepper [linear]="false"> <mat-vertical-stepper #stepper [linear]="false">
<div *ngFor="let page of datasetProfileDefinitionModel.pages; let z=index; trackBy: pageTrackByFn"> <div *ngFor="let page of datasetProfileDefinitionModel.pages; let z=index; trackBy: pageTrackByFn">
<div *ngFor="let section of page.sections; let i = index; trackBy: trackByFn"> <div *ngFor="let section of page.sections; let i = index; trackBy: trackByFn">
<mat-step [stepControl]="section"> <mat-step [stepControl]="section">
<ng-template matStepLabel>{{page.title}}</ng-template> <ng-template matStepLabel>{{page.title}}</ng-template>
<div *ngIf="stepper.selectedIndex == z"> <div *ngIf="stepper.selectedIndex == z" class="row">
<app-df-section [section]="section" [path]="z+1" [pathName]="'pages.'+z+'.sections.'+i"></app-df-section> <app-df-section class="col-12" [section]="section" [path]="z+1" [pathName]="'pages.'+z+'.sections.'+i"></app-df-section>
</div> </div>
</mat-step> </mat-step>
</div> </div>
@ -37,8 +33,7 @@
[pathName]="'sections.'+i"></df-section> [pathName]="'sections.'+i"></df-section>
</div> --> </div> -->
</div> </div>
</form> <!-- </mat-sidenav-content>
<!-- </mat-sidenav-content>
</mat-sidenav-container> --> </mat-sidenav-container> -->
</div> </div>
<!-- <p>Form value: {{ form.value | json }}</p> --> </form>

97
dmp-frontend/src/app/form/dynamic-form/dynamic-form.component.scss
View File

@ -1,63 +1,66 @@
.ng-sidebar {
width: 40%;
}
/* .toc-container {
background: #f9f9f9 none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 95%;
margin-bottom: 1em;
padding: 20px;
width: 100%;
} */
.ui-steps .ui-steps-item {
min-width: 10%;
}
.dynamic-form-editor { .dynamic-form-editor {
// background-color: #e0e0e0; mat-vertical-stepper {
// min-height: 80vh; background-color: #e0e0e0;
mat-vertical-stepper { }
background-color: #e0e0e0;
}
} }
.ng-sidebar-container { // .ng-sidebar {
overflow: inherit !important; // width: 40%;
// }
} // /* .toc-container {
// background: #f9f9f9 none repeat scroll 0 0;
// border: 1px solid #aaa;
// display: table;
// font-size: 95%;
// margin-bottom: 1em;
// padding: 20px;
// width: 100%;
// } */
/* .ng-sidebar__content { // .ui-steps .ui-steps-item {
overflow: inherit !important; // min-width: 10%;
} */ // }
.alignment-center{ // .dynamic-form-editor {
text-align: center; // // background-color: #e0e0e0;
} // // min-height: 80vh;
// mat-vertical-stepper {
// background-color: #e0e0e0;
// }
// }
// .ng-sidebar-container {
// overflow: inherit !important;
// }
// /* .ng-sidebar__content {
// overflow: inherit !important;
// } */
// .alignment-center{
// text-align: center;
// }
.demo-progress-bar-container { // .demo-progress-bar-container {
width: 100%; // width: 100%;
} // }
.form-progress-bar { // .form-progress-bar {
margin: 20px 0; // margin: 20px 0;
} // }
.full-width{ // .full-width{
width:100%; // width:100%;
} // }
.full-height{
height:100%;
}
// .full-height{
// height:100%;
// }

3
dmp-frontend/src/app/form/dynamic-form/dynamic-form.component.ts
View File

@ -24,8 +24,7 @@ import { VisibilityRulesService } from '../../utilities/visibility-rules/visibil
], ],
providers: [ providers: [
FormFocusService FormFocusService
], ]
encapsulation: ViewEncapsulation.None,
}) })
export class DynamicFormComponent extends BaseComponent implements OnInit, AfterViewInit { export class DynamicFormComponent extends BaseComponent implements OnInit, AfterViewInit {

2
dmp-frontend/src/app/projects/editor/project-editor.component.html
View File

@ -32,7 +32,7 @@
</div> </div>
<div class="col-auto"> <div class="col-auto">
<button mat-button (click)="goToProjectDmps()"> <button mat-button (click)="goToProjectDmps()">
<mat-icon class="mat-24">arrow_forward</mat-icon> <mat-icon class="mat-24">arrow_right_alt</mat-icon>
<span>{{'PROJECT-EDITOR.ACTIONS.GO-TO-DMPS' | translate}}</span> <span>{{'PROJECT-EDITOR.ACTIONS.GO-TO-DMPS' | translate}}</span>
</button> </button>
</div> </div>

35
dmp-frontend/src/app/projects/editor/project-editor.component.scss
View File

@ -15,41 +15,6 @@
} }
} }
// .table-card .mat-grid-tile {
// background: rgba(0, 0, 0, 0.32);
// }
// .project-editor {
// .fill-space {
// flex: 1 1 auto;
// }
// .mat-card {
// margin: 16px 0;
// }
// p {
// margin: 16px;
// }
// .left-button {
// float: left;
// }
// .right-button {
// float: right;
// }
// .description-area {
// height: 100px;
// }
// }
// h3 {
// margin-top: 0px;
// }
.hidden { .hidden {
display: none; display: none;
} }

27
dmp-frontend/src/app/shared/components/auto-complete/auto-complete.component.html
View File

@ -1,15 +1,12 @@
<div class="auto-complete"> <mat-form-field class="auto-complete">
<mat-form-field> <input matInput type="text" [placeholder]="placeholder" [formControl]="textFormCtrl" [matAutocomplete]="auto" [required]="required" [errorStateMatcher]="this">
<input matInput type="text" [placeholder]="placeholder" [formControl]="textFormCtrl" [matAutocomplete]="auto" [required]="required" <mat-error *ngIf="validationErrorString">{{validationErrorString}}</mat-error>
[errorStateMatcher]="this"> <mat-error *ngIf="formCtrl && formCtrl.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="validationErrorString">{{validationErrorString}}</mat-error> <mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>
<mat-error *ngIf="formCtrl && formCtrl.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFunction" (optionSelected)="this.optionSelected($event)">
<mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner> <mat-option *ngFor="let option of options" [value]="option">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFunction" (optionSelected)="this.optionSelected($event)"> {{ this.printText(option) }} |
<mat-option *ngFor="let option of options" [value]="option"> <small *ngIf="_subtitleFn">{{subtitleFn(option)}}</small>
{{ this.printText(option) }} | </mat-option>
<small *ngIf="_subtitleFn">{{subtitleFn(option)}}</small> </mat-autocomplete>
</mat-option> </mat-form-field>
</mat-autocomplete>
</mat-form-field>
</div>

14
dmp-frontend/src/app/shared/components/auto-complete/auto-complete.component.scss
View File

@ -1,6 +1,16 @@
.auto-complete { .auto-complete {
width: 100%;
.mat-form-field { .mat-form-field {
width: 100%; padding: 0 3px;
padding: 3px; }
.not-loading {
display: none;
} }
} }
.two-line-mat-option {
height: 3.5em;
line-height: 1.2em;
}

38
dmp-frontend/src/app/shared/components/external-items/external-item-listing/external-item-listing.component.html
View File

@ -1,25 +1,15 @@
<div> <div class="row">
<div class="container"> <mat-form-field class="col-md-6">
<div class="row"> <mat-select placeholder="Sources" [(ngModel)]="choice" (selectionChange)="selectionChange($event)" [disabled]="viewOnly">
<div class="col-md-3"> <mat-option *ngFor="let option of options" [value]="option.key">
<mat-form-field> {{ option.label }}
<mat-select placeholder="Sources" [(ngModel)]="choice" (selectionChange)="selectionChange($event)" [disabled]="viewOnly"> </mat-option>
<mat-option *ngFor="let option of options" [value]="option.key"> </mat-select>
{{ option.label }} </mat-form-field>
</mat-option> <app-external-item class="col-md-6" [autoCompleteConfiguration]="autoCompleteConfiguration" [formGroup]="formGroup" [displayFunction]="displayFunction" [placeholder]="placeholder" [subtitleFunction]="subtitleFunction" (onItemChange)="this.onItemChangeFunc($event)" [formCtrl]="formControl" [disabled]="disabled">
</mat-select> </app-external-item>
</mat-form-field> </div>
</div> <div class="row" *ngFor="let suggestion of formGroup['controls']; let i = index">
<div> <ng-container *ngTemplateOutlet="parentTemplate; context: { $implicit: suggestion, index: i,function: this.deleteItem.bind(this) }">
<app-external-item class="col-md-9" [autoCompleteConfiguration]="autoCompleteConfiguration" </ng-container>
[formGroup]="formGroup" [displayFunction]="displayFunction" [placeholder]="placeholder" [subtitleFunction]="subtitleFunction"
(onItemChange)="this.onItemChangeFunc($event)" [formCtrl]="formControl" [disabled]="disabled">
</app-external-item>
</div>
</div>
<div class="row" *ngFor="let suggestion of formGroup['controls']; let i = index">
<ng-container *ngTemplateOutlet="parentTemplate; context: { $implicit: suggestion, index: i,function: this.deleteItem.bind(this) }">
</ng-container>
</div>
</div>
</div> </div>

3
dmp-frontend/src/app/shared/components/external-items/external-item-listing/external-item-listing.component.scss
View File

@ -1,3 +0,0 @@
.fxItems {
flex: 1 1 0
}

2
dmp-frontend/src/app/shared/components/figurecard/figurecard.component.ts
View File

@ -16,7 +16,7 @@ export class FigurecardComponent implements OnInit {
@Input() linearColor: string; @Input() linearColor: string;
@Input() boxShadow: string; @Input() boxShadow: string;
@Input() routelLink: string; @Input() routelLink: string;
@Input() hasFootContent = true; @Input() hasFootContent = false;
@Input() buttonTitle: string; @Input() buttonTitle: string;
@Input() buttonRedirectLink: string; @Input() buttonRedirectLink: string;

4
dmp-frontend/src/assets/lang/en.json
View File

@ -217,8 +217,8 @@
"GO-TO-DATASETS": "Go To Datasets", "GO-TO-DATASETS": "Go To Datasets",
"SAVE": "Save", "SAVE": "Save",
"CANCEL": "Cancel", "CANCEL": "Cancel",
"DELETE": "Remove", "DELETE": "Delete",
"FINALISE": "Finalise" "FINALISE": "Finalize"
} }
}, },
"DMP-PROFILE-LISTING": { "DMP-PROFILE-LISTING": {