entities-administration.component.html 34.7 KB
Newer Older
1
<mat-sidenav-container autosize class="maarch-container">
2
    <ng-template #adminMenuTemplate>
3
        <mat-nav-list>
4
            <h3 mat-subheader>{{'lang.actions' | translate}}</h3>
5
6
7
            <a mat-list-item (click)="snav2.open();prepareEntityAdd()" *ngIf="!creationMode">
                <mat-icon color="primary" mat-list-icon class="fa fa-plus"></mat-icon>
                <p mat-line>
8
                    {{'lang.add' | translate}}
9
10
                </p>
            </a>
11
12
13
            <a mat-list-item (click)="openExportModal()">
                <mat-icon color="primary" mat-list-icon class="fas fa-file-export"></mat-icon>
                <p mat-line>
14
                    {{'lang.toExport' | translate}}
15
16
                </p>
            </a>
17
18
19
        </mat-nav-list>
        <mat-divider></mat-divider>
        <mat-nav-list>
20
            <h3 mat-subheader>{{'lang.additionalRoles' | translate}}</h3>
21
22
23
            <ng-container *ngFor="let role of listTemplateRoles">
                <a mat-list-item disableRipple="true" *ngIf="role.id != 'dest' && role.id != 'cc'">
                    <mat-icon color="primary" mat-list-icon>
24
25
                        <mat-slide-toggle [checked]="role.available" color="primary" (click)="toggleRole(role);false">
                        </mat-slide-toggle>
26
27
28
                    </mat-icon>
                    <p mat-line [ngStyle]="{'opacity': role.available ? '' : '0.5'}" (click)="toggleRole(role);false">
                        {{role.label}}
29
30
                    </p>
                </a>
31
32
            </ng-container>
        </mat-nav-list>
33
    </ng-template>
34
35
36
37
    <mat-sidenav-content>
        <div class="bg-head">
            <div class="bg-head-title" [class.customContainerRight]="appService.getViewMode()">
                <div class="bg-head-title-label">
38
                    <app-header-left></app-header-left>
39
40
                </div>
                <div class="bg-head-title-tool">
41
                    <app-header-right></app-header-right>
42
                </div>
43
            </div>
44
45
46
47
48
49
50
51
52
            <div class="bg-head-content" [class.fullContainer]="appService.getViewMode()">
            </div>
        </div>
        <div class="container" [class.fullContainer]="appService.getViewMode()">
            <div class="container-content">
                <div *ngIf="loading" style="display:flex;height:100%;">
                    <mat-spinner style="margin:auto;"></mat-spinner>
                </div>
                <mat-card *ngIf="!loading" class="card-app-content">
53

54
                    <mat-form-field>
55
                        <input matInput id="jstree_search" name="jstree_search" type="text"
56
                            placeholder="{{'lang.searchEntities' | translate}}">
57
58
                        <button mat-button *ngIf="!emptyField" matSuffix mat-icon-button aria-label="Clear"
                            (click)="clearFilter()" [title]="'lang.clearFilter' | translate">
59
60
                            <mat-icon class="fas fa-times" style="color:#B3B3B3"></mat-icon>
                        </button>
61
62
                        <mat-hint *ngIf="!creationMode">{{'lang.entityTreeInfo' | translate}}</mat-hint>
                        <mat-hint *ngIf="creationMode">{{'lang.entityTreeInfoCreation' | translate}}</mat-hint>
63
64
                    </mat-form-field>
                    <div id="jstree"></div>
65
                    <div class="mat-paginator"
66
                        style="min-height:48px;display: flex;justify-content: end;align-items: center;padding-right: 20px;">
67
                        {{entities.length}} {{'lang.entities' | translate}}</div>
68
69
70
71
72
                </mat-card>
            </div>
        </div>
    </mat-sidenav-content>

73
74
    <mat-sidenav #snav2 [mode]="appService.getViewMode() ? 'over' : 'side'" [fixedInViewport]="appService.getViewMode()"
        fixedTopGap="56" position='end' [opened]="false" class="col-md-5 col-xs-11">
