Skip to content
Snippets Groups Projects
Commit 242c68a1 authored by Florian Azizian's avatar Florian Azizian
Browse files

FEAT #7722 starter autocomplete contact

parent 64aea72a
No related branches found
No related tags found
No related merge requests found
......@@ -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>&nbsp;&nbsp;</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>
......@@ -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);
});
}
}
......@@ -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",
};
......@@ -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",
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment