[ACS-6489] Add resizable option for column data model (#9220)

* [ACS-6489] Add resizable option for column data model * [ACS-6489] CR fixes
Alfresco · Jan 25, 2024 · 2c0ad71 · 2c0ad71
1 parent 62bc842
commit 2c0ad71
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 3 deletions.
diff --git a/docs/core/components/data-column.component.md b/docs/core/components/data-column.component.md
@@ -48,6 +48,7 @@ Defines column properties for DataTable, Tasklist, Document List and other compo
 | cssClass | `string` |  | Additional CSS class to be applied to column (header and cells). |
 | customData | `any` |  | You can specify any custom data which can be used by any specific feature |
 | draggable | `boolean` | false | Enable drag and drop for header column |
+| resizable | `boolean` | true | Enable column resizing |
 | editable | `boolean` | false | Toggles the editing support of the column data. |
 | focus | `boolean` | true | Enable or disable cell focus |
 | format | `string` |  | Value format (if supported by the parent component), for example format of the date. |

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
@@ -96,7 +96,7 @@
                     </span>
                 </div>
                 <div
-                    *ngIf="isResizingEnabled"
+                    *ngIf="isResizingEnabled && col.resizable"
                     adf-resize-handle
                     class="adf-datatable__resize-handle"
                     [resizableContainer]="resizableElement">

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.spec.ts
@@ -1694,6 +1694,10 @@ describe('Column Resizing', () => {
 
     const getResizeHandler = (): HTMLDivElement => fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
 
+    const getResizeHandlersCount = (): number => {
+        const resizeHandlers = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable__resize-handle');
+        return resizeHandlers.length;
+    };
 
     const testClassesAfterResizing = (headerColumnsSelector = '.adf-datatable-cell-header', excludedClass = 'adf-datatable__cursor--pointer') => {
         dataTable.isResizingEnabled = true;
@@ -1744,6 +1748,22 @@ describe('Column Resizing', () => {
         });
     });
 
+    it('should display resize handle for each column by default', () => {
+        dataTable.isResizingEnabled = true;
+        fixture.detectChanges();
+
+        expect(getResizeHandlersCount()).toBe(2);
+    });
+
+    it('should NOT display resize handle for the column when the column has resizable param set to false', () => {
+        dataTable.isResizingEnabled = true;
+        dataTableSchema[0].resizable = false;
+        dataTable.data = new ObjectDataTableAdapter([...data], [...dataTableSchema]);
+        fixture.detectChanges();
+
+        expect(getResizeHandlersCount()).toBe(1);
+    });
+
     it('should display resize handle when the feature is Enabled [isResizingEnabled=true]', () => {
         dataTable.isResizingEnabled = true;
 

diff --git a/lib/core/src/lib/datatable/data-column/data-column.component.stories.ts b/lib/core/src/lib/datatable/data-column/data-column.component.stories.ts
@@ -85,6 +85,20 @@ export default {
                 }
             }
         },
+        resizable: {
+            description: 'Toggles resize for column.',
+            control: { type: 'boolean' },
+            defaultValue: true,
+            table: {
+                category: 'Component Inputs',
+                type: {
+                    summary: 'boolean'
+                },
+                defaultValue: {
+                    summary: true
+                }
+            }
+        },
         editable: {
             description: 'Toggles the editing support of the column data.',
             control: { type: 'boolean', disable: true },
@@ -328,8 +342,8 @@ const template: Story<DataColumnComponent> = (args: DataColumnComponent & { rows
     template: `
         <adf-datatable [rows]="rows">
             <data-columns>
-                <data-column 
-                    [key]="key" 
+                <data-column
+                    [key]="key"
                     [type]="type"
                     [title]="title"
                     [editable]="editable"

diff --git a/lib/core/src/lib/datatable/data-column/data-column.component.ts b/lib/core/src/lib/datatable/data-column/data-column.component.ts
@@ -61,6 +61,10 @@ export class DataColumnComponent implements OnInit {
     @Input()
     draggable: boolean = false;
 
+    /** Enable resize for column */
+    @Input()
+    resizable = true;
+
     /** Hide column */
     @Input()
     isHidden: boolean = false;

diff --git a/lib/core/src/lib/datatable/data/data-column.model.ts b/lib/core/src/lib/datatable/data/data-column.model.ts
@@ -37,6 +37,7 @@ export interface DataColumn<T = unknown> {
     sortingKey?: string;
     header?: TemplateRef<any>;
     draggable?: boolean;
+    resizable?: boolean;
     isHidden?: boolean;
     width?: number;
     customData?: T;

diff --git a/lib/core/src/lib/datatable/data/object-datacolumn.model.ts b/lib/core/src/lib/datatable/data/object-datacolumn.model.ts
@@ -35,6 +35,7 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
     sortingKey?: string;
     header?: TemplateRef<any>;
     draggable: boolean;
+    resizable: boolean;
     isHidden: boolean;
     customData?: T;
     width?: number;
@@ -58,6 +59,7 @@ export class ObjectDataColumn<T = unknown> implements DataColumn<T> {
         this.sortingKey = input.sortingKey;
         this.header = input.header;
         this.draggable = input.draggable ?? false;
+        this.resizable = input.resizable ?? true;
         this.isHidden = input.isHidden ?? false;
         this.customData = input.customData;
         this.width = input.width;

diff --git a/lib/core/src/lib/mock/data-column.mock.ts b/lib/core/src/lib/mock/data-column.mock.ts
@@ -36,6 +36,7 @@ export const getDataColumnMock = <T = unknown>(
     sortingKey: 'sortingKey',
     header: undefined,
     draggable: false,
+    resizable: true,
     isHidden: false,
     customData: undefined,
     ...column

diff --git a/lib/extensions/src/lib/config/document-list.extensions.ts b/lib/extensions/src/lib/config/document-list.extensions.ts
@@ -50,4 +50,5 @@ export interface DocumentListPresetRef extends ExtensionElement {
         visible?: string;
     };
     draggable?: boolean;
+    resizable?: boolean;
 }
diff --git a/lib/extensions/src/lib/config/schema/plugin-extension.schema.json b/lib/extensions/src/lib/config/schema/plugin-extension.schema.json
@@ -565,6 +565,10 @@
         "desktopOnly": {
           "description": "Display column only for large screens",
           "type": "boolean"
+        },
+        "resizable": {
+          "description": "Toggles resizable state of the column",
+          "type": "boolean"
         }
       }
     }