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

remove colorizeInvalid, fix table of content coloring on form error, validate form on click next

This commit is contained in:
mchouliara 2024-09-05 13:51:53 +03:00
parent c1be82d9f9
commit e068d5e566
6 changed files with 19 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
View File

@ -148,7 +148,6 @@
[links]="toCEntries"
[itemSelected]="selectedTocEntry"
[viewOnly]="viewOnly"
[colorizeInvalid]="colorizeInvalid"
[showErrors]="showErrors"
(dataNeedsRefresh)="onDataNeedsRefresh($event)"
(itemClick)="displayItem($event)"
@ -188,7 +187,7 @@
<div class="col-12">
<button mat-button class="rounded-btn secondary" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
</div>
<mat-error *ngIf="selectedTocEntry.form.invalid && showErrors">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="selectedTocEntry.form.touched && selectedTocEntry.form.invalid">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
}
</div>
</formGroup>
@ -268,7 +267,8 @@
<mat-icon class="back-icon pointer">chevron_left</mat-icon>
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.PREVIOUS' | translate}}
</button>
<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="rounded-btn secondary ml-3" [@next_btn] (click)="stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="rounded-btn secondary ml-3" [@next_btn] (click)="validateStep(stepper?.selectedIndex); stepper?.next();">
<!-- [disabled]="!isStepCompleted(stepper?.selectedIndex)" -->
<span>{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.NEXT' | translate}}</span>
<mat-icon class="back-icon pointer" iconPositionEnd>chevron_right</mat-icon>
</button>

18
frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.ts
View File

@ -70,7 +70,6 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
steps: QueryList<CdkStep>;
toCEntries: ToCEntry[];
selectedTocEntry: ToCEntry;
colorizeInvalid: boolean = false;
tocEntryEnumValues = ToCEntryType;
usersMap: Map<Guid, User> = new Map<Guid, User>();
@ -445,10 +444,10 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
}
validateStep(selectedIndex) {
if (selectedIndex === 1) {//form description
if (this.formGroup.invalid) {
this.formService.touchAllFormFields(this.formGroup);
this.checkFormValidation(selectedIndex);
}
}
}
@ -1259,19 +1258,6 @@ export class DescriptionTemplateEditorComponent extends BaseEditor<DescriptionTe
return (<UntypedFormArray>this.formGroup.get('definition').get('pages'))?.length;
}
checkFormValidation(index: number) {
switch(index){
case 0: {
this.colorizeInvalid = true;
break;
}
case 1: {
this.showErrors = true;
break;
}
}
}
get progressStyle() {
const diff = 3;

1
frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.html
View File

@ -16,7 +16,6 @@
[draggingItemId]="draggingItemId"
[parentRootId]="ROOT_ID"
style="padding-right: 1em;"
[colorizeInvalid]="colorizeInvalid"
>
</app-description-template-table-of-contents-internal-section>
<div class="top-scroller table-scroller" [hidden]="!isDragging">

1
frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.ts
View File

@ -19,7 +19,6 @@ export class DescriptionTemplateTableOfContents extends BaseComponent implements
@Input() links: ToCEntry[];
@Input() itemSelected: ToCEntry;
@Input() colorizeInvalid: boolean = false;
@Input() viewOnly: boolean;
@Input() showErrors: boolean = false;

21
frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html
View File

@ -3,8 +3,10 @@
<span class="table-label-element"
[ngClass]="{
'table-label-element-active': itemSelected?.id == parentLink?.id,
'text-danger': colorError() ||( (parentLink?.subEntriesType === tocEntryType.FieldSet )&& !colorError() && !selectedItemInLinks && parentLink?.form.invalid && colorizeInvalid && (itemSelected?.id != parentLink?.id) && !_findTocEntryById(itemSelected?.id, parentLink?.subEntries)),
'link-info-error': showErrors && !parentLink?.form?.valid
'text-danger': parentLink.form?.touched && parentLink.form?.invalid,
'link-info-error': showErrors && parentLink?.form?.invalid
}"
(click)="itemClicked(parentLink)" [ngStyle]="{'font-size' : (parentLink.type == tocEntryType.FieldSet? '.9rem':'1rem')}" [id]="'TABLE_ENTRY'+parentLink.id">
{{parentLink?.numbering}} {{parentLink?.form.get('title').value? parentLink?.form.get('title').value : 'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate}}
@ -57,7 +59,6 @@
[isDragging]="isDragging"
[draggingItemId]="draggingItemId"
[parentRootId]="parentRootId"
[colorizeInvalid]="colorizeInvalid"
[showErrors]="showErrors"
(itemClick)="itemClicked($event)"
(removeEntry)="deleteEntry($event)"
@ -71,7 +72,7 @@
<ng-container *ngIf="!isDragging">
<ng-container *ngIf="selectedItemInLinks && (link.type != tocEntryType.Page) && isLast && (!viewOnly)">
<button mat-button style="padding-left: 0px;" (click)="createNewEntry({childType:link.type,parent:parentLink})">
<button mat-button (click)="createNewEntry({childType:link.type,parent:parentLink})">
<ng-container [ngSwitch]="link.type">
<ng-container *ngSwitchCase="tocEntryType.Section">
<div class="d-flex" style="align-items: center;">
@ -110,7 +111,7 @@
<ng-container *ngIf="parentLink?.type != tocEntryType.FieldSet && !viewOnly && parentLink?.id == itemSelected?.id" >
<div *ngIf="parentLink?.type == tocEntryType.Page; else notAPage" class="docs-link mt-0">
<div class="ml-3">
<button mat-button style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
<button mat-button style="display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
<div class="d-flex" style="align-items: center;">
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
<!-- Create new subsection -->
@ -123,13 +124,13 @@
<div *ngIf="!links; else withSubItems" class="docs-link mt-0">
<div class="ml-3">
<!-- Give option to generate fieldset (only if parent is section) -->
<button *ngIf="parentLink.type == tocEntryType.Section" mat-button style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
<button *ngIf="parentLink.type == tocEntryType.Section" mat-button (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
<img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: -0.2em;" class="add-input-icon">
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
</button>
<!-- Give option to generate section -->
<button mat-button style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
<button mat-button style="display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
<!-- Subsection + -->
<div class="d-flex" style="align-items: center;">
@ -147,7 +148,7 @@
<div class="ml-3">
<ng-container [ngSwitch]="linksType">
<ng-container *ngSwitchCase="tocEntryType.Section">
<button mat-button style="padding-left: 0px; display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
<button mat-button style="display: block;" (click)="createNewEntry({childType:tocEntryType.Section,parent:parentLink})">
<div class="d-flex" style="align-items: center;">
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>
<!-- Create new subsection -->
@ -156,7 +157,7 @@
</button>
</ng-container>
<ng-container *ngSwitchCase="tocEntryType.FieldSet">
<button *ngIf="parentLink.type == tocEntryType.Section" mat-button style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
<button *ngIf="parentLink.type == tocEntryType.Section" mat-button (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
<img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: -0.2em;" class="add-input-icon">
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
</button>
@ -171,7 +172,7 @@
<!-- Only for the page -->
<div *ngIf="parentLink?.subEntriesType == tocEntryType.Page && !viewOnly">
<button mat-button class="mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" style="padding-left:0px">
<button mat-button class="mt-2" (click)="createNewEntry({childType:parentLink.subEntriesType,parent:parentLink})" >
<!-- <mat-icon>add</mat-icon> -->
<div class="d-flex" style="align-items: center;">
<mat-icon color="accent" style="font-size: 1.6em;margin-left: -0.3em;">add</mat-icon>

80
frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.ts
View File

@ -29,7 +29,6 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo
@Input() draggingItemId: string;
@Input() parentRootId: string;
@Input() colorizeInvalid: boolean = false;
@Input() viewOnly: boolean;
@Input() showErrors: boolean = false;
@ -102,83 +101,4 @@ export class DescriptionTemplateTableOfContentsInternalSection extends BaseCompo
return tocEntryFound ? tocEntryFound : null;
}
colorError(): boolean {
if (!this.colorizeInvalid) return false;
const form = this.parentLink.form;
if ((!form || form.valid || !form.touched) && this.parentLink.type !== this.tocEntryType.Page) return false;
const allFieldsAreTouched = this.allFieldsAreTouched(form);
//fieldset may have errros that are inside its controls and not in the fieldsetFormGroup
if (this.parentLink.type === this.tocEntryType.FieldSet && allFieldsAreTouched) return true;
if (form.errors && allFieldsAreTouched) return true;
//check if page has sections
if (this.parentLink.type === this.tocEntryType.Page && allFieldsAreTouched) {
const rootForm = form.root;
if (rootForm) {
const sections = rootForm.get('sections') as UntypedFormArray;
if (!sections.controls.find(section => section.get('page').value === this.parentLink.id)) {
return true;
}
}
}
//checking first child form controls if have errors
let hasErrors = false;
if (allFieldsAreTouched) {
if (form instanceof UntypedFormGroup) {
const formGroup = form as UntypedFormGroup;
const controls = Object.keys(formGroup.controls);
controls.forEach(control => {
if (formGroup.get(control).errors) {
hasErrors = true;
}
})
}
}
return hasErrors;
}
allFieldsAreTouched(aControl: AbstractControl) {//auto na testaroume
if (!aControl || aControl.untouched) return false;
if (aControl instanceof UntypedFormControl) {
return aControl.touched;
} else if (aControl instanceof UntypedFormGroup) {
const controlKeys = Object.keys((aControl as UntypedFormGroup).controls);
let areAllTouched = true;
controlKeys.forEach(key => {
if (!this.allFieldsAreTouched(aControl.get(key))) {
areAllTouched = false;
}
})
return areAllTouched;
} else if (aControl instanceof UntypedFormArray) {
const controls = (aControl as UntypedFormArray).controls;
let areAllTouched = true;
controls.forEach(control => {
if (!this.allFieldsAreTouched(control)) {
areAllTouched = false;
}
});
return areAllTouched;
}
return false;
}
}