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

change on description-template-editor ui for easier reordering

This commit is contained in:
Sofia Papacharalampous 2024-05-20 14:46:20 +03:00
parent b094261136
commit 49eb10aaa8
6 changed files with 251 additions and 225 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

436
dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.html
View File

@ -27,245 +27,247 @@
</div> </div>
</div> </div>
</div> </div>
<div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]> <ng-container *ngIf="!reorderingMode">
<div *ngIf="showDescription" class="mb-4"> <div style="position: relative;" class="col-12" *ngIf="hasFocus" [@fade-in]>
<h5 style="font-weight: bold" class="row">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</h5> <div *ngIf="showDescription" class="mb-4">
<rich-text-editor-component [form]="form.get('description')" [id]="'editor1'" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION'" [wrapperClasses]="'row'" [editable]="!viewOnly"> <h5 style="font-weight: bold" class="row">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</h5>
</rich-text-editor-component> <rich-text-editor-component [form]="form.get('description')" [id]="'editor1'" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION'" [wrapperClasses]="'row'" [editable]="!viewOnly">
<mat-error *ngIf="this.form.get('description').hasError('backendError')">{{form.get('description').getError('backendError').message}}</mat-error> </rich-text-editor-component>
</div> <mat-error *ngIf="this.form.get('description').hasError('backendError')">{{form.get('description').getError('backendError').message}}</mat-error>
<div *ngIf="showExtendedDescription" class="mb-4"> </div>
<h5 style="font-weight: bold" class="row">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</h5> <div *ngIf="showExtendedDescription" class="mb-4">
<rich-text-editor-component [form]="form.get('extendedDescription')" [id]="'editor2'" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION'" [wrapperClasses]="'row'" [editable]="!viewOnly"> <h5 style="font-weight: bold" class="row">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</h5>
</rich-text-editor-component> <rich-text-editor-component [form]="form.get('extendedDescription')" [id]="'editor2'" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION'" [wrapperClasses]="'row'" [editable]="!viewOnly">
<mat-error *ngIf="this.form.get('extendedDescription').hasError('backendError')">{{form.get('extendedDescription').getError('backendError').message}}</mat-error> </rich-text-editor-component>
</div> <mat-error *ngIf="this.form.get('extendedDescription').hasError('backendError')">{{form.get('extendedDescription').getError('backendError').message}}</mat-error>
<div class="row" *ngIf="showAdditionalInfo"> </div>
<mat-form-field class="col p-0 underline-line-field"> <div class="row" *ngIf="showAdditionalInfo">
<input matInput type="text" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}" [formControl]="this.form.get('additionalInformation')" /> <mat-form-field class="col p-0 underline-line-field">
<mat-error *ngIf="this.form.get('additionalInformation').hasError('backendError')">{{form.get('additionalInformation').getError('backendError').message}}</mat-error> <input matInput type="text" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}" [formControl]="this.form.get('additionalInformation')" />
</mat-form-field> <mat-error *ngIf="this.form.get('additionalInformation').hasError('backendError')">{{form.get('additionalInformation').getError('backendError').message}}</mat-error>
</div> </mat-form-field>
</div>
<div class="row"> <div class="row">
<mat-form-field *ngIf="this.form.get('hasMultiplicity')?.value" class="col pl-0 underline-line-field"> <mat-form-field *ngIf="this.form.get('hasMultiplicity')?.value" class="col pl-0 underline-line-field">
<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}" type="number" [formControl]="form.get('multiplicity').get('min')"> <input matInput placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MIN' | translate}}" type="number" [formControl]="form.get('multiplicity').get('min')">
<mat-error *ngIf="form.get('multiplicity').get('min').hasError('backendError')">{{form.get('multiplicity').get('min').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('multiplicity').get('min').hasError('backendError')">{{form.get('multiplicity').get('min').getError('backendError').message}}</mat-error>
<mat-error *ngIf="form.get('multiplicity').get('min').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="form.get('multiplicity').get('min').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
<mat-form-field *ngIf="this.form.get('hasMultiplicity')?.value" class="col pr-0 underline-line-field"> <mat-form-field *ngIf="this.form.get('hasMultiplicity')?.value" class="col pr-0 underline-line-field">
<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}" type="number" [formControl]="this.form.get('multiplicity').get('max')"> <input matInput placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-MAX' | translate}}" type="number" [formControl]="this.form.get('multiplicity').get('max')">
<mat-error *ngIf="form.get('multiplicity').get('max').hasError('backendError')">{{form.get('multiplicity').get('max').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('multiplicity').get('max').hasError('backendError')">{{form.get('multiplicity').get('max').getError('backendError').message}}</mat-error>
<mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="form.get('multiplicity').get('max').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="row"> <div class="row">
<mat-form-field *ngIf="this.form.get('hasMultiplicity')?.value" class="col pl-0 underline-line-field"> <mat-form-field *ngIf="this.form.get('hasMultiplicity')?.value" class="col pl-0 underline-line-field">
<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-PLACEHOLDER' | translate}}" type="text" [formControl]="form.get('multiplicity').get('placeholder')"> <input matInput placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-PLACEHOLDER' | translate}}" type="text" [formControl]="form.get('multiplicity').get('placeholder')">
<mat-error *ngIf="form.get('multiplicity').get('placeholder').hasError('backendError')">{{form.get('placeholder').get('multiplicity').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('multiplicity').get('placeholder').hasError('backendError')">{{form.get('placeholder').get('multiplicity').getError('backendError').message}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="row"> <div class="row">
<mat-checkbox *ngIf="this.form.get('hasMultiplicity')?.value" class="col pl-0 underline-line-field fieldset-checkbox-action-description-template-editor" [formControl]="form.get('multiplicity').get('tableView')"> <mat-checkbox *ngIf="this.form.get('hasMultiplicity')?.value" class="col pl-0 underline-line-field fieldset-checkbox-action-description-template-editor" [formControl]="form.get('multiplicity').get('tableView')">
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-TABLEVIEW' | translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.MULTIPLICITY-TABLEVIEW' | translate}}
<mat-error *ngIf="form.get('multiplicity').get('tableView').hasError('backendError')">{{form.get('multiplicity').get('tableView').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('multiplicity').get('tableView').hasError('backendError')">{{form.get('multiplicity').get('tableView').getError('backendError').message}}</mat-error>
</mat-checkbox> </mat-checkbox>
</div>
</div>
<!-- FIELDS DETAILS AND ACTIONS -->
<div class="row">
<!-- FIELDS -->
<div #inputs transition-group class="col-12" *ngIf="hasFocus" [@fade-in]>
<div *ngFor="let field of fieldsArray.controls; let i=index;" class="row bg-white field-input mt-3" (click)="setTargetField(field)" transition-group-item>
<app-description-template-editor-field-component class="col-12" [form]="field" [showOrdinal]="false" [viewOnly]="viewOnly" [expandView]="hasFocus" [canBeDeleted]="fieldsArray.length !=1" [validationErrorModel]="validationErrorModel" [validationRootPath]="validationRootPath + '.fields[' + i + '].'" (delete)="deleteField(i)">
<div class="arrows mt-2">
<ul class="list-unstyled list-inline d-flex align-items-center">
<li *ngIf="canGoUp(i)" class="text-muted">
<mat-icon style="cursor: pointer;" (click)="move(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MOVE-UP' | translate">keyboard_arrow_up</mat-icon>
</li>
<li *ngIf="canGoDown(i)" class="text-muted">
<mat-icon style="cursor: pointer;" (click)="move(i, 'down')" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MOVE-DOWN' | translate">keyboard_arrow_down</mat-icon>
</li>
</ul>
</div>
</app-description-template-editor-field-component>
<hr>
</div> </div>
</div> </div>
<!-- PREVIEW -->
<div class="col-12"> <!-- FIELDS DETAILS AND ACTIONS -->
<div class="container-fluid previewer"> <div class="row">
<div class="row">
<div class="col-12"> <!-- FIELDS -->
<div *ngIf="hasFocus" class="row justify-content-between mb-3"> <div #inputs transition-group class="col-12" *ngIf="hasFocus" [@fade-in]>
<div class="col-auto"> <div *ngFor="let field of fieldsArray.controls; let i=index;" class="row bg-white field-input mt-3" (click)="setTargetField(field)" transition-group-item>
<span class="previewer-text">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span> <app-description-template-editor-field-component class="col-12" [form]="field" [showOrdinal]="false" [viewOnly]="viewOnly" [expandView]="hasFocus" [canBeDeleted]="fieldsArray.length !=1" [validationErrorModel]="validationErrorModel" [validationRootPath]="validationRootPath + '.fields[' + i + '].'" (delete)="deleteField(i)">
</div> <div class="arrows mt-2">
<div class="col-auto"> <ul class="list-unstyled list-inline d-flex align-items-center">
<span [@fadeElement]="updatedClass" *ngIf="firstField?.get('data')?.get('fieldType')?.value"> <li *ngIf="canGoUp(i)" class="text-muted">
<ng-container *ngIf="!previewDirty"> <mat-icon style="cursor: pointer;" (click)="move(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MOVE-UP' | translate">keyboard_arrow_up</mat-icon>
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.STATUS.PREVIEW-UPDATED' | translate}} </li>
</ng-container> <li *ngIf="canGoDown(i)" class="text-muted">
<ng-container *ngIf="previewDirty"> <mat-icon style="cursor: pointer;" (click)="move(i, 'down')" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.MOVE-DOWN' | translate">keyboard_arrow_down</mat-icon>
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.STATUS.CALCULATING-PREVIEW' | translate}} </li>
</ng-container> </ul>
</span>
</div>
</div> </div>
<div [id]="'preview_container'+ form.get('id').value" class="row"> </app-description-template-editor-field-component>
<div *ngIf="previewFieldSet && showPreview && firstField?.get('data')?.get('fieldType')?.value" class="col-12" [@fade-in-fast]> <hr>
<app-description-form-field-set class="w-100" [canReview]="false" [propertiesFormGroup]="previewPropertiesFormGroup" [fieldSet]="previewFieldSet" [visibilityRulesService]="visibilityRulesService" [hideAnnotations]="true"></app-description-form-field-set> </div>
</div>
<!-- PREVIEW -->
<div class="col-12">
<div class="container-fluid previewer">
<div class="row">
<div class="col-12">
<div *ngIf="hasFocus" class="row justify-content-between mb-3">
<div class="col-auto">
<span class="previewer-text">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.PREVIEW' | translate}}</span>
</div>
<div class="col-auto">
<span [@fadeElement]="updatedClass" *ngIf="firstField?.get('data')?.get('fieldType')?.value">
<ng-container *ngIf="!previewDirty">
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.STATUS.PREVIEW-UPDATED' | translate}}
</ng-container>
<ng-container *ngIf="previewDirty">
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.STATUS.CALCULATING-PREVIEW' | translate}}
</ng-container>
</span>
</div>
</div>
<div [id]="'preview_container'+ form.get('id').value" class="row">
<div *ngIf="previewFieldSet && showPreview && firstField?.get('data')?.get('fieldType')?.value" class="col-12" [@fade-in-fast]>
<app-description-form-field-set class="w-100" [canReview]="false" [propertiesFormGroup]="previewPropertiesFormGroup" [fieldSet]="previewFieldSet" [visibilityRulesService]="visibilityRulesService" [hideAnnotations]="true"></app-description-form-field-set>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-100" *ngIf="!firstField?.get('data')?.get('fieldType')?.value">
<em>
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.NOT-INITIALIZED' | translate}}
</em>
</div>
</div> </div>
<div class="col-12">
<hr *ngIf="hasFocus">
<div class="w-100" *ngIf="!firstField?.get('data')?.get('fieldType')?.value">
<em>
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.NOT-INITIALIZED' | translate}}
</em>
</div> </div>
</div> </div>
<div class="col-12">
<hr *ngIf="hasFocus">
</div>
</div>
<ng-container *ngIf="hasFocus"> <ng-container *ngIf="hasFocus">
<div class="row justify-content-end pt-2"> <div class="row justify-content-end pt-2">
<div class="col-auto"> <div class="col-auto">
<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary-blue"> <ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary-blue">
<li class="list-inline-item" *ngIf="!viewOnly"> <li class="list-inline-item" *ngIf="!viewOnly">
<span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger"> <span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate" /> <img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate" />
<span class="fieldset-new-input-action">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span> <span class="fieldset-new-input-action">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span>
</span> </span>
<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'"> <mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">
<mat-action-list> <mat-action-list>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.TEXT_AREA)"> <button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.TEXT_AREA)">
<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Text Area icon"> <img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Text Area icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TEXT_AREA)}} {{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TEXT_AREA)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA)">
<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Rich Text Area icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.FREE_TEXT)">
<img src="/assets/images/editor/icons/free_text.svg" class="input_icon" alt="Free Text icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.FREE_TEXT)}}
</button>
<mat-divider></mat-divider>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.UPLOAD)">
<mat-icon class="input_icon" style="font-size: 14px; color: #129d99; display: inline-flex; align-items: center">upload</mat-icon>
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.UPLOAD)}}
</button>
<mat-divider></mat-divider>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION)">
<img src="/assets/images/editor/icons/boolean.svg" class="input_icon" alt="Boolean icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.RADIO_BOX)">
<img src="/assets/images/editor/icons/radio_box.svg" class="input_icon" alt="RadioBox icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RADIO_BOX)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.SELECT)">
<span class="input_icon">
<img src="/assets/images/editor/icons/select.svg" alt="Select icon">
</span>
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.SELECT)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.CHECK_BOX)">
<img src="/assets/images/editor/icons/checkbox.svg" class="input_icon" alt="CheckBox Icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.CHECK_BOX)}}
</button>
<mat-divider></mat-divider>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.DATE_PICKER)">
<img src="/assets/images/editor/icons/date_picker.svg" class="input_icon" alt="DatePicker Icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATE_PICKER)}}
</button>
<mat-divider></mat-divider>
<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
<img src="/assets/images/editor/icons/api.svg" class="input_icon" alt="APIs icon">
APIs
</button>
<mat-action-list class="ml-4">
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.REFERENCE_TYPES)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Reference types icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.REFERENCE_TYPES)}}
</button> </button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA)">
<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Rich Text Area icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.FREE_TEXT)">
<img src="/assets/images/editor/icons/free_text.svg" class="input_icon" alt="Free Text icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.FREE_TEXT)}}
</button>
<mat-divider></mat-divider>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.UPLOAD)">
<mat-icon class="input_icon" style="font-size: 14px; color: #129d99; display: inline-flex; align-items: center">upload</mat-icon>
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.UPLOAD)}}
</button>
<mat-divider></mat-divider>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION)">
<img src="/assets/images/editor/icons/boolean.svg" class="input_icon" alt="Boolean icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.RADIO_BOX)">
<img src="/assets/images/editor/icons/radio_box.svg" class="input_icon" alt="RadioBox icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RADIO_BOX)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.SELECT)">
<span class="input_icon">
<img src="/assets/images/editor/icons/select.svg" alt="Select icon">
</span>
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.SELECT)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.CHECK_BOX)">
<img src="/assets/images/editor/icons/checkbox.svg" class="input_icon" alt="CheckBox Icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.CHECK_BOX)}}
</button>
<mat-divider></mat-divider>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.DATE_PICKER)">
<img src="/assets/images/editor/icons/date_picker.svg" class="input_icon" alt="DatePicker Icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATE_PICKER)}}
</button>
<mat-divider></mat-divider>
<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
<img src="/assets/images/editor/icons/api.svg" class="input_icon" alt="APIs icon">
APIs
</button>
<mat-action-list class="ml-4">
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.REFERENCE_TYPES)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Reference types icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.REFERENCE_TYPES)}}
</button>
</mat-action-list>
<mat-divider></mat-divider>
<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
<img src="/assets/images/editor/icons/internal_entities.svg" class="input_icon" alt="Internal Entities icon">
Argos Entities
</button>
<mat-action-list class="ml-4">
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DMPS)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Internal Dmp icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DMPS)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Internal Dmp icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.TAGS)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Tags icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TAGS)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Datset Identifier icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.VALIDATION)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Validation icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.VALIDATION)}}
</button>
</mat-action-list>
</mat-action-list> </mat-action-list>
</mat-menu>
<mat-divider></mat-divider> </li>
<button mat-list-item (click)="$event.stopPropagation();" style="font-style: italic;">
<img src="/assets/images/editor/icons/internal_entities.svg" class="input_icon" alt="Internal Entities icon">
Argos Entities
</button>
<mat-action-list class="ml-4">
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DMPS)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Internal Dmp icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DMPS)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Internal Dmp icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.TAGS)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Tags icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TAGS)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Datset Identifier icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER)}}
</button>
<button mat-list-item (click)="addNewInput(descriptionTemplateFieldTypeEnum.VALIDATION)">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Validation icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.VALIDATION)}}
</button>
</mat-action-list>
</mat-action-list>
</mat-menu>
</li>
<li class="list-inline-item"> <li class="list-inline-item">
<mat-checkbox class="fieldset-checkbox-action-description-template-editor" [formControl]="this.form.get('hasCommentField')" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate" [disabled]="viewOnly">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}</mat-checkbox> <mat-checkbox class="fieldset-checkbox-action-description-template-editor" [formControl]="this.form.get('hasCommentField')" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.INCLUDE-COMMENT-FIELD' | translate" [disabled]="viewOnly">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.COMMENT-FIELD' | translate}}</mat-checkbox>
<mat-error *ngIf="form.get('hasCommentField').hasError('backendError')">{{form.get('hasCommentField').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('hasCommentField').hasError('backendError')">{{form.get('hasCommentField').getError('backendError').message}}</mat-error>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<mat-checkbox class="fieldset-checkbox-action-description-template-editor" [formControl]="this.form.get('hasMultiplicity')" (change)="onIsMultiplicityEnabledChange($event)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate" [disabled]="viewOnly"> <mat-checkbox class="fieldset-checkbox-action-description-template-editor" [formControl]="this.form.get('hasMultiplicity')" (change)="onIsMultiplicityEnabledChange($event)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ENABLE-MULTIPLICITY' | translate" [disabled]="viewOnly">
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MULTIPLICITY' | translate}} {{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MULTIPLICITY' | translate}}
</mat-checkbox> </mat-checkbox>
</li> </li>
<li class="list-inline-item"> <li class="list-inline-item">
<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon> <mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<!-- TODO to check --> <!-- TODO to check -->
<mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showDescription">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</mat-checkbox> <mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showDescription">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.DESCRIPTION' | translate}}</mat-checkbox>
<mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showExtendedDescription">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</mat-checkbox> <mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showExtendedDescription">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXTENDED-DESCRIPTION' | translate}}</mat-checkbox>
<mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showAdditionalInfo">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}</mat-checkbox> <mat-checkbox class="mat-menu-item" [disabled]="viewOnly" (click)="$event.stopPropagation()" [(ngModel)]="showAdditionalInfo">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.ADDITIONAL-INFORMATION' | translate}}</mat-checkbox>
</mat-menu> </mat-menu>
</li> </li>
</ul> </ul>
</div>
</div> </div>
</div> </ng-container>
</ng-container> </ng-container>
</div> </div>

