<mat-list *ngIf="!loading">
<mat-form-field appearance="outline" *ngIf="adminMode && !linkedToMaarchParapheur">
<input type="text" #searchVisaSignUserInput matInput placeholder="{{'lang.addUsers' | translate}}" id="searchVisaSignUserInput"
[formControl]="searchVisaSignUser" [matAutocomplete]="autoGroup">
<mat-autocomplete #autoGroup="matAutocomplete" (optionSelected)="addItemToWorkflow($event.option.value)" (opened)="initFilterVisaModelList()">
<mat-option disabled *ngIf="visaModelListNotLoaded">
<div style="display: flex;justify-content: center;">
<mat-spinner diameter="35"></mat-spinner>
</div>
</mat-option>
<mat-optgroup [label]="this.translate.instant('lang.publicModel')" *ngIf="(filteredPublicModels | async)?.length > 0"
class="visaSignList">
<mat-option *ngFor="let model of filteredPublicModels | async | sortBy : 'label'" [value]="model">
{{model.label}}
</mat-option>
</mat-optgroup>
<mat-optgroup [label]="this.translate.instant('lang.privateModel')" *ngIf="(filteredPrivateModels | async)?.length > 0"
class="visaSignList">
<mat-option *ngFor="let model of filteredPrivateModels | async | sortBy : 'label'" [value]="model">
<div style="display: flex;align-items: center;">
<div style="flex:1">
{{model.label}}
</div>
<button mat-icon-button color="warn"
(click)="$event.stopPropagation();deletePrivateModel(model)">
<mat-icon class="fa fa-trash" style="margin: 0px;"></mat-icon>
</button>
</div>
</mat-option>
</mat-optgroup>
<mat-optgroup [label]="this.translate.instant('lang.visaUser') + ' / ' + this.translate.instant('lang.signUser')" *ngIf="(filteredSignVisaUsers | async)?.length > 0"
class="visaSignList">
<mat-option *ngFor="let user of filteredSignVisaUsers | async | sortBy : 'label'" [value]="user">
{{user.label}} <small>({{user.entity}})</small>
</mat-option>
</mat-optgroup>
</mat-autocomplete>
<button mat-icon-button matSuffix *ngIf="visaWorkflow.items.length > 0 && showListModels" color="primary"
(click)="$event.stopPropagation();openPromptSaveModel()" title="{{'lang.saveAsPrivateModel' | translate}}">
<mat-icon class="fa fa-plus"></mat-icon>
</button>
</mat-form-field>
<plugin-autocomplete *ngIf="linkedToMaarchParapheur && adminMode" [labelPlaceholder]="this.translate.instant('lang.addPerson')"
[routeDatas]="['/rest/autocomplete/maarchParapheurUsers']" [targetSearchKey]="'idToDisplay'"
[subInfoKey]="'email'" (triggerEvent)="addItemToWorkflow($event, true)" appearance="outline">
</plugin-autocomplete>
<!--<div class="alert alert-danger" *ngIf="visaWorkflow.itemRemovedFromVisaTemplate.length > 0" [innerHTML]="this.translate.instant('lang.itemRemovedFromVisaTemplate') + ' : ' + visaWorkflow.itemRemovedFromVisaTemplate.join(', ')"></div>-->
<div cdkDropList #dataAvailableList="cdkDropList" [cdkDropListData]="visaWorkflow.items" class="cdk-list"
(cdkDropListDropped)="drop($event)" [cdkDropListDisabled]="!adminMode">
<div class="emptyContent" *ngIf="visaWorkflow.items.length === 0">
{{'lang.noPerson' | translate}}
</div>
<mat-list-item disableRipple *ngFor="let diffusion of visaWorkflow.items;let i=index" cdkDrag class="columns workflow"
[cdkDragDisabled]="!canManageUser(diffusion, i)"
[class.notDraggable]="!canManageUser(diffusion, i)"
[class.notEditable]="!adminMode"
[class.processed]="diffusion.process_date != null && [this.translate.instant('lang.visaWorkflowInterrupted'), this.translate.instant('lang.hasInterruptedWorkflow')].indexOf(diffusion.process_comment) === -1"
[class.interrupt]="diffusion.process_date != null && [this.translate.instant('lang.visaWorkflowInterrupted'), this.translate.instant('lang.hasInterruptedWorkflow')].indexOf(diffusion.process_comment) > -1">
<mat-icon *ngIf="getCurrentVisaUserIndex() === i && (!adminMode || target === 'signatureBook')" class="fa fa-chevron-right fa-2x" mat-list-icon color="accent">
</mat-icon>
<mat-icon
class="fa fa-2x"
[class.avatar]="!functions.empty(diffusion.picture)"
[class.fa-user]="functions.empty(diffusion.picture) && diffusion.isValid"
[class.fa-user-slash]="!diffusion.isValid"
[title]="!diffusion.isValid ? ('lang.userNotValid' | translate) : ''"
mat-list-icon color="primary"
[class.invalid]="!diffusion.hasPrivilege || !diffusion.isValid"
[style.background-image]="!functions.empty(diffusion.picture) ? 'url('+diffusion.picture+')' : ''" style="position: relative;">
<i *ngIf="!functions.empty(diffusion.process_comment)" class="far fa-comment-dots commentBubble" [matTooltip]="diffusion.process_comment"></i>
</mat-icon>
<ng-container *ngIf="(!adminMode || diffusion.process_date != null) && diffusion.isValid">
<mat-icon mat-list-icon class="fa-2x fa"
[title]="diffusion.process_comment !== null ? diffusion.process_comment : ''"
[class.fa-hourglass]="diffusion.process_date == null"
[class.fa-thumbs-up]="diffusion.process_date != null && [this.translate.instant('lang.visaWorkflowInterrupted'), this.translate.instant('lang.hasInterruptedWorkflow')].indexOf(diffusion.process_comment) === -1"
[class.fa-hand-paper]="diffusion.process_date != null && diffusion.process_comment === this.translate.instant('lang.hasInterruptedWorkflow')"
[class.fa-times]="diffusion.process_date != null && diffusion.process_comment === this.translate.instant('lang.visaWorkflowInterrupted')"
[class.valid]="diffusion.process_date != null && [this.translate.instant('lang.visaWorkflowInterrupted'), this.translate.instant('lang.hasInterruptedWorkflow')].indexOf(diffusion.process_comment) === -1"
[class.invalid]="diffusion.process_date != null && [this.translate.instant('lang.visaWorkflowInterrupted'), this.translate.instant('lang.hasInterruptedWorkflow')].indexOf(diffusion.process_comment) > -1"
style="opacity:0.5;"></mat-icon>
</ng-container>
<div mat-line class="workflowLine">
<div class="workflowLineContainer">
<div class="workflowLineLabel" [class.unauthorized]="!diffusion.hasPrivilege || !diffusion.isValid">
{{diffusion.labelToDisplay}}
<ng-container *ngIf="diffusion.process_date != null && diffusion.delegatedBy !== null">
<mat-icon mat-list-icon class="fas fa-exclamation-circle"
[title]="this.translate.instant('lang.insteadOf') + ' ' + diffusion.delegatedBy"
style="opacity:0.5;font-size: 125%;height: 15px;color: red"></mat-icon>
</ng-container>
</div>
<div class="workflowLineSubLabel" [class.unauthorized]="!diffusion.hasPrivilege || !diffusion.isValid">
{{diffusion.item_entity}}
</div>
<div class="workflowLineSubLabel" *ngIf="(showComment && ((!linkedToMaarchParapheur && adminMode && functions.empty(diffusion.process_date)) || (!linkedToMaarchParapheur && getCurrentVisaUserIndex() === i && !functions.empty(diffusion.process_comment)))) && diffusion.hasPrivilege && diffusion.isValid">
<mat-form-field>
<input matInput class="comment" maxlength="255" [disabled]="!adminMode || diffusion.process_date != null || (target === 'signatureBook' && getCurrentVisaUserIndex() === i)" [placeholder]="this.translate.instant('lang.visaNote')" [(ngModel)]="diffusion.process_comment">
</mat-form-field>
</div>
<div *ngIf="diffusion.process_date != null && [this.translate.instant('lang.visaWorkflowInterrupted'), this.translate.instant('lang.hasInterruptedWorkflow')].indexOf(diffusion.process_comment) === -1" class="workflowLineProcessDate"
title='{{diffusion.process_date | fullDate}}'
color="accent">{{((functions.empty(diffusion.process_date) && diffusion.requested_signature) || diffusion.signatory) ? this.translate.instant('lang.signedUserDate') : this.translate.instant('lang.approvedUserDate')}} {{diffusion.process_date
| timeAgo : 'full'}}</div>
<div *ngIf="diffusion.process_date != null && ['A terminé le circuit'].indexOf(diffusion.process_comment) > -1" class="workflowLineProcessDate"
title='{{diffusion.process_date | fullDate}}'
color="warn">{{'lang.interrupted' | translate}} {{diffusion.process_date | timeAgo : 'full'}}</div>
</div>
<div *ngIf="diffusion.hasPrivilege && diffusion.isValid">
<button class="currentRoleButton" [color]="((functions.empty(diffusion.process_date) && diffusion.requested_signature) || diffusion.signatory) ? 'primary': '' "
[disabled]="!canManageUser(diffusion, i)" mat-raised-button
title="{{'lang.' + diffusion.currentRole + 'User' | translate}}"
(click)="changeRole(i)">{{((functions.empty(diffusion.process_date) && diffusion.requested_signature) || diffusion.signatory) ? this.translate.instant('lang.signUser') : this.translate.instant('lang.visaUser')}}</button>
</div>
<div *ngIf="!diffusion.hasPrivilege" class="invalid">
{{'lang.noPrivileges' | translate}}
</div>
<div *ngIf="!diffusion.isValid" class="invalid invalidMsg">
{{'lang.userNotValid' | translate}}
</div>
</div>
<button mat-icon-button *ngIf="canManageUser(diffusion, i)"
(click)="deleteItem(i)">
<mat-icon class="fa fa-times" color="warn"></mat-icon>
</button>
</mat-list-item>
</div>
</mat-list>
<div *ngIf="loading" style="display:flex;padding: 10px;">
<mat-spinner style="margin:auto;"></mat-spinner>
</div>