[WC-2559][WC-2634] combobox: add support for long attribute and impro…

…ve config naming (#1257)
mendix · Oct 29, 2024 · c7a1e0c · c7a1e0c
2 parents 7a4cfa9 + 65554e8
commit c7a1e0c
Show file tree

Hide file tree

Showing 12 changed files with 127 additions and 99 deletions.
diff --git a/packages/pluggableWidgets/combobox-web/CHANGELOG.md b/packages/pluggableWidgets/combobox-web/CHANGELOG.md
@@ -6,6 +6,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Added
+
+-   We added support for attribute with **Long** type.
+
+### Changed
+
+-   We make **Value** no longer required if the **Target attribute** is not set for database datasource.
+
+-   We restructure **Attribute** group configuration and rename it as **Store value**.
+
 ## [2.0.2] - 2024-10-03
 
 ### Fixed

diff --git a/packages/pluggableWidgets/combobox-web/package.json b/packages/pluggableWidgets/combobox-web/package.json
@@ -1,7 +1,7 @@
 {
     "name": "@mendix/combobox-web",
     "widgetName": "Combobox",
-    "version": "2.0.2",
+    "version": "2.1.0",
     "description": "Configurable Combo box widget with suggestions and autocomplete.",
     "copyright": "© Mendix Technology BV 2024. All rights reserved.",
     "license": "Apache-2.0",

diff --git a/packages/pluggableWidgets/combobox-web/src/Combobox.editorConfig.ts b/packages/pluggableWidgets/combobox-web/src/Combobox.editorConfig.ts
@@ -21,7 +21,9 @@ const DATABASE_SOURCE_CONFIG: Array<keyof ComboboxPreviewProps> = [
     "optionsSourceDatabaseDataSource",
     "optionsSourceDatabaseDefaultValue",
     "optionsSourceDatabaseValueAttribute",
-    "optionsSourceDatabaseItemSelection"
+    "optionsSourceDatabaseItemSelection",
+    "databaseAttributeString",
+    "onChangeDatabaseEvent"
 ];
 
 const ASSOCIATION_SOURCE_CONFIG: Array<keyof ComboboxPreviewProps> = [
@@ -30,26 +32,24 @@ const ASSOCIATION_SOURCE_CONFIG: Array<keyof ComboboxPreviewProps> = [
     "optionsSourceAssociationCaptionType",
     "optionsSourceAssociationCustomContent",
     "optionsSourceAssociationCustomContentType",
-    "optionsSourceAssociationDataSource"
+    "optionsSourceAssociationDataSource",
+    "attributeAssociation"
 ];
 
 export function getProperties(values: ComboboxPreviewProps, defaultProperties: Properties): Properties {
     if (values.source === "context") {
         hidePropertiesIn(defaultProperties, values, [
-            "databaseAttributeString",
             "staticAttribute",
             "staticDataSourceCustomContentType",
             "optionsSourceStaticDataSource",
             ...DATABASE_SOURCE_CONFIG
         ]);
         if (["enumeration", "boolean"].includes(values.optionsSourceType)) {
             hidePropertiesIn(defaultProperties, values, [
-                "attributeAssociation",
                 "selectedItemsStyle",
                 "selectionMethod",
                 "selectAllButton",
                 "selectAllButtonCaption",
-                "onChangeDatabaseEvent",
                 ...ASSOCIATION_SOURCE_CONFIG,
                 ...LAZY_LOADING_CONFIG
             ]);
@@ -60,11 +60,7 @@ export function getProperties(values: ComboboxPreviewProps, defaultProperties: P
                 hidePropertiesIn(defaultProperties, values, ["attributeBoolean"]);
             }
         } else if (values.optionsSourceType === "association") {
-            hidePropertiesIn(defaultProperties, values, [
-                "attributeEnumeration",
-                "attributeBoolean",
-                "onChangeDatabaseEvent"
-            ]);
+            hidePropertiesIn(defaultProperties, values, ["attributeEnumeration", "attributeBoolean"]);
             if (values.optionsSourceAssociationCaptionType === "attribute") {
                 hidePropertiesIn(defaultProperties, values, ["optionsSourceAssociationCaptionExpression"]);
             } else {
@@ -94,7 +90,6 @@ export function getProperties(values: ComboboxPreviewProps, defaultProperties: P
         }
     } else if (values.source === "database") {
         hidePropertiesIn(defaultProperties, values, [
-            "attributeAssociation",
             "attributeEnumeration",
             "attributeBoolean",
             "optionsSourceType",
@@ -126,24 +121,26 @@ export function getProperties(values: ComboboxPreviewProps, defaultProperties: P
         }
         if (values.optionsSourceDatabaseItemSelection === "Multi") {
             hidePropertiesIn(defaultProperties, values, [
+                "optionsSourceDatabaseValueAttribute",
                 "databaseAttributeString",
                 "optionsSourceDatabaseDefaultValue"
             ]);
         }
         if (values.databaseAttributeString.length === 0) {
-            hidePropertiesIn(defaultProperties, values, ["optionsSourceDatabaseDefaultValue"]);
+            hidePropertiesIn(defaultProperties, values, [
+                "optionsSourceDatabaseValueAttribute",
+                "optionsSourceDatabaseDefaultValue"
+            ]);
         }
     } else if (values.source === "static") {
         hidePropertiesIn(defaultProperties, values, [
-            "attributeAssociation",
             "attributeEnumeration",
             "attributeBoolean",
             "optionsSourceType",
             "selectedItemsStyle",
             "selectionMethod",
             "selectAllButton",
             "selectAllButtonCaption",
-            "databaseAttributeString",
             ...ASSOCIATION_SOURCE_CONFIG,
             ...DATABASE_SOURCE_CONFIG,
             ...LAZY_LOADING_CONFIG

diff --git a/packages/pluggableWidgets/combobox-web/src/Combobox.xml b/packages/pluggableWidgets/combobox-web/src/Combobox.xml
@@ -59,45 +59,6 @@
                     </selectionTypes>
                 </property>
             </propertyGroup>
-            <propertyGroup caption="Attribute">
-                <property key="optionsSourceDatabaseValueAttribute" type="attribute" dataSource="optionsSourceDatabaseDataSource">
-                    <caption>Value</caption>
-                    <description />
-                    <attributeTypes>
-                        <attributeType name="String" />
-                        <attributeType name="Integer" />
-                        <attributeType name="Enum" />
-                    </attributeTypes>
-                </property>
-                <property key="databaseAttributeString" type="attribute" setLabel="true" required="false">
-                    <caption>Attribute</caption>
-                    <description />
-                    <attributeTypes>
-                        <attributeType name="String" />
-                        <attributeType name="Integer" />
-                        <attributeType name="Enum" />
-                    </attributeTypes>
-                </property>
-                <property key="optionsSourceDatabaseDefaultValue" type="expression" required="false">
-                    <caption>Default value</caption>
-                    <description />
-                    <returnType assignableTo="databaseAttributeString" />
-                </property>
-                <!-- END DATABASE / STRING -->
-                <!-- ASSOCIATION -->
-                <property key="attributeAssociation" type="association" selectableObjects="optionsSourceAssociationDataSource" required="true" setLabel="true">
-                    <caption>Entity</caption>
-                    <description />
-                    <associationTypes>
-                        <associationType name="Reference" />
-                        <associationType name="ReferenceSet" />
-                    </associationTypes>
-                </property>
-                <property key="optionsSourceAssociationDataSource" type="datasource" isList="true" required="false">
-                    <caption>Selectable objects</caption>
-                    <description />
-                </property>
-            </propertyGroup>
             <propertyGroup caption="Caption">
                 <!-- CAPTIONS -->
                 <property key="optionsSourceAssociationCaptionType" type="enumeration" defaultValue="attribute">
@@ -142,6 +103,49 @@
                 </property>
                 <!-- END CAPTIONS -->
             </propertyGroup>
+            <propertyGroup caption="Store value">
+                <property key="optionsSourceDatabaseValueAttribute" type="attribute" dataSource="optionsSourceDatabaseDataSource">
+                    <caption>Value</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="String" />
+                        <attributeType name="Integer" />
+                        <attributeType name="Long" />
+                        <attributeType name="Enum" />
+                    </attributeTypes>
+                </property>
+                <property key="databaseAttributeString" type="attribute" setLabel="true" required="false">
+                    <caption>Target attribute</caption>
+                    <description />
+                    <attributeTypes>
+                        <attributeType name="String" />
+                        <attributeType name="Integer" />
+                        <attributeType name="Long" />
+                        <attributeType name="Enum" />
+                    </attributeTypes>
+                </property>
+                <property key="optionsSourceDatabaseDefaultValue" type="expression" required="false">
+                    <caption>Default value</caption>
+                    <description />
+                    <returnType assignableTo="databaseAttributeString" />
+                </property>
+                <!-- END DATABASE / STRING -->
+            </propertyGroup>
+            <propertyGroup caption="Attribute">
+                <!-- ASSOCIATION -->
+                <property key="attributeAssociation" type="association" selectableObjects="optionsSourceAssociationDataSource" required="true" setLabel="true">
+                    <caption>Entity</caption>
+                    <description />
+                    <associationTypes>
+                        <associationType name="Reference" />
+                        <associationType name="ReferenceSet" />
+                    </associationTypes>
+                </property>
+                <property key="optionsSourceAssociationDataSource" type="datasource" isList="true" required="false">
+                    <caption>Selectable objects</caption>
+                    <description />
+                </property>
+            </propertyGroup>
             <!-- END OPTIONS SOURCE -->
             <!-- STATIC-->
             <propertyGroup caption="Values">
@@ -152,10 +156,10 @@
                         <attributeType name="String" />
                         <attributeType name="Enum" />
                         <attributeType name="Integer" />
+                        <attributeType name="Long" />
                         <attributeType name="Boolean" />
                         <attributeType name="DateTime" />
                         <attributeType name="Decimal" />
-                        <attributeType name="Long" />
                     </attributeTypes>
                 </property>
                 <property key="optionsSourceStaticDataSource" type="object" isList="true" required="true">

diff --git a/packages/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseCaptionsProvider.tsx b/packages/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseCaptionsProvider.tsx
@@ -9,7 +9,7 @@ interface Props {
     formattingAttributeOrExpression: ListExpressionValue<string> | ListAttributeValue<string> | undefined;
     customContent?: ListWidgetValue | undefined;
     customContentType: OptionsSourceAssociationCustomContentTypeEnum;
-    attribute: ListAttributeValue<string | Big>;
+    attribute: ListAttributeValue<string | Big> | undefined;
     caption?: string;
 }
 

diff --git a/...ages/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseMultiSelectionSelector.ts b/...ages/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseMultiSelectionSelector.ts
@@ -72,7 +72,7 @@ export class DatabaseMultiSelectionSelector implements MultiSelector {
             filterType,
             lazyLoading,
             loadingType,
-            valueAttribute
+            valueSourceAttribute
         } = extractDatabaseProps(props);
 
         if (
@@ -97,7 +97,7 @@ export class DatabaseMultiSelectionSelector implements MultiSelector {
             formattingAttributeOrExpression: captionProvider,
             customContent,
             customContentType,
-            attribute: valueAttribute,
+            attribute: valueSourceAttribute,
             caption: undefined
         });
         this.options._updateProps({

diff --git a/...ges/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseSingleSelectionSelector.ts b/...ges/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseSingleSelectionSelector.ts
@@ -23,33 +23,38 @@ export class DatabaseSingleSelectionSelector<
         super.updateProps(props);
 
         const {
-            attr,
+            targetAttribute,
             captionProvider,
             customContent,
             customContentType,
             ds,
             emptyOption,
             emptyValue,
             lazyLoading,
-            valueAttribute
+            valueSourceAttribute
         } = extractDatabaseProps(props);
 
         this.lazyLoader.setLimit(
-            this.lazyLoader.getLimit(ds.limit, attr?.readOnly ?? false, attr?.status ?? ds.status, lazyLoading)
+            this.lazyLoader.getLimit(
+                ds.limit,
+                targetAttribute?.readOnly ?? false,
+                targetAttribute?.status ?? ds.status,
+                lazyLoading
+            )
         );
 
-        this._attr = attr as R;
+        this._attr = targetAttribute as R;
         this.caption.updateProps({
             emptyOptionText: emptyOption,
             formattingAttributeOrExpression: captionProvider,
             customContent,
             customContentType,
-            attribute: valueAttribute,
-            caption: attr?.displayValue
+            attribute: valueSourceAttribute,
+            caption: targetAttribute?.displayValue
         });
 
         this.values.updateProps({
-            valueAttribute,
+            valueAttribute: valueSourceAttribute,
             emptyValue
         });
 
@@ -60,13 +65,13 @@ export class DatabaseSingleSelectionSelector<
             return;
         }
 
-        if (attr?.status === "available") {
-            if (this.lastSetValue === null || !_valuesIsEqual(this.lastSetValue, attr.value)) {
+        if (targetAttribute?.status === "available") {
+            if (this.lastSetValue === null || !_valuesIsEqual(this.lastSetValue, targetAttribute.value)) {
                 if (ds.status === "available") {
                     this.lastSetValue = this._attr.value;
-                    if (!_valuesIsEqual(this.values.getEmptyValue(), attr.value)) {
+                    if (!_valuesIsEqual(this.values.getEmptyValue(), targetAttribute.value)) {
                         const obj = this.options.getAll().find(option => {
-                            return _valuesIsEqual(attr.value, this.values.get(option));
+                            return _valuesIsEqual(targetAttribute.value, this.values.get(option));
                         });
                         if (obj) {
                             this.currentId = obj;
@@ -78,14 +83,14 @@ export class DatabaseSingleSelectionSelector<
             }
         }
 
-        this.readOnly = attr?.readOnly ?? false;
-        this.status = attr?.status ?? ds.status;
-        this.validation = attr?.validation;
+        this.readOnly = targetAttribute?.readOnly ?? false;
+        this.status = targetAttribute?.status ?? ds.status;
+        this.validation = targetAttribute?.validation;
         this.selection = props.optionsSourceDatabaseItemSelection as SelectionSingleValue;
 
         if (this.selection.selection === undefined) {
             const objectId = this.options.getAll().find(option => {
-                return _valuesIsEqual(attr?.value, this.values.get(option));
+                return _valuesIsEqual(targetAttribute?.value, this.values.get(option));
             });
 
             if (objectId) {

diff --git a/packages/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseValuesProvider.ts b/packages/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseValuesProvider.ts
@@ -2,7 +2,7 @@ import { ObjectItem, DynamicValue, ListAttributeValue } from "mendix";
 import { ValuesProvider } from "../types";
 
 interface Props {
-    valueAttribute: ListAttributeValue<string | Big>;
+    valueAttribute: ListAttributeValue<string | Big> | undefined;
     emptyValue?: DynamicValue<string | Big>;
 }