basket-list.component.html 20.1 KB
Newer Older
1
    <mat-sidenav-container class="maarch-container">
2
        <mat-sidenav-content>
3
            <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>
Alex ORLUC's avatar
Alex ORLUC committed
4
            <div class="bg-head">
5
                <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
Alex ORLUC's avatar
Alex ORLUC committed
6
                    <div class="bg-head-title-label">
7
                        <app-header-left></app-header-left>
Alex ORLUC's avatar
Alex ORLUC committed
8
9
                    </div>
                    <div class="bg-head-title-tool">
10
                       <app-header-right></app-header-right>
Alex ORLUC's avatar
Alex ORLUC committed
11
                    </div>
12
                </div>
13
                <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
14
                    <app-filters-tool style="flex:1;overflow-x: auto;overflow-y: hidden;" #filtersTool
15
                        [listProperties]="this.listProperties" [totalRes]="allResInBasket.length"
16
                        [selectedRes]="selectedRes" [routeDatas]="'/rest/resourcesList/users/' + this.currentBasketInfo.ownerId + '/groups/' + currentBasketInfo.groupId + '/baskets/' + currentBasketInfo.basketId + '/filters'" (toggleAllRes)="toggleAllRes($event)"
17
                        (refreshEventAfterAction)="refreshDaoAfterAction()" (refreshEvent)="refreshDao()" [title]="'lang.searchMailInBasket' | translate">
Alex ORLUC's avatar
Alex ORLUC committed
18
19
20
                    </app-filters-tool>
                </div>
            </div>
21
            <div class="container" [class.fullContainer]="appService.getViewMode()">
Alex ORLUC's avatar
Alex ORLUC committed
22
23
24
25
26
27
28
                <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
29
                                [checked]="selectedRes.length == allResInBasket.length && selectedRes.length > 0"
Alex ORLUC's avatar
Alex ORLUC committed
30
                                [indeterminate]="selectedRes.length > 0 && selectedRes.length < allResInBasket.length"
31
                                style="margin: 10px;padding-right: 10px;" title="{{'lang.selectAllResInBasket' | translate}}"
Alex ORLUC's avatar
Alex ORLUC committed
32
                                (change)="toggleAllRes($event)"></mat-checkbox>&nbsp;{{allResInBasket.length}}
33
                            {{'lang.records' | translate | ucfirst}}&nbsp;<small
34
                                *ngIf="selectedRes.length > 0">- {{selectedRes.length}}
35
                                {{'lang.selected' | translate}}</small>
36
                        </div>
Alex ORLUC's avatar
Alex ORLUC committed
37
                        <div class="table-head-tool">
38
                            <span style="position: relative;">
39
40
                                <mat-paginator #paginatorResultList [length]="resultsLength" [pageSizeOptions]="[10, 25, 50, 100, 150]"
                                    class="paginatorResultList"></mat-paginator>
41
                                <app-select-page [paginator]="paginatorResultList"></app-select-page>
Alex ORLUC's avatar
Alex ORLUC committed
42
                            </span>
Alex ORLUC's avatar
fix css    
Alex ORLUC committed
43
                            <span>
Alex ORLUC's avatar
Alex ORLUC committed
44
45
46
                                <app-tools-list #actionsList [selectedRes]="selectedRes"
                                    [currentBasketInfo]="currentBasketInfo"></app-tools-list>
                            </span>
Alex ORLUC's avatar
fix css    
Alex ORLUC committed
47
                            <span>
48
49
                                <app-actions-list #actionsList (refreshEvent)="refreshDao()"
                                    [contextMode]="false" [totalRes]="allResInBasket.length" [selectedRes]="selectedRes"
50
                                    [currentBasketInfo]="currentBasketInfo" [currentResource]="currentResource" (refreshPanelFolders)="foldersService.getFolders()"></app-actions-list>
Alex ORLUC's avatar
Alex ORLUC committed
51
                            </span>
52
53
                        </div>
                    </div>
Alex ORLUC's avatar
Alex ORLUC committed
54
                    <div style="height:90%;overflow:auto;position:absolute;width:100%;">
55
                        <table cdkDropList id="document-list" [cdkDropListConnectedTo]="listTodrag()" [cdkDropListData]="data" #tableBasketListSort="matSort" mat-table [dataSource]="data" matSort
56
                            matSortActive="resId" matSortDisableClear matSortDirection="asc" style="width:100%;" [cdkDropListDisabled]="dragInit || appService.getViewMode()">
Alex ORLUC's avatar
Alex ORLUC committed
57

58
                            <ng-container matColumnDef="resId">
Alex ORLUC's avatar
Alex ORLUC committed
59
                                <td mat-cell *matCellDef="let row"
60
61
                                    style="padding:0;border-top: solid 1px rgba(0, 0, 0, 0.12);"
                                    [class.selected-data]="row.checked">