75
76
        <mat-nav-list>
            <mat-tab-group>
77
78
                <mat-tab
                    [label]="creationMode ? ('lang.createNewEntity' | translate) : ('lang.informations' | translate)">
79
80
81
82
                    <form class="form-horizontal" #entityForm="ngForm" style="overflow:hidden;">
                        <div class="form-group">
                            <div class="col-sm-12">
                                <mat-form-field>
83
                                    <mat-select id="parent_entity_id" name="parent_entity_id"
84
85
                                        title="{{'lang.isLinkedTo' | translate}}"
                                        placeholder="{{'lang.isLinkedTo' | translate}}"
86
87
                                        [(ngModel)]="currentEntity.parent_entity_id"
                                        (selectionChange)="selectParentEntity(currentEntity.parent_entity_id)">
88
                                        <mat-option value="">
89
90
                                            <i style="opacity:0.5;text-align:center;">- {{'lang.noEntity' | translate}}
                                                -</i>
91
92
                                        </mat-option>
                                        <ng-container *ngFor="let entity of entities | sortBy : 'entity_label'">
93
94
                                            <mat-option [value]="entity.entity_id"
                                                *ngIf="(!entity.state.disabled && entity.entity_id != currentEntity.entity_id) || currentEntity.parent_entity_id == entity.entity_id">
95
                                                {{entity.entity_label}}
96
                                            </mat-option>
97
98
99
100
                                        </ng-container>
                                    </mat-select>
                                </mat-form-field>
                                <mat-form-field>
101
102
103
104
                                    <mat-select id="entity_type" name="entity_type"
                                        title="{{'lang.entityType' | translate}}"
                                        placeholder="{{'lang.entityType' | translate}}"
                                        [(ngModel)]="currentEntity.entity_type" maxlength="32" required>
105
106
107
108
109
                                        <mat-option *ngFor="let entity_type of entityTypeList" [value]="entity_type.id">
                                            {{entity_type.label}}
                                        </mat-option>
                                    </mat-select>
                                </mat-form-field>
110
                            </div>
111
112
113
114
                        </div>
                        <div class="form-group" *ngIf="!creationMode">
                            <div class="col-sm-12">
                                <mat-form-field>
115
                                    <input matInput [(ngModel)]="currentEntity.id" name="id" id="id"
116
117
                                        title="{{'lang.technicalId' | translate}}" type="text"
                                        placeholder="{{'lang.technicalId' | translate}}" disabled>
118
                                </mat-form-field>
119
                            </div>
120
121
122
123
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <mat-form-field>
124
                                    <input matInput [(ngModel)]="currentEntity.entity_id" required name="entity_id"
125
126
127
                                        id="entity_id" title="{{'lang.id' | translate}}" type="text"
                                        placeholder="{{'lang.id' | translate}}" [disabled]="!creationMode"
                                        maxlength="32" pattern="^[\w-]*$">
128
                                </mat-form-field>
129
                            </div>
130
131
132
133
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <mat-form-field>
134
                                    <input matInput [(ngModel)]="currentEntity.entity_label" required
135
136
                                        name="entity_label" id="entity_label" title="{{'lang.label' | translate}}"
                                        type="text" placeholder="{{'lang.label' | translate}}" maxlength="255">
137
                                </mat-form-field>
138
                            </div>
139
140
141
142
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <mat-form-field>
143
                                    <input matInput [(ngModel)]="currentEntity.short_label" required name="short_label"
144
145
                                        id="short_label" title="{{'lang.shortLabel' | translate}}" type="text"
                                        placeholder="{{'lang.shortLabel' | translate}}" maxlength="50">
146
                                </mat-form-field>
147
                            </div>
148
149
150
151
                        </div>
                        <div class="form-group">
                            <div class="col-sm-12">
                                <mat-form-field>
152
                                    <input matInput [(ngModel)]="currentEntity.email" name="email" id="email"
153
154
                                        title="{{'lang.email' | translate}}" type="text"
                                        placeholder="{{'lang.email' | translate}}" maxlength="255"
