continue dict instrument

src/lib/components/dictionary/instrument/config/instrument-config.js

@@ -13,20 +13,24 @@ export const searchFields = [
 
 export const detailSections = [
     {
-        title: "",
+        class: "grid grid-cols-2 gap-4 items-center",
-        class: "grid grid-cols-1 gap-4",
+        fields: [
-        groups: [
+            { key: "IEID", label: "Internal Equipment ID" },
-            {
+            { key: "InstrumentID", label: "Instrument ID" },
-                class: "space-y-3",
+        ]
-                fields: [
+    },
-                    { key: "IEID", label: "Internal Equipment ID" },
+    {
-                    { key: "InstrumentID", label: "Instrument ID" },
+        class: "grid grid-cols-2 gap-4 items-center",
-                    { key: "InstrumentName", label: "Instrument Name" },
+        fields: [
-                    { key: "WorkstationID", label: "Workstation" },
+            { key: "DepartmentName", label: "Department" },
-                    { key: "EquipmentRole", label: "Equipment Role" },
+            { key: "WorkstationName", label: "Workstation" },
-                    { key: "isEnable", label: "Enable" },
+        ]
-                ]
+    },
-            },
+    {
+        class: "grid grid-cols-2 gap-4 items-center",
+        fields: [
+            { key: "EquipmentRole", label: "Equipment Role" },
+            { key: "isEnable", label: "Enable" },
         ]
     },
 ];

src/lib/components/dictionary/instrument/config/instrument-form-config.js

@@ -13,8 +13,8 @@ export const instrumentInitialForm = {
     InstrumentID: '',
     InstrumentName: '',
     WorkstationID: '',
-    isEnable: '',
+    isEnable: '1',
-    EquipmentRole: '',
+    EquipmentRole: 'M',
 };
 
 export const instrumentDefaultErrors = {
@@ -27,18 +27,18 @@ export const instrumentFormFields = [
             {
                 type: "row",
                 columns: [
-                    { 
-                        key: "EID", 
-                        label: "Equipment ID", 
-                        required: false, 
-                        type: "text",
-                    },
                     { 
                         key: "IEID", 
                         label: "Internal Equipment ID", 
                         required: false, 
                         type: "text", 
                     },
+                    { 
+                        key: "InstrumentName", 
+                        label: "Instrument Name", 
+                        required: false, 
+                        type: "text", 
+                    },
                 ]
             },
             {
@@ -48,10 +48,47 @@ export const instrumentFormFields = [
                         key: "DepartmentID", 
                         label: "Department ID", 
                         required: false, 
-                        type: "textarea", 
+                        type: "select",
+                        optionsEndpoint: `${API.BASE_URL}${API.DEPARTMENT}`,
+                        valueKey: "DepartmentID",
+                        labelKey: "DepartmentName",
+                    },
+                    { 
+                        key: "WorkstationID", 
+                        label: "Workstation ID", 
+                        required: false, 
+                        type: "select",
+                        optionsEndpoint: `${API.BASE_URL}${API.WORKSTATION}`,
+                        valueKey: "WorkstationID",
+                        labelKey: "WorkstationName",
                     },
                 ]
-            }
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "EquipmentRole", 
+                        label: "Equipment Role", 
+                        required: false, 
+                        type: "toggle",
+                        optionsToggle: [
+							{ value: 'B', label: 'Backup' },
+							{ value: 'M', label: 'Main' },
+						]
+                    },
+                    { 
+                        key: "isEnable", 
+                        label: "Enable", 
+                        required: false, 
+                        type: "toggle",
+                        optionsToggle: [
+							{ value: 0, label: 'Disabled' },
+							{ value: 1, label: 'Enabled' }
+						]
+                    },
+                ]
+            },
         ]
     },
 ];

src/lib/components/dictionary/instrument/page/create-page.svelte

