FEAT #14383 TIME 1 replace the button with a drop-down list and save the mode

src/frontend/app/administration/customField/custom-fields-administration.component.html

@@ -42,6 +42,14 @@
                                             <input matInput name="label" [(ngModel)]="custom.label"
                                                 [placeholder]="this.translate.instant('lang.label')" [value]="custom.label">
                                         </mat-form-field>
+                                        <mat-form-field>
+                                            <mat-label>{{'lang.displayMode' | translate}}</mat-label>
+                                            <mat-select name="mode" title="{{'lang.displayMode' | translate}}" [(ngModel)] ="custom.mode">
+                                                <mat-option *ngFor="let item of mode" [value]="item.value">
+                                                    {{ 'lang.' + item.label | translate}}
+                                                </mat-option>
+                                            </mat-select>
+                                        </mat-form-field>
                                     </div>
                                     <div class="col-md-12" style="display: flex;align-items: center;">
                                         <div>
@@ -49,16 +57,6 @@
                                                 mat-mini-fab color="primary" (click)="switchSQLMode(custom)">
                                                 <mat-icon class="fas fa-database" style="height: auto;"></mat-icon>
                                             </button>
-                                            <button *ngIf="custom.mode === 'form'; else elseBlock" mat-mini-fab color="primary" style="margin-left: 4px;" title="{{'lang.displayAsTechnicalData' | translate}}"
-                                                (click)="mode='technical'">
-                                                <mat-icon class="fas fa-code" style="height: auto;"></mat-icon>
-                                            </button>
-                                            <ng-template #elseBlock>
-                                                <button mat-mini-fab color="default" style="margin-left: 4px;" title="{{'lang.displayInForm' | translate}}"
-                                                (click)="mode='form'">
-                                                <mat-icon class="fas fa-stream" style="height: auto;"></mat-icon>
-                                            </button>
-                                            </ng-template>
                                         </div>
                                         <div style="flex:1;"
                                             *ngIf="['select', 'radio', 'checkbox'].indexOf(custom.type) > -1">

src/frontend/app/administration/customField/custom-fields-administration.component.ts

@@ -64,7 +64,16 @@ export class CustomFieldsAdministrationComponent implements OnInit {
     ];
     customFields: any[] = [];
     customFieldsClone: any[] = [];
-    mode: string = 'form';
+    mode: any[] = [
+        {
+            'label' : 'displayInForm',
+            'value' : 'form'
+        },
+        {
+            'label' : 'displayAsTechnicalData',
+            'value' : 'technical'
+        }
+    ];
 
     incrementCreation: number = 1;
 
@@ -181,12 +190,7 @@ export class CustomFieldsAdministrationComponent implements OnInit {
     }
 
     updateCustomField(customField: any, indexCustom: number) {
-
         const customFieldToUpdate = { ...customField };
-        if (customField.mode !== this.mode) {
-            customFieldToUpdate.mode = 'technical';
-        }
-        customFieldToUpdate.mode = this.mode;
         if (!customField.SQLMode) {
             customField.values = customField.values.filter((x: any, i: any, a: any) => a.map((info: any) => info.label).indexOf(x.label) === i);
             // TO FIX DATA BINDING SIMPLE ARRAY VALUES
@@ -222,7 +226,7 @@ export class CustomFieldsAdministrationComponent implements OnInit {
     }
 
     isModified(customField: any, indexCustomField: number) {
-        if (JSON.stringify(customField) === JSON.stringify(this.customFieldsClone[indexCustomField]) || customField.label === '' || this.SQLMode || JSON.stringify(customField.mode) === this.mode) {
+        if (JSON.stringify(customField) === JSON.stringify(this.customFieldsClone[indexCustomField]) || customField.label === '' || this.SQLMode || customField.mode === '') {
             return true;
         } else {
             return false;
@@ -281,5 +285,4 @@ export class CustomFieldsAdministrationComponent implements OnInit {
             return true;
         }
     }
-
 }

src/lang/lang-fr.json

@@ -2096,6 +2096,7 @@
     "casEnabled": "Authentification CAS activée",
     "displayAsTechnicalData" : "Afficher en tant que donnée technique",
     "displayInForm" : "Afficher dans le formulaire",
-    "technicalInformations" : "Informations techniques"
+    "technicalInformations" : "Informations techniques",
+    "displayMode" :"Mode d'affichage"
 
 }