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

FEAT #7722 starter autocomplete contact

parent da399d43
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 74 additions and 57 deletions
apps/maarch_entreprise/Views/contacts-group-administration.component.html
+ 46
− 40
View file @ d7495d98
......@@ -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>
apps/maarch_entreprise/Views/contacts-groups-administration.component.html
+ 1
− 1
View file @ d7495d98
......@@ -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>
......
apps/maarch_entreprise/js/angular/app/administration/contacts-group-administration.component.ts
+ 15
− 13
View file @ d7495d98
......@@ -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);
});
......
apps/maarch_entreprise/js/angular/app/administration/contacts-groups-administration.component.ts
+ 8
− 3
View file @ d7495d98
......@@ -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;
......
apps/maarch_entreprise/js/angular/lang/lang-en.ts
+ 2
− 0
View file @ d7495d98
......@@ -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",
};
apps/maarch_entreprise/js/angular/lang/lang-fr.ts
+ 2
− 0
View file @ d7495d98
......@@ -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",
};
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment