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">
<h3 *ngIf="isNew">{{ 'DATASET-WIZARD.TITLE.NEW' | translate }}</h3>
<div fxLayout="row" fxLayoutAlign="space-between center">
<div>
<div class="row">
<div class="col-auto">
<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.get('status').value == DatasetStatus.Finalised && viewOnly"> - {{
'GENERAL.STATUSES.FINALISED' | translate }}</h3>
</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>
</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>
</button>
</div>
<div *ngIf="this.datasetProfileDefinitionModel || this.datasetWizardModel?.datasetProfileDefinition">
<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">{{
<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">{{
'DATASET-WIZARD.ACTIONS.SAVE' | translate }}</button>
<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">{{
<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">{{
'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;"
(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)="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>
<div class="fill-space"></div>
</div>
<mat-horizontal-stepper [linear]="isLinear" #stepper>
<mat-step [stepControl]="formGroup">
<div *ngIf="this.isActiveStep(0)">
<div class="row">
<mat-horizontal-stepper [linear]="isLinear" class="col-12" #stepper>
<mat-step class="step-container" [stepControl]="formGroup">
<ng-template matStepLabel>{{'DATASET-WIZARD.FIRST-STEP.TITLE' | translate}}</ng-template>
<form *ngIf="formGroup" [formGroup]="formGroup">
<app-single-auto-complete [required]="true" [reactiveFormControl]="formGroup.get('dmp')" placeholder="{{'DATASET-EDITOR.FIELDS.DMP' | translate}}"
[configuration]="dmpAutoCompleteConfiguration">
</app-single-auto-complete>
<ng-template matStepLabel>{{'DATASET-WIZARD.FIRST-STEP.TITLE' | translate}}</ng-template>
<mat-form-field formGroupName="profile">
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="id">
<mat-option *ngFor="let profile of availableProfiles" [value]="profile.id">
{{profile.label}}
</mat-option>
</mat-select>
<mat-error *ngIf="baseErrorModel?.status">{{baseErrorModel['Criteria.status']}}</mat-error>
</mat-form-field>
<app-dataset-editor-component [formGroup]="formGroup"></app-dataset-editor-component>
<div class="navigation-buttons-container">
<button matStepperNext mat-raised-button style="float:right;" color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' |
translate}}
</button>
<div *ngIf="this.isActiveStep(0)" class="row">
<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>
<mat-form-field class="col-md-6" formGroupName="profile">
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" [required]="true" formControlName="id">
<mat-option *ngFor="let profile of availableProfiles" [value]="profile.id">
{{profile.label}}
</mat-option>
</mat-select>
<mat-error *ngIf="baseErrorModel?.status">{{baseErrorModel['Criteria.status']}}</mat-error>
</mat-form-field>
<app-dataset-editor-component class="col-12" [formGroup]="formGroup"></app-dataset-editor-component>
<div class="col-12">
<div class="row">
<div class="col"></div>
<div class="col-auto"><button matStepperNext mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.NEXT' | translate}}</button></div>
</div>
</div>
</div>
</form>
</div>
</mat-step>
<mat-step [stepControl]="formGroup">
<div *ngIf="this.isActiveStep(1)">
</mat-step>
<mat-step class="step-container" [stepControl]="formGroup">
<ng-template matStepLabel>{{'DATASET-WIZARD.SECOND-STEP.TITLE' | translate}}</ng-template>
<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>
<mat-card-header>
<mat-card-title class="thick" *ngIf='!viewOnly'>
{{'DATASET-EDITOR.FIELDS.DATAREPOSITORIES' | translate}}
<button mat-raised-button color="primary" (click)="addDataRepository()">
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
</button>
</mat-card-title>
</mat-card-header>
<app-external-item-listing *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 #externalDatasetsTemplate let-suggestion let-i="index" let-callback="function">
<div class="col-12 row align-items-center">
<div class="col">
<p>
{{i+1}}) {{suggestion.get('label').value}}
</p>
</div>
<div class="col-auto">
<mat-form-field>
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASET-INFO' | translate}}" type="text" name="info" [formControl]="suggestion.get('info')">
</mat-form-field>
</div>
<ng-template #dataRepositoriesTemplate let-suggestion let-i="index" let-callback="function">
<div class="col-md-2">
<p>
{{i+1}}) {{suggestion.get('label').value}}
</p>
</div>
<div class="col-md-8">
<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-md-2" *ngIf='!viewOnly'>
<button mat-button (click)="callback(i)">
<mat-icon>close</mat-icon>
</button>
</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>
<div class="col-auto">
<mat-form-field>
<mat-select placeholder="{{'DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-DATASET-TYPE' | translate}}" [formControl]="suggestion.get('type')">
<mat-option [value]="0">{{'TYPES.EXTERNAL-DATASET-TYPE.SOURCE' | translate}}</mat-option>
<mat-option [value]="1">{{'TYPES.EXTERNAL-DATASET-TYPE.OUTPUT' | translate}}</mat-option>
</mat-select>
</mat-form-field>
</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>
<ng-template #externalDatasetsTemplate let-suggestion let-i="index" let-callback="function">
<div class="col-md-2">
<p>
{{i+1}}) {{suggestion.get('label').value}}
</p>
</div>
<div class="col-md-4">
<mat-form-field>
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.EXTERNAL-DATASET-INFO' | translate}}" type="text" name="info"
[formControl]="suggestion.get('info')">
</mat-form-field>
<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.REGISTRIES' | translate}}</h4>
<div class="col"></div>
<div class="col-auto"><button mat-raised-button color="primary" (click)="addRegistry()">
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
</button>
</div>
</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">
<mat-form-field>
<mat-select placeholder="{{'DATASET-WIZARD.EDITOR.FIELDS.EXTERNAL-DATASET-TYPE' | translate}}" [formControl]="suggestion.get('type')">
<mat-option [value]="0">{{'TYPES.EXTERNAL-DATASET-TYPE.SOURCE' | translate}}</mat-option>
<mat-option [value]="1">{{'TYPES.EXTERNAL-DATASET-TYPE.OUTPUT' | translate}}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="col-md-2">
<button mat-button (click)="callback(i)" *ngIf='!viewOnly'>
<mat-icon>close</mat-icon>
</button>
</div>
</ng-template>
</mat-card>
<ng-template #registriesTemplate let-suggestion let-i="index" let-callback="function">
<div class="col-12 row align-items-center">
<div class="col">
<p>
{{i+1}}) {{suggestion.get('label').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>
<mat-card>
<mat-card-header>
<mat-card-title class="thick" *ngIf='!viewOnly'>
{{'DATASET-EDITOR.FIELDS.REGISTRIES' | translate}}
<button mat-raised-button color="primary" (click)="addRegistry()">
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
</button>
</mat-card-title>
</mat-card-header>
<app-external-item-listing *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>
<ng-template #registriesTemplate let-suggestion let-i="index" let-callback="function">
<div class="col-md-2">
<p>
{{i+1}}) {{suggestion.get('label').value}}
</p>
<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.SERVICES' | translate}}</h4>
<div class="col"></div>
<div class="col-auto">
<button mat-raised-button color="primary" (click)="addService()">
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
</button>
</div>
</div>
</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>
<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)">
</app-external-item-listing>
<mat-card>
<mat-card-header>
<mat-card-title class="thick" *ngIf='!viewOnly'>
{{'DATASET-EDITOR.FIELDS.SERVICES' | translate}}
<button mat-raised-button color="primary" (click)="addService()">
{{'DATASET-EDITOR.FIELDS.CREATE'|translate}}
</button>
</mat-card-title>
</mat-card-header>
<app-external-item-listing *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)">
</app-external-item-listing>
<ng-template #servicesTemplate let-suggestion let-i="index" let-callback="function">
<div class="col-12 row align-items-center">
<div class="col">
<p>
{{i+1}}) {{suggestion.get('label').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>
<ng-template #servicesTemplate let-suggestion let-i="index" let-callback="function">
<div class="col-md-2">
<p>
{{i+1}}) {{suggestion.get('label').value}}
</p>
<mat-card class="col-12 external-item-card">
<div class="row">
<div class="col-12 row">
<h4 class="col-auto">{{'DATASET-EDITOR.FIELDS.TAGS' | translate}}</h4>
</div>
</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>
<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>
<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-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">
<button matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK' | translate}}</button>
<button matStepperNext mat-raised-button color="primary" style="float:right;" (click)="getDefinition()">{{'DATASET-WIZARD.ACTIONS.NEXT'
<button style="margin-top:10px;" matStepperPrevious mat-raised-button color="primary">{{'DATASET-WIZARD.ACTIONS.BACK'
| translate}}</button>
</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>
</mat-step>
<mat-step>
<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>
</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 {
.full-width {
width: 100%;
}
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;
}
}
.step-container {
margin-top: 1em;
}
mat-card-title.thick {
font-weight: bold;
}
.external-item-card {
margin-top: 1em;
}
h3{
margin-top: 0px;
.external-item-action-row,
.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 { MatDialog, MatSnackBar, MatStepper } from '@angular/material';
import { ActivatedRoute, Params, Router } from '@angular/router';
@ -46,8 +46,7 @@ import { ServicesReferencedModelHelperComponent } from '../dataset-referenced-mo
@Component({
selector: 'app-dataset-wizard-component',
templateUrl: 'dataset-wizard.component.html',
styleUrls: ['./dataset-wizard.component.scss'],
encapsulation: ViewEncapsulation.None,
styleUrls: ['./dataset-wizard.component.scss']
})
export class DatasetWizardComponent extends BaseComponent implements OnInit, AfterViewInit, IBreadCrumbComponent {
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">
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label"
required>
<mat-form-field class="col-md-6">
<input matInput placeholder="{{'DATASET-EDITOR.FIELDS.NAME' | translate}}" type="text" name="label" formControlName="label" required>
<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-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">
<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-form-field>
<mat-form-field class="full-width">
<textarea matInput class="description-area" placeholder="{{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}"
formControlName="description"></textarea>
<mat-form-field class="col-12">
<textarea matInput class="description-area" placeholder="{{'DATASET-EDITOR.FIELDS.DESCRIPTION' | translate}}" formControlName="description"></textarea>
<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-form-field>
</form>
<!-- <div *ngIf="formGroup"> {{ formGroup.value | json }}</div> -->
</div>
</div>
</form>

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

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

@ -1,32 +1,3 @@
.input-table {
table-layout: fixed;
}
.dmp-editor {
.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 { JsonSerializer } from '../../utilities/JsonSerializer';
import { DMPFinaliseDialogComponent } from './dmp-finalise-dialog/dmp-finalise-dialog.component';
import { Status } from '../../models/Status';
@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 {
editMode = true;
editMode = false;
breadCrumbs: Observable<BreadcrumbItem[]>;
isNew = true;
@ -140,8 +141,7 @@ export class DataManagementPlanEditorComponent extends BaseComponent implements
.subscribe(async data => {
this.dataManagementPlan = JsonSerializer.fromJSONObject(data, DataManagementPlanModel);
this.formGroup = this.dataManagementPlan.buildForm();
this.editMode = this.dataManagementPlan.status !== 1;
if (!this.editMode) { this.formGroup.disable(); }
if (!this.editMode || this.dataManagementPlan.status === Status.Inactive) { this.formGroup.disable(); }
if (this.formGroup.get('profile') && 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)">
</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, OnInit, Input, Output, EventEmitter, forwardRef, ViewEncapsulation } from '@angular/core';
import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
import { DatasetProfileService } from '../../../services/dataset-profile.service';
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
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 { 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';
declare var $: any;
@ -13,8 +12,7 @@ declare var $: any;
@Component({
selector: 'app-df-autocomplete',
templateUrl: './autocomplete-remote.component.html',
styleUrls: ['./autocomplete-remote.component.css'],
encapsulation: ViewEncapsulation.None,
styleUrls: ['./autocomplete-remote.component.css']
})
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 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>
<br>
<mat-radio-button name="{{field.id}}" value="false">No</mat-radio-button>
</mat-radio-group>
</div>
<mat-radio-group [formControl]="form.get('value')" [required]="field.validationRequired" style="display:inline-flex">
<mat-radio-button style="margin-right:15px;" name="{{field.id}}" value="true">Yes</mat-radio-button>
<br>
<mat-radio-button name="{{field.id}}" value="false">No</mat-radio-button>
</mat-radio-group>

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 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"-->
<mat-checkbox [formControl]="form.get('value')" [required]="field.validationRequired">{{field.data.label}}</mat-checkbox>

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 { Component, Input, ViewEncapsulation, OnInit } from '@angular/core';
import { Field } from '../../../models/Field';
@Component({
selector: 'app-df-checkbox',
templateUrl: './dynamic-field-checkbox.html',
styleUrls: [
'./dynamic-field-checkbox.css'
],
encapsulation: ViewEncapsulation.None
]
})
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>
<mat-select formControlName="value" [required]="field.validationRequired">
<mat-option *ngFor="let opt of field.data.options" [value]="assign(opt)">{{opt.label}}</mat-option>
</mat-select>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<mat-form-field class="dynamic-field-dropdown">
<mat-select [formControl]="form.get('value')" [required]="field.validationRequired">
<mat-option *ngFor="let opt of field.data.options" [value]="assign(opt)">{{opt.label}}</mat-option>
</mat-select>
<mat-error *ngIf="form.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>

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',
styleUrls: [
'./dynamic-field-dropdown.css'
],
encapsulation: ViewEncapsulation.None
]
})
export class DynamicFieldDropdownComponent implements OnInit {
@Input() field: Field;

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

@ -1,18 +1,2 @@
.full-width {
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;
.dynamic-form-field {
}

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> -->
<div [class.content-left-margin]="field.title">
<h5 *ngIf="field.description">{{field.description}}</h5>
<h5 *ngIf="field.extendedDescription" class="field-extended-desc">
<i>{{field.extendedDescription}}</i>
</h5>
<h5 *ngIf="field.description" class="col-12">{{field.description}}</h5>
<h5 *ngIf="field.extendedDescription" class="col-12">
<i>{{field.extendedDescription}}</i>
</h5>
<div *ngSwitchCase="'freetext'">
<mat-form-field>
<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'
| translate}}</mat-error>
</mat-form-field>
<mat-form-field *ngSwitchCase="'freetext'" class="col-12">
<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'
| translate}}</mat-error>
</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 *ngSwitchCase="'combobox'">
<!--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 *ngIf="this.field.data.type === 'wordlist'">
<app-df-dropdown [form]="form" [field]="field"></app-df-dropdown>
</div>
</div>
<div *ngSwitchCase="'checkBox'" class="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">
<app-df-checkbox *ngSwitchCase="'checkBox'" class="checkbox" class="col-12" [form]="form" [field]="field"></app-df-checkbox>
<mat-form-field *ngSwitchCase="'textarea'" class="col-12">
<textarea matInput formControlName="value" matTextareaAutosize matAutosizeMinRows="2" matAutosizeMaxRows="10" [required]="field.validationRequired">
</textarea>
<button mat-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix mat-icon-button
aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
<mat-icon>close</mat-icon>
</button>
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED'
| translate}}</mat-error>
</mat-form-field>
<button mat-button *ngIf="!form.get('value').disabled && form.get('value').value" matSuffix mat-icon-button aria-label="Clear" (click)="this.form.patchValue({'value': ''})">
<mat-icon>close</mat-icon>
</button>
<mat-error *ngIf="form.get('value')['errors'] && form.get('value')['errors']['required']">{{'GENERAL.VALIDATION.REQUIRED' | 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-boolean-decision [form]="form" [field]="field"></app-df-boolean-decision>
</div>
<app-df-radiobox *ngSwitchCase="'radiobox'" class="col-12" [form]="form" [field]="field"></app-df-radiobox>
<div *ngSwitchCase="'radiobox'">
<app-df-radiobox [form]="form" [field]="field"></app-df-radiobox>
</div>
<div *ngSwitchCase="'label'"> </div>
<div *ngSwitchCase="'label'" class="col-12"> </div>
<!--<div [hidden]="isValid">
<!--<div [hidden]="isValid">
<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="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>-->
</div>
</div>
<!-- <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;}']
styleUrls: [
'./dynamic-form-field.component.css'
],
encapsulation: ViewEncapsulation.None
]
})
export class DynamicFormFieldComponent extends BaseComponent implements OnInit, OnChanges, OnDestroy {
@Input() field: Field;

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

@ -1,18 +1,3 @@
.full-width {
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; */
.dynamic-form-composite-field {
}

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

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',
styleUrls: [
'./dynamic-form-composite-field.css'
],
encapsulation: ViewEncapsulation.None,
]
})
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 { FieldGroup } from '../../models/FieldGroup';
import { Component, Input, OnInit, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
import { FormGroup, Validators, FormControl, FormArray } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { FormArray, FormGroup } from '@angular/forms';
import { CompositeField } from '../../models/CompositeField';
import { FieldGroup } from '../../models/FieldGroup';
import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
@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;">
<mat-accordion>
<mat-expansion-panel expanded=true>
<div class="dynamic-form-section row">
<mat-accordion class="col-12">
<mat-expansion-panel class="row expansion-panel" expanded=true>
<mat-expansion-panel-header>
<mat-panel-title>
{{section.numbering}} {{section.title}}
<h6>{{section.numbering}} {{section.title}}</h6>
</mat-panel-title>
<mat-panel-description>
<h3 *ngIf="section.description">{{section.description}}</h3>
@ -11,34 +11,31 @@
</mat-panel-description>
</mat-expansion-panel-header>
<div *ngFor="let compositeField of section.compositeFields; let i = index; trackBy: trackByFn">
<div *ngIf="isElementVisible(compositeField)">
<div *ngIf="(compositeField?.multiplicity?.max - 1) > (compositeField?.multiplicityItems?.length)">
<a (click)="addMultipleField(i)" style="cursor: pointer">
<div *ngFor="let compositeField of section.compositeFields; let i = index; trackBy: trackByFn" class="col-12">
<div *ngIf="isElementVisible(compositeField)" class="row">
<div *ngIf="(compositeField?.multiplicity?.max - 1) > (compositeField?.multiplicityItems?.length)" class="col-12">
<button mat-button color="primary" (click)="addMultipleField(i)">
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>
</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 *ngIf="section?.sections">
<div *ngFor="let itemsection of section.sections; let j = index;">
<app-df-section [section]="itemsection" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j"></app-df-section>
<div *ngIf="section?.sections" class="col-12">
<div *ngFor="let itemsection of section.sections; let j = index;" class="row">
<app-df-section class="col-12" [section]="itemsection" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j"></app-df-section>
</div>
</div>
</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',
templateUrl: './dynamic-form-section.html',
styleUrls: [
'./dynamic-form-section.css'
],
encapsulation: ViewEncapsulation.None,
'./dynamic-form-section.scss'
]
})
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">
<!-- <mat-sidenav-container class="ng-sidebar-container"> -->
<!-- <mat-sidenav mode="push" position="right" [(opened)]="visibleSidebar">
<form *ngIf="form" novalidate [formGroup]="form">
<div class="dynamic-form-editor row">
<!-- <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>
</mat-sidenav> -->
<!-- <mat-sidenav-content> -->
<!-- <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">
<!-- <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" *ngIf="dataModel&&dataModel.status.toString() != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
(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;"
(click)="saveFinalize();" type="button">Save and Finalize</button> -->
<div>
<div class="alignment-center">
<!-- <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>
<!-- <ngb-pagination *ngIf="pages" [collectionSize]="pages.length*10" [page]="currentPageIndex" (pageChange)="changePageIndex($event)" aria-label="Default pagination"></ngb-pagination> -->
<app-progress-bar class="col-12" *ngIf="form" [formGroup]="form"></app-progress-bar>
<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()"> -->
<mat-vertical-stepper #stepper [linear]="false">
<div *ngFor="let page of datasetProfileDefinitionModel.pages; let z=index; trackBy: pageTrackByFn">
<div *ngFor="let section of page.sections; let i = index; trackBy: trackByFn">
<mat-step [stepControl]="section">
<ng-template matStepLabel>{{page.title}}</ng-template>
<div *ngIf="stepper.selectedIndex == z">
<app-df-section [section]="section" [path]="z+1" [pathName]="'pages.'+z+'.sections.'+i"></app-df-section>
<div *ngIf="stepper.selectedIndex == z" class="row">
<app-df-section class="col-12" [section]="section" [path]="z+1" [pathName]="'pages.'+z+'.sections.'+i"></app-df-section>
</div>
</mat-step>
</div>
@ -37,8 +33,7 @@
[pathName]="'sections.'+i"></df-section>
</div> -->
</div>
</form>
<!-- </mat-sidenav-content>
<!-- </mat-sidenav-content>
</mat-sidenav-container> -->
</div>
<!-- <p>Form value: {{ form.value | json }}</p> -->
</div>
</form>

103
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 {
// background-color: #e0e0e0;
// min-height: 80vh;
mat-vertical-stepper {
background-color: #e0e0e0;
}
mat-vertical-stepper {
background-color: #e0e0e0;
}
}
.ng-sidebar-container {
overflow: inherit !important;
}
// .ng-sidebar {
// width: 40%;
// }
/* .ng-sidebar__content {
overflow: inherit !important;
} */
// /* .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%;
// } */
.alignment-center{
text-align: center;
}
// .ui-steps .ui-steps-item {
// min-width: 10%;
// }
// .dynamic-form-editor {
// // 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 {
margin: 20px 0;
// }
}
// .form-progress-bar {
.full-width{
width:100%;
}
.full-height{
height:100%;
}
// margin: 20px 0;
// }
// .full-width{
// width: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: [
FormFocusService
],
encapsulation: ViewEncapsulation.None,
]
})
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 class="col-auto">
<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>
</button>
</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 {
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>
<input matInput type="text" [placeholder]="placeholder" [formControl]="textFormCtrl" [matAutocomplete]="auto" [required]="required"
[errorStateMatcher]="this">
<mat-error *ngIf="validationErrorString">{{validationErrorString}}</mat-error>
<mat-error *ngIf="formCtrl && formCtrl.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFunction" (optionSelected)="this.optionSelected($event)">
<mat-option *ngFor="let option of options" [value]="option">
{{ this.printText(option) }} |
<small *ngIf="_subtitleFn">{{subtitleFn(option)}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
<mat-form-field class="auto-complete">
<input matInput type="text" [placeholder]="placeholder" [formControl]="textFormCtrl" [matAutocomplete]="auto" [required]="required" [errorStateMatcher]="this">
<mat-error *ngIf="validationErrorString">{{validationErrorString}}</mat-error>
<mat-error *ngIf="formCtrl && formCtrl.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-progress-spinner matSuffix mode="indeterminate" *ngIf="loading" [diameter]="22"></mat-progress-spinner>
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFunction" (optionSelected)="this.optionSelected($event)">
<mat-option *ngFor="let option of options" [value]="option">
{{ this.printText(option) }} |
<small *ngIf="_subtitleFn">{{subtitleFn(option)}}</small>
</mat-option>
</mat-autocomplete>
</mat-form-field>

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

@ -1,6 +1,16 @@
.auto-complete {
width: 100%;
.mat-form-field {
width: 100%;
padding: 3px;
padding: 0 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="container">
<div class="row">
<div class="col-md-3">
<mat-form-field>
<mat-select placeholder="Sources" [(ngModel)]="choice" (selectionChange)="selectionChange($event)" [disabled]="viewOnly">
<mat-option *ngFor="let option of options" [value]="option.key">
{{ option.label }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div>
<app-external-item class="col-md-9" [autoCompleteConfiguration]="autoCompleteConfiguration"
[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 class="row">
<mat-form-field class="col-md-6">
<mat-select placeholder="Sources" [(ngModel)]="choice" (selectionChange)="selectionChange($event)" [disabled]="viewOnly">
<mat-option *ngFor="let option of options" [value]="option.key">
{{ option.label }}
</mat-option>
</mat-select>
</mat-form-field>
<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">
</app-external-item>
</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>

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() boxShadow: string;
@Input() routelLink: string;
@Input() hasFootContent = true;
@Input() hasFootContent = false;
@Input() buttonTitle: string;
@Input() buttonRedirectLink: string;

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

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