@adcops/autocore-react 3.3.82 → 3.3.84

package/src/components/ams/AssetEditDialog.tsx

@@ -0,0 +1,463 @@
+/*
+ * <AssetEditDialog> — modal for editing an existing asset's role,
+ * nameplate (custom fields), and per-axis sub_locations matrix.
+ *
+ * The server's `ams.update_asset` treats `asset_id`, `asset_type`,
+ * `serial`, and `install_date` as immutable; this dialog mirrors that
+ * by rendering those four as read-only context up top. Status stays
+ * out of the form because the Retire button on <AssetDetailView>
+ * already owns that transition — keeping the dialog focused on
+ * "fix the values".
+ *
+ * Sibling <AssetRegistryTable>'s Add dialog covers creation. The two
+ * forms have similar shape but enough divergent rules (which fields
+ * are editable; role becomes a dropdown vs. read-only; etc.) that
+ * sharing one component would be more confusing than two focused
+ * dialogs. If we ever add a third mode the right answer is to
+ * extract a shared <AssetFieldsForm> sub-component then.
+ */
+
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { InputText } from 'primereact/inputtext';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { MessageType } from '../../hub/CommandMessage';
+import { useAms, type AmsRole } from './AmsProvider';
+
+// Sentinel: keeps the Role dropdown consistent with the Add dialog's
+// "Other..." escape hatch so operators can move an asset to a custom
+// role that isn't declared in project.json.
+const ROLE_OTHER = '__other__';
+
+interface SchemaField {
+    name: string;
+    type: string;
+    units?: string;
+    label?: string;
+    description?: string;
+    required?: boolean;
+}
+
+interface SubLocationsSchema {
+    label?: string;
+    key_label?: string;
+    keys: string[];
+    fields: SchemaField[];
+    calibration_fields?: SchemaField[];
+}
+
+export interface AssetEditDialogProps {
+    visible: boolean;
+    /** Full asset record as returned by `ams.read_asset`. The dialog
+     *  pre-seeds every editable input from this; on submit it pins
+     *  asset_id from here onto the update_asset call. */
+    asset: any | null;
+    onHide: () => void;
+    /** Fires after a successful update so the parent can refresh. */
+    onSaved?: () => void;
+}
+
+function fieldsFor(schemas: any, assetType: string): SchemaField[] {
+    const arr = schemas?.[assetType]?.fields;
+    return Array.isArray(arr) ? arr as SchemaField[] : [];
+}
+
+function subLocationsFor(schemas: any, assetType: string): SubLocationsSchema | null {
+    const sl = schemas?.[assetType]?.sub_locations;
+    if (!sl || !Array.isArray(sl.keys) || !Array.isArray(sl.fields)) return null;
+    return sl as SubLocationsSchema;
+}
+
+/** Coerce a per-cell string back to the field's declared type.
+ *  Mirrors the Add dialog's helper so empty strings drop out, numbers
+ *  come back as JSON numbers, bools as bools. */
+function coerceField(field: SchemaField, raw: string): any {
+    if (raw === undefined || raw === '') return undefined;
+    switch (field.type) {
+        case 'f32': case 'f64':
+        case 'i8': case 'i16': case 'i32': case 'i64':
+        case 'u8': case 'u16': case 'u32': case 'u64': {
+            const n = Number(raw);
+            return Number.isFinite(n) ? n : undefined;
+        }
+        case 'bool':
+            return raw === 'true' || raw === '1';
+        default:
+            return raw;
+    }
+}
+
+/** Default a field's input from whatever's in the asset's custom blob.
+ *  Numbers / bools serialize back to strings for the text inputs to
+ *  consume; missing values become "". */
+function seedFromCustom(custom: Record<string, any> | undefined, name: string): string {
+    if (!custom) return '';
+    const v = custom[name];
+    if (v === undefined || v === null) return '';
+    return String(v);
+}
+
+export const AssetEditDialog: React.FC<AssetEditDialogProps> = ({
+    visible, asset, onHide, onSaved,
+}) => {
+    const { schemas, roles } = useAms();
+    const { invoke } = useContext(EventEmitterContext);
+
+    const assetType = asset?.asset_type ?? '';
+    const fields = useMemo(() => fieldsFor(schemas, assetType), [schemas, assetType]);
+    const subLocationsSchema = useMemo(
+        () => subLocationsFor(schemas, assetType), [schemas, assetType],
+    );
+    const rolesForType: AmsRole[] = useMemo(
+        () => (assetType ? roles[assetType] ?? [] : []),
+        [assetType, roles],
+    );
+    const typeHasRoles = rolesForType.length > 0;
+
+    const roleDropdownOptions = useMemo(() => {
+        const opts = rolesForType.map(r => ({
+            label: r.label ?? r.location, value: r.location,
+        }));
+        opts.push({ label: 'Other (advanced — type a custom role)', value: ROLE_OTHER });
+        return opts;
+    }, [rolesForType]);
+
+    // Form state — kept local to the dialog so editing one asset
+    // doesn't leak into the next open. Seeded inside the `visible`
+    // effect below.
+    const [roleSelection, setRoleSelection] = useState<string>('');
+    const [location, setLocation] = useState<string>('');
+    const [customFields, setCustomFields] =
+        useState<Record<string, string>>({});
+    const [subLocationFields, setSubLocationFields] =
+        useState<Record<string, Record<string, string>>>({});
+    const [submitting, setSubmitting] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    // Seed every input from the asset when the dialog opens. Re-seeds
+    // on every open so editing one asset, cancelling, then opening
+    // another doesn't carry the previous values forward.
+    useEffect(() => {
+        if (!visible || !asset) return;
+        setError(null);
+        setSubmitting(false);
+
+        // Role: pick the dropdown option when the asset's location
+        // matches a declared role; otherwise route into ROLE_OTHER so
+        // the operator can keep the current custom string.
+        const loc = typeof asset.location === 'string' ? asset.location : '';
+        const declaredHit = rolesForType.find(r => r.location === loc);
+        if (loc === '') {
+            setRoleSelection('');
+            setLocation('');
+        } else if (declaredHit) {
+            setRoleSelection(loc);
+            setLocation(loc);
+        } else {
+            setRoleSelection(ROLE_OTHER);
+            setLocation(loc);
+        }
+
+        // Nameplate: stringify each declared field's current value.
+        const seededCustom: Record<string, string> = {};
+        for (const f of fields) {
+            seededCustom[f.name] = seedFromCustom(asset.custom, f.name);
+        }
+        setCustomFields(seededCustom);
+
+        // Per-axis matrix: same treatment, walking each declared key
+        // and each declared field.
+        const seededSub: Record<string, Record<string, string>> = {};
+        if (subLocationsSchema) {
+            const subSrc = (asset.sub_locations && typeof asset.sub_locations === 'object')
+                ? asset.sub_locations as Record<string, any> : {};
+            for (const key of subLocationsSchema.keys) {
+                const row = (subSrc[key] && typeof subSrc[key] === 'object')
+                    ? subSrc[key] as Record<string, any> : {};
+                const seededRow: Record<string, string> = {};
+                for (const f of subLocationsSchema.fields) {
+                    const v = row[f.name];
+                    seededRow[f.name] = (v === undefined || v === null) ? '' : String(v);
+                }
+                seededSub[key] = seededRow;
+            }
+        }
+        setSubLocationFields(seededSub);
+    }, [visible, asset, fields, subLocationsSchema, rolesForType]);
+
+    const onRoleChange = (value: string) => {
+        if (value === ROLE_OTHER) {
+            setRoleSelection(ROLE_OTHER);
+            // Keep whatever string is currently in `location` so the
+            // operator can tweak it rather than retyping.
+        } else {
+            setRoleSelection(value);
+            setLocation(value);
+        }
+    };
+
+    const onSubmit = async () => {
+        if (!asset?.asset_id) return;
+        setSubmitting(true);
+        setError(null);
+
+        // Build `custom` from the current input map, coercing each
+        // value back to its declared JSON type. Empty inputs drop out
+        // so the asset.json doesn't carry empty strings that the
+        // placeholder resolver would treat as "missing".
+        const custom: Record<string, any> = {};
+        for (const field of fields) {
+            const raw = customFields[field.name];
+            const coerced = coerceField(field, raw ?? '');
+            if (coerced !== undefined) custom[field.name] = coerced;
+        }
+
+        // Per-axis matrix: only included when the asset_type declares
+        // a keyed-fields schema. Empty cells drop out per-axis; the
+        // server re-validates with a per-key, per-field problem list
+        // and we surface that error inline if anything's wrong.
+        let subLocations: Record<string, Record<string, any>> | undefined;
+        if (subLocationsSchema) {
+            subLocations = {};
+            for (const key of subLocationsSchema.keys) {
+                const row: Record<string, any> = {};
+                for (const field of subLocationsSchema.fields) {
+                    const raw = subLocationFields[key]?.[field.name] ?? '';
+                    const coerced = coerceField(field, raw);
+                    if (coerced !== undefined) row[field.name] = coerced;
+                }
+                subLocations[key] = row;
+            }
+        }
+
+        const payload: any = {
+            asset_id: asset.asset_id,
+            location,
+            custom,
+        };
+        if (subLocations) payload.sub_locations = subLocations;
+
+        try {
+            const resp: any = await invoke(
+                'ams.update_asset' as any, MessageType.Request, payload,
+            );
+            if (resp?.success) {
+                onSaved?.();
+                onHide();
+            } else {
+                setError(resp?.error_message ?? 'update_asset failed');
+            }
+        } catch (e: any) {
+            setError(String(e?.message ?? e));
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    // Gate Save on the same required-field rules the Add dialog uses,
+    // applied to the *current* (possibly edited) values. The server
+    // re-validates and we surface its error if anything slips through.
+    const saveDisabled =
+        !asset?.asset_id ||
+        submitting ||
+        (typeHasRoles && (
+            roleSelection === '' ||
+            (roleSelection === ROLE_OTHER && !location.trim())
+        )) ||
+        fields.some(f =>
+            f.required && !(customFields[f.name]?.toString().trim()),
+        ) ||
+        (subLocationsSchema?.keys.some(key =>
+            subLocationsSchema.fields.some(field =>
+                field.required &&
+                !(subLocationFields[key]?.[field.name]?.toString().trim()),
+            ),
+        ) ?? false);
+
+    if (!asset) return null;
+    const typeLabel = schemas[assetType]?.label ?? assetType;
+
+    return (
+        <Dialog
+            header={`Edit Asset — ${asset.asset_id}`}
+            visible={visible}
+            style={{ width: '32rem' }}
+            onHide={() => { if (!submitting) onHide(); }}
+            footer={
+                <>
+                    <Button label="Cancel" severity="secondary"
+                        onClick={onHide} disabled={submitting} />
+                    <Button label="Save" icon="pi pi-check"
+                        onClick={onSubmit} loading={submitting}
+                        disabled={saveDisabled} />
+                </>
+            }
+        >
+            {/* Read-only context strip — type, serial, install_date.
+                The server treats these as immutable; surfacing them
+                here keeps the operator oriented without inviting an
+                edit that would silently no-op. */}
+            <div style={{ display: 'grid',
+                          gridTemplateColumns: 'auto 1fr',
+                          gap: '0.25rem 1rem',
+                          fontSize: '0.875rem',
+                          color: 'var(--text-secondary-color)',
+                          marginBottom: '0.75rem' }}>
+                <span>Type</span>          <span>{typeLabel}</span>
+                <span>Serial</span>        <span>{asset.serial || <em>(none)</em>}</span>
+                {asset.install_date && (
+                    <>
+                        <span>Installed</span>
+                        <span>{new Date(asset.install_date).toLocaleString()}</span>
+                    </>
+                )}
+            </div>
+
+            <div style={{ display: 'grid',
+                          gridTemplateColumns: 'auto 1fr',
+                          gap: '0.5rem 1rem',
+                          alignItems: 'center' }}>
+                {/* Role field. Asset types referenced only by_id_field
+                    (no by_location asset_ref) come back with an empty
+                    role list — we hide the row entirely so the operator
+                    doesn't try to set a role that no test method or
+                    module will pick up. */}
+                {typeHasRoles && (
+                    <>
+                        <label>Role *</label>
+                        <Dropdown
+                            value={roleSelection}
+                            options={roleDropdownOptions}
+                            onChange={(e) => onRoleChange(e.value)}
+                            placeholder="Choose where this asset is mounted"
+                        />
+                        {roleSelection === ROLE_OTHER && (
+                            <>
+                                <label>Custom role</label>
+                                <InputText
+                                    value={location}
+                                    placeholder="e.g. tsdr_secondary"
+                                    onChange={(e) => setLocation(e.target.value)}
+                                />
+                            </>
+                        )}
+                    </>
+                )}
+
+                {/* Schema-declared nameplate fields. */}
+                {fields.map(field => {
+                    const label = field.label ?? field.name;
+                    const fullLabel = field.units
+                        ? `${label} [${field.units}]${field.required ? ' *' : ''}`
+                        : `${label}${field.required ? ' *' : ''}`;
+                    const isNum = field.type !== 'string' && field.type !== 'bool';
+                    return (
+                        <React.Fragment key={field.name}>
+                            <label title={field.description ?? undefined}>
+                                {fullLabel}
+                            </label>
+                            {field.type === 'bool' ? (
+                                <Dropdown
+                                    value={customFields[field.name] ?? ''}
+                                    options={[
+                                        { label: 'true',  value: 'true' },
+                                        { label: 'false', value: 'false' },
+                                    ]}
+                                    onChange={(e) => setCustomFields(s => ({
+                                        ...s, [field.name]: e.value,
+                                    }))}
+                                    placeholder="—"
+                                />
+                            ) : (
+                                <InputText
+                                    value={customFields[field.name] ?? ''}
+                                    keyfilter={isNum ? 'num' : undefined}
+                                    placeholder={field.description ?? undefined}
+                                    onChange={(e) => setCustomFields(s => ({
+                                        ...s, [field.name]: e.target.value,
+                                    }))}
+                                />
+                            )}
+                        </React.Fragment>
+                    );
+                })}
+            </div>
+
+            {/* Per-axis matrix (multi-axis transducer types etc.) */}
+            {subLocationsSchema && (
+                <div style={{ marginTop: '1.5rem' }}>
+                    <h4 style={{ margin: '0 0 0.5rem 0' }}>
+                        {subLocationsSchema.label ?? 'Sub-locations'}
+                    </h4>
+                    <div style={{ overflowX: 'auto' }}>
+                        <table style={{ width: '100%', borderCollapse: 'collapse',
+                                        fontSize: '0.875rem' }}>
+                            <thead>
+                                <tr>
+                                    <th style={{ textAlign: 'left', padding: '0.25rem 0.5rem',
+                                                 borderBottom: '1px solid var(--surface-border)' }}>
+                                        {subLocationsSchema.key_label ?? 'Key'}
+                                    </th>
+                                    {subLocationsSchema.fields.map(f => (
+                                        <th key={f.name}
+                                            title={f.description ?? undefined}
+                                            style={{ textAlign: 'left',
+                                                     padding: '0.25rem 0.5rem',
+                                                     borderBottom: '1px solid var(--surface-border)' }}>
+                                            {(f.label ?? f.name)}
+                                            {f.units ? ` [${f.units}]` : ''}
+                                            {f.required ? ' *' : ''}
+                                        </th>
+                                    ))}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {subLocationsSchema.keys.map(key => (
+                                    <tr key={key}>
+                                        <td style={{ padding: '0.25rem 0.5rem', fontWeight: 600 }}>
+                                            {key}
+                                        </td>
+                                        {subLocationsSchema.fields.map(field => {
+                                            const cellValue =
+                                                subLocationFields[key]?.[field.name] ?? '';
+                                            const isNum =
+                                                field.type !== 'string' && field.type !== 'bool';
+                                            return (
+                                                <td key={field.name}
+                                                    style={{ padding: '0.25rem 0.5rem' }}>
+                                                    <InputText
+                                                        value={cellValue}
+                                                        keyfilter={isNum ? 'num' : undefined}
+                                                        onChange={(e) => {
+                                                            const v = e.target.value;
+                                                            setSubLocationFields(s => ({
+                                                                ...s,
+                                                                [key]: {
+                                                                    ...(s[key] ?? {}),
+                                                                    [field.name]: v,
+                                                                },
+                                                            }));
+                                                        }}
+                                                        style={{ width: '100%' }}
+                                                    />
+                                                </td>
+                                            );
+                                        })}
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            )}
+
+            {error && (
+                <div style={{ marginTop: '1rem', color: '#ef4444' }}>
+                    {error}
+                </div>
+            )}
+        </Dialog>
+    );
+};

package/src/components/ams/index.ts

@@ -10,6 +10,7 @@ export type { AmsRole, AmsRoleRegistry } from './AmsProvider';
 export { AssetRegistryTable } from './AssetRegistryTable';
 export { AssetDetailView } from './AssetDetailView';
 export { CalibrationEntryDialog } from './CalibrationEntryDialog';
+export { AssetEditDialog } from './AssetEditDialog';
 export { SubLocationPicker } from './SubLocationPicker';
 export { PlaceholderHealthPanel } from './PlaceholderHealthPanel';
 export { MissingAssetsBanner } from './MissingAssetsBanner';

package/src/components/network/NetworkPanel.tsx

@@ -118,7 +118,19 @@ export const NetworkPanel: React.FC<NetworkPanelProps> = ({ className }) => {
             }}>
                 <div>
                     <h3 style={{ margin: 0 }}>Network</h3>
-                    {activeWifi ? (
+                    {/* Three states for the status line:
+                     *  - status hasn't loaded yet: "Loading…" — keeps
+                     *    the panel from flashing "No WiFi device" while
+                     *    the initial nw.list_interfaces is in flight.
+                     *  - status loaded, a wifi device exists: show its
+                     *    connection / state / IP.
+                     *  - status loaded, no wifi device: the genuine
+                     *    "No WiFi device detected" message. */}
+                    {!net.statusLoaded ? (
+                        <div style={{ fontSize: '0.875rem', color: '#9ca3af', marginTop: '0.25rem' }}>
+                            Loading network status…
+                        </div>
+                    ) : activeWifi ? (
                         <div style={{ fontSize: '0.875rem', color: '#9ca3af', marginTop: '0.25rem' }}>
                             {activeWifi.state === 'connected'
                                 ? <>Connected to <code>{activeWifi.connection || '(unnamed)'}</code> on <code>{activeWifi.device}</code></>