From d6764126b4ad7f94b977b4c0f4e7a6ec31e6f374 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Wed, 15 Sep 2021 23:18:53 +0300
Subject: [PATCH] Table updates

---
 src/assets/styles/_inputs.scss                         |  2 +-
 src/lib/listing/listing-component.directive.ts         |  8 ++++++++
 .../listing/table-header/table-header.component.html   |  2 +-
 src/lib/listing/table-header/table-header.component.ts |  1 +
 src/lib/listing/table/table.component.html             |  3 ++-
 src/lib/listing/table/table.component.ts               | 10 ++++++++--
 6 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/assets/styles/_inputs.scss b/src/assets/styles/_inputs.scss
index b6fbdb3..02ed6c8 100644
--- a/src/assets/styles/_inputs.scss
+++ b/src/assets/styles/_inputs.scss
@@ -195,7 +195,7 @@ form .iqser-input-group:not(first-of-type) {
         .mat-datepicker-toggle {
             position: absolute;
             right: 0;
-            top: 4px;
+            top: 1px;
             color: $accent;
 
             &.mat-datepicker-toggle-active {
diff --git a/src/lib/listing/listing-component.directive.ts b/src/lib/listing/listing-component.directive.ts
index 23372a8..986ec58 100644
--- a/src/lib/listing/listing-component.directive.ts
+++ b/src/lib/listing/listing-component.directive.ts
@@ -18,6 +18,7 @@ export abstract class ListingComponent<T extends Listable> extends AutoUnsubscri
     readonly entitiesService = this._injector.get<EntitiesService<T>>(EntitiesService);
 
     readonly noMatch$ = this._noMatch$;
+    readonly noContent$ = this._noContent$;
     readonly sortedDisplayedEntities$ = this._sortedDisplayedEntities$;
 
     // TODO: These should be somewhere in table listing, not generic listing
@@ -54,6 +55,13 @@ export abstract class ListingComponent<T extends Listable> extends AutoUnsubscri
         );
     }
 
+    private get _noContent$(): Observable<boolean> {
+        return combineLatest([this._noMatch$, this.entitiesService.noData$]).pipe(
+            map(([noMatch, noData]) => noMatch || noData),
+            distinctUntilChanged()
+        );
+    }
+
     setInitialConfig(): void {
         this.sortingService.setSortingOption({
             column: this._primaryKey,
diff --git a/src/lib/listing/table-header/table-header.component.html b/src/lib/listing/table-header/table-header.component.html
index d695cf3..5660a7c 100644
--- a/src/lib/listing/table-header/table-header.component.html
+++ b/src/lib/listing/table-header/table-header.component.html
@@ -7,7 +7,7 @@
     ></iqser-round-checkbox>
 
     <span class="all-caps-label">
-        {{ tableHeaderLabel | translate: { length: (entitiesService.displayedLength$ | async) } }}
+        {{ tableHeaderLabel | translate: {length: totalSize || (entitiesService.displayedLength$ | async)} }}
     </span>
 
     <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
diff --git a/src/lib/listing/table-header/table-header.component.ts b/src/lib/listing/table-header/table-header.component.ts
index c9d9df7..69e28aa 100644
--- a/src/lib/listing/table-header/table-header.component.ts
+++ b/src/lib/listing/table-header/table-header.component.ts
@@ -23,6 +23,7 @@ export class TableHeaderComponent<T extends Listable> {
     @Input() hasEmptyColumn = false;
     @Input() selectionEnabled = false;
     @Input() mode: ListingMode = ListingModes.list;
+    @Input() totalSize?: number;
     @Input() bulkActions?: TemplateRef<unknown>;
 
     constructor(readonly entitiesService: EntitiesService<T>, readonly filterService: FilterService) {}
diff --git a/src/lib/listing/table/table.component.html b/src/lib/listing/table/table.component.html
index 6ae05c6..90e9d9d 100644
--- a/src/lib/listing/table/table.component.html
+++ b/src/lib/listing/table/table.component.html
@@ -4,6 +4,7 @@
     [selectionEnabled]="selectionEnabled"
     [tableColumnConfigs]="tableColumnConfigs"
     [tableHeaderLabel]="tableHeaderLabel"
+    [totalSize]="totalSize"
 >
     <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
 </iqser-table-header>
@@ -20,7 +21,7 @@
 
 <iqser-empty-state *ngIf="listingComponent.noMatch$ | async" [text]="noMatchText"></iqser-empty-state>
 
-<cdk-virtual-scroll-viewport [class.no-data]="(listingComponent.noMatch$ | async) || (listingComponent.entitiesService.noData$ | async)"
+<cdk-virtual-scroll-viewport [class.no-data]="listingComponent.noContent$ | async"
                              [itemSize]="itemSize"
                              iqserHasScrollbar>
     <div
diff --git a/src/lib/listing/table/table.component.ts b/src/lib/listing/table/table.component.ts
index ec8cce9..ab1d0a6 100644
--- a/src/lib/listing/table/table.component.ts
+++ b/src/lib/listing/table/table.component.ts
@@ -32,6 +32,7 @@ export class TableComponent<T extends Listable> implements OnInit {
     @Input() selectionEnabled = false;
     @Input() hasScrollButton = false;
     @Input() emptyColumnWidth?: string;
+    @Input() totalSize?: number;
     @Input() classes?: string;
     @Input() noDataText?: string;
     @Input() noDataIcon?: string;
@@ -58,9 +59,14 @@ export class TableComponent<T extends Listable> implements OnInit {
     }
 
     ngOnInit(): void {
-        this.tableColumnConfigs = this.listingComponent.tableColumnConfigs;
+        this.tableColumnConfigs = <TableColumnConfig<T>[]>this.listingComponent.tableColumnConfigs;
         this.tableHeaderLabel = this.listingComponent.tableHeaderLabel;
-        this.routerLinkFn = this.listingComponent.routerLinkFn;
+        this.routerLinkFn = <((entity: T) => string | string[]) | undefined>this.listingComponent.routerLinkFn;
+        this.listingComponent.noContent$.subscribe(() => {
+            setTimeout(() => {
+                this.scrollViewport.checkViewportSize();
+            }, 0);
+        });
 
         this._patchConfig();
         this._setStyles();