Dossier attributes listing

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

@@ -20,68 +20,20 @@
         <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>
 
         <div class="content-container">
-            <iqser-table-header
+            <iqser-table
+                (noDataAction)="openAddEditAttributeDialog(null)"
+                [actionsTemplate]="actionsTemplate"
                 [bulkActions]="bulkActions"
-                [hasEmptyColumn]="true"
+                [itemSize]="50"
+                [noDataButtonLabel]="'dossier-attributes-listing.no-data.action' | translate"
+                [noDataText]="'dossier-attributes-listing.no-data.title' | translate"
+                [noMatchText]="'dossier-attributes-listing.no-match.title' | translate"
                 [selectionEnabled]="true"
-                [tableColumnConfigs]="tableColumnConfigs"
+                [showNoDataButton]="currentUser.isAdmin"
-                [tableHeaderLabel]="tableHeaderLabel"
+                emptyColumnWidth="1fr"
-            ></iqser-table-header>
+                noDataIcon="red:attribute"
-
+            >
-            <iqser-empty-state
+            </iqser-table>
-                (action)="openAddEditAttributeDialog($event)"
-                *ngIf="entitiesService.noData$ | async"
-                [buttonLabel]="'dossier-attributes-listing.no-data.action' | translate"
-                [showButton]="currentUser.isAdmin"
-                [text]="'dossier-attributes-listing.no-data.title' | translate"
-                icon="red:attribute"
-            ></iqser-empty-state>
-
-            <iqser-empty-state
-                *ngIf="noMatch$ | async"
-                [text]="'dossier-attributes-listing.no-match.title' | translate"
-            ></iqser-empty-state>
-
-            <cdk-virtual-scroll-viewport [itemSize]="50" iqserHasScrollbar>
-                <div
-                    *cdkVirtualFor="let attribute of sortedDisplayedEntities$ | async; trackBy: trackByPrimaryKey"
-                    class="table-item pointer"
-                >
-                    <div (click)="toggleEntitySelected($event, attribute)" class="selection-column">
-                        <iqser-round-checkbox [active]="isSelected(attribute)"></iqser-round-checkbox>
-                    </div>
-
-                    <div>
-                        {{ attribute.label }}
-                    </div>
-
-                    <div class="small-label">
-                        {{ attribute.placeholder }}
-                    </div>
-
-                    <div class="small-label">
-                        {{ translations[attribute.type] | translate }}
-                    </div>
-                    <div class="actions-container">
-                        <div *ngIf="currentUser.isAdmin" class="action-buttons">
-                            <iqser-circle-button
-                                (action)="openAddEditAttributeDialog($event, attribute)"
-                                [tooltip]="'dossier-attributes-listing.action.edit' | translate"
-                                [type]="circleButtonTypes.dark"
-                                icon="iqser:edit"
-                            ></iqser-circle-button>
-
-                            <iqser-circle-button
-                                (action)="openConfirmDeleteAttributeDialog($event, attribute)"
-                                [tooltip]="'dossier-attributes-listing.action.delete' | translate"
-                                [type]="circleButtonTypes.dark"
-                                icon="red:trash"
-                            ></iqser-circle-button>
-                        </div>
-                    </div>
-                    <div class="scrollbar-placeholder"></div>
-                </div>
-            </cdk-virtual-scroll-viewport>
         </div>
     </div>
 </section>
@@ -110,3 +62,39 @@
         ></iqser-icon-button>
     </div>
 </ng-template>
+
+<ng-template #actionsTemplate let-attribute="entity">
+    <div *ngIf="currentUser.isAdmin" class="action-buttons">
+        <iqser-circle-button
+            (action)="openAddEditAttributeDialog($event, attribute)"
+            [tooltip]="'dossier-attributes-listing.action.edit' | translate"
+            [type]="circleButtonTypes.dark"
+            icon="iqser:edit"
+        ></iqser-circle-button>
+
+        <iqser-circle-button
+            (action)="openConfirmDeleteAttributeDialog($event, attribute)"
+            [tooltip]="'dossier-attributes-listing.action.delete' | translate"
+            [type]="circleButtonTypes.dark"
+            icon="red:trash"
+        ></iqser-circle-button>
+    </div>
+</ng-template>
+
+<ng-template #labelTemplate let-attribute="entity">
+    <div class="cell">
+        {{ attribute.label }}
+    </div>
+</ng-template>
+
+<ng-template #placeholderTemplate let-attribute="entity">
+    <div class="cell small-label">
+        {{ attribute.placeholder }}
+    </div>
+</ng-template>
+
+<ng-template #typeTemplate let-attribute="entity">
+    <div class="cell small-label">
+        {{ translations[attribute.type] | translate }}
+    </div>
+</ng-template>

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.scss