62
                                    <div *ngIf="!snav2.opened && !appService.getViewMode() && row.display.length > 0" class="sub-info column-{{templateColumns}}-list">
Alex ORLUC's avatar
Alex ORLUC committed
63
64
65
66
67
                                        <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;
68
                                    padding-right: 5px;" [class.hasEvent]="data.event && data.displayValue !== ('lang.undefined' | translate)" (click)="launchEventSubData(data, row)">
69
70
                                            <ng-container *ngIf="['getCreationDate', 'getProcessLimitDate', 'getCreationAndProcessLimitDates'].indexOf(data.value) > -1">
                                                <ng-container *ngIf="data.value === 'getCreationAndProcessLimitDates' && row.closing_date != ('lang.undefined' | translate)">
71
72
73
74
75
                                                    <i class="fa fa-calendar"
                                                        title="{{'lang.creationDate' | translate}}"></i>&nbsp;<span
                                                        [innerHTML]="data.displayValue.creationDate | timeAgo"
                                                        title='{{data.displayValue.creationDate | fullDate}}'></span>
                                                    - <i class="fa fa-lock" title="{{'lang.closingDate' | translate}}"></i>&nbsp;<span
Alex ORLUC's avatar
Alex ORLUC committed
76
                                                        [innerHTML]="row.closing_date | timeAgo"
77
                                                        title='{{row.closing_date | fullDate}}'></span>
Alex ORLUC's avatar
Alex ORLUC committed
78
                                                </ng-container>
79
                                                <ng-container *ngIf="row.closing_date == ('lang.undefined' | translate)">
80
81
                                                    <ng-container *ngIf="data.value === 'getCreationAndProcessLimitDates'">
                                                        <i class="fa fa-calendar"
82
                                                        title="{{'lang.creationDate' | translate}}"></i>&nbsp;<span
Alex ORLUC's avatar
Alex ORLUC committed
83
                                                        [innerHTML]="data.displayValue.creationDate | timeAgo"
84
                                                        title='{{data.displayValue.creationDate | fullDate}}'></span>
Alex ORLUC's avatar
Alex ORLUC committed
85
                                                    - <i class="fa fa-stopwatch"
86
                                                        title="{{'lang.processLimitDate' | translate}}"></i>&nbsp;<span
Alex ORLUC's avatar
Alex ORLUC committed
87
                                                        [innerHTML]="data.displayValue.processLimitDate | timeLimit"
88
                                                        title='{{data.displayValue.processLimitDate | fullDate}}'></span>
89
90
91
92
93
94
95
96
97
98
99
100
101
                                                    </ng-container>
                                                    <ng-container *ngIf="data.value === 'getCreationDate'">
                                                        <i class="fa {{data.icon}}"
                                                            title="{{'lang.getCreationDate' | translate}}"></i>&nbsp;<span
                                                            [innerHTML]="data.displayValue | timeAgo" style="margin-left: 3px;"
                                                            title='{{data.displayValue | fullDate}}'></span>
                                                    </ng-container>
                                                    <ng-container *ngIf="data.value === 'getProcessLimitDate'">
                                                        <i class="fa {{data.icon}}"
                                                            title="{{'lang.getProcessLimitDate' | translate}}"></i>&nbsp;<span
                                                            [innerHTML]="data.displayValue | timeLimit" style="margin-left: 3px;"
                                                            title='{{data.displayValue | fullDate}}'></span>
                                                    </ng-container>
Alex ORLUC's avatar
Alex ORLUC committed
102
103
                                                </ng-container>
                                            </ng-container>
104
                                            <ng-container *ngIf="data.icon != '' && ['getCreationDate', 'getProcessLimitDate'].indexOf(data.value) === -1">
Alex ORLUC's avatar
Alex ORLUC committed
105
106
107
108
                                                <i class="fa {{data.icon}}" title="{{data.label}}"></i>
                                                &nbsp;
                                            </ng-container>
                                            <ng-container *ngIf="data.value == 'getCategory'">
109
                                                <span *ngIf="!('lang.' + data.displayValue | translate)" style="opacity: 0.5"
110
                                                    title="id: {{data.displayValue}}">{{'lang.undefined' | translate}}</span>
111
                                                <span *ngIf="('lang.' + data.displayValue | translate)"
112
                                                    title="{{'lang.' + data.displayValue | translate}}">{{'lang.' + data.displayValue | translate}}</span>
Alex ORLUC's avatar
Alex ORLUC committed
113
114
                                            </ng-container>
                                            <ng-container
115
                                                *ngIf="data.value != 'getCategory' && data.value !== 'getCreationDate' && data.value !== 'getProcessLimitDate' && data.value != 'getCreationAndProcessLimitDates'">
