process.component.html

<mat-sidenav-container class="maarch-container">
    <mat-sidenav #snavLeft class="panel-left" #snav [mode]="appService.getViewMode() ? 'over' : 'side'"
        [fixedInViewport]="appService.getViewMode()" [opened]="appService.getViewMode() ? false : true"
        autoFocus="false" style="overflow-x:hidden;" [ngStyle]="{'width': appService.getViewMode() ? '95%' : '600px'}">
        <header-panel [snavLeft]="snav"
            [navButton]="{icon: 'fa fa-inbox', label: lang.backBasket, route : '/basketList/users/'+currentUserId+'/groups/'+currentGroupId+'/baskets/'+currentBasketId}">
        </header-panel>
        <div class="listModels">
            <div class="processTool">
                <div class="processTool-module jiggle" *ngFor="let module of processTool"
                    [class.processTool-module-active]="module.id === currentTool" matRipple
                    (click)="isToolEnabled(module.id) ? changeTab(module.id) : false"
                    [class.tool-disabled]="!isToolEnabled(module.id)">
                    <i *ngIf="module.count > 0" class="fas fa-circle haveContent"></i>
                    <i [class]="module.icon"></i>
                    <span>{{module.label}}</span>
                </div>
            </div>
        </div>
        <div class="indexing-form-container">
            <div *ngIf="!isModalOpen() && currentTool !== 'dashboard'" style="display: flex;justify-content: flex-end;">
                <button mat-icon-button (click)="createModal()" color="primary" [title]="lang.openInExternalModal">
                    <mat-icon class="fas fa-external-link-alt"></mat-icon>
                </button>
            </div>
            <ng-container *ngIf="currentTool === 'dashboard'">
                <div
                    style="display: flex;align-items: center;justify-content: flex-end;margin-top: 10px;margin-bottom: -20px;">
                </div>
                <div class="banner" [style.borderColor]="currentPriorityColor">
                    <div class="title" (click)="currentTool = 'history'">
                        {{lang.history}}
                        <div class="title-divider"></div>
                    </div>
                    <div class="content">
                        <app-history-workflow-resume [resId]="currentResourceInformations.resId"
                            (goTo)="currentTool = 'history'">
                        </app-history-workflow-resume>
                    </div>
                </div>
                <div class="banner" [style.borderColor]="currentPriorityColor">
                    <div class="title" (click)="currentTool = 'notes'">
                        {{lang.notesAlt}}
                        <div class="title-divider"></div>
                    </div>
                    <div class="content">
                        <app-note-resume [resId]="currentResourceInformations.resId" (goTo)="currentTool = 'notes'">
                        </app-note-resume>
                    </div>
                </div>
                <div class="banner" [style.borderColor]="currentPriorityColor">
                    <div class="title" (click)="currentTool = 'attachments'">
                        {{lang.attachments}}
                        <div class="title-divider"></div>
                    </div>
                    <div class="content">
                        <app-attachments-resume [resId]="currentResourceInformations.resId"
                            (goTo)="currentTool = 'attachments'">
                        </app-attachments-resume>
                    </div>
                </div>
                <div class="banner" [style.borderColor]="currentPriorityColor">
                    <div class="title" (click)="currentTool = 'emails'">
                        {{lang.mailsSentAlt}}
                        <div class="title-divider"></div>
                    </div>
                    <div class="content">
                        <app-mail-resume [resId]="currentResourceInformations.resId" (goTo)="currentTool = 'emails'">
                        </app-mail-resume>
                    </div>
                </div>
            </ng-container>
            <ng-container *ngIf="!isModalOpen(); else elseTemplate">
                <app-history-list *ngIf="currentTool === 'history' && !loading" #appHistoryList
                    [resId]="currentResourceInformations.resId">
                </app-history-list>
                <app-notes-list *ngIf="currentTool === 'notes' && !loading" #appNotesList [editMode]="true"
                    [resId]="currentResourceInformations.resId">
                </app-notes-list>
                <app-linked-resource-list *ngIf="currentTool === 'linkedResources' && !loading" #appLinkedResourceList
                    [resId]="currentResourceInformations.resId"
                    (reloadBadgeLinkedResources)="refreshBadge($event,'linkedResources')">
                </app-linked-resource-list>
                <app-diffusions-list *ngIf="currentTool === 'diffusionList' && !loading" #appDiffusionsList
                    [adminMode]="false" [resId]="currentResourceInformations.resId" [expanded]="true">
                </app-diffusions-list>
                <app-sended-resource-list *ngIf="currentTool === 'emails' && !loading" #appSendedResource
                    [resId]="currentResourceInformations.resId">
                </app-sended-resource-list>
                <app-visa-workflow *ngIf="currentTool === 'visaCircuit' && !loading" #appVisaWorkflow
                    [resId]="currentResourceInformations.resId"
                    [adminMode]="privilegeService.hasCurrentUserPrivilege('config_visa_workflow')"></app-visa-workflow>
                <app-avis-workflow *ngIf="currentTool === 'opinionCircuit' && !loading" #appAvisWorkflow
                    [resId]="currentResourceInformations.resId"
                    [adminMode]="privilegeService.hasCurrentUserPrivilege('config_avis_workflow')"></app-avis-workflow>
                <app-attachments-list *ngIf="currentTool === 'attachments' && !loading" #appAttachmentsList
                    [resId]="currentResourceInformations.resId" [target]="'process'"
                    (reloadBadgeAttachments)="refreshBadge($event,'attachments')">
                </app-attachments-list>
                <app-indexing-form *ngIf="currentTool === 'info' && !loading" #indexingForm [groupId]="currentGroupId"
                    [resId]="currentResourceInformations.resId" [indexingFormId]="currentResourceInformations.modelId"
                    [mode]="'process'" [canEdit]="canEditData" [hideDiffusionList]="true"
                    (loadingFormEndEvent)="triggerProcessAction()"
                    (retrieveDocumentEvent)="appDocumentViewer.saveDocService()"></app-indexing-form>
                <div style="position: sticky;bottom: 0px;text-align:right;">
                    <button mat-fab [title]="lang.saveModifications" *ngIf="isToolModified()" (click)="saveTool()"
                        color="accent">
                        <mat-icon style="height:auto;font-size:20px;" class="fas fa-check"></mat-icon>
                    </button>
                </div>

            </ng-container>
            <ng-template #elseTemplate>
                <div class="openedModal">
                    <i class="fas fa-external-link-alt"></i>
                    {{lang.openedInExternalModal}}
                </div>
            </ng-template>
        </div>
        <div class="actions-indexing-form">
            <ng-container *ngIf="actionsList.length > 0 && selectedAction !== undefined">
                <button mat-button class="button-form-primary" [disabled]="selectedAction.id === 0"
                    [matMenuTriggerFor]="menu" style="width:350px;margin-right:20px;" [title]="selectedAction.label">
                    <span class="menu-label" [innerHTML]="selectedAction.label">
                    </span>
                    <i class="fa fa-chevron-down menu-icon"></i></button>
                <mat-menu #menu="matMenu" [class]="'menuForm menuAction'">
                    <div class="menuTitle">
                        <span>
                            {{lang.actions}}
                        </span>
                        <mat-form-field floatLabel="never" appearance="outline" class="smallInput"
                            (click)="$event.stopPropagation();">
                            <input matInput id="searchTerm" placeholder="{{lang.filterBy}}" #listFilter
                                autocomplete="off" (click)="$event.stopPropagation();"
                                (keydown)="$event.stopPropagation()">
                        </mat-form-field>
                    </div>
                    <ng-container *ngFor="let action of actionsList | filterList:listFilter.value:'label'">
                        <button *ngIf="showActionInCurrentCategory(action)" mat-menu-item (click)="selectAction(action)"
                            [title]="action.label" [class.listModels-menu-selected]="action.id === selectedAction.id">
                            <span style="flex:1;">{{action.label}}</span>
                        </button>
                    </ng-container>
                </mat-menu>
                <button mat-button *ngIf="!appService.getViewMode()"
                    [disabled]="actionService.loading || selectedAction.id === 0" class="button-form-primary-filled"
                    style="width: 150px;align-items: center;justify-content: center;text-align: center;display: flex;"
                    (click)="onSubmit()">{{lang.validate}}</button>
                <button mat-icon-button *ngIf="appService.getViewMode()" class="button-form-primary"
                    (click)="onSubmit()">
                    <mat-icon class="fa fa-check"></mat-icon>
                </button>
            </ng-container>
            <div class="emptyAction" *ngIf="actionsList.length === 0" [innerHTML]="lang.noAvailableActionProcess"></div>
        </div>
    </mat-sidenav>
    <mat-sidenav-content>
        <div class="bg-head">
            <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
                <div class="bg-head-title-label">
                    <header-left [snavLeft]="snav"></header-left>
                </div>
                <div class="bg-head-title-tool">
                    <header-right></header-right>
                </div>
            </div>
            <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()" style="padding-bottom: 20px;">
                <div class="resourceInfo">
                    <ng-container *ngIf="!loading; else elseInfoRes">
                        <div class="title">
                            <span style="white-space: nowrap; padding-left: 10px; padding-right: 10px">
                                {{this.currentResourceInformations.subject}}
                            </span>
                            <div class="title-divider"></div>
                        </div>
                        <div class="content">
                            <button mat-icon-button
                                [title]="this.resourceFollowed ? lang.untrackThisMail:lang.trackThisMail"
                                class="categoryLabel" (click)="toggleFollow()">
                                <mat-icon class="followIcon {{this.resourceFollowed ? 'fas':'far'}} fa-star"
                                    style="font-size: 20px;"></mat-icon>
                            </button>
                            <div class="content-item" *ngIf="this.currentResourceInformations.priority !== undefined">
                                <b><i class="fas fa-flag" [style.color]="this.currentResourceInformations.priorityColor"
                                        style="font-size: 25px;padding-right: 20px;"></i>
                                    {{this.currentResourceInformations.priorityLabel}}</b>
                            </div>
                            <div class="content-item">
                                <div>{{lang.chronoNumberShort}} :</div>
                                <div class="content-item-value" [title]="'N° '+this.currentResourceInformations.resId">
                                    {{this.currentResourceInformations.chrono}}</div>
                            </div>
                            <div class="content-item" (click)="openContact()" style="cursor:pointer">
                                <div>{{lang.senders}} :</div>
                                <div class="content-item-value">{{senderLightInfo.displayName}} <i
                                        *ngIf="this.senderLightInfo.filling" class="fas fa-circle"
                                        style="font-size: 8px" [style.color]="this.senderLightInfo.filling"></i></div>
                            </div>
                            <div class="content-item"
                                *ngIf="this.currentResourceInformations.processLimitDate !== undefined">
                                <ng-container
                                    *ngIf="this.currentResourceInformations.closingDate !== null; else elseLimitDate">
                                    <div style="font-weight: bold;"
                                        [title]="this.currentResourceInformations.closingDate | fullDate">
                                        {{this.lang.closed}}
                                        {{this.currentResourceInformations.closingDate | timeAgo : 'full'}}&nbsp;&nbsp;<i
                                            class="fa fa-lock"></i></div>
                                </ng-container>
                                <ng-template #elseLimitDate>
                                    <div>{{lang.processLimitDate}} :</div>
                                    <div class="content-item-value"
                                        [title]="this.currentResourceInformations.processLimitDate | fullDate"
                                        [innerHTML]="this.currentResourceInformations.processLimitDate | timeLimit : 'badge'">
                                    </div>
                                </ng-template>
                            </div>
                            <div
                                style="position: absolute;right: 0px;top: 0px;height: 100%;display: flex;flex-direction: column;justify-content: center;">
                                <button mat-icon-button *ngFor="let inteKey of integrationsInfo | keyvalue"
                                    [matTooltip]="lang[inteKey.key]" (click)="toggleIntegration(inteKey.key)">
                                    <mat-icon [class]="inteKey.value.icon"
                                        [class.checked]="currentResourceInformations.integrations[inteKey.key]"
                                        [class.unchecked]="!currentResourceInformations.integrations[inteKey.key]">
                                    </mat-icon>
                                </button>
                            </div>
                        </div>
                    </ng-container>
                    <ng-template #elseInfoRes>
                        <div class="loadingBanner">
                            <mat-spinner diameter="35"></mat-spinner>
                        </div>
                    </ng-template>
                </div>
            </div>
        </div>
        <div class="document-container" [class.fullContainer]="appService.getViewMode()">
            <div class="content">
                <app-document-viewer #appDocumentViewer style="height:100%;width:100%;" [editMode]="canEditData"
                    [resId]="currentResourceInformations.resId"
                    [title]="currentResourceInformations.chrono + ' - ' + currentResourceInformations.subject"
                    [sidenavLeft]="sidenavLeft">
                </app-document-viewer>
            </div>
        </div>
    </mat-sidenav-content>
    <mat-sidenav #snav2 [fixedInViewport]="appService.getViewMode()" position='end'
        [opened]="appService.getViewMode() ? false : false" [mode]="appService.getViewMode() ? 'over' : 'side'"
        class="panel-right" style="overflow-x:hidden;" [class.docView]="!filtersListService.filterMode"
        [ngStyle]="{'width': appService.getViewMode() ? '80%' : '30%'}" autoFocus="false">
    </mat-sidenav>
