From d58cfd543ba2fcd16cc09012c579a73ccbf8cc60 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@devplant.ro>
Date: Thu, 25 Nov 2021 15:24:57 +0200
Subject: [PATCH] added more keys and fixes for help mode

---
 src/assets/styles/common-help-mode.scss       | 16 +++++-
 .../help-mode/help-mode.component.scss        |  2 +-
 .../page-header/models/action-config.model.ts |  1 +
 .../page-header/page-header.component.html    |  3 +-
 .../table-content.component.html              | 52 ++++++++++---------
 .../table-content/table-content.component.ts  |  1 +
 src/lib/listing/table/table.component.html    |  1 +
 src/lib/listing/table/table.component.ts      |  1 +
 8 files changed, 49 insertions(+), 28 deletions(-)

diff --git a/src/assets/styles/common-help-mode.scss b/src/assets/styles/common-help-mode.scss
index 2b5e5ab..9cd680f 100644
--- a/src/assets/styles/common-help-mode.scss
+++ b/src/assets/styles/common-help-mode.scss
@@ -1,5 +1,5 @@
 .help-mode-on-mouse-over {
-    z-index: 1000;
+    z-index: 10;
     position: absolute;
     top: -5px;
     left: -5px;
@@ -61,3 +61,17 @@
     margin-top: 10px;
     margin-left: 15px;
 }
+
+.help-mode-on-mouse-over-reset-filters {
+    z-index: 20;
+    padding-left: 4px;
+}
+
+.help-mode-on-mouse-over-dossier-list,
+.help-mode-on-mouse-over-document-list {
+    margin-top: 5px;
+}
+
+.help-mode-on-mouse-over-edit-dossier-attributes {
+    z-index: 20;
+}
diff --git a/src/lib/help-mode/help-mode/help-mode.component.scss b/src/lib/help-mode/help-mode/help-mode.component.scss
index e848a0c..421d474 100644
--- a/src/lib/help-mode/help-mode/help-mode.component.scss
+++ b/src/lib/help-mode/help-mode/help-mode.component.scss
@@ -42,7 +42,7 @@
     border-right: 8px solid var(--iqser-helpmode-primary);
     border-top: 8px solid var(--iqser-helpmode-primary);
     border-bottom: 60px solid var(--iqser-helpmode-primary);
-    z-index: 10;
+    z-index: 5;
     position: absolute;
     display: flex;
     justify-content: center;
diff --git a/src/lib/listing/page-header/models/action-config.model.ts b/src/lib/listing/page-header/models/action-config.model.ts
index 311e3fc..fdb27ab 100644
--- a/src/lib/listing/page-header/models/action-config.model.ts
+++ b/src/lib/listing/page-header/models/action-config.model.ts
@@ -2,4 +2,5 @@ import { BaseHeaderConfig } from './base-config.model';
 
 export interface ActionConfig extends BaseHeaderConfig {
     readonly action: ($event: MouseEvent) => void;
+    readonly helpModeKey?: string;
 }
diff --git a/src/lib/listing/page-header/page-header.component.html b/src/lib/listing/page-header/page-header.component.html
index b2aba3f..27f49b3 100644
--- a/src/lib/listing/page-header/page-header.component.html
+++ b/src/lib/listing/page-header/page-header.component.html
@@ -12,7 +12,7 @@
 
         <ng-container *ngIf="searchPosition === searchPositions.afterFilters" [ngTemplateOutlet]="searchBar"></ng-container>
 
-        <div (click)="resetFilters()" *ngIf="showResetFilters$ | async" class="reset-filters" translate="reset-filters"></div>
+        <div (click)="resetFilters()" *ngIf="showResetFilters$ | async" class="reset-filters" translate="reset-filters" iqserHelpMode="reset-filters"></div>
     </div>
 
     <div *ngIf="showCloseButton || actionConfigs || buttonConfigs || viewModeSelection" class="actions">
@@ -36,6 +36,7 @@
                     *ngIf="!config.hide"
                     [icon]="config.icon"
                     [tooltip]="config.label"
+                    [iqserHelpMode]="config.helpModeKey"
                     tooltipPosition="below"
                 ></iqser-circle-button>
             </ng-container>
