refactor: improve naming, consistency and clean up

Author: yordan-st

packages/pluggableWidgets/datagrid-web/src/components/ColumnContainer.tsx

@@ -14,31 +14,30 @@ export const ColumnContainer = observer(function ColumnContainer(props: ColumnCo
     const { columnsFilterable, id: gridId } = useDatagridConfig();
     const { columnFilters } = useColumnsStore();
     const { canSort, columnId, setHeaderElementRef, columnIndex, canResize, sortDir, header } = useColumn();
-    const { draggableProps, dropTarget, dragging } = useColumnHeaderVM();
-
+    const vm = useColumnHeaderVM();
     const caption = header.trim();
 
     return (
         <div
             aria-sort={getAriaSort(canSort, sortDir)}
             className={classNames("th", {
-                [`drop-${dropTarget?.[1]}`]: columnId === dropTarget?.[0],
-                dragging: columnId === dragging?.[1],
-                "dragging-over-self": columnId === dragging?.[1] && !dropTarget
+                [`drop-${vm.dropTarget?.[1]}`]: columnId === vm.dropTarget?.[0],
+                dragging: columnId === vm.dragging?.[1],
+                "dragging-over-self": columnId === vm.dragging?.[1] && !vm.dropTarget
             })}
             role="columnheader"
             style={!canSort ? { cursor: "unset" } : undefined}
             title={caption}
             ref={ref => setHeaderElementRef(ref)}
             data-column-id={columnId}
-            onDrop={draggableProps.onDrop}
-            onDragEnter={draggableProps.onDragEnter}
-            onDragOver={draggableProps.onDragOver}
+            onDrop={vm.handleOnDrop}
+            onDragEnter={vm.handleDragEnter}
+            onDragOver={vm.handleDragOver}
         >
             <div className={classNames("column-container")} id={`${gridId}-column${columnId}`}>
                 <ColumnHeader />
                 {columnsFilterable && (
-                    <div className="filter" style={{ pointerEvents: dragging ? "none" : undefined }}>
+                    <div className="filter" style={{ pointerEvents: vm.dragging ? "none" : undefined }}>
                         {columnFilters[columnIndex]?.renderFilterWidgets()}
                     </div>
                 )}

packages/pluggableWidgets/datagrid-web/src/components/ColumnHeader.tsx

@@ -13,24 +13,20 @@ interface DragHandleProps {
 }
 
 export const ColumnHeader = observer(function ColumnHeader(): ReactElement {
-    const { draggableProps, dragging } = useColumnHeaderVM();
     const { header, canSort, alignment, toggleSort } = useColumn();
     const caption = header.trim();
     const sortProps = canSort ? getSortProps(toggleSort) : null;
+    const vm = useColumnHeaderVM();
 
     return (
         <div
             className={classNames("column-header", { clickable: canSort }, `align-column-${alignment}`)}
-            style={{ pointerEvents: dragging ? "none" : undefined }}
+            style={{ pointerEvents: vm.dragging ? "none" : undefined }}
             {...sortProps}
             aria-label={canSort ? "sort " + caption : caption}
         >
-            {draggableProps.draggable && (
-                <DragHandle
-                    draggable={draggableProps.draggable}
-                    onDragStart={draggableProps.onDragStart}
-                    onDragEnd={draggableProps.onDragEnd}
-                />
+            {vm.isDraggable && (
+                <DragHandle draggable={vm.isDraggable} onDragStart={vm.handleDragStart} onDragEnd={vm.handleDragEnd} />
             )}
             <span className="column-caption">{caption.length > 0 ? caption : "\u00a0"}</span>
             {canSort ? <SortIcon /> : null}

packages/pluggableWidgets/datagrid-web/src/features/column/HeaderDragnDrop.store.ts

@@ -1,6 +1,11 @@
 import { action, makeAutoObservable } from "mobx";
 import { ColumnId } from "../../typings/GridColumn";
 
+/**
+ * MobX store for managing drag & drop state of column headers.
+ * Tracks which column is being dragged and where it can be dropped.
+ * @injectable
+ */
 export class HeaderDragnDropStore {
     private _dragOver: [ColumnId, "before" | "after"] | undefined = undefined;
     private _isDragging: [ColumnId | undefined, ColumnId, ColumnId | undefined] | undefined = undefined;

packages/pluggableWidgets/datagrid-web/src/features/column/HeaderDragnDrop.viewModel.ts

@@ -1,12 +1,13 @@
 import { makeAutoObservable } from "mobx";
-import { DragEvent, DragEventHandler } from "react";
+import { DragEvent } from "react";
 import { HeaderDragnDropStore } from "./HeaderDragnDrop.store";
 import { ColumnId, GridColumn } from "../../typings/GridColumn";
 import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
 
 /**
  * View model for a single column header drag & drop interactions.
  * Encapsulates previous `useDraggable` hook logic and uses MobX store for shared drag state.
+ * @injectable
  */
 export class HeaderDragnDropViewModel {
     constructor(
@@ -30,28 +31,6 @@ export class HeaderDragnDropViewModel {
         return this.config.columnsDraggable && this.column.canDrag;
     }
 
-    /** Handlers exposed to the component. */
-    get draggableProps(): {
-        draggable?: boolean;
-        onDragStart?: DragEventHandler;
-        onDragOver?: DragEventHandler;
-        onDrop?: DragEventHandler;
-        onDragEnter?: DragEventHandler;
-        onDragEnd?: DragEventHandler;
-    } {
-        if (!this.isDraggable) {
-            return {};
-        }
-        return {
-            draggable: true,
-            onDragStart: this.handleDragStart,
-            onDragOver: this.handleDragOver,
-            onDrop: this.handleOnDrop,
-            onDragEnter: this.handleDragEnter,
-            onDragEnd: this.handleDragEnd
-        };
-    }
-
     handleDragStart = (e: DragEvent<HTMLDivElement>): void => {
         const elt = (e.target as HTMLDivElement).closest(".th") as HTMLDivElement;
         if (!elt) {

packages/pluggableWidgets/datagrid-web/src/model/containers/Datagrid.container.ts

@@ -22,6 +22,7 @@ import { createCellEventsController } from "../../features/row-interaction/CellE
 import { creteCheckboxEventsController } from "../../features/row-interaction/CheckboxEventsController";
 import { SelectAllModule } from "../../features/select-all/SelectAllModule.container";
 import { ColumnGroupStore } from "../../helpers/state/ColumnGroupStore";
+import { HeaderDragnDropStore } from "../../features/column/HeaderDragnDrop.store";
 import { HeaderDragnDropViewModel } from "../../features/column/HeaderDragnDrop.viewModel";
 import { GridBasicData } from "../../helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "../../helpers/state/GridPersonalizationStore";
@@ -86,6 +87,7 @@ injected(
 );
 
 // drag and drop
+injected(HeaderDragnDropStore);
 injected(HeaderDragnDropViewModel, DG.headerDragDrop, CORE.columnsStore, CORE.config, CORE.column);
 
 export class DatagridContainer extends Container {
@@ -99,7 +101,9 @@ export class DatagridContainer extends Container {
         // Columns store
         this.bind(CORE.columnsStore).toInstance(ColumnGroupStore).inSingletonScope();
         // Drag and Drop store
-        this.bind(DG.columnHeaderVM).toInstance(HeaderDragnDropViewModel).inSingletonScope();
+        this.bind(DG.headerDragDrop).toInstance(HeaderDragnDropStore).inSingletonScope();
+        // Drag and Drop view model
+        this.bind(DG.headerDragnDropVM).toInstance(HeaderDragnDropViewModel).inSingletonScope();
         // Query service
         this.bind(DG.query).toInstance(DatasourceService).inSingletonScope();
         // Pagination service
@@ -170,9 +174,6 @@ export class DatagridContainer extends Container {
         // Config
         this.bind(CORE.config).toConstant(config);
 
-        // Columns draggable setting
-        this.bind(DG.columnsDraggable).toConstant(config.columnsDraggable);
-
         // Connect select all module
         this.bind(SA_TOKENS.progressService).toConstant(selectAllModule.get(SA_TOKENS.progressService));
         this.bind(SA_TOKENS.selectionDialogVM).toConstant(selectAllModule.get(SA_TOKENS.selectionDialogVM));

packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts

@@ -20,7 +20,7 @@ export const [useRowClass] = createInjectionHooks(DG.rowClass);
 export const [useDatagridRootVM] = createInjectionHooks(DG.datagridRootVM);
 export const [useRows] = createInjectionHooks(CORE.rows);
 export const [useSelectActions] = createInjectionHooks(DG.selectActions);
-export const [useColumnHeaderVM] = createInjectionHooks(DG.columnHeaderVM);
+export const [useColumnHeaderVM] = createInjectionHooks(DG.headerDragnDropVM);
 export const [useClickActionHelper] = createInjectionHooks(DG.clickActionHelper);
 export const [useFocusService] = createInjectionHooks(DG.focusService);
 export const [useCheckboxEventsHandler] = createInjectionHooks(DG.checkboxEventsHandler);

packages/pluggableWidgets/datagrid-web/src/model/tokens.ts

@@ -134,8 +134,7 @@ export const DG_TOKENS = {
     focusService: token<FocusTargetController>("@service:FocusTargetController"),
     checkboxEventsHandler: token<CheckboxEventsController>("@service:CheckboxEventsController"),
     headerDragDrop: token<HeaderDragnDropStore>("@store:HeaderDragnDropStore"),
-    columnsDraggable: token<boolean>("@const:columnsDraggable"),
-    columnHeaderVM: token<HeaderDragnDropViewModel>("ColumnHeaderViewModel"),
+    headerDragnDropVM: token<HeaderDragnDropViewModel>("@viewmodel:ColumnHeaderViewModel"),
     cellEventsHandler: token<CellEventsController>("@service:CellEventsController")
 };