From 2b0e4b5eee0846c93b2b06dcd49949f59acd1168 Mon Sep 17 00:00:00 2001
From: Alex ORLUC <alex.orluc@maarch.org>
Date: Wed, 5 Feb 2020 17:13:06 +0100
Subject: [PATCH] FEAT #12361 TIME 2:30 12361
---
...ustom-fields-administration.component.html | 2 +-
.../custom-fields-administration.component.ts | 4 +
src/frontend/app/app-common.module.ts | 4 +
.../address-ban-autocomplete.component.html | 35 ++++
.../address-ban-autocomplete.component.scss | 36 ++++
.../address-ban-autocomplete.component.ts | 160 ++++++++++++++++++
.../field-list/field-list.component.html | 2 +-
.../indexing-form.component.html | 4 +
src/frontend/lang/lang-en.ts | 1 +
src/frontend/lang/lang-fr.ts | 1 +
src/frontend/lang/lang-nl.ts | 1 +
11 files changed, 248 insertions(+), 2 deletions(-)
create mode 100644 src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.html
create mode 100644 src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.scss
create mode 100644 src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.ts
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 b49d9a83d57..4c875a3feab 100644
--- a/src/frontend/app/administration/customField/custom-fields-administration.component.html
+++ b/src/frontend/app/administration/customField/custom-fields-administration.component.html
@@ -98,7 +98,7 @@
</div>
<div style="flex:1;">
<div style="color: rgba(0,0,0,0.54);">{{customField.label}} :</div>
- <ng-container *ngIf="customField.type === 'string'">
+ <ng-container *ngIf="customField.type === 'string' || customField.type === 'banAutocomplete'">
<mat-form-field class="input-form" floatLabel="never">
<textarea matInput [placeholder]="lang[customField.type + 'Input']"
matTextareaAutosize matAutosizeMinRows="1" cdkAutosizeMaxRows="6" disabled></textarea>
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 8eb6b2fd731..b768fbf7099 100644
--- a/src/frontend/app/administration/customField/custom-fields-administration.component.ts
+++ b/src/frontend/app/administration/customField/custom-fields-administration.component.ts
@@ -55,6 +55,10 @@ export class CustomFieldsAdministrationComponent implements OnInit {
{
label: this.lang.checkboxInput,
type: 'checkbox'
+ },
+ {
+ label: this.lang.banAutocompleteInput,
+ type: 'banAutocomplete'
}
];
customFields: any[] = [];
diff --git a/src/frontend/app/app-common.module.ts b/src/frontend/app/app-common.module.ts
index 7420d284b35..c60f9cd7a6d 100755
--- a/src/frontend/app/app-common.module.ts
+++ b/src/frontend/app/app-common.module.ts
@@ -61,6 +61,8 @@ import { PluginSelectSearchComponent } from '../plugins/s
import { FolderInputComponent } from '../app/folder/indexing/folder-input.component';
import { TagInputComponent } from '../app/tag/indexing/tag-input.component';
import { DragDropDirective } from '../app/viewer/upload-file-dnd.directive';
+import { AddressBanAutocompleteComponent } from './contact/ban-autocomplete/address-ban-autocomplete.component';
+
import { ContactAutocompleteComponent } from './contact/autocomplete/contact-autocomplete.component';
import { ContactsFormComponent } from './administration/contact/page/form/contacts-form.component';
import { HistoryComponent } from './history/history.component';
@@ -127,6 +129,7 @@ export class MyHammerConfig extends HammerGestureConfig {
ContactsFormComponent,
CustomSnackbarComponent,
HistoryComponent,
+ AddressBanAutocompleteComponent
],
exports: [
CommonModule,
@@ -170,6 +173,7 @@ export class MyHammerConfig extends HammerGestureConfig {
ContactAutocompleteComponent,
ContactsFormComponent,
HistoryComponent,
+ AddressBanAutocompleteComponent
],
providers: [
HeaderService,
diff --git a/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.html b/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.html
new file mode 100644
index 00000000000..965a5030484
--- /dev/null
+++ b/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.html
@@ -0,0 +1,35 @@
+<form>
+ <input type="hidden" [formControl]="controlAutocomplete">
+ <mat-form-field floatLabel="never" class="input-form" *ngIf="!controlAutocomplete.disabled">
+ <mat-icon color="primary" class="fa fa-search" matPrefix style="padding-left: 20px;font-size: 15px;"></mat-icon>
+ <input type="text" #autoCompleteInput [placeholder]="lang.searchAddressBan" matInput [formControl]="myControl"
+ [matAutocomplete]="auto" (click)="$event.stopPropagation()" (focus)="resetAutocomplete()">
+ <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selectOpt($event)">
+ <ng-container *ngIf="options.length > 0 && !loading">
+ <mat-option *ngFor="let option of filteredOptions | async | sortBy: key" [value]="option" [title]="option[key]">
+ <span color="primary">{{option[key]}}</span>
+ </mat-option>
+ </ng-container>
+ <mat-option class="autoCompleteInfoResult smallInputInfo" *ngIf="options.length === 0 && !loading" disabled
+ [innerHTML]="listInfo">
+ </mat-option>
+ <mat-option *ngIf="loading" disabled>
+ <mat-spinner diameter="20"></mat-spinner>
+ </mat-option>
+ </mat-autocomplete>
+ </mat-form-field>
+ <div class="itemList">
+ <mat-chip-list *ngIf="controlAutocomplete.value.length > 0" class="mat-chip-list-stacked itemChip" color="default">
+ <mat-chip *ngFor="let item of controlAutocomplete.value;let i=index" class="activeListAutocomplete" style="height:auto;"
+ color="default" [removable]="!controlAutocomplete.disabled" (removed)="removeItem(i)">
+ <span style="display: flex;flex: 1;align-items: center;cursor: pointer;" [title]="this.valuesToDisplay[item.id]" (click)="goTo(item)">
+ {{this.valuesToDisplay[item.id]}}
+ </span>
+ <mat-icon matChipRemove class="fa fa-times" *ngIf="!controlAutocomplete.disabled"></mat-icon>
+ </mat-chip>
+ </mat-chip-list>
+ <div class="noResult" *ngIf="controlAutocomplete.value.length === 0">
+ {{lang.noSelectedFolder}}
+ </div>
+ </div>
+</form>
\ No newline at end of file
diff --git a/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.scss b/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.scss
new file mode 100644
index 00000000000..7fd5088505c
--- /dev/null
+++ b/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.scss
@@ -0,0 +1,36 @@
+@import '../../../css/vars.scss';
+
+.smallInputInfo {
+ font-size: 9px;
+ white-space: normal;
+ line-height: 13px;
+ display: table-cell;
+ vertical-align: middle;
+ text-align: center;
+}
+
+.mat-chip.mat-standard-chip {
+ color: white;
+ background-color: lighten($primary,10%);
+}
+
+.noResult {
+ text-align: center;
+ font-style: italic;
+ opacity: 0.5;
+}
+
+.itemChip {
+ display: block;
+ width: 95%;
+
+ ::ng-deep.mat-chip-list-wrapper {
+ margin: 0px;
+ }
+}
+
+.itemList {
+ padding-top: 10px;
+ overflow-x: hidden;
+ max-height: 165px;
+}
\ No newline at end of file
diff --git a/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.ts b/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.ts
new file mode 100644
index 00000000000..a0dc2be59ce
--- /dev/null
+++ b/src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.ts
@@ -0,0 +1,160 @@
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { LANG } from '../../translate.component';
+import { NotificationService } from '../../notification.service';
+import { HeaderService } from '../../../service/header.service';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
+import { AppService } from '../../../service/app.service';
+import { SortPipe } from '../../../plugins/sorting.pipe';
+import { FormControl } from '@angular/forms';
+import { Observable, of } from 'rxjs';
+import { debounceTime, filter, distinctUntilChanged, tap, switchMap, exhaustMap, catchError } from 'rxjs/operators';
+import { LatinisePipe } from 'ngx-pipes';
+
+@Component({
+ selector: 'app-address-ban-input',
+ templateUrl: "address-ban-autocomplete.component.html",
+ styleUrls: [
+ 'address-ban-autocomplete.component.scss',
+ '../../indexation/indexing-form/indexing-form.component.scss'
+ ],
+ providers: [NotificationService, AppService, SortPipe]
+})
+
+export class AddressBanAutocompleteComponent implements OnInit {
+
+ lang: any = LANG;
+
+ loading: boolean = false;
+
+ key: string = 'address';
+
+ canAdd: boolean = true;
+
+ listInfo: string;
+ myControl = new FormControl();
+ filteredOptions: Observable<string[]>;
+ options: any;
+ valuesToDisplay: any = {};
+ dialogRef: MatDialogRef<any>;
+ addressBANCurrentDepartment: string = '75';
+ departmentList: any[] = [];
+
+
+ /**
+ * FormControl used when autocomplete is used in form and must be catched in a form control.
+ */
+ @Input('control') controlAutocomplete: FormControl;
+
+ @ViewChild('autoCompleteInput', { static: true }) autoCompleteInput: ElementRef;
+
+ constructor(
+ public http: HttpClient,
+ private notify: NotificationService,
+ public dialog: MatDialog,
+ private headerService: HeaderService,
+ public appService: AppService,
+ private latinisePipe: LatinisePipe
+ ) {
+
+ }
+
+ ngOnInit() {
+ this.controlAutocomplete.setValue(this.controlAutocomplete.value === null || this.controlAutocomplete.value === '' ? [] : this.controlAutocomplete.value);
+ this.initFormValue();
+ this.initBanSearch();
+ this.initAutocompleteRoute();
+ }
+
+ initBanSearch() {
+ this.http.get("../../rest/ban/availableDepartments").pipe(
+ tap((data: any) => {
+ if (data.default !== null && data.departments.indexOf(data.default.toString()) !== - 1) {
+ this.addressBANCurrentDepartment = data.default;
+ }
+ this.departmentList = data.departments;
+ }),
+ catchError((err: any) => {
+ this.notify.handleSoftErrors(err);
+ return of(false);
+ })
+ ).subscribe();
+ }
+
+ initAutocompleteRoute() {
+ this.listInfo = this.lang.autocompleteInfo;
+ this.options = [];
+ this.myControl.valueChanges
+ .pipe(
+ debounceTime(300),
+ filter(value => value.length > 2),
+ distinctUntilChanged(),
+ tap(() => this.loading = true),
+ switchMap((data: any) => this.getDatas(data)),
+ tap((data: any) => {
+ if (data.length === 0) {
+ this.listInfo = this.lang.noAvailableValue;
+ } else {
+ this.listInfo = '';
+ }
+ this.options = data;
+ this.filteredOptions = of(this.options);
+ this.loading = false;
+ })
+ ).subscribe();
+ }
+
+ getDatas(data: string) {
+ return this.http.get('../../rest/autocomplete/banAddresses', { params: { "address": data, 'department': this.addressBANCurrentDepartment } });
+ }
+
+ selectOpt(ev: any) {
+ const objAddress = {
+ id: ev.option.value.banId,
+ addressNumber: ev.option.value.number,
+ addressStreet: ev.option.value.afnorName,
+ addressPostcode : ev.option.value.postalCode,
+ addressTown: ev.option.value.city,
+ longitude: ev.option.value.lon,
+ latitude: ev.option.value.lat
+ }
+ console.log(ev.option.value);
+
+ this.setFormValue(objAddress);
+
+ this.myControl.setValue('');
+ }
+
+ initFormValue() {
+ this.controlAutocomplete.value.forEach((address: any) => {
+ this.valuesToDisplay[address.id] = `${address.addressNumber} ${address.addressStreet}, ${address.addressTown} (${address.addressPostcode})`;
+ });
+ }
+
+ setFormValue(item: any) {
+ this.valuesToDisplay[item['id']] = `${item.addressNumber} ${item.addressStreet}, ${item.addressTown} (${item.addressPostcode})`;
+ this.controlAutocomplete.setValue([item]);
+ console.log(this.valuesToDisplay);
+ }
+
+ resetAutocomplete() {
+ this.options = [];
+ this.listInfo = this.lang.autocompleteInfo;
+ }
+
+ unsetValue() {
+ this.controlAutocomplete.setValue('');
+ this.myControl.setValue('');
+ this.myControl.enable();
+ }
+
+ removeItem(index: number) {
+ let arrValue = this.controlAutocomplete.value;
+ this.controlAutocomplete.value.splice(index, 1);
+ this.controlAutocomplete.setValue(arrValue);
+ }
+
+ goTo(item: any) {
+ window.open(`https://www.google.com/maps/search/${item.latitude},${item.longitude}`, '_blank')
+ }
+}
\ No newline at end of file
diff --git a/src/frontend/app/indexation/field-list/field-list.component.html b/src/frontend/app/indexation/field-list/field-list.component.html
index 8d88cd548d0..0532ff17b2d 100644
--- a/src/frontend/app/indexation/field-list/field-list.component.html
+++ b/src/frontend/app/indexation/field-list/field-list.component.html
@@ -10,7 +10,7 @@
{{field.label}}
</div>
<div class="fieldInput" [class.advancedInput]="field.type === 'checkbox'">
- <ng-container *ngIf="field.type === 'string' || field.type === 'autocomplete'">
+ <ng-container *ngIf="['string', 'autocomplete', 'banAutocomplete'].indexOf(field.type) > -1">
<mat-form-field class="input-form" floatLabel="never">
<textarea matInput [placeholder]="lang[field.type + 'Input']" matTextareaAutosize
matAutosizeMinRows="1" cdkAutosizeMaxRows="6" disabled></textarea>
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 11c15eaa4e7..a6a111ff141 100644
--- a/src/frontend/app/indexation/indexing-form/indexing-form.component.html
+++ b/src/frontend/app/indexation/indexing-form/indexing-form.component.html
@@ -154,6 +154,10 @@
<app-tag-input [control]="arrFormControl[field.identifier]" style="width:100%;">
</app-tag-input>
</ng-container>
+ <ng-container *ngIf="field.type === 'banAutocomplete'">
+ <app-address-ban-input [control]="arrFormControl[field.identifier]" style="width:100%;">
+ </app-address-ban-input>
+ </ng-container>
</div>
<div class="fieldState">
<i class="fas fa-asterisk fieldRequired"
diff --git a/src/frontend/lang/lang-en.ts b/src/frontend/lang/lang-en.ts
index 3a58ef762fa..64eb9772fcd 100755
--- a/src/frontend/lang/lang-en.ts
+++ b/src/frontend/lang/lang-en.ts
@@ -1478,4 +1478,5 @@ export const LANG_EN = {
"SIGN_version": "Original version",
"versions": "Versions",
"documentSignedMsg": "The document has been signed, you can't edit this document",
+ "banAutocompleteInput": "Autocomplete BAN input",
};
diff --git a/src/frontend/lang/lang-fr.ts b/src/frontend/lang/lang-fr.ts
index 03ba5da6ee2..7ebe81e07c9 100755
--- a/src/frontend/lang/lang-fr.ts
+++ b/src/frontend/lang/lang-fr.ts
@@ -1517,4 +1517,5 @@ export const LANG_FR = {
"SIGN_version": "Version original",
"versions": "Versions",
"documentSignedMsg": "Le document a été signé, vous ne pouvez pas editer ce document",
+ "banAutocompleteInput": "Champ autocomplete BAN",
};
diff --git a/src/frontend/lang/lang-nl.ts b/src/frontend/lang/lang-nl.ts
index b669b1640e5..fd832bd6312 100755
--- a/src/frontend/lang/lang-nl.ts
+++ b/src/frontend/lang/lang-nl.ts
@@ -1503,4 +1503,5 @@ export const LANG_NL = {
"SIGN_version": "Original version", //_TO_TRANSLATE
"versions": "Versions", //_TO_TRANSLATE
"documentSignedMsg": "The document has been signed, you can't edit this document", //_TO_TRANSLATE
+ "banAutocompleteInput": "Autocomplete BAN input", //_TO_TRANSLATE
};
--
GitLab