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

styling fixes

This commit is contained in:
Sofia Papacharalampous 2024-06-03 12:30:34 +03:00
parent 280975679f
commit 1ae6d6a20a
1 changed files with 101 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,124 +27,128 @@
<div class="row"> <div class="row">
<mat-form-field class="col-6"> <div class="col-4">
<mat-form-field class="w-100">
<!-- NEW VERSION --> <!-- NEW VERSION -->
<mat-select #select placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [(ngModel)]="fieldType" (selectionChange)="onInputTypeChange()" [disabled]="viewOnly" [errorStateMatcher]="this"> <mat-select #select placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.VIEW-STYLE' | translate}}" [(ngModel)]="fieldType" (selectionChange)="onInputTypeChange()" [disabled]="viewOnly" [errorStateMatcher]="this">
<mat-select-trigger> <mat-select-trigger>
{{enumUtils.toDescriptionTemplateFieldTypeString(select.value)}} {{enumUtils.toDescriptionTemplateFieldTypeString(select.value)}}
</mat-select-trigger> </mat-select-trigger>
<mat-option [value]="descriptionTemplateFieldTypeEnum.TEXT_AREA"> <mat-option [value]="descriptionTemplateFieldTypeEnum.TEXT_AREA">
<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="TextArea icon"> <img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="TextArea icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TEXT_AREA)}} {{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TEXT_AREA)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA">
<img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="RichTextArea icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.FREE_TEXT">
<img src="/assets/images/editor/icons/free_text.svg" class="input_icon" alt="FreeText icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.FREE_TEXT)}}
</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="descriptionTemplateFieldTypeEnum.UPLOAD">
<!-- <img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Upload icon">-->
<mat-icon class="input_icon" style="font-size: 14px; color: #129d99; display: inline-flex; align-items: center">upload</mat-icon>
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.UPLOAD)}}
</mat-option>
<mat-divider></mat-divider>
<mat-option [value]="descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION">
<img src="/assets/images/editor/icons/boolean.svg" class="input_icon" alt="Boolean icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.RADIO_BOX">
<img src="/assets/images/editor/icons/radio_box.svg" class="input_icon" alt="RadioBox icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RADIO_BOX)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.SELECT">
<span class="input_icon">
<img src="/assets/images/editor/icons/select.svg" style="padding-right: 7px;" alt="Select icon">
</span>
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.SELECT)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.CHECK_BOX">
<img src="/assets/images/editor/icons/checkbox.svg" class="input_icon" alt="CheckBox icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.CHECK_BOX)}}
</mat-option>
<!-- TODO -->
<mat-divider></mat-divider>
<mat-option [value]="descriptionTemplateFieldTypeEnum.DATE_PICKER">
<img src="/assets/images/editor/icons/date_picker.svg" class="input_icon" alt="DatePicker icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATE_PICKER)}}
</mat-option>
<mat-divider></mat-divider>
<!-- APIS -->
<mat-optgroup label="APIs">
<mat-option [value]="descriptionTemplateFieldTypeEnum.REFERENCE_TYPES">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Registries icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.REFERENCE_TYPES)}}
</mat-option> </mat-option>
</mat-optgroup> <mat-option [value]="descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA">
<!-- TODO --> <img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="RichTextArea icon">
<mat-divider></mat-divider> {{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RICH_TEXT_AREA)}}
<mat-optgroup label="Argos Entities">
<mat-option [value]="descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DMPS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="InternalDmpEntities icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DMPS)}}
</mat-option> </mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS"> <mat-option [value]="descriptionTemplateFieldTypeEnum.FREE_TEXT">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="InternalDmpEntities icon"> <img src="/assets/images/editor/icons/free_text.svg" class="input_icon" alt="FreeText icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS)}} {{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.FREE_TEXT)}}
</mat-option> </mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.TAGS"> <mat-divider></mat-divider>
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Tags icon"> <mat-option [value]="descriptionTemplateFieldTypeEnum.UPLOAD">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TAGS)}} <!-- <img src="/assets/images/editor/icons/text_area.svg" class="input_icon" alt="Upload icon">-->
<mat-icon class="input_icon" style="font-size: 14px; color: #129d99; display: inline-flex; align-items: center">upload</mat-icon>
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.UPLOAD)}}
</mat-option> </mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER"> <mat-divider></mat-divider>
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="DatasetIdentifier icon"> <mat-option [value]="descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER)}} <img src="/assets/images/editor/icons/boolean.svg" class="input_icon" alt="Boolean icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.BOOLEAN_DECISION)}}
</mat-option> </mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.VALIDATION"> <mat-option [value]="descriptionTemplateFieldTypeEnum.RADIO_BOX">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Validation icon"> <img src="/assets/images/editor/icons/radio_box.svg" class="input_icon" alt="RadioBox icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.VALIDATION)}} {{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.RADIO_BOX)}}
</mat-option> </mat-option>
</mat-optgroup> <mat-option [value]="descriptionTemplateFieldTypeEnum.SELECT">
<span class="input_icon">
<img src="/assets/images/editor/icons/select.svg" style="padding-right: 7px;" alt="Select icon">
</span>
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.SELECT)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.CHECK_BOX">
<img src="/assets/images/editor/icons/checkbox.svg" class="input_icon" alt="CheckBox icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.CHECK_BOX)}}
</mat-option>
<!-- TODO -->
<mat-divider></mat-divider>
</mat-select> <mat-option [value]="descriptionTemplateFieldTypeEnum.DATE_PICKER">
<mat-error *ngIf="this.form.get('data').get('fieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <img src="/assets/images/editor/icons/date_picker.svg" class="input_icon" alt="DatePicker icon">
<mat-error *ngIf="form.get('data').get('fieldType').hasError('backendError')">{{form.get('data').get('fieldType').getError('backendError').message}}</mat-error> {{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATE_PICKER)}}
<!-- <mat-error>{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> --> </mat-option>
<!-- <mat-error *ngIf="this.form.hasError('inputTypeNotValid')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
</mat-form-field> <mat-divider></mat-divider>
<!-- APIS -->
<mat-form-field class="col-6"> <mat-optgroup label="APIs">
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}</mat-label> <mat-option [value]="descriptionTemplateFieldTypeEnum.REFERENCE_TYPES">
<app-multiple-auto-complete placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="this.form.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration"> <img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Registries icon">
</app-multiple-auto-complete> {{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.REFERENCE_TYPES)}}
<mat-error *ngIf="form.get('semantics').hasError('backendError')">{{form.get('semantics').getError('backendError').message}}</mat-error> </mat-option>
</mat-form-field> </mat-optgroup>
<!-- TODO -->
<mat-divider></mat-divider>
<mat-optgroup label="Argos Entities">
<mat-option [value]="descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DMPS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="InternalDmpEntities icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DMPS)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="InternalDmpEntities icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.INTERNAL_ENTRIES_DESCRIPTIONS)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.TAGS">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Tags icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.TAGS)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="DatasetIdentifier icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.DATASET_IDENTIFIER)}}
</mat-option>
<mat-option [value]="descriptionTemplateFieldTypeEnum.VALIDATION">
<img src="/assets/images/editor/icons/api_entity.svg" class="input_icon" alt="Validation icon">
{{enumUtils.toDescriptionTemplateFieldTypeString(descriptionTemplateFieldTypeEnum.VALIDATION)}}
</mat-option>
</mat-optgroup>
<div class="col-6"> </mat-select>
<mat-checkbox [formControl]="this.form.get('includeInExport')" [disabled]="viewOnly">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXPORT' | translate}}</mat-checkbox> <mat-error *ngIf="this.form.get('data').get('fieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="form.get('includeInExport').hasError('backendError')">{{form.get('includeInExport').getError('backendError').message}}</mat-error> <mat-error *ngIf="form.get('data').get('fieldType').hasError('backendError')">{{form.get('data').get('fieldType').getError('backendError').message}}</mat-error>
<!-- <mat-error>{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
<!-- <mat-error *ngIf="this.form.hasError('inputTypeNotValid')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> -->
</mat-form-field>
</div> </div>
<ng-container *ngIf="canSetDefaultValue(form.get('data')?.get('fieldType')?.value)"> <ng-container *ngIf="canSetDefaultValue(form.get('data')?.get('fieldType')?.value)">
<div class="col-6" *ngIf="isTextType(form.get('data')?.get('fieldType')?.value) || isTextListType(form.get('data')?.get('fieldType')?.value)"> <div class="col" *ngIf="isTextType(form.get('data')?.get('fieldType')?.value) || isTextListType(form.get('data')?.get('fieldType')?.value)">
<app-description-template-editor-default-value-component [fieldType]="form.get('data').get('fieldType').value" [form]="this.form.get('defaultValue')?.get('textValue')" [formArrayOptions]="form.get('data')?.get('options')" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" required="false"></app-description-template-editor-default-value-component> <app-description-template-editor-default-value-component [fieldType]="form.get('data').get('fieldType').value" [form]="this.form.get('defaultValue')?.get('textValue')" [formArrayOptions]="form.get('data')?.get('options')" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" required="false"></app-description-template-editor-default-value-component>
</div> </div>
<div class="col-6" *ngIf="isDateType(form.get('data')?.get('fieldType')?.value)"> <div class="col" *ngIf="isDateType(form.get('data')?.get('fieldType')?.value)">
<app-description-template-editor-default-value-component [fieldType]="form.get('data').get('fieldType').value" [form]="this.form.get('defaultValue')?.get('dateValue')" [formArrayOptions]="form.get('data')?.get('options')" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" required="false"></app-description-template-editor-default-value-component> <app-description-template-editor-default-value-component [fieldType]="form.get('data').get('fieldType').value" [form]="this.form.get('defaultValue')?.get('dateValue')" [formArrayOptions]="form.get('data')?.get('options')" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" required="false"></app-description-template-editor-default-value-component>
</div> </div>
<div class="col-6" *ngIf="isBooleanType(form.get('data')?.get('fieldType')?.value)"> <div class="col" *ngIf="isBooleanType(form.get('data')?.get('fieldType')?.value)">
<app-description-template-editor-default-value-component [fieldType]="form.get('data').get('fieldType').value" [form]="this.form.get('defaultValue')?.get('booleanValue')" [formArrayOptions]="form.get('data')?.get('options')" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" required="false"></app-description-template-editor-default-value-component> <app-description-template-editor-default-value-component [fieldType]="form.get('data').get('fieldType').value" [form]="this.form.get('defaultValue')?.get('booleanValue')" [formArrayOptions]="form.get('data')?.get('options')" placeHolder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.FIELDS.DEFAULT-VALUE' | translate}}" required="false"></app-description-template-editor-default-value-component>
</div> </div>
</ng-container> </ng-container>
<div class="col-12"></div>
<div class="col-auto">
<mat-checkbox [formControl]="this.form.get('includeInExport')" [disabled]="viewOnly">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.EXPORT' | translate}}</mat-checkbox>
<mat-error *ngIf="form.get('includeInExport').hasError('backendError')">{{form.get('includeInExport').getError('backendError').message}}</mat-error>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}</mat-label>
<app-multiple-auto-complete placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.COMPOSITE-FIELD.FIELDS.SEMANTICS' | translate}}" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="this.form.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
</app-multiple-auto-complete>
<mat-error *ngIf="form.get('semantics').hasError('backendError')">{{form.get('semantics').getError('backendError').message}}</mat-error>
</mat-form-field>
</div>
<div class="col-auto mb-4 mt-2"> <div class="col-auto mb-4 mt-2">
<div class="add-visibility-button" (click)="addNewRule()" *ngIf="!viewOnly && fieldType && canApplyVisibility"> <div class="add-visibility-button" (click)="addNewRule()" *ngIf="!viewOnly && fieldType && canApplyVisibility">
<img src="/assets/images/editor/icons/add_visibility_rule_2.svg" class="visibility-icon" alt="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate"> <img src="/assets/images/editor/icons/add_visibility_rule_2.svg" class="visibility-icon" alt="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELD.ADD-VISIBILITY-RULE' | translate">