feat: add dg config

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/Datagrid.config.ts

@@ -0,0 +1,46 @@
+import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
+import { DatagridContainerProps } from "../typings/DatagridProps";
+
+/** Config for static values that don't change at runtime. */
+export interface DatagridConfig {
+    checkboxColumnEnabled: boolean;
+    filtersChannelName: string;
+    id: string;
+    name: string;
+    refreshIntervalMs: number;
+    selectAllCheckboxEnabled: boolean;
+    selectionEnabled: boolean;
+    selectorColumnEnabled: boolean;
+    settingsStorageEnabled: boolean;
+}
+
+export function datagridConfig(props: DatagridContainerProps): DatagridConfig {
+    const id = `${props.name}:Datagrid@${generateUUID()}`;
+
+    return Object.freeze({
+        checkboxColumnEnabled: isCheckboxColumnEnabled(props),
+        filtersChannelName: `${id}:events`,
+        id,
+        name: props.name,
+        refreshIntervalMs: props.refreshInterval * 1000,
+        selectAllCheckboxEnabled: props.showSelectAllToggle,
+        selectionEnabled: isSelectionEnabled(props),
+        selectorColumnEnabled: props.columnsHidable,
+        settingsStorageEnabled: isSettingsStorageEnabled(props)
+    });
+}
+
+function isSelectionEnabled(props: DatagridContainerProps): boolean {
+    return props.itemSelection !== undefined;
+}
+
+function isCheckboxColumnEnabled(props: DatagridContainerProps): boolean {
+    if (!props.itemSelection) return false;
+    return props.itemSelectionMethod === "checkbox";
+}
+
+function isSettingsStorageEnabled(props: DatagridContainerProps): boolean {
+    if (props.configurationStorageType === "localStorage") return true;
+    if (props.configurationStorageType === "attribute" && props.configurationAttribute) return true;
+    return false;
+}

packages/pluggableWidgets/datagrid-web/src/Datagrid.depsContainer.ts