diff --git a/src/lib/listing/table-content/table-content.component.html b/src/lib/listing/table-content/table-content.component.html
index 877be79..3625c8a 100644
--- a/src/lib/listing/table-content/table-content.component.html
+++ b/src/lib/listing/table-content/table-content.component.html
@@ -1,27 +1,29 @@
-<cdk-virtual-scroll-viewport
-    [class.no-data]="listingComponent.noContent$ | async"
-    [itemSize]="itemSize"
-    [maxBufferPx]="1500"
-    [minBufferPx]="300"
-    iqserHasScrollbar
->
-    <ng-container *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$; trackBy: trackBy; templateCacheSize: 60">
-        <!-- mouseenter and mouseleave triggers change detection event if itemMouse functions are undefined -->
-        <!-- this little hack below ensures that change detection won't be triggered if functions are undefined -->
-        <div
-            (mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
-            (mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
-            *ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents"
-            [ngClass]="getTableItemClasses(entity)"
-            [routerLink]="entity.routerLink"
-        >
-            <iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
-        </div>
-
-        <ng-template #withoutMouseEvents>
-            <div [ngClass]="getTableItemClasses(entity)" [routerLink]="entity.routerLink">
+<div [iqserHelpMode]="helpModeKey">
+    <cdk-virtual-scroll-viewport
+        [class.no-data]="listingComponent.noContent$ | async"
+        [itemSize]="itemSize"
+        [maxBufferPx]="1500"
+        [minBufferPx]="300"
+        iqserHasScrollbar
+    >
+        <ng-container *cdkVirtualFor="let entity of listingComponent.sortedDisplayedEntities$; trackBy: trackBy; templateCacheSize: 60">
+            <!-- mouseenter and mouseleave triggers change detection event if itemMouse functions are undefined -->
+            <!-- this little hack below ensures that change detection won't be triggered if functions are undefined -->
+            <div
+                (mouseenter)="itemMouseEnterFn && itemMouseEnterFn(entity)"
+                (mouseleave)="itemMouseLeaveFn && itemMouseLeaveFn(entity)"
+                *ngIf="itemMouseEnterFn || itemMouseLeaveFn; else withoutMouseEvents"
+                [ngClass]="getTableItemClasses(entity)"
+                [routerLink]="entity.routerLink"
+            >
                 <iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
             </div>
-        </ng-template>
-    </ng-container>
-</cdk-virtual-scroll-viewport>
+
+            <ng-template #withoutMouseEvents>
+                <div [ngClass]="getTableItemClasses(entity)" [routerLink]="entity.routerLink">
+                    <iqser-table-item [entity]="entity" [selectionEnabled]="selectionEnabled"></iqser-table-item>
+                </div>
+            </ng-template>
+        </ng-container>
+    </cdk-virtual-scroll-viewport>
+</div>
diff --git a/src/lib/listing/table-content/table-content.component.ts b/src/lib/listing/table-content/table-content.component.ts
index 2942d7a..7af8571 100644
--- a/src/lib/listing/table-content/table-content.component.ts
+++ b/src/lib/listing/table-content/table-content.component.ts
@@ -18,6 +18,7 @@ export class TableContentComponent<T extends IListable> extends AutoUnsubscribe
     @Input() itemMouseLeaveFn?: (entity: T) => void;
     @Input() tableItemClasses?: Record<string, (e: T) => boolean>;
     @Input() selectionEnabled!: boolean;
+    @Input() helpModeKey?: 'dossier-list' | 'document-list';
     readonly trackBy = trackBy<T>();
 
     @ViewChild(CdkVirtualScrollViewport, { static: true }) readonly scrollViewport!: CdkVirtualScrollViewport;
diff --git a/src/lib/listing/table/table.component.html b/src/lib/listing/table/table.component.html
index cb6baed..920483d 100644
--- a/src/lib/listing/table/table.component.html
+++ b/src/lib/listing/table/table.component.html
@@ -29,6 +29,7 @@
     [itemSize]="itemSize"
     [selectionEnabled]="selectionEnabled"
     [tableItemClasses]="tableItemClasses"
+    [helpModeKey]="helpModeKey"
 ></iqser-table-content>
 
 <iqser-scroll-button
diff --git a/src/lib/listing/table/table.component.ts b/src/lib/listing/table/table.component.ts
index 221b1eb..836a44f 100644
--- a/src/lib/listing/table/table.component.ts
+++ b/src/lib/listing/table/table.component.ts
@@ -46,6 +46,7 @@ export class TableComponent<T extends IListable> extends AutoUnsubscribe impleme
     @Input() tableItemClasses?: Record<string, (e: T) => boolean>;
     @Input() itemMouseEnterFn?: (entity: T) => void;
     @Input() itemMouseLeaveFn?: (entity: T) => void;
+    @Input() helpModeKey?: 'dossier-list' | 'document-list';
     @Output() readonly noDataAction = new EventEmitter<void>();
     @ViewChild(TableContentComponent, { static: true }) private readonly _tableContent!: TableContentComponent<T>;