155
                                        pattern="(^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$)">
156
                                </mat-form-field>
157
                            </div>
158
159
160
161
162
                        </div>
                        <mat-accordion>
                            <mat-expansion-panel>
                                <mat-expansion-panel-header>
                                    <mat-panel-title>
163
                                        {{'lang.address' | translate}}
164
165
                                    </mat-panel-title>
                                </mat-expansion-panel-header>
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
                                <div style="display: flex;align-items: center;">
                                    <div style="flex: 1;">
                                        <mat-form-field appearance='outline' class="smallInput">
                                            <button mat-button matSuffix [matMenuTriggerFor]="menuDep"
                                                (click)="$event.stopPropagation();"
                                                [title]="'lang.targetDepartment' | translate">
                                                {{addressBANCurrentDepartment}}&nbsp;<i class="fa fa-chevron-down"></i>
                                            </button>
                                            <mat-menu #menuDep="matMenu">
                                                <button mat-menu-item *ngFor="let dep of departmentList"
                                                    (click)="addressBANCurrentDepartment = dep">{{dep}}</button>
                                            </mat-menu>
                                            <mat-icon color="primary" class="fa fa-search" matPrefix
                                                style="font-size: 15px;"></mat-icon>
                                            <input type="text" #autoCompleteInput
                                                [placeholder]="'lang.searchAddressBan' | translate" matInput
                                                [formControl]="addressBANControl" [matAutocomplete]="auto"
                                                (click)="$event.stopPropagation()"
                                                (focus)="resetAutocompleteAddressBan()" maxlength="128">
                                            <mat-autocomplete #auto="matAutocomplete"
                                                (optionSelected)="selectAddressBan($event)">
                                                <ng-container *ngIf="addressBANResult.length > 0 && !addressBANLoading">
                                                    <mat-option
                                                        *ngFor="let addressBANResult of addressBANFilteredResult | async"
                                                        [value]="addressBANResult">
                                                        {{addressBANResult.address}}
                                                    </mat-option>
                                                </ng-container>
                                                <mat-option class="autoCompleteInfoResult smallInputInfo"
                                                    *ngIf="addressBANResult.length === 0 && !addressBANLoading" disabled
                                                    [innerHTML]="addressBANInfo">
                                                </mat-option>
                                                <mat-option *ngIf="addressBANLoading" disabled>
                                                    <mat-spinner diameter="20"></mat-spinner>
                                                </mat-option>
                                            </mat-autocomplete>
                                        </mat-form-field>
                                    </div>
204
                                    <div *ngIf="!creationMode">
205
                                        <button [title]="'lang.copyRootEntityAddress' | translate" mat-icon-button
206
                                            color="primary" (click)="copyAddress()">
207
208
209
210
                                            <mat-icon class="fa fa-copy"></mat-icon>
                                        </button>
                                    </div>
                                </div>
211
                                <div class="form-group">
212
                                    <div class="col-sm-12">
213
                                        <mat-form-field>
214
215
216
217
                                            <input matInput [(ngModel)]="currentEntity.addressAdditional1"
                                                name="addressAdditional1" id="addressAdditional1"
                                                [title]="currentEntity.addressAdditional1" type="text"
                                                placeholder="{{'lang.contactsParameters_addressAdditional1' | translate}}"
218
                                                maxlength="255">
219
                                        </mat-form-field>
220
                                    </div>
221
                                    <div class="col-sm-12">
222
                                        <mat-form-field>
223
224
225
226
                                            <input matInput [(ngModel)]="currentEntity.addressNumber"
                                                name="addressNumber" id="addressNumber"
                                                [title]="currentEntity.addressNumber" type="text"
                                                placeholder="{{'lang.contactsParameters_addressNumber' | translate}}"
227
                                                maxlength="255">
228
                                        </mat-form-field>
229
                                    </div>
230
                                    <div class="col-sm-12">
231
                                        <mat-form-field>
