FEAT #12636 TIME 0:35 fix cusotm field control + icon filling in plugin select

src/frontend/app/administration/contact/page/form/contacts-form.component.html

@@ -97,9 +97,9 @@
                                     </mat-form-field>
                                 </ng-container>
                                 <ng-container *ngIf="field.type === 'select'">
-                                    <plugin-select-search [label]="field.label" [showLabel]="true"
-                                        [formControlSelect]="field.control" [placeholderLabel]="field.label"
-                                        [datas]="field.values" [class]="''">
+                                    <plugin-select-search [label]="field.label" [required]="field.required" [showLabel]="true"
+                                        [formControlSelect]="field.control" [placeholderLabel]="field.label" [hideErrorDesc]="false"
+                                        [datas]="field.values" [class]="''" [suffixIcon]="{class:'fa-circle', color:fillingRate.color, title: lang.targetFillingField}">
                                     </plugin-select-search>
                                 </ng-container>
                                 <ng-container *ngIf="field.type === 'date'">

src/frontend/plugins/select-search/select-search.component.html

 <mat-form-field [class]="class + ' search-select'" [floatLabel]="appService.getViewMode() || showLabel ? '' : 'never'">
   <mat-label *ngIf="appService.getViewMode() || showLabel">{{label}}</mat-label>
-  <mat-select [formControl]="formControlSelect" [placeholder]="placeholderLabel" #test (selectionChange)="launchEvent($event)">
+  <mat-select [formControl]="formControlSelect" [placeholder]="placeholderLabel" #test
+    (selectionChange)="launchEvent($event)" [required]="required">
     <input *ngIf="datas.length > 5" matInput class="mat-select-search-input mat-select-search-hidden" />
 
-    <div *ngIf="datas.length > 5" class="mat-select-search-inner" [ngClass]="{'mat-select-search-inner-multiple': matSelect.multiple}">
-      <input matInput id="searchSelectInput" [formControl]="formControlSearch" class="mat-select-search-input" #searchSelectInput (keydown)="_handleKeydown($event)"
-        (input)="onInputChange($event.target.value)" (blur)="onBlur($event.target.value)"
-        [placeholder]="lang.filterBy" />
+    <div *ngIf="datas.length > 5" class="mat-select-search-inner"
+      [ngClass]="{'mat-select-search-inner-multiple': matSelect.multiple}">
+      <input matInput id="searchSelectInput" [formControl]="formControlSearch" class="mat-select-search-input"
+        #searchSelectInput (keydown)="_handleKeydown($event)" (input)="onInputChange($event.target.value)"
+        (blur)="onBlur($event.target.value)" [placeholder]="lang.filterBy" />
       <button mat-button *ngIf="formControlSearch.value" mat-icon-button aria-label="Clear" (click)="_reset(true)"
         class="mat-select-search-clear">
         <mat-icon class="fa fa-times"></mat-icon>
@@ -22,4 +24,7 @@
       [class.opt-group]="value.isTitle" [style.color]="value.color" [innerHTML]="value.label">
     </mat-option>
   </mat-select>
+  <mat-error *ngIf="formControlSelect.status!=='VALID' && formControlSelect.touched && !hideErrorDesc">
+    {{getErrorMsg(formControlSelect.errors)}}</mat-error>
+  <mat-icon *ngIf="suffixIcon !== null" style="height: auto;" matSuffix [style.color]="suffixIcon.color" class="fas fa-circle selectSuffixIcon" [title]="suffixIcon.title !== undefined ? suffixIcon.title : ''"></mat-icon>
 </mat-form-field>
\ No newline at end of file

src/frontend/plugins/select-search/select-search.component.scss

@@ -47,3 +47,13 @@ $multiple-check-width: 33px;
   /* correct offsetY so that the selected option is at the position of the select box when opening */
   margin-top: -50px;
 }
+.mat-error {
+    font-size: 10px;
+    text-align: right;
+    font-weight: bold;
+}
+
+.selectSuffixIcon {
+  font-size: 10px;
+  text-align: right;
+}
\ No newline at end of file

src/frontend/plugins/select-search/select-search.component.ts

@@ -33,6 +33,15 @@ export class PluginSelectSearchComponent implements OnInit, OnDestroy, AfterView
 
     @Input('showLabel') showLabel: boolean = false;
 
+    @Input('required') required: boolean = false;
+
+    @Input('hideErrorDesc') hideErrorDesc: boolean = true;
+
+    /**
+     * ex : {class:'fa-circle', color:'#fffff', title: 'foo'}
+     */
+    @Input('suffixIcon') suffixIcon: any = null;
+
     @Input('class') class: string = "input-form";
 
     /**
@@ -308,4 +317,14 @@ export class PluginSelectSearchComponent implements OnInit, OnDestroy, AfterView
             this.afterSelected.emit(ev.value);
         }
     }
+
+    getErrorMsg(error: any) {
+        if (error.required !== undefined) {
+            return this.lang.requiredField;
+        } else if (error.pattern !== undefined || error.email !== undefined) {
+            return this.lang.badFormat;
+        } else {
+            return 'unknow validator';
+        }
+    }
 }