File attributes listing

2021-08-30 16:50:32 +03:00 · 2021-08-30 16:50:32 +03:00 · 89edd903f0
commit 89edd903f0
parent 1bd8f6ed60
8 changed files with 156 additions and 132 deletions
--- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
@ -26,12 +26,12 @@
                [bulkActions]="bulkActions"
                [itemSize]="80"
                [noDataButtonLabel]="'dictionary-listing.no-data.action' | translate"
-                [noDataIcon]="'red:dictionary'"
                [noDataText]="'dictionary-listing.no-data.title' | translate"
                [noMatchText]="'dictionary-listing.no-match.title' | translate"
                [selectionEnabled]="true"
                [showNoDataButton]="currentUser.isAdmin"
                emptyColumnWidth="1fr"
+                noDataIcon="red:dictionary"
            ></iqser-table>
        </div>

--- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html
@ -16,10 +16,10 @@
                    [bulkActions]="bulkActions"
                    [headerTemplate]="headerTemplate"
                    [itemSize]="80"
-                    [noDataIcon]="'red:template'"
                    [noDataText]="'dossier-templates-listing.no-data.title' | translate"
                    [noMatchText]="'dossier-templates-listing.no-match.title' | translate"
                    [selectionEnabled]="true"
+                    noDataIcon="red:template"
                ></iqser-table>
            </div>
        </div>
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html
@ -20,73 +20,17 @@
        <redaction-admin-side-nav type="dossierTemplates"></redaction-admin-side-nav>

        <div class="content-container">
-            <iqser-table-header
+            <iqser-table
+                [actionsTemplate]="actionsTemplate"
                [bulkActions]="bulkActions"
-                [hasEmptyColumn]="true"
+                [itemSize]="80"
+                [noDataText]="'file-attributes-listing.no-data.title' | translate"
+                [noMatchText]="'file-attributes-listing.no-match.title' | translate"
                [selectionEnabled]="true"
-                [tableColumnConfigs]="tableColumnConfigs"
-                [tableHeaderLabel]="tableHeaderLabel"
-            ></iqser-table-header>
-
-            <iqser-empty-state
-                *ngIf="entitiesService.noData$ | async"
-                [text]="'file-attributes-listing.no-data.title' | translate"
-                icon="red:attribute"
-            ></iqser-empty-state>
-
-            <iqser-empty-state *ngIf="noMatch$ | async" [text]="'file-attributes-listing.no-match.title' | translate"></iqser-empty-state>
-
-            <cdk-virtual-scroll-viewport [itemSize]="80" iqserHasScrollbar>
-                <div *cdkVirtualFor="let attribute of sortedDisplayedEntities$ | async" class="table-item">
-                    <div (click)="toggleEntitySelected($event, attribute)" class="selection-column">
-                        <iqser-round-checkbox [active]="isSelected(attribute)"></iqser-round-checkbox>
-                    </div>
-
-                    <div class="label">
-                        <span>{{ attribute.label }}</span>
-                    </div>
-
-                    <div [translate]="translations[attribute.type]" class="small-label"></div>
-
-                    <div class="center read-only">
-                        <mat-icon
-                            *ngIf="!attribute.editable"
-                            [matTooltip]="'file-attributes-listing.read-only' | translate"
-                            matTooltipPosition="above"
-                            svgIcon="red:read-only"
-                        ></mat-icon>
-                    </div>
-                    <div class="small-label">
-                        {{ attribute.csvColumnHeader }}
-                    </div>
-                    <div class="center">
-                        <iqser-round-checkbox *ngIf="attribute.filterable" [active]="true" [size]="18"></iqser-round-checkbox>
-                    </div>
-                    <div class="center">
-                        <iqser-round-checkbox *ngIf="attribute.displayedInFileList" [active]="true" [size]="18"></iqser-round-checkbox>
-                    </div>
-                    <div class="center">
-                        <iqser-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></iqser-round-checkbox>
-                    </div>
-                    <div class="actions-container">
-                        <div *ngIf="currentUser.isAdmin" class="action-buttons">
-                            <iqser-circle-button
-                                (action)="openAddEditAttributeDialog($event, attribute)"
-                                [tooltip]="'file-attributes-listing.action.edit' | translate"
-                                [type]="circleButtonTypes.dark"
-                                icon="iqser:edit"
-                            ></iqser-circle-button>
-                            <iqser-circle-button
-                                (action)="openConfirmDeleteAttributeDialog($event, attribute)"
-                                [tooltip]="'file-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>
+                emptyColumnWidth="1fr"
+                noDataIcon="red:attribute"
+            >
+            </iqser-table>
        </div>

        <div class="right-container"></div>
@ -128,3 +72,65 @@
        ></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]="'file-attributes-listing.action.edit' | translate"
+            [type]="circleButtonTypes.dark"
+            icon="iqser:edit"
+        ></iqser-circle-button>
+        <iqser-circle-button
+            (action)="openConfirmDeleteAttributeDialog($event, attribute)"
+            [tooltip]="'file-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="label cell">
+        <span>{{ attribute.label }}</span>
+    </div>
+</ng-template>
+
+<ng-template #typeTemplate let-attribute="entity">
+    <div [translate]="translations[attribute.type]" class="small-label cell"></div>
+</ng-template>
+
+<ng-template #readonlyTemplate let-attribute="entity">
+    <div class="center read-only cell">
+        <mat-icon
+            *ngIf="!attribute.editable"
+            [matTooltip]="'file-attributes-listing.read-only' | translate"
+            matTooltipPosition="above"
+            svgIcon="red:read-only"
+        ></mat-icon>
+    </div>
+</ng-template>
+
+<ng-template #csvColumnHeaderTemplate let-attribute="entity">
+    <div class="small-label cell">
+        {{ attribute.csvColumnHeader }}
+    </div>
+</ng-template>
+
+<ng-template #filterableTemplate let-attribute="entity">
+    <div class="center cell">
+        <iqser-round-checkbox *ngIf="attribute.filterable" [active]="true" [size]="18"></iqser-round-checkbox>
+    </div>
+</ng-template>
+
+<ng-template #displayedInFileListTemplate let-attribute="entity">
+    <div class="center cell">
+        <iqser-round-checkbox *ngIf="attribute.displayedInFileList" [active]="true" [size]="18"></iqser-round-checkbox>
+    </div>
+</ng-template>
+
+<ng-template #primaryAttributeTemplate let-attribute="entity">
+    <div class="center cell">
+        <iqser-round-checkbox *ngIf="attribute.primaryAttribute" [active]="true" [size]="18"></iqser-round-checkbox>
+    </div>
+</ng-template>
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
@ -1,38 +1,27 @@
@import 'libs/common-ui/src/assets/styles/mixins';

+// TODO: Can I move this to base styles?
 .page-header .actions {
    display: flex;
    justify-content: flex-end;
 }

-.content-container cdk-virtual-scroll-viewport {
-    ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 11px;
-
-        .table-item {
-            > div:not(.scrollbar-placeholder) {
-                padding-left: 10px;
-            }
-
-            > div {
-                &.center {
-                    align-items: center;
-                }
-
-                &.label span {
-                    @include line-clamp(1);
-                }
-
-                &.read-only mat-icon {
-                    width: 14px;
-                    height: 34px;
-                }
-            }
-        }
+:host ::ng-deep iqser-table cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper .table-item > div.cell {
+    &.center {
+        align-items: center;
    }

-    &.has-scrollbar:hover ::ng-deep.cdk-virtual-scroll-content-wrapper {
-        grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
+    &.label span {
+        @include line-clamp(1);
+    }
+
+    &.read-only mat-icon {
+        width: 14px;
+        height: 34px;
+    }
+
+    iqser-round-checkbox {
+        cursor: default;
    }
 }

@ -40,7 +29,3 @@
    display: none;
    visibility: hidden;
 }
-
-.table-item > div:not(.selection-column) iqser-round-checkbox {
-    cursor: default;
-}
--- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
+++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts
@ -1,4 +1,14 @@
-import { ChangeDetectionStrategy, Component, ElementRef, Injector, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    ElementRef,
+    forwardRef,
+    Injector,
+    OnDestroy,
+    OnInit,
+    TemplateRef,
+    ViewChild
+} from '@angular/core';
 import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerService } from '@redaction/red-ui-http';
 import { AppStateService } from '@state/app-state.service';
 import { ActivatedRoute } from '@angular/router';
@ -19,7 +29,10 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
    templateUrl: './file-attributes-listing-screen.component.html',
    styleUrls: ['./file-attributes-listing-screen.component.scss'],
    changeDetection: ChangeDetectionStrategy.OnPush,
-    providers: [...DefaultListingServices]
+    providers: [
+        ...DefaultListingServices,
+        { provide: ListingComponent, useExisting: forwardRef(() => FileAttributesListingScreenComponent) }
+    ]
 })
 export class FileAttributesListingScreenComponent extends ListingComponent<FileAttributeConfig> implements OnInit, OnDestroy {
    readonly iconButtonTypes = IconButtonTypes;
@ -27,36 +40,14 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
    readonly currentUser = this._userService.currentUser;
    readonly translations = fileAttributeTypesTranslations;
    readonly tableHeaderLabel = _('file-attributes-listing.table-header.title');
-    readonly tableColumnConfigs: TableColumnConfig<FileAttributeConfig>[] = [
-        {
-            label: _('file-attributes-listing.table-col-names.name'),
-            sortByKey: 'label'
-        },
-        {
-            label: _('file-attributes-listing.table-col-names.type'),
-            sortByKey: 'type'
-        },
-        {
-            label: _('file-attributes-listing.table-col-names.read-only'),
-            sortByKey: 'editable',
-            class: 'flex-center'
-        },
-        { label: _('file-attributes-listing.table-col-names.csv-column') },
-        {
-            label: _('file-attributes-listing.table-col-names.filterable'),
-            class: 'flex-center'
-        },
-        {
-            label: _('file-attributes-listing.table-col-names.displayed-in-file-list'),
-            class: 'flex-center'
-        },
-        {
-            label: _('file-attributes-listing.table-col-names.primary'),
-            class: 'flex-center',
-            rightIcon: 'red:status-info',
-            rightIconTooltip: _('file-attributes-listing.table-col-names.primary-info-tooltip')
-        }
-    ];
+    tableColumnConfigs: TableColumnConfig<FileAttributeConfig>[];
+    @ViewChild('labelTemplate', { static: true }) labelTemplate: TemplateRef<never>;
+    @ViewChild('typeTemplate', { static: true }) typeTemplate: TemplateRef<never>;
+    @ViewChild('readonlyTemplate', { static: true }) readonlyTemplate: TemplateRef<never>;
+    @ViewChild('csvColumnHeaderTemplate', { static: true }) csvColumnHeaderTemplate: TemplateRef<never>;
+    @ViewChild('filterableTemplate', { static: true }) filterableTemplate: TemplateRef<never>;
+    @ViewChild('displayedInFileListTemplate', { static: true }) displayedInFileListTemplate: TemplateRef<never>;
+    @ViewChild('primaryAttributeTemplate', { static: true }) primaryAttributeTemplate: TemplateRef<never>;
    protected readonly _primaryKey = 'label';
    private _existingConfiguration: FileAttributesConfig;
    @ViewChild('fileInput') private _fileInput: ElementRef;
@ -75,6 +66,7 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
    }

    async ngOnInit() {
+        this._configureTableColumns();
        await this._loadData();
    }

@ -130,6 +122,46 @@ export class FileAttributesListingScreenComponent extends ListingComponent<FileA
        );
    }

+    private _configureTableColumns() {
+        this.tableColumnConfigs = [
+            {
+                label: _('file-attributes-listing.table-col-names.name'),
+                sortByKey: 'label',
+                width: '2fr',
+                template: this.labelTemplate
+            },
+            {
+                label: _('file-attributes-listing.table-col-names.type'),
+                sortByKey: 'type',
+                template: this.typeTemplate
+            },
+            {
+                label: _('file-attributes-listing.table-col-names.read-only'),
+                sortByKey: 'editable',
+                class: 'flex-center',
+                template: this.readonlyTemplate
+            },
+            { label: _('file-attributes-listing.table-col-names.csv-column'), template: this.csvColumnHeaderTemplate },
+            {
+                label: _('file-attributes-listing.table-col-names.filterable'),
+                class: 'flex-center',
+                template: this.filterableTemplate
+            },
+            {
+                label: _('file-attributes-listing.table-col-names.displayed-in-file-list'),
+                class: 'flex-center',
+                template: this.displayedInFileListTemplate
+            },
+            {
+                label: _('file-attributes-listing.table-col-names.primary'),
+                class: 'flex-center',
+                rightIcon: 'red:status-info',
+                rightIconTooltip: _('file-attributes-listing.table-col-names.primary-info-tooltip'),
+                template: this.primaryAttributeTemplate
+            }
+        ];
+    }
+
    private async _loadData() {
        this._loadingService.start();

--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.html
@ -13,10 +13,10 @@
                [hasScrollButton]="true"
                [itemSize]="85"
                [noDataButtonLabel]="'dossier-listing.no-data.action' | translate"
-                [noDataIcon]="'red:folder'"
                [noDataText]="'dossier-listing.no-data.title' | translate"
                [noMatchText]="'dossier-listing.no-match.title' | translate"
                [showNoDataButton]="currentUser.isManager"
+                noDataIcon="red:folder"
            ></iqser-table>
        </div>

--- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
+++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html
@ -42,12 +42,13 @@
                [hasScrollButton]="true"
                [itemSize]="80"
                [noDataButtonLabel]="'dossier-overview.no-data.action' | translate"
-                [noDataIcon]="'red:upload'"
                [noDataText]="'dossier-overview.no-data.title' | translate"
                [noMatchText]="'dossier-overview.no-match.title' | translate"
                [selectionEnabled]="true"
                [showNoDataButton]="true"
                [tableItemClasses]="{ disabled: disabledFn, 'last-opened': lastOpenedFn }"
+                noDataButtonIcon="red:upload"
+                noDataIcon="red:document"
            ></iqser-table>
        </div>

--- a/libs/common-ui
+++ b/libs/common-ui
@ -1 +1 @@
-Subproject commit 7a59cd09946221a444fad4d2aaf82597819d5679
+Subproject commit 70f3c560d3b312d9707f367c2b8d3289ccbf908d