232
233
234
235
                                            <input matInput [(ngModel)]="currentEntity.addressStreet"
                                                name="addressStreet" id="addressStreet"
                                                [title]="currentEntity.addressStreet" type="text"
                                                placeholder="{{'lang.contactsParameters_addressStreet' | translate}}"
236
                                                maxlength="255">
237
                                        </mat-form-field>
238
                                    </div>
239
                                    <div class="col-sm-12">
240
                                        <mat-form-field>
241
242
243
244
245
                                            <input matInput [(ngModel)]="currentEntity.addressAdditional2"
                                                name="addressAdditional2" id="addressAdditional2"
                                                [title]="currentEntity.addressAdditional2" type="text"
                                                placeholder="{{'lang.contactsParameters_addressAdditional2' | translate}}"
                                                maxlength="255">
246
                                        </mat-form-field>
247
                                    </div>
248
                                    <div class="col-sm-12">
249
                                        <mat-form-field>
250
251
252
253
                                            <input matInput [(ngModel)]="currentEntity.addressPostcode"
                                                name="addressPostcode" id="addressPostcode"
                                                [title]="currentEntity.addressPostcode" type="text"
                                                placeholder="{{'lang.contactsParameters_addressPostcode' | translate}}"
254
                                                maxlength="255">
255
256
                                        </mat-form-field>
                                    </div>
257
                                    <div class="col-sm-12">
258
                                        <mat-form-field>
259
260
261
262
263
264
265
266
267
268
269
270
271
                                            <input matInput [(ngModel)]="currentEntity.addressTown" name="addressTown"
                                                id="addressTown" [title]="currentEntity.addressTown" type="text"
                                                placeholder="{{'lang.contactsParameters_addressTown' | translate}}"
                                                maxlength="255">
                                        </mat-form-field>
                                    </div>
                                    <div class="col-sm-12">
                                        <mat-form-field>
                                            <input matInput [(ngModel)]="currentEntity.addressCountry"
                                                name="addressCountry" id="addressCountry"
                                                [title]="currentEntity.addressCountry" type="text"
                                                placeholder="{{'lang.contactsParameters_addressCountry' | translate}}"
                                                maxlength="255">
272
                                        </mat-form-field>
273
                                    </div>
274
                                </div>
275
276
277
278
279
280
281
                            </mat-expansion-panel>
                            <mat-expansion-panel>
                                <mat-expansion-panel-header>
                                    <mat-panel-title>
                                        {{'lang.otherInformations' | translate}}
                                    </mat-panel-title>
                                </mat-expansion-panel-header>
282
283
                                <div class="form-group">
                                    <div class="col-sm-12">
284
                                        <app-input-correspondent-group #appInputCorrespondentGroup
285
286
287
288
289
                                        [id]="currentEntity.id" [type]="'entity'"></app-input-correspondent-group>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-12">
290
                                        <mat-form-field>
291
292
                                            <textarea matInput [(ngModel)]="currentEntity.entity_full_name"
                                                name="entity_full_name" id="entity_full_name"
293
294
295
                                                placeholder="{{'lang.entityFullName' | translate}}"
                                                title="{{'lang.entityFullName' | translate}}" matTextareaAutosize
                                                matAutosizeMinRows="1" matAutosizeMaxRows="5"></textarea>
296
297
                                        </mat-form-field>
                                    </div>
298
                                </div>
299
300
301
                                <div class="form-group" *ngIf="!creationMode">
                                    <div class="col-sm-12">
                                        <mat-form-field>
302
                                            <input *ngIf="!currentEntity.canSynchronizeSiret" matInput
303
304
                                                value="Paramètre SIRET manquant"
                                                title="{{'lang.siretCode' | translate}}" type="text"
305
                                                placeholder="{{'lang.siretCode' | translate}}" maxlength="255" disabled>
306
307
                                            <input *ngIf="currentEntity.canSynchronizeSiret" matInput
                                                [(ngModel)]="currentEntity.business_id" name="business_id"
