feat: add select all feature

Author: iobuhov

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -311,7 +311,7 @@ $root: ".widget-datagrid";
     justify-content: flex-end;
     white-space: nowrap;
     align-items: baseline;
-    margin: 0 16px;
+    margin: 16px;
     color: $pagination-caption-color;
 
     .paging-status {
@@ -428,7 +428,8 @@ $root: ".widget-datagrid";
         align-items: center;
     }
 
-    &-exporting {
+    &-exporting,
+    &-selecting-all-pages {
         .widget-datagrid-top-bar,
         .widget-datagrid-header,
         .widget-datagrid-content,
@@ -525,7 +526,7 @@ $root: ".widget-datagrid";
 
 .widget-datagrid .widget-datagrid-load-more {
     display: block !important;
-    margin: 0;
+    margin: var(--spacing-small, 8px) 0;
 }
 
 .infinite-loading.widget-datagrid-grid-body {
@@ -563,33 +564,51 @@ $root: ".widget-datagrid";
 :where(#{$root}-pb-start, #{$root}-tb-start, #{$root}-pb-end, #{$root}-tb-end, #{$root}-pb-middle) {
     flex-grow: 1;
     flex-basis: 33.33%;
-    min-height: 20px;
-    height: 54px;
-    padding: var(--spacing-small) 0;
+}
+
+:where(#{$root}-pb-middle) {
+    display: flex;
+    justify-content: center;
 }
 
 :where(#{$root}-pb-start, #{$root}-tb-start) {
-    padding-inline: var(--spacing-medium);
     display: flex;
     align-items: center;
 }
 
-#{$root}-clear-selection {
+#{$root}-btn-link {
     cursor: pointer;
     background: transparent;
     border: none;
-    text-decoration: underline;
     color: var(--link-color);
-    padding: 0;
+    padding: 0.3em 0.5em;
+    border-radius: 6px;
     display: inline-block;
+    white-space: nowrap;
 
-    &:focus:not(:focus-visible) {
-        outline: none;
+    &:hover,
+    &:focus-visible {
+        background-color: var(--brand-primary-50, #e6e7f2);
     }
+}
 
-    &:focus-visible {
-        outline: 1px solid var(--brand-primary, $brand-primary);
-        outline-offset: 2px;
+:where(#{$root}-selection-counter) {
+    display: flex;
+    align-items: center;
+    height: 54px;
+    padding: var(--spacing-small) var(--spacing-medium);
+}
+
+:where(#{$root}-select-all-bar) {
+    grid-column: 1 / -1;
+    background-color: #f0f1f2;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    padding: var(--spacing-smaller, 8px) var(--spacing-medium, 16px);
+
+    #{$root}-spinner {
+        padding: 6.2px;
     }
 }
 

packages/pluggableWidgets/custom-chart-web/src/controllers/ChartPropsController.ts

@@ -1,5 +1,5 @@
 import { EditorStoreState } from "@mendix/shared-charts/main";
-import { DerivedPropsGate, ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { DerivedPropsGate, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { executeAction } from "@mendix/widget-plugin-platform/framework/execute-action";
 import { makeAutoObservable } from "mobx";
 import { Config, Data, Layout } from "plotly.js-dist-min";
@@ -18,14 +18,14 @@ interface ChartPropsControllerSpec {
     editorStateGate: DerivedPropsGate<EditorStoreState>;
 }
 
-export class ChartPropsController implements ReactiveController {
+export class ChartPropsController implements SetupComponent {
     private cleanup: undefined | (() => void) = undefined;
     private editorStateGate: DerivedPropsGate<EditorStoreState>;
     private propsGate: DerivedPropsGate<ControllerProps>;
     private sizeProvider: SizeProvider;
 
-    constructor(host: ReactiveControllerHost, spec: ChartPropsControllerSpec) {
-        host.addController(this);
+    constructor(host: SetupComponentHost, spec: ChartPropsControllerSpec) {
+        host.add(this);
 
         this.editorStateGate = spec.editorStateGate;
         this.propsGate = spec.propsGate;

packages/pluggableWidgets/custom-chart-web/src/controllers/CustomChartControllerHost.ts

@@ -1,17 +1,16 @@
 import { EditorStoreState } from "@mendix/shared-charts/main";
-import { BaseControllerHost } from "@mendix/widget-plugin-mobx-kit/BaseControllerHost";
-import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
-import { ResizeController } from "./ResizeController";
+import { DerivedPropsGate, SetupHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { ChartPropsController } from "./ChartPropsController";
-import { ControllerProps } from "./typings";
 import { PlotlyController } from "./PlotlyController";
+import { ResizeController } from "./ResizeController";
+import { ControllerProps } from "./typings";
 
 interface CustomChartControllerHostSpec {
     propsGate: DerivedPropsGate<ControllerProps>;
     editorStateGate: DerivedPropsGate<EditorStoreState>;
 }
 
-export class CustomChartControllerHost extends BaseControllerHost {
+export class CustomChartControllerHost extends SetupHost {
     resizeCtrl: ResizeController;
     chartPropsController: ChartPropsController;
     plotlyController: PlotlyController;

packages/pluggableWidgets/custom-chart-web/src/controllers/PlotlyController.ts

@@ -1,5 +1,5 @@
-import { ChartProps, PlotlyChart } from "../components/PlotlyChart";
 import { autorun } from "mobx";
+import { ChartProps, PlotlyChart } from "../components/PlotlyChart";
 
 interface PropsProvider {
     mergedProps: ChartProps;
@@ -23,8 +23,6 @@ export class PlotlyController {
         } else {
             const chart = new PlotlyChart(target, this.propsProvider.mergedProps);
 
-            // const [updatePlotlyDebounced, abort] = debounce((props: ChartProps) => chart.update(props), 100);
-
             const dispose = autorun(
                 () => {
                     chart.update(this.propsProvider.mergedProps);

packages/pluggableWidgets/custom-chart-web/src/controllers/ResizeController.ts

@@ -1,14 +1,14 @@
-import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/main";
+import { SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
 import { debounce } from "@mendix/widget-plugin-platform/utils/debounce";
 import { action, makeObservable, observable } from "mobx";
 
-export class ResizeController implements ReactiveController {
+export class ResizeController implements SetupComponent {
     width = 0;
     height = 0;
     private cleanup: undefined | (() => void) = undefined;
 
-    constructor(host: ReactiveControllerHost) {
-        host.addController(this);
+    constructor(host: SetupComponentHost) {
+        host.add(this);
 
         makeObservable(this, {
             width: observable,

packages/pluggableWidgets/datagrid-dropdown-filter-web/src/hocs/withLinkedRefStore.tsx

@@ -3,7 +3,7 @@ import { RefFilterStore } from "@mendix/widget-plugin-dropdown-filter/stores/Ref
 import { FilterAPI, useFilterAPI } from "@mendix/widget-plugin-filtering/context";
 import { BaseStoreProvider } from "@mendix/widget-plugin-filtering/custom-filter-api/BaseStoreProvider";
 import { GateProvider } from "@mendix/widget-plugin-mobx-kit/GateProvider";
-import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
+import { DerivedPropsGate } 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 { AssociationMetaData, ListAttributeValue, ListExpressionValue, ListValue } from "mendix";

packages/pluggableWidgets/datagrid-web/package.json

@@ -50,6 +50,8 @@
         "@mendix/widget-plugin-mobx-kit": "workspace:*",
         "@mendix/widget-plugin-platform": "workspace:*",
         "@radix-ui/react-progress": "^1.1.7",
+        "brandi": "^5.0.0",
+        "brandi-react": "^5.0.0",
         "classnames": "^2.5.1",
         "mobx": "6.12.3",
         "mobx-react-lite": "4.0.7",

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

@@ -3,8 +3,7 @@ import {
     hideNestedPropertiesIn,
     hidePropertiesIn,
     hidePropertyIn,
-    Properties,
-    transformGroupsIntoTabs
+    Properties
 } from "@mendix/pluggable-widgets-tools";
 import {
     container,
@@ -19,11 +18,7 @@ import {
 
 import { ColumnsPreviewType, DatagridPreviewProps } from "../typings/DatagridProps";
 
-export function getProperties(
-    values: DatagridPreviewProps,
-    defaultProperties: Properties,
-    platform: "web" | "desktop"
-): Properties {
+export function getProperties(values: DatagridPreviewProps, defaultProperties: Properties): Properties {
     values.columns.forEach((column, index) => {
         if (column.showContentAs !== "attribute" && !column.sortable && !values.columnsFilterable) {
             hidePropertyIn(defaultProperties, values, "columns", index, "attribute");
@@ -65,15 +60,6 @@ export function getProperties(
         if (column.minWidth !== "manual") {
             hidePropertyIn(defaultProperties, values, "columns", index, "minWidthLimit");
         }
-        if (!values.advanced && platform === "web") {
-            hideNestedPropertiesIn(defaultProperties, values, "columns", index, [
-                "columnClass",
-                "sortable",
-                "resizable",
-                "draggable",
-                "hidable"
-            ]);
-        }
     });
 
     if (values.pagination === "buttons") {
@@ -125,28 +111,6 @@ export function getProperties(
         "columns"
     );
 
-    if (platform === "web") {
-        if (!values.advanced) {
-            hidePropertiesIn(defaultProperties, values, [
-                "pagination",
-                "pagingPosition",
-                "showEmptyPlaceholder",
-                "rowClass",
-                "columnsSortable",
-                "columnsDraggable",
-                "columnsResizable",
-                "columnsHidable",
-                "configurationAttribute",
-                "onConfigurationChange",
-                "filterSectionTitle"
-            ]);
-        }
-
-        transformGroupsIntoTabs(defaultProperties);
-    } else {
-        hidePropertyIn(defaultProperties, values, "advanced");
-    }
-
     if (values.configurationStorageType === "localStorage") {
         hidePropertiesIn(defaultProperties, values, ["configurationAttribute", "onConfigurationChange"]);
     }
@@ -172,8 +136,9 @@ function hideSelectionProperties(defaultProperties: Properties, values: Datagrid
     if (itemSelection !== "Multi") {
         hidePropertiesIn(defaultProperties, values, [
             "keepSelection",
-            "selectionCountPosition",
-            "clearSelectionButtonLabel"
+            "selectionCounterPosition",
+            "clearSelectionButtonLabel",
+            "enableSelectAll"
         ]);
     }
 }