Something went wrong on our end
-
Alex ORLUC authoredAlex ORLUC authored
profile.component.html 64.99 KiB
<div class="admin-container" [class.admin-is-mobile]="mobileQuery.matches">
<mat-sidenav-container autosize class="admin-sidenav-container">
<mat-sidenav #snav [mode]="mobileMode ? 'over' : 'side'" [fixedInViewport]="mobileMode" fixedTopGap="56" [opened]="mobileMode ? false : true"
autoFocus="false">
<menu-shortcut></menu-shortcut>
<menu-nav></menu-nav>
<mat-nav-list>
<h3 mat-subheader>{{lang.actions}}</h3>
<a mat-list-item (click)="askRedirectBasket()">
<mat-icon color="warn" mat-list-icon class="fa fa-plane"></mat-icon>
<p mat-line>
{{lang.activateMyAbs}}
</p>
</a>
<a *ngIf="user.canModifyPassword" mat-list-item (click)="changePasswd();">
<mat-icon color="primary" mat-list-icon class="fa fa-key"></mat-icon>
<p mat-line>
{{lang.changeMyPassword}}
</p>
</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<div *ngIf="loading" style="display:flex;height:100%;">
<mat-spinner style="margin:auto;"></mat-spinner>
</div>
<mat-card *ngIf="!loading" class="card-app-content">
<mat-tab-group [selectedIndex]="selectedIndex" (selectedTabChange)="initComponents($event)">
<mat-tab label="{{lang.myInformations}}">
<div *ngIf="showPassword" style="margin-bottom: 5%">
<form [formGroup]="firstFormGroup">
<div class="form-group">
<mat-form-field style="padding:10px;">
<input matInput placeholder="{{lang.typeCurrentPassword}}" formControlName="currentPasswordCtrl" required [type]="hidePassword ? 'password' : 'text'">
<mat-icon matSuffix (click)="hidePassword = !hidePassword" class="fa fa-2x" [ngClass]="[hidePassword ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
<mat-error *ngIf="firstFormGroup.controls['currentPasswordCtrl'].hasError('required')">{{lang.requiredField}}</mat-error>
</mat-form-field>
</div>
<div class="form-group">
<div style="text-align:center;color: rgba(0,0,0,0.54);font-size: 75%;">{{this.ruleText}}</div>
<div class="col-sm-6" style="padding-left:0px;padding-right: 0px;">
<mat-form-field style="padding:10px;">
<input matInput #inputPasswd placeholder="{{lang.typeNewPassword}}" formControlName="newPasswordCtrl" required [type]="hidePassword ? 'password' : 'text'">
<mat-icon matSuffix (click)="hidePassword = !hidePassword" class="fa fa-2x" [ngClass]="[hidePassword ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
<mat-hint *ngIf="validPassword">
<i color="accent" class="fa fa-check"></i>
<span color="accent">{{lang.passwordValid}}</span>
</mat-hint>
<mat-error>{{getErrorMessage()}}</mat-error>
</mat-form-field>
</div>
<div class="col-sm-6" style="padding-left:0px;padding-right:0px;">
<mat-form-field style="padding:10px;">
<input matInput #inputPasswd2 placeholder="{{lang.retypeNewPassword}}" required [type]="hidePassword ? 'password' : 'text'"
formControlName="retypePasswordCtrl">
<mat-icon matSuffix (click)="hidePassword = !hidePassword" class="fa fa-2x" [ngClass]="[hidePassword ? 'fa-eye-slash' : 'fa-eye']"></mat-icon>
<mat-hint *ngIf="!firstFormGroup.controls['retypePasswordCtrl'].hasError('mismatch') && firstFormGroup.controls['retypePasswordCtrl'].value != ''">
<i color="accent" class="fa fa-check"></i>
<span color="accent">{{lang.passwordMatch}}</span>
</mat-hint>
<mat-error>{{lang.passwordNotMatch}} !</mat-error>
</mat-form-field>
</div>
</div>
<div *ngIf="passwordRules.renewal.enabled || passwordRules.historyLastUse.enabled" class="form-group">
<div class="col-sm-12" style="padding-left:0px;padding-right:0px;">
<div class="alert alert-warning" role="alert" [innerHTML]="otherRuleText" style="text-align:center;"></div>
</div>
</div>
<div class="form-group"> <div style="text-align:center;">
<button mat-raised-button color="primary" type="button" (click)="updatePassword()" [disabled]="!firstFormGroup.valid">{{lang.update}}</button>
<button mat-raised-button color="default" type="button" (click)="showPassword=false">{{lang.cancel}}</button>
</div>
</div>
</form>
</div>
<form class="form-horizontal" (ngSubmit)="onSubmit()" #profileForm="ngForm" *ngIf="!showPassword">
<div class="form-group">
<div class="col-sm-12">
<div class="pull-left">
<div class="avatar" style="font-size:90px;text-align:center;">
<i class="fa fa-user" style="font-size:90px;padding-top:5px;"></i>
</div>
</div>
<div class="input-group">
<mat-form-field>
<input matInput type="text" title="{{lang.id}}" value="{{user.user_id}}" placeholder="{{lang.id}}" disabled>
</mat-form-field>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-5" style="font-weight:bold;">
<mat-form-field>
<input matInput type="text" id="lastname" name="lastname" title="{{lang.lastname}}" placeholder="{{lang.lastname}}" [(ngModel)]="user.lastname"
required>
</mat-form-field>
</div>
<div class="col-sm-5" style="font-weight:bold;">
<mat-form-field>
<input matInput type="text" id="firstname" name="firstname" title="{{lang.firstname}}" placeholder="{{lang.firstname}}" [(ngModel)]="user.firstname"
required>
</mat-form-field>
</div>
<div class="col-sm-2" style="font-style:italic;">
<mat-form-field>
<input matInput type="text" id="initials" name="initials" title="{{lang.initials}}" placeholder="{{lang.initials}}" [(ngModel)]="user.initials">
</mat-form-field>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<mat-form-field>
<input matInput type="tel" id="phone" name="phone" title="{{lang.phoneNumber}}" placeholder="{{lang.phoneNumber}}" [(ngModel)]="user.phone"
pattern="^(?:0|\+\d\d?\d?\s?)[1-9]([\.\-\s]?\d\d){4}([\.\-\s]?\d?\d?)$">
</mat-form-field>
</div>
</div>
<div class="form-group">
<div class="col-sm-12">
<mat-form-field>
<input matInput type="email" id="mail" name="mail" title="{{lang.email}}" placeholder="{{lang.email}}" [(ngModel)]="user.mail"
pattern="(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$)" required>
</mat-form-field>
</div>
</div>
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title style="color: rgba(0,0,0,0.54);">
{{lang.otherInformations}}
</mat-panel-title>
</mat-expansion-panel-header>
<div class="form-group">
<div class="col-sm-12">
<mat-form-field>
<input matInput type="text" id="fingerprint" name="fingerprint" title="{{lang.fingerprint}}" placeholder="{{lang.fingerprint}}"
[(ngModel)]="user.thumbprint">
</mat-form-field> </div>
</div>
</mat-expansion-panel>
</mat-accordion>
<div class="form-group" style="margin-top: 10px;">
<div style="text-align:center;">
<button mat-raised-button color="primary" type="submit" [disabled]="!profileForm.form.valid">{{lang.update}}</button>
</div>
</div>
</form>
</mat-tab>
<mat-tab label="{{lang.myParameters}}">
<mat-accordion>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon color="primary" class="fa fa-inbox" style="font-size:25px;width:50px;"></mat-icon>
<mat-icon color="primary" class="fa fa-magic" style="position: absolute;margin-left: 30px;margin-top: -10px;"></mat-icon>
<span>{{lang.basketsColor}}</span>
</mat-panel-title>
<mat-panel-description *ngIf="!mobileMode">
{{lang.basketsColorAdmin}}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-list>
<ng-container *ngFor="let regroupedBasket of user.regroupedBaskets; let i = index">
<h3 *ngIf="regroupedBasket.baskets[0]">{{regroupedBasket.groupDesc}}</h3>
<mat-list-item *ngFor="let basket of regroupedBasket.baskets; let y = index">
<mat-icon mat-list-icon class="fa fa-inbox" [ngStyle]="{'color': user.regroupedBaskets[i].baskets[y].color}"></mat-icon>
<h4 mat-line title="{{basket.basket_id}}">{{basket.basket_name}}</h4>
<input name="color" type="color" style="background: none;border: none;height: 20px;width:20px;padding: 0;margin-right: 15px"
[(ngModel)]="user.regroupedBaskets[i].baskets[y].color" (change)="updateBasketColor(i, y)"
/>
<a (click)="user.regroupedBaskets[i].baskets[y].color = ''; updateBasketColor(i, y)" title="{{lang.resetColor}}" style="cursor: pointer;color: #666666">
<i class="fa fa-magic"></i>
</a>
</mat-list-item>
</ng-container>
</mat-list>
</mat-expansion-panel>
<mat-expansion-panel [expanded]="myBasketExpansionPanel">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon color="primary" class="fa fa-inbox" style="font-size:25px;width:50px;"></mat-icon>
<mat-icon color="primary" class="fa fa-reply" style="position: absolute;margin-left: 30px;margin-top: -10px;"></mat-icon>
{{lang.myBaskets}}
</mat-panel-title>
<mat-panel-description *ngIf="!mobileMode">
{{lang.myBasketsDesc}}
</mat-panel-description>
</mat-expansion-panel-header>
<div class="col-sm-6" style="overflow:hidden;">
<mat-list>
<mat-list-item>
<mat-icon mat-list-icon color="primary">
<mat-checkbox color="primary" (change)="$event ? masterToggleBaskets($event) : null" [checked]="selectionBaskets.hasValue()"
matTooltip="{{lang.selectAll}}"></mat-checkbox>
</mat-icon>
<p mat-line>
<span *ngIf="!selectionBaskets.hasValue()" style="opacity: 0.5;font-style: italic;font-size: 80%;">
{{lang.selectAll}}
</span>
<mat-form-field *ngIf="selectionBaskets.hasValue()">
<input matTooltip="{{lang.redirectWhenAbscence}}" matTooltipPosition="above" type="text" placeholder="{{ lang.redirectBaskets }}"
matInput [matAutocomplete]="auto" [formControl]="userCtrl">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let user of filteredUsers | async" [value]="user.id" (click)="addBasketRedirection(user.id)">
<p mat-line matTooltip="{{ user.otherInfo }}">
<span class="col-xm-1"> <mat-icon color="primary" class="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>
</p>
</mat-list-item>
<mat-divider></mat-divider>
<ng-container *ngFor="let basket of user.baskets;let i = index">
<mat-list-item *ngIf="basket.group_id && basket.userToDisplay == ''" (mouseover)="showActions(basket)" (mouseout)="hideActions(basket)"
style="cursor: pointer;">
<mat-icon mat-list-icon color="primary" *ngIf="basket.enabled">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selectionBaskets.toggle(basket) : null" [checked]="selectionBaskets.isSelected(basket)"
color="primary"></mat-checkbox>
</mat-icon>
<h4 mat-line [attr.color]="basket.userToDisplay != '' ? 'primary': ''" style="display: flex;align-items: center;">
<span (click)="selectionBaskets.toggle(basket);" matTooltip="{{basket.basket_name}} [{{basket.group_desc}}]" [ngStyle]="{'opacity': basket.allowed ? '1' : '0.5'}"
style="flex: 2;overflow: hidden;text-overflow: ellipsis;">
{{basket.basket_name}}
<span class="label label-primary" style="font-weight:normal">{{basket.group_desc}}</span>
</span>
</h4>
</mat-list-item>
</ng-container>
</mat-list>
</div>
<div class="col-sm-6" style="overflow:hidden;">
<mat-tab-group>
<mat-tab label="{{lang.basketsRedirected}}">
<mat-list>
<ng-container *ngFor="let basket of user.baskets;let i = index">
<mat-list-item *ngIf="basket.group_id && basket.userToDisplay != ''">
<mat-icon mat-list-icon color="primary" *ngIf="basket.enabled" style="margin-top:-60px;" class="fa fa-paper-plane">
</mat-icon>
<h4 mat-line [ngStyle]="{'opacity': basket.allowed ? '1' : '0.5'}" [attr.color]="basket.userToDisplay != '' ? 'primary': ''">{{basket.basket_name}}
<span class="label label-primary" style="font-weight:normal">{{basket.group_desc}}</span>
</h4>
<p mat-line [ngStyle]="{'opacity': basket.allowed ? '1' : '0.5'}">
<mat-form-field>
<input type="text" color="warn" matInput disabled value="{{lang.redirectedTo}} {{basket.userToDisplay}}">
<button mat-button color="warn" matSuffix mat-icon-button aria-label="Clear" (click)="delBasketRedirection(basket)" matTooltip="Supprimer la redirection">
<mat-icon color="warn" class="fa fa-times text-danger"></mat-icon>
</button>
</mat-form-field>
</p>
</mat-list-item>
</ng-container>
</mat-list>
</mat-tab>
</mat-tab-group>
<mat-tab-group>
<mat-tab label="{{lang.basketsAssigned}}">
<mat-list>
<ng-container *ngFor="let basket of user.baskets;let i = index">
<mat-list-item *ngIf="!basket.group_id">
<mat-icon mat-list-icon color="primary" style="margin-top:-60px;" class="fa fa-reply">
</mat-icon>
<h4 mat-line [attr.color]="basket.userToDisplay != '' ? 'primary': ''">{{basket.basket_name}}
<span class="label label-primary" style="font-weight:normal">{{basket.group_desc}}</span>
</h4>
<p mat-line>
<mat-form-field *ngIf="basket.userToDisplay == ''" floatLabel="never">
<input matTooltip="{{lang.redirectBasket}}" matTooltipPosition="above" type="text" placeholder="{{lang.redirectBasket}}"
matInput [matAutocomplete]="auto" [formControl]="userCtrl"> <mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let user of filteredUsers | async" [value]="user.id" (click)="reassignBasketRedirection(user.id,basket)">
<p mat-line matTooltip="{{ user.otherInfo }}">
<span class="col-xm-1">
<mat-icon color="primary" class="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>
<input type="text" color="warn" matInput disabled value="{{lang.assignBy}} {{basket.userToDisplay}}">
<button mat-button color="warn" matSuffix mat-icon-button aria-label="Clear" (click)="basket.userToDisplay =''" matTooltip="{{lang.reassign}}">
<mat-icon color="primary" class="fa fa-edit"></mat-icon>
</button>
<button mat-button color="warn" matSuffix mat-icon-button aria-label="Clear" (click)="delBasketRedirection(basket)" matTooltip="{{lang.deleteAssignation}}">
<mat-icon color="warn" class="fa fa-times text-danger"></mat-icon>
</button>
</mat-form-field>
</p>
</mat-list-item>
</ng-container>
</mat-list>
</mat-tab>
</mat-tab-group>
</div>
<div style="clear:both;"></div>
</mat-expansion-panel>
<mat-expansion-panel (opened)="initMce()">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon color="primary" class="fa fa-envelope" style="font-size:25px;width:50px;"></mat-icon>
{{lang.mySignMail}}
</mat-panel-title>
<mat-panel-description *ngIf="!mobileMode">
{{lang.mySignMailDesc}}
</mat-panel-description>
</mat-expansion-panel-header>
<div class="col-sm-6" style="overflow:hidden;">
<form (ngSubmit)="submitEmailSignature()" #emailSignatureForm="ngForm">
<div class="row" style="margin-top:5px;">
<div class="col-md-12">
<mat-form-field>
<input matInput type="text" [(ngModel)]="mailSignatureModel.title" name="title" placeholder="{{lang.label}}" required>
</mat-form-field>
</div>
</div>
<div class="row" style="margin-top:5px;">
<div class="col-md-12">
<div id="html_mode" style="display: block; width:100%;">
<textarea name="emailSignature" id="emailSignature" style="width:100%" rows="15" cols="60"></textarea>
</div>
</div>
</div>
<div class="col-md-12 form-group" style="margin-top: 10px;">
<div style="text-align:center;">
<button mat-raised-button color="primary" type="submit" *ngIf="mailSignatureModel.selected==-1" [disabled]="!emailSignatureForm.form.valid">{{lang.save}}</button>
<button mat-raised-button color="primary" type="button" *ngIf="mailSignatureModel.selected!=-1" (click)="updateEmailSignature()"
[disabled]="!emailSignatureForm.form.valid">{{lang.update}}</button>
<button mat-raised-button color="warn" type="button" *ngIf="mailSignatureModel.selected!=-1" (click)="deleteEmailSignature()">{{lang.delete}}</button>
<button mat-raised-button color="default" type="button" *ngIf="mailSignatureModel.selected!=-1" (click)="resetEmailSignature()">{{lang.cancel}}</button>
</div>
</div>
</form>
</div>
<div class="col-sm-6" style="overflow:hidden;"> <div class="col-md-6 col-sm-6 col-xm-12" *ngFor="let emailSignature of user.emailSignatures; let i = index">
<mat-card style="margin-bottom:10px;">
<mat-card-content style="text-align:center;">
<mat-form-field floatLabel="never">
<input matInput type="text" [(ngModel)]="emailSignature.title" name="selectedEmailSignatureLabel" placeholder="{{lang.label}}"
disabled>
</mat-form-field>
<button mat-icon-button color="primary" (click)="changeEmailSignature(i)" matTooltip="{{lang.update}}">
<mat-icon class="fa fa-edit fa-2x"></mat-icon>
</button>
</mat-card-content>
</mat-card>
</div>
</div>
<div style="clear:both;"></div>
</mat-expansion-panel>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon color="primary" class="fa fa-certificate" style="font-size:25px;width:50px;"></mat-icon>
{{lang.mySignSignatureBook}}
</mat-panel-title>
<mat-panel-description *ngIf="!mobileMode">
{{lang.mySignSignatureBookDesc}}
</mat-panel-description>
</mat-expansion-panel-header>
<div class="col-sm-12" style="overflow:hidden;">
<div dnd-droppable matTooltip="{{lang.uploadSignFileInfo}}" (click)="clickOnUploader('uploadSignFile')" [class.dndFileHighlighted]="highlightMe"
(dragover)="highlightMe=true" (dragleave)="highlightMe=false" (onDropSuccess)="dndUploadSignature($event);highlightMe=false;"
class="dndFile">
{{lang.uploadSignFile}}
</div>
<form (ngSubmit)="submitSignature()" #signatureForm="ngForm" style="display:none;">
<div class="col-md-12">
<mat-form-field>
<input matInput type="text" id="signature_label" name="signature_label" title="{{lang.label}}" placeholder="{{lang.label}}"
[(ngModel)]="signatureModel.label" required>
</mat-form-field>
<div class="form-inline hide">
<div class="form-group">
<input type="file" name="files[]" id="uploadSignFile" (change)="uploadSignatureTrigger($event)" accept="image/*">
</div>
</div>
</div>
<div [ngClass]="[signatureModel.size != '' ? 'col-md-10' : 'col-md-12']">
<div class="upload-drop-zone" (click)="clickOnUploader('uploadSignFile')" style="cursor:pointer">
{{lang.clickOn}}
<i class="fa fa-upload fa-2x"></i>
(
< 2MB) </div>
</div>
<div class="col-md-2" *ngIf="signatureModel.size">
<img id="signaturePreview" src="{{signatureModel.base64ForJs}}" alt="Image non valide" style="width: 100%;">
</div>
<div class="col-md-12 form-group" style="margin-top: 10px;">
<div style="text-align:center;">
<button mat-raised-button color="primary" type="submit" [disabled]="!signatureForm.form.valid || !signatureModel.size">{{lang.save}}</button>
</div>
</div>
</form>
</div>
<div class="col-sm-12" style="overflow:hidden;">
<div class="col-md-4 col-sm-4 col-xm-6" *ngFor="let signature of user.signatures; let i = index">
<mat-card style="margin-bottom:10px;">
<mat-card-content style="text-align:center;">
<mat-form-field floatLabel="never">
<input matInput type="text" [(ngModel)]="signature.signature_label" name="selectedSignatureLabel" placeholder="{{lang.label}}"
(change)="updateSignature(signature)">
<button mat-button matSuffix mat-icon-button (click)="deleteSignature(signature.id)" color="warn" matTooltip="{{lang.delete}}">
<mat-icon class="fa fa-times"></mat-icon> </button>
</mat-form-field>
<img src="{{coreUrl}}rest/users/{{user.id}}/signatures/{{signature.id}}/content" alt="Signature" style="max-width:100%;height:60px;">
</mat-card-content>
</mat-card>
</div>
</div>
<div style="clear:both;"></div>
</mat-expansion-panel>
<mat-expansion-panel (opened)="initGroupsContact()">
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon color="primary" class="fa fa-users" style="font-size:25px;width:50px;"></mat-icon>
{{lang.myContactsGroups}}
</mat-panel-title>
<mat-panel-description *ngIf="!mobileMode">
{{lang.myContactsGroupsDesc}}
</mat-panel-description>
</mat-expansion-panel-header>
<mat-tab-group (selectedIndexChange)="changeTabContactGrp($event);createGrpContPan.close();" [selectedIndex]="selectedIndexContactsGrp">
<mat-tab label="Liste des groupements">
<mat-accordion>
<mat-expansion-panel #createGrpContPan (opened)="initGroupsContact()">
<mat-expansion-panel-header>
<mat-panel-title color="primary" style="justify-content: right;">
<span style="margin-top:5px;">{{lang.contactGroupCreate}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<form id="contactsGroupFormUp" class="form-horizontal" (ngSubmit)="contactsGroupSubmit();createGrpContPan.close();" #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-12">
<mat-slide-toggle name="plubic" title="{{lang.contactsGroupDesc}}" id="plubic" color="primary" [(ngModel)]="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-expansion-panel>
</mat-accordion>
<div id="contactsGroupList" style="margin-top: 10px;">
<div class="row">
<div class="col-md-6 col-xs-6">
<mat-form-field>
<input matInput (keyup)="applyFilterGroupsList($event.target.value)" placeholder="{{lang.filterBy}}">
</mat-form-field>
</div>
<div class="col-md-6 col-xs-6">
<mat-paginator #paginatorGroupsList [length]="100" [pageSize]="5">
</mat-paginator>
</div> </div>
<mat-table #tableGroupsListSort="matSort" [dataSource]="dataSourceGroupsList" matSort matSortActive="label" matSortDirection="asc">
<ng-container matColumnDef="label">
<mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-for-mobile]="mobileQuery.matches" style="flex:2;">{{lang.label}}</mat-header-cell>
<mat-cell *matCellDef="let element" [class.hide-for-mobile]="mobileQuery.matches" style="flex:2;"> {{element.label}} </mat-cell>
</ng-container>
<ng-container matColumnDef="description">
<mat-header-cell *matHeaderCellDef mat-sort-header style="flex:2;">{{lang.description}}</mat-header-cell>
<mat-cell *matCellDef="let element" style="flex:2;"> {{element.description}} </mat-cell>
</ng-container>
<ng-container matColumnDef="nbContacts">
<mat-header-cell *matHeaderCellDef mat-sort-header style="flex:1;">{{lang.relatedContactNumber}}</mat-header-cell>
<mat-cell *matCellDef="let element" style="flex:1;">
<span *ngIf="element.nbContacts == 0">{{element.nbContacts}}</span>
<span *ngIf="element.nbContacts > 0" color="primary" style="font-weight:bold;">{{element.nbContacts}}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="public">
<mat-header-cell *matHeaderCellDef mat-sort-header [class.hide-for-mobile]="mobileQuery.matches" style="flex:1;">{{lang.public}}</mat-header-cell>
<mat-cell *matCellDef="let element" [class.hide-for-mobile]="mobileQuery.matches" style="flex:1;">
<span *ngIf="!element.public"> {{lang.no}} </span>
<span *ngIf="element.public"> {{lang.yes}} </span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="owner">
<mat-header-cell *matHeaderCellDef mat-sort-header style="flex:1;">{{lang.createdBy}}</mat-header-cell>
<mat-cell *matCellDef="let element" style="flex:1;"> {{element.labelledOwner}} </mat-cell>
</ng-container>
<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.position)">
<mat-icon class="fa fa-trash-alt fa-2x" aria-hidden="true"></mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumnsGroupsList"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumnsGroupsList;" (click)="loadContactsGroup(row)" style="cursor:pointer;"
matTooltip="{{lang.view}}"></mat-row>
</mat-table>
</div>
</mat-tab>
<mat-tab label="Groupement : {{contactsGroup.label}}" *ngIf="contactsListMode">
<mat-accordion>
<mat-expansion-panel #linkContPan>
<mat-expansion-panel-header>
<mat-panel-title color="primary" style="justify-content: right;">
<span style="margin-top:5px;">{{lang.contactLink}}</span>
</mat-panel-title>
</mat-expansion-panel-header>
<div id="contactsGroupFormAdd">
<div class="row" style="margin:0px;">
<div class="col-sm-4">
<mat-form-field>
<mat-select [(ngModel)]="contactTypeSearch" placeholder="{{lang.chooseContactType}}" id="contactTypeSearch" name="contactTypeSearch">
<mat-option value="all">{{lang.all}}</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-8" style="padding:5px;">
<mat-form-field hintLabel="3 caractères minium">
<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" autocomplete="off"
(keyup)="launchLoading();" minlength="3">
</mat-form-field> </div>
<div class="col-md-6 col-xs-6">
<div class="alert alert-danger" *ngIf="dataSourceContactsListAutocomplete && dataSourceContactsListAutocomplete.data.length == 1000"
[innerHTML]="lang.limitDataReached_1000"></div>
</div>
<div class="col-md-6 col-xs-6">
<mat-paginator #paginatorContactList [length]="0" [pageSize]="10">
</mat-paginator>
</div>
</div>
<mat-progress-bar mode="indeterminate" *ngIf="!dataSourceContactsListAutocomplete && !initAutoCompleteContact"></mat-progress-bar>
<mat-table #tableContactList [dataSource]="dataSourceContactsListAutocomplete" *ngIf="dataSourceContactsListAutocomplete">
<ng-container matColumnDef="select">
<mat-header-cell *matHeaderCellDef style="flex:1;">
<mat-checkbox color="primary" (change)="$event ? masterToggle($event) : null" [checked]="selection.hasValue()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *matCellDef="let element" style="flex:1;">
<mat-checkbox id="check_{{element.addressId}}" color="primary" (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(element.addressId) : null"
[disabled]="isInGrp(element)" [checked]="selection.isSelected(element.addressId)">
</mat-checkbox>
</mat-cell>
</ng-container>
<ng-container matColumnDef="contact">
<mat-header-cell *matHeaderCellDef 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 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="displayedColumnsContactsListAutocomplete"></mat-header-row>
<mat-row *matRowDef="let element; columns: displayedColumnsContactsListAutocomplete;" (click)="selectAddress(element.addressId);"
[ngStyle]="{'opacity': !isInGrp(element) ? '' : '0.5'}" style="cursor: pointer;"></mat-row>
</mat-table>
<div class="form-group">
<div style="text-align:center;margin-top:30px">
<button mat-raised-button color="primary" type="button" (click)="saveContactsList($event.target)" [disabled]="this.selection.selected.length == 0">{{lang.add}}</button>
</div>
</div>
</div>
</mat-expansion-panel>
</mat-accordion>
<div id="contactsGroup" style="margin-top:20px;">
<div class="col-sm-6">
<form class="form-horizontal" (ngSubmit)="updateGroupSubmit()" #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-12">
<mat-slide-toggle name="public" title="{{lang.public}}" id="public" color="primary" [(ngModel)]="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.update}}</button>
<button mat-raised-button color="default" type="button" (click)="initGroupsContact()">{{lang.close}}</button>
</div>
</div>
</form>
</div>
<div class="col-sm-6" *ngIf="contactsListMode">
<mat-tab-group [(selectedIndex)]="selectedTabIndex_1">
<mat-tab label="{{contactsGroup.contacts.length}} {{lang.relatedContacts}}">
<div class="row" style="margin:0px;">
<div class="col-md-6 col-xs-6">
<mat-form-field>
<input matInput (keyup)="applyFilterContactsList($event.target.value)" placeholder="{{lang.filterBy}}">
</mat-form-field>
</div>
<div class="col-md-6 col-xs-6">
<mat-paginator #paginatorContactsList [length]="0" [pageSize]="10">
</mat-paginator>
</div>
</div>
<mat-table *ngIf="contactsListMode" #tableContactsListSort="matSort" [dataSource]="dataSourceContactsList" 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;let i = index" style="justify-content: flex-end;flex:1;">
<button mat-icon-button color="warn" matTooltip="{{lang.delete}}" (click)="$event.stopPropagation();preDelete(i)">
<mat-icon class="fa fa-trash-alt fa-2x" aria-hidden="true"></mat-icon>
</button>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumnsContactsList"></mat-header-row>
<mat-row *matRowDef="let element; columns: displayedColumnsContactsList;"></mat-row>
</mat-table>
</mat-tab>
</mat-tab-group>
</div>
</div>
</mat-tab>
</mat-tab-group>
<div style="clear:both;"></div>
</mat-expansion-panel>
</mat-accordion>
</mat-tab>
<mat-tab label="Mon historique">
<ng-template matTabContent>
<div class="row">
<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 #paginatorHistory [length]="100" [pageSize]="10">
</mat-paginator>
</div>
</div>
<mat-table #tableHistorySort="matSort" [dataSource]="dataSource" matSort matSortActive="event_date" matSortDirection="desc">
<ng-container matColumnDef="event_date">
<mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.date}}</mat-header-cell>
<mat-cell *matCellDef="let element">{{element.event_date | date : "dd/MM/y HH:mm"}}</mat-cell>
</ng-container>
<ng-container matColumnDef="info"> <mat-header-cell *matHeaderCellDef mat-sort-header>{{lang.description}}</mat-header-cell>
<mat-cell *matCellDef="let element"> {{element.info}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</ng-template>
</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 : true" style="overflow-x:hidden;max-width:500px;">
<mat-list>
<h3 mat-subheader>{{lang.groups}}</h3>
<mat-list-item *ngFor="let userGroup of user.groups">
<mat-icon color="primary" mat-list-icon class="fa fa-users"></mat-icon>
<h4 mat-line>{{userGroup.group_desc}}</h4>
<p mat-line>
<mat-form-field style="font-size:10px;">
<input matInput type="text" id="role" name="role" title="{{lang.role}}" placeholder="{{lang.role}}" [(ngModel)]="userGroup.role"
disabled>
<mat-hint matTooltip="{{lang.perimeter}}">{{userGroup.maarch_comment}}</mat-hint>
</mat-form-field>
</p>
</mat-list-item>
<mat-divider></mat-divider>
<h3 mat-subheader>{{lang.entities}}</h3>
<mat-list-item *ngFor="let userEntity of user.entities">
<mat-icon color="primary" *ngIf="userEntity.primary_entity == 'Y'" mat-list-icon class="fa fa-sitemap"></mat-icon>
<mat-icon color="primary" *ngIf="userEntity.primary_entity != 'Y'" mat-list-icon class="fa fa-sitemap" style="position:relative;">
<button mat-icon-button style="cursor:pointer;position: absolute;right: -20px;top: -20px;font-size:10px;" (click)="updatePrimaryEntity(userEntity)"
matTooltip="{{lang.entityTooglePrimary}}">
<mat-icon class="fa fa-arrow-up"></mat-icon>
</button>
</mat-icon>
<h4 mat-line [ngStyle]="{'font-weight': userEntity.primary_entity == 'Y' ? 'bold' : 'normal'}" matTooltip="{{userEntity.entity_label}}">
{{userEntity.entity_label}}
<span *ngIf="userEntity.primary_entity == 'Y'" class="label label-primary" style="font-weight:normal">{{lang.primary}}</span>
</h4>
<p mat-line>
<mat-form-field style="font-size:10px;">
<input matInput type="text" id="role" name="role" title="{{lang.role}}" placeholder="{{lang.role}}" [(ngModel)]="userEntity.user_role"
disabled>
</mat-form-field>
</p>
</mat-list-item>
</mat-list>
</mat-sidenav>
</mat-sidenav-container>
</div>