308
309
                                                id="business_id" title="{{'lang.siretCode' | translate}}" type="text"
                                                placeholder="{{'lang.siretCode' | translate}}" maxlength="255" disabled>
310
311
312
                                            <button *ngIf="currentEntity.canSynchronizeSiret" color="primary"
                                                mat-icon-button matSuffix title="Générer un numéro SIRET"
                                                (click)="addEntityToAnnuary()">
313
314
315
316
                                                <mat-icon class="fas fa-compress-arrows-alt"></mat-icon>
                                            </button>
                                        </mat-form-field>
                                    </div>
317
                                </div>
318
                                <div class="form-group">
319
                                    <div class="col-sm-12">
320
                                        <mat-form-field>
321
322
323
                                            <input matInput [(ngModel)]="currentEntity.producerService"
                                                name="producerService" id="producerService"
                                                title="{{'lang.producerService' | translate}}" type="text"
324
325
                                                placeholder="{{'lang.producerService' | translate}}" maxlength="255"
                                                pattern="^[\w-]*$">
326
327
                                        </mat-form-field>
                                    </div>
328
                                </div>
329
330
331
332
333
334
335
336
337
338
339
                                <div class="form-group" *ngIf="externalSignatoryBook == 'fastParapheur'">
                                    <div class="col-sm-12">
                                        <mat-form-field>
                                            <input matInput [(ngModel)]="currentEntity.fastParapheurSubscriberId"
                                                name="fastParapheurSubscriberId" id="fastParapheurSubscriberId"
                                                title="{{'lang.fastParapheurSubscriberId' | translate}}" type="text"
                                                placeholder="{{'lang.fastParapheurSubscriberId' | translate}}" maxlength="255"
                                                pattern="^[\w-]*$">
                                        </mat-form-field>
                                    </div>
                                </div>
340
341
342
343
                            </mat-expansion-panel>
                        </mat-accordion>
                        <div class="form-group">
                            <div class="col-md-12 text-center" style="padding:10px;">
344
                                <button mat-raised-button [disabled]="!entityForm.form.valid" color="primary"
345
                                    (click)="saveEntity()">{{'lang.save' | translate}}</button>
346
347
                                <button mat-raised-button *ngIf="!creationMode"
                                    [disabled]="!entityForm.form.valid || this.currentEntity.hasChildren" color="warn"
348
                                    (click)="removeEntity()">{{'lang.delete' | translate}}</button>
349
                                <button mat-raised-button *ngIf="creationMode" color="default"
350
                                    (click)="readMode()">{{'lang.cancel' | translate}}</button>
351
                            </div>
352
                        </div>
353
354
                    </form>
                </mat-tab>
355
                <mat-tab label="{{'lang.diffusionList' | translate}}" *ngIf="!creationMode">
356
357
                    <div class="row" style="margin:0px;">
                        <div class="col-md-12">
358
359
                            <app-diffusions-list #appDiffusionsList [adminMode]="true" [target]="'redirect'">
                            </app-diffusions-list>
360
361
362
                        </div>
                        <div class="form-group" *ngIf="currentEntity.entity_id">
                            <div class="col-md-12 text-center" style="padding:10px;">
363
                                <button mat-raised-button color="primary" (click)="saveDiffList()"
364
                                    [disabled]="appDiffusionsList.hasEmptyDest() || !appDiffusionsList.isModified()">{{'lang.save' | translate}}</button>
365
366
                                <button mat-raised-button color="default"
                                    (click)="appDiffusionsList.loadListModel(currentEntity.id)"
367
                                    [disabled]="!appDiffusionsList.isModified()">{{'lang.cancel' | translate}}</button>
368
                                <button *ngIf="!appDiffusionsList.isEmptyList() && currentEntity.listTemplate.id"
369
370
                                    mat-raised-button color="warn"
                                    (click)="deleteDiffList()">{{'lang.delete' | translate}}</button>
371
                            </div>
372
373
374
                        </div>
                    </div>
                </mat-tab>
375
                <mat-tab label="{{'lang.visaWorkflow' | translate}}" *ngIf="!creationMode">