Alex ORLUC's avatar
Alex ORLUC committed
116
                                                <span *ngIf="!data.value.includes('Date')" title="{{data.displayTitle}}"
117
                                                    [innerHTML]="data.displayValue"></span>
Alex ORLUC's avatar
Alex ORLUC committed
118
119
120
121
122
123
                                                <span *ngIf="data.value.includes('Date')"
                                                    [innerHTML]="data.displayValue | timeAgo"></span>
                                            </ng-container>
                                        </span>
                                    </div>
                                    <div class="main-info">
Alex ORLUC's avatar
fix css    
Alex ORLUC committed
124
                                        <span style="width:50px;height: 16px;">
Alex ORLUC's avatar
Alex ORLUC committed
125
126
127
128
                                            <mat-checkbox color="primary" [checked]="row.checked"
                                                (change)="toggleRes($event,row)" (click)="$event.stopPropagation();">
                                            </mat-checkbox>
                                        </span>
129
130
                                        <button mat-icon-button (click)="$event.stopPropagation();toggleMailTracking(row)" style="margin-left: -25px;"
                                            class="followIcon"
131
                                            [title]="row.mailTracking === true ? ('lang.untrackThisMail' | translate) : ('lang.trackThisMail' | translate)">
132
133
                                            <mat-icon [ngClass]="[row.mailTracking === true ? 'fas fa-star' : 'far fa-star']"></mat-icon>
                                        </button>
134
                                        <span *ngIf="!appService.getViewMode()" style="cursor:pointer;" class="main-info-status" (click)="launch(defaultAction,row);">
135
                                            <mat-icon *ngIf="row.isLocked !== true" title="{{row.statusLabel}}" [ngStyle]="{'color': row.priorityColor}" color="primary"
Alex ORLUC's avatar
Alex ORLUC committed
136
137
                                                class="{{row.statusImage.charAt(0)}}{{row.statusImage.charAt(1)}} {{row.statusImage}} {{row.statusImage.charAt(0)}}{{row.statusImage.charAt(1)}}-2x">
                                            </mat-icon>
138
139
                                            <span *ngIf="row.confidentiality === 'Y'" class="watermark">{{'lang.confidential' | translate}}</span>
                                            <mat-icon *ngIf="row.isLocked === true" title="{{'lang.warnLockResInProgress' | translate}} : {{row.locker}}" style="color: red;" class="fa fa-lock fa-2x">
140
                                            </mat-icon>
Alex ORLUC's avatar
Alex ORLUC committed
141
                                        </span>
142
                                        <span *ngIf="!appService.getViewMode()" class="main-info-data" style="width:200px;text-align:center;cursor:pointer;" (click)="launch(defaultAction,row);">
Alex ORLUC's avatar
Alex ORLUC committed
143
                                            <ng-container
144
                                                *ngIf="row.chrono == ('lang.undefined' | translate) && row.barcode != ('lang.undefined' | translate)">
Alex ORLUC's avatar
Alex ORLUC committed
145
                                                <span style="color: rgba(0,0,0,0.4);font-size: 90%;"><i
146
                                                        title="{{'lang.barcode' | translate}}" class="fas fa-barcode"></i>
Alex ORLUC's avatar
Alex ORLUC committed
147
148
                                                    {{row.barcode}}</span>
                                            </ng-container>
149
                                            <ng-container *ngIf="row.chrono != ('lang.undefined' | translate)">
150
                                                {{row.chrono}}
Alex ORLUC's avatar
Alex ORLUC committed
151
152
                                            </ng-container>
                                        </span>
153
                                        <span class="main-info-data" style="font-weight:bold;flex:1;cursor:pointer;"
154
                                            [class.undefined]="row.subject == ('lang.undefined' | translate)"
155
                                            title="{{row.subject}}" (click)="launch(defaultAction,row);">{{row.subject | shorten: 150: '...'}}</span>
Alex ORLUC's avatar
Alex ORLUC committed
156
                                        <span class="main-info-action">
157
                                            <button mat-icon-button title="{{'lang.notes' | translate}}"
158
                                                (click)="$event.stopPropagation();togglePanel('note',row)"
Alex ORLUC's avatar
Alex ORLUC committed
159
160
                                                [class.noData]="row.countNotes == 0">
                                                <mat-icon matBadgeHidden="{{row.countNotes == 0}}" fontSet="fas"
161
                                                    matBadge="{{row.countNotes}}" fontIcon="fa-comments fa-2x" [color]="snav2.opened && row.checked && currentMode == 'note' ? 'primary' : ''">
Alex ORLUC's avatar
Alex ORLUC committed
162
163
                                                </mat-icon>
                                            </button>
164
                                            <button mat-icon-button title="{{'lang.attachments' | translate}}"
165
                                                (click)="$event.stopPropagation();togglePanel('attachment',row)"
