FEAT #12361 TIME 2:30 12361

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>

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[] = [];

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,

src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.html

+<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

src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.scss

+@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

src/frontend/app/contact/ban-autocomplete/address-ban-autocomplete.component.ts

+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

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>

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"

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",
 };

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",  
 };

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
 };