[WC-2896] Gallery personalisation

packages/pluggableWidgets/gallery-web/src/Gallery.editorConfig.ts

@@ -18,6 +18,16 @@ export function getProperties(values: GalleryPreviewProps, defaultProperties: Pr
         hidePropertiesIn(defaultProperties, values, ["onSelectionChange", "itemSelectionMode"]);
     }
 
+    const usePersonalization = values.storeFilters || values.storeSort;
+    if (!usePersonalization) {
+        hidePropertiesIn(defaultProperties, values, ["stateStorageType", "stateStorageAttr", "onConfigurationChange"]);
+    } else if (values.stateStorageType === "localStorage") {
+        hidePropertyIn(defaultProperties, values, "stateStorageAttr");
+        hidePropertyIn(defaultProperties, values, "onConfigurationChange");
+    }
+
+    // Hide scrolling settings for now.
+    hidePropertiesIn(defaultProperties, values, ["showPagingButtons", "showTotalCount"]);
     /** Pagination */
 
     if (values.pagination === "buttons") {

packages/pluggableWidgets/gallery-web/src/Gallery.xml

@@ -133,6 +133,37 @@
                 </property>
             </propertyGroup>
         </propertyGroup>
+        <propertyGroup caption="Personalization">
+            <propertyGroup caption="Configuration">
+                <property key="stateStorageType" type="enumeration" defaultValue="attribute">
+                    <caption>Store configuration in</caption>
+                    <description>When Browser local storage is selected, the configuration is scoped to a browser profile. This configuration is not tied to a Mendix user.</description>
+                    <enumerationValues>
+                        <enumerationValue key="attribute">Attribute</enumerationValue>
+                        <enumerationValue key="localStorage">Browser local storage</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="stateStorageAttr" type="attribute" required="false" onChange="onConfigurationChange">
+                    <caption>Attribute</caption>
+                    <description>Attribute containing the personalized configuration of the capabilities. This configuration is automatically stored and loaded. The attribute requires Unlimited String.</description>
+                    <attributeTypes>
+                        <attributeType name="String" />
+                    </attributeTypes>
+                </property>
+                <property key="onConfigurationChange" type="action" required="false">
+                    <caption>On change</caption>
+                    <description />
+                </property>
+                <property key="storeFilters" type="boolean" defaultValue="true">
+                    <caption>Store filters</caption>
+                    <description />
+                </property>
+                <property key="storeSort" type="boolean" defaultValue="true">
+                    <caption>Store sort</caption>
+                    <description />
+                </property>
+            </propertyGroup>
+        </propertyGroup>
         <propertyGroup caption="Accessibility">
             <propertyGroup caption="Aria labels">
                 <property key="filterSectionTitle" type="textTemplate" required="false">

packages/pluggableWidgets/gallery-web/src/stores/AttributeStorage.ts

@@ -0,0 +1,51 @@
+import { PlainJs } from "@mendix/filter-commons/typings/settings";
+import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
+import { ReactiveController, ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/reactive-controller";
+import { EditableValue } from "mendix";
+import { computed, makeObservable } from "mobx";
+import { ObservableStorage } from "src/typings/storage";
+
+type Gate = DerivedPropsGate<{
+    stateStorageAttr: EditableValue<string>;
+}>;
+
+export class AttributeStorage implements ObservableStorage, ReactiveController {
+    private readonly _gate: Gate;
+
+    constructor(host: ReactiveControllerHost, gate: Gate) {
+        host.addController(this);
+
+        this._gate = gate;
+        makeObservable<this, "_attribute">(this, {
+            _attribute: computed,
+            data: computed.struct
+        });
+    }
+
+    setup(): () => void {
+        return () => {};
+    }
+
+    private get _attribute(): EditableValue<string> {
+        return this._gate.props.stateStorageAttr;
+    }
+
+    get data(): PlainJs {
+        const jsonString = this._attribute.value;
+        if (!jsonString) {
+            return null;
+        }
+        try {
+            return JSON.parse(jsonString) as PlainJs;
+        } catch {
+            console.warn("Invalid JSON configuration in the attribute. Resetting configuration.");
+            this._attribute.setValue("");
+            return null;
+        }
+    }
+
+    setData(data: PlainJs): void {
+        data = data === "" ? null : data;
+        this._attribute.setValue(JSON.stringify(data));
+    }
+}

packages/pluggableWidgets/gallery-web/src/stores/BrowserStorage.ts

@@ -0,0 +1,18 @@
+import { PlainJs } from "@mendix/filter-commons/typings/settings";
+import { ObservableStorage } from "src/typings/storage";
+
+export class BrowserStorage implements ObservableStorage {
+    constructor(private readonly _storageKey: string) {}
+
+    get data(): PlainJs {
+        try {
+            return JSON.parse(localStorage.getItem(this._storageKey) ?? "null");
+        } catch {
+            return null;
+        }
+    }
+
+    setData(data: PlainJs): void {
+        localStorage.setItem(this._storageKey, JSON.stringify(data));
+    }
+}

packages/pluggableWidgets/gallery-web/src/stores/GalleryPersistentStateController.ts

@@ -0,0 +1,104 @@
+import { PlainJs, Serializable } from "@mendix/filter-commons/typings/settings";
+import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
+import { ReactiveControllerHost } from "@mendix/widget-plugin-mobx-kit/reactive-controller";
+import { action, comparer, computed, makeObservable, reaction } from "mobx";
+import { ObservableStorage } from "src/typings/storage";
+
+interface GalleryPersistentStateControllerSpec {
+    filtersHost: Serializable;
+    sortHost: Serializable;
+    storage: ObservableStorage;
+    storeFilters: boolean;
+    storeSort: boolean;
+}
+
+export class GalleryPersistentStateController {
+    private readonly _storage: ObservableStorage;
+    private readonly _filtersHost: Serializable;
+    private readonly _sortHost: Serializable;
+    readonly storeFilters: boolean;
+    readonly storeSort: boolean;
+
+    readonly schemaVersion: number = 1;
+
+    constructor(host: ReactiveControllerHost, spec: GalleryPersistentStateControllerSpec) {
+        host.addController(this);
+        this._storage = spec.storage;
+        this._filtersHost = spec.filtersHost;
+        this._sortHost = spec.sortHost;
+        this.storeFilters = spec.storeFilters;
+        this.storeSort = spec.storeSort;
+
+        makeObservable<this, "_persistentState">(this, {
+            _persistentState: computed,
+            fromJSON: action
+        });
+    }
+
+    setup(): () => void {
+        const [add, disposeAll] = disposeBatch();
+
+        // Write state to storage
+        const clearWrite = reaction(
+            () => this._persistentState,
+            data => this._storage.setData(data),
+            { delay: 250, equals: comparer.structural }
+        );
+
+        // Update state from storage
+        const clearRead = reaction(
+            () => this._storage.data,
+            data => {
+                if (data == null) {
+                    return;
+                }
+                if (this._validate(data)) {
+                    this.fromJSON(data);
+                } else {
+                    console.warn("Invalid gallery settings. Reset storage to avoid conflicts.");
+                    this._storage.setData(null);
+                }
+            },
+            { fireImmediately: true, equals: comparer.structural }
+        );
+
+        add(clearWrite);
+        add(clearRead);
+
+        return disposeAll;
+    }
+
+    private get _persistentState(): PlainJs {
+        return this.toJSON();
+    }
+
+    private _validate(data: PlainJs): data is { [key: string]: PlainJs } {
+        if (data == null || typeof data !== "object" || !("version" in data) || data.version !== this.schemaVersion) {
+            return false;
+        }
+        return true;
+    }
+
+    fromJSON(data: PlainJs): void {
+        if (!this._validate(data)) {
+            return;
+        }
+        if (this.storeFilters) {
+            this._filtersHost.fromJSON(data.filters);
+        }
+        if (this.storeSort) {
+            this._sortHost.fromJSON(data.sort);
+        }
+    }
+
+    toJSON(): PlainJs {
+        const data: PlainJs = { version: 1 };
+        if (this.storeFilters) {
+            data.filters = this._filtersHost.toJSON();
+        }
+        if (this.storeSort) {
+            data.sort = this._sortHost.toJSON();
+        }
+        return data;
+    }
+}

packages/pluggableWidgets/gallery-web/src/stores/GalleryStore.ts

@@ -8,12 +8,17 @@ import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/props-gate";
 import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid";
 import { SortAPI } from "@mendix/widget-plugin-sorting/react/context";
 import { SortStoreHost } from "@mendix/widget-plugin-sorting/stores/SortStoreHost";
-import { ListValue } from "mendix";
-import { PaginationEnum } from "../../typings/GalleryProps";
+import { EditableValue, ListValue } from "mendix";
+import { AttributeStorage } from "src/stores/AttributeStorage";
+import { BrowserStorage } from "src/stores/BrowserStorage";
+import { GalleryPersistentStateController } from "src/stores/GalleryPersistentStateController";
+import { ObservableStorage } from "src/typings/storage";
+import { PaginationEnum, StateStorageTypeEnum } from "../../typings/GalleryProps";
 import { QueryParamsController } from "../controllers/QueryParamsController";
 
 interface DynamicProps {
     datasource: ListValue;
+    stateStorageAttr?: EditableValue<string>;
 }
 
 interface StaticProps {
@@ -22,6 +27,9 @@ interface StaticProps {
     showTotalCount: boolean;
     pageSize: number;
     name: string;
+    stateStorageType: StateStorageTypeEnum;
+    storeFilters: boolean;
+    storeSort: boolean;
 }
 
 export type GalleryPropsGate = DerivedPropsGate<DynamicProps>;
@@ -32,6 +40,9 @@ type GalleryStoreSpec = StaticProps & {
 
 export class GalleryStore extends BaseControllerHost {
     private readonly _query: DatasourceController;
+    private readonly _filtersHost: CustomFilterHost;
+    private readonly _sortHost: SortStoreHost;
+    private _storage: ObservableStorage | null = null;
 
     readonly id: string = `GalleryStore@${generateUUID()}`;
     readonly name: string;
@@ -54,26 +65,54 @@ export class GalleryStore extends BaseControllerHost {
             showTotalCount: spec.showTotalCount
         });
 
-        const filterObserver = new CustomFilterHost();
-        const sortObserver = new SortStoreHost();
+        this._filtersHost = new CustomFilterHost();
+        this._sortHost = new SortStoreHost();
 
-        const paramCtrl = new QueryParamsController(this, this._query, filterObserver, sortObserver);
+        const paramCtrl = new QueryParamsController(this, this._query, this._filtersHost, this._sortHost);
 
         this.filterAPI = createContextWithStub({
-            filterObserver,
+            filterObserver: this._filtersHost,
             parentChannelName: this.id,
             sharedInitFilter: paramCtrl.unzipFilter(spec.gate.props.datasource.filter)
         });
 
         this.sortAPI = {
             version: 1,
-            host: sortObserver,
+            host: this._sortHost,
             initSortOrder: spec.gate.props.datasource.sortOrder
         };
 
         new RefreshController(this, {
             delay: 0,
             query: this._query.derivedQuery
         });
+
+        const useStorage = spec.storeFilters || spec.storeSort;
+        if (useStorage) {
+            this.initPersistentStorage(spec, spec.gate);
+        }
+    }
+
+    initPersistentStorage(props: StaticProps, gate: GalleryPropsGate): void {
+        if (props.stateStorageType === "localStorage") {
+            this._storage = new BrowserStorage(this.name);
+        } else if (gate.props.stateStorageAttr) {
+            this._storage = new AttributeStorage(
+                this,
+                gate as DerivedPropsGate<{ stateStorageAttr: EditableValue<string> }>
+            );
+        }
+
+        if (!this._storage) {
+            return;
+        }
+
+        new GalleryPersistentStateController(this, {
+            storage: this._storage,
+            filtersHost: this._filtersHost,
+            sortHost: this._sortHost,
+            storeFilters: props.storeFilters,
+            storeSort: props.storeSort
+        });
     }
 }

packages/pluggableWidgets/gallery-web/src/typings/storage.ts

@@ -0,0 +1,6 @@
+import { PlainJs } from "@mendix/filter-commons/typings/settings";
+
+export interface ObservableStorage {
+    data: PlainJs;
+    setData(data: PlainJs): void;
+}

packages/pluggableWidgets/gallery-web/src/utils/test-utils.tsx

@@ -52,7 +52,10 @@ export function createMockGalleryContext(): GalleryRootScope {
         showPagingButtons: "always",
         pagingPosition: "bottom",
         showEmptyPlaceholder: "none",
-        onClickTrigger: "single"
+        onClickTrigger: "single",
+        stateStorageType: "localStorage",
+        storeFilters: false,
+        storeSort: false
     };
 
     // Create a proper gate provider and gate
@@ -66,7 +69,10 @@ export function createMockGalleryContext(): GalleryRootScope {
         pagination: "buttons",
         showPagingButtons: "always",
         showTotalCount: false,
-        pageSize: 10
+        pageSize: 10,
+        stateStorageType: "localStorage",
+        storeFilters: false,
+        storeSort: false
     });
 
     const mockSelectHelper = new SelectActionHandler("None", undefined);