From af46a45b97a42380a316396635fecc58372b78eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Tue, 31 Aug 2021 16:31:17 +0300
Subject: [PATCH] Table item mouse enter/leave & some styles

---
 src/assets/styles/_tables.scss                | 50 -------------------
 .../table-column-name.component.scss          | 10 +++-
 .../table-header/table-header.component.scss  | 39 +++++++++++++++
 src/lib/listing/table/table.component.html    |  2 +
 src/lib/listing/table/table.component.scss    | 25 ++++++----
 src/lib/listing/table/table.component.ts      | 20 ++++----
 6 files changed, 76 insertions(+), 70 deletions(-)

diff --git a/src/assets/styles/_tables.scss b/src/assets/styles/_tables.scss
index 1579698..db1da5e 100644
--- a/src/assets/styles/_tables.scss
+++ b/src/assets/styles/_tables.scss
@@ -1,53 +1,3 @@
-@import 'variables';
-
-.table-header {
-    display: flex;
-    border-bottom: 1px solid $separator;
-
-    &.no-data:not([synced='true']) {
-        padding-left: 30px;
-    }
-
-    iqser-table-column-name:last-of-type {
-        > div {
-            padding-right: 13px;
-        }
-    }
-
-    &.selection-enabled iqser-table-column-name > div {
-        padding-left: 10px;
-    }
-}
-
-.header-item {
-    background-color: $btn-bg;
-    height: 50px;
-    padding: 0 24px;
-    display: flex;
-    align-items: center;
-    z-index: 1;
-    border-bottom: 1px solid $separator;
-    box-sizing: border-box;
-
-    > *:not(:last-child) {
-        margin-right: 10px;
-    }
-
-    .actions {
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-
-        > *:not(:last-child) {
-            margin-right: 16px;
-        }
-    }
-
-    &.selection-enabled {
-        padding-left: 10px;
-    }
-}
-
 .scrollbar-placeholder {
     width: 11px;
     padding: 0 !important;
diff --git a/src/lib/listing/table-column-name/table-column-name.component.scss b/src/lib/listing/table-column-name/table-column-name.component.scss
index 87a10b1..731b910 100644
--- a/src/lib/listing/table-column-name/table-column-name.component.scss
+++ b/src/lib/listing/table-column-name/table-column-name.component.scss
@@ -10,7 +10,7 @@
         display: flex;
         width: 100%;
         line-height: 11px;
-        padding: 0 24px;
+        padding: 0 10px;
 
         > mat-icon {
             width: 10px;
@@ -24,6 +24,14 @@
         }
     }
 
+    &:first-child > div {
+        padding: 0 24px;
+    }
+
+    &:last-of-type > div {
+        padding: 0 13px 0 10px;
+    }
+
     .flex-end {
         min-width: 58px;
     }
diff --git a/src/lib/listing/table-header/table-header.component.scss b/src/lib/listing/table-header/table-header.component.scss
index e69de29..8222ce0 100644
--- a/src/lib/listing/table-header/table-header.component.scss
+++ b/src/lib/listing/table-header/table-header.component.scss
@@ -0,0 +1,39 @@
+@import '../../../assets/styles/common';
+
+.table-header {
+    display: flex;
+    border-bottom: 1px solid $separator;
+
+    &.no-data:not([synced='true']) {
+        padding-left: 30px;
+    }
+}
+
+.header-item {
+    background-color: $btn-bg;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    z-index: 1;
+    border-bottom: 1px solid $separator;
+    box-sizing: border-box;
+    padding: 0 24px;
+
+    &.selection-enabled {
+        padding: 0 24px 0 10px;
+    }
+
+    > *:not(:last-child) {
+        margin-right: 10px;
+    }
+
+    .actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+
+        > *:not(:last-child) {
+            margin-right: 16px;
+        }
+    }
+}
diff --git a/src/lib/listing/table/table.component.html b/src/lib/listing/table/table.component.html
index 9aea9f6..e4281f0 100644
--- a/src/lib/listing/table/table.component.html
+++ b/src/lib/listing/table/table.component.html
@@ -22,6 +22,8 @@
 
 <cdk-virtual-scroll-viewport #scrollViewport [itemSize]="itemSize" iqserHasScrollbar>
     <div
+        (mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
+        (mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
         *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$ | async; trackBy: listingComponent.trackByPrimaryKey"
         [ngClass]="getTableItemClasses(entity)"
         [routerLink]="routerLinkFn && routerLinkFn(entity)"
diff --git a/src/lib/listing/table/table.component.scss b/src/lib/listing/table/table.component.scss
index ed541f1..cab94c2 100644
--- a/src/lib/listing/table/table.component.scss
+++ b/src/lib/listing/table/table.component.scss
@@ -1,6 +1,6 @@
 @import '../../../assets/styles/common';
 
-cdk-virtual-scroll-viewport {
+:host cdk-virtual-scroll-viewport {
     height: calc(100vh - 50px - 31px - 111px);
     overflow-y: hidden !important;
 
@@ -23,12 +23,25 @@ cdk-virtual-scroll-viewport {
                 box-sizing: border-box;
                 border-bottom: 1px solid $separator;
                 height: var(--itemSize);
-                padding: 0 13px 0 var(--paddingLeft);
+                padding: 0 10px;
+
+                &.cell:first-of-type {
+                    padding: 0 24px;
+                }
+
+                &.cell:last-of-type {
+                    padding: 0 13px 0 10px;
+                }
 
                 &:not(.scrollbar-placeholder):not(.selection-column) {
                     min-width: 110px;
                 }
 
+                &.center {
+                    align-items: center;
+                    justify-content: center;
+                }
+
                 &.selection-column {
                     padding-right: 0 !important;
 
@@ -58,7 +71,7 @@ cdk-virtual-scroll-viewport {
                 flex-direction: row;
                 align-items: center;
                 padding-left: 100px;
-                padding-right: 24px;
+                padding-right: 21px;
                 z-index: 1;
                 background: linear-gradient(to right, rgba(244, 245, 247, 0) 0%, $grey-2 35%);
 
@@ -69,12 +82,6 @@ cdk-virtual-scroll-viewport {
                 iqser-circle-button:not(:last-child) {
                     margin-right: 2px;
                 }
-
-                &.active {
-                    display: flex;
-                    // compensate for scroll
-                    padding-right: 23px;
-                }
             }
 
             input,
diff --git a/src/lib/listing/table/table.component.ts b/src/lib/listing/table/table.component.ts
index f5eae39..ec8cce9 100644
--- a/src/lib/listing/table/table.component.ts
+++ b/src/lib/listing/table/table.component.ts
@@ -8,7 +8,8 @@ import {
     OnInit,
     Output,
     TemplateRef,
-    ViewChild
+    ViewChild,
+    ViewContainerRef
 } from '@angular/core';
 import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { Required } from '../../utils';
@@ -40,12 +41,17 @@ export class TableComponent<T extends Listable> implements OnInit {
     @Output() readonly noDataAction = new EventEmitter<void>();
     @Input() noMatchText?: string;
     @Input() tableItemClasses?: { [key: string]: (e: T) => boolean };
+    @Input() itemMouseEnterFn?: (entity: T) => void;
+    @Input() itemMouseLeaveFn?: (entity: T) => void;
     routerLinkFn?: (entity: T) => string | string[];
     tableColumnConfigs!: readonly TableColumnConfig<T>[];
     tableHeaderLabel?: string; // todo not optional
     @ViewChild(CdkVirtualScrollViewport, { static: true }) readonly scrollViewport!: CdkVirtualScrollViewport;
 
-    constructor(@Inject(forwardRef(() => ListingComponent)) private _parent: ListingComponent<T>) {}
+    constructor(
+        @Inject(forwardRef(() => ListingComponent)) private _parent: ListingComponent<T>,
+        private readonly _hostRef: ViewContainerRef
+    ) {}
 
     get listingComponent(): ListingComponent<T> {
         return this._parent;
@@ -78,16 +84,15 @@ export class TableComponent<T extends Listable> implements OnInit {
     }
 
     private _setStyles(): void {
-        const element = this.scrollViewport.elementRef.nativeElement;
+        const element = this._hostRef.element.nativeElement as HTMLElement;
         this._setColumnsWidth(element);
         this._setItemSize(element);
-        this._setPadding(element);
     }
 
     private _setColumnsWidth(element: HTMLElement) {
         let gridTemplateColumnsHover = '';
         if (this.selectionEnabled) {
-            gridTemplateColumnsHover += 'auto ';
+            gridTemplateColumnsHover += '30px ';
         }
         for (const config of this.tableColumnConfigs) {
             gridTemplateColumnsHover += `${config.width || '1fr'} `;
@@ -102,9 +107,4 @@ export class TableComponent<T extends Listable> implements OnInit {
     private _setItemSize(element: HTMLElement) {
         element.style.setProperty('--itemSize', `${this.itemSize}px`);
     }
-
-    private _setPadding(element: HTMLElement) {
-        const paddingLeft = this.selectionEnabled ? 10 : 24;
-        element.style.setProperty('--paddingLeft', `${paddingLeft}px`);
-    }
 }