148 lines
8.7 KiB
HTML
148 lines
8.7 KiB
HTML
<div class="reference-editor">
|
|
<div class="col-md-8 offset-md-2 colums-gapped">
|
|
<div class="row align-items-center mb-4" *ngIf="formGroup">
|
|
<div class="col-auto">
|
|
<h3 *ngIf="isNew && !isClone">{{'REFERENCE-EDITOR.NEW' | translate}}</h3>
|
|
<app-navigation-breadcrumb />
|
|
</div>
|
|
<div class="col-auto">
|
|
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
|
</div>
|
|
<div class="col-auto" *ngIf="!isNew">
|
|
<button mat-button class="action-btn" type="button" (click)="delete()">
|
|
<mat-icon>delete</mat-icon>
|
|
{{'REFERENCE-EDITOR.ACTIONS.DELETE' | translate}}
|
|
</button>
|
|
</div>
|
|
<div class="col-auto" *ngIf="canSave">
|
|
<button mat-button class="action-btn" (click)="formSubmit()">
|
|
<mat-icon>save</mat-icon>
|
|
{{'REFERENCE-EDITOR.ACTIONS.SAVE' | translate}}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
|
|
<mat-card appearance="outlined">
|
|
<mat-card-header>
|
|
<mat-card-title *ngIf="isNew">{{'REFERENCE-EDITOR.NEW' | translate}}</mat-card-title>
|
|
</mat-card-header>
|
|
<mat-card-content class="pt-2">
|
|
<div class="row">
|
|
<div class="col-4">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
|
|
<input matInput 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 class="col-4">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-EDITOR.FIELDS.REFERENCE' | translate}}</mat-label>
|
|
<input matInput type="text" name="reference" [formControl]="formGroup.get('reference')" required>
|
|
<mat-error *ngIf="formGroup.get('reference').hasError('backendError')">{{formGroup.get('reference').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('reference').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-4">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-EDITOR.FIELDS.TYPE' | translate}}</mat-label>
|
|
<app-single-auto-complete [required]="formGroup.get('typeId').required" [formControl]="formGroup.get('typeId')" placeholder="{{'REFERENCE-EDITOR.FIELDS.TYPE' | translate}}" [configuration]="referenceTypeService.singleAutocompleteConfiguration">
|
|
</app-single-auto-complete>
|
|
<mat-error *ngIf="formGroup.get('typeId').hasError('backendError')">{{formGroup.get('type').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('typeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-4">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-EDITOR.FIELDS.SOURCE' | translate}}</mat-label>
|
|
<input matInput type="text" name="source" [formControl]="formGroup.get('source')" required>
|
|
<mat-error *ngIf="formGroup.get('source').hasError('backendError')">{{formGroup.get('source').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('source').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-4">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-EDITOR.FIELDS.SOURCE-TYPE' | translate}}</mat-label>
|
|
<mat-select name="type" [formControl]="formGroup.get('sourceType')" required>
|
|
<mat-option *ngFor="let sourceType of referenceSourceTypeEnum" [value]="sourceType">
|
|
{{enumUtils.toReferenceSourceTypeString(sourceType)}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="formGroup.get('sourceType').hasError('backendError')">{{formGroup.get('sourceType').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('sourceType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-4">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-EDITOR.FIELDS.ABBREVIATION' | translate}}</mat-label>
|
|
<input matInput type="text" name="abbreviation" [formControl]="formGroup.get('abbreviation')">
|
|
<mat-error *ngIf="formGroup.get('abbreviation').hasError('backendError')">{{formGroup.get('abbreviation').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="formGroup.get('abbreviation').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-12">
|
|
<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'REFERENCE-EDITOR.FIELDS.DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
|
|
</rich-text-editor-component>
|
|
<div [class]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field formGroup-field-subscript-wrapper">
|
|
<mat-error *ngIf="formGroup.get('description').hasError('backendError')">{{formGroup.get('description').getError('backendError').message}}</mat-error>
|
|
<mat-error>{{'GENERAL.VALIDATION.REQUIRED'| translate}}</mat-error>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fields -->
|
|
<div class="col-12">
|
|
<h3 class="mb-4">
|
|
{{'REFERENCE-EDITOR.FIELDS.FIELDS' | translate}}
|
|
<button mat-button class="action-btn" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
|
|
</h3>
|
|
<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
|
|
<div class="col-12">
|
|
<div class="row d-flex align-items-center">
|
|
<div class="col-auto pb-3 d-flex">
|
|
<mat-card-title>{{fieldIndex + 1}}</mat-card-title>
|
|
</div>
|
|
<div class="col">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-EDITOR.FIELDS.CODE' | translate}}</mat-label>
|
|
<input matInput type="text" name="code" [formControl]="field.get('code')" required>
|
|
<mat-error *ngIf="field.get('code').hasError('backendError')">{{field.get('code').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="field.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
|
|
<mat-select name="type" [formControl]="field.get('dataType')" required>
|
|
<mat-option *ngFor="let dataType of referenceFieldDataTypeEnum" [value]="dataType">
|
|
{{enumUtils.toReferenceFieldDataTypeString(dataType)}}
|
|
</mat-option>
|
|
</mat-select>
|
|
<mat-error *ngIf="field.get('dataType').hasError('backendError')">{{field.get('dataType').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col">
|
|
<mat-form-field class="w-100">
|
|
<mat-label>{{'REFERENCE-EDITOR.FIELDS.VALUE' | translate}}</mat-label>
|
|
<input matInput type="text" name="value" [formControl]="field.get('value')">
|
|
<mat-error *ngIf="field.get('value').hasError('backendError')">{{field.get('value').getError('backendError').message}}</mat-error>
|
|
<mat-error *ngIf="field.get('value').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
<div class="col-auto pb-3 d-flex">
|
|
<button mat-icon-button class="action-list-icon" matTooltip="{{'REFERENCE-EDITOR.ACTIONS.REMOVE-FIELD' | translate}}" (click)="removeField(fieldIndex)" [disabled]="formGroup.disabled">
|
|
<mat-icon>delete</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</mat-card-content>
|
|
</mat-card>
|
|
</form>
|
|
</div>
|
|
</div> |