4
dmp-frontend/src/app/ui/admin/description-template/editor/components/composite-field/description-template-editor-composite-field.component.ts
View File

@ -50,6 +50,7 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
@Input() numbering: string; @Input() numbering: string;
@Input() hasFocus: boolean = false; @Input() hasFocus: boolean = false;
@Input() reorderingMode: boolean = false;
@ViewChild("inputs") inputs: TransitionGroupComponent; @ViewChild("inputs") inputs: TransitionGroupComponent;
@Input() validationErrorModel: ValidationErrorModel; @Input() validationErrorModel: ValidationErrorModel;
@Input() validationRootPath: string; @Input() validationRootPath: string;
@ -483,9 +484,6 @@ export class DescriptionTemplateEditorCompositeFieldComponent extends BaseCompon
} }
addNewInput(type: DescriptionTemplateFieldType) { addNewInput(type: DescriptionTemplateFieldType) {
const fieldsArray = this.form.get('fields') as UntypedFormArray; const fieldsArray = this.form.get('fields') as UntypedFormArray;

20
dmp-frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.html
View File

@ -49,18 +49,18 @@
<div style="margin-bottom: 2em; position: relative;" class="row fieldset" <div style="margin-bottom: 2em; position: relative;" class="row fieldset"
*ngFor="let fieldset of form.get('fieldSets')?.controls ; let i=index" *ngFor="let fieldset of form.get('fieldSets')?.controls ; let i=index"
[id]="dragula_prefix+fieldset.get('id').value"> [id]="dragula_prefix+fieldset.get('id').value">
<div [id]="idprefix+fieldset.get('id').value" style="position: absolute; top: -7em; visibility: hidden;"> <div [id]="idprefix+fieldset.get('id').value" style="position: absolute; top: -13.5em; visibility: hidden;">
</div> </div>
<div class="col-9 p-0"> <div class="col-9 p-0">
<mat-card (click)="selectedFieldSetId = fieldset.get('id').value" <mat-card (click)="selectedFieldSetId = fieldset.get('id').value"
[ngClass]="{'field-container-active': fieldset.get('id').value === selectedFieldSetId}"> [ngClass]="{'field-container-active': fieldset.get('id').value === selectedFieldSetId}">
<mat-card-content> <mat-card-content>
<mat-card-header *ngIf="(fieldset.get('id').value === selectedFieldSetId) && !viewOnly"> <mat-card-header *ngIf="(fieldset.get('id').value === selectedFieldSetId) && !viewOnly && reorderingMode">
<mat-icon class="handle" <mat-icon class="handle"
style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg); opacity: 0.3;">drag_indicator</mat-icon> style="display:inline-block; margin: 0px auto; cursor: grab;transform: rotate(90deg); opacity: 0.3;">drag_indicator</mat-icon>
</mat-card-header> </mat-card-header>
<app-description-template-editor-composite-field-component [form]="fieldset" <app-description-template-editor-composite-field-component [reorderingMode]="reorderingMode" [form]="fieldset"
[viewOnly]="viewOnly" [numbering]="numbering + '.'+ (i+1)" [viewOnly]="viewOnly" [numbering]="numbering + '.'+ (i+1)"
[hasFocus]="fieldset.get('id').value === selectedFieldSetId" [hasFocus]="fieldset.get('id').value === selectedFieldSetId"
[datasetProfileId]="datasetProfileId" [datasetProfileId]="datasetProfileId"
@ -107,6 +107,20 @@
translate}}</span> translate}}</span>
</div> </div>
</li> </li>
<li *ngIf="!reorderingMode" class="mli" (click)="enableReordering()">
<div class="action-list-item">
<mat-icon class="action-list-icon">unfold_more</mat-icon>
<span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.REORDER-QUESTION' |
translate}}</span>
</div>
</li>
<li *ngIf="reorderingMode" class="mli" (click)="exitReordering()">
<div class="action-list-item">
<mat-icon class="action-list-icon">unfold_more</mat-icon>
<span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.EXIT-REORDERING-MODE' |
translate}}</span>
</div>
</li>
</ul> </ul>
</nav> </nav>
</div> </div>

11
dmp-frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.ts
View File

@ -33,6 +33,7 @@ export class DescriptionTemplateEditorSectionFieldSetComponent implements OnInit
idprefix = "id"; idprefix = "id";
reorderingMode = false;
readonly dragula_prefix = "dragulaid"; readonly dragula_prefix = "dragulaid";
private subs = new Subscription(); private subs = new Subscription();
private FIELDSETS = 'FIELDSETS'; private FIELDSETS = 'FIELDSETS';
@ -228,6 +229,16 @@ export class DescriptionTemplateEditorSectionFieldSetComponent implements OnInit
}, 200); }, 200);
} }
enableReordering(): void {
this.reorderingMode = true;
this.scroller.next(this.selectedFieldSetId);
}
exitReordering(): void {
this.reorderingMode = false;
this.scroller.next(this.selectedFieldSetId);
}
private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry { private _findTocEntryById(id: string, tocentries: ToCEntry[]): ToCEntry {
if (!tocentries) { if (!tocentries) {
return null; return null;

1
dmp-frontend/src/app/ui/description/listing/description-listing.component.ts
View File

@ -331,7 +331,6 @@ export class DescriptionListingComponent extends BaseComponent implements OnInit
public restartTour(): void { public restartTour(): void {
this.setDashboardTourDmpText(); this.setDashboardTourDmpText();
console.log('lalala');
this.setDashboardTourDescriptionText(); this.setDashboardTourDescriptionText();
console.log(this.dashboardTour); console.log(this.dashboardTour);
this.guidedTourService.startTour(this.dashboardTour); this.guidedTourService.startTour(this.dashboardTour);

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

@ -557,7 +557,9 @@
"GENERAL-TOOLS": "Questions tools", "GENERAL-TOOLS": "Questions tools",
"NEW-INPUT-SET": "Add Question", "NEW-INPUT-SET": "Add Question",
"CLONE": "Clone", "CLONE": "Clone",
"DELETE": "Delete" "DELETE": "Delete",
"REORDER-QUESTION": "Reorder",
"EXIT-REORDERING-MODE": "I am done reordering"
} }
}, },
"ACTIONS": { "ACTIONS": {