Dossier templates listing header

apps/red-ui/src/app/modules/admin/dialogs/add-edit-dossier-template-dialog/add-edit-dossier-template-dialog.component.ts

@@ -33,8 +33,6 @@ export class AddEditDossierTemplateDialogComponent implements OnInit {
     private _previousValidFrom: Moment;
     private _previousValidTo: Moment;
 
-    reportTemplateValueMapper = (reportTemplate: ReportTemplate) => reportTemplate.templateId;
-
     constructor(
         private readonly _appStateService: AppStateService,
         private readonly _formBuilder: FormBuilder,
@@ -68,11 +66,6 @@ export class AddEditDossierTemplateDialogComponent implements OnInit {
         });
     }
 
-    async ngOnInit() {
-        this.availableReportTypes =
-            (await this._reportTemplateController.getAvailableReportTemplates(this.dossierTemplate?.dossierTemplateId).toPromise()) || [];
-    }
-
     get changed(): boolean {
         if (!this.dossierTemplate) return true;
 
@@ -105,6 +98,13 @@ export class AddEditDossierTemplateDialogComponent implements OnInit {
         return false;
     }
 
+    reportTemplateValueMapper = (reportTemplate: ReportTemplate) => reportTemplate.templateId;
+
+    async ngOnInit() {
+        this.availableReportTypes =
+            (await this._reportTemplateController.getAvailableReportTemplates(this.dossierTemplate?.dossierTemplateId).toPromise()) || [];
+    }
+
     async saveDossierTemplate() {
         const dossierTemplate = {
             dossierTemplateId: this.dossierTemplate?.dossierTemplateId,
@@ -115,7 +115,7 @@ export class AddEditDossierTemplateDialogComponent implements OnInit {
         await this._dossierTemplateController.createOrUpdateDossierTemplate(dossierTemplate).toPromise();
         await this._appStateService.loadAllDossierTemplates();
         await this._appStateService.loadDictionaryData();
-        this.dialogRef.close(dossierTemplate);
+        this.dialogRef.close(true);
     }
 
     private _applyValidityIntervalConstraints(value): boolean {

apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html

@@ -8,28 +8,12 @@
 
         <div class="red-content-inner">
             <div class="content-container">
-                <div class="header-item">
-                    <iqser-round-checkbox
-                        (click)="toggleSelectAll()"
-                        [active]="entitiesService.areAllSelected$ | async"
-                        [indeterminate]="entitiesService.notAllSelected$ | async"
-                    ></iqser-round-checkbox>
-
-                    <span class="all-caps-label">
-                        {{
-                            'dossier-templates-listing.table-header.title'
-                                | translate: { length: (entitiesService.displayedLength$ | async) }
-                        }}
-                    </span>
-
-                    <iqser-circle-button
-                        (action)="openDeleteTemplatesDialog($event)"
-                        *ngIf="canBulkDelete$(currentUser.isAdmin) | async"
-                        [tooltip]="'dossier-templates-listing.bulk.delete' | translate"
-                        icon="red:trash"
-                        [type]="circleButtonTypes.dark"
-                    ></iqser-circle-button>
-
+                <redaction-table-header
+                    [bulkActions]="bulkActions"
+                    [selectionEnabled]="true"
+                    [tableColConfigs]="tableColConfigs"
+                    [tableHeaderLabel]="tableHeaderLabel"
+                >
                     <div class="actions flex-1">
                         <redaction-input-with-action
                             [form]="searchService.searchForm"
@@ -41,37 +25,11 @@
                             (action)="openAddDossierTemplateDialog()"
                             *ngIf="currentUser.isAdmin && userPreferenceService.areDevFeaturesEnabled"
                             [label]="'dossier-templates-listing.add-new' | translate"
-                            icon="red:plus"
                             [type]="iconButtonTypes.primary"
+                            icon="red:plus"
                         ></iqser-icon-button>
                     </div>
-                </div>
-
-                <div [class.no-data]="entitiesService.noData$ | async" class="table-header" redactionSyncWidth="table-item">
-                    <div class="select-oval-placeholder"></div>
-
-                    <iqser-table-column-name
-                        [label]="'dossier-templates-listing.table-col-names.name' | translate"
-                        [withSort]="true"
-                        column="name"
-                    ></iqser-table-column-name>
-                    <iqser-table-column-name
-                        [label]="'dossier-templates-listing.table-col-names.created-by' | translate"
-                        class="user-column"
-                    ></iqser-table-column-name>
-                    <iqser-table-column-name
-                        [label]="'dossier-templates-listing.table-col-names.created-on' | translate"
-                        [withSort]="true"
-                        column="dateAdded"
-                    ></iqser-table-column-name>
-                    <iqser-table-column-name
-                        [label]="'dossier-templates-listing.table-col-names.modified-on' | translate"
-                        [withSort]="true"
-                        column="dateModified"
-                    ></iqser-table-column-name>
-
-                    <div class="scrollbar-placeholder"></div>
-                </div>
+                </redaction-table-header>
 
                 <redaction-empty-state
                     *ngIf="entitiesService.noData$ | async"
@@ -132,3 +90,13 @@
         </div>
     </div>
 </section>
+
+<ng-template #bulkActions>
+    <iqser-circle-button
+        (action)="openBulkDeleteTemplatesDialog($event)"
+        *ngIf="canBulkDelete$(permissionsService.isAdmin()) | async"
+        [tooltip]="'dossier-templates-listing.bulk.delete' | translate"
+        [type]="circleButtonTypes.dark"
+        icon="red:trash"
+    ></iqser-circle-button>
+</ng-template>

apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts

@@ -20,6 +20,25 @@ export class DossierTemplatesListingScreenComponent extends BaseListingComponent
     readonly iconButtonTypes = IconButtonTypes;
     readonly circleButtonTypes = CircleButtonTypes;
     readonly currentUser = this._userService.currentUser;
+    tableColConfigs: TableColConfig[] = [
+        {
+            label: _('dossier-templates-listing.table-col-names.name'),
+            withSort: true,
+            column: 'name'
+        },
+        { label: _('dossier-templates-listing.table-col-names.created-by'), class: 'user-column' },
+        {
+            label: _('dossier-templates-listing.table-col-names.created-on'),
+            withSort: true,
+            column: 'dateAdded'
+        },
+        {
+            label: _('dossier-templates-listing.table-col-names.modified-on'),
+            withSort: true,
+            column: 'dateModified'
+        }
+    ];
+    protected _tableHeaderLabel = _('dossier-templates-listing.table-header.title');
 
     constructor(
         protected readonly _injector: Injector,
@@ -37,35 +56,32 @@ export class DossierTemplatesListingScreenComponent extends BaseListingComponent
         this.loadDossierTemplatesData();
     }
 
-    openDeleteTemplatesDialog($event?: MouseEvent) {
+    openBulkDeleteTemplatesDialog($event?: MouseEvent) {
         return this._dialogService.openDialog('confirm', $event, null, async () => {
-            this._loadingService.start();
-            await this._dossierTemplateControllerService
-                .deleteDossierTemplates(this.entitiesService.selected.map(d => d.dossierTemplateId))
-                .toPromise();
-            this.entitiesService.setSelected([]);
-            await this._appStateService.loadAllDossierTemplates();
-            await this._appStateService.loadDictionaryData();
-            this.loadDossierTemplatesData();
+            this._loadingService.loadWhile(this._deleteTemplates());
         });
     }
 
     loadDossierTemplatesData() {
-        this._loadingService.start();
         this._appStateService.reset();
         this.entitiesService.setEntities(this._appStateService.dossierTemplates);
         this._loadDossierTemplateStats();
-        this._loadingService.stop();
     }
 
     openAddDossierTemplateDialog() {
-        this._dialogService.openDialog('addEditDossierTemplate', null, null, async newDossierTemplate => {
-            if (newDossierTemplate) {
-                this.loadDossierTemplatesData();
-            }
+        this._dialogService.openDialog('addEditDossierTemplate', null, null, () => {
+            this.loadDossierTemplatesData();
         });
     }
 
+    private async _deleteTemplates(templateIds: string[] = this.screenStateService.selectedEntities.map(d => d.dossierTemplateId)) {
+        await this._dossierTemplateControllerService.deleteDossierTemplates(templateIds).toPromise();
+        this.screenStateService.setSelectedEntities([]);
+        await this._appStateService.loadAllDossierTemplates();
+        await this._appStateService.loadDictionaryData();
+        this.loadDossierTemplatesData();
+    }
+
     private _loadDossierTemplateStats() {
         this.entitiesService.all.forEach(rs => {
             const dictionaries = this._appStateService.dictionaryData[rs.dossierTemplateId];

apps/red-ui/src/app/modules/shared/components/table-header/table-header.component.html

@@ -13,6 +13,9 @@
     <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
 
     <redaction-quick-filters></redaction-quick-filters>
+
+    <!--    Custom content-->
+    <ng-content></ng-content>
 </div>
 
 <div