From 242c68a1643149d38a3dc0ba5a2505495eae6f67 Mon Sep 17 00:00:00 2001
From: "florian.azizian" <florian.azizian@maarch.org>
Date: Tue, 15 May 2018 16:02:41 +0000
Subject: [PATCH] FEAT #7722 starter autocomplete contact
---
...ntacts-group-administration.component.html | 39 +++++++--
...contacts-group-administration.component.ts | 80 +++++++++++++++----
.../js/angular/lang/lang-en.ts | 3 +
.../js/angular/lang/lang-fr.ts | 3 +
4 files changed, 105 insertions(+), 20 deletions(-)
diff --git a/apps/maarch_entreprise/Views/contacts-group-administration.component.html b/apps/maarch_entreprise/Views/contacts-group-administration.component.html
index b748aefb8dd..d022b2ebe61 100755
--- a/apps/maarch_entreprise/Views/contacts-group-administration.component.html
+++ b/apps/maarch_entreprise/Views/contacts-group-administration.component.html
@@ -57,10 +57,20 @@
</mat-tab>
<mat-tab label="{{lang.relatedContacts}}" *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 *ngFor="let contactType of contactTypes" [value]="contactType.id">
+ {{contactType.label}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
<div class="col-md-12" style="padding:5px;">
<mat-form-field>
<span matPrefix><mat-icon class="fa fa-user-plus" color="primary"></mat-icon> </span>
- <input class="autocompleteSearch" type="text" placeholder="{{lang.linkContact}}" matInput [formControl]="searchTerm">
+ <input class="autocompleteSearch" type="text" placeholder="{{lang.linkContact}}" matInput [formControl]="searchTerm" autocomplete="off">
</mat-form-field>
</div>
<div class="col-md-6 col-xs-6">
@@ -94,13 +104,32 @@
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let element; columns: displayedColumns;" (click)="selection.toggle(element.addressId)"></mat-row>
</mat-table>
- <hr/>
-
<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.save}}</button>
</div>
</div>
+ <hr/>
+ <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>
@@ -113,4 +142,4 @@
</mat-list>
</mat-sidenav>
</mat-sidenav-container>
-</div>
\ No newline at end of file
+</div>
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 1e8fe5593cc..1009734106a 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
@@ -26,6 +26,9 @@ export class ContactsGroupAdministrationComponent implements OnInit {
coreUrl: string;
creationMode: boolean;
contactsGroup: any = {};
+ contactTypes: any = {};
+
+ contactTypeSearch: string;
loading: boolean = false;
@@ -33,7 +36,9 @@ export class ContactsGroupAdministrationComponent implements OnInit {
searchResult:any = [];
displayedColumns = ['select', 'contact', 'address'];
+ displayedColumnsAdded = ['contact', 'address', 'actions'];
dataSource : any;
+ dataSourceAdded : any;
selection = new SelectionModel<Element>(true, []);
/** Whether the number of selected elements matches the total number of rows. */
@@ -52,10 +57,13 @@ export class ContactsGroupAdministrationComponent implements OnInit {
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
+
+ @ViewChild(MatPaginator) paginatorAdded: MatPaginator;
+ @ViewChild(MatSort) sortAdded: MatSort;
applyFilter(filterValue: string) {
filterValue = filterValue.trim();
filterValue = filterValue.toLowerCase();
- this.dataSource.filter = filterValue;
+ this.dataSourceAdded.filter = filterValue;
}
constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, public http: HttpClient, private route: ActivatedRoute, private router: Router, private notify: NotificationService) {
@@ -68,11 +76,11 @@ export class ContactsGroupAdministrationComponent implements OnInit {
debounceTime(500),
filter(value => value.length > 3),
distinctUntilChanged(),
- switchMap(data => this.http.get(this.coreUrl + 'rest/autocomplete/contacts', {params: {"search" : data, "type" : '106'}}))
+ switchMap(data => this.http.get(this.coreUrl + 'rest/autocomplete/contacts', {params: {"search" : data, "type" : this.contactTypeSearch}}))
).subscribe((response: any) => {
- this.dataSource = new MatTableDataSource(response);
+ this.dataSource = new MatTableDataSource(response);
this.dataSource.paginator = this.paginator;
- this.dataSource.sort = this.sort;
+ this.dataSource.sort = this.sort;
});
}
@@ -85,28 +93,45 @@ export class ContactsGroupAdministrationComponent implements OnInit {
this.loading = true;
this.route.params.subscribe(params => {
- if (typeof params['id'] != "undefined") {
+ if (typeof params['id'] == "undefined") {
+ this.creationMode = true;
+ this.contactsGroup.public = false;
+ this.loading = false;
+ } else {
this.creationMode = false;
+ this.http.get(this.coreUrl + 'rest/contactsTypes')
+ .subscribe((data: any) => {
+ this.contactTypes = data.contactsTypes;
+ });
+
this.http.get(this.coreUrl + 'rest/contactsGroups/' + params['id'])
.subscribe((data: any) => {
this.contactsGroup = data.contactsGroup;
+ setTimeout(() => {
+ this.dataSourceAdded = new MatTableDataSource(this.contactsGroup.contacts);
+ this.dataSourceAdded.paginator = this.paginatorAdded;
+ this.dataSourceAdded.sort = this.sortAdded;
+ }, 0);
+
this.loading = false;
});
- } else {
- this.creationMode = true;
- this.loading = false;
- this.contactsGroup.public = false
}
});
}
saveContactsList(): void {
- this.http.post(this.coreUrl + 'rest/contactsGroups/'+ this.contactsGroup.id, this.selection.selected)
- .subscribe(() => {
+ this.http.post(this.coreUrl + 'rest/contactsGroups/'+ this.contactsGroup.id+'/contacts', {'contacts': this.selection.selected})
+ .subscribe((data: any) => {
this.notify.success(this.lang.contactAdded);
-
+ this.dataSource = null;
+ this.contactsGroup = data.contactsGroup;
+ setTimeout(() => {
+ this.dataSourceAdded = new MatTableDataSource(this.contactsGroup.contacts);
+ this.dataSourceAdded.paginator = this.paginatorAdded;
+ this.dataSourceAdded.sort = this.sortAdded;
+ }, 0);
}, (err) => {
this.notify.error(err.error.errors);
});
@@ -115,8 +140,8 @@ export class ContactsGroupAdministrationComponent implements OnInit {
onSubmit() {
if (this.creationMode) {
this.http.post(this.coreUrl + 'rest/contactsGroups', this.contactsGroup)
- .subscribe(() => {
- this.router.navigate(['/administration/contacts-groups']);
+ .subscribe((data:any) => {
+ this.router.navigate(['/administration/contacts-groups/' + data.contactsGroup]);
this.notify.success(this.lang.contactsGroupAdded);
}, (err) => {
@@ -133,4 +158,29 @@ export class ContactsGroupAdministrationComponent implements OnInit {
});
}
}
-}
\ No newline at end of file
+
+ preDelete(contact: any) {
+ let r = confirm(this.lang.reallyWantToDeleteContactFromGroup);
+
+ if (r) {
+ this.removeContact(contact);
+ }
+ }
+
+ removeContact(contact: 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.sortAdded;
+ this.dataSourceAdded.sort = this.sortAdded;
+ }, 0);
+ this.notify.success(this.lang.contactDeletedFromGroup);
+
+ }, (err) => {
+ this.notify.error(err.error.errors);
+ });
+ }
+
+}
diff --git a/apps/maarch_entreprise/js/angular/lang/lang-en.ts b/apps/maarch_entreprise/js/angular/lang/lang-en.ts
index a4f29fd7375..420323217bc 100755
--- a/apps/maarch_entreprise/js/angular/lang/lang-en.ts
+++ b/apps/maarch_entreprise/js/angular/lang/lang-en.ts
@@ -458,5 +458,8 @@ export const LANG_EN = {
"relatedContacts" : "Related contacts",
"contact" : "Contact",
"contactAdded" : "Contact(s) added",
+ "contactDeletedFromGroup" : "Contact was removed from the group",
+ "reallyWantToDeleteContactFromGroup": "Do you really want to remove contact from the group",
+ "chooseContactType" : "Choose a contact type",
};
diff --git a/apps/maarch_entreprise/js/angular/lang/lang-fr.ts b/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
index a2ddd359fd6..899c3ab193d 100755
--- a/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
+++ b/apps/maarch_entreprise/js/angular/lang/lang-fr.ts
@@ -478,5 +478,8 @@ export const LANG_FR = {
"relatedContacts" : "Contact(s) associé(s)",
"contact" : "Contact",
"contactAdded" : "Contact(s) ajouté(s)",
+ "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",
};
--
GitLab