@object-ui/app-shell 4.0.7 → 4.0.9

package/dist/views/CreateViewDialog.js

@@ -17,7 +17,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, Button, cn, } from '@object-ui/components';
 import { useObjectTranslation } from '@object-ui/i18n';
-import { deriveFieldOptions } from '@object-ui/plugin-view';
+import { deriveFieldOptions, isImageLikeField, isGeoLikeField, pickPreferredField, KANBAN_GROUP_PREFERRED, PRIMARY_DATE_PREFERRED, END_DATE_PREFERRED, } from '@object-ui/plugin-view';
 import { LayoutGrid, KanbanSquare, Calendar as CalendarIcon, Image as ImageIcon, GanttChartSquare, Clock, Map as MapIcon, BarChart3, AlertCircle, } from 'lucide-react';
 function buildViewTypeMeta(t) {
     return [
@@ -40,17 +40,103 @@ function suggestName(typeLabel, existing) {
     }
     return typeLabel;
 }
+const CHART_TYPE_OPTIONS = [
+    { value: 'bar', i18nKey: 'console.objectView.chartTypeBar' },
+    { value: 'line', i18nKey: 'console.objectView.chartTypeLine' },
+    { value: 'pie', i18nKey: 'console.objectView.chartTypePie' },
+    { value: 'area', i18nKey: 'console.objectView.chartTypeArea' },
+    { value: 'scatter', i18nKey: 'console.objectView.chartTypeScatter' },
+];
 const REQUIRED_FIELDS_BY_TYPE = {
-    kanban: [{ key: 'groupByField', i18nKey: 'console.objectView.groupByField', filter: (f) => f.type === 'select' || f.type === 'boolean' }],
-    calendar: [{ key: 'startDateField', i18nKey: 'console.objectView.startDateField', filter: (f) => f.type === 'date' }],
-    timeline: [{ key: 'dateField', i18nKey: 'console.objectView.dateField', filter: (f) => f.type === 'date' }],
-    gantt: [{ key: 'dateField', i18nKey: 'console.objectView.dateField', filter: (f) => f.type === 'date' }],
-    gallery: [{ key: 'imageField', i18nKey: 'console.objectView.imageField' /* no filter — accept any */ }],
+    kanban: [
+        {
+            key: 'groupByField',
+            i18nKey: 'console.objectView.groupByField',
+            helpI18nKey: 'console.objectView.groupByFieldHelp',
+            filter: (f) => f.type === 'select' || f.type === 'boolean',
+            preferred: KANBAN_GROUP_PREFERRED,
+        },
+    ],
+    calendar: [
+        {
+            key: 'startDateField',
+            i18nKey: 'console.objectView.startDateField',
+            helpI18nKey: 'console.objectView.startDateFieldHelp',
+            filter: (f) => f.type === 'date',
+            preferred: PRIMARY_DATE_PREFERRED,
+        },
+    ],
+    timeline: [
+        {
+            key: 'dateField',
+            i18nKey: 'console.objectView.dateField',
+            helpI18nKey: 'console.objectView.timelineDateFieldHelp',
+            filter: (f) => f.type === 'date',
+            preferred: PRIMARY_DATE_PREFERRED,
+        },
+    ],
+    gantt: [
+        {
+            key: 'startDateField',
+            i18nKey: 'console.objectView.startDateField',
+            helpI18nKey: 'console.objectView.ganttStartDateFieldHelp',
+            filter: (f) => f.type === 'date',
+            preferred: PRIMARY_DATE_PREFERRED,
+        },
+        {
+            key: 'endDateField',
+            i18nKey: 'console.objectView.endDateField',
+            helpI18nKey: 'console.objectView.ganttEndDateFieldHelp',
+            filter: (f) => f.type === 'date',
+            preferred: END_DATE_PREFERRED,
+        },
+    ],
+    gallery: [
+        {
+            key: 'imageField',
+            i18nKey: 'console.objectView.imageField',
+            helpI18nKey: 'console.objectView.imageFieldHelp',
+            filter: (f) => isImageLikeField(f),
+        },
+    ],
     map: [
-        { key: 'latitudeField', i18nKey: 'console.objectView.latitudeField', filter: (f) => f.type === 'number' },
-        { key: 'longitudeField', i18nKey: 'console.objectView.longitudeField', filter: (f) => f.type === 'number' },
+        {
+            key: 'latitudeField',
+            i18nKey: 'console.objectView.latitudeField',
+            helpI18nKey: 'console.objectView.latitudeFieldHelp',
+            filter: (f) => f.type === 'number' && isGeoLikeField(f, 'latitude'),
+        },
+        {
+            key: 'longitudeField',
+            i18nKey: 'console.objectView.longitudeField',
+            helpI18nKey: 'console.objectView.longitudeFieldHelp',
+            filter: (f) => f.type === 'number' && isGeoLikeField(f, 'longitude'),
+        },
+    ],
+    chart: [
+        {
+            key: 'chartType',
+            i18nKey: 'console.objectView.chartType',
+            helpI18nKey: 'console.objectView.chartTypeHelp',
+            kind: 'enum',
+            enumOptions: CHART_TYPE_OPTIONS,
+            defaultValue: 'bar',
+        },
+        {
+            key: 'xAxisField',
+            i18nKey: 'console.objectView.xAxisField',
+            helpI18nKey: 'console.objectView.xAxisFieldHelp',
+            filter: (f) => f.type === 'select' || f.type === 'boolean' || f.type === 'date' || f.type === 'text',
+            preferred: KANBAN_GROUP_PREFERRED,
+        },
+        {
+            key: 'yAxisFields',
+            i18nKey: 'console.objectView.yAxisField',
+            helpI18nKey: 'console.objectView.yAxisFieldHelp',
+            filter: (f) => f.type === 'number',
+        },
     ],
-    // grid + chart have no strictly required fields at create time
+    // grid has no strictly required fields at create time
 };
 export function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels, availableTypes, objectDef, }) {
     const { t } = useObjectTranslation();
@@ -92,24 +178,62 @@ export function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels,
     }, [selectedType, touched, types, existingSet]);
     // Required fields for the currently selected type
     const requiredFields = REQUIRED_FIELDS_BY_TYPE[selectedType] ?? [];
