home.component.html

<div class="admin-container" [class.admin-is-mobile]="mobileQuery.matches">
    <mat-sidenav-container autosize class="admin-sidenav-container">
        <mat-sidenav #snav [mode]="mobileMode ? 'over' : 'side'" [fixedInViewport]="mobileMode" fixedTopGap="56" [opened]="mobileMode ? false : true"
            autoFocus="false" style="overflow-x:hidden;" [ngStyle]="{'width': mobileMode ? '80%' : '400px'}">
            <menu-shortcut></menu-shortcut>
            <menu-nav></menu-nav>
            <basket-home *ngIf="homeData" [homeData]="homeData" [snavL]="snav"></basket-home>
            <mat-divider></mat-divider>
        </mat-sidenav>
        <mat-sidenav-content id="listContent">
            <mat-card class="card-app-content">
                <mat-card id="viewThumbnail" style="display:none;position: absolute;z-index: 2;"><img src="{{thumbnailUrl}}"/></mat-card>
                <mat-card *ngIf="homeData.homeMessage">
                    <div style="display: flex">
                        <div *ngIf="!mobileMode" style="text-align:center;flex: 1;background: url(static.php?filename=logo_only.svg);background-size: auto auto;height: 70px;background-size: contain;background-repeat: no-repeat;background-position: center;">
                        </div>
                        <div style="flex:10;padding-left: 10px;">
                            <span [innerHTML]="homeData.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}}</button>
                    </div>
                </mat-card>

                <mat-tab-group>
                    <mat-tab label="Mes derniers courriers">
                        <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 mat-cell *matCellDef="let row" [ngStyle]="{'width': mobileMode ? '30%' : '15%'}" style="text-align:center;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;padding: 5px;vertical-align: middle;">
                            <div *ngIf="row.closing_date == null && mobileMode" 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 : "le dd/MM/y à HH:mm"}}'>
                                <i class="fa fa-calendar" title="{{lang.creationDate}}"></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>
                            </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 && mobileMode" 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}}"></i>&nbsp;
                                <span [innerHTML]="row.process_limit_date | timeLimit" title='{{row.process_limit_date | date : "le dd/MM/y à 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 : "le dd/MM/y à HH:mm"}}'>
                                <i class="fa fa-calendar" title="{{lang.creationDate}}"></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}}"></i>&nbsp;
                                <span [innerHTML]="row.process_limit_date | timeLimit" title='{{row.process_limit_date | date : "le dd/MM/y à 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}}"></i>&nbsp;
                                <span title='{{row.closing_date | date : "le dd/MM/y à HH:mm"}}'>{{row.closing_date | timeAgo}}</span>
                            </div>
                            <div>
                                <button mat-icon-button (click)="$event.stopPropagation();goTo(row);" (mouseenter)="viewThumbnail(row);" (mouseleave)="closeThumbnail();">
                                    <mat-icon color="primary" class="fa fa-eye"></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>
            </mat-card>
        </mat-sidenav-content>
        <mat-sidenav #snav2 mode="over" [fixedInViewport]="mobileQuery.matches" fixedTopGap="56"
            position='end' [opened]="mobileQuery.matches ? false : false" style="overflow-x:hidden;" [ngStyle]="{'width': mobileMode ? '80%' : '40%'}">
            <div *ngIf="innerHtml" [innerHTML]="innerHtml" style="height: 100%;overflow: hidden;"></div>
        </mat-sidenav>
    </mat-sidenav-container>
</div>