From d7495d9818d672894b1d1713c227737f33e0fce1 Mon Sep 17 00:00:00 2001
From: "florian.azizian" <florian.azizian@maarch.org>
Date: Wed, 16 May 2018 10:08:27 +0000
Subject: [PATCH] FEAT #7722 starter autocomplete contact
---
...ntacts-group-administration.component.html | 86 ++++++++++---------
...tacts-groups-administration.component.html | 2 +-
...contacts-group-administration.component.ts | 28 +++---
...ontacts-groups-administration.component.ts | 11 ++-
.../js/angular/lang/lang-en.ts | 2 +
.../js/angular/lang/lang-fr.ts | 2 +
6 files changed, 74 insertions(+), 57 deletions(-)
diff --git a/apps/maarch_entreprise/Views/contacts-group-administration.component.html b/apps/maarch_entreprise/Views/contacts-group-administration.component.html
index 62a5fa5b40b..eb33caaa3d3 100755
--- a/apps/maarch_entreprise/Views/contacts-group-administration.component.html
+++ b/apps/maarch_entreprise/Views/contacts-group-administration.component.html
@@ -11,6 +11,9 @@
</h1>
<span style="flex: 1 1 auto;"></span>
<menu-top></menu-top>
+ <button mat-icon-button (click)="this.sidenav.toggle()" *ngIf="!creationMode">
+ <mat-icon class="fa fa-gear fa-2x"></mat-icon>
+ </button>
</mat-toolbar>
<mat-sidenav-container class="admin-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
<mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56"
@@ -55,12 +58,12 @@
</div>
</form>
</mat-tab>
- <mat-tab label="{{lang.relatedContacts}}" *ngIf="!creationMode">
+ <mat-tab label="{{lang.addContacts}}" *ngIf="!creationMode">
<div class="row" style="margin:0px;">
<div class="col-sm-12">
<mat-form-field>
<mat-select [(ngModel)]="contactTypeSearch" placeholder="{{lang.chooseContactType}}" id="contactTypeSearch" name="contactTypeSearch">
- <mat-option [value]="all" selected>Tous</mat-option>
+ <mat-option value="all">{{lang.all}}</mat-option>
<mat-option *ngFor="let contactType of contactTypes" [value]="contactType.id">
{{contactType.label}}
</mat-option>
@@ -80,13 +83,13 @@
</div>
<mat-table #table [dataSource]="dataSource" matSort matSortActive="contact" matSortDirection="asc" *ngIf="dataSource">
<ng-container matColumnDef="select">
- <mat-header-cell *matHeaderCellDef>
+ <mat-header-cell *matHeaderCellDef style="flex:1;">
<mat-checkbox (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
- <mat-cell *matCellDef="let element">
+ <mat-cell *matCellDef="let element" style="flex:1;">
<mat-checkbox (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(element.addressId) : null"
[checked]="selection.isSelected(element.addressId)">
@@ -94,56 +97,59 @@
</mat-cell>
</ng-container>
<ng-container matColumnDef="contact">
- <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.contact}}</mat-header-cell>
- <mat-cell *matCellDef="let element"> {{element.contact}} </mat-cell>
+ <mat-header-cell *matHeaderCellDef mat-sort-header style="flex:3;">{{lang.contact}}</mat-header-cell>
+ <mat-cell *matCellDef="let element" style="flex:3;"> {{element.contact}} </mat-cell>
</ng-container>
<ng-container matColumnDef="address">
- <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.address}}</mat-header-cell>
- <mat-cell *matCellDef="let element"> {{element.address}} </mat-cell>
+ <mat-header-cell *matHeaderCellDef mat-sort-header style="flex:3;">{{lang.address}}</mat-header-cell>
+ <mat-cell *matCellDef="let element" style="flex:3;"> {{element.address}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let element; columns: displayedColumns;" (click)="selection.toggle(element.addressId)"></mat-row>
</mat-table>
<div class="form-group">
<div class="col-sm-12" style="text-align:center;margin-top:30px">
- <button mat-raised-button color="primary" type="button" (click)="saveContactsList()">{{lang.save}}</button>
+ <button mat-raised-button color="primary" type="button" (click)="saveContactsList()">{{lang.add}}</button>
</div>
</div>
- <hr/>
- <div class="col-md-6 col-xs-6">
- <mat-paginator #paginatorAdded [length]="100" [pageSize]="10">
- </mat-paginator>
- </div>
- <mat-table #table [dataSource]="dataSourceAdded" matSort matSortActive="contact" matSortDirection="asc">
- <ng-container matColumnDef="contact">
- <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.contact}}</mat-header-cell>
- <mat-cell *matCellDef="let element"> {{element.contact}} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="address">
- <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.address}}</mat-header-cell>
- <mat-cell *matCellDef="let element"> {{element.address}} </mat-cell>
- </ng-container>
- <ng-container matColumnDef="actions">
- <mat-header-cell *matHeaderCellDef style="flex:1;"></mat-header-cell>
- <mat-cell *matCellDef="let element" style="justify-content: flex-end;flex:1;">
- <button mat-icon-button color="warn" matTooltip="{{lang.delete}}" (click)="$event.stopPropagation();preDelete(element)">
- <mat-icon class="fa fa-trash fa-2x" aria-hidden="true"></mat-icon>
- </button>
- </mat-cell>
- </ng-container>
- <mat-header-row *matHeaderRowDef="displayedColumnsAdded"></mat-header-row>
- <mat-row *matRowDef="let element; columns: displayedColumnsAdded;"></mat-row>
- </mat-table>
</mat-tab>
</mat-tab-group>
-
</mat-card>
</mat-sidenav-content>
- <mat-sidenav #snav2 [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56"
- position='end' [opened]="mobileQuery.matches ? false : false" style="overflow-x:hidden;">
- <mat-list>
- <h3 mat-subheader>{{lang.contactsGroups}}</h3>
- </mat-list>
+ <mat-sidenav *ngIf="!creationMode" #snav2 [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches"
+ fixedTopGap="56" position='end' [opened]="mobileQuery.matches ? false : true" style="overflow-x:hidden;width:40%;">
+ <mat-list><h3 mat-subheader>{{lang.relatedContacts}}</h3></mat-list>
+ <div class="row" style="margin:0px;">
+ <div class="col-md-6 col-xs-6">
+ <mat-form-field>
+ <input matInput (keyup)="applyFilter($event.target.value)" placeholder="{{lang.filterBy}}">
+ </mat-form-field>
+ </div>
+ <div class="col-md-6 col-xs-6">
+ <mat-paginator #paginatorAdded [length]="100" [pageSize]="10">
+ </mat-paginator>
+ </div>
+ </div>
+ <mat-table #table [dataSource]="dataSourceAdded" matSort matSortActive="contact" matSortDirection="asc">
+ <ng-container matColumnDef="contact">
+ <mat-header-cell *matHeaderCellDef mat-sort-header style="flex:3;">{{lang.contact}}</mat-header-cell>
+ <mat-cell *matCellDef="let element" style="flex:3;"> {{element.contact}} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="address">
+ <mat-header-cell *matHeaderCellDef mat-sort-header style="flex:3;">{{lang.address}}</mat-header-cell>
+ <mat-cell *matCellDef="let element" style="flex:3;"> {{element.address}} </mat-cell>
+ </ng-container>
+ <ng-container matColumnDef="actions">
+ <mat-header-cell *matHeaderCellDef style="flex:1;"></mat-header-cell>
+ <mat-cell *matCellDef="let element" style="justify-content: flex-end;flex:1;">
+ <button mat-icon-button color="warn" matTooltip="{{lang.delete}}" (click)="$event.stopPropagation();preDelete(element.position)">
+ <mat-icon class="fa fa-trash fa-2x" aria-hidden="true"></mat-icon>
+ </button>
+ </mat-cell>
+ </ng-container>
+ <mat-header-row *matHeaderRowDef="displayedColumnsAdded"></mat-header-row>
+ <mat-row *matRowDef="let element; columns: displayedColumnsAdded;"></mat-row>
+ </mat-table>
</mat-sidenav>
</mat-sidenav-container>
</div>
diff --git a/apps/maarch_entreprise/Views/contacts-groups-administration.component.html b/apps/maarch_entreprise/Views/contacts-groups-administration.component.html
index e89bac9c91b..7ecce89a017 100755
--- a/apps/maarch_entreprise/Views/contacts-groups-administration.component.html
+++ b/apps/maarch_entreprise/Views/contacts-groups-administration.component.html
@@ -65,7 +65,7 @@
<ng-container matColumnDef="actions">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let element" style="justify-content: flex-end;">
- <button mat-icon-button color="warn" matTooltip="{{lang.delete}}" (click)="$event.stopPropagation();deleteContactsGroup(element)">
+ <button mat-icon-button color="warn" matTooltip="{{lang.delete}}" (click)="$event.stopPropagation();deleteContactsGroup(element.position)">
<mat-icon class="fa fa-trash fa-2x" aria-hidden="true"></mat-icon>
</button>
</mat-cell>
diff --git a/apps/maarch_entreprise/js/angular/app/administration/contacts-group-administration.component.ts b/apps/maarch_entreprise/js/angular/app/administration/contacts-group-administration.component.ts
index 9364ebad455..e5fd204fa6f 100755
--- a/apps/maarch_entreprise/js/angular/app/administration/contacts-group-administration.component.ts
+++ b/apps/maarch_entreprise/js/angular/app/administration/contacts-group-administration.component.ts
@@ -6,7 +6,7 @@ import { LANG } from '../translate.component';
import { NotificationService } from '../notification.service';
import { FormControl } from '@angular/forms';
import { debounceTime, switchMap, distinctUntilChanged, filter } from 'rxjs/operators';
-import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
+import { MatPaginator, MatSort, MatTableDataSource, MatSidenav } from '@angular/material';
import { SelectionModel } from '@angular/cdk/collections';
declare function $j(selector: any): any;
@@ -55,6 +55,7 @@ export class ContactsGroupAdministrationComponent implements OnInit {
// this.dataSource.data.forEach(row => this.selection.select(row));
}
+ @ViewChild('snav2') sidenav: MatSidenav;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
@@ -91,6 +92,7 @@ export class ContactsGroupAdministrationComponent implements OnInit {
ngOnInit(): void {
this.coreUrl = angularGlobals.coreUrl;
this.loading = true;
+ this.contactTypeSearch = 'all';
this.route.params.subscribe(params => {
if (typeof params['id'] == "undefined") {
@@ -143,7 +145,6 @@ export class ContactsGroupAdministrationComponent implements OnInit {
.subscribe((data:any) => {
this.router.navigate(['/administration/contacts-groups/' + data.contactsGroup]);
this.notify.success(this.lang.contactsGroupAdded);
-
}, (err) => {
this.notify.error(err.error.errors);
});
@@ -159,25 +160,26 @@ export class ContactsGroupAdministrationComponent implements OnInit {
}
}
- preDelete(contact: any) {
+ preDelete(row: any) {
let r = confirm(this.lang.reallyWantToDeleteContactFromGroup);
if (r) {
- this.removeContact(contact);
+ this.removeContact(this.contactsGroup.contacts[row], row);
}
}
- removeContact(contact: any) {
+ removeContact(contact: any, row: any) {
this.http.delete(this.coreUrl + "rest/contactsGroups/" + this.contactsGroup.id + "/contacts/" + contact['addressId'])
- .subscribe((data: any) => {
- setTimeout(() => {
- this.contactsGroup.contacts = data['contacts'];
- this.dataSourceAdded = new MatTableDataSource(this.contactsGroup.contacts);
- this.dataSourceAdded.paginator = this.paginatorAdded;
- this.dataSourceAdded.sort = this.sortAdded;
- }, 0);
+ .subscribe(() => {
+ var lastElement = this.contactsGroup.contacts.length - 1;
+ this.contactsGroup.contacts[row] = this.contactsGroup.contacts[lastElement];
+ this.contactsGroup.contacts[row].position = row;
+ this.contactsGroup.contacts.splice(lastElement, 1);
+
+ this.dataSourceAdded = new MatTableDataSource(this.contactsGroup.contacts);
+ this.dataSourceAdded.paginator = this.paginatorAdded;
+ this.dataSourceAdded.sort = this.sortAdded;
this.notify.success(this.lang.contactDeletedFromGroup);
-
}, (err) => {
this.notify.error(err.error.errors);
});
diff --git a/apps/maarch_entreprise/js/angular/app/administration/contacts-groups-administration.component.ts b/apps/maarch_entreprise/js/angular/app/administration/contacts-groups-administration.component.ts
index 336f2290947..12a48d27446 100755
--- a/apps/maarch_entreprise/js/angular/app/administration/contacts-groups-administration.component.ts
+++ b/apps/maarch_entreprise/js/angular/app/administration/contacts-groups-administration.component.ts
@@ -71,13 +71,18 @@ export class ContactsGroupsAdministrationComponent implements OnInit {
});
}
- deleteContactsGroup(contactsGroup: any) {
+ deleteContactsGroup(row: any) {
+ var contactsGroup = this.contactsGroups[row];
let r = confirm(this.lang.confirmAction + ' ' + this.lang.delete + ' « ' + contactsGroup.label + ' »');
if (r) {
this.http.delete(this.coreUrl + 'rest/contactsGroups/' + contactsGroup.id)
- .subscribe((data: any) => {
- this.contactsGroups = data.contactsGroups;
+ .subscribe(() => {
+ var lastElement = this.contactsGroups.length - 1;
+ this.contactsGroups[row] = this.contactsGroups[lastElement];
+ this.contactsGroups[row].position = row;
+ this.contactsGroups.splice(lastElement, 1);
+
this.dataSource = new MatTableDataSource(this.contactsGroups);
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
diff --git a/apps/maarch_entreprise/js/angular/lang/lang-en.ts b/apps/maarch_entreprise/js/angular/lang/lang-en.ts
index 420323217bc..64e2257a1bb 100755
--- a/apps/maarch_entreprise/js/angular/lang/lang-en.ts
+++ b/apps/maarch_entreprise/js/angular/lang/lang-en.ts
@@ -461,5 +461,7 @@ export const LANG_EN = {
"contactDeletedFromGroup" : "Contact was removed from the group",
"reallyWantToDeleteContactFromGroup": "Do you really want to remove contact from the group",
"chooseContactType" : "Choose a contact type",
+ "addContacts" : "Add contacts",
+ "all" : "All",
};
diff --git a/apps/maarch_entreprise/js/angular/lang/lang-fr.ts b/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
index 899c3ab193d..5d8b3613a3b 100755
--- a/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
+++ b/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
@@ -481,5 +481,7 @@ export const LANG_FR = {
"contactDeletedFromGroup" : "Le contact a été retiré du groupe",
"reallyWantToDeleteContactFromGroup": "Etes-vous sûr de vouloir retirer ce contact du groupe ?",
"chooseContactType" : "Choisissez un type de contact",
+ "addContacts" : "Ajouter des contacts",
+ "all" : "Tous",
};
--
GitLab