From f207f649c952e19b86fc58cdfe87f6dddf0e9a4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Thu, 2 Dec 2021 02:58:46 +0200
Subject: [PATCH] Workflow bulk actions

---
 src/assets/styles/common-layout.scss          |  4 ++
 .../column-header.component.html              |  5 ++-
 .../column-header/column-header.component.ts  | 38 +++++++++++++++++--
 .../listing/workflow/workflow.component.scss  |  1 +
 4 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/assets/styles/common-layout.scss b/src/assets/styles/common-layout.scss
index 503c58a..f439d4d 100644
--- a/src/assets/styles/common-layout.scss
+++ b/src/assets/styles/common-layout.scss
@@ -328,3 +328,7 @@ section.settings {
 .cdk-overlay-container {
     z-index: 800;
 }
+
+.overflow-hidden {
+    overflow: hidden;
+}
diff --git a/src/lib/listing/workflow/column-header/column-header.component.html b/src/lib/listing/workflow/column-header/column-header.component.html
index dd53d60..350015c 100644
--- a/src/lib/listing/workflow/column-header/column-header.component.html
+++ b/src/lib/listing/workflow/column-header/column-header.component.html
@@ -25,7 +25,10 @@
                   class="all-caps-label"></span>
         </div>
 
-        <ng-container [ngTemplateOutlet]="bulkActions"></ng-container>
+        <div #bulkActionsContainer class="flex-1 overflow-hidden">
+            <ng-container *ngIf="bulkActionsContainerWidth" [ngTemplateOutletContext]="{ maxWidth: bulkActionsContainerWidth }"
+                          [ngTemplateOutlet]="bulkActions"></ng-container>
+        </div>
 
         <iqser-circle-button
             (action)="disableSelection()"
diff --git a/src/lib/listing/workflow/column-header/column-header.component.ts b/src/lib/listing/workflow/column-header/column-header.component.ts
index 66ad157..929b570 100644
--- a/src/lib/listing/workflow/column-header/column-header.component.ts
+++ b/src/lib/listing/workflow/column-header/column-header.component.ts
@@ -1,9 +1,20 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    ChangeDetectorRef,
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    OnInit,
+    Output,
+    TemplateRef,
+    ViewChild,
+} from '@angular/core';
 import { combineLatest, Observable } from 'rxjs';
 import { filter, map, tap } from 'rxjs/operators';
 import { CircleButtonTypes } from '../../../buttons';
 import { IListable } from '../../models';
-import { AutoUnsubscribe, Required } from '../../../utils';
+import { AutoUnsubscribe, Debounce, Required } from '../../../utils';
 import { WorkflowColumn } from '../workflow.component';
 import { ListingService } from '../../services';
 
@@ -24,7 +35,11 @@ export class ColumnHeaderComponent<T extends IListable, K extends string> extend
     allSelected$!: Observable<boolean>;
     indeterminate$!: Observable<boolean>;
 
-    constructor(readonly listingService: ListingService<T>) {
+    bulkActionsContainerWidth?: number;
+
+    @ViewChild('bulkActionsContainer') bulkActionsContainer?: ElementRef;
+
+    constructor(readonly listingService: ListingService<T>, private readonly _changeRef: ChangeDetectorRef) {
         super();
     }
 
@@ -58,6 +73,9 @@ export class ColumnHeaderComponent<T extends IListable, K extends string> extend
     enableSelection(): void {
         this.selectionColumn = this.column;
         this.selectionColumnChange.emit(this.selectionColumn);
+        setTimeout(() => {
+            this._setupResizeObserver();
+        }, 0);
     }
 
     disableSelection(): void {
@@ -75,4 +93,18 @@ export class ColumnHeaderComponent<T extends IListable, K extends string> extend
     selectNone(): void {
         this.listingService.setSelected([]);
     }
+
+    @Debounce(30)
+    private _updateBulkActionsContainerWidth(entry: ResizeObserverEntry): void {
+        this.bulkActionsContainerWidth = entry.contentRect.width;
+        this._changeRef.markForCheck();
+    }
+
+    private _setupResizeObserver(): void {
+        const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+            this._updateBulkActionsContainerWidth(entries[0]);
+        });
+
+        observer.observe(this.bulkActionsContainer?.nativeElement);
+    }
 }
diff --git a/src/lib/listing/workflow/workflow.component.scss b/src/lib/listing/workflow/workflow.component.scss
index a7978cb..cb71b21 100644
--- a/src/lib/listing/workflow/workflow.component.scss
+++ b/src/lib/listing/workflow/workflow.component.scss
@@ -80,6 +80,7 @@
 
     &.disabled {
         background-color: var(--iqser-grey-6);
+        border-color: var(--iqser-grey-6);
         color: var(--iqser-disabled);
     }