Skip to content
Snippets Groups Projects
basket-list.component.html 14.4 KiB
Newer Older
  • Learn to ignore specific revisions
  • Alex ORLUC's avatar
    Alex ORLUC committed
        <mat-sidenav-container class="example-container">
            <mat-sidenav #snavLeft mode="side" opened class="panel-left" #snav [mode]="mobileMode ? 'over' : 'side'"
    
                [fixedInViewport]="mobileMode" [opened]="mobileMode ? false : true" autoFocus="false"
    
                style="overflow-x:hidden;" [ngStyle]="{'width': mobileMode ? '80%' : '350px'}">
                <header-panel [snavLeft]="snav"></header-panel>
    
                <menu-shortcut></menu-shortcut>
                <menu-nav></menu-nav>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                <basket-home *ngIf="homeData" #basketHome [homeData]="homeData" [snavL]="snav"
                    [currentBasketInfo]="currentBasketInfo"></basket-home>
    
                <mat-divider></mat-divider>
            </mat-sidenav>
            <mat-sidenav-content>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                <div class="bg-head">
    
                    <div class="bg-head-title" [class.customContainerRight]="mobileMode">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        <div class="bg-head-title-label">
    
                            <header-left [snavLeft]="snav"></header-left>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        </div>
                        <div class="bg-head-title-tool">
    
                           <header-right></header-right>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        </div>
    
                    <div class="bg-head-content" [class.fullContainer]="mobileMode">
                        <app-filters-tool style="flex:1;overflow-x: auto;overflow-y: hidden;" #filtersTool [currentBasketInfo]="currentBasketInfo"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                            [listProperties]="this.listProperties" [snavR]="snav2" [totalRes]="allResInBasket.length"
                            [selectedRes]="selectedRes" (toggleAllRes)="toggleAllRes($event)"
                            (refreshEventAfterAction)="refreshDaoAfterAction()" (refreshEvent)="refreshDao()">
                        </app-filters-tool>
                    </div>
                </div>
    
                <div class="container" [class.fullContainer]="mobileMode">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                    <div class="container-content">
                        <div class="example-loading-shade" *ngIf="isLoadingResults">
                            <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
                        </div>
                        <div class="table-head">
                            <div class="table-head-result">
                                <mat-checkbox color="primary"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                    [checked]="selectedRes.length == allResInBasket.length && selectedRes.length > 0"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                    [indeterminate]="selectedRes.length > 0 && selectedRes.length < allResInBasket.length"
                                    style="margin: 10px;padding-right: 10px;" title="{{lang.selectAllResInBasket}}"
                                    (change)="toggleAllRes($event)"></mat-checkbox>&nbsp;{{allResInBasket.length}}
                                {{lang.records | ucfirst}}&nbsp;<small
                                    *ngIf="selectedRes.length > 0">({{selectedRes.length}}
                                    {{lang.selected}})</small>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                            <div class="table-head-tool">
                                <span>
                                    <app-actions-list #actionsList (triggerEvent)="refreshDaoAfterAction()"
                                        [contextMode]="false" [totalRes]="allResInBasket.length" [selectedRes]="selectedRes"
                                        [currentBasketInfo]="currentBasketInfo"></app-actions-list>
                                </span>
                                <span>
                                    <app-tools-list #actionsList [selectedRes]="selectedRes"
                                        [currentBasketInfo]="currentBasketInfo"></app-tools-list>
                                </span>
                                <span>
                                    <mat-paginator #paginatorResultList [length]="resultsLength" [pageSize]="10"
                                        class="paginatorResultList"></mat-paginator>
                                </span>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                        <div style="height:90%;overflow:auto;position:absolute;width:100%;">
                            <table #tableBasketListSort="matSort" mat-table [dataSource]="data" matSort
                                matSortActive="res_id" matSortDisableClear matSortDirection="asc" style="width:100%;">
    
                                <ng-container matColumnDef="res_id">
                                    <td mat-cell *matCellDef="let row"
                                        style="padding:0;border-top: solid 1px rgba(0, 0, 0, 0.12);"
                                        [class.selected-data]="row.checked">
    
                                        <div *ngIf="!snav2.opened && !mobileMode && row.display.length > 0" class="sub-info">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                            <span class="sub-info-data" [class]="data.cssClasses.join(' ')"
                                                *ngFor="let data of row.display" style="flex:1;white-space: pre;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        padding-left: 5px;
                                        padding-right: 5px;">
                                                <ng-container *ngIf="data.value == 'getCreationAndProcessLimitDates'">
                                                    <ng-container *ngIf="row.closing_date != lang.undefined">
                                                        <i class="fa fa-lock" title="{{lang.closingDate}}"></i>&nbsp;<span
                                                            [innerHTML]="row.closing_date | timeAgo"
                                                            title='{{row.closing_date | date : "le dd/MM/y à HH:mm"}}'></span>
                                                    </ng-container>
                                                    <ng-container *ngIf="row.closing_date == lang.undefined">
                                                        <i class="fa fa-calendar"
                                                            title="{{lang.creationDate}}"></i>&nbsp;<span
                                                            [innerHTML]="data.displayValue.creationDate | timeAgo"
                                                            title='{{data.displayValue.creationDate | date : "le dd/MM/y à HH:mm"}}'></span>
                                                        - <i class="fa fa-stopwatch"
                                                            title="{{lang.processLimitDate}}"></i>&nbsp;<span
                                                            [innerHTML]="data.displayValue.processLimitDate | timeLimit"
                                                            title='{{data.displayValue.processLimitDate | date : "le dd/MM/y à HH:mm"}}'></span>
                                                    </ng-container>
                                                </ng-container>
                                                <ng-container *ngIf="data.icon != ''">
                                                    <i class="fa {{data.icon}}" title="{{data.label}}"></i>
                                                    &nbsp;
                                                </ng-container>
                                                <ng-container *ngIf="data.value == 'getCategory'">
                                                    <span *ngIf="!lang[data.displayValue]" style="opacity: 0.5"
                                                        title="id: {{data.displayValue}}">_UNDEFINED</span>
                                                    <span *ngIf="lang[data.displayValue]"
                                                        title="{{lang[data.displayValue]}}">{{lang[data.displayValue]}}</span>
                                                </ng-container>
                                                <ng-container
                                                    *ngIf="data.value != 'getCategory' && data.value != 'getCreationAndProcessLimitDates'">
                                                    <span *ngIf="!data.value.includes('Date')" title="{{data.displayTitle}}"
                                                        [innerHTML]="data.displayValue | shorten: 30: '...'"></span>
                                                    <span *ngIf="data.value.includes('Date')"
                                                        [innerHTML]="data.displayValue | timeAgo"></span>
                                                </ng-container>
                                            </span>
                                        </div>
                                        <div class="main-info">
                                            <span style="width:50px;">
                                                <mat-checkbox color="primary" [checked]="row.checked"
                                                    (change)="toggleRes($event,row)" (click)="$event.stopPropagation();">
                                                </mat-checkbox>
                                            </span>
    
                                            <span *ngIf="!mobileMode" class="main-info-status">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                <mat-icon [ngStyle]="{'color': row.priorityColor}" color="primary"
                                                    class="{{row.statusImage.charAt(0)}}{{row.statusImage.charAt(1)}} {{row.statusImage}} {{row.statusImage.charAt(0)}}{{row.statusImage.charAt(1)}}-2x">
                                                </mat-icon>
                                            </span>
    
                                            <span *ngIf="!mobileMode" class="main-info-data" style="width:200px;text-align:center;">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                <ng-container
                                                    *ngIf="row.alt_identifier == lang.undefined && row.barcode != lang.undefined">
                                                    <span style="color: rgba(0,0,0,0.4);font-size: 90%;"><i
                                                            title="{{lang.barcode}}" class="fas fa-barcode"></i>
                                                        {{row.barcode}}</span>
                                                </ng-container>
                                                <ng-container *ngIf="row.barcode == lang.undefined">
                                                    {{row.alt_identifier}}
                                                </ng-container>
                                            </span>
                                            <span class="main-info-data" style="font-weight:bold;flex:1;"
                                                [class.undefined]="row.subject == lang.undefined"
                                                title="{{row.subject}}">{{row.subject | shorten: 150: '...'}}</span>
                                            <span class="main-info-action">
                                                <button mat-icon-button title="{{lang.notes}}"
    
                                                    (click)="$event.stopPropagation();togglePanel('note',row)"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                    [class.noData]="row.countNotes == 0">
                                                    <mat-icon matBadgeHidden="{{row.countNotes == 0}}" fontSet="fas"
                                                        matBadge="{{row.countNotes}}" fontIcon="fa-comments fa-2x">
                                                    </mat-icon>
                                                </button>
                                                <button mat-icon-button title="{{lang.attachments}}"
                                                    (click)="$event.stopPropagation();openAttachSheet(row)"
                                                    [class.noData]="row.countAttachments == 0">
                                                    <mat-icon matBadgeHidden="{{row.countAttachments == 0}}" fontSet="fas"
                                                        matBadge="{{row.countAttachments}}" fontIcon="fa-paperclip fa-2x">
                                                    </mat-icon>
                                                </button>
                                                <button mat-icon-button title="{{lang.diffusionList}}"
    
                                                    (click)="$event.stopPropagation();togglePanel('diffusion',row)">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                                                    <mat-icon fontSet="fas" fontIcon="fa-sitemap fa-2x"></mat-icon>
                                                </button>
                                                <button mat-icon-button title="{{lang.linkDetails}}"
                                                    (click)="$event.stopPropagation();goToDetail(row);"
                                                    (mouseenter)="viewThumbnail(row);" (mouseleave)="closeThumbnail();">
                                                    <mat-icon fontSet="fas" fontIcon="fa-info-circle fa-2x"></mat-icon>
                                                </button>
                                            </span>
                                        </div>
                                    </td>
                                </ng-container>
                                <tr mat-row *matRowDef="let row; columns: displayedColumnsBasket;"
                                    (contextmenu)="open($event,row);"></tr>
                            </table>
                        </div>
                        <div class="table-head">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                </div>
    
            </mat-sidenav-content>
    
            <mat-sidenav #snav2 [fixedInViewport]="mobileQuery.matches" position='end'
                [opened]="mobileQuery.matches ? false : false" [mode]="mobileMode ? 'over' : 'side'" class="panel-right" style="overflow-x:hidden;"
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                [class.docView]="!filtersListService.filterMode" [ngStyle]="{'width': mobileMode ? '80%' : '30%'}"
                autoFocus="false">
                <div *ngIf="innerHtml && !filtersListService.filterMode" [matTooltip]="currentChrono"
                    [innerHTML]="innerHtml" style="height: 100%;overflow: hidden;"></div>
    
                <div style="display:flex;">
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                    <button mat-icon-button (click)="snav2.close()" style="font-size: 20px;color:#666;">
    
                        <mat-icon class="fa fa-arrow-right"></mat-icon>
                    </button>
                </div>
    
    Alex ORLUC's avatar
    Alex ORLUC committed
                <app-panel-list #appPanelList (refreshBadgeNotes)="refreshBadgeNotes($event)"></app-panel-list>
    
                <mat-divider></mat-divider>
            </mat-sidenav>
        </mat-sidenav-container>
    
        <app-actions-list (triggerEvent)="refreshDaoAfterAction()" #actionsListContext [contextMode]="true"
            [totalRes]="allResInBasket.length" [selectedRes]="selectedRes" [currentBasketInfo]="currentBasketInfo">
        </app-actions-list>