</mat-sidenav-container>
<div class="modal-module {{modal.id}}" cdkDrag *ngFor="let modal of modalModule; let i=index"
    [class.largeModal]="modal.id === 'info'">
    <div class="modal-module-title" cdkDragHandle>
        <span>
            {{modal.label}}
        </span>
        <button mat-icon-button (click)="removeModal(i)">
            <mat-icon class="fas fa-times"></mat-icon>
        </button>
    </div>
    <div class="modal-module-content">
        <app-history-list *ngIf="currentTool === 'history' && !loading" #appHistoryList
            [resId]="currentResourceInformations.resId">
        </app-history-list>
        <app-notes-list *ngIf="modal.id === 'notes' && !loading" #appNotesList [editMode]="true"
            [resId]="currentResourceInformations.resId">
        </app-notes-list>
        <app-linked-resource-list *ngIf="modal.id === 'linkedResources' && !loading" #appLinkedResourceList
            [resId]="currentResourceInformations.resId"
            (reloadBadgeLinkedResources)="refreshBadge($event,'linkedResources')"></app-linked-resource-list>
        <app-diffusions-list *ngIf="modal.id === 'diffusionList' && !loading" #appDiffusionsList [adminMode]="false"
            [resId]="currentResourceInformations.resId" [expanded]="true">
        </app-diffusions-list>
        <app-sended-resource-list *ngIf="modal.id === 'emails' && !loading" #appSendedResource
            [resId]="currentResourceInformations.resId">
        </app-sended-resource-list>
        <app-visa-workflow *ngIf="modal.id === 'visaCircuit' && !loading"
            [adminMode]="privilegeService.hasCurrentUserPrivilege('config_visa_workflow')" #appVisaWorkflow
            [resId]="currentResourceInformations.resId">
        </app-visa-workflow>
        <app-avis-workflow *ngIf="modal.id === 'opinionCircuit' && !loading" #appAvisWorkflow
            [resId]="currentResourceInformations.resId"
            [adminMode]="privilegeService.hasCurrentUserPrivilege('config_avis_workflow')">
        </app-avis-workflow>
        <app-attachments-list *ngIf="modal.id === 'attachments'  && !loading" #appAttachmentsList
            [resId]="currentResourceInformations.resId" (reloadBadgeAttachments)="refreshBadge($event,'attachments')">
        </app-attachments-list>
        <app-indexing-form *ngIf="modal.id === 'info' && !loading" #indexingForm [groupId]="currentGroupId"
            [indexingFormId]="currentResourceInformations.modelId" [resId]="currentResourceInformations.resId"
            [mode]="'process'" [canEdit]="canEditData" [hideDiffusionList]="true"
            (loadingFormEndEvent)="triggerProcessAction()" (retrieveDocumentEvent)="appDocumentViewer.saveDocService()">
        </app-indexing-form>
        <div style="position: sticky;bottom: 0px;text-align:right;padding:15px;">
            <button mat-fab
                *ngIf="indexingForm !== undefined && indexingForm.isResourceModified() && modal.id === 'info'"
                (click)="confirmModification()" color="accent" [title]="lang.saveModifications">
                <mat-icon style="height:auto;font-size:20px;" class="fas fa-check"></mat-icon>
            </button>
            <button mat-fab [title]="lang.saveModifications"
                *ngIf="appDiffusionsList !== undefined && appDiffusionsList.isModified() && modal.id === 'diffusionList'"
                (click)="saveListinstance()" color="accent">
                <mat-icon style="height:auto;font-size:20px;" class="fas fa-check"></mat-icon>
            </button>
            <button mat-fab [title]="lang.saveModifications"
                *ngIf="appVisaWorkflow !== undefined && appVisaWorkflow.isModified() && modal.id === 'visaCircuit'"
                (click)="saveVisaWorkflow()" color="accent">
                <mat-icon style="height:auto;font-size:20px;" class="fas fa-check"></mat-icon>
            </button>
        </div>
    </div>
</div>