plan blueprint editor > Required checkbox > disable and set to true when system field always required, fix delete conditions

This commit is contained in:
mchouliara 2024-08-28 14:14:05 +03:00
parent ee7acec75b
commit b3b8b1d0c4
3 changed files with 103 additions and 76 deletions

View File

@ -5,7 +5,7 @@
<div class="col-md col-12"> <div class="col-md col-12">
<app-navigation-breadcrumb /> <app-navigation-breadcrumb />
</div> </div>
<div class="col-md-auto mb-md-0 col-12 mb-2" *ngIf="!hideEditActions && canDelete"> <div class="col-md-auto mb-md-0 col-12 mb-2" *ngIf="canDelete">
<button [disabled]="isLocked" mat-button class="action-btn" type="button" (click)="delete()"> <button [disabled]="isLocked" mat-button class="action-btn" type="button" (click)="delete()">
<mat-icon>delete</mat-icon> <mat-icon>delete</mat-icon>
{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}} {{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}}
@ -103,6 +103,7 @@
</div> </div>
<div class="col"> <div class="col">
<div class="row align-items-center"> <div class="row align-items-center">
<!-- FIELD TYPE -->
<div class="col-12 col-xl-4"> <div class="col-12 col-xl-4">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label> <mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.CATEGORY' | translate}}</mat-label>
@ -113,7 +114,9 @@
<mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('category').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value === planBlueprintSectionFieldCategory.System"> @switch(field.get('category').value){
@case(planBlueprintSectionFieldCategory.System){
<div class="col-12 col-xl-4">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label> <mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.SYSTEM-FIELD-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('systemFieldType')"> <mat-select [formControl]="field.get('systemFieldType')">
@ -123,7 +126,9 @@
<mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('systemFieldType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value === planBlueprintSectionFieldCategory.Extra"> }
@case(planBlueprintSectionFieldCategory.Extra){
<div class="col-12 col-xl-4">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label> <mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.DATA-TYPE' | translate}}</mat-label>
<mat-select [formControl]="field.get('dataType')"> <mat-select [formControl]="field.get('dataType')">
@ -135,7 +140,9 @@
<mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('dataType').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value === planBlueprintSectionFieldCategory.ReferenceType"> }
@case(planBlueprintSectionFieldCategory.ReferenceType){
<div class="col-12 col-xl-4">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label> <mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}</mat-label>
<app-single-auto-complete placeholder="{{'PLAN-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}" [required]="true" [formControl]="field.get('referenceTypeId')" [configuration]="referenceTypeService.singleAutocompleteConfiguration"></app-single-auto-complete> <app-single-auto-complete placeholder="{{'PLAN-BLUEPRINT-EDITOR.FIELDS.REFERENCE-TYPE' | translate}}" [required]="true" [formControl]="field.get('referenceTypeId')" [configuration]="referenceTypeService.singleAutocompleteConfiguration"></app-single-auto-complete>
@ -143,7 +150,10 @@
<mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('referenceTypeId').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null"> }
}
@if(field.get('category').value != null){
<div class="col-12 col-xl-4">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label> <mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.FIELD-LABEL' | translate}}</mat-label>
<input matInput type="text" name="label" [formControl]="field.get('label')"> <input matInput type="text" name="label" [formControl]="field.get('label')">
@ -151,7 +161,7 @@
<mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null"> <div class="col-12 col-xl-4">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label> <mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.FIELD-PLACEHOLDER' | translate}}</mat-label>
<input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')"> <input matInput type="text" name="placeholder" [formControl]="field.get('placeholder')">
@ -159,7 +169,7 @@
<mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('placeholder').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 col-xl-4" *ngIf="field.get('category').value != null"> <div class="col-12 col-xl-4">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label> <mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.FIELD-DESCRIPTION' | translate}}</mat-label>
<input matInput type="text" name="description" [formControl]="field.get('description')"> <input matInput type="text" name="description" [formControl]="field.get('description')">
@ -167,7 +177,7 @@
<mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('description').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-12 order-xl-8" *ngIf="field.get('category').value != null"> <div class="col-12 order-xl-8">
<mat-form-field class="mt-3 w-100"> <mat-form-field class="mt-3 w-100">
<mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label> <mat-label>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}</mat-label>
<app-multiple-auto-complete placeholder="{{'PLAN-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration"> <app-multiple-auto-complete placeholder="{{'PLAN-BLUEPRINT-EDITOR.FIELDS.SEMANTICS' | translate}}" [required]="false" [separatorKeysCodes]="separatorKeysCodes" [formControl]="field.get('semantics')" [configuration]="semanticsService.multipleAutocompleteConfiguration">
@ -176,17 +186,20 @@
<mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('semantics').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field> </mat-form-field>
</div> </div>
<div class="col-auto col-xl-2 section-field" *ngIf="field.get('category').value != null"> <div class="col-auto col-xl-2 section-field">
<mat-checkbox [disabled]="alwaysRequiredSystemFieldTypes.includes(field.get('systemFieldType')?.value) || formGroup.disabled" [checked]="field.get('required').value" (change)="field.get('required').setValue($event.checked)"><span>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox> <mat-checkbox [formControl]="field.get('required')"><span>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.FIELD-REQUIRED' | translate}}</span></mat-checkbox>
<mat-error *ngIf="field.get('required').hasError('backendError')">{{field.get('required').getError('backendError').message}}</mat-error> <mat-error *ngIf="field.get('required').hasError('backendError')">{{field.get('required').getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('required').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div> </div>
}
<div class="col-auto col-xl-2"> <div class="col-auto col-xl-2">
<div *ngIf="field.get('category').value === planBlueprintSectionFieldCategory.ReferenceType"> @if(field.get('category').value === planBlueprintSectionFieldCategory.ReferenceType){
<mat-checkbox [disabled]="formGroup.disabled" [checked]="field.get('multipleSelect').value" (change)="field.get('multipleSelect').setValue($event.checked)"><span>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.FIELD-MULTIPLE-SELECT' | translate}}</span></mat-checkbox> <div>
<mat-checkbox [formControl]="field.get('multipleSelect')"><span>{{'PLAN-BLUEPRINT-EDITOR.FIELDS.FIELD-MULTIPLE-SELECT' | translate}}</span></mat-checkbox>
<mat-error *ngIf="field.get('multipleSelect')?.hasError('backendError')">{{field.get('multipleSelect')?.getError('backendError').message}}</mat-error> <mat-error *ngIf="field.get('multipleSelect')?.hasError('backendError')">{{field.get('multipleSelect')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="field.get('multipleSelect')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error> <mat-error *ngIf="field.get('multipleSelect')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div> </div>
}
</div> </div>
</div> </div>
</div> </div>

View File

@ -90,7 +90,7 @@ export class PlanBlueprintEditorComponent extends BaseEditor<PlanBlueprintEditor
} }
protected get canDelete(): boolean { protected get canDelete(): boolean {
return !this.isTransient && this.hasPermission(this.authService.permissionEnum.DeletePlanBlueprint); return !this.isDeleted && !this.isTransient && this.belongsToCurrentTenant && this.hasPermission(this.authService.permissionEnum.DeletePlanBlueprint);
} }
protected get canFinalize(): boolean { protected get canFinalize(): boolean {

View File

@ -23,6 +23,7 @@ export class PlanBlueprintEditorModel extends BaseEditorModel implements PlanBlu
public validationErrorModel: ValidationErrorModel = new ValidationErrorModel(); public validationErrorModel: ValidationErrorModel = new ValidationErrorModel();
protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder(); protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
constructor() { super(); } constructor() { super(); }
public fromModel(item: PlanBlueprint): PlanBlueprintEditorModel { public fromModel(item: PlanBlueprint): PlanBlueprintEditorModel {
@ -372,7 +373,7 @@ export class FieldInSectionEditorModel implements FieldInSectionPersist {
}); });
} }
return this.formBuilder.group({ const formGroup = this.formBuilder.group({
id: [{ value: this.id, disabled: disabled }, context.getValidation('id').validators], id: [{ value: this.id, disabled: disabled }, context.getValidation('id').validators],
category: [{ value: this.category, disabled: disabled }, context.getValidation('category').validators], category: [{ value: this.category, disabled: disabled }, context.getValidation('category').validators],
@ -387,6 +388,19 @@ export class FieldInSectionEditorModel implements FieldInSectionPersist {
referenceTypeId: [{ value: this.referenceTypeId, disabled: disabled }, context.getValidation('referenceTypeId').validators], referenceTypeId: [{ value: this.referenceTypeId, disabled: disabled }, context.getValidation('referenceTypeId').validators],
multipleSelect: [{ value: this.multipleSelect, disabled: disabled }, context.getValidation('multipleSelect').validators], multipleSelect: [{ value: this.multipleSelect, disabled: disabled }, context.getValidation('multipleSelect').validators],
}); });
formGroup.get('systemFieldType').valueChanges.subscribe((systemFieldType: PlanBlueprintSystemFieldType) => {
const required = formGroup.get('required');
if(systemFieldType != null && FieldInSectionEditorModel.alwaysRequiredSystemFieldTypes.includes(systemFieldType)){
required.setValue(true);
required.disable();
} else {
if(required.disabled){
required.enable();
}
}
})
return formGroup;
} }
static createValidationContext(params: { static createValidationContext(params: {