From 0de03537c49056ee3d66563619ed496fb55ba296 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 12 Oct 2021 23:21:49 +0300
Subject: [PATCH] Scrollbar directive improvements

---
 src/lib/listing/table/table.component.scss   |  2 +-
 src/lib/listing/table/table.component.ts     | 17 +++++++++++++----
 src/lib/scrollbar/has-scrollbar.directive.ts | 17 ++++++++++++-----
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/lib/listing/table/table.component.scss b/src/lib/listing/table/table.component.scss
index 9941004..7015a81 100644
--- a/src/lib/listing/table/table.component.scss
+++ b/src/lib/listing/table/table.component.scss
@@ -3,6 +3,7 @@
 :host cdk-virtual-scroll-viewport {
     height: calc(100vh - 50px - 31px - 111px);
     overflow-y: hidden !important;
+    @include mixins.scroll-bar;
 
     &.no-data {
         display: none;
@@ -131,7 +132,6 @@
 
     &:hover {
         overflow-y: auto !important;
-        @include mixins.scroll-bar;
 
         &.has-scrollbar {
             .table-item {
diff --git a/src/lib/listing/table/table.component.ts b/src/lib/listing/table/table.component.ts
index 7c68818..3e65158 100644
--- a/src/lib/listing/table/table.component.ts
+++ b/src/lib/listing/table/table.component.ts
@@ -12,10 +12,11 @@ import {
     ViewContainerRef,
 } from '@angular/core';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
-import { Required } from '../../utils';
+import { AutoUnsubscribe, Required } from '../../utils';
 import { IListable, ListingModes, TableColumnConfig } from '../models';
 import { ListingComponent } from '../listing-component.directive';
 import { EntitiesService } from '../services';
+import { HasScrollbarDirective } from '../../scrollbar';
 
 const SCROLLBAR_WIDTH = 11;
 
@@ -25,7 +26,7 @@ const SCROLLBAR_WIDTH = 11;
     styleUrls: ['./table.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class TableComponent<T extends IListable> implements OnInit {
+export class TableComponent<T extends IListable> extends AutoUnsubscribe implements OnInit {
     readonly listingModes = ListingModes;
 
     @Input() bulkActions?: TemplateRef<unknown>;
@@ -48,12 +49,15 @@ export class TableComponent<T extends IListable> implements OnInit {
     @Input() itemMouseEnterFn?: (entity: T) => void;
     @Input() itemMouseLeaveFn?: (entity: T) => void;
     @ViewChild(CdkVirtualScrollViewport, { static: true }) readonly scrollViewport!: CdkVirtualScrollViewport;
+    @ViewChild(HasScrollbarDirective, { static: true }) hasScrollbarDirective!: HasScrollbarDirective;
 
     constructor(
         @Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent<T>,
         private readonly _hostRef: ViewContainerRef,
         readonly entitiesService: EntitiesService<T>,
-    ) {}
+    ) {
+        super();
+    }
 
     get tableColumnConfigs(): readonly TableColumnConfig<T>[] {
         return this.listingComponent.tableColumnConfigs;
@@ -68,7 +72,12 @@ export class TableComponent<T extends IListable> implements OnInit {
     }
 
     ngOnInit(): void {
-        this.listingComponent.noContent$.subscribe(() => {
+        this.addSubscription = this.entitiesService.allLength$.subscribe(() => {
+            setTimeout(() => {
+                this.hasScrollbarDirective.process();
+            }, 0);
+        });
+        this.addSubscription = this.listingComponent.noContent$.subscribe(() => {
             setTimeout(() => {
                 this.scrollViewport?.checkViewportSize();
             }, 0);
diff --git a/src/lib/scrollbar/has-scrollbar.directive.ts b/src/lib/scrollbar/has-scrollbar.directive.ts
index 03de918..d72c4cb 100644
--- a/src/lib/scrollbar/has-scrollbar.directive.ts
+++ b/src/lib/scrollbar/has-scrollbar.directive.ts
@@ -1,10 +1,10 @@
-import { AfterContentChecked, Directive, ElementRef, HostBinding } from '@angular/core';
+import { Directive, ElementRef, HostBinding, HostListener, OnChanges, OnInit } from '@angular/core';
 
 @Directive({
     selector: '[iqserHasScrollbar]',
     exportAs: 'iqserHasScrollbar',
 })
-export class HasScrollbarDirective implements AfterContentChecked {
+export class HasScrollbarDirective implements OnInit, OnChanges {
     @HostBinding('class') class = '';
 
     constructor(private readonly _elementRef: ElementRef) {}
@@ -14,14 +14,21 @@ export class HasScrollbarDirective implements AfterContentChecked {
         return element.clientHeight < element.scrollHeight;
     }
 
-    ngAfterContentChecked(): void {
-        this._process();
+    ngOnInit(): void {
+        setTimeout(() => {
+            this.process();
+        }, 0);
     }
 
-    _process(): void {
+    @HostListener('window:resize')
+    process(): void {
         const newClass = this.hasScrollbar ? 'has-scrollbar' : '';
         if (this.class !== newClass) {
             this.class = newClass;
         }
     }
+
+    ngOnChanges(): void {
+        this.process();
+    }
 }