home.component.html

<mat-sidenav-container autosize class="maarch-container" joyrideStep="welcome" stepPosition="center">
    <mat-sidenav-content>
        <mat-card id="viewThumbnail" style="display:none;position: fixed;z-index: 2;margin-left: 1px;"><img
                style="max-height: 100vh;" *ngIf="thumbnailUrl !== ''" [src]="thumbnailUrl | secureUrl | async" />
        </mat-card>
        <div class="bg-head">
            <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
                <div class="bg-head-title-label">
                    <header-left></header-left>
                </div>
                <div class="bg-head-title-tool">
                    <header-right></header-right>
                </div>
            </div>
            <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
                <mat-card *ngIf="homeMessage"
                    style="background: #135F7F;color: white;box-shadow: none;border: solid 2px white;width: 100%;border-radius: 20px;padding-bottom: 40px;">
                    <div style="display: flex;max-height: 250px;overflow: auto;">
                        <div style="padding-left: 10px;">
                            <span [innerHTML]="homeMessage"></span>
                        </div>
                    </div>
                    <div style="text-align: right;opacity: 0.5;">
                        <button mat-button routerLink="/about-us"
                            style="position:absolute;font-size:10px;right: 0px;bottom: 0px;">{{'lang.aboutUs' | translate}}</button>
                    </div>
                </mat-card>
            </div>
        </div>
        <div class="container" [class.fullContainer]="appService.getViewMode()">
            <div class="container-content">
                <mat-tab-group>
                    <mat-tab *ngIf="homeData !== undefined && homeData.isLinkedToMaarchParapheur">
                        <ng-template matTabLabel>
                            <span [class.noDoc]="nbMpDocs === 0" matBadge="{{nbMpDocs}}"
                                matBadgeOverlap="false">{{'lang.maarchParapheurDocuments' | translate}}</span>
                        </ng-template>
                        <app-maarch-parapheur-list (triggerEvent)="updateNbMpDocs($event)"></app-maarch-parapheur-list>
                    </mat-tab>
                    <mat-tab label="{{'lang.myLastResources' | translate}}" *ngIf="homeData !== undefined">
                        <div *ngIf="loading" style="display:flex;height:100%;">
                            <mat-spinner style="margin:auto;"></mat-spinner>
                        </div>
                        <table *ngIf="!loading" mat-table [dataSource]="dataSource" matSort matSortActive="res_id"
                            matSortDisableClear matSortDirection="asc" style="width:100%;table-layout: fixed;">
                            <!-- Number Column -->
                            <ng-container matColumnDef="res_id">
                                <td class="first_col" mat-cell *matCellDef="let row"
                                    [ngStyle]="{'width': appService.getViewMode() ? '30%' : '15%'}">
                                    <div *ngIf="row.closing_date == null && appService.getViewMode()"
                                        id="{{row.res_id}}_creation_date"
                                        style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;"
                                        title='{{row.creation_date | date : this.translate.instant("lang.onRange") + " dd/MM/y " + this.translate.instant("lang.atRange") +" HH:mm"}}'>
                                        <i class="fa fa-calendar" title="{{'lang.creationDate' | translate}}"></i>
                                        {{row.creation_date | timeAgo}}
                                    </div>
                                    <div style="overflow: hidden;text-overflow: ellipsis;">
                                        <mat-icon [ngStyle]="{'color': row.priority_color}" color="primary"
                                            class="{{row.status_icon.charAt(0)}}{{row.status_icon.charAt(1)}} {{row.status_icon}} {{row.status_icon.charAt(0)}}{{row.status_icon.charAt(1)}}-2x"
                                            title="{{row.status_label}} ({{row.status_id}})"></mat-icon>
                                        <span *ngIf="row.confidentiality === 'Y'"
                                            class="watermark">{{'lang.confidential' | translate}}</span>
                                    </div>
                                    <div style="padding-top: 5px;color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;"
                                        title="{{row.alt_identifier}} (n°{{row.res_id}})">
                                        {{row.alt_identifier}}
                                    </div>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="subject">
                                <td mat-cell *matCellDef="let row"
                                    style="width:45%;overflow:hidden;text-overflow: ellipsis;padding: 5px;vertical-align: middle;">
                                    <div *ngIf="row.closing_date == null && appService.getViewMode()"
                                        style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;text-align: right;">
                                        <i class="fa fa-stopwatch" title="{{'lang.processLimitDate' | translate}}"></i>&nbsp;
                                        <span [innerHTML]="row.process_limit_date | timeLimit"
                                            title='{{row.process_limit_date | date : this.translate.instant("lang.onRange") + " dd/MM/y " + this.translate.instant("lang.atRange") +" HH:mm"}}'></span>
                                    </div>
                                    <div style="overflow: hidden;line-height: 1.5em;height: 3em;overflow: hidden;"
                                        title="{{row.subject}}">
                                        <span>{{row.subject}}</span>
                                    </div>
                                </td>
                            </ng-container>
                            <ng-container matColumnDef="creation_date">
                                <td mat-cell *matCellDef="let row"
                                    style="text-align: right;width:15%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;vertical-align: middle;">
                                    <div *ngIf="row.closing_date == null" id="{{row.res_id}}_creation_date"
                                        style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;"
                                        title='{{row.creation_date | date : this.translate.instant("lang.onRange") + " dd/MM/y " + this.translate.instant("lang.atRange") +" HH:mm"}}'>
                                        <i class="fa fa-calendar" title="{{'lang.creationDate' | translate}}"></i>
                                        {{row.creation_date | timeAgo}}
                                    </div>
                                    <div *ngIf="row.closing_date == null"
                                        style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;">
                                        <i class="fa fa-stopwatch" title="{{'lang.processLimitDate' | translate}}"></i>&nbsp;
                                        <span [innerHTML]="row.process_limit_date | timeLimit"
                                            title='{{row.process_limit_date | date : this.translate.instant("lang.onRange") + " dd/MM/y " + this.translate.instant("lang.atRange") +" HH:mm"}}'></span>
                                    </div>
                                    <div *ngIf="row.closing_date != null"
                                        style="color: rgba(0,0,0,0.4);font-size: 90%;overflow: hidden;text-overflow: ellipsis;">
                                        <i class="fa fa-lock" title="{{'lang.closingDate' | translate}}"></i>&nbsp;
                                        <span
                                            title='{{row.closing_date | date : this.translate.instant("lang.onRange") + " dd/MM/y " + this.translate.instant("lang.atRange") +" HH:mm"}}'>{{row.closing_date | timeAgo}}</span>
                                    </div>
                                    <div>
                                        <button mat-icon-button (click)="$event.stopPropagation();viewDocument(row);"
                                            (mouseenter)="viewThumbnail(row);" (mouseleave)="closeThumbnail();"
                                            [disabled]="!row.hasDocument" title="{{row.hasDocument ? this.translate.instant('lang.viewResource') : this.translate.instant('lang.noDocument')}}">
                                            <mat-icon color="primary" class="fa" [ngClass]="[row.hasDocument ? 'fa-eye' : 'fa-eye-slash']"></mat-icon>
                                        </button>
                                    </div>
                                </td>
                            </ng-container>
                            <tr mat-row *matRowDef="let row; columns: displayedColumns;" (click)="goToDetail(row);"
                                style="cursor:pointer;"></tr>
                        </table>
                    </mat-tab>
                </mat-tab-group>
            </div>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>