From f3f6546f33c003ddc5e144837d9190e9595981f3 Mon Sep 17 00:00:00 2001 From: Roman Vyakhirev Date: Mon, 22 Sep 2025 16:38:11 +0200 Subject: [PATCH 1/2] fix: observe options as they might not be loaded on the first render --- .../dropdown-sort-web/CHANGELOG.md | 2 ++ .../src/helpers/SortStoreProvider.ts | 11 +------ .../src/react/hocs/withLinkedSortStore.tsx | 5 +-- .../src/stores/SortOrderStore.ts | 33 +++++++++++++++---- 4 files changed, 32 insertions(+), 19 deletions(-) diff --git a/packages/pluggableWidgets/dropdown-sort-web/CHANGELOG.md b/packages/pluggableWidgets/dropdown-sort-web/CHANGELOG.md index 389fa4de2c..044d5c4368 100644 --- a/packages/pluggableWidgets/dropdown-sort-web/CHANGELOG.md +++ b/packages/pluggableWidgets/dropdown-sort-web/CHANGELOG.md @@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - We fixed an issue with Gallery widget causing errors when Mendix app is being used in an iframe. +- We fixed an issue with Dropdown sort widget not showing attribute captions correctly. + ## [1.2.2] - 2025-03-31 ### Fixed diff --git a/packages/shared/widget-plugin-sorting/src/helpers/SortStoreProvider.ts b/packages/shared/widget-plugin-sorting/src/helpers/SortStoreProvider.ts index 93ceb84b56..1d2b5f0d68 100644 --- a/packages/shared/widget-plugin-sorting/src/helpers/SortStoreProvider.ts +++ b/packages/shared/widget-plugin-sorting/src/helpers/SortStoreProvider.ts @@ -1,4 +1,3 @@ -import { AttributeMetaData, DynamicValue } from "mendix"; import { SortOrderStore } from "../stores/SortOrderStore"; import { SortStoreHost } from "../stores/SortStoreHost"; import { SortInstruction } from "../types/store"; @@ -6,10 +5,6 @@ import { SortInstruction } from "../types/store"; interface SortStoreProviderSpec { host: SortStoreHost; initSortOrder?: SortInstruction[]; - attributes: Array<{ - attribute: AttributeMetaData; - caption?: DynamicValue; - }>; } export class SortStoreProvider { @@ -18,11 +13,7 @@ export class SortStoreProvider { constructor(spec: SortStoreProviderSpec) { this._host = spec.host; - const options = spec.attributes.map(item => ({ - value: item.attribute.id, - caption: item.caption?.value ?? "empty" - })); - this.store = new SortOrderStore({ options, initSortOrder: spec.initSortOrder }); + this.store = new SortOrderStore({ initSortOrder: spec.initSortOrder }); } setup(): () => void { diff --git a/packages/shared/widget-plugin-sorting/src/react/hocs/withLinkedSortStore.tsx b/packages/shared/widget-plugin-sorting/src/react/hocs/withLinkedSortStore.tsx index 2a0ba9c439..3eba735e83 100644 --- a/packages/shared/widget-plugin-sorting/src/react/hocs/withLinkedSortStore.tsx +++ b/packages/shared/widget-plugin-sorting/src/react/hocs/withLinkedSortStore.tsx @@ -20,11 +20,12 @@ export function withLinkedSortStore

( () => new SortStoreProvider({ host: props.sortAPI.host, - initSortOrder: props.sortAPI.host.sortOrder, - attributes: props.attributes + initSortOrder: props.sortAPI.host.sortOrder }) ); + store.setProps(props); + return ; }; } diff --git a/packages/shared/widget-plugin-sorting/src/stores/SortOrderStore.ts b/packages/shared/widget-plugin-sorting/src/stores/SortOrderStore.ts index ca9a2a1b9f..b469437d3c 100644 --- a/packages/shared/widget-plugin-sorting/src/stores/SortOrderStore.ts +++ b/packages/shared/widget-plugin-sorting/src/stores/SortOrderStore.ts @@ -2,32 +2,51 @@ import { PlainJs, Serializable } from "@mendix/filter-commons/typings/settings"; import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-uuid"; import { action, computed, makeObservable, observable } from "mobx"; import { BasicSortStore, Option, SortInstruction } from "../types/store"; +import { AttributeMetaData, DynamicValue } from "mendix"; type StorableState = Array<[number, "asc" | "desc"]>; +type Props = { + attributes: Array<{ + attribute: AttributeMetaData; + caption?: DynamicValue; + }>; +}; + export class SortOrderStore implements BasicSortStore, Serializable { private readonly _sortOrder: SortInstruction[] = []; readonly id = `SortOrderStore@${generateUUID()}`; - readonly options: Option[]; - readonly idToIndex: Map; - - constructor(spec: { options?: Option[]; initSortOrder?: SortInstruction[] } = {}) { - const { options = [], initSortOrder = [] } = spec; + options: Option[] = []; + readonly idToIndex: Map = new Map(); - this.options = [...options]; - this.idToIndex = new Map(options.map((option, index) => [option.value, index])); + constructor(spec: { initSortOrder?: SortInstruction[] }) { + const { initSortOrder = [] } = spec; this._sortOrder = [...initSortOrder]; makeObservable(this, { _sortOrder: observable, + options: observable.struct, sortOrder: computed, setSortOrder: action, + setProps: action, push: action, remove: action }); } + setProps(props: Props): void { + this.options = props.attributes.map(item => ({ + value: item.attribute.id, + caption: item.caption?.value ?? "" + })); + + this.idToIndex.clear(); + this.options.forEach((option, index) => { + this.idToIndex.set(option.value, index); + }); + } + get sortOrder(): SortInstruction[] { return [...this._sortOrder]; } From 27bec7e29fdc74344850ba00dd9d1cfc51caacf9 Mon Sep 17 00:00:00 2001 From: Roman Vyakhirev Date: Tue, 23 Sep 2025 10:44:27 +0200 Subject: [PATCH 2/2] fix: set props in effect --- .../src/react/hocs/withLinkedSortStore.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/shared/widget-plugin-sorting/src/react/hocs/withLinkedSortStore.tsx b/packages/shared/widget-plugin-sorting/src/react/hocs/withLinkedSortStore.tsx index 3eba735e83..8486c42179 100644 --- a/packages/shared/widget-plugin-sorting/src/react/hocs/withLinkedSortStore.tsx +++ b/packages/shared/widget-plugin-sorting/src/react/hocs/withLinkedSortStore.tsx @@ -1,6 +1,6 @@ import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup"; import { AttributeMetaData, DynamicValue } from "mendix"; -import { createElement, FC } from "react"; +import { createElement, FC, useEffect } from "react"; import { SortStoreProvider } from "../../helpers/SortStoreProvider"; import { BasicSortStore } from "../../types/store"; import { SortAPI } from "../context"; @@ -24,7 +24,9 @@ export function withLinkedSortStore

( }) ); - store.setProps(props); + useEffect(() => { + store.setProps({ attributes: props.attributes }); + }, [store, props.attributes]); return ; };