Skip to content
Snippets Groups Projects
profile.component.html 32.3 KiB
Newer Older
  • Learn to ignore specific revisions
  • <div class="admin-container" [class.admin-is-mobile]="mobileQuery.matches">
        <mat-toolbar color="primary" class="admin-toolbar">
            <button mat-button (click)="snav.toggle()">
                <mat-icon class="maarchLogo" [svgIcon]="mobileQuery.matches ? 'maarchLogoOnly' : 'maarchLogo'"></mat-icon>
            </button>
            <h1 class="admin-toolbar-title">{{lang.myProfile}}
                <small [class.hide-for-mobile]="mobileQuery.matches">{{user.firstname}} {{user.lastname}}</small>
            </h1>
            <span style="flex: 1 1 auto;"></span>
            <menu-top></menu-top>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
            <button mat-icon-button (click)="snav2.toggle()">
    
                <mat-icon class="fa fa-cog 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"
                [opened]="mobileQuery.matches ? false : true">
                <menu-nav></menu-nav>
                <mat-divider></mat-divider>
                <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>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                            {{lang.activateMyAbs}}
    
                    <a mat-list-item (click)="changePasswd();">
                        <mat-icon color="primary" mat-list-icon class="fa fa-key"></mat-icon>
                        <p mat-line>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                            {{lang.changeMyPassword}}
    
                        </p>
                    </a>
                </mat-nav-list>
                <mat-divider></mat-divider>
            </mat-sidenav>
            <mat-sidenav-content>
                <div *ngIf="loading" style="display:flex;height:100%;">
                    <mat-spinner style="margin:auto;"></mat-spinner>
    
                <mat-card *ngIf="!loading" class="card-app-content">
                    <mat-tab-group [selectedIndex]="selectedIndex" (selectedTabChange)="initComponents($event)">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        <mat-tab label="{{lang.myInformations}}">
    
                            <div *ngIf="showPassword" style="margin-bottom: 5%">
                                <div class="form-group">
                                    <mat-form-field>
                                        <input matInput type="password" [(ngModel)]="passwordModel.currentPassword" name="currentPassword" placeholder="{{lang.currentPsw}}">
                                    </mat-form-field>
    
                                <div class="form-group">
                                    <div class="col-sm-6">
                                        <mat-form-field>
                                            <input matInput type="password" [(ngModel)]="passwordModel.newPassword" name="newPassword" placeholder="{{lang.newPsw}}">
                                        </mat-form-field>
                                    </div>
                                    <div class="col-sm-6">
                                        <mat-form-field>
                                            <input matInput type="password" [(ngModel)]="passwordModel.reNewPassword" name="reNewPassword" placeholder="{{lang.renewPsw}}">
                                        </mat-form-field>
                                    </div>
    
                                <div class="form-group">
                                    <div style="text-align:center;">
                                        <button mat-raised-button color="primary" type="button" (click)="updatePassword()" [disabled]="!passwordModel.currentPassword || !passwordModel.newPassword || !passwordModel.reNewPassword || (passwordModel.newPassword != passwordModel.reNewPassword)">{{lang.update}}</button>
                                        <button mat-raised-button color="default" type="button" (click)="showPassword=false">{{lang.cancel}}</button>
                                    </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>
    
    Damien's avatar
    Damien committed
                                    </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 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 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 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 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>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                </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>
    
                                    </mat-expansion-panel>
                                </mat-accordion>
                                <div class="form-group" style="margin-top: 10px;">
                                    <div style="text-align:center;">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                        <button mat-raised-button color="primary" type="submit" [disabled]="!profileForm.form.valid">{{lang.update}}</button>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        <mat-tab label="{{lang.myPreferences}}">
    
                            <mat-accordion>
                                <mat-expansion-panel [expanded]="true">
                                    <mat-expansion-panel-header>
                                        <mat-panel-title>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                            {{lang.basketsColor}}
    
                                        </mat-panel-title>
                                        <mat-panel-description>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                            {{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)"
                                                />
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                <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-accordion>
                        </mat-tab>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        <mat-tab label="{{lang.myBaskets}}">
    
                            <div class="col-sm-6" style="overflow:hidden;">
                                <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:-70px;">
                                            </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 *ngIf="basket.allowed" floatLabel="never">
                                                    <input matTooltip="{{lang.redirectWhenAbscence}}" matTooltipPosition="above" type="text" placeholder="{{ lang.userToRedirect }}"
                                                        matInput [matAutocomplete]="auto" [formControl]="userCtrl" [disabled]="!basket.allowed">
                                                    <mat-autocomplete #auto="matAutocomplete">
                                                        <mat-option *ngFor="let user of filteredUsers | async" [value]="user.id" (click)="addBasketRedirection(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="">
                                                </mat-form-field>
                                            </p>
                                        </mat-list-item>
                                    </ng-container>
                                </mat-list>
                            </div>
                            <div class="col-sm-6" style="overflow:hidden;">
                                <mat-list>
                                    <h4>{{lang.basketsRedirected}}</h4>
                                    <mat-divider></mat-divider>
                                    <div style="margin-top:40px">
                                        <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_id}}</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>
                                    </div>
    
                                    <h4>{{lang.basketsAssigned}}</h4>
                                    <mat-divider></mat-divider>
                                    <div style="margin-top:40px">
                                        <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_id}}</span>
                                                </h4>
                                                <p mat-line>
                                                    <mat-form-field *ngIf="basket.userToDisplay == ''" floatLabel="never">
                                                        <input matTooltip="{{lang.redirectBasket}}" matTooltipPosition="above" type="text" placeholder="{{lang.userToRedirect}}"
                                                            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>
                                    </div>
    
                                </mat-list>
                            </div>
                        </mat-tab>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        <mat-tab label="{{lang.mySignMail}}">
    
                            <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-raised-button (click)="changeEmailSignature(i)">
                                                <mat-icon class="fa fa-envelope fa-2x"></mat-icon>
                                            </button>
                                        </mat-card-content>
                                    </mat-card>
                                </div>
                            </div>
                        </mat-tab>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        <mat-tab label="{{lang.mySignSignatureBook}}">
    
                            <div class="col-sm-6" style="overflow:hidden;">
    
                                <form (ngSubmit)="submitSignature()" #signatureForm="ngForm">
    
                                    <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>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                    <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 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>
    
                                </div>
    
                                <div class="col-sm-6" style="overflow:hidden;">
                                    <div class="col-md-6 col-sm-6 col-xm-12" *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}}" alt="Signature" style="max-width:100%;height:60px;">
                                            </mat-card-content>
                                        </mat-card>
    
                        </mat-tab>
                        <mat-tab label="Mon historique">
                            <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 #paginator [length]="100" [pageSize]="10">
                                    </mat-paginator>
                                </div>
                            </div>
    
                            <mat-table #table [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>
    
                        </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>