qol ordertest page

-fix add selected button
-move var to parent master-page
-add spinner when data refresh

src/lib/components/order/ordertest/config/ordertest-config.js

@@ -1,6 +1,7 @@
 import PlusIcon from "@lucide/svelte/icons/plus";
 import Settings2Icon from "@lucide/svelte/icons/settings-2";
 import PencilIcon from "@lucide/svelte/icons/pencil";
+import RefreshIcon from "@lucide/svelte/icons/refresh-cw";
 
 export const searchFields = [
     {
@@ -53,8 +54,14 @@ export const detailSections = [
     },
 ];
 
-export function orderTestActions(masterDetail, selectedPatient, selectedVisit) {
+export function orderTestActions(masterDetail, selectedPatient, selectedVisit, handlers) {
     return [
+        { 
+            Icon: RefreshIcon, 
+            label: 'Refresh Data',
+            onClick: handlers.refresh,
+            disabled: !selectedPatient,
+        },
         { 
             Icon: PlusIcon, 
             label: 'Add Order',

src/lib/components/order/ordertest/modal/search-param-modal.svelte

@@ -15,13 +15,15 @@
     import { API } from "$lib/config/api";
     import { formatUTCDate } from "$lib/utils/formatUTCDate";
 
-    let props = $props();
+    let {
-    let tempSelectedPatient = $state(null);
+        tempSelectedPatient = $bindable(null),
-    let tempSelectedVisit = $state(null);
+        tempSelectedVisit = $bindable(null),
-    let visitData = $state(null);
+        visitData = $bindable(null),
-    let isLoadingVisit = $state(false);
+        hasFetched = $bindable(false),
-    let hasFetched = $state(false);
+        isLoadingVisit = $bindable(false),
-
+        ...props
+    } = $props()
+    
     let activeRowId = $state(null);
 
     let isPatientEmpty = $derived(!tempSelectedPatient);
@@ -61,7 +63,7 @@
         if (tempSelectedVisit) {
             props.onConfirm(tempSelectedPatient, tempSelectedVisit);
             
-            tempSelectedVisit = null;
+            // tempSelectedVisit = null;
         }
     }
 </script>

src/lib/components/order/ordertest/page/create-page.svelte

@@ -7,6 +7,7 @@
     import { buildOrderTestPayload } from "$lib/components/order/ordertest/config/ordertest-form-config";
     import { orderStore } from "$lib/components/order/ordertest/store/order-store.svelte";
     import { formatUTCDate } from "$lib/utils/formatUTCDate";
+	import { onMount } from "svelte";
 
     let props = $props();
 
@@ -50,6 +51,12 @@
     });
 
     const secondaryActions = [];
+
+    onMount(() => {
+        if (!formState.form.TrnDate) {
+            formState.form.TrnDate = new Date().toISOString();
+        }
+    });
 </script>
 
 <FormPageContainer title="Create Order for {formState.form?.PatientID} - {formState.form?.PatientName}" {primaryAction} {secondaryActions} {actions}>

src/lib/components/order/ordertest/page/edit-page.svelte

@@ -8,6 +8,7 @@
     import { getChangedFields } from "$lib/utils/getChangedFields";
     import { orderStore } from "$lib/components/order/ordertest/store/order-store.svelte";
     import { onMount } from "svelte";
+    import { untrack } from "svelte";
 
     let props = $props();
 
@@ -100,10 +101,24 @@
 	// 		idCounter = maxId;
 	// 	}
 	// });
-    $inspect(formState.form);
+
     onMount(()=>{
         console.log('mount dr edit page');
-    })
+    });
+
+    $effect(() => {
+		untrack(() => {
+			for (const group of formFields) {
+				for (const row of group.rows) {
+					for (const col of row.columns) {
+						if (col.type === 'select' && col.optionsEndpoint) {
+							formState.fetchOptions(col, formState.form);
+						}
+					}
+				}
+			}
+		});
+	});
 </script>
 
 <FormPageContainer title="Edit Order for {orderStore.selectedPatient.PatientID} - {orderStore.selectedPatient.FullName}" {primaryAction} {secondaryActions}>