@@ -1 +1,60 @@
-cr
+<script>
+    import { useDictionaryForm } from "$lib/components/composable/use-dictionary-form.svelte";
+    import FormPageContainer from "$lib/components/reusable/form/form-page-container.svelte";
+    import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
+    import { toast } from "svelte-sonner";
+    import ReusableAlertDialog from "$lib/components/reusable/reusable-alert-dialog.svelte";
+
+    let props = $props();
+
+    const { masterDetail, formFields, formActions, schema } = props.context;
+
+    const { formState } = masterDetail;
+
+    const helpers = useDictionaryForm(formState);
+
+    const handlers = {
+        clearForm: () => {
+            formState.reset();
+        }
+    };
+
+    const actions = formActions(handlers);
+
+    let showConfirm = $state(false);
+
+    async function handleSave() {
+        const result = await formState.save(masterDetail.mode);
+
+        if (result.status === 'success') {
+            toast('Instrument Created!');
+            masterDetail?.exitForm(true);
+        } else {
+            console.error('Failed to save instrument');
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to save instrument';
+            toast.error(errorMessages)
+        }
+    }
+
+    const primaryAction = $derived({
+        label: 'Save',
+        onClick: handleSave,
+        disabled: helpers.hasErrors || formState.isSaving.current,
+        loading: formState.isSaving.current
+    });
+
+    const secondaryActions = [];
+</script>
+
+<FormPageContainer title="Create Instrument" {primaryAction} {secondaryActions} {actions}>
+    <DictionaryFormRenderer 
+        {formState}
+        formFields={formFields}
+        mode="create"
+    />
+</FormPageContainer>
+
+<ReusableAlertDialog
+    bind:open={masterDetail.showExitConfirm}
+    onConfirm={masterDetail.confirmExit}
+/>

src/lib/components/dictionary/instrument/page/edit-page.svelte

@@ -1 +1,93 @@
-ed
+<script>
+    import { useDictionaryForm } from "$lib/components/composable/use-dictionary-form.svelte";
+    import FormPageContainer from "$lib/components/reusable/form/form-page-container.svelte";
+    import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
+    import { toast } from "svelte-sonner";
+    import { untrack } from "svelte";
+    import { API } from "$lib/config/api";
+    import ReusableAlertDialog from "$lib/components/reusable/reusable-alert-dialog.svelte";
+    import { getChangedFields } from "$lib/utils/getChangedFields";
+
+    let props = $props();
+
+    const { masterDetail, formFields, formActions, schema, initialForm } = props.context;
+
+    const { formState } = masterDetail;
+
+    const helpers = useDictionaryForm(formState);
+
+    let showConfirm = $state(false);
+
+    $effect(() => {
+        untrack(() => {
+            formFields.forEach(group => {
+                group.rows.forEach(row => {
+                    row.columns.forEach(col => {
+                        if (col.type === "group") {
+                            col.columns.forEach(child => {
+                                if (child.type === "select" && child.optionsEndpoint) {
+                                    formState.fetchOptions(child, formState.form);
+                                }
+                            });
+                        } else if ((col.type === "select") && col.optionsEndpoint) {
+                            formState.fetchOptions(col, formState.form);
+                        }
+                    });
+                });
+            });
+        });
+    });
+    
+    async function handleEdit() {
+        const currentPayload = formState.form;
+        const originalPayload = masterDetail.formSnapshot;
+        
+        const changedFields = getChangedFields(originalPayload, currentPayload);
+
+        if (Object.keys(changedFields).length === 0) {
+            toast('No changes detected');
+            return;
+        }
+
+        const payload = {
+            EID: formState.form.EID,
+            ...changedFields
+        };
+        
+        console.log('Payload:', payload);  
+
+        const result = await formState.save(masterDetail.mode, payload);
+        
+        if (result.status === 'success') {
+            console.log('Instrument updated successfully');
+            toast('Instrument Updated!');
+            masterDetail.exitForm(true);
+        } else {
+            console.error('Failed to update instrument:', result.message);
+            const errorMessages = result.messages ? Object.values(result.messages).join('\n') : 'Failed to update instrument';
+            toast.error(errorMessages)
+        }
+    }
+
+    const primaryAction = $derived({
+        label: 'Edit',
+        onClick: handleEdit,
+        disabled: helpers.hasErrors || formState.isSaving.current,
+        loading: formState.isSaving.current
+    });
+
+    const secondaryActions = [];
+</script>
+
+<FormPageContainer title="Edit Instrument" {primaryAction} {secondaryActions}>
+    <DictionaryFormRenderer
+        {formState}
+        formFields={formFields}
+        mode="edit"
+    />
+</FormPageContainer>
+
+<ReusableAlertDialog
+    bind:open={masterDetail.showExitConfirm}
+    onConfirm={masterDetail.confirmExit}
+/>