ui fixes on sidenav and plan/dmp editor to match the production
This commit is contained in:
parent
ea7b267460
commit
69cc029438
|
|
@ -21,7 +21,7 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 270px;
|
width: 260px;
|
||||||
background: #ffffff 0% 0% no-repeat padding-box;
|
background: #ffffff 0% 0% no-repeat padding-box;
|
||||||
box-shadow: 0px 0px 16px 2px #00000029;
|
box-shadow: 0px 0px 16px 2px #00000029;
|
||||||
border-right-width: 0px;
|
border-right-width: 0px;
|
||||||
|
|
|
||||||
|
|
@ -76,89 +76,91 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row editor-content">
|
<div class="container-fluid">
|
||||||
<div style="width: 22em;" class="d-flex flex-column">
|
<div class="row editor-content">
|
||||||
<div class="stepper-back row">
|
<div style="width: 22em;" class="d-flex flex-column">
|
||||||
<div class="col-auto d-flex align-items-center back-to-dmp" (click)="backToDmp(this.formGroup.get('dmpId').value)">
|
<div class="stepper-back row">
|
||||||
<mat-icon class="back-icon pointer">chevron_left</mat-icon>
|
<div class="col-auto d-flex align-items-center back-to-dmp" (click)="backToDmp(this.formGroup.get('dmpId').value)">
|
||||||
<span class="pointer">{{'DESCRIPTION-EDITOR.ACTIONS.BACK-TO' | translate}}</span>
|
<mat-icon class="back-icon pointer">chevron_left</mat-icon>
|
||||||
|
<span class="pointer">{{'DESCRIPTION-EDITOR.ACTIONS.BACK-TO' | translate}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto dmp-label ml-1">{{'DESCRIPTION-EDITOR.DMP' | translate}}</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto dmp-label ml-1">{{'DESCRIPTION-EDITOR.DMP' | translate}}</div>
|
<div class="row stepper-title">
|
||||||
</div>
|
<div class="col-12 pl-0 mb-1"><span>{{'DESCRIPTION-EDITOR.TOC.TITLE' | translate}}</span></div>
|
||||||
<div class="row stepper-title">
|
</div>
|
||||||
<div class="col-12 pl-0 mb-1"><span>{{'DESCRIPTION-EDITOR.TOC.TITLE' | translate}}</span></div>
|
<div class="row stepper-options" id="stepper-options">
|
||||||
</div>
|
<div class="col-12">
|
||||||
<div class="row stepper-options" id="stepper-options">
|
<div class="container stepper-list ml-1">
|
||||||
<div class="col-12">
|
<div class="row" *ngIf="!descriptionInfoValid()">
|
||||||
<div class="container stepper-list ml-1">
|
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
|
||||||
<div class="row" *ngIf="!descriptionInfoValid()">
|
</div>
|
||||||
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0, 'text-danger': countErrorsOfBaseInfoPage > 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} <span *ngIf="countErrorsOfBaseInfoPage > 0">({{ countErrorsOfBaseInfoPage }})</span></div>
|
<div class="row" *ngIf="descriptionInfoValid()">
|
||||||
|
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
|
||||||
|
</div>
|
||||||
|
<div class="row toc-pane-container" #boundary>
|
||||||
|
<div #spacer></div>
|
||||||
|
<div class="col-12">
|
||||||
|
<app-table-of-contents [visibilityRulesService]="visibilityRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" *ngIf="descriptionInfoValid()">
|
</div>
|
||||||
<div (click)="table0fContents.onToCentrySelected()" class="col-12 main-info" [ngClass]="{'active': this.step === 0}">{{'DESCRIPTION-EDITOR.TOC.MAIN-INFO' | translate}} (<mat-icon class="done-icon">done</mat-icon>)</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="row mb-4">
|
||||||
|
<div class="col-12">
|
||||||
|
<div class="row mt-3 stepper-actions justify-content-center">
|
||||||
|
<div class="col-auto mb-1">
|
||||||
|
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
|
||||||
|
<span class="material-icons">chevron_left</span>
|
||||||
|
<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div *ngIf="this.step < this.maxStep" class="col-auto mb-1">
|
||||||
|
<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
|
||||||
|
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
|
||||||
|
<span class="material-icons">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="!formGroup.get('descriptionTemplateId').value" class="col-auto mb-1">
|
||||||
|
<div mat-raised-button type="button" class="stepper-btn description-next next-disabled ml-auto">
|
||||||
|
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
|
||||||
|
<span class="material-icons">chevron_right</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
|
||||||
|
<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
|
||||||
|
{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row toc-pane-container" #boundary>
|
<div class="row mb-4 mt-4">
|
||||||
<div #spacer></div>
|
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<app-table-of-contents [visibilityRulesService]="visibilityRulesService" [selectedFieldsetId]="fieldsetIdWithFocus" #table0fContents [showErrors]="showtocentriesErrors" [hasFocus]="step > 0" [formGroup]="formGroup.get('properties')" [descriptionTemplate]="item.descriptionTemplate" *ngIf="formGroup" [links]="links" [boundary]="boundary" [spacer]="spacer" [isActive]="step !== 0" stickyThing (stepFound)="onStepFound($event)" (currentLinks)="getLinks($event)" (entrySelected)="changeStep($event.entry, $event.execute)" [pageToFieldSetMap]="pageToFieldSetMap"></app-table-of-contents>
|
<app-form-progress-indication class="mt-2" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [checkVisibility]="true"></app-form-progress-indication>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-12 col-md form" id="description-editor-form">
|
||||||
<div class="row mb-4">
|
<app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
|
||||||
<div class="col-12">
|
<app-description-form
|
||||||
<div class="row mt-3 stepper-actions justify-content-center">
|
*ngIf="formGroup && formGroup.get('properties')"
|
||||||
<div class="col-auto mb-1">
|
[propertiesFormGroup]="formGroup.get('properties')"
|
||||||
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 0}" (click)="previousStep()">
|
[descriptionId]="formGroup.get('id').value"
|
||||||
<span class="material-icons">chevron_left</span>
|
[descriptionTemplate]="item.descriptionTemplate"
|
||||||
<div>{{'DESCRIPTION-EDITOR.TOC.PREVIOUS' | translate}}</div>
|
[visibilityRulesService]="visibilityRulesService"
|
||||||
</div>
|
[hidden]="this.step === 0"
|
||||||
</div>
|
[linkToScroll]="linkToScroll"
|
||||||
|
[validationErrorModel]="editorModel.validationErrorModel"
|
||||||
<div *ngIf="this.step < this.maxStep" class="col-auto mb-1">
|
[isNew]="isNew || isCopy"
|
||||||
<div mat-raised-button type="button" class="stepper-btn description-next ml-auto" (click)="nextStep()">
|
[canReview]="canReview"
|
||||||
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
|
(fieldsetFocusChange)="fieldsetIdWithFocus = $event"
|
||||||
<span class="material-icons">chevron_right</span>
|
></app-description-form>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="!formGroup.get('descriptionTemplateId').value" class="col-auto mb-1">
|
|
||||||
<div mat-raised-button type="button" class="stepper-btn description-next next-disabled ml-auto">
|
|
||||||
<div>{{'DESCRIPTION-EDITOR.TOC.NEXT' | translate}}</div>
|
|
||||||
<span class="material-icons">chevron_right</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="(step === maxStep) && !isLocked && formGroup.get('descriptionTemplateId').value && !viewOnly" class="col-auto mb-1">
|
|
||||||
<button [disabled]="saving" (click)="saveAndClose()" mat-raised-button type="button" class="col-auto stepper-btn add-description-btn ml-auto">
|
|
||||||
{{ 'DESCRIPTION-EDITOR.ACTIONS.SAVE-AND-CLOSE' | translate }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row mb-4 mt-4">
|
|
||||||
<div class="col-12">
|
|
||||||
<app-form-progress-indication class="mt-2" *ngIf="formGroup && !viewOnly" [formGroup]="formGroup" [checkVisibility]="true"></app-form-progress-indication>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 col-md form" id="description-editor-form">
|
|
||||||
<app-description-base-fields-editor-component [hidden]="this.step !== 0" [formGroup]="formGroup" [description]="item" (formChanged)="formChanged()" (refresh)="fireRefreshDataEvent($event)"></app-description-base-fields-editor-component>
|
|
||||||
<app-description-form
|
|
||||||
*ngIf="formGroup && formGroup.get('properties')"
|
|
||||||
[propertiesFormGroup]="formGroup.get('properties')"
|
|
||||||
[descriptionId]="formGroup.get('id').value"
|
|
||||||
[descriptionTemplate]="item.descriptionTemplate"
|
|
||||||
[visibilityRulesService]="visibilityRulesService"
|
|
||||||
[hidden]="this.step === 0"
|
|
||||||
[linkToScroll]="linkToScroll"
|
|
||||||
[validationErrorModel]="editorModel.validationErrorModel"
|
|
||||||
[isNew]="isNew || isCopy"
|
|
||||||
[canReview]="canReview"
|
|
||||||
(fieldsetFocusChange)="fieldsetIdWithFocus = $event"
|
|
||||||
></app-description-form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -77,247 +77,249 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="container-fluid">
|
||||||
<!-- <div class="col-auto dmp-stepper" *ngIf="this.step != 0"> -->
|
<div class="row">
|
||||||
<div *ngIf="this.step != 0" style="width: 22em;" class="d-flex flex-column justify-content-center">
|
<!-- <div class="col-auto dmp-stepper" *ngIf="this.step != 0"> -->
|
||||||
<div class="row stepper-title">
|
<div *ngIf="this.step != 0" style="width: 22em;" class="d-flex flex-column justify-content-center">
|
||||||
<div class="col-12 pl-0 mb-1">
|
<div class="row stepper-title">
|
||||||
<span class="font-weight-bold">{{'DMP-EDITOR.TITLE' | translate}}</span>
|
<div class="col-12 pl-0 mb-1">
|
||||||
|
<span>{{'DMP-EDITOR.TITLE' | translate}}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="row stepper-options">
|
||||||
<div class="row stepper-options">
|
<!-- try col-12 too -->
|
||||||
<!-- try col-12 too -->
|
<div class="col-auto">
|
||||||
<div class="col-auto">
|
<ol class="stepper-list" start="1">
|
||||||
<ol class="stepper-list" start="1">
|
<div *ngIf="selectedBlueprint?.definition && this.step !== 0">
|
||||||
<div *ngIf="selectedBlueprint?.definition && this.step !== 0">
|
<!-- <div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index"> -->
|
||||||
<!-- <div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index"> -->
|
<ng-container *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
|
||||||
<ng-container *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
|
<li (click)="changeStep(i + 1)" [ngClass]="{'active': this.step === (i + 1), 'text-danger': hasErrors(section.id) }">{{section.label}}</li>
|
||||||
<li (click)="changeStep(i + 1)" [ngClass]="{'active': this.step === (i + 1), 'text-danger': hasErrors(section.id) }">{{section.label}}</li>
|
<ol class="descriptionsInSection">
|
||||||
<ol class="descriptionsInSection">
|
<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
|
||||||
<li *ngFor="let description of descriptionsInSection(section.id); let descriptionIndex = index" (click)="editDescription(description.id, false)" class="active-description">
|
<div class="d-flex flex-direction-row">
|
||||||
<div class="d-flex flex-direction-row">
|
<div class="label" matTooltip="{{description.label}}">{{'DMP-EDITOR.DESCRIPTION' | translate}}: {{ description.label }}</div>
|
||||||
<div class="label" matTooltip="{{description.label}}">{{'DMP-EDITOR.DESCRIPTION' | translate}}: {{ description.label }}</div>
|
<div (click)="$event.stopPropagation(); removeDescription(description.id)"><mat-icon *ngIf="description.status !== descriptionStatusEnum.Finalized && canDeleteSection(section.id) && !formGroup.disabled" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" class="ml-2 mr-2 remove-description size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}">close</mat-icon></div>
|
||||||
<div (click)="$event.stopPropagation(); removeDescription(description.id)"><mat-icon *ngIf="description.status !== descriptionStatusEnum.Finalized && canDeleteSection(section.id) && !formGroup.disabled" [ngClass]="{'drag-handle-disabled': formGroup.disabled}" class="ml-2 mr-2 remove-description size-16" matTooltip="{{'DMP-EDITOR.ACTIONS.DELETE' | translate}}">close</mat-icon></div>
|
<mat-icon *ngIf="description.status === descriptionStatusEnum.Finalized" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DESCRIPTION-STATUS.FINALIZED' | translate}}">check</mat-icon>
|
||||||
<mat-icon *ngIf="description.status === descriptionStatusEnum.Finalized" class="ml-2 mr-2 status-icon check-icon size-16" matTooltip="{{'TYPES.DESCRIPTION-STATUS.FINALIZED' | translate}}">check</mat-icon>
|
</div>
|
||||||
</div>
|
</li>
|
||||||
</li>
|
</ol>
|
||||||
</ol>
|
<ul *ngIf="item.id && section.hasTemplates && canEditSection(section.id) && !formGroup.disabled" class="add-description-option">
|
||||||
<ul *ngIf="item.id && section.hasTemplates && canEditSection(section.id) && !formGroup.disabled" class="add-description-option">
|
<li>
|
||||||
<li>
|
<a class="add-description-action" [ngClass]="{'drag-handle-disabled': !hasDescriptionTemplates(section) || !hasValidMultiplicity(section)}" [routerLink]="hasDescriptionTemplates(section) && hasValidMultiplicity(section) ? ['/descriptions/edit/' + item.id + '/' + section.id] : null">
|
||||||
<a class="add-description-action" [ngClass]="{'drag-handle-disabled': !hasDescriptionTemplates(section) || !hasValidMultiplicity(section)}" [routerLink]="hasDescriptionTemplates(section) && hasValidMultiplicity(section) ? ['/descriptions/edit/' + item.id + '/' + section.id] : null">
|
<ng-container *ngIf="!hasDescriptionTemplates(section)" >
|
||||||
<ng-container *ngIf="!hasDescriptionTemplates(section)" >
|
<mat-icon [matTooltipDisabled]="hasDescriptionTemplates(section)" [matTooltip]="'DMP-EDITOR.DESCRIPTION-TEMPLATES.EMPTY' | translate">add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
|
||||||
<mat-icon [matTooltipDisabled]="hasDescriptionTemplates(section)" [matTooltip]="'DMP-EDITOR.DESCRIPTION-TEMPLATES.EMPTY' | translate">add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
|
</ng-container>
|
||||||
</ng-container>
|
<ng-container *ngIf="hasDescriptionTemplates(section)">
|
||||||
<ng-container *ngIf="hasDescriptionTemplates(section)">
|
<mat-icon [matTooltipDisabled]="hasValidMultiplicity(section)" [matTooltip]="'DMP-EDITOR.DESCRIPTION-TEMPLATES.MAX-MULTIPLICITY' | translate">add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
|
||||||
<mat-icon [matTooltipDisabled]="hasValidMultiplicity(section)" [matTooltip]="'DMP-EDITOR.DESCRIPTION-TEMPLATES.MAX-MULTIPLICITY' | translate">add</mat-icon>{{'DMP-EDITOR.ACTIONS.ADD-DESCRIPTION-IN-SECTION' | translate}}
|
</ng-container>
|
||||||
</ng-container>
|
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
</div>
|
</div>
|
||||||
</ol>
|
</ol>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="row mt-auto">
|
<div class="row mt-auto">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div class="row justify-content-center" *ngIf="this.step !== 0">
|
<div class="row justify-content-center" *ngIf="this.step !== 0">
|
||||||
<div class="col-auto mb-1">
|
<div class="col-auto mb-1">
|
||||||
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
|
<div mat-raised-button type="button" class="previous stepper-btn mr-2" [ngClass]="{'previous-disabled': this.step === 1}" (click)="previousStep()">
|
||||||
<span class="material-icons">chevron_left</span>
|
<span class="material-icons">chevron_left</span>
|
||||||
<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
|
<div>{{'DMP-EDITOR.ACTIONS.PREVIOUS-STEP' | translate}}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="this.step < this.maxSteps" class="col-auto mb-1">
|
||||||
|
<div mat-raised-button type="button" class="stepper-btn" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
|
||||||
|
<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
|
||||||
|
<span class="material-icons">chevron_right</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="this.step < this.maxSteps" class="col-auto mb-1">
|
<div class="row" *ngIf="this.step !== 0">
|
||||||
<div mat-raised-button type="button" class="stepper-btn" [ngClass]="{ 'next-disabled': this.step === this.maxSteps, 'next': this.step < selectedBlueprint?.definition?.sections?.length, 'description-next': this.step >= selectedBlueprint?.definition?.sections?.length }" (click)="nextStep()">
|
<div class="col-12">
|
||||||
<div>{{'DMP-EDITOR.ACTIONS.NEXT-STEP' | translate}}</div>
|
<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>
|
||||||
<span class="material-icons">chevron_right</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row" *ngIf="this.step !== 0">
|
|
||||||
<div class="col-12">
|
|
||||||
<app-dmp-form-progress-indication class="col-12" *ngIf="formGroup && !formGroup.disabled && !lockStatus" [formGroup]="formGroup"></app-dmp-form-progress-indication>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-12 col-md form" id="editor-form" *ngIf="this.step !== 0">
|
<div class="col-12 col-md form" id="editor-form" *ngIf="this.step !== 0">
|
||||||
<div *ngIf="selectedBlueprint?.definition">
|
<div *ngIf="selectedBlueprint?.definition">
|
||||||
<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
|
<div *ngFor="let section of selectedBlueprint?.definition?.sections; let i=index">
|
||||||
<div class="section-info" [hidden]="this.step !== (i + 1)">
|
<div class="section-info" [hidden]="this.step !== (i + 1)">
|
||||||
<div class="col-12 intro">
|
<div class="col-12 intro">
|
||||||
{{section.description}}
|
{{section.description}}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12 card" *ngIf="section.fields?.length > 0">
|
<div class="col-12 card" *ngIf="section.fields?.length > 0">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-12">
|
<div class="col-12">
|
||||||
<div *ngFor="let field of section.fields; let j=index">
|
<div *ngFor="let field of section.fields; let j=index">
|
||||||
<div class="heading" *ngIf="!field.label && field.category === dmpBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toDmpBlueprintSystemFieldTypeString(field.systemFieldType)}}<span *ngIf="field.required">*</span></div>
|
<div class="heading" *ngIf="!field.label && field.category === dmpBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toDmpBlueprintSystemFieldTypeString(field.systemFieldType)}}<span *ngIf="field.required">*</span></div>
|
||||||
<div class="heading" *ngIf="!field.label && field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}<span *ngIf="field.required">*</span></div>
|
<div class="heading" *ngIf="!field.label && field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}<span *ngIf="field.required">*</span></div>
|
||||||
<div class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}<span *ngIf="field.required">*</span></div>
|
<div class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}<span *ngIf="field.required">*</span></div>
|
||||||
<div *ngIf="field.description != null && field.description.length > 0" class="hint">{{field.description}}</div>
|
<div *ngIf="field.description != null && field.description.length > 0" class="hint">{{field.description}}</div>
|
||||||
<div class="input-form">
|
<div class="input-form">
|
||||||
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.System">
|
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.System">
|
||||||
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Title">
|
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Title">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
<input matInput placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" [formControl]="formGroup.get('label')" required>
|
<input matInput placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" [formControl]="formGroup.get('label')" required>
|
||||||
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
|
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
|
||||||
{{formGroup.get('label').getError('backendError').message}}</mat-error>
|
{{formGroup.get('label').getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="formGroup.get('label').hasError('required')">
|
<mat-error *ngIf="formGroup.get('label').hasError('required')">
|
||||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Description">
|
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Description">
|
||||||
<rich-text-editor-component [form]="formGroup.get('description')" [editable]="formGroup.get('description').status !== 'DISABLED'" [placeholder]="field.placeholder ?? 'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'" [required]="field.required">
|
<rich-text-editor-component [form]="formGroup.get('description')" [editable]="formGroup.get('description').status !== 'DISABLED'" [placeholder]="field.placeholder ?? 'DMP-EDITOR.PLACEHOLDER.DESCRIPTION'" [required]="field.required">
|
||||||
</rich-text-editor-component>
|
</rich-text-editor-component>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Language">
|
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Language">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
<mat-select [formControl]="formGroup.get('language')" placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}" required>
|
<mat-select [formControl]="formGroup.get('language')" placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.LANGUAGE' | translate}}" required>
|
||||||
<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
|
<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
|
||||||
{{ lang.name }}
|
{{ lang.name }}
|
||||||
</mat-option>
|
</mat-option>
|
||||||
</mat-select>
|
</mat-select>
|
||||||
<mat-error *ngIf="formGroup.get('language').hasError('backendError')">{{formGroup.get('language').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="formGroup.get('language').hasError('backendError')">{{formGroup.get('language').getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact">
|
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.Contact">
|
||||||
<div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)">
|
<div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)">
|
||||||
<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled || !canEdit" (mouseenter)="onContactHover(contactIndex)" (mouseleave)="clearHoveredContact()">
|
<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled || !canEdit" (mouseenter)="onContactHover(contactIndex)" (mouseleave)="clearHoveredContact()">
|
||||||
<div class="col-12 col-xl-auto pr-0">
|
<div class="col-12 col-xl-auto pr-0">
|
||||||
<span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.15rem 0.435rem 0.3rem 0.435rem;">{{contactIndex + 1}}</span>
|
<span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.15rem 0.435rem 0.3rem 0.435rem;">{{contactIndex + 1}}</span>
|
||||||
<mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled || !canEdit}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
|
<mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled || !canEdit}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="col pt-3">
|
<div class="col pt-3">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
<mat-label>{{'DMP-EDITOR.FIELDS.FIRST-NAME' | translate}}</mat-label>
|
<mat-label>{{'DMP-EDITOR.FIELDS.FIRST-NAME' | translate}}</mat-label>
|
||||||
<input matInput type="text" name="firstName" [formControl]="contact.get('firstName')">
|
<input matInput type="text" name="firstName" [formControl]="contact.get('firstName')">
|
||||||
<mat-error *ngIf="contact.get('firstName').hasError('backendError')">{{contact.get('firstName').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="contact.get('firstName').hasError('backendError')">{{contact.get('firstName').getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="contact.get('firstName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="contact.get('firstName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
<mat-label>{{'DMP-EDITOR.FIELDS.LAST-NAME' | translate}}</mat-label>
|
<mat-label>{{'DMP-EDITOR.FIELDS.LAST-NAME' | translate}}</mat-label>
|
||||||
<input matInput type="text" name="lastName" [formControl]="contact.get('lastName')">
|
<input matInput type="text" name="lastName" [formControl]="contact.get('lastName')">
|
||||||
<mat-error *ngIf="contact.get('lastName').hasError('backendError')">{{contact.get('lastName').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="contact.get('lastName').hasError('backendError')">{{contact.get('lastName').getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="contact.get('lastName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="contact.get('lastName').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<mat-form-field class="w-100">
|
<mat-form-field class="w-100">
|
||||||
<mat-label>{{'DMP-EDITOR.FIELDS.EMAIL' | translate}}</mat-label>
|
<mat-label>{{'DMP-EDITOR.FIELDS.EMAIL' | translate}}</mat-label>
|
||||||
<input matInput type="text" name="email" [formControl]="contact.get('email')">
|
<input matInput type="text" name="email" [formControl]="contact.get('email')">
|
||||||
<mat-error *ngIf="contact.get('email').hasError('backendError')">{{contact.get('email').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="contact.get('email').hasError('backendError')">{{contact.get('email').getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="contact.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="contact.get('email').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
|
||||||
|
<button [disabled]="!this.canSave" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS.SEARCH-CONTACT' | translate}}" (click)="searchContact(contactIndex, field)" [disabled]="formGroup.disabled">
|
||||||
|
<mat-icon>search</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
|
||||||
|
<button [disabled]="!this.canSave" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled">
|
||||||
|
<mat-icon>delete</mat-icon>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
|
<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('backendError')">{{formGroup.get('properties').get('contacts').getError('backendError').message}}</mat-error>
|
||||||
<button [disabled]="!this.canSave" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS.SEARCH-CONTACT' | translate}}" (click)="searchContact(contactIndex, field)" [disabled]="formGroup.disabled">
|
<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
<mat-icon>search</mat-icon>
|
</div>
|
||||||
</button>
|
<div class="row">
|
||||||
</div>
|
<div class="col">
|
||||||
<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
|
<button mat-icon-button (click)="addContact()" [disabled]="isFinalized || (!this.canSave && !isNew)">
|
||||||
<button [disabled]="!this.canSave" mat-icon-button class="action-list-icon" matTooltip="{{'DMP-EDITOR.ACTIONS.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled">
|
<mat-icon>add</mat-icon>
|
||||||
<mat-icon>delete</mat-icon>
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('backendError')">{{formGroup.get('properties').get('contacts').getError('backendError').message}}</mat-error>
|
|
||||||
<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.AccessRights">
|
||||||
<div class="col">
|
<mat-form-field class="w-100">
|
||||||
<button mat-icon-button (click)="addContact()" [disabled]="isFinalized || (!this.canSave && !isNew)">
|
<mat-select [formControl]="formGroup.get('accessType')" placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.ACCESS-TYPE' | translate}}">
|
||||||
<mat-icon>add</mat-icon>
|
<mat-option *ngFor="let dmpAccessType of dmpAccessTypeEnumValues" [value]="dmpAccessType">
|
||||||
</button>
|
{{enumUtils.toDmpAccessTypeString(dmpAccessType)}}
|
||||||
</div>
|
</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
<mat-error *ngIf="formGroup.get('accessType').hasError('backendError')">{{formGroup.get('accessType').getError('backendError').message}}</mat-error>
|
||||||
|
<mat-error *ngIf="formGroup.get('accessType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.User">
|
||||||
|
<div>
|
||||||
|
<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [viewOnly]="formGroup.disabled || !canEdit"></app-dmp-user-field-component> </div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.AccessRights">
|
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">
|
||||||
<mat-form-field class="w-100">
|
<ng-container *ngIf="field.multipleSelect">
|
||||||
<mat-select [formControl]="formGroup.get('accessType')" placeholder="{{field.placeholder ?? 'DMP-EDITOR.FIELDS.ACCESS-TYPE' | translate}}">
|
<app-reference-field-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('references')" [dependencies]="formGroup.get('properties').get('dmpBlueprintValues')" [label]= "field.label" [placeholder]="field.placeholder ?? field.label" [referenceType]="field.referenceType" [multiple]="true"></app-reference-field-component>
|
||||||
<mat-option *ngFor="let dmpAccessType of dmpAccessTypeEnumValues" [value]="dmpAccessType">
|
</ng-container>
|
||||||
{{enumUtils.toDmpAccessTypeString(dmpAccessType)}}
|
<ng-container *ngIf="!(field.multipleSelect)">
|
||||||
</mat-option>
|
<app-reference-field-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('reference')" [dependencies]="formGroup.get('properties').get('dmpBlueprintValues')" [label]= "field.label" [placeholder]="field.placeholder ?? field.label" [referenceType]="field.referenceType" [multiple]="false"></app-reference-field-component>
|
||||||
</mat-select>
|
</ng-container>
|
||||||
<mat-error *ngIf="formGroup.get('accessType').hasError('backendError')">{{formGroup.get('accessType').getError('backendError').message}}</mat-error>
|
|
||||||
<mat-error *ngIf="formGroup.get('accessType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="field.systemFieldType == dmpBlueprintSystemFieldTypeEnum.User">
|
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.Extra">
|
||||||
<div>
|
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Text">
|
||||||
<app-dmp-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [viewOnly]="formGroup.disabled || !canEdit"></app-dmp-user-field-component> </div>
|
<mat-form-field class="w-100">
|
||||||
</div>
|
<mat-label>{{field.label}}</mat-label>
|
||||||
</div>
|
<input matInput placeholder="{{field.placeholder ?? field.label}}" type="text" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" [required]="field.required">
|
||||||
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.ReferenceType">
|
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}}</mat-error>
|
||||||
<ng-container *ngIf="field.multipleSelect">
|
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
<app-reference-field-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('references')" [dependencies]="formGroup.get('properties').get('dmpBlueprintValues')" [label]= "field.label" [placeholder]="field.placeholder ?? field.label" [referenceType]="field.referenceType" [multiple]="true"></app-reference-field-component>
|
</mat-form-field>
|
||||||
</ng-container>
|
</div>
|
||||||
<ng-container *ngIf="!(field.multipleSelect)">
|
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.RichText">
|
||||||
<app-reference-field-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('reference')" [dependencies]="formGroup.get('properties').get('dmpBlueprintValues')" [label]= "field.label" [placeholder]="field.placeholder ?? field.label" [referenceType]="field.referenceType" [multiple]="false"></app-reference-field-component>
|
<rich-text-editor-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" placeholder="{{field.placeholder ?? field.label}}" [required]="field.required"></rich-text-editor-component>
|
||||||
</ng-container>
|
</div>
|
||||||
</div>
|
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Date">
|
||||||
<div *ngIf="field.category === dmpBlueprintSectionFieldCategoryEnum.Extra">
|
<mat-form-field class="w-100">
|
||||||
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Text">
|
<mat-label>{{field.label}}</mat-label>
|
||||||
<mat-form-field class="w-100">
|
<input matInput placeholder="{{field.placeholder ?? field.label}}" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue')" [matDatepicker]="date" [required]="field.required">
|
||||||
<mat-label>{{field.label}}</mat-label>
|
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||||
<input matInput placeholder="{{field.placeholder ?? field.label}}" type="text" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" [required]="field.required">
|
<mat-datepicker #date></mat-datepicker>
|
||||||
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
</mat-form-field>
|
</mat-form-field>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.RichText">
|
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Number">
|
||||||
<rich-text-editor-component [form]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('fieldValue')" placeholder="{{field.placeholder ?? field.label}}" [required]="field.required"></rich-text-editor-component>
|
<mat-form-field class="w-100">
|
||||||
</div>
|
<mat-label>{{field.label}}</mat-label>
|
||||||
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Date">
|
<input matInput placeholder="{{field.placeholder ?? field.label}}" type="number" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue')" [required]="field.required">
|
||||||
<mat-form-field class="w-100">
|
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').getError('backendError').message}}</mat-error>
|
||||||
<mat-label>{{field.label}}</mat-label>
|
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
<input matInput placeholder="{{field.placeholder ?? field.label}}" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue')" [matDatepicker]="date" [required]="field.required">
|
</mat-form-field>
|
||||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
</div>
|
||||||
<mat-datepicker #date></mat-datepicker>
|
|
||||||
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').getError('backendError').message}}</mat-error>
|
|
||||||
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('dateValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
|
||||||
<div *ngIf="field.dataType === dmpBlueprintExtraFieldDataTypeEnum.Number">
|
|
||||||
<mat-form-field class="w-100">
|
|
||||||
<mat-label>{{field.label}}</mat-label>
|
|
||||||
<input matInput placeholder="{{field.placeholder ?? field.label}}" type="number" name="value" [formControl]="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue')" [required]="field.required">
|
|
||||||
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').hasError('backendError')">{{formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').getError('backendError').message}}</mat-error>
|
|
||||||
<mat-error *ngIf="formGroup.get('properties').get('dmpBlueprintValues').get(field.id).get('numberValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
||||||
</mat-form-field>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="col-12 card" *ngIf="section.hasTemplates">
|
||||||
<div class="col-12 card" *ngIf="section.hasTemplates">
|
<div class="row">
|
||||||
<div class="row">
|
<div class="col-12">
|
||||||
<div class="col-12">
|
<div class="input-form">
|
||||||
<div class="input-form">
|
<div class="heading">{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}</div>
|
||||||
<div class="heading">{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}</div>
|
<mat-form-field class="w-100">
|
||||||
<mat-form-field class="w-100">
|
<mat-label>{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}</mat-label>
|
||||||
<mat-label>{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}</mat-label>
|
<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}" required='true' [formControl]="formGroup.get('descriptionTemplates').get(section.id)" [configuration]="getDescriptionTemplateMultipleAutoCompleteConfiguration(section.id)" (optionActionClicked)="onPreviewDescriptionTemplate($event, section.id)" (optionRemoved)="onRemoveDescriptionTemplate($event, section.id)">
|
||||||
<app-multiple-auto-complete placeholder="{{'DMP-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}" required='true' [formControl]="formGroup.get('descriptionTemplates').get(section.id)" [configuration]="getDescriptionTemplateMultipleAutoCompleteConfiguration(section.id)" (optionActionClicked)="onPreviewDescriptionTemplate($event, section.id)" (optionRemoved)="onRemoveDescriptionTemplate($event, section.id)">
|
</app-multiple-auto-complete>
|
||||||
</app-multiple-auto-complete>
|
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('backendError')">{{formGroup.get('descriptionTemplates').get(section.id).getError('backendError').message}}</mat-error>
|
||||||
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('backendError')">{{formGroup.get('descriptionTemplates').get(section.id).getError('backendError').message}}</mat-error>
|
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||||
<mat-error *ngIf="formGroup.get('descriptionTemplates').get(section.id).hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
</mat-form-field>
|
||||||
</mat-form-field>
|
<div class="col pl-0 pt-0 pb-0 d-flex">
|
||||||
<div class="col pl-0 pt-0 pb-0 d-flex">
|
<span class="not-found-template">{{'DMP-EDITOR.NO-TEMPLATE-MESSAGE' | translate}}</span>
|
||||||
<span class="not-found-template">{{'DMP-EDITOR.NO-TEMPLATE-MESSAGE' | translate}}</span>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 10px 20px;
|
padding: 0.5rem 1rem 0.5rem 1.2rem;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
letter-spacing: 0px;
|
letter-spacing: 0px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
|
|
|
||||||
|
|
@ -8,14 +8,14 @@
|
||||||
<a class="new-dmp nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback' && groupMenuRoute.path !== '/descriptions'" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans'}">
|
<a class="new-dmp nav-link nav-row" *ngIf="groupMenuRoute.path !== '/contact-support' && groupMenuRoute.path !== '/co-branding' && groupMenuRoute.path !== '/feedback' && groupMenuRoute.path !== '/descriptions'" [routerLink]="[groupMenuRoute.path]" [ngClass]="{'dmp-tour': groupMenuRoute.path == '/plans'}">
|
||||||
<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
|
<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
|
||||||
<i *ngIf="groupMenuRoute.path == '/plans'" class="material-symbols-outlined icon-mask">person</i>
|
<i *ngIf="groupMenuRoute.path == '/plans'" class="material-symbols-outlined icon-mask">person</i>
|
||||||
<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}">{{groupMenuRoute.title | translate}}</span>
|
<span [ngClass]="{'pl-0': groupMenuRoute.path == '/plans'}" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
|
||||||
</a>
|
</a>
|
||||||
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/descriptions'" [routerLink]="[groupMenuRoute.path]">
|
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/descriptions'" [routerLink]="[groupMenuRoute.path]">
|
||||||
<span class="mb-2 inner-line"></span>
|
<span class="mb-3 inner-line"></span>
|
||||||
<div class="pl-0 pt-1 pb-1 container-fluid nav-subrow dataset-tour">
|
<div class="pl-0 pt-1 pb-1 container-fluid nav-subrow dataset-tour">
|
||||||
<i class="material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
|
<i class="mb-1 material-symbols-outlined icon">{{ groupMenuRoute.icon }}</i>
|
||||||
<i class="material-symbols-outlined icon-mask">person</i>
|
<i class="mb-1 material-symbols-outlined icon-mask">person</i>
|
||||||
<span class="pl-0">{{groupMenuRoute.title | translate}}</span>
|
<span class="pl-0 mt-1" style="text-wrap: wrap;">{{groupMenuRoute.title | translate}}</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/co-branding'" href="/splash/resources/co-branding.html">
|
<a class="nav-link nav-row" *ngIf="groupMenuRoute.path === '/co-branding'" href="/splash/resources/co-branding.html">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue