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

FEAT #7722 starter autocomplete contact

parent 9dbad708
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
apps/maarch_entreprise/Views/contacts-group-administration.component.html
+ 93
− 28
View file @ da53cb80
......@@ -23,35 +23,100 @@
<mat-spinner style="margin:auto;"></mat-spinner>
</div>
<mat-card *ngIf="!loading" class="card-app-content">
<form class="form-horizontal" (ngSubmit)="onSubmit()" #contactsGroupFormUp="ngForm">
<div class="form-group">
<div class="col-sm-12">
<mat-form-field>
<input matInput [(ngModel)]="contactsGroup.label" required name="label" id="label" title="{{lang.label}}"
type="text" placeholder="{{lang.label}}" maxlength="32">
</mat-form-field>
<mat-tab-group [(selectedIndex)]="selectedTabIndex_1">
<mat-tab label="{{lang.informations}}">
<form class="form-horizontal" (ngSubmit)="onSubmit()" #contactsGroupFormUp="ngForm">
<div class="form-group">
<div class="col-sm-12">
<mat-form-field>
<input matInput [(ngModel)]="contactsGroup.label" required name="label" id="label" title="{{lang.label}}"
type="text" placeholder="{{lang.label}}" maxlength="32">
</mat-form-field>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<mat-form-field>
<input matInput [(ngModel)]="contactsGroup.description" required name="description" id="description" title="{{lang.description}}"
type="text" placeholder="{{lang.description}}" maxlength="255">
</mat-form-field>
</div>
</div>
<div class="form-group">
<div class="col-sm-6" style="text-align:center;">
<mat-slide-toggle name="public" title="{{lang.contactsGroupDesc}}" id="public" color="primary" [(ngModel)]="contactsGroup.public"
[checked]="contactsGroup.public">{{lang.public}}</mat-slide-toggle>
</div>
</div>
<div class="form-group">
<div class="col-sm-12" style="text-align:center;">
<button mat-raised-button color="primary" type="submit" [disabled]="!contactsGroupFormUp.form.valid">{{lang.save}}</button>
</div>
</div>
</form>
</mat-tab>
<mat-tab label="{{lang.relatedContacts}}" *ngIf="!creationMode">
<div class="row" style="margin:0px;">
<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" #autocompleteFilter placeholder="{{lang.linkContact}}" type="text" matInput [matAutocomplete]="auto"
[formControl]="userCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let user of filteredUsers | async" [value]="user.idToDisplay" (click)="linkUser(user)">
<p mat-line style="margin:0;">
<span class="col-xm-1" style="padding-right:5px;">
<mat-icon color="primary" [class]="user.type == 'entity' ? 'fa fa-sitemap fa-2x' : 'fa fa-user fa-2x'" style="margin-right:0px;"></mat-icon>
</span>
<span class="col-xm-11">
{{ user.idToDisplay }}
<small>{{ user.otherInfo }}</small>
</span>
</p>
</mat-option>
</mat-autocomplete>
</mat-form-field> -->
<mat-form-field>
<span matPrefix><mat-icon class="fa fa-user-plus" color="primary"></mat-icon>&nbsp;&nbsp;</span>
<input class="autocompleteSearch" #autocompleteFilter type="text" placeholder="{{lang.linkContact}}" matInput [formControl]="searchTerm" [matAutocomplete]="auto">
<!-- <mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let item of searchResult" [value]="item">
{{ item }}
</mat-option>
</mat-autocomplete> -->
</mat-form-field>
<hr/>
</div>
<!-- <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 #paginator [length]="100" [pageSize]="10">
</mat-paginator>
</div> -->
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<mat-form-field>
<input matInput [(ngModel)]="contactsGroup.description" required name="description" id="description" title="{{lang.description}}"
type="text" placeholder="{{lang.description}}" maxlength="255">
</mat-form-field>
</div>
</div>
<div class="form-group">
<div class="col-sm-6" style="text-align:center;">
<mat-slide-toggle name="public" title="{{lang.contactsGroupDesc}}" id="public" color="primary" [(ngModel)]="contactsGroup.public"
[checked]="contactsGroup.public">{{lang.public}}</mat-slide-toggle>
</div>
</div>
<div class="form-group">
<div class="col-sm-12" style="text-align:center;">
<button mat-raised-button color="primary" type="submit" [disabled]="!contactsGroupFormUp.form.valid">{{lang.save}}</button>
</div>
</div>
</form>
<!-- <mat-table #table [dataSource]="dataSource" matSort matSortActive="lastname" matSortDirection="asc">
<ng-container matColumnDef="user_id">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.id}}</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.user_id}} </mat-cell>
</ng-container>
<ng-container matColumnDef="firstname">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.firstname}}</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.firstname}} </mat-cell>
</ng-container>
<ng-container matColumnDef="lastname">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.lastname}}</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.lastname}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;" routerLink="/administration/users/{{row.id}}" matTooltip="{{lang.view}}"
style="cursor:pointer;"></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"
......
apps/maarch_entreprise/js/angular/app/administration/contacts-group-administration.component.ts
+ 14
− 0
View file @ da53cb80
......@@ -4,6 +4,8 @@ import { HttpClient } from '@angular/common/http';
import { Router, ActivatedRoute } from '@angular/router';
import { LANG } from '../translate.component';
import { NotificationService } from '../notification.service';
import { FormControl } from '@angular/forms';
import { debounceTime, switchMap, distinctUntilChanged, filter } from 'rxjs/operators';
declare function $j(selector: any): any;
......@@ -25,11 +27,23 @@ export class ContactsGroupAdministrationComponent implements OnInit {
loading: boolean = false;
searchTerm: FormControl = new FormControl();
searchResult:any = [];
constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, public http: HttpClient, private route: ActivatedRoute, private router: Router, private notify: NotificationService) {
$j("link[href='merged_css.php']").remove();
this.mobileQuery = media.matchMedia('(max-width: 768px)');
this._mobileQueryListener = () => changeDetectorRef.detectChanges();
this.mobileQuery.addListener(this._mobileQueryListener);
this.searchTerm.valueChanges.pipe(
debounceTime(500),
filter(value => value.length > 3),
distinctUntilChanged(),
switchMap(data => this.http.get(this.coreUrl + 'rest/autocomplete/contacts', {params: {"search" : data, "type" : '106'}}))
).subscribe((response: any) => {
this.searchResult = response.word;
});
}
ngOnDestroy(): void {
......
apps/maarch_entreprise/js/angular/lang/lang-en.ts
+ 2
− 0
View file @ da53cb80
......@@ -454,5 +454,7 @@ export const LANG_EN = {
"contactsGroupAdded" : "Contacts group added",
"contactsGroupUpdated" : "Contacts group updated",
"contactsGroupDeleted" : "Contacts group deleted",
"linkContact" : "Link a contact",
"relatedContacts" : "Related contacts",
};
apps/maarch_entreprise/js/angular/lang/lang-fr.ts
+ 2
− 0
View file @ da53cb80
......@@ -474,5 +474,7 @@ export const LANG_FR = {
"contactsGroupAdded" : "Groupement de contacts créé",
"contactsGroupUpdated" : "Groupement de contacts modifié",
"contactsGroupDeleted" : "Groupement de contacts supprimé",
"linkContact" : "Associer un contact",
"relatedContacts" : "Contact(s) associé(s)",
};
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