Alex ORLUC's avatar
Alex ORLUC committed
166
167
                                                [class.noData]="row.countAttachments == 0">
                                                <mat-icon matBadgeHidden="{{row.countAttachments == 0}}" fontSet="fas"
168
                                                    matBadge="{{row.countAttachments}}" fontIcon="fa-paperclip fa-2x" [color]="snav2.opened && row.checked && currentMode == 'attachment' ? 'primary' : ''">
Alex ORLUC's avatar
Alex ORLUC committed
169
170
                                                </mat-icon>
                                            </button>
171
                                            <button mat-icon-button title="{{'lang.diffusionList' | translate}}"
172
                                                (click)="$event.stopPropagation();togglePanel('diffusion',row)">
173
                                                <mat-icon fontSet="fas" fontIcon="fa-sitemap fa-2x" [color]="snav2.opened && row.checked && currentMode == 'diffusion' ? 'primary' : ''"></mat-icon>
Alex ORLUC's avatar
Alex ORLUC committed
174
                                            </button>
175
                                            <button mat-icon-button title="{{row.hasDocument ? ('lang.viewResource' | translate) : ('lang.noDocument' | translate)}}" (click)="$event.stopPropagation();viewDocument(row)"
176
177
                                                (mouseenter)="viewThumbnail(row);" (mouseleave)="closeThumbnail();"
                                                [disabled]="!row.hasDocument">
178
                                                <mat-icon class="fa" [ngClass]="[row.hasDocument ? 'fa-eye' : 'fa-eye-slash']"></mat-icon>
179
                                            </button>
180
                                            <button mat-icon-button title="{{'lang.linkDetails' | translate}}"
181
                                                (click)="$event.stopPropagation();goToDetail(row);">
Alex ORLUC's avatar
Alex ORLUC committed
182
183
184
185
                                                <mat-icon fontSet="fas" fontIcon="fa-info-circle fa-2x"></mat-icon>
                                            </button>
                                        </span>
                                    </div>
186
                                    <div *ngIf="displayFolderTags && row.folders !== undefined && row.folders.length > 0" class="folder-info">
187
                                        <span class="badge badge-folder" *ngFor="let folder of row.folders | sortBy : 'label'" (click)="$event.stopPropagation();goToFolder(folder);" title="{{'lang.goToFolder' | translate}} : {{folder.label}}"><i class="fa fa-folder"></i> {{folder.label}}</span>
188
                                    </div>
Alex ORLUC's avatar
Alex ORLUC committed
189
190
191
                                </td>
                            </ng-container>
                            <tr mat-row *matRowDef="let row; columns: displayedColumnsBasket;"
192
                                (contextmenu)="open($event,row);" class="rowData" [class.locked]="row.isLocked == true" cdkDrag (cdkDragStarted)="selectSpecificRes(row);" [cdkDragData]="row" >
193
                                <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
194
                                <div class="dragPreview" *cdkDragPreview><i class="fas fa-envelope-open-text fa-2x"></i><br/>{{'lang.classifyInFolder' | translate}} : <b>{{row.chrono}}</b></div>
195
                            </tr>
Alex ORLUC's avatar
Alex ORLUC committed
196
197
198
                        </table>
                    </div>
                    <div class="table-head">
199
200
                    </div>
                </div>
Alex ORLUC's avatar
Alex ORLUC committed
201
            </div>
202
        </mat-sidenav-content>
203
204
205
        <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%'}"
Alex ORLUC's avatar
Alex ORLUC committed
206
207
208
            autoFocus="false">
            <div *ngIf="innerHtml && !filtersListService.filterMode" [matTooltip]="currentChrono"
                [innerHTML]="innerHtml" style="height: 100%;overflow: hidden;"></div>
209

Alex ORLUC's avatar
fix css    
Alex ORLUC committed
210
211
                <div style="display:flex;position: sticky;top: 0px;z-index: 2;">
                    <button mat-icon-button (click)="snav2.close()" style="font-size: 20px;color:#666;">
212
213
214
                    <mat-icon class="fa fa-arrow-right"></mat-icon>
                </button>
            </div>
215
            <app-panel-list #appPanelList (refreshBadgeNotes)="refreshBadgeNotes($event)" (refreshBadgeAttachments)="refreshBadgeAttachments($event)"></app-panel-list>
216
217
218
            <mat-divider></mat-divider>
        </mat-sidenav>
    </mat-sidenav-container>
219
    <app-actions-list (refreshEvent)="refreshDao()" (refreshEventAfterAction)="refreshDaoAfterAction()" #actionsListContext [contextMode]="true"
220
        [totalRes]="allResInBasket.length" [selectedRes]="selectedRes" [currentBasketInfo]="currentBasketInfo" (refreshPanelFolders)="foldersService.getFolders()">
221
    </app-actions-list>