376
377
                    <div class="row" style="margin:0px;" id="visaCircuitContent">
                        <div class="col-md-12">
378
379
                            <app-visa-workflow [adminMode]="true" [showListModels]="false" [showComment]="false"
                                #appVisaWorkflow></app-visa-workflow>
380
381
382
                        </div>
                        <div class="form-group" *ngIf="currentEntity.entity_id">
                            <div class="col-md-12 text-center" style="padding:10px;">
383
                                <button mat-raised-button color="primary" (click)="saveDiffListVisa()"
384
                                    [disabled]="!appVisaWorkflow.isModified()">{{'lang.save' | translate}}</button>
385
386
                                <button mat-raised-button color="default"
                                    (click)="appVisaWorkflow.loadListModel(currentEntity.id)"
387
                                    [disabled]="!appVisaWorkflow.isModified()">{{'lang.cancel' | translate}}</button>
388
389
                            </div>
                        </div>
390
391
                    </div>
                </mat-tab>
392
                <mat-tab label="{{'lang.avis' | translate}}" *ngIf="!creationMode">
393
394
                    <div class="row" style="margin:0px;" id="opinionCircuitContent">
                        <div class="col-md-12">
395
396
                            <app-avis-workflow [adminMode]="true" [showListModels]="false" #appAvisWorkflow>
                            </app-avis-workflow>
397
398
399
                        </div>
                        <div class="form-group" *ngIf="currentEntity.entity_id">
                            <div class="col-md-12 text-center" style="padding:10px;">
400
                                <button mat-raised-button color="primary" (click)="saveDiffListOpinion()"
401
                                    [disabled]="!appAvisWorkflow.isModified()">{{'lang.save' | translate}}</button>
402
403
                                <button mat-raised-button color="default"
                                    (click)="appAvisWorkflow.loadListModel(currentEntity.id)"
404
                                    [disabled]="!appAvisWorkflow.isModified()">{{'lang.cancel' | translate}}</button>
405
                            </div>
406
407
408
                        </div>
                    </div>
                </mat-tab>
409
                <mat-tab label="{{'lang.users' | translate}}" *ngIf="!creationMode">
410
411
                    <div class="row" style="margin:0px;">
                        <div class="col-md-12" *ngIf="currentEntity.canAdminUsers" style="padding:5px;">
412
                            <app-plugin-autocomplete [labelPlaceholder]="'lang.linkUser' | translate"
413
414
                                [routeDatas]="['/rest/autocomplete/users/administration']"
                                [targetSearchKey]="'idToDisplay'" [subInfoKey]="'descriptionToDisplay'"
415
                                (triggerEvent)="linkUser($event)"></app-plugin-autocomplete>
416
                            <hr />
417
                        </div>
418
                        <div class="col-md-4 col-xs-4">
419
                            <mat-form-field>
420
                                <input matInput #filterUser (keyup)="applyFilterUsers($event.target.value)"
421
                                    placeholder="{{'lang.filterBy' | translate}}">
422
423
                                <button mat-button *ngIf="filterUser.value" matSuffix mat-icon-button aria-label="Clear"
                                    (click)="applyFilterUsers(''); filterUser.value = ''"
424
425
426
                                    [title]="'lang.clearFilter' | translate">
                                    <mat-icon class="fas fa-times" style="color:#B3B3B3"></mat-icon>
                                </button>
427
428
                            </mat-form-field>
                        </div>
429
430
431
432
433
434
435
                        <div class="col-md-8 col-xs-8">
                            <div class="table-head table-head-tool">
                                <span style="position: relative;">
                                    <mat-paginator #paginatorUsers [length]="100" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100, 150]"></mat-paginator>
                                    <app-select-page [paginator]="paginatorUsers"></app-select-page>
                                </span>
                            </div>
436
437
                        </div>
                    </div>
438
439
                    <mat-table #tableUsers="matSort" [dataSource]="dataSourceUsers" matSort matSortActive="lastname"
                        matSortDirection="asc">
