Skip to content

Commit a72742a

Browse files
iobuhoviobuhov
committed
feat: select all v1
1 parent cce5535 commit a72742a

File tree

16 files changed

+128
-158
lines changed

16 files changed

+128
-158
lines changed

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

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -420,7 +420,8 @@ $root: ".widget-datagrid";
420420
align-items: center;
421421
}
422422

423-
&-exporting {
423+
&-exporting,
424+
&-selecting-all-pages {
424425
.widget-datagrid-top-bar,
425426
.widget-datagrid-header,
426427
.widget-datagrid-content,
@@ -433,30 +434,6 @@ $root: ".widget-datagrid";
433434
}
434435
}
435436

436-
// Better positioning for multi-page selection modal
437-
// &-selecting-all-pages {
438-
// .widget-datagrid-modal {
439-
// &-overlay {
440-
// position: fixed;
441-
// top: 0;
442-
// right: 0;
443-
// bottom: 0;
444-
// left: 0;
445-
// }
446-
447-
// &-main {
448-
// position: fixed;
449-
// top: 0;
450-
// left: 0;
451-
// right: 0;
452-
// bottom: 0;
453-
// display: flex;
454-
// align-items: center;
455-
// justify-content: center;
456-
// }
457-
// }
458-
// }
459-
460437
&-col-select input:focus-visible {
461438
outline-offset: 0;
462439
}
@@ -579,19 +556,32 @@ $root: ".widget-datagrid";
579556
:where(#{$root}-pb-start) {
580557
margin-block: var(--spacing-medium);
581558
padding-inline: var(--spacing-medium);
559+
display: flex;
560+
align-items: center;
582561
}
583562

584-
#{$root}-clear-selection {
563+
#{$root}-btn-invisible {
585564
cursor: pointer;
586565
background: transparent;
587566
border: none;
588-
text-decoration: underline;
589567
color: var(--link-color);
590-
padding: 0;
568+
padding: 0.3em;
569+
border-radius: 6px;
591570
display: inline-block;
571+
572+
&:hover,
573+
&:focus-visible {
574+
background-color: #e6e7f2;
575+
}
592576
}
577+
593578
:where(#{$root}-select-all-bar) {
594579
grid-column: 1 / -1;
580+
background-color: #f0f1f2;
581+
display: flex;
582+
flex-flow: row nowrap;
583+
align-items: center;
584+
padding: var(--spacing-smaller, 8px) var(--spacing-medium, 16px);
595585
}
596586

