@acorex/platform 20.6.0-next.20 → 20.6.0-next.21

package/fesm2022/acorex-platform-layout-entity.mjs

@@ -725,9 +725,11 @@ class PropertyFilter {
         const entityProps = (entity.properties ?? []).slice();
         const nameToViewLayout = buildViewLayoutMap(iface.properties ?? []);
         const allowedNames = this.computeAllowedNames(entityProps.map((p) => p.name));
+        // Calculate recommended dialog size based on form complexity
+        const calculatedSize = this.calculateRecommendedDialogSize(sections, entityProps, nameToViewLayout, allowedNames);
         const dialog = this.layoutBuilder.create().dialog((d) => {
             d.setTitle(title);
-            d.setSize(this.externalSize ?? (this.deviceService.isMobileDevice() ? 'full' : 'md'));
+            d.setSize(this.externalSize ?? calculatedSize);
             d.setCloseButton(true);
             d.content((layout) => {
                 // Default mode: 'view' for single, 'edit' for create/update
@@ -759,7 +761,7 @@ class PropertyFilter {
                                 fs.formField(prop.title, (field) => {
                                     // Path & field-level visibility/readonly
                                     field.path(fieldPath);
-                                    if (prop.schema?.visible) {
+                                    if (prop.schema?.visible !== undefined) {
                                         field.visible(prop.schema?.visible);
                                     }
                                     if (prop.schema?.readonly !== undefined) {
@@ -840,6 +842,78 @@ class PropertyFilter {
         }
         return new Set(allNames);
     }
+    /**
+     * Calculates the recommended dialog size based on form complexity.
+     * Considers number of sections, properties, and average field width.
+     *
+     * @param sections - Interface sections to display
+     * @param entityProps - All entity properties
+     * @param nameToViewLayout - Map of property names to their view layout configurations
+     * @param allowedNames - Set of property names that should be displayed (after filtering)
+     * @returns Recommended dialog size ('full' | 'lg' | 'md')
+     */
+    calculateRecommendedDialogSize(sections, entityProps, nameToViewLayout, allowedNames) {
+        // Mobile devices always use full screen
+        if (this.deviceService.isMobileDevice()) {
+            return 'full';
+        }
+        // Calculate number of visible properties
+        const visibleProperties = entityProps.filter((p) => allowedNames.has(p.name) && nameToViewLayout.has(p.name));
+        const visiblePropertyCount = visibleProperties.length;
+        // Calculate average colSpan to determine field width
+        // colSpan determines how many columns a field occupies in a 12-column grid
+        // Examples:
+        // - colSpan = 12 → 1 field per row (full width)
+        // - colSpan = 6  → 2 fields per row (half width each)
+        // - colSpan = 4  → 3 fields per row (one-third width each)
+        // - colSpan = 3  → 4 fields per row (one-quarter width each)
+        let totalColSpan = 0;
+        let propertiesWithLayout = 0;
+        let hasColSpan3 = false; // Track if any field has colSpan = 3
+        for (const prop of visibleProperties) {
+            const viewLayout = nameToViewLayout.get(prop.name);
+            const positions = viewLayout?.layout?.positions;
+            if (positions) {
+                // Get colSpan from the largest available breakpoint
+                const colSpan = positions.lg?.colSpan ?? positions.xl?.colSpan ?? positions.md?.colSpan ?? positions.sm?.colSpan ?? 12; // default: full width
+                totalColSpan += colSpan;
+                propertiesWithLayout++;
+                // Check if this field has colSpan = 3
+                if (colSpan <= 3) {
+                    hasColSpan3 = true;
+                }
+            }
+            else {
+                // If no layout defined, assume full width (12 columns)
+                totalColSpan += 12;
+                propertiesWithLayout++;
+            }
+        }
+        // Average colSpan: lower value = more fields per row, higher value = fewer fields per row
+        const avgColSpan = propertiesWithLayout > 0 ? totalColSpan / propertiesWithLayout : 12;
+        // Decision logic:
+        // - 10+ properties → complex form → needs 'lg'
+        // - avgColSpan <= 4 → 3+ fields per row → needs 'lg' (more horizontal space needed)
+        // - hasColSpan3 && avgColSpan <= 6 → row can sum to 12 with colSpan=3 (e.g., 9+3, 5+4+3, etc.) → needs 'lg'
+        // - Otherwise → 'md' is sufficient
+        if (visiblePropertyCount >= 10) {
+            return 'lg';
+        }
+        // If average colSpan <= 4, it means we can fit 3+ fields per row (12/4 = 3)
+        // This requires more horizontal space, so use 'lg'
+        if (avgColSpan <= 4) {
+            return 'lg';
+        }
+        // If there's a field with colSpan = 3 and avgColSpan <= 6,
+        // it means rows can sum to 12 with multiple fields including the colSpan=3 field
+        // (e.g., 9+3=12, 5+4+3=12, 4+3+3+2=12, etc.)
+        // This needs 'lg' for better horizontal space to accommodate the layout
+        if (hasColSpan3 && avgColSpan <= 6) {
+            return 'lg';
+        }
+        // For other cases (including full-width fields), 'md' is sufficient
+        return 'md';
+    }
 }
 //#endregion
 //#region ----   Helpers   ----
@@ -946,6 +1020,7 @@ class AXPCreateEntityCommand {
     }
     async execute(input) {
         const excludeProperties = input['excludeProperties'];
+        const dialogSize = input['dialogSize'];
         const { entity, entityInfo, data } = input.__context__;
         const [moduleName, entityName] = (entity || '').split('.');
         if (!moduleName || !entityName) {
@@ -972,6 +1047,9 @@ class AXPCreateEntityCommand {
                 const translatedTitle = await this.translationService.translateAsync(entityInfo.title);
                 chain = chain.title(`${createText} ${translatedTitle}`);
             }
+            if (dialogSize) {
+                chain.size(dialogSize);
+            }
             dialogRef = await chain.show();
             if (dialogRef.action() == 'cancel') {
                 dialogRef.close();
@@ -1063,6 +1141,7 @@ class AXPUpdateEntityCommand {
     //#region ----   Command Execution   ----
     async execute(input) {
         const excludeProperties = input['excludeProperties'];
+        const dialogSize = input['dialogSize'];
         const { entity, entityInfo, data } = input.__context__;
         const [moduleName, entityName] = (entity || '').split('.');
         if (!moduleName || !entityName) {
@@ -1099,6 +1178,9 @@ class AXPUpdateEntityCommand {
                 const translatedTitle = await this.translationService.translateAsync(entityInfo.title);
                 chain = chain.title(`${editText} ${translatedTitle}`);
             }
+            if (dialogSize) {
+                chain.size(dialogSize);
+            }
             dialogRef = await chain.show();
             if (dialogRef.action() === 'cancel') {
                 dialogRef.close();