@@ -2,33 +2,3 @@
     display: flex;
     justify-content: flex-end;
 }
-
-iqser-table-header::ng-deep .attributes-actions-container {
-    display: flex;
-    flex: 1;
-    justify-content: flex-end;
-
-    > *:not(:last-child) {
-        margin-right: 10px;
-    }
-}
-
-cdk-virtual-scroll-viewport {
-    ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 2fr 2fr 1fr 1fr 11px;
-
-        .table-item > div {
-            height: 50px;
-
-            &:not(.scrollbar-placeholder) {
-                padding-left: 10px;
-            }
-        }
-    }
-
-    &.has-scrollbar:hover {
-        ::ng-deep.cdk-virtual-scroll-content-wrapper {
-            grid-template-columns: auto 2fr 2fr 1fr 1fr;
-        }
-    }
-}

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

@@ -1,4 +1,4 @@
-import { Component, Injector, OnInit } from '@angular/core';
+import { Component, forwardRef, Injector, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import {
     CircleButtonTypes,
     DefaultListingServices,
@@ -19,7 +19,10 @@ import { UserService } from '@services/user.service';
 @Component({
     templateUrl: './dossier-attributes-listing-screen.component.html',
     styleUrls: ['./dossier-attributes-listing-screen.component.scss'],
-    providers: [...DefaultListingServices]
+    providers: [
+        ...DefaultListingServices,
+        { provide: ListingComponent, useExisting: forwardRef(() => DossierAttributesListingScreenComponent) }
+    ]
 })
 export class DossierAttributesListingScreenComponent extends ListingComponent<DossierAttributeConfig> implements OnInit {
     readonly iconButtonTypes = IconButtonTypes;
@@ -27,17 +30,10 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
     readonly currentUser = this._userService.currentUser;
     readonly translations = dossierAttributeTypesTranslations;
     readonly tableHeaderLabel = _('dossier-attributes-listing.table-header.title');
-    readonly tableColumnConfigs: TableColumnConfig<DossierAttributeConfig>[] = [
+    tableColumnConfigs: TableColumnConfig<DossierAttributeConfig>[];
-        {
+    @ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<never>;
-            label: _('dossier-attributes-listing.table-col-names.label'),
+    @ViewChild('placeholderTemplate', { static: true }) placeholderTemplate: TemplateRef<never>;
-            sortByKey: 'label'
+    @ViewChild('typeTemplate', { static: true }) typeTemplate: TemplateRef<never>;
-        },
-        { label: _('dossier-attributes-listing.table-col-names.placeholder') },
-        {
-            label: _('dossier-attributes-listing.table-col-names.type'),
-            sortByKey: 'type'
-        }
-    ];
     protected readonly _primaryKey = 'label';
 
     constructor(
@@ -54,6 +50,7 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
     }
 
     async ngOnInit() {
+        this._configureTableColumns();
         await this._loadData();
     }
 
@@ -62,6 +59,7 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
             this._loadingService.start();
             const ids = dossierAttribute ? [dossierAttribute.id] : this.entitiesService.selected.map(item => item.id);
             await this._dossierAttributesService.deleteConfigs(ids);
+            this.entitiesService.setSelected([]);
             await this._loadData();
         });
     }
@@ -77,6 +75,27 @@ export class DossierAttributesListingScreenComponent extends ListingComponent<Do
         );
     }
 
+    private _configureTableColumns() {
+        this.tableColumnConfigs = [
+            {
+                label: _('dossier-attributes-listing.table-col-names.label'),
+                sortByKey: 'label',
+                width: '2fr',
+                template: this.labelTemplate
+            },
+            {
+                label: _('dossier-attributes-listing.table-col-names.placeholder'),
+                width: '2fr',
+                template: this.placeholderTemplate
+            },
+            {
+                label: _('dossier-attributes-listing.table-col-names.type'),
+                sortByKey: 'type',
+                template: this.typeTemplate
+            }
+        ];
+    }
+
     private async _loadData() {
         this._loadingService.start();
         const attributes = await this._dossierAttributesService.getConfig();