440
                        <ng-container matColumnDef="firstname">
441
442
                            <mat-header-cell *matHeaderCellDef mat-sort-header>{{'lang.firstname' | translate}}
                            </mat-header-cell>
443
444
445
                            <mat-cell *matCellDef="let element"> {{element.firstname}} </mat-cell>
                        </ng-container>
                        <ng-container matColumnDef="lastname">
446
447
                            <mat-header-cell *matHeaderCellDef mat-sort-header>{{'lang.lastname' | translate}}
                            </mat-header-cell>
448
449
450
                            <mat-cell *matCellDef="let element"> {{element.lastname}} </mat-cell>
                        </ng-container>
                        <mat-header-row *matHeaderRowDef="displayedColumnsUsers"></mat-header-row>
451
                        <mat-row *matRowDef="let row; columns: displayedColumnsUsers;"
452
                            routerLink="/administration/users/{{row.id}}" matTooltip="{{'lang.view' | translate}}"
453
                            style="cursor:pointer;"></mat-row>
454
455
                    </mat-table>
                </mat-tab>
456
                <mat-tab label="{{'lang.templates' | translate}}" *ngIf="!creationMode">
457
                    <div class="row" style="margin:0px;">
458
                        <div class="col-md-4 col-xs-4">
459
                            <mat-form-field>
460
                                <input matInput #filterTemplate (keyup)="applyFilterTemplates($event.target.value)"
461
                                    placeholder="{{'lang.filterBy' | translate}}">
462
463
                                <button mat-button *ngIf="filterTemplate.value" matSuffix mat-icon-button
                                    aria-label="Clear" (click)="applyFilterTemplates(''); filterTemplate.value = ''"
464
465
466
                                    [title]="'lang.clearFilter' | translate">
                                    <mat-icon class="fas fa-times" style="color:#B3B3B3"></mat-icon>
                                </button>
467
468
                            </mat-form-field>
                        </div>
469
470
471
472
473
474
475
                        <div class="col-md-8 col-xs-8">
                            <div class="table-head table-head-tool">
                                <span style="position: relative;">
                                    <mat-paginator #paginatorTemplates [length]="100" [pageSize]="10" [pageSizeOptions]="[10, 25, 50, 100, 150]"></mat-paginator>
                                    <app-select-page [paginator]="paginatorTemplates"></app-select-page>
                                </span>
                            </div>
476
477
                        </div>
                    </div>
478
479
                    <mat-table #tableTemplates="matSort" [dataSource]="dataSourceTemplates" matSort
                        matSortActive="template_label" matSortDirection="asc">
480
                        <ng-container matColumnDef="template_label">
481
482
                            <mat-header-cell *matHeaderCellDef mat-sort-header style="flex:2;">
                                {{'lang.templateName' | translate}}
483
484
485
                            </mat-header-cell>
                            <mat-cell *matCellDef="let element" style="flex:2;"
                                matTooltip="{{element.template_comment}}"> {{element.template_label}} </mat-cell>
486
487
                        </ng-container>
                        <ng-container matColumnDef="template_target">
488
489
                            <mat-header-cell *matHeaderCellDef mat-sort-header style="flex:1;">
                                {{'lang.templateTarget' | translate}}
490
                            </mat-header-cell>
491
492
                            <mat-cell *matCellDef="let element" style="flex:1;">
                                {{'lang.' + element.template_target | translate}}
493
                            </mat-cell>
494
495
                        </ng-container>
                        <mat-header-row *matHeaderRowDef="displayedColumnsTemplates"></mat-header-row>
496
497
498
                        <mat-row *matRowDef="let row; columns: displayedColumnsTemplates;"
                            (click)="showTemplate(row.template_id);"
                            [ngStyle]="{'cursor': !currentEntity.canAdminTemplates ? 'position' : 'pointer'}"></mat-row>
499
500
501
502
503
                    </mat-table>
                </mat-tab>
            </mat-tab-group>
        </mat-nav-list>
    </mat-sidenav>
504
</mat-sidenav-container>