+    /** True when this required field has at least one eligible option (or is an
+     *  enum/has no filter). Used by both submit-gating and type-grid disabling. */
+    const hasEligible = (rf) => {
+        if (rf.kind === 'enum')
+            return (rf.enumOptions?.length ?? 0) > 0;
+        if (!objectDef)
+            return true; // no objectDef → skip eligibility checks
+        const eligible = rf.filter ? fieldOptions.filter(rf.filter) : fieldOptions;
+        return eligible.length > 0;
+    };
+    /** Map: viewType -> reason ("missing field type") if it can't be created.
+     *  Computed once per render so the type grid knows which cards to disable. */
+    const typeUnavailability = useMemo(() => {
+        const out = {};
+        types.forEach((vt) => {
+            const reqs = REQUIRED_FIELDS_BY_TYPE[vt.type] ?? [];
+            const blocker = reqs.find((rf) => !hasEligible(rf));
+            out[vt.type] = blocker ?? null;
+        });
+        return out;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [types, fieldOptions, objectDef]);
     const getRequiredValue = (key) => requiredFieldValues[`${selectedType}.${key}`] ?? '';
     const setRequiredValue = (key, value) => setRequiredFieldValues(prev => ({ ...prev, [`${selectedType}.${key}`]: value }));
     const trimmed = label.trim();
     const isDuplicate = trimmed.length > 0 && existingSet.has(trimmed);
     const allRequiredFilled = requiredFields.every(f => getRequiredValue(f.key).length > 0);
     const canSubmit = trimmed.length > 0 && !isDuplicate && allRequiredFilled;
-    // Auto-pick a sensible default for any required field when there's only
-    // one eligible option — saves the user a click. Runs whenever the type or
-    // available options change.
+    // Auto-pick a sensible default for any required field. Runs whenever the
+    // type or available options change, but only fills slots the user hasn't
+    // touched yet. Strategy:
+    //   - enum: seed with `defaultValue` (e.g. chart → 'bar')
+    //   - field with single eligible option: pick it (saves a click)
+    //   - field with multiple eligibles + `preferred`: pick the first match
+    //     in the preferred list (e.g. kanban groupBy → status > stage > …)
     useEffect(() => {
-        if (requiredFields.length === 0 || fieldOptions.length === 0)
+        if (requiredFields.length === 0)
             return;
         requiredFields.forEach((rf) => {
             if (getRequiredValue(rf.key).length > 0)
                 return;
+            if (rf.kind === 'enum') {
+                if (rf.defaultValue)
+                    setRequiredValue(rf.key, rf.defaultValue);
+                return;
+            }
             const eligible = rf.filter ? fieldOptions.filter(rf.filter) : fieldOptions;
-            if (eligible.length === 1)
+            if (eligible.length === 0)
+                return;
+            if (eligible.length === 1) {
                 setRequiredValue(rf.key, eligible[0].value);
+                return;
+            }
+            const picked = pickPreferredField(eligible, rf.preferred ?? []);
+            if (picked)
+                setRequiredValue(rf.key, picked);
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedType, fieldOptions]);
@@ -117,12 +241,14 @@ export function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels,
         if (!canSubmit)
             return;
         // Bundle required fields under their type-specific sub-key, matching the
-        // NamedListView spec (e.g. { type: "kanban", kanban: { groupByField: ... } })
+        // NamedListView spec (e.g. { type: "kanban", kanban: { groupByField: ... } }).
+        // `yAxisFields` is wrapped in an array per spec (chart supports multi-y).
         const subConfig = {};
         requiredFields.forEach((rf) => {
             const v = getRequiredValue(rf.key);
-            if (v)
-                subConfig[rf.key] = v;
+            if (!v)
+                return;
+            subConfig[rf.key] = rf.key === 'yAxisFields' ? [v] : v;
         });
         const payload = {
             type: selectedType,
@@ -136,14 +262,27 @@ export function CreateViewDialog({ open, onOpenChange, onCreate, existingLabels,
     };
     return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "sm:max-w-[560px]", "data-testid": "create-view-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('console.objectView.createView') }), _jsx(DialogDescription, { children: t('console.objectView.createViewDesc') })] }), _jsx("div", { className: "grid grid-cols-4 gap-2 py-2", "data-testid": "create-view-type-grid", children: types.map(({ type, label: typeLabel, description, icon: Icon }) => {
                         const selected = type === selectedType;
-                        return (_jsxs("button", { type: "button", "data-testid": `create-view-type-${type}`, "aria-pressed": selected, onClick: () => setSelectedType(type), className: cn('group flex flex-col items-start gap-1 rounded-lg border bg-background p-3 text-left transition-colors', 'hover:border-primary/60 hover:bg-accent/40', selected
+                        const blocker = typeUnavailability[type];
+                        const disabled = !!blocker;
+                        const disabledTitle = disabled
+                            ? t('console.objectView.viewTypeUnavailable', { field: t(blocker.i18nKey) })
+                            : undefined;
+                        return (_jsxs("button", { type: "button", "data-testid": `create-view-type-${type}`, "aria-pressed": selected, "aria-disabled": disabled, disabled: disabled, title: disabledTitle, onClick: () => { if (!disabled)
+                                setSelectedType(type); }, className: cn('group flex flex-col items-start gap-1 rounded-lg border bg-background p-3 text-left transition-colors', !disabled && 'hover:border-primary/60 hover:bg-accent/40', selected && !disabled
                                 ? 'border-primary ring-2 ring-primary/30 bg-accent/40'
-                                : 'border-border'), children: [_jsx(Icon, { className: cn('h-5 w-5', selected ? 'text-primary' : 'text-muted-foreground group-hover:text-foreground') }), _jsx("div", { className: "text-xs font-medium leading-tight", children: typeLabel }), _jsx("div", { className: "text-[10px] leading-tight text-muted-foreground line-clamp-2", children: description })] }, type));
-                    }) }), requiredFields.length > 0 && (_jsx("div", { className: "space-y-2 rounded-md border border-dashed bg-muted/30 p-3", "data-testid": "create-view-required-fields", children: requiredFields.map((rf) => {
+                                : 'border-border', disabled && 'opacity-50 cursor-not-allowed'), children: [_jsx(Icon, { className: cn('h-5 w-5', selected && !disabled
+                                        ? 'text-primary'
+                                        : 'text-muted-foreground group-hover:text-foreground') }), _jsx("div", { className: "text-xs font-medium leading-tight", children: typeLabel }), _jsx("div", { className: "text-[10px] leading-tight text-muted-foreground line-clamp-2", children: disabled ? t('console.objectView.viewTypeUnavailableShort') : description })] }, type));
+                    }) }), requiredFields.length > 0 && (_jsx("div", { className: "space-y-3 rounded-md border border-dashed bg-muted/30 p-3", "data-testid": "create-view-required-fields", children: requiredFields.map((rf) => {
                         const selectedFieldValue = getRequiredValue(rf.key);
-                        const eligible = rf.filter ? fieldOptions.filter(rf.filter) : fieldOptions;
-                        const noEligible = fieldOptions.length > 0 && eligible.length === 0;
-                        return (_jsxs("div", { className: "space-y-1", children: [_jsxs("label", { htmlFor: `create-view-required-${rf.key}`, className: "text-xs font-medium", children: [t(rf.i18nKey), _jsx("span", { className: "ml-1 text-destructive", children: "*" })] }), _jsxs("select", { id: `create-view-required-${rf.key}`, "data-testid": `create-view-required-${rf.key}`, value: selectedFieldValue, onChange: (e) => setRequiredValue(rf.key, e.target.value), disabled: noEligible, className: cn('h-9 w-full rounded-md border bg-background px-2 text-xs', selectedFieldValue ? 'border-input' : 'border-input'), children: [_jsx("option", { value: "", children: t('console.objectView.selectField') }), eligible.map(f => (_jsx("option", { value: f.value, children: f.label }, f.value)))] }), noEligible && (_jsxs("p", { className: "flex items-center gap-1 text-[11px] text-destructive", "data-testid": `create-view-error-no-field-${rf.key}`, children: [_jsx(AlertCircle, { className: "h-3 w-3" }), t('console.objectView.noEligibleFieldForType')] }))] }, rf.key));
+                        const isEnum = rf.kind === 'enum';
+                        const eligible = isEnum
+                            ? []
+                            : (rf.filter ? fieldOptions.filter(rf.filter) : fieldOptions);
+                        const noEligible = !isEnum && fieldOptions.length > 0 && eligible.length === 0;
+                        return (_jsxs("div", { className: "space-y-1", children: [_jsxs("label", { htmlFor: `create-view-required-${rf.key}`, className: "text-xs font-medium", children: [t(rf.i18nKey), _jsx("span", { className: "ml-1 text-destructive", children: "*" })] }), _jsxs("select", { id: `create-view-required-${rf.key}`, "data-testid": `create-view-required-${rf.key}`, value: selectedFieldValue, onChange: (e) => setRequiredValue(rf.key, e.target.value), disabled: noEligible, className: cn('h-9 w-full rounded-md border bg-background px-2 text-xs', 'border-input'), children: [_jsx("option", { value: "", children: isEnum ? t('console.objectView.selectOption') : t('console.objectView.selectField') }), isEnum
+                                            ? rf.enumOptions.map(opt => (_jsx("option", { value: opt.value, children: t(opt.i18nKey) }, opt.value)))
+                                            : eligible.map(f => (_jsx("option", { value: f.value, children: f.label }, f.value)))] }), rf.helpI18nKey && !noEligible && (_jsx("p", { className: "text-[11px] text-muted-foreground", children: t(rf.helpI18nKey) })), noEligible && (_jsxs("p", { className: "flex items-center gap-1 text-[11px] text-destructive", "data-testid": `create-view-error-no-field-${rf.key}`, children: [_jsx(AlertCircle, { className: "h-3 w-3" }), t('console.objectView.noEligibleFieldForType')] }))] }, rf.key));
                     }) })), _jsxs("div", { className: "space-y-1", children: [_jsxs("label", { htmlFor: "create-view-name-input", className: "text-xs font-medium", children: [t('console.objectView.title'), _jsx("span", { className: "ml-1 text-destructive", children: "*" })] }), _jsx(Input, { id: "create-view-name-input", "data-testid": "create-view-name-input", autoFocus: true, value: label, onChange: (e) => { setLabel(e.target.value); setTouched(true); }, onKeyDown: (e) => { if (e.key === 'Enter' && canSubmit)
                                 handleSubmit(); }, placeholder: t('console.objectView.newView'), className: "h-9" }), isDuplicate && (_jsx("p", { className: "text-[11px] text-destructive", "data-testid": "create-view-error-duplicate", children: t('console.objectView.duplicateViewName') }))] }), _jsxs(DialogFooter, { className: "mt-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false), "data-testid": "create-view-cancel", children: t('console.objectView.cancel') }), _jsx(Button, { type: "button", disabled: !canSubmit, onClick: handleSubmit, "data-testid": "create-view-submit", children: t('console.objectView.create') })] })] }) }));
 }

package/dist/views/DashboardView.js

@@ -57,22 +57,56 @@ function defaultWidgetTitle(type) {
 // ---------------------------------------------------------------------------
 // Helpers: flatten / unflatten widget config for WidgetConfigPanel
 // ---------------------------------------------------------------------------
+// Top-level widget schema keys that the config panel exposes as flat fields.
+// Anything outside this set (e.g. pivot rowField/columnField, table searchable,
+// chart xAxisField/yAxisFields, list itemTemplate, custom component) is stored
+// under `widget.options` per the spec and round-tripped via spread.
+const TOP_LEVEL_WIDGET_KEYS = new Set([
+    'title',
+    'description',
+    'type',
+    'object',
+    'categoryField',
+    'valueField',
+    'aggregate',
+    'colorVariant',
+    'actionUrl',
+    'layoutW',
+    'layoutH',
+    'id',
+]);
 function flattenWidgetConfig(widget) {
+    // Spread options first so explicit top-level widget fields take precedence
+    // on collision. This surfaces type-specific options (pivot/table/chart axes,
+    // list itemTemplate, etc.) so they appear pre-filled in the config panel.
+    const options = (widget.options ?? {});
     return {
+        ...options,
         title: widget.title ?? '',
         description: widget.description ?? '',
         type: widget.type ?? 'metric',
         object: widget.object ?? '',
-        categoryField: widget.categoryField ?? '',
-        valueField: widget.valueField ?? '',
-        aggregate: widget.aggregate ?? 'count',
+        categoryField: widget.categoryField ?? options.categoryField ?? '',
+        valueField: widget.valueField ?? options.valueField ?? '',
+        aggregate: widget.aggregate ?? options.aggregate ?? 'count',
         layoutW: widget.layout?.w ?? 1,
         layoutH: widget.layout?.h ?? 1,
-        colorVariant: widget.colorVariant ?? 'default',
-        actionUrl: widget.actionUrl ?? '',
+        colorVariant: widget.colorVariant ?? options.colorVariant ?? 'default',
+        actionUrl: widget.actionUrl ?? options.actionUrl ?? '',
     };
 }
 function unflattenWidgetConfig(config, base) {
+    // Collect any unknown keys (pivot/table/chart-specific) into options so the
+    // serialized widget keeps the spec-compliant nested shape.
+    const baseOptions = (base.options ?? {});
+    const newOptions = { ...baseOptions };
+    for (const [key, value] of Object.entries(config)) {
+        if (TOP_LEVEL_WIDGET_KEYS.has(key))
+            continue;
+        if (value === undefined)
+            continue;
+        newOptions[key] = value;
+    }
     return {
         title: config.title,
         description: config.description,
@@ -84,17 +118,19 @@ function unflattenWidgetConfig(config, base) {
         layout: { ...(base.layout || {}), w: config.layoutW, h: config.layoutH },
         colorVariant: config.colorVariant,
         actionUrl: config.actionUrl,
+        ...(Object.keys(newOptions).length > 0 ? { options: newOptions } : {}),
     };
 }
 function extractDashboardConfig(schema) {
+    const s = (schema ?? {});
     return {
-        columns: schema.columns ?? 3,
-        gap: schema.gap ?? 4,
-        rowHeight: String(schema.rowHeight ?? '120'),
-        refreshInterval: String(schema.refreshInterval ?? '0'),
-        title: schema.title ?? '',
-        showDescription: schema.showDescription ?? true,
-        theme: schema.theme ?? 'auto',
+        columns: s.columns ?? 3,
+        gap: s.gap ?? 4,
+        rowHeight: String(s.rowHeight ?? '120'),
+        refreshInterval: String(s.refreshInterval ?? '0'),
+        title: s.title ?? '',
+        showDescription: s.showDescription ?? true,
+        theme: s.theme ?? 'auto',
     };
 }
 // ---------------------------------------------------------------------------
@@ -184,11 +220,15 @@ export function DashboardView({ dataSource }) {
     // ---- Save helper --------------------------------------------------------
     const saveSchema = useCallback(async (schema) => {
         try {
-            if (adapter) {
+            if (adapter && adapter.updateDashboard) {
+                await adapter.updateDashboard(dashboardName, schema);
+            }
+            else if (adapter) {
+                // Fallback for adapters that don't expose updateDashboard
                 await adapter.update('sys_dashboard', dashboardName, schema);
-                // Refresh metadata cache so closing the config panel shows saved data
-                refresh().catch(() => { });
             }
+            // Refresh metadata cache so closing the config panel shows saved data
+            refresh().catch(() => { });
         }
         catch (err) {
             console.warn('[DashboardView] Auto-save failed:', err);
@@ -250,12 +290,16 @@ export function DashboardView({ dataSource }) {
     const handleDashboardConfigSave = useCallback((config) => {
         if (!editSchema)
             return;
+        const toNum = (v, fallback) => {
+            const n = Number(v);
+            return Number.isFinite(n) ? n : fallback;
+        };
         const newSchema = {
             ...editSchema,
-            columns: config.columns,
-            gap: config.gap,
-            rowHeight: config.rowHeight,
-            refreshInterval: Number(config.refreshInterval) || 0,
+            columns: toNum(config.columns, editSchema.columns),
+            gap: toNum(config.gap, editSchema.gap),
+            rowHeight: toNum(config.rowHeight, editSchema.rowHeight),
+            refreshInterval: toNum(config.refreshInterval, 0) ?? 0,
             title: config.title,
             showDescription: config.showDescription,
             theme: config.theme,
@@ -267,12 +311,15 @@ export function DashboardView({ dataSource }) {
     const handleDashboardFieldChange = useCallback((field, value) => {
         if (!editSchema)
             return;
-        // Map config field keys to proper DashboardSchema updates for live preview
+        // Map config field keys to proper DashboardSchema updates for live preview.
+        // Coerce numeric layout fields so previews/save payloads stay typed.
         setEditSchema((prev) => {
             if (!prev)
                 return prev;
-            if (field === 'refreshInterval') {
-                return { ...prev, refreshInterval: Number(value) || 0 };
+            const numericFields = new Set(['columns', 'gap', 'rowHeight', 'refreshInterval']);
+            if (numericFields.has(field)) {
+                const n = Number(value);
+                return { ...prev, [field]: Number.isFinite(n) ? n : prev[field] };
             }
             return { ...prev, [field]: value };
         });

package/dist/views/ObjectView.d.ts

@@ -8,4 +8,4 @@
  * - useObjectActions for toolbar create button
  * - ListView delegation for non-grid view types (kanban, calendar, chart, etc.)
  */
-export declare function ObjectView({ dataSource, objects, onEdit }: any): import("react/jsx-runtime").JSX.Element;
+export declare function ObjectView({ dataSource, objects, onEdit, externalRefreshKey }: any): import("react/jsx-runtime").JSX.Element;