visa-workflow.component.html 12 KB
Newer Older
1
<mat-list *ngIf="!loading">
2
    <mat-form-field appearance="outline" *ngIf="adminMode">
3
4
5
6
        <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()">
7
8
9
10
11
            <mat-option disabled *ngIf="visaModelListNotLoaded">
                <div style="display: flex;justify-content: center;">
                    <mat-spinner diameter="35"></mat-spinner>
                </div>
            </mat-option>
12
            <mat-optgroup [label]="'lang.publicModel' | translate" *ngIf="(filteredPublicModels | async)?.length > 0"
13
14
15
16
17
                class="visaSignList">
                <mat-option *ngFor="let model of filteredPublicModels | async | sortBy : 'label'" [value]="model">
                    {{model.label}}
                </mat-option>
            </mat-optgroup>
18
            <mat-optgroup [label]="'lang.privateModel' | translate" *ngIf="(filteredPrivateModels | async)?.length > 0"
19
20
21
22
23
24
25
26
27
28
29
30
31
                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>
32
33
            <mat-optgroup [label]="('lang.visaUser' | translate) + ' / ' + ('lang.signUser' | translate)"
                *ngIf="(filteredSignVisaUsers | async)?.length > 0" class="visaSignList">
34
                <mat-option *ngFor="let user of filteredSignVisaUsers | async | sortBy : 'label'" [value]="user">
35
                    {{user.label}}&nbsp;<small *ngIf="!functions.empty(user.entity)">({{user.entity}})</small>
36
37
38
                </mat-option>
            </mat-optgroup>
        </mat-autocomplete>
39
        <button mat-icon-button matSuffix *ngIf="visaWorkflow.items.length > 0 && showListModels" color="primary"
40
            (click)="$event.stopPropagation();openPromptSaveModel()" title="{{'lang.saveAsPrivateModel' | translate}}">
41
42
43
            <mat-icon class="fa fa-plus"></mat-icon>
        </button>
    </mat-form-field>
44
    <!--<div class="alert alert-danger" *ngIf="visaWorkflow.itemRemovedFromVisaTemplate.length > 0" [innerHTML]="('lang.itemRemovedFromVisaTemplate' | translate) + ' : ' + visaWorkflow.itemRemovedFromVisaTemplate.join(', ')"></div>-->
45
    <div cdkDropList #dataAvailableList="cdkDropList" [cdkDropListData]="visaWorkflow.items" class="cdk-list"
46
        (cdkDropListDropped)="drop($event)" [cdkDropListDisabled]="!adminMode">
47
48
49
50
51
        <div class="emptyContent" *ngIf="adminMode && visaWorkflow.items.length === 0">
            {{'lang.noVisaWorkflow' | translate}}
        </div>
        <div class="emptyContent" *ngIf="!adminMode && visaWorkflow.items.length === 0">
            {{'lang.cannotAddVisaCircuit' | translate}}
52
        </div>
53
54
55
        <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"
56
57
            [class.processed]="diffusion.process_date != null && (!stringIncludes(diffusion.process_comment, 'lang.hasInterruptedWorkflow' | translate) && !stringIncludes(diffusion.process_comment, 'lang.visaWorkflowInterrupted' | translate))"
            [class.interrupt]="diffusion.process_date != null && (stringIncludes(diffusion.process_comment, 'lang.hasInterruptedWorkflow' | translate) || stringIncludes(diffusion.process_comment, 'lang.visaWorkflowInterrupted' | translate))">
58
            <mat-icon *ngIf="getCurrentVisaUserIndex() === i && (!adminMode || target === 'signatureBook' || target === 'action')"
59
                class="fa fa-chevron-right fa-2x" mat-list-icon color="accent">
60
            </mat-icon>
61
            <mat-icon class="fa fa-2x" [class.avatar]="!functions.empty(diffusion.picture)"
62
                [class.fa-user]="functions.empty(diffusion.picture) && (diffusion.isValid || (diffusion.process_date === null && diffusion.delegatedBy === null))"
63
                [class.fa-user-friends]="diffusion.process_date != null && diffusion.delegatedBy !== null"
64
                [class.fa-user-slash]="!diffusion.isValid"
65
                [title]="!diffusion.isValid ? ('lang.userNotValid' | translate) : ''" mat-list-icon color="primary"
66
                [class.invalid]="!diffusion.hasPrivilege || !diffusion.isValid"