597587
@keyframes skeleton-loading {

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

Lines changed: 2 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,7 @@ import {
33
hideNestedPropertiesIn,
44
hidePropertiesIn,
55
hidePropertyIn,
6-
Properties,
7-
transformGroupsIntoTabs
6+
Properties
87
} from "@mendix/pluggable-widgets-tools";
98
import {
109
container,
@@ -22,7 +21,7 @@ import { ColumnsPreviewType, DatagridPreviewProps } from "../typings/DatagridPro
2221
export function getProperties(
2322
values: DatagridPreviewProps,
2423
defaultProperties: Properties,
25-
platform: "web" | "desktop"
24+
_: "web" | "desktop"
2625
): Properties {
2726
values.columns.forEach((column, index) => {
2827
if (column.showContentAs !== "attribute" && !column.sortable && !values.columnsFilterable) {
@@ -65,15 +64,6 @@ export function getProperties(
6564
if (column.minWidth !== "manual") {
6665
hidePropertyIn(defaultProperties, values, "columns", index, "minWidthLimit");
6766
}
68-
if (!values.advanced && platform === "web") {
69-
hideNestedPropertiesIn(defaultProperties, values, "columns", index, [
70-
"columnClass",
71-
"sortable",
72-
"resizable",
73-
"draggable",
74-
"hidable"
75-
]);
76-
}
7767
});
7868
if (values.pagination === "buttons") {
7969
hidePropertyIn(defaultProperties, values, "showNumberOfRows");
@@ -124,28 +114,6 @@ export function getProperties(
124114
"columns"
125115
);
126116

127-
if (platform === "web") {
128-
if (!values.advanced) {
129-
hidePropertiesIn(defaultProperties, values, [
130-
"pagination",
131-
"pagingPosition",
132-
"showEmptyPlaceholder",
133-
"rowClass",
134-
"columnsSortable",
135-
"columnsDraggable",
136-
"columnsResizable",
137-
"columnsHidable",
138-
"configurationAttribute",
139-
"onConfigurationChange",
140-
"filterSectionTitle"
141-
]);
142-
}
143-
144-
transformGroupsIntoTabs(defaultProperties);
145-
} else {
146-
hidePropertyIn(defaultProperties, values, "advanced");
147-
}
148-
149117
if (values.configurationStorageType === "localStorage") {
150118
hidePropertiesIn(defaultProperties, values, ["configurationAttribute", "onConfigurationChange"]);
151119
}

‎packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx‎

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,11 @@ import { ColumnsPreviewType, DatagridPreviewProps } from "typings/DatagridProps"
2020
import { Cell } from "./components/Cell";
2121
import { Widget } from "./components/Widget";
2222
import { ColumnPreview } from "./helpers/ColumnPreview";
23-
import { DatagridContext } from "./helpers/root-context";
23+
import { DatagridContext, DatagridRootScope } from "./helpers/root-context";
2424
import { useSelectActionHelper } from "./helpers/SelectActionHelper";
2525
import { GridBasicData } from "./helpers/state/GridBasicData";
26+
import { SelectAllBarViewModel } from "./helpers/state/SelectAllBarViewModel";
27+
import { SelectionProgressDialogViewModel } from "./helpers/state/SelectionProgressDialogViewModel";
2628
import "./ui/DatagridPreview.scss";
2729

2830
// Fix type definition for Selectable
@@ -98,6 +100,7 @@ export function preview(props: DatagridPreviewProps): ReactElement {
98100
const query = new DatasourceController(host, { gate: gateProvider.gate });
99101
const selectionCountStore = new SelectionCountStore(gateProvider.gate as any);
100102
const selectAllController = new SelectAllController(host, { gate: gateProvider.gate, pageSize: 2, query });
103+
const selectAllProgressStore = new ProgressStore();
101104
return {
102105
basicData,
103106
selectionHelper: undefined,
@@ -106,10 +109,19 @@ export function preview(props: DatagridPreviewProps): ReactElement {
106109
checkboxEventsController: eventsController,
107110
focusController,
108111
selectionCountStore,
109-
selectAllProgressStore: new ProgressStore(),
110-
selectAllController,
111-
rootStore: {} as any // Mock for preview
112-
};
112+
selectAllProgressStore,
113+
selectAllBarViewModel: new SelectAllBarViewModel(
114+
host,
115+
gateProvider.gate as any,
116+
selectAllController,
117+
selectionCountStore
118+
),
119+
selectionProgressDialogViewModel: new SelectionProgressDialogViewModel(
120+
gateProvider.gate as any,
121+
selectAllProgressStore,
122+
selectAllController
123+
)
124+
} satisfies DatagridRootScope;
113125
});
114126

115127
return (

‎packages/pluggableWidgets/datagrid-web/src/Datagrid.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,6 @@ const Container = observer((props: Props): ReactElement => {
6161
const checkboxEventsController = useCheckboxEventsController(selectActionHelper, focusController);
6262

6363
const ctx = useConst(() => {
64-
rootStore.basicData.setSelectionHelper(selectionHelper);
6564
const scope: DatagridRootScope = {
6665
basicData: rootStore.basicData,
6766
selectionHelper,
@@ -70,8 +69,9 @@ const Container = observer((props: Props): ReactElement => {
7069
checkboxEventsController,
7170
focusController,
7271
selectionCountStore: rootStore.selectionCountStore,
73-
selectAllController: rootStore.selectAllController,
74-
selectAllProgressStore: rootStore.selectAllProgressStore
72+
selectAllProgressStore: rootStore.selectAllProgressStore,
73+
selectAllBarViewModel: rootStore.selectAllBarViewModel,
74+
selectionProgressDialogViewModel: rootStore.selectionProgressDialogViewModel
7575
};
7676

7777
return scope;

‎packages/pluggableWidgets/datagrid-web/src/Datagrid.xml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -411,14 +411,14 @@
411411
<caption>Select all</caption>
412412
<description>This caption used when total count is available.</description>
413413
<translations>
414-
<translation lang="en_US">Select all %d items in the data source.</translation>
414+
<translation lang="en_US">Select all %d rows in the data source</translation>
415415
</translations>
416416
</property>
417417
<property key="selectRemainingTemplate" type="textTemplate">
418418
<caption>2</caption>
419419
<description />
420420
<translations>
421-
<translation lang="en_US">Select remaining items in the data source.</translation>
421+
<translation lang="en_US">Select remaining rows in the data source</translation>
422422
</translations>
423423
</property>
424424
<property key="clearSelectionCaption" type="textTemplate">

‎packages/pluggableWidgets/datagrid-web/src/components/CheckboxColumnHeader.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@ import { createElement, Fragment, ReactElement } from "react";
44
import { useDatagridRootScope } from "../helpers/root-context";
55

66
export function CheckboxColumnHeader(): ReactElement {
7-
const { selectActionHelper, basicData } = useDatagridRootScope();
7+
const { selectActionHelper, basicData, selectionHelper } = useDatagridRootScope();
88
const { showCheckboxColumn, showSelectAllToggle, onSelectAll } = selectActionHelper;
9-
const { selectionStatus, selectAllRowsLabel } = basicData;
9+
const { selectAllRowsLabel } = basicData;
1010

1111
if (showCheckboxColumn === false) {
1212
return <Fragment />;
@@ -15,7 +15,11 @@ export function CheckboxColumnHeader(): ReactElement {
1515
return (
1616
<div className="th widget-datagrid-col-select" role="columnheader">
1717
{showSelectAllToggle && (
18-
<Checkbox status={selectionStatus} onChange={onSelectAll} aria-label={selectAllRowsLabel} />
18+
<Checkbox
19+
status={selectionHelper?.type === "Multi" ? selectionHelper.selectionStatus : "none"}
20+
onChange={onSelectAll}
21+
aria-label={selectAllRowsLabel}
22+
/>
1923
)}
2024
</div>
2125
);

‎packages/pluggableWidgets/datagrid-web/src/components/SelectAllBar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ export const SelectAllBar = observer(function SelectAllBar(): React.ReactNode {
1212
<div className="widget-datagrid-select-all-bar">
1313
{vm.selectionCountText}&nbsp;
1414
<If condition={vm.selectAllVisible}>
15-
<button className="btn" onClick={() => vm.onSelectAll()}>
15+
<button className="widget-datagrid-btn-invisible btn" onClick={() => vm.onSelectAll()}>
1616
{vm.selectAllLabel}
1717
</button>
1818
</If>
1919
<If condition={vm.clearVisible}>
20-
<button className="btn" onClick={() => vm.onClear()}>
20+
<button className="widget-datagrid-btn-invisible btn" onClick={() => vm.onClear()}>
2121
{vm.clearSelectionLabel}
2222
</button>
2323
</If>

‎packages/pluggableWidgets/datagrid-web/src/components/WidgetFooter.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const SelectionCounter = observer(function SelectionCounter() {
4747
<If condition={selectionCountStore.selectedCountText !== ""}>
4848
<span className="widget-datagrid-selection-count">{selectionCountStore.selectedCountText}</span>
4949
&nbsp;|&nbsp;
50-
<button className="widget-datagrid-clear-selection" onClick={selectActionHelper.onClearSelection}>
50+
<button className="widget-datagrid-btn-invisible btn" onClick={selectActionHelper.onClearSelection}>
5151
Clear selection
5252
</button>
5353
</If>

‎packages/pluggableWidgets/datagrid-web/src/helpers/SelectActionHelper.ts‎

Lines changed: 3 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import {
44
SelectionMode,
55
WidgetSelectionProperty
66
} from "@mendix/widget-plugin-grid/selection";
7-
import { ListValue } from "mendix";
87
import { useMemo } from "react";
98
import { DatagridContainerProps, DatagridPreviewProps, ItemSelectionMethodEnum } from "../../typings/DatagridProps";
109
export type SelectionMethod = "rowClick" | "checkbox" | "none";
@@ -13,28 +12,19 @@ export class SelectActionHelper extends SelectActionHandler {
1312
pageSize: number;
1413
private _selectionMethod: ItemSelectionMethodEnum;
1514
private _showSelectAllToggle: boolean;
16-
private _datasource: ListValue;
17-
private _selectAllPagesEnabled: boolean;
18-
private _selectAllPagesBufferSize: number;
1915

2016
constructor(
2117
selection: WidgetSelectionProperty,
2218
selectionHelper: SelectionHelper | undefined,
2319
_selectionMethod: ItemSelectionMethodEnum,
2420
_showSelectAllToggle: boolean,
2521
pageSize: number,
26-
private _selectionMode: SelectionMode,
27-
datasource: ListValue,
28-
selectAllPagesEnabled?: boolean,
29-
selectAllPagesBufferSize?: number
22+
private _selectionMode: SelectionMode
3023
) {
3124
super(selection, selectionHelper);
3225
this._selectionMethod = _selectionMethod;
3326
this._showSelectAllToggle = _showSelectAllToggle;
3427
this.pageSize = pageSize;
35-
this._datasource = datasource;
36-
this._selectAllPagesEnabled = selectAllPagesEnabled ?? false;
37-
this._selectAllPagesBufferSize = selectAllPagesBufferSize ?? 500;
3828
}
3929

4030
get selectionMethod(): SelectionMethod {
@@ -52,14 +42,6 @@ export class SelectActionHelper extends SelectActionHandler {
5242
get selectionMode(): SelectionMode {
5343
return this.selectionMethod === "checkbox" ? "toggle" : this._selectionMode;
5444
}
55-
56-
get canSelectAllPages(): boolean {
57-
return this._selectAllPagesEnabled && this.selectionType === "Multi";
58-
}
59-
60-
get totalCount(): number | undefined {
61-
return this._datasource?.totalCount;
62-
}
6345
}
6446

6547
export function useSelectActionHelper(
@@ -71,8 +53,6 @@ export function useSelectActionHelper(
7153
| "pageSize"
7254
| "itemSelectionMode"
7355
| "datasource"
74-
| "selectAllPagesEnabled"
75-
| "selectAllPagesPageSize"
7656
>,
7757
selectionHelper?: SelectionHelper
7858
): SelectActionHelper {
@@ -83,20 +63,14 @@ export function useSelectActionHelper(
8363
props.itemSelectionMethod,
8464
props.showSelectAllToggle,
8565
props.pageSize ?? 5,
86-
props.itemSelectionMode,
87-
props.datasource as ListValue,
88-
props.selectAllPagesEnabled,
89-
props.selectAllPagesPageSize ?? 500
66+
props.itemSelectionMode
9067
);
9168
}, [
9269
props.itemSelection,
9370
selectionHelper,
9471
props.itemSelectionMethod,
9572
props.showSelectAllToggle,
9673
props.pageSize,
97-
props.itemSelectionMode,
98-
props.datasource,
99-
props.selectAllPagesEnabled,
100-
props.selectAllPagesPageSize
74+
props.itemSelectionMode
10175
]);
10276
}

‎packages/pluggableWidgets/datagrid-web/src/helpers/root-context.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import { SelectionProgressDialogViewModel } from "./state/SelectionProgressDialo
1111

1212
export interface DatagridRootScope {
1313
basicData: GridBasicData;
14-
// Controllers
1514
selectionHelper: SelectionHelper | undefined;
1615
selectActionHelper: SelectActionHelper;
1716
cellEventsController: EventsController;

0 commit comments

Comments
 (0)