visa-workflow.component.html

<mat-list *ngIf="!loading">
    <mat-form-field appearance="outline" *ngIf="adminMode">
        <input type="text" matInput placeholder="Ajouter des personnes" 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]="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]="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]="'Viseurs / Signataire'" *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" color="primary"
            (click)="$event.stopPropagation();openPromptSaveModel()">
            <mat-icon class="fa fa-plus"></mat-icon>
        </button>
    </mat-form-field>
    <!--<plugin-autocomplete *ngIf="adminMode" [labelPlaceholder]="lang.addPerson"
        [routeDatas]="['/rest/autocomplete/maarchParapheurUsers']" [targetSearchKey]="'idToDisplay'"
        [subInfoKey]="'descriptionToDisplay'" (triggerEvent)="addItem($event)" appearance="outline">
    </plugin-autocomplete>-->
    <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}}
        </div>
        <mat-list-item *ngFor="let diffusion of visaWorkflow.items;let i=index" cdkDrag class="columns workflow"
            [cdkDragDisabled]="!adminMode || !functions.empty(diffusion.process_date)"
            [class.notDraggable]="!adminMode || !functions.empty(diffusion.process_date)"
            [class.notEditable]="!adminMode" [class.processed]="diffusion.process_date != null">
            <mat-icon
                [ngClass]="{'fa fa-user fa-2x': functions.empty(diffusion.picture),'avatar': !functions.empty(diffusion.picture)}"
                mat-list-icon color="primary"
                [style.background-image]="!functions.empty(diffusion.picture) ? 'url('+diffusion.picture+')' : ''">
            </mat-icon>
            <ng-container *ngIf="!adminMode || diffusion.process_date != null">
                <mat-icon mat-list-icon class="fa-2x far"
                [class.fa-hourglass]="diffusion.process_date == null" [class.fa-thumbs-up]="diffusion.process_date != null" [class.valid]="diffusion.process_date != null"
                    style="opacity:0.5;"></mat-icon>
            </ng-container>
            <div mat-line class="workflowLine">
                <div class="workflowLineContainer">
                    <div class="workflowLineLabel">
                        {{diffusion.labelToDisplay}}
                    </div>
                    <div class="workflowLineSubLabel">
                        {{diffusion.item_entity}}
                    </div>
                    <div *ngIf="diffusion.process_date != null" class="workflowLineProcessDate"
                        title='{{diffusion.process_date | fullDate}}'
                        color="accent">{{diffusion.requested_signature ? lang.signedUserDate : lang.approvedUserDate}} {{diffusion.process_date
                                                | timeAgo : 'full'}}</div>
                </div>
                <div>
                    <button class="currentRoleButton" [color]="diffusion.requested_signature ? 'primary': '' "
                        [disabled]="!adminMode || !functions.empty(diffusion.process_date)" mat-raised-button
                        title="{{lang[diffusion.currentRole+'User']}}"
                        (click)="changeRole(i)">{{diffusion.requested_signature ? lang.signUser : lang.visaUser}}</button>
                </div>

            </div>
            <button mat-icon-button *ngIf="adminMode && functions.empty(diffusion.process_date)"
                (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>