From 10aa1c546c4b3afbc803e0a9db2fc50cc302233f Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Wed, 8 Jan 2020 17:16:23 +0100
Subject: [PATCH] FEAT #12636 TIME 0:35 fix cusotm field control + icon filling
in plugin select
---
.../page/form/contacts-form.component.html | 6 +++---
.../select-search.component.html | 15 ++++++++++-----
.../select-search.component.scss | 10 ++++++++++
.../select-search/select-search.component.ts | 19 +++++++++++++++++++
4 files changed, 42 insertions(+), 8 deletions(-)
diff --git a/src/frontend/app/administration/contact/page/form/contacts-form.component.html b/src/frontend/app/administration/contact/page/form/contacts-form.component.html
index 3d768dca798..09828a19a94 100644
--- a/src/frontend/app/administration/contact/page/form/contacts-form.component.html
+++ b/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'">
diff --git a/src/frontend/plugins/select-search/select-search.component.html b/src/frontend/plugins/select-search/select-search.component.html
index 5ea2f07bf0a..c0b056b9aba 100644
--- a/src/frontend/plugins/select-search/select-search.component.html
+++ b/src/frontend/plugins/select-search/select-search.component.html
@@ -1,12 +1,14 @@
<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
diff --git a/src/frontend/plugins/select-search/select-search.component.scss b/src/frontend/plugins/select-search/select-search.component.scss
index 70bf2a2d8c7..4bd6513adf6 100644
--- a/src/frontend/plugins/select-search/select-search.component.scss
+++ b/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
diff --git a/src/frontend/plugins/select-search/select-search.component.ts b/src/frontend/plugins/select-search/select-search.component.ts
index f80dbf97413..e2c26127f45 100644
--- a/src/frontend/plugins/select-search/select-search.component.ts
+++ b/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';
+ }
+ }
}
--
GitLab