visa-workflow.component.html

<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}}&nbsp;<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
                [ngClass]="{'fa fa-user fa-2x': functions.empty(diffusion.picture),'avatar': !functions.empty(diffusion.picture)}"
                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">
                <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}}
                    </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">
                        <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">{{diffusion.requested_signature ? 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]="diffusion.requested_signature ? 'primary': '' "
                        [disabled]="!canManageUser(diffusion, i)" mat-raised-button
                        title="{{'lang.' + diffusion.currentRole + 'User' | translate}}"
                        (click)="changeRole(i)">{{diffusion.requested_signature ? 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">
                    {{'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>