fix: use custom readonly if no target attribute

Author: gjulivan

packages/pluggableWidgets/combobox-web/src/Combobox.editorConfig.ts

@@ -36,6 +36,10 @@ const ASSOCIATION_SOURCE_CONFIG: Array<keyof ComboboxPreviewProps> = [
 ];
 
 export function getProperties(values: ComboboxPreviewProps, defaultProperties: Properties): Properties {
+    if (values.source !== "database") {
+        hidePropertiesIn(defaultProperties, values, ["customEditability", "customEditabilityExpression"]);
+    }
+
     if (values.source === "context") {
         hidePropertiesIn(defaultProperties, values, [
             "staticAttribute",
@@ -129,6 +133,13 @@ export function getProperties(values: ComboboxPreviewProps, defaultProperties: P
         }
         if (values.databaseAttributeString.length === 0) {
             hidePropertiesIn(defaultProperties, values, ["optionsSourceDatabaseValueAttribute"]);
+            // @ts-expect-error ignore error due to the Editability is part of system properties
+            hidePropertiesIn(defaultProperties, values, ["Editability"]);
+            if (values.customEditability !== "conditionally") {
+                hidePropertiesIn(defaultProperties, values, ["customEditabilityExpression"]);
+            }
+        } else {
+            hidePropertiesIn(defaultProperties, values, ["customEditability", "customEditabilityExpression"]);
         }
     } else if (values.source === "static") {
         hidePropertiesIn(defaultProperties, values, [

packages/pluggableWidgets/combobox-web/src/Combobox.xml

@@ -286,6 +286,20 @@
             </propertyGroup>
             <propertyGroup caption="Editability">
                 <systemProperty key="Editability" />
+                <property key="customEditability" type="enumeration" defaultValue="default">
+                    <caption>Editable</caption>
+                    <description />
+                    <enumerationValues>
+                        <enumerationValue key="default">Default</enumerationValue>
+                        <enumerationValue key="never">Never</enumerationValue>
+                        <enumerationValue key="conditionally">Conditionally</enumerationValue>
+                    </enumerationValues>
+                </property>
+                <property key="customEditabilityExpression" type="expression" defaultValue="false">
+                    <caption>Condition</caption>
+                    <description />
+                    <returnType type="Boolean" />
+                </property>
                 <property key="readOnlyStyle" type="enumeration" defaultValue="text">
                     <caption>Read-only style</caption>
                     <description>How the combo box will appear in read-only mode.</description>

packages/pluggableWidgets/combobox-web/src/helpers/Database/DatabaseSingleSelectionSelector.ts

@@ -10,7 +10,7 @@ import { _valuesIsEqual } from "../utils";
 import { DatabaseCaptionsProvider } from "./DatabaseCaptionsProvider";
 import { DatabaseOptionsProvider } from "./DatabaseOptionsProvider";
 import { DatabaseValuesProvider } from "./DatabaseValuesProvider";
-import { extractDatabaseProps } from "./utils";
+import { extractDatabaseProps, getReadonly } from "./utils";
 
 export class DatabaseSingleSelectionSelector<T extends string | Big, R extends EditableValue<T>>
     implements SingleSelector
@@ -59,15 +59,11 @@ export class DatabaseSingleSelectionSelector<T extends string | Big, R extends E
             return;
         }
         this._attr = targetAttribute as R;
-
+        this.readOnly = getReadonly(targetAttribute, props.customEditability, props.customEditabilityExpression);
+        console.log("readOnly", this.readOnly);
         this.lazyLoader.updateProps(ds);
         this.lazyLoader.setLimit(
-            this.lazyLoader.getLimit(
-                ds.limit,
-                targetAttribute?.readOnly ?? false,
-                targetAttribute?.status ?? ds.status,
-                lazyLoading
-            )
+            this.lazyLoader.getLimit(ds.limit, this.readOnly, targetAttribute?.status ?? ds.status, lazyLoading)
         );
 
         this.caption.updateProps({
@@ -116,7 +112,7 @@ export class DatabaseSingleSelectionSelector<T extends string | Big, R extends E
                 }
             }
         }
-        this.readOnly = targetAttribute?.readOnly ?? false;
+
         this.status = targetAttribute?.status ?? ds.status;
         this.validation = targetAttribute?.validation;
         this.selection = props.optionsSourceDatabaseItemSelection as SelectionSingleValue;

packages/pluggableWidgets/combobox-web/src/helpers/Database/utils.ts

@@ -86,3 +86,20 @@ export function extractDatabaseProps(props: ComboboxContainerProps): ExtractionR
         valueSourceAttribute
     };
 }
+
+export function getReadonly(
+    targetAttribute: EditableValue<string | Big> | undefined,
+    customEditability: ComboboxContainerProps["customEditability"],
+    customEditabilityExpression: ComboboxContainerProps["customEditabilityExpression"]
+): boolean {
+    if (targetAttribute) {
+        return targetAttribute.readOnly;
+    }
+    if (customEditability === "never") {
+        return true;
+    }
+    if (customEditability === "conditionally") {
+        return customEditabilityExpression.value ?? false;
+    }
+    return false;
+}

packages/pluggableWidgets/combobox-web/typings/ComboboxProps.d.ts

@@ -31,6 +31,8 @@ export type SelectionMethodEnum = "checkbox" | "rowclick";
 
 export type SelectedItemsStyleEnum = "text" | "boxes";
 
+export type CustomEditabilityEnum = "default" | "never" | "conditionally";
+
 export type ReadOnlyStyleEnum = "bordered" | "text";
 
 export type LoadingTypeEnum = "spinner" | "skeleton";
@@ -41,7 +43,10 @@ export type FilterTypeEnum = "contains" | "containsExact" | "startsWith" | "none
 
 export interface OptionsSourceStaticDataSourcePreviewType {
     staticDataSourceValue: string;
-    staticDataSourceCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
+    staticDataSourceCustomContent: {
+        widgetCount: number;
+        renderer: ComponentType<{ children: ReactNode; caption?: string }>;
+    };
     staticDataSourceCaption: string;
 }
 
@@ -81,6 +86,8 @@ export interface ComboboxContainerProps {
     selectedItemsStyle: SelectedItemsStyleEnum;
     selectAllButton: boolean;
     selectAllButtonCaption: DynamicValue<string>;
+    customEditability: CustomEditabilityEnum;
+    customEditabilityExpression: DynamicValue<boolean>;
     readOnlyStyle: ReadOnlyStyleEnum;
     onChangeEvent?: ActionValue;
     onEnterEvent?: ActionValue;
@@ -123,16 +130,24 @@ export interface ComboboxPreviewProps {
     noOptionsText: string;
     clearable: boolean;
     optionsSourceAssociationCustomContentType: OptionsSourceAssociationCustomContentTypeEnum;
-    optionsSourceAssociationCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
+    optionsSourceAssociationCustomContent: {
+        widgetCount: number;
+        renderer: ComponentType<{ children: ReactNode; caption?: string }>;
+    };
     optionsSourceDatabaseCustomContentType: OptionsSourceDatabaseCustomContentTypeEnum;
-    optionsSourceDatabaseCustomContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
+    optionsSourceDatabaseCustomContent: {
+        widgetCount: number;
+        renderer: ComponentType<{ children: ReactNode; caption?: string }>;
+    };
     staticDataSourceCustomContentType: StaticDataSourceCustomContentTypeEnum;
     showFooter: boolean;
     menuFooterContent: { widgetCount: number; renderer: ComponentType<{ children: ReactNode; caption?: string }> };
     selectionMethod: SelectionMethodEnum;
     selectedItemsStyle: SelectedItemsStyleEnum;
     selectAllButton: boolean;
     selectAllButtonCaption: string;
+    customEditability: CustomEditabilityEnum;
+    customEditabilityExpression: string;
     readOnlyStyle: ReadOnlyStyleEnum;
     onChangeEvent: {} | null;
     onChangeDatabaseEvent: {} | null;