visa-workflow.component.html

<ion-header [translucent]="true">
    <ion-toolbar color="primary">
        <ion-buttons slot="start">
            <ion-button disabled>
                <ion-icon slot="icon-only" name="list-outline"></ion-icon>
            </ion-button>
        </ion-buttons>
        <ion-title class="ion-text-center">{{'lang.circuit' | translate}}</ion-title>
    </ion-toolbar>
</ion-header>
<ion-content (click)="resetVisaUsersList();">
    <ng-container *ngIf="editMode">
        <ion-item lines="none">
            <ion-searchbar #searchInput [(ngModel)]="visaUsersSearchVal" [placeholder]="'lang.searchUser' | translate"
                (ionChange)="getVisaUsers($event)" (ionFocus)="visaUsersSearchVal=''"></ion-searchbar>
            <ion-buttons *ngIf="!hasConnector; else elseHasConnector" slot="end">
                 <ion-button fill="clear" slot="icon-only" shape="round" color="primary"
                    (click)="openVisaWorkflowModels($event)" [title]="'lang.circuitModels' | translate">
                    <ion-icon slot="icon-only" name="albums-outline"></ion-icon>
                </ion-button>
            </ion-buttons>
            <ng-template #elseHasConnector>
                <ion-buttons slot="end">
                    <ion-button fill="clear" slot="icon-only" shape="round" color="primary" [matMenuTriggerFor]="menu">
                        <ion-icon slot="icon-only" name="ellipsis-vertical-outline"></ion-icon>
                    </ion-button>
                </ion-buttons>
                <mat-menu #menu="matMenu">
                    <ion-item *ngIf="hasConnector" button (click)="openOtpModal()" lines="none">
                        <ion-icon name="person-circle-outline" slot="start" color="primary"></ion-icon>
                        <ion-label style="font-size: 14px;">{{'lang.newOtp' | translate}}</ion-label>
                    </ion-item>
                    <button mat-menu-item [matMenuTriggerFor]="model"
                        (menuOpened)="visaWorkflowService.getVisaUserModels(visaWorkflow)">{{'lang.circuitModels' | translate}}</button>
                </mat-menu>
                <mat-menu #model="matMenu">
                    <ion-item button lines="none" *ngFor="let model of visaWorkflowService.visaWorkflowModels" (click)="loadVisaWorkflow(model)">
                        <ion-label style="font-size: 14px;">{{model.title}}</ion-label>
                        <ion-buttons slot="end">
                            <ion-button fill="clear" slot="icon-only" shape="round" color="danger"
                                (click)="$event.stopPropagation(); visaWorkflowService.removeModel(model)">
                                <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
                            </ion-button>
                        </ion-buttons>
                    </ion-item>
                    <ion-item button (click)="visaWorkflowService.createModel(visaWorkflow)" [disabled]="visaWorkflow.length === 0 || visaWorkflowService.notExternalUsers === 0">
                        <ion-label style="font-size: 14px;">{{'lang.newTemplate' | translate}}</ion-label>
                    </ion-item>
                </mat-menu>
            </ng-template>
        </ion-item>
        <ion-list *ngIf="visaUsersList.length > 0"
            style="position: absolute;z-index: 2;width: 100%;box-shadow: 0 4px 2px -2px gray;">
            <ion-item *ngFor="let user of visaUsersList">
                <ion-checkbox color="primary" slot="start" [value]="user"
                    (ionChange)="addUser($event.detail.value, searchInput)"></ion-checkbox>
                <ion-label>{{ user.firstname }} {{ user.lastname }}</ion-label>
                <ion-note slot="end">{{ user.email }}</ion-note>
            </ion-item>
        </ion-list>
    </ng-container>
    <ion-list *ngIf="visaWorkflow.length === 0">
        <ion-item lines="none">
            <ion-label class="ion-text-center" color="medium">{{'lang.noUserInWorkflow' | translate}}</ion-label>
        </ion-item>
    </ion-list>
    <ion-reorder-group (ionItemReorder)="doReorder($event)" [disabled]="!editMode">
        <ion-item class="no-ripple" *ngFor="let diffusion of visaWorkflow;let i=index"
            [class.current]="diffusion.current">
            <ion-reorder slot="start">
                <ion-icon [title]="'lang.reorder' | translate" name="reorder-three" style="font-size: 30px;"></ion-icon>
            </ion-reorder>
            <ion-avatar slot="start" class="avatar-user" style="cursor: grab;" (click)="$event.stopPropagation();">
                <img [src]="diffusion.userPicture">
            </ion-avatar>
            <ion-label>
                <p class="secondary" *ngIf="diffusion.current && (diffusion.userId !== null && diffusion.userId !== authService.user.id)">
                    {{'lang.substituteMsg' | translate}}</p>
                <h2 [class.interrupt]="diffusion.noConnector !== undefined && diffusion.noConnector === true" [title]="diffusion.userDisplay" *ngIf="diffusion.userDisplay !== ''">{{diffusion.userDisplay}}</h2>
                <h2 [title]="diffusion.userDisplay" class="danger" *ngIf="diffusion.userDisplay === ''">
                    {{'lang.userDeleted' | translate}}</h2>
                <p *ngIf="diffusion.noConnector === undefined && diffusion.processDate === null" style="display: flex;justify-content: start;">
                    <ion-select [(ngModel)]="diffusion.role" (ionChange)="checkRole(diffusion, i, $event.detail.value)" [title]="diffusion.userDisplay"
                        interface="popover" [interfaceOptions]="customPopoverOptions"
                        [style.color]="getRole(diffusion.role)?.color" [disabled]="!editMode"
                        style="width: auto;max-width: 100%;padding-left:0px;">
                        <ion-select-option [value]="mode" *ngFor="let mode of diffusion.modes"
                            [disabled]="!isValidRole(i,mode, diffusion.role)">
                            {{'lang.' + mode + 'User' | translate}}
                        </ion-select-option>
                    </ion-select>
                </p>
                <p *ngIf="diffusion.processDate !== null" [title]="diffusion.processDate">
                    <ion-note *ngIf="diffusion.status === 'VAL'" class="valProcess">
                        {{'lang.'+diffusion.mode+'ProcessInfo' | translate}}
                        {{diffusion.processDate}}
                    </ion-note>
                    <ion-note *ngIf="diffusion.status === 'REF'" class="refProcess">
                        {{'lang.refProcessInfo' | translate}}
                        {{diffusion.processDate}}
                    </ion-note>
                    <ion-note *ngIf="diffusion.status === 'STOP'" class="stopProcess">
                        {{'lang.stopProcessInfo' | translate}}
                        {{diffusion.processDate}}
                    </ion-note>
                </p>
                <ion-note *ngIf="diffusion.noConnector !== undefined && diffusion.noConnector === true" style="color: red; font-size: 10px;">{{ 'lang.noConnector' | translate }}</ion-note>
            </ion-label>
            <ion-icon *ngIf="!editMode && diffusion.current" color="success" slot="end" name="caret-back-outline">
            </ion-icon>
            <ion-buttons slot="end">
                <ion-button style="z-index: 9999" *ngIf="editMode && diffusion.userId === null && hasConnector" fill="clear" slot="icon-only" shape="round"
                    color="primary" (click)="$event.stopPropagation();openOtpModal(diffusion, i)" [title]="'lang.updateOtp' | translate">
                    <ion-icon name="create-outline"></ion-icon>
                </ion-button>
                <ion-button style="z-index: 9999" *ngIf="editMode" fill="clear" slot="icon-only" shape="round"
                    color="danger" (click)="$event.stopPropagation();removeUser(i)">
                    <ion-icon slot="icon-only" name="trash-outline"></ion-icon>
                </ion-button>
            </ion-buttons>
        </ion-item>
    </ion-reorder-group>
</ion-content>