diff --git a/src/frontend/app/administration/indexingModel/indexing-model-administration.component.html b/src/frontend/app/administration/indexingModel/indexing-model-administration.component.html
index 9904dd1b6d579d06c4fc51d395edb3565450655c..b8e38d6590b3a4d718ee90d7ae60fe5c0e8f4b49 100644
--- a/src/frontend/app/administration/indexingModel/indexing-model-administration.component.html
+++ b/src/frontend/app/administration/indexingModel/indexing-model-administration.component.html
@@ -26,7 +26,7 @@
</div>
<mat-tab-group>
<mat-tab [label]="lang.indexingForm">
- <app-indexing-form #indexingForm [indexingFormId]="indexingModel.id"></app-indexing-form>
+ <app-indexing-form #indexingForm [indexingFormId]="indexingModel.id" [admin]="true"></app-indexing-form>
<div class="col-md-12 text-center">
<button mat-raised-button color="primary" (click)="onSubmit()"
[disabled]="(!indexingForm.isModified() && !isModified()) || indexingModel.label === ''">{{creationMode ? lang.save : lang.update}}</button>
diff --git a/src/frontend/app/indexation/indexation.component.html b/src/frontend/app/indexation/indexation.component.html
index e22cddd3a0428416053ce371b124a242cb7c3099..ede95eabc95e6952c9f38f4432d3710010aa6730 100644
--- a/src/frontend/app/indexation/indexation.component.html
+++ b/src/frontend/app/indexation/indexation.component.html
@@ -31,7 +31,7 @@
<button mat-menu-item>Item 2</button>
</mat-menu>
<button mat-button class="button-form-primary"
- style="width: 150px;align-items: center;justify-content: center;text-align: center;display: flex;">Valider</button>
+ style="width: 150px;align-items: center;justify-content: center;text-align: center;display: flex;" (click)="onSubmit()">Valider</button>
</div>
</mat-sidenav>
<mat-sidenav-content>
diff --git a/src/frontend/app/indexation/indexation.component.ts b/src/frontend/app/indexation/indexation.component.ts
index 3ea0d8ab26c4c3c1041311d501b2837ef2277a24..9b54ef106ace99a924cee90a5dfb2c5f1bdf39d0 100644
--- a/src/frontend/app/indexation/indexation.component.ts
+++ b/src/frontend/app/indexation/indexation.component.ts
@@ -12,6 +12,7 @@ import { FiltersListService } from '../../service/filtersList.service';
import { Overlay } from '@angular/cdk/overlay';
import { AppService } from '../../service/app.service';
+import { IndexingFormComponent } from './indexing-form/indexing-form.component';
@Component({
templateUrl: "indexation.component.html",
@@ -31,6 +32,8 @@ export class IndexationComponent implements OnInit {
@ViewChild('snav', { static: true }) sidenavLeft: MatSidenav;
@ViewChild('snav2', { static: true }) sidenavRight: MatSidenav;
+ @ViewChild('indexingForm', { static: false }) indexingForm: IndexingFormComponent;
+
currentSelectedChrono: string = '';
constructor(
@@ -56,4 +59,11 @@ export class IndexationComponent implements OnInit {
this.notify.handleErrors(err);
});
}
+
+ onSubmit() {
+ if (this.indexingForm.isValidForm()) {
+ alert('Form OK !');
+ }
+
+ }
}
\ No newline at end of file
diff --git a/src/frontend/app/indexation/indexing-form/indexing-form.component.html b/src/frontend/app/indexation/indexing-form/indexing-form.component.html
index 0caf3e88e144a3d01e358d4cc6db046bf72fdbde..8c9adf84be347e21c058b800db05be72d916cbdc 100644
--- a/src/frontend/app/indexation/indexing-form/indexing-form.component.html
+++ b/src/frontend/app/indexation/indexing-form/indexing-form.component.html
@@ -43,23 +43,21 @@
<div class="fieldInput" [class.checkboxInput]="field.type === 'checkbox'">
<ng-container *ngIf="field.type === 'string'">
<mat-form-field class="input-form" floatLabel="never">
- <textarea matInput [(ngModel)]="field.default_value"
+ <textarea matInput [formControl]="arrFormControl[field.identifier]"
[placeholder]="field.system ? lang[field.type + 'Input'] : lang.defaultValue"
- matTextareaAutosize matAutosizeMinRows="1" cdkAutosizeMaxRows="6"
- [disabled]="field.system && adminMode"></textarea>
+ matTextareaAutosize matAutosizeMinRows="1" cdkAutosizeMaxRows="6"></textarea>
</mat-form-field>
</ng-container>
<ng-container *ngIf="field.type === 'integer'">
<mat-form-field class="input-form" floatLabel="never">
- <input type="number" matInput [(ngModel)]="field.default_value"
+ <input type="number" matInput [formControl]="arrFormControl[field.identifier]"
[placeholder]="field.system ? lang[field.type + 'Input'] : lang.defaultValue">
</mat-form-field>
</ng-container>
<ng-container *ngIf="field.type === 'select'">
<mat-form-field class="input-form" floatLabel="never">
- <mat-select
- [placeholder]="field.system ? lang[field.type + 'Input'] : lang.defaultValue"
- [(ngModel)]="field.default_value" [disabled]="field.system && adminMode">
+ <mat-select [formControl]="arrFormControl[field.identifier]"
+ [placeholder]="field.system ? lang[field.type + 'Input'] : lang.defaultValue">
<mat-option *ngFor="let value of field.values" [value]="value.id" [title]="value.label" [disabled]="value.isTitle" [class.opt-group]="value.isTitle" [style.color]="value.color">
{{value.label}}
</mat-option>
@@ -68,17 +66,16 @@
</ng-container>
<ng-container *ngIf="field.type === 'date'">
<mat-form-field class="input-form" floatLabel="never" (click)="picker.open()">
- <input matInput [matDatepicker]="picker"
+ <input [formControl]="arrFormControl[field.identifier]" matInput [matDatepicker]="picker"
[placeholder]="field.system ? lang[field.type + 'Input'] : lang.defaultValue"
- [(ngModel)]="field.default_value" [disabled]="field.system && adminMode">
+ [min]="getMinDate(field.startDate)" [max]="getMaxDate(field.endDate)">
<mat-datepicker-toggle matSuffix [for]="picker">
</mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
</ng-container>
<ng-container *ngIf="field.type === 'radio'">
- <mat-radio-group class="radio-form" color="primary" [disabled]="field.system && adminMode"
- [(ngModel)]="field.default_value">
+ <mat-radio-group class="radio-form" color="primary" [formControl]="arrFormControl[field.identifier]">
<mat-radio-button *ngFor="let value of field.values" [value]="value">
{{value}}
</mat-radio-button>
@@ -86,8 +83,7 @@
</ng-container>
<ng-container *ngIf="field.type === 'checkbox'">
<div class="input-form checkbox-form">
- <mat-selection-list #shoes class="div-list" [disabled]="field.system && adminMode"
- [(ngModel)]="field.default_value">
+ <mat-selection-list #shoes class="div-list" [formControl]="arrFormControl[field.identifier]">
<mat-list-option *ngFor="let value of field.values" [value]="value"
checkboxPosition="before">
{{value}}
@@ -102,7 +98,9 @@
</ng-container>
</div>
<div class="fieldState">
- <i class="fas fa-asterisk" [class.noMandatory]="!field.mandatory"></i>
+ <i class="fas fa-asterisk" *ngIf="adminMode || (arrFormControl[field.identifier].hasError('required') && arrFormControl[field.identifier].untouched)" [class.noMandatory]="!field.mandatory"></i>
+ <i class="fas fa-times" style="color:red;font-size:15px;" *ngIf="!adminMode && arrFormControl[field.identifier].touched && arrFormControl[field.identifier].hasError('required')"></i>
+ <i class="fas fa-check" style="color:green;font-size:15px;" *ngIf="!adminMode && arrFormControl[field.identifier].valid && (arrFormControl[field.identifier].value!==null && arrFormControl[field.identifier].value!=='')"></i>
</div>
</div>
</ng-container>
diff --git a/src/frontend/app/indexation/indexing-form/indexing-form.component.scss b/src/frontend/app/indexation/indexing-form/indexing-form.component.scss
index bab99cf64134cc9887c46f84c8ffb18b5eee849c..1dde18ecdbd3375bdfdc9d35bf0c0c39644db577 100644
--- a/src/frontend/app/indexation/indexing-form/indexing-form.component.scss
+++ b/src/frontend/app/indexation/indexing-form/indexing-form.component.scss
@@ -58,6 +58,8 @@
.fieldState {
padding-left: 10px;
padding-right: 10px;
+ width: 40px;
+ justify-content: center;
i {
font-size: 5px;
diff --git a/src/frontend/app/indexation/indexing-form/indexing-form.component.ts b/src/frontend/app/indexation/indexing-form/indexing-form.component.ts
index c6776cada362e2e67bbd9afca817e39dd4ea35b2..4c5a2ce8696df63f37a7c6fd4ffdf2d6e3ed42dc 100644
--- a/src/frontend/app/indexation/indexing-form/indexing-form.component.ts
+++ b/src/frontend/app/indexation/indexing-form/indexing-form.component.ts
@@ -9,6 +9,7 @@ import { tap, catchError, finalize, exhaustMap } from 'rxjs/operators';
import { of } from 'rxjs';
import { SortPipe } from '../../../plugins/sorting.pipe';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
+import { FormControl, Validators, FormGroup, ValidationErrors } from '@angular/forms';
@Component({
selector: 'app-indexing-form',
@@ -150,6 +151,10 @@ export class IndexingFormComponent implements OnInit {
availableCustomFields: any[] = []
+ indexingFormGroup: FormGroup;
+
+ arrFormControl: any = {};
+
constructor(
public http: HttpClient,
private notify: NotificationService,
@@ -162,7 +167,7 @@ export class IndexingFormComponent implements OnInit {
ngOnInit(): void {
this.adminMode === undefined ? this.adminMode = false : this.adminMode = true;
-
+
this.fieldCategories.forEach(category => {
this['indexingModels_' + category] = [];
});
@@ -235,6 +240,7 @@ export class IndexingFormComponent implements OnInit {
if (fieldExist) {
this['indexingModels_' + field.unit].push(field);
+ this.arrFormControl[field.identifier] = new FormControl({ value: field.default_value, disabled: (field.system && this.adminMode) }, field.mandatory ? [Validators.required] : []);
} else {
this.notify.error("Le champ " + field.identifier + " n'existe pas !");
}
@@ -246,6 +252,7 @@ export class IndexingFormComponent implements OnInit {
});
this.initElemForm();
+ this.createForm();
}),
finalize(() => this.loading = false),
catchError((err: any) => {
@@ -262,7 +269,7 @@ export class IndexingFormComponent implements OnInit {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
-
+ this.arrFormControl[event.item.data.identifier] = new FormControl({ value: '', disabled: false }, event.item.data.mandatory ? [Validators.required] : []);
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
@@ -293,6 +300,9 @@ export class IndexingFormComponent implements OnInit {
this.fieldCategories.forEach(category => {
arrIndexingModels = arrIndexingModels.concat(this['indexingModels_' + category]);
});
+ arrIndexingModels.forEach(element => {
+ element.default_value = this.arrFormControl[element.identifier].value;
+ });
return arrIndexingModels;
}
@@ -336,69 +346,143 @@ export class IndexingFormComponent implements OnInit {
initElemForm() {
this.fieldCategories.forEach(element => {
this['indexingModels_' + element].forEach((elem: any) => {
- if (elem.identifier === 'category_id') {
- this.http.get("../../rest/categories").pipe(
- tap((data: any) => {
- elem.values = data.categories;
- }),
- finalize(() => this.loading = false),
- catchError((err: any) => {
- this.notify.handleErrors(err);
- return of(false);
- })
- ).subscribe();
- } else
- if (elem.identifier === 'priority') {
- this.http.get("../../rest/priorities").pipe(
- tap((data: any) => {
- elem.values = data.priorities;
- }),
- finalize(() => this.loading = false),
- catchError((err: any) => {
- this.notify.handleErrors(err);
- return of(false);
- })
- ).subscribe();
+ console.log(elem);
+ if (elem.identifier === 'docDate') {
+ elem.startDate = '';
+ elem.endDate = '_TODAY';
} else
- if (elem.identifier === 'doctype') {
- this.http.get("../../rest/doctypes").pipe(
- tap((data: any) => {
- let arrValues: any[] = [];
- data.structure.forEach((doctype: any) => {
- if (doctype['doctypes_second_level_id'] === undefined) {
- arrValues.push({
- id: doctype.doctypes_first_level_id,
- label: doctype.doctypes_first_level_label,
- isTitle: true,
- color: doctype.css_style
- });
- } else if (doctype['description'] === undefined) {
- arrValues.push({
- id: doctype.doctypes_second_level_id,
- label: doctype.doctypes_second_level_label,
- isTitle: true,
- color: doctype.css_style
- });
-
- arrValues = arrValues.concat(data.structure.filter((info: any) => info.doctypes_second_level_id === doctype.doctypes_second_level_id && info.description !== undefined).map((info: any) => {
- return {
- id: info.type_id,
- label: info.description,
- isTitle: false
+ if (elem.identifier === 'destination') {
+ elem.values = [
+ {
+ label : 'test',
+ id: 1
+ },
+ {
+ label : 'plus',
+ id: 2
+ }
+ ];
+ } else
+ if (elem.identifier === 'arrivalDate') {
+ elem.startDate = 'docDate';
+ elem.endDate = '_TODAY';
+ } else
+ if (elem.identifier === 'category_id') {
+ this.http.get("../../rest/categories").pipe(
+ tap((data: any) => {
+ elem.values = data.categories;
+ }),
+ finalize(() => this.loading = false),
+ catchError((err: any) => {
+ this.notify.handleErrors(err);
+ return of(false);
+ })
+ ).subscribe();
+ } else
+ if (elem.identifier === 'priority') {
+ this.http.get("../../rest/priorities").pipe(
+ tap((data: any) => {
+ elem.values = data.priorities;
+ }),
+ finalize(() => this.loading = false),
+ catchError((err: any) => {
+ this.notify.handleErrors(err);
+ return of(false);
+ })
+ ).subscribe();
+ } else
+ if (elem.identifier === 'category_id') {
+ this.http.get("../../rest/categories").pipe(
+ tap((data: any) => {
+ elem.values = data.categories;
+ }),
+ finalize(() => this.loading = false),
+ catchError((err: any) => {
+ this.notify.handleErrors(err);
+ return of(false);
+ })
+ ).subscribe();
+ } else
+ if (elem.identifier === 'doctype') {
+ this.http.get("../../rest/doctypes").pipe(
+ tap((data: any) => {
+ let arrValues: any[] = [];
+ data.structure.forEach((doctype: any) => {
+ if (doctype['doctypes_second_level_id'] === undefined) {
+ arrValues.push({
+ id: doctype.doctypes_first_level_id,
+ label: doctype.doctypes_first_level_label,
+ isTitle: true,
+ color: doctype.css_style
+ });
+ } else if (doctype['description'] === undefined) {
+ arrValues.push({
+ id: doctype.doctypes_second_level_id,
+ label: doctype.doctypes_second_level_label,
+ isTitle: true,
+ color: doctype.css_style
+ });
+
+ arrValues = arrValues.concat(data.structure.filter((info: any) => info.doctypes_second_level_id === doctype.doctypes_second_level_id && info.description !== undefined).map((info: any) => {
+ return {
+ id: info.type_id,
+ label: info.description,
+ isTitle: false
+ }
+ }));
+ }
+ });
+ elem.values = arrValues;
+ }),
+ finalize(() => this.loading = false),
+ catchError((err: any) => {
+ this.notify.handleErrors(err);
+ return of(false);
+ })
+ ).subscribe();
}
- }));
- }
- });
- elem.values = arrValues;
- }),
- finalize(() => this.loading = false),
- catchError((err: any) => {
- this.notify.handleErrors(err);
- return of(false);
- })
- ).subscribe();
- }
});
});
}
+
+ createForm() {
+ this.indexingFormGroup = new FormGroup(this.arrFormControl);
+ console.log(this.arrFormControl['indexingCustomField_1'].value)
+ }
+
+ isValidForm() {
+ if (!this.indexingFormGroup.valid) {
+ Object.keys(this.indexingFormGroup.controls).forEach(key => {
+
+ const controlErrors: ValidationErrors = this.indexingFormGroup.get(key).errors;
+ if (controlErrors != null) {
+ this.indexingFormGroup.controls[key].markAsTouched();
+ /*Object.keys(controlErrors).forEach(keyError => {
+ console.log('Key control: ' + key + ', keyError: ' + keyError + ', err value: ', controlErrors[keyError]);
+ });*/
+ }
+ });
+ }
+ return this.indexingFormGroup.valid;
+ }
+
+ getMinDate(id: string) {
+ if (this.arrFormControl[id] !== undefined) {
+ return this.arrFormControl[id].value;
+ } else if (id === '_TODAY') {
+ return new Date();
+ } else {
+ return '';
+ }
+ }
+
+ getMaxDate(id: string) {
+ if (this.arrFormControl[id] !== undefined) {
+ return this.arrFormControl[id].value;
+ } else if (id === '_TODAY') {
+ return new Date();
+ } else {
+ return '';
+ }
+ }
}
\ No newline at end of file