diff --git a/src/frontend/app/administration/customField/custom-fields-administration.component.html b/src/frontend/app/administration/customField/custom-fields-administration.component.html
index 236f5cd93f3995ffd724cc60cd77c41a2fd36c3e..63165148811d5f9007ceedfe2edf100004c58a75 100644
--- a/src/frontend/app/administration/customField/custom-fields-administration.component.html
+++ b/src/frontend/app/administration/customField/custom-fields-administration.component.html
@@ -12,13 +12,12 @@
</div>
<mat-card *ngIf="!loading" class="card-app-content">
<mat-tab-group>
- <mat-tab label="Champ(s) utilisable">
- <div class="alert-message alert-message-info" role="alert"
- style="margin-top: 30px;max-width: 100%;" *ngIf="customFields.length === 0"
- [innerHTML]="'<b>Aucun champ personnalisé</b> n\'est défini, sélectionner des élément disponible sur le <b>panneau de droite</b> afin de créer de nouveaux champs.'">
+ <mat-tab [label]="lang.usableFields">
+ <div class="alert-message alert-message-info" role="alert" *ngIf="customFields.length === 0"
+ [innerHTML]="lang.noCustomFieldInfo">
</div>
<mat-accordion>
- <mat-expansion-panel *ngFor="let custom of customFields;index as indexCustom" (opened)="initCustomFieldCheck(custom)">
+ <mat-expansion-panel *ngFor="let custom of customFields;index as indexCustom">
<mat-expansion-panel-header>
<mat-panel-title color="primary">
{{custom.label}}
@@ -29,14 +28,15 @@
</mat-expansion-panel-header>
<div class="col-md-6">
<mat-form-field>
- <input matInput name="label" [(ngModel)]="custom.label" placeholder="Nom"
- [value]="custom.label">
+ <input matInput name="label" [(ngModel)]="custom.label"
+ [placeholder]="lang.label" [value]="custom.label">
</mat-form-field>
</div>
<div class="col-md-6">
<mat-form-field>
- <input matInput name="default_value" placeholder="Valeur par défaut"
- [(ngModel)]="custom.default_value" [value]="custom.default_value" [disabled]="custom.type === 'date'">
+ <input matInput name="default_value" [placeholder]="lang.defaultValue"
+ [(ngModel)]="custom.default_value" [value]="custom.default_value"
+ [disabled]="custom.type === 'date'">
</mat-form-field>
</div>
<div class="col-md-12"
@@ -44,12 +44,23 @@
<mat-expansion-panel class="customFieldValues" opened>
<mat-expansion-panel-header>
<mat-panel-title>
- Liste de valeurs
+ {{lang.valuesList}}
</mat-panel-title>
</mat-expansion-panel-header>
- <button mat-raised-button color="primary" (click)="addValue(indexCustom)"> Ajouter
- une valeur</button>
- <button mat-raised-button color="primary" (click)="sortValues(custom)"> Trier</button>
+ <div class="actionValuesCustom">
+ <div style="flex: 1;">
+ <button mat-raised-button color="primary"
+ (click)="addValue(indexCustom)">
+ {{lang.addValue}}</button>
+ </div>
+ <div>
+ <button mat-mini-fab color="default" *ngIf="custom.values.length > 0"
+ (click)="sortValues(custom)" [title]="lang.orderValues">
+ <mat-icon color="primary" class="fas fa-sort-alpha-down"
+ style="height:auto;"></mat-icon>
+ </button>
+ </div>
+ </div>
<div class="col-md-12">
<mat-form-field *ngFor="let value of custom.values;let i=index;">
<input matInput [(ngModel)]="value.label">
@@ -63,7 +74,8 @@
</div>
<div class="col-md-12 text-center">
<button mat-raised-button color="primary"
- (click)="updateCustomField(custom)" [disabled]="isModified(custom)">{{lang.update}}</button>
+ (click)="updateCustomField(custom,indexCustom)"
+ [disabled]="isModified(custom,indexCustom)">{{lang.update}}</button>
<button mat-raised-button color="warn"
(click)="removeCustomField(indexCustom)">{{lang.delete}}</button>
</div>
@@ -78,10 +90,10 @@
[fixedInViewport]="appService.getViewMode()" fixedTopGap="56" position='end' opened
class="col-md-4 col-sm-12 customFielsdPanel">
<mat-tab-group>
- <mat-tab label="Types de champs disponibles">
- <div style="display:flex;" *ngFor="let customField of customFieldsTypes">
- <div style="justify-content: center;display: flex;align-items: center;width:60px;">
- <button mat-icon-button color="primary" (click)="addCustomField(customField)">
+ <mat-tab [label]="lang.customFieldsTypesAvailable">
+ <div class="customFieldsTypesItem" *ngFor="let customField of customFieldsTypes">
+ <div class="addCustomFieldTypeContainer">
+ <button mat-icon-button color="primary" (click)="addCustomField(customField)" [title]="lang.add">
<mat-icon class="fas fa-plus-circle fa-2x"></mat-icon>
</button>
</div>
@@ -89,25 +101,22 @@
<div style="color: rgba(0,0,0,0.54);">{{customField.label}} :</div>
<ng-container *ngIf="customField.type === 'string'">
<mat-form-field class="input-form" floatLabel="never">
- <textarea matInput placeholder="Saisisser une valeur" matTextareaAutosize
+ <textarea matInput [placeholder]="lang.typeValue" matTextareaAutosize
matAutosizeMinRows="1" cdkAutosizeMaxRows="6"></textarea>
</mat-form-field>
</ng-container>
<ng-container *ngIf="customField.type === 'select'">
<mat-form-field class="input-form" floatLabel="never">
- <mat-select placeholder="selectionner une valeur">
- <mat-option value="1">
- option 1
- </mat-option>
- <mat-option value="2">
- option 2
+ <mat-select [placeholder]="lang.chooseValue">
+ <mat-option *ngFor="let sample of sampleIncrement" [value]="sample">
+ {{lang.choice}} {{sample}}
</mat-option>
</mat-select>
</mat-form-field>
</ng-container>
<ng-container *ngIf="customField.type === 'date'">
<mat-form-field class="input-form" floatLabel="never">
- <input matInput [matDatepicker]="picker" placeholder="Selectionner une date"
+ <input matInput [matDatepicker]="picker" [placeholder]="lang.chooseDate"
(click)="picker.open()">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
@@ -115,67 +124,22 @@
</ng-container>
<ng-container *ngIf="customField.type === 'radio'">
<mat-radio-group class="radio-form" color="primary">
- <mat-radio-button value="1">
- choix 1
- </mat-radio-button>
- <mat-radio-button value="2">
- choix 2
- </mat-radio-button>
- <mat-radio-button value="3">
- choix 3
- </mat-radio-button>
- <mat-radio-button value="4">
- choix 4
+ <mat-radio-button *ngFor="let sample of sampleIncrement" [value]="sample">
+ {{lang.choice}} {{sample}}
</mat-radio-button>
</mat-radio-group>
</ng-container>
<ng-container *ngIf="customField.type === 'checkbox'">
<div class="input-form checkbox-form">
<mat-selection-list #shoes class="div-list">
- <mat-list-option checkboxPosition="before">
- option 1
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 2
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 3
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 4
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 5
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 6
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 7
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 8
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 9
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 10
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 11
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 12
- </mat-list-option>
- <mat-list-option checkboxPosition="before">
- option 13
+ <mat-list-option *ngFor="let sample of sampleIncrement" [value]="sample" checkboxPosition="before">
+ {{lang.choice}} {{sample}}
</mat-list-option>
</mat-selection-list>
</div>
<mat-chip-list class="checkbox-selected-list">
<mat-chip *ngFor="let chip of shoes.selectedOptions.selected" selected>
- valeur slectionnée
+ {{lang.selectedValue}}
</mat-chip>
</mat-chip-list>
</ng-container>
diff --git a/src/frontend/app/administration/customField/custom-fields-administration.component.scss b/src/frontend/app/administration/customField/custom-fields-administration.component.scss
index 795d570201dde64aafd83215f5e1ac31b3c578f9..8f1da8c902699363908e2358433fad65f643261d 100644
--- a/src/frontend/app/administration/customField/custom-fields-administration.component.scss
+++ b/src/frontend/app/administration/customField/custom-fields-administration.component.scss
@@ -132,4 +132,26 @@
display: flex;
align-items: center;
justify-content: center;
+}
+
+.actionValuesCustom {
+ display: flex;
+}
+
+.alert-message-info {
+ margin-top: 30px;
+ max-width: 100%;
+}
+
+.addCustomFieldTypeContainer {
+ justify-content: center;
+ display: flex;
+ align-items: center;
+ width:60px;
+}
+
+.customFieldsTypesItem {
+ display:flex;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
\ No newline at end of file
diff --git a/src/frontend/app/administration/customField/custom-fields-administration.component.ts b/src/frontend/app/administration/customField/custom-fields-administration.component.ts
index 9906bb9a806d8985bcc1688fa2229f3e16a02500..feee399853bd56da9fbbed3692937a4af67e18cb 100644
--- a/src/frontend/app/administration/customField/custom-fields-administration.component.ts
+++ b/src/frontend/app/administration/customField/custom-fields-administration.component.ts
@@ -27,7 +27,6 @@ export class CustomFieldsAdministrationComponent implements OnInit {
lang: any = LANG;
loading: boolean = false;
- creationMode: any = false;
customFieldsTypes: any[] = [
{
@@ -51,17 +50,13 @@ export class CustomFieldsAdministrationComponent implements OnInit {
type: 'checkbox'
}
]
- customFields: any[] = [
- {
- id: 4,
- label: 'Nouveau champ',
- type: 'select',
- values: [],
- default_value: ''
- }
- ];
+ customFields: any[] = [];
+ customFieldsClone: any[] = [];
+
+ incrementCreation: number = 1;
+
+ sampleIncrement: number[] = [1,2,3,4];
- customFieldClone: any;
dialogRef: MatDialogRef<any>;
@@ -85,18 +80,18 @@ export class CustomFieldsAdministrationComponent implements OnInit {
// TO FIX DATA BINDING SIMPLE ARRAY VALUES
map((data: any) => {
data.customFields.forEach((element: any) => {
- if (element.values != null) {
- element.values = element.values.map((info: any) => {
- return {
- label: info
- }
- });
- }
+ element.values = element.values.map((info: any) => {
+ return {
+ label: info
+ }
+ });
+
});
return data;
}),
tap((data: any) => {
this.customFields = data.customFields;
+ this.customFieldsClone = JSON.parse(JSON.stringify(this.customFields));
}),
finalize(() => this.loading = false),
catchError((err: any) => {
@@ -116,7 +111,7 @@ export class CustomFieldsAdministrationComponent implements OnInit {
filter((data: string) => data === 'ok'),
tap(() => {
newCustomField = {
- label: 'Nouveau champ',
+ label: this.lang.newField + ' ' + this.incrementCreation,
type: customFieldType.type,
values: [],
default_value: ''
@@ -127,6 +122,7 @@ export class CustomFieldsAdministrationComponent implements OnInit {
newCustomField.id = data.customFieldId
this.customFields.push(newCustomField);
this.notify.success(this.lang.customFieldAdded);
+ this.incrementCreation++;
}),
catchError((err: any) => {
this.notify.handleErrors(err);
@@ -138,7 +134,7 @@ export class CustomFieldsAdministrationComponent implements OnInit {
addValue(indexCustom: number) {
this.customFields[indexCustom].values.push(
{
- label: 'Nouvelle donnée'
+ label: this.lang.newValue
}
);
}
@@ -152,8 +148,10 @@ export class CustomFieldsAdministrationComponent implements OnInit {
this.dialogRef.afterClosed().pipe(
filter((data: string) => data === 'ok'),
+ exhaustMap(() => this.http.delete('../../rest/customFields/' + this.customFields[indexCustom].id)),
tap(() => {
this.customFields.splice(indexCustom, 1);
+ this.notify.success(this.lang.customFieldDeleted);
}),
catchError((err: any) => {
this.notify.handleErrors(err);
@@ -162,16 +160,16 @@ export class CustomFieldsAdministrationComponent implements OnInit {
).subscribe();
}
- updateCustomField(customField: any) {
+ updateCustomField(customField: any, indexCustom: number) {
// TO FIX DATA BINDING SIMPLE ARRAY VALUES
const customFieldToUpdate = { ...customField };
- if (customField.values != null) {
- customFieldToUpdate.values = customField.values.map((data: any) => data.label)
- }
+
+ customFieldToUpdate.values = customField.values.map((data: any) => data.label)
this.http.put('../../rest/customFields/' + customField.id, customFieldToUpdate).pipe(
tap(() => {
+ this.customFieldsClone[indexCustom] = customField;
this.notify.success(this.lang.customFieldUpdated);
}),
catchError((err: any) => {
@@ -185,13 +183,8 @@ export class CustomFieldsAdministrationComponent implements OnInit {
customField.values = this.sortPipe.transform(customField.values, 'label');
}
- initCustomFieldCheck(customField: any) {
- console.log('init');
- this.customFieldClone = JSON.parse(JSON.stringify(customField));
- }
-
- isModified(customField: any) {
- if (JSON.stringify(customField) === JSON.stringify(this.customFieldClone)) {
+ isModified(customField: any, indexCustomField: number) {
+ if (JSON.stringify(customField) === JSON.stringify(this.customFieldsClone[indexCustomField])) {
return true;
} else {
return false;
diff --git a/src/frontend/lang/lang-en.ts b/src/frontend/lang/lang-en.ts
index cb8e868958de9aca12c63135c5da0dcc72997841..0f7fdf25b7ef01a7bdfdeb4ca48b36cc29d2e6c8 100755
--- a/src/frontend/lang/lang-en.ts
+++ b/src/frontend/lang/lang-en.ts
@@ -1081,4 +1081,20 @@ export const LANG_EN = {
"dateInput" : "Date input",
"radioInput" : "Radio input",
"checkboxInput" : "Checbox input",
+ "newField" : "New field",
+ "newValue" : "New value",
+ "customFieldAdded" : "Custom field added",
+ "customFieldUpdated" : "Custom field updated",
+ "customFieldDeleted" : "Custom field deleted",
+ "usableFields" : "Usable field(s)",
+ "noCustomFieldInfo" : "<b>No custom field</b> available, choose avaiblable custom fields types on <b>right panel</b> in order to create new custom fields.",
+ "defaultValue" : "Default value",
+ "valuesList" : "List of values",
+ "addValue" : "Add a value",
+ "orderValues" : "Order values",
+ "customFieldsTypesAvailable" : "Custom fields types available",
+ "typeValue" : "Type a value",
+ "chooseDate" : "Choose a date",
+ "selectedValue" : "Selected value",
+ "choice" : "Choice",
};
diff --git a/src/frontend/lang/lang-fr.ts b/src/frontend/lang/lang-fr.ts
index eec072c236614a57f05e001c30315d13b1796ea6..4e29d20a700e12dd33c239fa9cde2d63174e9f48 100755
--- a/src/frontend/lang/lang-fr.ts
+++ b/src/frontend/lang/lang-fr.ts
@@ -1118,4 +1118,20 @@ export const LANG_FR = {
"dateInput" : "Champ date",
"radioInput" : "Liste à choix unique",
"checkboxInput" : "Liste à choix multiple",
+ "newField" : "Nouveau champ",
+ "newValue" : "Nouvelle donnée",
+ "customFieldAdded" : "Champ personnalisé ajouté",
+ "customFieldUpdated" : "Champ personnalisé modifié",
+ "customFieldDeleted" : "Champ personnalisé supprimé",
+ "usableFields" : "Champ(s) utilisable(s)",
+ "noCustomFieldInfo" : "<b>Aucun champ personnalisé</b> n'est défini, sélectionner des éléments disponibles sur le <b>panneau de droite</b> afin de créer de nouveaux champs.",
+ "defaultValue" : "Valeur par défaut",
+ "valuesList" : "Liste des valeurs",
+ "addValue" : "Ajouter une valeur",
+ "orderValues" : "Trier les données",
+ "customFieldsTypesAvailable" : "Types de champs disponibles",
+ "typeValue" : "Saisisser une valeur",
+ "chooseDate" : "Choisisser une date",
+ "selectedValue" : "Valeur sélectionnée",
+ "choice" : "Choix",
};
diff --git a/src/frontend/lang/lang-nl.ts b/src/frontend/lang/lang-nl.ts
index 847aec78d7c54aa25e8adaeb47de214efa8d4587..46a1caf62867ff9da00060800239dc0340f32bd0 100755
--- a/src/frontend/lang/lang-nl.ts
+++ b/src/frontend/lang/lang-nl.ts
@@ -1107,4 +1107,20 @@ export const LANG_NL = {
"dateInput" : "Date input", //_TO_TRANSLATE
"radioInput" : "Radio input", //_TO_TRANSLATE
"checkboxInput" : "Checbox input", //_TO_TRANSLATE
+ "newField" : "New field", //_TO_TRANSLATE
+ "newValue" : "New value", //_TO_TRANSLATE
+ "customFieldAdded" : "Custom field added", //_TO_TRANSLATE
+ "customFieldUpdated" : "Custom field updated", //_TO_TRANSLATE
+ "customFieldDeleted" : "Custom field deleted", //_TO_TRANSLATE
+ "usableFields" : "Usable field(s)", //_TO_TRANSLATE
+ "noCustomFieldInfo" : "<b>No custom field</b> available, choose avaiblable custom fields types on <b>right panel</b> in order to create new custom fields.", //_TO_TRANSLATE
+ "defaultValue" : "Default value", //_TO_TRANSLATE
+ "valuesList" : "List of values", //_TO_TRANSLATE
+ "addValue" : "Add a value", //_TO_TRANSLATE
+ "orderValues" : "Order values", //_TO_TRANSLATE
+ "customFieldsTypesAvailable" : "Custom fields types available", //_TO_TRANSLATE
+ "typeValue" : "Type a value", //_TO_TRANSLATE
+ "chooseDate" : "Choose a date", //_TO_TRANSLATE
+ "selectedValue" : "Selected value", //_TO_TRANSLATE
+ "choice" : "Choice", //_TO_TRANSLATE
};