src/lib/components/order/ordertest/page/master-page.svelte

@@ -16,18 +16,33 @@
     import { patientStore } from "$lib/components/patient/list/store/patient-store.svelte";
     import { formatUTCDate } from "$lib/utils/formatUTCDate";
     import { orderStore } from "$lib/components/order/ordertest/store/order-store.svelte";
+    import { Spinner } from "$lib/components/ui/spinner/index.js";
 
     let props = $props();
     
-    // let selectedPatient = $state(null);
-    // let selectedVisit = $state(null);
     let isLoading = $state(false);
     let searchData = $state([]);
+    let tempSelectedPatient = $state(null);
+    let tempSelectedVisit = $state(null);
+    let visitData = $state(null);
+    let isLoadingVisit = $state(false);
+    let hasFetched = $state(false);
+    let isRefreshData = $state(false);
 
     const search = useSearch(searchFields, searchParam);
+    const handlers = {
+        refresh: async () => {
+            isRefreshData = true;
+            try {
+                await handlePatientConfirm(tempSelectedPatient, tempSelectedVisit);
+            } finally {
+                isRefreshData = false;
+            }
+        }
+    };
 
     let actions = $derived.by(() => {
-        return orderTestActions(props.masterDetail, orderStore.selectedPatient, orderStore.selectedVisit).map(action => {
+        return orderTestActions(props.masterDetail, orderStore.selectedPatient, orderStore.selectedVisit, handlers).map(action => {
             if (action.label === 'Search Parameters') {
                 return { ...action, popoverContent: searchParamSnippet };
             }
@@ -74,10 +89,11 @@
             patientStore.pending = null;
         }
     })
+    $inspect(tempSelectedVisit)
 </script>
 
 {#snippet searchParamSnippet()} 
-	<SearchParamModal {search} {searchFields} onConfirm={handlePatientConfirm}/>
+	<SearchParamModal {search} {searchFields} bind:tempSelectedPatient bind:tempSelectedVisit bind:visitData bind:hasFetched onConfirm={handlePatientConfirm}/>
 {/snippet}
 
 <div 
@@ -135,12 +151,16 @@
                         </div>
                     </div>
                 {/if}
-                <div class="flex-1 w-full h-full">
+                <div class="flex-1 w-full h-full relative overflow-hidden">
+                    {#if isRefreshData}
+                        <div class="absolute inset-0 flex items-center justify-center bg-background/50 z-10">
+                            <Spinner class="size-6" />
+                        </div>
+                    {/if}
                     {#if searchData?.length > 0}
                         <ReusableDataTable data={searchData} columns={orderTestColumns} handleRowClick={props.masterDetail.select} {activeRowId} rowIdKey="InternalOID" offset="8"/>
                     {:else}
                         <div class="flex h-full">
-                            <!-- <ReusableEmpty icon={ClipboardXIcon} desc="Try searching from search parameters"/> -->
                             <ReusableEmpty title="No Order" icon={ClipboardXIcon} desc={searchData ? "No order available" : "Try searching from search parameters"}/>
                         </div>
                     {/if}

src/lib/components/reusable/form/order-form-renderer.svelte

@@ -153,7 +153,6 @@
 	});
 
 	onMount(() => {
-		console.log('mount dr render')
 		if (!formState.form.Tests?.length) return;
 
 		pendingTests = formState.form.Tests.map(test => ({
@@ -362,7 +361,7 @@
 								size="sm" 
 								class="px-4 py-2 rounded" 
 								onclick={addSelected}
-								disabled={selectedTests.length === 0}
+								disabled={activeSelectedCount === 0}
 							>
 								Add selected
 							</Button>