@adcops/autocore-react 3.3.112 → 3.3.113

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

@@ -0,0 +1,103 @@
+/**
+ * AssetFieldArray — add/remove/reorder editor for a plain `TestField[]`.
+ *
+ * A decoupled sibling of the TIS `FieldArrayEditor` (which is bound to a
+ * `TestMethod` keyed by `FieldArrayKey`). Asset types carry bare field
+ * lists (`fields`, `calibration_fields`, and the per-key lists inside a
+ * keyed `sub_locations`), so this operates directly on an array + onChange.
+ *
+ * Reuses the TIS `TestFieldDialog` for the per-field modal — asset fields
+ * have no cross-test aggregate concept, so `isResultsField` is left false.
+ */
+
+import { useState } from 'react';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Button } from 'primereact/button';
+import { FormSection } from '../forms/FormSection';
+import { TestFieldDialog } from '../tis-editor/editor/TestFieldDialog';
+import type { TestField } from '../tis-editor/types';
+
+export interface AssetFieldArrayProps {
+    title: string;
+    description?: string;
+    fields: TestField[];
+    onChange: (next: TestField[]) => void;
+}
+
+export const AssetFieldArray: React.FC<AssetFieldArrayProps> = ({
+    title, description, fields, onChange,
+}) => {
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const [editingIdx, setEditingIdx] = useState<number | null>(null);
+
+    const handleAdd = () => { setEditingIdx(null); setDialogOpen(true); };
+    const handleEdit = (idx: number) => { setEditingIdx(idx); setDialogOpen(true); };
+
+    const handleSaveField = (f: TestField) => {
+        const next = [...fields];
+        if (editingIdx === null) next.push(f);
+        else next[editingIdx] = f;
+        onChange(next);
+        setDialogOpen(false);
+    };
+
+    const handleRemove = (idx: number) => {
+        const target = fields[idx];
+        if (!target) return;
+        if (!window.confirm(`Remove field "${target.name}"?`)) return;
+        onChange(fields.filter((_, i) => i !== idx));
+    };
+
+    const handleMove = (idx: number, dir: -1 | 1) => {
+        const j = idx + dir;
+        if (j < 0 || j >= fields.length) return;
+        const next = [...fields];
+        [next[idx], next[j]] = [next[j], next[idx]];
+        onChange(next);
+    };
+
+    const rowActions = (_row: TestField, opts: { rowIndex: number }) => (
+        <div style={{ display: 'flex', gap: '0.25rem' }}>
+            <Button icon="pi pi-arrow-up" className="p-button-text p-button-sm"
+                disabled={opts.rowIndex === 0}
+                onClick={() => handleMove(opts.rowIndex, -1)} aria-label="Move up" />
+            <Button icon="pi pi-arrow-down" className="p-button-text p-button-sm"
+                disabled={opts.rowIndex === fields.length - 1}
+                onClick={() => handleMove(opts.rowIndex, 1)} aria-label="Move down" />
+            <Button icon="pi pi-pencil" className="p-button-text p-button-sm"
+                onClick={() => handleEdit(opts.rowIndex)} aria-label="Edit" />
+            <Button icon="pi pi-trash" className="p-button-text p-button-danger p-button-sm"
+                onClick={() => handleRemove(opts.rowIndex)} aria-label="Remove" />
+        </div>
+    );
+
+    return (
+        <>
+            <FormSection
+                title={title}
+                description={description}
+                actions={<Button label="Add field" icon="pi pi-plus" size="small" onClick={handleAdd} />}
+            >
+                <DataTable value={fields} dataKey="name" emptyMessage="No fields defined.">
+                    <Column field="name" header="Name" />
+                    <Column field="type" header="Type" style={{ width: '6rem' }} />
+                    <Column field="units" header="Units" style={{ width: '6rem' }} />
+                    <Column header="Req" body={(r: TestField) => r.required ? '✓' : ''} style={{ width: '4rem' }} />
+                    <Column field="label" header="Label" />
+                    <Column header="" body={rowActions} style={{ width: '9rem' }} />
+                </DataTable>
+            </FormSection>
+            <TestFieldDialog
+                visible={dialogOpen}
+                initial={editingIdx !== null ? (fields[editingIdx] ?? null) : null}
+                siblingNames={fields.map(f => f.name)}
+                isResultsField={false}
+                onCancel={() => setDialogOpen(false)}
+                onSave={handleSaveField}
+            />
+        </>
+    );
+};
+
+export default AssetFieldArray;

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;