continue testorder modal

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

@@ -12,29 +12,62 @@
     import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
     import { Checkbox } from "$lib/components/ui/checkbox/index.js";
     import * as Popover from "$lib/components/ui/popover/index.js";
+    import { API } from "$lib/config/api";
+    import { formatUTCDate } from "$lib/utils/formatUTCDate";
 
-    // let { selectedPatient = $bindable(null), ...props } = $props();
     let props = $props();
     let tempSelectedPatient = $state(null);
+    let tempSelectedVisit = $state(null);
+    let visitData = $state(null);
+    let isLoadingVisit = $state(false);
+    let hasFetched = $state(false);
 
     let activeRowId = $state(null);
 
     let isPatientEmpty = $derived(!tempSelectedPatient);
+    let isVisitEmpty = $derived(!tempSelectedVisit);
+
+    async function handleCheckboxChange(patient) {
+        if (tempSelectedPatient?.InternalPID === patient.InternalPID) {
+            tempSelectedPatient = null;
+            visitData = null;
+            hasFetched = false;
+            return;
+        }
 
-    function handleCheckboxChange(patient) {
         tempSelectedPatient = patient;
+        hasFetched = false;
+        isLoadingVisit = true;
+
+        try {
+            const res = await fetch(`${API.BASE_URL}${API.VISITLIST}${patient.InternalPID}`);
+            visitData = await res.json();
+        } finally {
+            isLoadingVisit = false;
+            hasFetched = true;
+        }
+    }
+
+    function handleCheckboxVisit(visit) {
+        if (tempSelectedVisit?.PVID === visit.PVID) {
+            tempSelectedVisit = null;
+            return;
+        }
+
+        tempSelectedVisit = visit;
     }
 
     function handleButtonClick() {
-        if (tempSelectedPatient) {
+        if (tempSelectedVisit) {
             props.onConfirm(tempSelectedPatient);
             
-            tempSelectedPatient = null;
+            tempSelectedVisit = null;
         }
     }
+    $inspect(tempSelectedVisit)
 </script>
 
-<div class="w-180 h-110">
+<div class="w-280 h-110 transition-all duration-300">
     <div class="flex gap-4 h-full">
         <div class="flex flex-col w-1/3 h-full">
             <div class="flex-1 overflow-y-auto min-h-0 space-y-2 px-2">
@@ -115,23 +148,65 @@
                         </Table.Root>
                     </div>
                 </div>
-                <div class="flex justify-end gap-2 mt-4 w-full">
-                    <Popover.Close>
-                        <Button 
-                            size="sm" 
-                            class="cursor-pointer" 
-                            disabled={isPatientEmpty} 
-                            onclick={handleButtonClick}
-                        >
-                            Select Patient
-                        </Button>
-                    </Popover.Close>
-                </div>
             {:else}
                 <div class="flex h-full">
                     <ReusableEmpty desc="Try searching from search parameters"/>
                 </div>
             {/if}
         </div>
+        <div class="min-w-60 flex flex-col h-full items-center justify-center">
+            {#if isLoadingVisit}
+                <Spinner />
+            {:else if visitData && visitData.data?.length > 0}
+                <div class="flex-1 overflow-y-auto min-h-0 flex flex-col gap-2">
+                    <div class="flex-1">
+                        <span class="font-medium">Active Visit</span>
+                        <Table.Root>
+                            <Table.Header>
+                                <Table.Row class="hover:bg-transparent">
+                                    <Table.Head class="w-8"></Table.Head>
+                                    <Table.Head class="">Visit #</Table.Head>
+                                    <Table.Head class="">Visit Date</Table.Head>
+                                </Table.Row>
+                            </Table.Header>
+                            <Table.Body>
+                                {#each visitData.data as visit, i}
+                                    <Table.Row 
+                                        class="cursor-pointer hover:bg-muted/50"
+                                        onclick={() => handleCheckboxVisit(visit)}
+                                    >
+                                        <Table.Cell onclick={(e) => e.stopPropagation()}>
+                                            <Checkbox 
+                                                class="cursor-pointer hover:bg-muted/50"
+                                                checked={tempSelectedVisit?.PVID === visit.PVID}
+                                                onCheckedChange={() => handleCheckboxVisit(visit)}
+                                            />
+                                        </Table.Cell>
+                                        <Table.Cell class="">{visit.PVID}</Table.Cell>
+                                        <Table.Cell class="">{formatUTCDate(visit.PVCreateDate)}</Table.Cell>
+                                    </Table.Row>
+                                {/each}
+                            </Table.Body>
+                        </Table.Root>
+                    </div>
+                </div>
+                <div class="flex justify-end gap-2 mt-4 w-full">
+                    <Popover.Close>
+                        <Button 
+                            size="sm" 
+                            class="cursor-pointer" 
+                            disabled={isVisitEmpty} 
+                            onclick={handleButtonClick}
+                        >
+                            Select Visit
+                        </Button>
+                    </Popover.Close>
+                </div>
+            {:else if hasFetched}
+                <div class="flex h-full">
+                    <ReusableEmpty desc="No visit available for this patient"/>
+                </div>
+            {/if}
+        </div>
     </div>
 </div>