67
68
69
70
                [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>
71
            </mat-icon>
72
            <ng-container *ngIf="(!adminMode || diffusion.process_date != null) && diffusion.isValid">
Alex ORLUC's avatar
Alex ORLUC committed
73
                <mat-icon mat-list-icon class="fa-2x fa"
74
75
                    [title]="diffusion.process_comment !== null ? diffusion.process_comment : ''"
                    [class.fa-hourglass]="diffusion.process_date == null"
76
77
78
79
80
                    [class.fa-thumbs-up]="diffusion.process_date != null && !stringIncludes(diffusion.process_comment, 'lang.hasInterruptedWorkflow' | translate) && !stringIncludes(diffusion.process_comment, 'lang.visaWorkflowInterrupted' | translate)"
                    [class.fa-hand-paper]="diffusion.process_date != null && stringIncludes(diffusion.process_comment, 'lang.hasInterruptedWorkflow' | translate)"
                    [class.fa-times]="diffusion.process_date != null && stringIncludes(diffusion.process_comment, 'lang.visaWorkflowInterrupted' | translate)"
                    [class.valid]="diffusion.process_date != null && !stringIncludes(diffusion.process_comment, 'lang.hasInterruptedWorkflow' | translate) && !stringIncludes(diffusion.process_comment, 'lang.visaWorkflowInterrupted' | translate)"
                    [class.invalid]="diffusion.process_date != null && (stringIncludes(diffusion.process_comment, 'lang.hasInterruptedWorkflow' | translate) || stringIncludes(diffusion.process_comment, 'lang.visaWorkflowInterrupted' | translate))"
81
82
                    style="opacity:0.5;"></mat-icon>
            </ng-container>
Alex ORLUC's avatar
Alex ORLUC committed
83
84
            <div mat-line class="workflowLine">
                <div class="workflowLineContainer">
85
                    <div class="workflowLineLabel" [title]="diffusion.labelToDisplay" [class.unauthorized]="!diffusion.hasPrivilege || !diffusion.isValid">
86
                        {{diffusion.labelToDisplay}}
87
88
                        <ng-container *ngIf="diffusion.process_date != null && diffusion.delegatedBy !== null">
                            <mat-icon mat-list-icon class="fas fa-exclamation-circle"
89
90
                                [title]="('lang.insteadOf' | translate) + ' ' + diffusion.delegatedBy"
                                style="opacity:0.5;font-size: 125%;height: 15px;color: red;cursor: help;"></mat-icon>
91
                        </ng-container>
92
                    </div>
93
94
                    <div class="workflowLineSubLabel"
                        [class.unauthorized]="!diffusion.hasPrivilege || !diffusion.isValid">
Alex ORLUC's avatar
Alex ORLUC committed
95
96
                        {{diffusion.item_entity}}
                    </div>
97
                    <div class="workflowLineSubLabel"
98
                        *ngIf="(showComment && ((adminMode && functions.empty(diffusion.process_date)) || (getCurrentVisaUserIndex() === i && !functions.empty(diffusion.process_comment)))) && diffusion.hasPrivilege && diffusion.isValid || target === 'action'">
99
                        <mat-form-field>
100
101
                            <input matInput class="comment" maxlength="255"
                                [disabled]="!adminMode || diffusion.process_date != null || (target === 'signatureBook' && getCurrentVisaUserIndex() === i)"
102
                                [placeholder]="'lang.visaNote' | translate" [(ngModel)]="diffusion.process_comment" title="{{!functions.empty(diffusion.process_comment) ? diffusion.process_comment : null}}">
103
104
                        </mat-form-field>
                    </div>
105
                    <div *ngIf="diffusion.process_date != null && !stringIncludes(diffusion.process_comment, 'lang.visaWorkflowInterrupted' | translate) && !stringIncludes(diffusion.process_comment, 'lang.hasInterruptedWorkflow' | translate)"
106
107
                        class="workflowLineProcessDate" title='{{diffusion.process_date | fullDate}}' color="accent">
                        {{((functions.empty(diffusion.process_date) && diffusion.requested_signature) || diffusion.signatory) ? ('lang.signedUserDate' | translate) : ('lang.approvedUserDate' | translate)}} {{diffusion.process_date
108
                                                | timeAgo : 'full'}}</div>
109
                    <div *ngIf="diffusion.process_date != null && stringIncludes(diffusion.process_comment, 'lang.hasInterruptedWorkflow' | translate)"
110
111
                        class="workflowLineProcessDate" title='{{diffusion.process_date | fullDate}}' color="warn">
                        {{'lang.interrupted' | translate}} {{diffusion.process_date | timeAgo : 'full'}}</div>
112
                </div>
113
                <div *ngIf="diffusion.hasPrivilege && diffusion.isValid">
114
                    <ng-container>
115
116
117
118
                        <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}}"
119
                            (click)="changeRole(i)">{{'lang.' + diffusion.currentRole + 'User' | translate}}</button>
120
                    </ng-container>
121
                </div>
122
                <div *ngIf="!diffusion.hasPrivilege" class="invalid">
123
                    {{'lang.noPrivileges' | translate}}
124
                </div>
125
                <div *ngIf="!diffusion.isValid" class="invalid invalidMsg">
126
127
                    {{'lang.userNotValid' | translate}}
                </div>
128
            </div>
129
130
131
            <div mat-line class="workflowLine" *ngIf="getCurrentVisaUserIndex() === i && (target === 'signatureBook' || target === 'action') && diffusion.item_id !== headerService.user.id" style="color: red;font-size: 12px;padding-bottom: 5px;">
                {{'lang.signInsteadOf' | translate}}&nbsp;<b style="overflow: hidden;text-overflow: ellipsis;" [title]="diffusion.labelToDisplay">{{diffusion.labelToDisplay}}</b>
            </div>
132
            <button mat-icon-button *ngIf="canManageUser(diffusion, i)" (click)="deleteItem(i)">
133
134
135
                <mat-icon class="fa fa-times" color="warn"></mat-icon>
            </button>
        </mat-list-item>
136
    </div>
137
138
139
</mat-list>
<div *ngIf="loading" style="display:flex;padding: 10px;">
    <mat-spinner style="margin:auto;"></mat-spinner>
140
</div>
141
142
143
144
145
146
147
148
149
150
151
152
<ng-container *ngIf="!loading && hasHistory">
    <mat-divider></mat-divider>
    <mat-expansion-panel style="box-shadow: none;">
        <mat-expansion-panel-header>
            <mat-panel-title color="primary">
                {{'lang.showVisaWorkflowHistory' | translate}}
            </mat-panel-title>
        </mat-expansion-panel-header>
        <ng-template matExpansionPanelContent>
            <app-history-visa-workflow [resId]="resId" style="display: contents;"></app-history-visa-workflow>
        </ng-template>
    </mat-expansion-panel>
153
</ng-container>