refactor plan editor html with clickable labels
This commit is contained in:
mchouliara
parent
7ea402c71e
commit
f2ce857e33
|
|
@ -78,28 +78,28 @@
|
|||
<div class="row" id="editor-form" *ngIf="this.step === 0 && this.isNew">
|
||||
<div class="col-12 blueprint-section">
|
||||
<div class="row">
|
||||
<div class="heading2 col-12">{{'PLAN-EDITOR.FIELDS.TITLE' | translate}} *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></div>
|
||||
<label for="titleInput" class="heading2 col-12">{{'PLAN-EDITOR.FIELDS.TITLE' | translate}} *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></label>
|
||||
<div class="col-12">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{'PLAN-EDITOR.FIELDS.TITLE' | translate}}</mat-label>
|
||||
<input matInput type="text" name="label" [formControl]="formGroup.get('label')" required>
|
||||
<input matInput id="titleInput" type="text" name="label" [formControl]="formGroup.get('label')" required>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="heading2 col-12">{{'PLAN-EDITOR.FIELDS.DESCRIPTION' | translate}}</div>
|
||||
<label class="heading2 col-12" (click)="newDescriptionInput?.focus()">{{'PLAN-EDITOR.FIELDS.DESCRIPTION' | translate}}</label>
|
||||
<div class="col-12">
|
||||
<rich-text-editor-component [form]="formGroup.get('description')" placeholder="{{'PLAN-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [required]="false">
|
||||
<rich-text-editor-component #newDescriptionInput [form]="formGroup.get('description')" placeholder="{{'PLAN-EDITOR.PLACEHOLDER.DESCRIPTION' | translate}}" [required]="false">
|
||||
</rich-text-editor-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="plan-blueprint-form" style="margin-top: 3%;">
|
||||
<div class="heading2">{{'PLAN-EDITOR.FIELDS.BLUEPRINT' | translate}} *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></div>
|
||||
<label for="blueprintInput" class="heading2">{{'PLAN-EDITOR.FIELDS.BLUEPRINT' | translate}} *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></label>
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{'PLAN-EDITOR.FIELDS.BLUEPRINT' | translate}}</mat-label>
|
||||
<app-single-auto-complete [required]="false" [formControl]="formGroup.get('blueprint')" placeholder="{{'PLAN-EDITOR.PLACEHOLDER.BLUEPRINT' | translate}}" [configuration]="singleAutocompleteBlueprintConfiguration">
|
||||
<app-single-auto-complete [id]="'blueprintInput'" [required]="false" [formControl]="formGroup.get('blueprint')" placeholder="{{'PLAN-EDITOR.PLACEHOLDER.BLUEPRINT' | translate}}" [configuration]="singleAutocompleteBlueprintConfiguration">
|
||||
</app-single-auto-complete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
|
@ -201,174 +201,226 @@
|
|||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div *ngFor="let field of section.fields; let j=index">
|
||||
<div class="heading-wrapper row align-items-start" [id]="field.id">
|
||||
<div class="col-auto">
|
||||
<div class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.System">{{i + 1}}.{{j + 1}} {{enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}}
|
||||
<span *ngIf="field.required"> *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
|
||||
@if(field.category === planBlueprintSectionFieldCategoryEnum.System){
|
||||
@switch(field.systemFieldType){
|
||||
@case(planBlueprintSystemFieldTypeEnum.AccessRights){
|
||||
<div class="heading-wrapper row align-items-start" [id]="field.id">
|
||||
<div class="col-auto">
|
||||
<label (click)="matSelect?.focus()" class="heading">{{i + 1}}.{{j + 1}} {{field.label ?? enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}}
|
||||
<span *ngIf="field.required"> *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
|
||||
</label>
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="linkAnnotationTemplate"/>
|
||||
</div>
|
||||
<div class="input-form">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-select #matSelect [formControl]="formGroup.get('accessType')" placeholder="{{ field.placeholder && field.placeholder != '' ? field.placeholder : 'PLAN-EDITOR.FIELDS.ACCESS-TYPE' | translate}}">
|
||||
<mat-option *ngFor="let planAccessType of planAccessTypeEnumValues" [value]="planAccessType">
|
||||
{{enumUtils.toPlanAccessTypeString(planAccessType)}}
|
||||
</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>
|
||||
}@case(planBlueprintSystemFieldTypeEnum.Language){
|
||||
<div class="heading-wrapper row align-items-start" [id]="field.id">
|
||||
<div class="col-auto">
|
||||
<label (click)="languageInput?.focus()" class="heading">{{i + 1}}.{{j + 1}} {{field.label ?? enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}}
|
||||
<span *ngIf="field.required"> *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
|
||||
</label>
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="linkAnnotationTemplate"/>
|
||||
</div>
|
||||
<div class="input-form">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-select #languageInput [formControl]="formGroup.get('language')" placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : 'PLAN-EDITOR.FIELDS.LANGUAGE' | translate}}" required>
|
||||
<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
|
||||
{{ lang.name }}
|
||||
</mat-option>
|
||||
</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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}@case(planBlueprintSystemFieldTypeEnum.Description){
|
||||
<div class="heading-wrapper row align-items-start" [id]="field.id">
|
||||
<div class="col-auto">
|
||||
<label (click)="descriptionInput?.focus()" class="heading">{{i + 1}}.{{j + 1}} {{field.label ?? enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}}
|
||||
<span *ngIf="field.required"> *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
|
||||
</label>
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="linkAnnotationTemplate"/>
|
||||
</div>
|
||||
<div class="input-form">
|
||||
<rich-text-editor-component #descriptionInput [form]="formGroup.get('description')" [editable]="formGroup.get('description').status !== 'DISABLED'" [placeholder]="field.placeholder && field.placeholder != '' ? field.placeholder : 'PLAN-EDITOR.PLACEHOLDER.DESCRIPTION'" [required]="field.required"></rich-text-editor-component>
|
||||
</div>
|
||||
}
|
||||
@case(planBlueprintSystemFieldTypeEnum.Title){
|
||||
<ng-container *ngTemplateOutlet="headerCommonTemplate; context: {labelAlt: enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}"/>
|
||||
<div class="input-form">
|
||||
<mat-form-field class="w-100">
|
||||
<input id="{{i + 1}}.{{j + 1}}" matInput placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : field.label && field.label != '' ? field.label : 'PLAN-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" [formControl]="formGroup.get('label')" required>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
|
||||
{{formGroup.get('label').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}@case(planBlueprintSystemFieldTypeEnum.Contact){
|
||||
<ng-container *ngTemplateOutlet="headerCommonTemplate; context: {labelAlt: enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}"/>
|
||||
<div class="input-form row">
|
||||
<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 class="col-12 col-xl-auto pr-0">
|
||||
<span *ngIf="!isContactSelected(contactIndex)" class="ml-2" 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)" class="ml-2">
|
||||
<mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled || !canEdit}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col pt-3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{'PLAN-EDITOR.FIELDS.FIRST-NAME' | translate}}</mat-label>
|
||||
<input id="{{i + 1}}.{{j + 1}}" 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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{'PLAN-EDITOR.FIELDS.LAST-NAME' | translate}}</mat-label>
|
||||
<input id="{{i + 1}}.{{j + 1}}" 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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{'PLAN-EDITOR.FIELDS.EMAIL' | translate}}</mat-label>
|
||||
<input id="{{i + 1}}.{{j + 1}}" 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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
|
||||
<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-EDITOR.ACTIONS.SEARCH-CONTACT' | translate}}" (click)="searchContact(contactIndex, field)" [disabled]="formGroup.disabled || (!isNew && !this.canSave)">
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
|
||||
<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-EDITOR.ACTIONS.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled || (!isNew && !this.canSave)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</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 class="col-12">
|
||||
<button mat-icon-button (click)="addContact()" [disabled]="formGroup.disabled || isFinalized || (!this.canSave && !isNew)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}@case(planBlueprintSystemFieldTypeEnum.User){
|
||||
<ng-container *ngTemplateOutlet="headerCommonTemplate; context: {labelAlt: enumUtils.toPlanBlueprintSystemFieldTypeString(field.systemFieldType)}"/>
|
||||
<div class="input-form">
|
||||
<app-plan-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [viewOnly]="formGroup.disabled || !canEdit"></app-plan-user-field-component>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
@if(field.category === planBlueprintSectionFieldCategoryEnum.ReferenceType){
|
||||
<ng-container *ngTemplateOutlet="headerCommonTemplate; context: {labelAlt: field.referenceType.name}"/>
|
||||
<div class="input-form">
|
||||
<ng-container *ngIf="field.multipleSelect">
|
||||
<app-reference-field-component id="{{i + 1}}.{{j + 1}}" [form]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('references')" [dependencies]="formGroup.get('properties').get('planBlueprintValues')" [label]="field.label" [placeholder]="field.placeholder && field.placeholder != '' ? field.placeholder : field.label" [referenceType]="field.referenceType" [multiple]="true"></app-reference-field-component>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!(field.multipleSelect)">
|
||||
<app-reference-field-component id="{{i + 1}}.{{j + 1}}" [form]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('reference')" [dependencies]="formGroup.get('properties').get('planBlueprintValues')" [label]="field.label" [placeholder]="field.placeholder && field.placeholder != '' ? field.placeholder : field.label" [referenceType]="field.referenceType" [multiple]="false"></app-reference-field-component>
|
||||
</ng-container>
|
||||
</div>
|
||||
}
|
||||
@if(field.category === planBlueprintSectionFieldCategoryEnum.Extra){
|
||||
@switch(field.dataType){
|
||||
@case(planBlueprintExtraFieldDataTypeEnum.Text){
|
||||
<ng-container *ngTemplateOutlet="headerCommonTemplate; context: {labelAlt: ''}"/>
|
||||
<div class="input-form">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{field.label}}</mat-label>
|
||||
<input id="{{i + 1}}.{{j + 1}}" matInput placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : field.label}}" type="text" name="value" [formControl]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue')" [required]="field.required">
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue').hasError('backendError')">{{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
@case(planBlueprintExtraFieldDataTypeEnum.RichText){
|
||||
<div class="heading-wrapper row align-items-start" [id]="field.id">
|
||||
<div class="col-auto">
|
||||
<label (click)="richTextInput?.focus()" class="heading">{{i + 1}}.{{j + 1}} {{field.label}}
|
||||
<span *ngIf="field.required"> *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
|
||||
</label>
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="linkAnnotationTemplate"/>
|
||||
</div>
|
||||
<div class="input-form">
|
||||
<rich-text-editor-component #richTextInput [form]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue')" placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : field.label}}" [required]="field.required"></rich-text-editor-component>
|
||||
</div>
|
||||
}@case(planBlueprintExtraFieldDataTypeEnum.Date) {
|
||||
<ng-container *ngTemplateOutlet="headerCommonTemplate; context: {labelAlt: ''}"/>
|
||||
<div class="input-form">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{field.label}}</mat-label>
|
||||
<input id="{{i + 1}}.{{j + 1}}" matInput placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : field.label}}" name="value" [formControl]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('dateValue')" [matDatepicker]="date" [required]="field.required">
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('dateValue').hasError('backendError')">{{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('dateValue').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('dateValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}@case(planBlueprintExtraFieldDataTypeEnum.Number) {
|
||||
<ng-container *ngTemplateOutlet="headerCommonTemplate; context: {labelAlt: ''}"/>
|
||||
<div class="input-form">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{field.label}}</mat-label>
|
||||
<input id="{{i + 1}}.{{j + 1}}" matInput placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : field.label}}" type="number" name="value" [formControl]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('numberValue')" [required]="field.required">
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('numberValue').hasError('backendError')">{{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('numberValue').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('numberValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
<ng-template #headerCommonTemplate let labelAlt="labelAlt">
|
||||
<div class="heading-wrapper row align-items-start" [id]="field.id">
|
||||
<div class="col-auto">
|
||||
<label for="{{i + 1}}.{{j + 1}}" class="heading">{{i + 1}}.{{j + 1}} {{field.label ?? labelAlt}}
|
||||
<span *ngIf="field.required"> *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="heading" *ngIf="!field.label && field.category === planBlueprintSectionFieldCategoryEnum.ReferenceType">{{i + 1}}.{{j + 1}} {{field.referenceType.name}}
|
||||
<span *ngIf="field.required"> *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
|
||||
</div>
|
||||
<div class="heading" *ngIf="field.label">{{i + 1}}.{{j + 1}} {{field.label}}
|
||||
<span *ngIf="field.required"> *<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto link-icon" style="margin-top: 1rem;">
|
||||
<button *ngIf="!hildeLink" mat-icon-button type="button" matTooltip="{{ 'PLAN-EDITOR.ACTIONS.COPY-LINK' | translate }}" (click)="copyLink(field?.id)">
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<ng-container *ngTemplateOutlet="linkAnnotationTemplate"/>
|
||||
</div>
|
||||
</ng-template>
|
||||
<ng-template #linkAnnotationTemplate>
|
||||
@if(!isNew){
|
||||
<div class="col-auto link-icon" style="margin-top: 1rem;">
|
||||
<button mat-icon-button type="button" matTooltip="{{ 'PLAN-EDITOR.ACTIONS.COPY-LINK' | translate }}" (click)="copyLink(field?.id)">
|
||||
<mat-icon>link</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="ml-auto col-auto" style="margin-top: 1rem;">
|
||||
<button mat-icon-button class="col-auto annotation-icon" (click)="showAnnotations(field.id)" matTooltip="{{ 'PLAN-EDITOR.ACTIONS.ANNOTATIONS' | translate }}" [disabled]="!canAnnotate(section.id)">
|
||||
<button mat-icon-button class="col-auto annotation-icon" (click)="showAnnotations(field.id)" matTooltip="{{ 'PLAN-EDITOR.ACTIONS.ANNOTATIONS' | translate }}" [disabled]="!canAnnotate(section.id)" [attr.aria-label]="'PLAN-EDITOR.ACTIONS.ANNOTATIONS' | translate">
|
||||
<mat-icon [matBadge]="annotationsPerAnchor?.get(field.id)" [matBadgeHidden]="annotationsPerAnchor?.get(field.id) <= 0" matBadgeColor="warn">comment</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div *ngIf="field.description != null && field.description.length > 0" class="hint">{{field.description}}</div>
|
||||
|
||||
<div class="input-form">
|
||||
<div *ngIf="field.category === planBlueprintSectionFieldCategoryEnum.System">
|
||||
<div *ngIf="field.systemFieldType == planBlueprintSystemFieldTypeEnum.Title">
|
||||
<mat-form-field class="w-100">
|
||||
<input matInput placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : field.label && field.label != '' ? field.label : 'PLAN-EDITOR.FIELDS.TITLE' | translate}}" type="text" name="label" [formControl]="formGroup.get('label')" required>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">
|
||||
{{formGroup.get('label').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('label').hasError('required')">
|
||||
{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="field.systemFieldType == planBlueprintSystemFieldTypeEnum.Description">
|
||||
<rich-text-editor-component [form]="formGroup.get('description')" [editable]="formGroup.get('description').status !== 'DISABLED'" [placeholder]="field.placeholder && field.placeholder != '' ? field.placeholder : 'PLAN-EDITOR.PLACEHOLDER.DESCRIPTION'" [required]="field.required">
|
||||
</rich-text-editor-component>
|
||||
</div>
|
||||
<div *ngIf="field.systemFieldType == planBlueprintSystemFieldTypeEnum.Language">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-select [formControl]="formGroup.get('language')" placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : 'PLAN-EDITOR.FIELDS.LANGUAGE' | translate}}" required>
|
||||
<mat-option *ngFor="let lang of getLanguageInfos()" [value]="lang.code">
|
||||
{{ lang.name }}
|
||||
</mat-option>
|
||||
</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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="field.systemFieldType == planBlueprintSystemFieldTypeEnum.Contact" class="row">
|
||||
<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 class="col-12 col-xl-auto pr-0">
|
||||
<span *ngIf="!isContactSelected(contactIndex)" class="ml-2" 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)" class="ml-2">
|
||||
<mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled || !canEdit}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col pt-3">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{'PLAN-EDITOR.FIELDS.FIRST-NAME' | translate}}</mat-label>
|
||||
<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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{'PLAN-EDITOR.FIELDS.LAST-NAME' | translate}}</mat-label>
|
||||
<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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="col">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{'PLAN-EDITOR.FIELDS.EMAIL' | translate}}</mat-label>
|
||||
<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('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
|
||||
<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-EDITOR.ACTIONS.SEARCH-CONTACT' | translate}}" (click)="searchContact(contactIndex, field)" [disabled]="formGroup.disabled || (!isNew && !this.canSave)">
|
||||
<mat-icon>search</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div *ngIf="canSave || isNew" class="col-12 col-xl-auto">
|
||||
<button mat-icon-button class="action-list-icon" matTooltip="{{'PLAN-EDITOR.ACTIONS.REMOVE-CONTACT' | translate}}" (click)="removeContact(contactIndex)" [disabled]="formGroup.disabled || (!isNew && !this.canSave)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</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 class="col-12">
|
||||
<button mat-icon-button (click)="addContact()" [disabled]="formGroup.disabled || isFinalized || (!this.canSave && !isNew)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="field.systemFieldType == planBlueprintSystemFieldTypeEnum.AccessRights">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-select [formControl]="formGroup.get('accessType')" placeholder="{{ field.placeholder && field.placeholder != '' ? field.placeholder : 'PLAN-EDITOR.FIELDS.ACCESS-TYPE' | translate}}">
|
||||
<mat-option *ngFor="let planAccessType of planAccessTypeEnumValues" [value]="planAccessType">
|
||||
{{enumUtils.toPlanAccessTypeString(planAccessType)}}
|
||||
</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 == planBlueprintSystemFieldTypeEnum.User">
|
||||
<div>
|
||||
<app-plan-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint.definition.sections" [viewOnly]="formGroup.disabled || !canEdit"></app-plan-user-field-component>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="field.category === planBlueprintSectionFieldCategoryEnum.ReferenceType">
|
||||
<ng-container *ngIf="field.multipleSelect">
|
||||
<app-reference-field-component [form]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('references')" [dependencies]="formGroup.get('properties').get('planBlueprintValues')" [label]="field.label" [placeholder]="field.placeholder && field.placeholder != '' ? field.placeholder : field.label" [referenceType]="field.referenceType" [multiple]="true"></app-reference-field-component>
|
||||
</ng-container>
|
||||
<ng-container *ngIf="!(field.multipleSelect)">
|
||||
<app-reference-field-component [form]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('reference')" [dependencies]="formGroup.get('properties').get('planBlueprintValues')" [label]="field.label" [placeholder]="field.placeholder && field.placeholder != '' ? field.placeholder : field.label" [referenceType]="field.referenceType" [multiple]="false"></app-reference-field-component>
|
||||
</ng-container>
|
||||
</div>
|
||||
<div *ngIf="field.category === planBlueprintSectionFieldCategoryEnum.Extra">
|
||||
<div *ngIf="field.dataType === planBlueprintExtraFieldDataTypeEnum.Text">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{field.label}}</mat-label>
|
||||
<input matInput placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : field.label}}" type="text" name="value" [formControl]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue')" [required]="field.required">
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue').hasError('backendError')">{{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="field.dataType === planBlueprintExtraFieldDataTypeEnum.RichText">
|
||||
<rich-text-editor-component [form]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('fieldValue')" placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : field.label}}" [required]="field.required"></rich-text-editor-component>
|
||||
</div>
|
||||
<div *ngIf="field.dataType === planBlueprintExtraFieldDataTypeEnum.Date">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{field.label}}</mat-label>
|
||||
<input matInput placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : field.label}}" name="value" [formControl]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('dateValue')" [matDatepicker]="date" [required]="field.required">
|
||||
<mat-datepicker-toggle matSuffix [for]="date"></mat-datepicker-toggle>
|
||||
<mat-datepicker #date></mat-datepicker>
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('dateValue').hasError('backendError')">{{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('dateValue').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('dateValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="field.dataType === planBlueprintExtraFieldDataTypeEnum.Number">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{field.label}}</mat-label>
|
||||
<input matInput placeholder="{{field.placeholder && field.placeholder != '' ? field.placeholder : field.label}}" type="number" name="value" [formControl]="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('numberValue')" [required]="field.required">
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('numberValue').hasError('backendError')">{{formGroup.get('properties').get('planBlueprintValues').get(field.id).get('numberValue').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('properties').get('planBlueprintValues').get(field.id).get('numberValue').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="field.description != null && field.description.length > 0" class="col-12 hint">{{field.description}}</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -377,10 +429,10 @@
|
|||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="input-form">
|
||||
<div class="heading">{{'PLAN-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}</div>
|
||||
<label for="{{i + 1}}.{{j + 1}}" class="heading">{{'PLAN-EDITOR.FIELDS.DESCRIPTION-TEMPLATES' | translate}}</label>
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{'PLAN-EDITOR.FIELDS.DESCRIPTION-TEMPLATES-HINT' | translate}}</mat-label>
|
||||
<app-multiple-auto-complete placeholder="{{'PLAN-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 id="{{i + 1}}.{{j + 1}}" placeholder="{{'PLAN-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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -555,9 +555,7 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
|
|||
}
|
||||
|
||||
&.attach-file.mdc-button-disabled, &.attach-file.mdc-button-disabled:hover {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid darkgray;
|
||||
color: darkgrey !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue