Pull request #257: Base listings

Merge in RED/ui from base-listings to master

* commit '43b87780f41db7fd83362e04bbe2c812d338b14e':
  chore(release)
  fix rebase
  fix status sorter
  Stuff
  rename sortingOptionChanged$ to sortingOption$
  fix sorting icons not showing
  Dossier overview base listing

apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.html

@@ -9,8 +9,7 @@
                 [selectionEnabled]="true"
                 [tableColConfigs]="tableColConfigs"
                 [tableHeaderLabel]="tableHeaderLabel"
-            >
+            ></redaction-table-header>
-            </redaction-table-header>
 
             <redaction-empty-state
                 *ngIf="screenStateService.noData$ | async"

apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.html

@@ -36,61 +36,12 @@
 
     <div class="red-content-inner">
         <div [class.extended]="collapsedDetails" class="content-container">
-            <div class="header-item">
+            <redaction-table-header
-                <iqser-round-checkbox
+                [bulkActions]="bulkActions"
-                    (click)="toggleSelectAll()"
+                [selectionEnabled]="true"
-                    [active]="screenStateService.areAllEntitiesSelected$ | async"
+                [tableColConfigs]="tableColConfigs"
-                    [indeterminate]="screenStateService.notAllEntitiesSelected$ | async"
+                [tableHeaderLabel]="tableHeaderLabel"
-                ></iqser-round-checkbox>
+            ></redaction-table-header>
-
-                <span class="all-caps-label">
-                    {{ 'dossier-overview.table-header.title' | translate: { length: (screenStateService.displayedLength$ | async) || 0 } }}
-                </span>
-
-                <redaction-dossier-overview-bulk-actions (reload)="bulkActionPerformed()"></redaction-dossier-overview-bulk-actions>
-
-                <redaction-quick-filters></redaction-quick-filters>
-            </div>
-
-            <div [class.no-data]="screenStateService.noData$ | async" class="table-header" redactionSyncWidth="table-item">
-                <!--      Table column names-->
-                <div class="select-oval-placeholder"></div>
-
-                <redaction-table-col-name
-                    [label]="'dossier-overview.table-col-names.name' | translate"
-                    [withSort]="true"
-                    column="filename"
-                ></redaction-table-col-name>
-
-                <redaction-table-col-name
-                    [label]="'dossier-overview.table-col-names.added-on' | translate"
-                    [withSort]="true"
-                    column="added"
-                ></redaction-table-col-name>
-
-                <redaction-table-col-name [label]="'dossier-overview.table-col-names.needs-work' | translate"></redaction-table-col-name>
-
-                <redaction-table-col-name
-                    [label]="'dossier-overview.table-col-names.assigned-to' | translate"
-                    [withSort]="true"
-                    class="user-column"
-                    column="reviewerName"
-                ></redaction-table-col-name>
-
-                <redaction-table-col-name
-                    [label]="'dossier-overview.table-col-names.pages' | translate"
-                    [withSort]="true"
-                    column="pages"
-                ></redaction-table-col-name>
-
-                <redaction-table-col-name
-                    [label]="'dossier-overview.table-col-names.status' | translate"
-                    [withSort]="true"
-                    class="flex-end"
-                    column="statusSort"
-                ></redaction-table-col-name>
-                <div class="scrollbar-placeholder"></div>
-            </div>
 
             <redaction-empty-state
                 (action)="fileInput.click()"
@@ -236,3 +187,7 @@
 </ng-template>
 
 <input #fileInput (change)="uploadFiles($event.target['files'])" class="file-upload-input" multiple="true" type="file" />
+
+<ng-template #bulkActions>
+    <redaction-dossier-overview-bulk-actions (reload)="bulkActionPerformed()"></redaction-dossier-overview-bulk-actions>
+</ng-template>

apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts

@@ -36,6 +36,7 @@ import { workloadTranslations } from '../../translations/workload-translations';
 import { fileStatusTranslations } from '../../translations/file-status-translations';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { CircleButtonTypes } from '@iqser/common-ui';
+import { TableColConfig } from '@shared/components/table-col-name/table-col-name.component';
 
 @Component({
     templateUrl: './dossier-overview-screen.component.html',
@@ -49,15 +50,47 @@ export class DossierOverviewScreenComponent
     private readonly _lastOpenedFileKey = 'Dossier-Recent-' + this.activeDossier.dossierId;
     protected readonly _primaryKey = 'filename';
     readonly circleButtonTypes = CircleButtonTypes;
+    protected readonly _tableHeaderLabel = _('dossier-overview.table-header.title');
 
     readonly itemSize = 80;
     collapsedDetails = false;
     actionConfigs: ActionConfig[];
     dossierAttributes: DossierAttributeWithValue[] = [];
+    tableColConfigs: TableColConfig[] = [
+        {
+            label: _('dossier-overview.table-col-names.name'),
+            withSort: true,
+            column: 'filename'
+        },
+        {
+            label: _('dossier-overview.table-col-names.added-on'),
+            withSort: true,
+            column: 'added'
+        },
+        {
+            label: _('dossier-overview.table-col-names.needs-work')
+        },
+        {
+            label: _('dossier-overview.table-col-names.assigned-to'),
+            withSort: true,
+            class: 'user-column',
+            column: 'reviewerName'
+        },
+        {
+            label: _('dossier-overview.table-col-names.pages'),
+            withSort: true,
+            column: 'pages'
+        },
+        {
+            label: _('dossier-overview.table-col-names.status'),
+            withSort: true,
+            class: 'flex-end',
+            column: 'statusSort'
+        }
+    ];
     @ViewChild(DossierDetailsComponent, { static: false })
     private readonly _dossierDetailsComponent: DossierDetailsComponent;
     private _lastScrollPosition: number;
-
     @ViewChild('needsWorkTemplate', { read: TemplateRef, static: true })
     private readonly _needsWorkTemplate: TemplateRef<any>;
     @ViewChild('fileInput') private _fileInput: ElementRef;

apps/red-ui/src/app/modules/shared/base/base-listing.component.ts

@@ -50,7 +50,7 @@ export abstract class BaseListingComponent<T> extends AutoUnsubscribeComponent i
     }
 
     private get _sortedDisplayedEntities$(): Observable<T[]> {
-        return this.sortingService.sortingOptionChanged$.pipe(
+        return this.sortingService.sortingOption$.pipe(
             switchMap(() => this.screenStateService.displayedEntities$.pipe(map(entities => this.sortingService.defaultSort(entities))))
         );
     }

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

@@ -2,12 +2,11 @@
     <mat-icon *ngIf="!!leftIcon" [svgIcon]="leftIcon"></mat-icon>
     <span class="all-caps-label">{{ label }}</span>
     <mat-icon *ngIf="!!rightIcon" [matTooltip]="rightIconTooltip" [svgIcon]="rightIcon" matTooltipPosition="above"></mat-icon>
-    <div
+
-        *ngIf="withSort && sortingService"
+    <ng-container *ngIf="sortingService?.sortingOption$ | async as sortingOption">
-        [class.force-display]="sortingService.sortingOption?.column === column"
+        <div *ngIf="withSort" [class.force-display]="sortingOption.column === column" class="sort-arrows-container">
-        class="sort-arrows-container"
+            <mat-icon *ngIf="sortingOption.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
-    >
+            <mat-icon *ngIf="sortingOption.order === 'desc'" svgIcon="red:sort-desc"></mat-icon>
-        <mat-icon *ngIf="sortingService.sortingOption?.order === 'asc'" svgIcon="red:sort-asc"></mat-icon>
+        </div>
-        <mat-icon *ngIf="sortingService.sortingOption?.order === 'desc'" svgIcon="red:sort-desc"></mat-icon>
+    </ng-container>
-    </div>
 </div>

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

@@ -10,7 +10,7 @@
         {{ tableHeaderLabel | translate: { length: (screenStateService.displayedLength$ | async) } }}
     </span>
 
-    <ng-container *ngIf="bulkActions" [ngTemplateOutlet]="bulkActions"></ng-container>
+    <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
 
     <redaction-quick-filters></redaction-quick-filters>
 </div>

apps/red-ui/src/app/services/sorting.service.ts

@@ -19,7 +19,7 @@ export interface SortingOption {
 })
 export class SortingService {
     private readonly _sortingOption$ = new BehaviorSubject<SortingOption>(null);
-    readonly sortingOptionChanged$ = this._sortingOption$.asObservable();
+    readonly sortingOption$ = this._sortingOption$.asObservable();
 
     get sortingOption(): SortingOption {
         return this._sortingOption$.getValue();

apps/red-ui/src/app/utils/sorters/status-sorter.ts

@@ -5,7 +5,7 @@ const byStatus = (a: StatusSorterItem, b: StatusSorterItem) => {
 
     const x = typeof a === 'string' ? a : a.key;
     const y = typeof b === 'string' ? b : b.key;
-    return (StatusSorter[x] = StatusSorter[y]);
+    return StatusSorter[x] - StatusSorter[y];
 };
 
 export const StatusSorter = {

libs/common-ui

@@ -1 +1 @@
-Subproject commit 3625e295161fddd62c6f8f45623279773bbb8a16
+Subproject commit 4004c4c8f9a31d0c8dd548e5a1fad62f1f472daa