@@ -14,19 +14,18 @@ import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
 import { DerivedPropsGate, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
 import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
-
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { Container, injected, token } from "brandi";
 import { useEffect } from "react";
 import { DatagridContainerProps, SelectionCounterPositionEnum } from "../typings/DatagridProps";
 import { DatasourceParamsController } from "./controllers/DatasourceParamsController";
 import { DerivedLoaderController, DerivedLoaderControllerConfig } from "./controllers/DerivedLoaderController";
 import { PaginationConfig, PaginationController } from "./controllers/PaginationController";
+import { datagridConfig, DatagridConfig } from "./Datagrid.config";
 import { ColumnGroupStore } from "./helpers/state/ColumnGroupStore";
 import { GridBasicData } from "./helpers/state/GridBasicData";
 import { GridPersonalizationStore } from "./helpers/state/GridPersonalizationStore";
 import { DatagridSetupService } from "./services/DatagridSetupService";
-import { StaticInfo } from "./typings/static-info";
 import { SelectAllBarViewModel } from "./view-models/SelectAllBarViewModel";
 import { SelectionProgressDialogViewModel } from "./view-models/SelectionProgressDialogViewModel";
 
@@ -61,6 +60,7 @@ type MainGateProps = Pick<
 /** Tokens to resolve dependencies from the container. */
 export const TOKENS = {
     basicDate: token<GridBasicData>("GridBasicData"),
+    config: token<DatagridConfig>("DatagridConfig"),
     columnsStore: token<ColumnGroupStore>("ColumnGroupStore"),
     combinedFilter: token<CombinedFilter>("CombinedFilter"),
     combinedFilterConfig: token<CombinedFilterConfig>("CombinedFilterKey"),
@@ -81,7 +81,6 @@ export const TOKENS = {
     selectionCounter: token<SelectionCounterViewModel>("SelectionCounterViewModel"),
     selectionCounterPosition: token<SelectionCounterPositionEnum>("SelectionCounterPositionEnum"),
     setupService: token<SetupComponentHost>("DatagridSetupHost"),
-    staticInfo: token<StaticInfo>("StaticInfo"),
     enableSelectAll: token<boolean>("enableSelectAll"),
     selectAllProgressService: token<TaskProgressService>("SelectAllProgressService"),
     selectAllGate: token<DerivedPropsGate<SelectAllGateProps>>("SelectAllGateForProps"),
@@ -91,7 +90,7 @@ export const TOKENS = {
 };
 
 /** Deps injections */
-injected(ColumnGroupStore, TOKENS.setupService, TOKENS.mainGate, TOKENS.staticInfo, TOKENS.filterHost);
+injected(ColumnGroupStore, TOKENS.setupService, TOKENS.mainGate, TOKENS.config, TOKENS.filterHost);
 injected(GridBasicData, TOKENS.mainGate);
 injected(CombinedFilter, TOKENS.setupService, TOKENS.combinedFilterConfig);
 injected(WidgetFilterAPI, TOKENS.parentChannelName, TOKENS.filterHost);
@@ -138,7 +137,7 @@ class DatagridContainer extends Container {
      * Setup container bindings.
      * @remark Make sure not to bind things that already exist in root container.
      */
-    init(props: MainGateProps, root: RootContainer, selectAllModule: Container): DatagridContainer {
+    init(props: DatagridContainerProps, root: RootContainer, selectAllModule: Container): DatagridContainer {
         this.extend(root);
 
         // Connect select all module
@@ -161,6 +160,10 @@ class DatagridContainer extends Container {
         this.bind(TOKENS.mainGate).toConstant(gateProvider.gate);
         this.bind(TOKENS.queryGate).toConstant(gateProvider.gate);
 
+        // Bind config
+        const config = datagridConfig(props);
+        this.bind(TOKENS.config).toConstant(config);
+
         // Columns store
         this.bind(TOKENS.columnsStore).toInstance(ColumnGroupStore).inSingletonScope();
 
@@ -192,9 +195,7 @@ class DatagridContainer extends Container {
         this.bind(TOKENS.paginationService).toInstance(PaginationController).inSingletonScope();
 
         // Events channel for child widgets
-        this.bind(TOKENS.parentChannelName)
-            .toInstance(() => `Datagrid@${generateUUID()}`)
-            .inSingletonScope();
+        this.bind(TOKENS.parentChannelName).toConstant(config.filtersChannelName);
 
         // Loader view model
         this.bind(TOKENS.loaderViewModel).toInstance(DerivedLoaderController).inSingletonScope();
@@ -208,12 +209,6 @@ class DatagridContainer extends Container {
         // Selection progress dialog view model
         this.bind(TOKENS.selectionDialogViewModel).toInstance(SelectionProgressDialogViewModel).inSingletonScope();
 
-        // Bind static info
-        this.bind(TOKENS.staticInfo).toConstant({
-            name: props.name,
-            filtersChannelName: this.get(TOKENS.parentChannelName)
-        });
-
         // Bind refresh interval
         this.bind(TOKENS.refreshInterval).toConstant(props.refreshInterval * 1000);
 
@@ -246,7 +241,7 @@ class DatagridContainer extends Container {
         // Make sure essential services are created upfront
         this.get(TOKENS.paramsService);
         this.get(TOKENS.paginationService);
-        if (this.isSettingsStorageEnabled(props)) {
+        if (config.settingsStorageEnabled) {
             this.get(TOKENS.personalizationService);
         }
 
@@ -256,12 +251,6 @@ class DatagridContainer extends Container {
         return this;
     }
 
-    private isSettingsStorageEnabled(props: MainGateProps): boolean {
-        if (props.configurationStorageType === "localStorage") return true;
-        if (props.configurationStorageType === "attribute" && props.configurationAttribute) return true;
-        return false;
-    }
-
     setProps = (_props: MainGateProps): void => {
         throw new Error(`${this.id} is not initialized yet`);
     };

packages/pluggableWidgets/datagrid-web/src/deps-hooks.ts

@@ -1,42 +1,24 @@
 import { createInjectionHooks } from "brandi-react";
 import { TOKENS } from "./Datagrid.depsContainer";
 
-const [
-    useBasicData,
-    usePaginationService,
-    useSelectionCounterViewModel,
-    useLoaderViewModel,
-    useColumnsStore,
-    useExportProgressService,
-    useMainGate,
-    useStaticInfo,
-    useDatagridFilterAPI,
-    useSelectAllBarViewModel,
-    useSelectionDialogViewModel
-] = createInjectionHooks(
-    TOKENS.basicDate,
-    TOKENS.paginationService,
-    TOKENS.selectionCounter,
-    TOKENS.loaderViewModel,
-    TOKENS.columnsStore,
-    TOKENS.exportProgressService,
-    TOKENS.mainGate,
-    TOKENS.staticInfo,
-    TOKENS.filterAPI,
-    TOKENS.selectAllBar,
-    TOKENS.selectionDialogViewModel
-);
-
-export {
-    useBasicData,
-    useColumnsStore,
-    useDatagridFilterAPI,
-    useExportProgressService,
-    useLoaderViewModel,
-    useMainGate,
-    usePaginationService,
-    useSelectAllBarViewModel,
-    useSelectionCounterViewModel,
-    useSelectionDialogViewModel,
-    useStaticInfo
-};
+export const [useBasicData] = createInjectionHooks(TOKENS.basicDate);
+
+export const [useDatagridConfig] = createInjectionHooks(TOKENS.config);
+
+export const [usePaginationService] = createInjectionHooks(TOKENS.paginationService);
+
+export const [useSelectionCounterViewModel] = createInjectionHooks(TOKENS.selectionCounter);
+
+export const [useLoaderViewModel] = createInjectionHooks(TOKENS.loaderViewModel);
+
+export const [useColumnsStore] = createInjectionHooks(TOKENS.columnsStore);
+
+export const [useExportProgressService] = createInjectionHooks(TOKENS.exportProgressService);
+
+export const [useMainGate] = createInjectionHooks(TOKENS.mainGate);
+
+export const [useDatagridFilterAPI] = createInjectionHooks(TOKENS.filterAPI);
+
+export const [useSelectAllBarViewModel] = createInjectionHooks(TOKENS.selectAllBar);
+
+export const [useSelectionDialogViewModel] = createInjectionHooks(TOKENS.selectionDialogViewModel);

packages/pluggableWidgets/datagrid-web/src/helpers/useDataGridJSActions.ts

@@ -1,9 +1,9 @@
 import { useOnClearSelectionEvent, useOnResetFiltersEvent } from "@mendix/widget-plugin-external-events/hooks";
-import { useStaticInfo } from "../deps-hooks";
+import { useDatagridConfig } from "../deps-hooks";
 import { SelectActionHelper } from "./SelectActionHelper";
 
 export function useDataGridJSActions(selectActionHelper?: SelectActionHelper): void {
-    const info = useStaticInfo();
+    const info = useDatagridConfig();
     useOnResetFiltersEvent(info.name, info.filtersChannelName);
     useOnClearSelectionEvent({
         widgetName: info.name,