@adcops/autocore-react 3.3.112 → 3.3.115

package/src/components/ams-editor/AssetTypeEditor.css

@@ -0,0 +1,122 @@
+.ams-typeeditor {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+.ams-typeeditor__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.75rem 1rem;
+    border-bottom: 1px solid var(--surface-d, #e2e8f0);
+}
+
+.ams-typeeditor__header h2 {
+    margin: 0;
+    font-size: 1.125rem;
+}
+
+.ams-typeeditor__header-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.ams-typeeditor__dirty-pill {
+    display: inline-block;
+    background: #ea580c;
+    color: white;
+    font-size: 0.7rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 0.15rem 0.5rem;
+    border-radius: 999px;
+    margin-left: 0.5rem;
+    vertical-align: middle;
+}
+
+.ams-typeeditor__body {
+    flex: 1;
+    display: flex;
+    min-height: 0;
+}
+
+.ams-typeeditor__sidebar {
+    flex: 0 0 320px;
+    border-right: 1px solid var(--surface-d, #e2e8f0);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.ams-typeeditor__sidebar-actions {
+    display: flex;
+    gap: 0.25rem;
+    padding: 0.5rem;
+    border-bottom: 1px solid var(--surface-d, #e2e8f0);
+    flex-wrap: wrap;
+}
+
+.ams-typeeditor__sidebar-actions .p-button {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.ams-typeeditor__builtins {
+    padding: 0.5rem;
+    border-top: 1px solid var(--surface-d, #e2e8f0);
+    color: var(--text-color-secondary, #64748b);
+}
+
+.ams-typeeditor__detail {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.ams-typeeditor__error {
+    background: #fef2f2;
+    color: #991b1b;
+    border-left: 3px solid #dc2626;
+    padding: 0.5rem 1rem;
+    margin: 0.5rem 1rem;
+    font-size: 0.875rem;
+}
+
+.ams-typeeditor__error pre {
+    white-space: pre-wrap;
+    margin: 0.25rem 0 0 0;
+    font-family: ui-monospace, monospace;
+    font-size: 0.8rem;
+}
+
+.ams-typeeditor__empty {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-color-secondary, #64748b);
+}
+
+.ams-typeeditor__new-label {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    margin-bottom: 0.25rem;
+}
+
+/* Portrait HMIs: stack the panes (see TisConfigEditor.css rationale). */
+@media (orientation: portrait) {
+    .ams-typeeditor__body {
+        flex-direction: column;
+    }
+
+    .ams-typeeditor__sidebar {
+        flex: 0 1 35%;
+        border-right: none;
+        border-bottom: 1px solid var(--surface-d, #e2e8f0);
+    }
+}

package/src/components/ams-editor/AssetTypeEditor.tsx

@@ -0,0 +1,295 @@
+/**
+ * AssetTypeEditor — master-detail UI for authoring AMS custom asset TYPES
+ * from the operator HMI (the Instron-style "define your own asset type"
+ * capability). The instance-level UI (AssetRegistryTable / AssetEditDialog)
+ * edits asset records; this edits the type *schemas* those records conform
+ * to.
+ *
+ * Left: custom types (editable). Right: tabbed AssetTypeFormEditor.
+ * Action bar: New / Duplicate / Delete / Save / Revert.
+ *
+ * Staged-then-saved, mirroring the TIS test-method editor: New/Apply/Delete
+ * stage into the AMS module's in-memory buffer (dirty); Save persists to the
+ * `asset_management.json` sidecar (ams.save_schema_config) and broadcasts
+ * ams.schema_changed so open pickers/forms refresh. Built-in types
+ * (load_cell/linear_encoder/spring) are code-defined and shown read-only for
+ * reference — they can't be edited here.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import { useContext } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { Dialog } from 'primereact/dialog';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { MessageType } from '../../hub/CommandMessage';
+import { useAmsSchemaConfig } from '../../hooks/useAmsSchemaConfig';
+import { useAmsAssetTypes } from '../../hooks/useAmsAssetTypes';
+import type { TisIpcInvoker } from '../../hooks/useTisConfig';
+import { AssetTypeFormEditor } from './AssetTypeFormEditor';
+import type { AssetTypeDef } from './types';
+
+import './AssetTypeEditor.css';
+
+export interface AssetTypeEditorProps {
+    /** Optional invoker override — primarily for the playground / tests. */
+    invoker?: TisIpcInvoker;
+}
+
+interface TypeRow {
+    id: string;
+    label: string;
+}
+
+const EMPTY_TYPE: AssetTypeDef = {
+    label: '',
+    description: '',
+    fields: [],
+    calibration_fields: [],
+};
+
+export const AssetTypeEditor: React.FC<AssetTypeEditorProps> = ({ invoker }) => {
+    const ctx = useContext(EventEmitterContext);
+    // Resolve the invoker ONCE and memoize — both hooks key effects off it,
+    // and an invoker rebuilt every render drives a refetch loop that wipes
+    // in-progress edits (see useAmsSchemaConfig's ref note).
+    const effectiveInvoker: TisIpcInvoker = useMemo(
+        () => invoker
+            ?? (async (topic, payload) => await ctx.invoke(topic as any, MessageType.Request, payload as any)),
+        [invoker, ctx],
+    );
+
+    const ams = useAmsSchemaConfig({ invoker: effectiveInvoker });
+    // Full merged catalog (built-in + custom) — used to derive the built-in
+    // names for the `extends` dropdown and to warn on name collisions.
+    const catalog = useAmsAssetTypes({ invoker: effectiveInvoker });
+
+    const [selectedId, setSelectedId] = useState<string | null>(null);
+    const [draftError, setDraftError] = useState<string | null>(null);
+    const [busy, setBusy] = useState<boolean>(false);
+    const [newDialogOpen, setNewDialogOpen] = useState<boolean>(false);
+    const [newId, setNewId] = useState<string>('');
+
+    const customIds = useMemo(
+        () => Object.keys(ams.config?.assetTypes ?? {}),
+        [ams.config],
+    );
+    const builtinTypes = useMemo(
+        () => catalog.types.filter(t => !customIds.includes(t)),
+        [catalog.types, customIds],
+    );
+
+    const rows: TypeRow[] = useMemo(() => {
+        if (!ams.config) return [];
+        return Object.entries(ams.config.assetTypes).map(([id, d]) => ({
+            id,
+            label: (d as AssetTypeDef)?.label ?? '',
+        }));
+    }, [ams.config]);
+
+    useEffect(() => {
+        if (!selectedId && ams.config) {
+            setSelectedId(Object.keys(ams.config.assetTypes)[0] ?? null);
+        }
+    }, [ams.config, selectedId]);
+
+    useEffect(() => { setDraftError(null); }, [selectedId]);
+
+    const onApply = async (next: AssetTypeDef) => {
+        if (!selectedId) return;
+        setBusy(true);
+        try {
+            await ams.putType(selectedId, next);
+            setDraftError(null);
+        } catch (e: any) {
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const onCreate = async () => {
+        const id = newId.trim();
+        if (!id) return;
+        if (ams.config?.assetTypes[id]) {
+            setDraftError(`A custom type named "${id}" already exists.`);
+            return;
+        }
+        if (builtinTypes.includes(id)) {
+            // Allowed (it becomes an override/extension of the built-in), but
+            // warn so the operator knows they're shadowing a built-in.
+            if (!window.confirm(
+                `"${id}" is a built-in type. Creating a custom type with this id ` +
+                `overrides/extends the built-in. Continue?`)) return;
+        }
+        setBusy(true);
+        try {
+            await ams.putType(id, EMPTY_TYPE);
+            setSelectedId(id);
+            setNewDialogOpen(false);
+            setNewId('');
+        } catch (e: any) {
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const onDuplicate = async () => {
+        if (!selectedId || !ams.config) return;
+        const source = ams.config.assetTypes[selectedId];
+        if (!source) return;
+        let candidate = `${selectedId}_copy`;
+        let n = 2;
+        while (ams.config.assetTypes[candidate]) candidate = `${selectedId}_copy_${n++}`;
+        setBusy(true);
+        try {
+            await ams.putType(candidate, JSON.parse(JSON.stringify(source)));
+            setSelectedId(candidate);
+        } catch (e: any) {
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const onDelete = async () => {
+        if (!selectedId) return;
+        if (!window.confirm(`Remove type "${selectedId}"? This is staged — Save persists it.`)) return;
+        setBusy(true);
+        try {
+            await ams.removeType(selectedId);
+            setSelectedId(null);
+        } catch (e: any) {
+            // Server refuses when assets still use the type — surface it.
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const onSave = async () => {
+        if (!window.confirm('Save asset-type changes to disk?')) return;
+        setBusy(true);
+        try {
+            await ams.save();
+        } catch (e: any) {
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    const onRevert = async () => {
+        if (!window.confirm('Discard all in-progress edits? This cannot be undone.')) return;
+        setBusy(true);
+        try {
+            await ams.revert();
+        } catch (e: any) {
+            setDraftError(String(e?.message ?? e));
+        } finally {
+            setBusy(false);
+        }
+    };
+
+    return (
+        <div className="ams-typeeditor">
+            <header className="ams-typeeditor__header">
+                <h2>
+                    Asset Types{' '}
+                    {ams.config?.dirty && <span className="ams-typeeditor__dirty-pill">unsaved</span>}
+                </h2>
+                <div className="ams-typeeditor__header-actions">
+                    <Button label="Save…" icon="pi pi-save"
+                        disabled={busy || !ams.config?.dirty} onClick={onSave} />
+                    <Button label="Revert" icon="pi pi-undo" className="p-button-secondary"
+                        disabled={busy || !ams.config?.dirty} onClick={onRevert} />
+                </div>
+            </header>
+
+            {ams.error && (
+                <div className="ams-typeeditor__error">
+                    <strong>Error:</strong> <pre>{ams.error}</pre>
+                </div>
+            )}
+
+            <div className="ams-typeeditor__body">
+                <aside className="ams-typeeditor__sidebar">
+                    <div className="ams-typeeditor__sidebar-actions">
+                        <Button label="New" icon="pi pi-plus"
+                            disabled={busy} onClick={() => setNewDialogOpen(true)} />
+                        <Button label="Duplicate" icon="pi pi-clone" className="p-button-secondary"
+                            disabled={busy || !selectedId} onClick={onDuplicate} />
+                        <Button label="Delete" icon="pi pi-trash" className="p-button-danger"
+                            disabled={busy || !selectedId} onClick={onDelete} />
+                    </div>
+                    <DataTable
+                        value={rows}
+                        selection={rows.find(r => r.id === selectedId) ?? null}
+                        onSelectionChange={(e) => setSelectedId((e.value as TypeRow | null)?.id ?? null)}
+                        selectionMode="single"
+                        dataKey="id"
+                        scrollable
+                        scrollHeight="flex"
+                        emptyMessage={ams.loading ? 'Loading…' : 'No custom asset types defined.'}
+                    >
+                        <Column field="id" header="Type ID" />
+                        <Column field="label" header="Label" />
+                    </DataTable>
+                    {builtinTypes.length > 0 && (
+                        <div className="ams-typeeditor__builtins">
+                            <small>Built-in (read-only): {builtinTypes.join(', ')}</small>
+                        </div>
+                    )}
+                </aside>
+
+                <section className="ams-typeeditor__detail">
+                    {selectedId && ams.config?.assetTypes[selectedId] ? (
+                        <>
+                            {draftError && (
+                                <div className="ams-typeeditor__error"><pre>{draftError}</pre></div>
+                            )}
+                            <AssetTypeFormEditor
+                                typeId={selectedId}
+                                def={ams.config.assetTypes[selectedId] as AssetTypeDef}
+                                onApply={onApply}
+                                busy={busy}
+                                builtinTypes={builtinTypes}
+                            />
+                        </>
+                    ) : (
+                        <div className="ams-typeeditor__empty">
+                            Select a custom asset type on the left, or create a new one.
+                        </div>
+                    )}
+                </section>
+            </div>
+
+            <Dialog
+                header="New Asset Type"
+                visible={newDialogOpen}
+                onHide={() => setNewDialogOpen(false)}
+                style={{ width: '24rem' }}
+            >
+                <label className="ams-typeeditor__new-label">
+                    Type ID
+                    <InputText
+                        value={newId}
+                        onChange={(e) => setNewId(e.target.value)}
+                        placeholder="e.g. triaxial_transducer"
+                        autoFocus
+                    />
+                </label>
+                <small>Canonical key — appears in wire payloads, on-disk paths, and generated code.</small>
+                <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end', marginTop: '1rem' }}>
+                    <Button label="Cancel" className="p-button-text" onClick={() => setNewDialogOpen(false)} />
+                    <Button label="Create" disabled={!newId.trim() || busy} onClick={onCreate} />
+                </div>
+            </Dialog>
+        </div>
+    );
+};
+
+export default AssetTypeEditor;

package/src/components/ams-editor/AssetTypeFormEditor.tsx

@@ -0,0 +1,178 @@
+/**
+ * AssetTypeFormEditor — tabbed shell for a single custom asset type,
+ * mirroring the TIS MethodFormEditor. Tabs: Identity, Fields, Calibration
+ * Fields, Sub-locations, and an always-available JSON escape hatch.
+ *
+ * Owns the local working copy; hands the changed copy back via onApply —
+ * the parent decides when to call ams.put_asset_type.
+ */
+
+import { useEffect, useMemo, useState } from 'react';
+import { TabView, TabPanel } from 'primereact/tabview';
+import { Button } from 'primereact/button';
+import { InputText } from 'primereact/inputtext';
+import { InputTextarea } from 'primereact/inputtextarea';
+import { Dropdown } from 'primereact/dropdown';
+import { CodeEditor } from '../CodeEditor';
+import { FormSection } from '../forms/FormSection';
+import { FormRow } from '../forms/FormRow';
+import { AssetFieldArray } from './AssetFieldArray';
+import { SubLocationsEditor } from './SubLocationsEditor';
+import type { AssetTypeDef, TestField } from './types';
+
+export interface AssetTypeFormEditorProps {
+    typeId: string;
+    def: AssetTypeDef;
+    /** Called on Apply with the working copy — parent forwards to put_asset_type. */
+    onApply: (next: AssetTypeDef) => Promise<void> | void;
+    /** Built-in type names, for the `extends` dropdown. */
+    builtinTypes?: string[];
+    busy?: boolean;
+}
+
+export const AssetTypeFormEditor: React.FC<AssetTypeFormEditorProps> = ({
+    typeId, def, onApply, builtinTypes = [], busy,
+}) => {
+    const [draft, setDraft] = useState<AssetTypeDef>(def);
+    const [jsonText, setJsonText] = useState<string>('');
+    const [jsonError, setJsonError] = useState<string | null>(null);
+    const [activeTab, setActiveTab] = useState<number>(0);
+
+    // Reset the working copy whenever the incoming type changes (selection
+    // change, or a fresh version after save). Unapplied edits are discarded.
+    useEffect(() => {
+        setDraft(def);
+        setJsonText(JSON.stringify(def, null, 2));
+        setJsonError(null);
+    }, [def, typeId]);
+
+    const dirty = useMemo(() => {
+        try { return JSON.stringify(draft) !== JSON.stringify(def); }
+        catch { return true; }
+    }, [draft, def]);
+
+    const handleFormChange = (next: AssetTypeDef) => {
+        setDraft(next);
+        setJsonText(JSON.stringify(next, null, 2));
+    };
+
+    const handleJsonChange = (v: string | undefined) => {
+        const text = v ?? '';
+        setJsonText(text);
+        try {
+            setDraft(JSON.parse(text));
+            setJsonError(null);
+        } catch (e: any) {
+            setJsonError(String(e?.message ?? e));
+        }
+    };
+
+    const handleApply = async () => {
+        if (jsonError) return;
+        await onApply(draft);
+    };
+
+    const extendsOptions = [
+        { label: '— none —', value: '' },
+        ...builtinTypes.map(t => ({ label: `builtin: ${t}`, value: t })),
+    ];
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', height: '100%', minHeight: 0 }}>
+            <div
+                style={{
+                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
+                    padding: '0.5rem 1rem',
+                    borderBottom: '1px solid var(--surface-d, #e2e8f0)',
+                    background: 'var(--surface-b, #f8fafc)',
+                }}
+            >
+                <strong>
+                    {typeId}
+                    {dirty && <span style={{ marginLeft: '0.5rem', color: '#ea580c' }}>•</span>}
+                </strong>
+                <Button
+                    label="Apply"
+                    icon="pi pi-check"
+                    disabled={busy || !dirty || !!jsonError}
+                    onClick={handleApply}
+                />
+            </div>
+
+            <div style={{ flex: 1, minHeight: 0, overflow: 'auto' }}>
+                <TabView activeIndex={activeTab} onTabChange={(e) => setActiveTab(e.index)}>
+                    <TabPanel header="Identity">
+                        <FormSection title="Identity" description="How this type appears in the Add-Asset picker and how its asset IDs are prefixed.">
+                            <FormRow label="Label" hint="Pretty name in the asset picker. Falls back to the type id.">
+                                <InputText
+                                    value={draft.label ?? ''}
+                                    onChange={(e) => handleFormChange({ ...draft, label: e.target.value || undefined })}
+                                />
+                            </FormRow>
+                            <FormRow label="Description">
+                                <InputTextarea
+                                    rows={2}
+                                    value={draft.description ?? ''}
+                                    onChange={(e) => handleFormChange({ ...draft, description: e.target.value || undefined })}
+                                />
+                            </FormRow>
+                            <FormRow label="ID prefix" hint="Asset IDs are minted as <prefix>001, 002, … Defaults to A- when blank.">
+                                <InputText
+                                    value={draft.id_prefix ?? ''}
+                                    placeholder="e.g. TSDR-"
+                                    onChange={(e) => handleFormChange({ ...draft, id_prefix: e.target.value || undefined })}
+                                />
+                            </FormRow>
+                            <FormRow label="Extends" hint="Optionally build on a built-in type's schema (merges its fields under yours).">
+                                <Dropdown
+                                    value={draft.extends ?? ''}
+                                    options={extendsOptions}
+                                    onChange={(e) => handleFormChange({ ...draft, extends: e.value || undefined })}
+                                    editable
+                                />
+                            </FormRow>
+                        </FormSection>
+                    </TabPanel>
+                    <TabPanel header="Fields">
+                        <AssetFieldArray
+                            title="Nameplate Fields"
+                            description="Per-asset fields captured when the asset is registered (e.g. capacity, material)."
+                            fields={(draft.fields ?? []) as TestField[]}
+                            onChange={(next) => handleFormChange({ ...draft, fields: next })}
+                        />
+                    </TabPanel>
+                    <TabPanel header="Calibration Fields">
+                        <AssetFieldArray
+                            title="Calibration Fields"
+                            description="The calibration-record schema (e.g. scale, offset). Leave empty for types that don't calibrate."
+                            fields={(draft.calibration_fields ?? []) as TestField[]}
+                            onChange={(next) => handleFormChange({ ...draft, calibration_fields: next })}
+                        />
+                    </TabPanel>
+                    <TabPanel header="Sub-locations">
+                        <SubLocationsEditor def={draft} onChange={handleFormChange} />
+                    </TabPanel>
+                    <TabPanel header="JSON">
+                        {jsonError && (
+                            <div style={{ color: '#dc2626', marginBottom: '0.5rem', fontFamily: 'monospace' }}>
+                                {jsonError}
+                            </div>
+                        )}
+                        <div style={{ height: '60vh' }}>
+                            <CodeEditor
+                                code={jsonText}
+                                language="json"
+                                theme="vs-dark"
+                                readOnly={false}
+                                cursorStyle="line"
+                                onCodeChanged={handleJsonChange}
+                            />
+                        </div>
+                    </TabPanel>
+                </TabView>
+            </div>
+        </div>
+    );
+};
+
+export default AssetTypeFormEditor;