From f9415e0b896b3b0ffa120eeffef2bcf1c9320d98 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Fri, 20 Sep 2019 17:30:29 +0200
Subject: [PATCH] FEAT #11771 TIME 2:30 add filter select plugin
---
src/frontend/app/app-common.module.ts | 7 ++--
.../indexing-form.component.html | 33 +++++++++++++------
.../indexing-form.component.scss | 10 ++++++
.../indexing-form/indexing-form.component.ts | 10 ++++++
4 files changed, 48 insertions(+), 12 deletions(-)
diff --git a/src/frontend/app/app-common.module.ts b/src/frontend/app/app-common.module.ts
index 2448f33a244..b28bfa0758f 100755
--- a/src/frontend/app/app-common.module.ts
+++ b/src/frontend/app/app-common.module.ts
@@ -53,6 +53,7 @@ import { ConfirmComponent } from '../plugins/modal/confir
/*PLUGIN COMPONENT*/
import { PluginAutocomplete } from '../plugins/autocomplete/autocomplete.component';
+import { PluginSelectSearchComponent } from '../plugins/select-search/select-search.component';
@@ -98,7 +99,8 @@ export class MyHammerConfig extends HammerGestureConfig {
ConfirmComponent,
PluginAutocomplete,
IndexingFormComponent,
- FieldListComponent
+ FieldListComponent,
+ PluginSelectSearchComponent
],
exports: [
CommonModule,
@@ -130,7 +132,8 @@ export class MyHammerConfig extends HammerGestureConfig {
DragDropModule,
PluginAutocomplete,
IndexingFormComponent,
- FieldListComponent
+ FieldListComponent,
+ PluginSelectSearchComponent
],
providers: [
LatinisePipe,
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 aa795c9b879..aba396bc910 100644
--- a/src/frontend/app/indexation/indexing-form/indexing-form.component.html
+++ b/src/frontend/app/indexation/indexing-form/indexing-form.component.html
@@ -55,24 +55,31 @@
</mat-form-field>
</ng-container>
<ng-container *ngIf="field.type === 'select'">
- <mat-form-field class="input-form" floatLabel="never">
+ <plugin-select-search [placeholderLabel]="field.system ? lang[field.type + 'Input'] : lang.defaultValue" [formControlSelect]="arrFormControl[field.identifier]" [datas]="field.values" style="width:100%;"></plugin-select-search>
+ <!--<mat-form-field class="input-form" floatLabel="never">
<mat-select [formControl]="arrFormControl[field.identifier]"
[placeholder]="field.system ? lang[field.type + 'Input'] : lang.defaultValue">
+ <plugin-select-search></plugin-select-search>
<mat-option *ngIf="adminMode"></mat-option>
- <mat-option *ngFor="let value of field.values" [value]="value.id" [title]="value.title !== undefined ? value.title : value.label" [disabled]="value.disabled" [class.opt-group]="value.isTitle" [style.color]="value.color" [innerHTML]="value.label">
+ <mat-option *ngFor="let value of field.values" [value]="value.id"
+ [title]="value.title !== undefined ? value.title : value.label"
+ [disabled]="value.disabled" [class.opt-group]="value.isTitle"
+ [style.color]="value.color" [innerHTML]="value.label">
</mat-option>
</mat-select>
- </mat-form-field>
+ </mat-form-field>-->
</ng-container>
<ng-container *ngIf="field.type === 'date'">
<mat-form-field class="input-form" floatLabel="never" (click)="picker.open()">
<button mat-button color="primary" *ngIf="adminMode" matPrefix mat-icon-button
(click)="$event.stopPropagation();toggleTodayDate(field);"
matTooltip="Jour d'aujourd'hui">
- <mat-icon color="primary" class="{{field.today ? 'fas fa-circle' : 'far fa-circle'}}">
+ <mat-icon color="primary"
+ class="{{field.today ? 'fas fa-circle' : 'far fa-circle'}}">
</mat-icon>
</button>
- <input [formControl]="arrFormControl[field.identifier]" matInput [matDatepicker]="picker"
+ <input [formControl]="arrFormControl[field.identifier]" matInput
+ [matDatepicker]="picker"
[placeholder]="field.system ? lang[field.type + 'Input'] : lang.defaultValue"
[min]="getMinDate(field.startDate)" [max]="getMaxDate(field.endDate)">
<mat-datepicker-toggle matSuffix [for]="picker">
@@ -81,7 +88,8 @@
</mat-form-field>
</ng-container>
<ng-container *ngIf="field.type === 'radio'">
- <mat-radio-group class="radio-form" color="primary" [formControl]="arrFormControl[field.identifier]">
+ <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>
@@ -89,7 +97,8 @@
</ng-container>
<ng-container *ngIf="field.type === 'checkbox'">
<div class="input-form checkbox-form">
- <mat-selection-list #shoes class="div-list" [formControl]="arrFormControl[field.identifier]">
+ <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}}
@@ -104,9 +113,13 @@
</ng-container>
</div>
<div class="fieldState">
- <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>
+ <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 1dde18ecdbd..8ad9ec0ed0b 100644
--- a/src/frontend/app/indexation/indexing-form/indexing-form.component.scss
+++ b/src/frontend/app/indexation/indexing-form/indexing-form.component.scss
@@ -146,6 +146,16 @@
font-weight: bold;
}
+.smallInput {
+ font-size: 11px;
+ padding-left: 20px;
+ padding-right: 20px;
+ ::ng-deep.mat-form-field-infix {
+ padding : 0px;
+ padding-bottom: 5px;
+ }
+}
+
.button-form-primary {
background: $primary;
border: solid 1px white;
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 11202f986ce..1fd0d58fee4 100644
--- a/src/frontend/app/indexation/indexing-form/indexing-form.component.ts
+++ b/src/frontend/app/indexation/indexing-form/indexing-form.component.ts
@@ -561,4 +561,14 @@ export class IndexingFormComponent implements OnInit {
this.arrFormControl[field.identifier].enable();
}
}
+
+
+ // TO DO
+ _handleKeydown(event: KeyboardEvent) {
+ if (event.keyCode === 32) {
+ // do not propagate spaces to MatSelect, as this would select the currently active option
+ event.stopPropagation();
+ }
+
+ }
}
\ No newline at end of file
--
GitLab