mirror of
https://github.com/faiztyanirh/clqms-shadcn-v1.git
synced 2026-04-22 09:35:34 +07:00
fix label sex tidak tampil, fix custodian modal bisa multiselect
This commit is contained in:
parent
cca8afd359
commit
644feff29f
@ -1,24 +1,53 @@
|
||||
<script>
|
||||
import * as Table from "$lib/components/ui/table/index.js";
|
||||
import { Button } from "$lib/components/ui/button/index.js";
|
||||
import { Label } from "$lib/components/ui/label/index.js";
|
||||
import { Input } from "$lib/components/ui/input/index.js";
|
||||
import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
|
||||
import { Spinner } from "$lib/components/ui/spinner/index.js";
|
||||
import * as Select from "$lib/components/ui/select/index.js";
|
||||
import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
|
||||
import { useSearch } from "$lib/components/composable/use-search.svelte";
|
||||
import { searchFields } from "../config/admission-config";
|
||||
import { searchParam } from "../api/patient-admission-api";
|
||||
import { patientColumns } from "../table/patient-colums";
|
||||
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";
|
||||
|
||||
let props = $props();
|
||||
|
||||
let activeRowId = $state(null);
|
||||
|
||||
let selectedPatient = $state({
|
||||
InternalPID: null,
|
||||
PatientID: null,
|
||||
});
|
||||
|
||||
const isPatientEmpty = $derived(!selectedPatient.InternalPID || !selectedPatient.PatientID);
|
||||
|
||||
function togglePatientSelection(patient) {
|
||||
if (selectedPatient.InternalPID === patient.InternalPID) {
|
||||
selectedPatient = {
|
||||
InternalPID: null,
|
||||
PatientID: null,
|
||||
};
|
||||
} else {
|
||||
selectedPatient = {
|
||||
InternalPID: patient.InternalPID,
|
||||
PatientID: patient.PatientID,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function handleButtonClick() {
|
||||
if (selectedPatient) {
|
||||
props.onConfirm(selectedPatient.InternalPID);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="w-full h-110">
|
||||
<div class="flex gap-2 h-full">
|
||||
<div class="flex gap-4 h-full">
|
||||
<div class="w-1/3">
|
||||
<div class="space-y-2">
|
||||
{#each props.searchFields as field}
|
||||
@ -53,7 +82,7 @@
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<Button variant="outline" size="sm" class="cursor-pointer" onclick={props.search.handleReset}>Reset</Button>
|
||||
<Button size="sm" class="cursor-pointer" onclick={props.search.handleSearch} disabled={props.search.isLoading}>
|
||||
{#if props.isLoading}
|
||||
{#if props.search.isLoading}
|
||||
<Spinner />
|
||||
{:else}
|
||||
Search
|
||||
@ -61,9 +90,58 @@
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 w-full h-full justify-center items-center">
|
||||
<div class="flex w-2/3 h-full justify-center items-start">
|
||||
{#if props.search.searchData && props.search.searchData.length > 0}
|
||||
<ReusableDataTable data={props.search.searchData} columns={patientColumns} {activeRowId} rowIdKey="InternalPID"/>
|
||||
<div class="flex flex-col h-full gap-2">
|
||||
<div class="flex-1">
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row class="hover:bg-transparent">
|
||||
<Table.Head class="w-8"></Table.Head>
|
||||
<Table.Head class="w-32">Patient ID</Table.Head>
|
||||
<Table.Head class="w-full">Patient Name</Table.Head>
|
||||
<Table.Head class="w-32">Birthdate</Table.Head>
|
||||
<Table.Head class="w-8">Sex</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each props.search.searchData as patient, i}
|
||||
<Table.Row
|
||||
class="cursor-pointer hover:bg-muted/50"
|
||||
onclick={() => togglePatientSelection(patient)}
|
||||
>
|
||||
<Table.Cell onclick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
class="cursor-pointer hover:bg-muted/50"
|
||||
checked={selectedPatient.InternalPID === patient.InternalPID}
|
||||
onCheckedChange={() => togglePatientSelection(patient)}
|
||||
/>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="font-medium">{patient.PatientID}</Table.Cell>
|
||||
<Table.Cell class="">{patient.FullName}</Table.Cell>
|
||||
<Table.Cell class="text-muted-foreground">{patient.Birthdate ? patient.Birthdate.split(" ")[0] : ""}</Table.Cell>
|
||||
<Table.Cell class="font-medium">{patient.SexLabel}</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<Popover.Close>
|
||||
<Button
|
||||
size="sm"
|
||||
class="cursor-pointer"
|
||||
disabled={isPatientEmpty}
|
||||
onclick={handleButtonClick}
|
||||
>
|
||||
Confirm
|
||||
</Button>
|
||||
</Popover.Close>
|
||||
<!-- <Button size="sm" class="cursor-pointer" disabled={isPatientEmpty} onclick={handleButtonClick}>
|
||||
Select Patient
|
||||
</Button> -->
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex h-full">
|
||||
<ReusableEmpty desc="Try searching from search parameters"/>
|
||||
|
||||
@ -10,17 +10,22 @@
|
||||
import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
|
||||
|
||||
let props = $props();
|
||||
let selectedInternalPid = $state(null);
|
||||
let tableData = $state([]);
|
||||
|
||||
const search = useSearch(searchFields, searchParam);
|
||||
const actions = admissionActions(props.masterDetail)
|
||||
actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
|
||||
|
||||
let activeRowId = $state(null);
|
||||
|
||||
function handlePatientConfirm(internalPid) {
|
||||
console.log(internalPid);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#snippet searchParamSnippet()}
|
||||
<SearchParamModal {search} {searchFields}/>
|
||||
<!-- <SearchParamModal {searchFields} {searchData} bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}/> -->
|
||||
<SearchParamModal {search} {searchFields} onConfirm={handlePatientConfirm}/>
|
||||
{/snippet}
|
||||
|
||||
<div
|
||||
|
||||
@ -131,7 +131,7 @@
|
||||
class="cursor-pointer hover:bg-muted/50"
|
||||
onclick={() => togglePatientSelection(patient)}
|
||||
>
|
||||
<Table.Cell>
|
||||
<Table.Cell onclick={(e) => e.stopPropagation()}>
|
||||
<Checkbox
|
||||
class="cursor-pointer hover:bg-muted/50"
|
||||
checked={selectedPatient.InternalPID === patient.InternalPID}
|
||||
@ -141,7 +141,7 @@
|
||||
<Table.Cell class="font-medium">{patient.PatientID}</Table.Cell>
|
||||
<Table.Cell class="">{patient.FullName}</Table.Cell>
|
||||
<Table.Cell class="text-muted-foreground">{patient.Birthdate ? patient.Birthdate.split(" ")[0] : ""}</Table.Cell>
|
||||
<Table.Cell class="font-medium">{patient.Gender}</Table.Cell>
|
||||
<Table.Cell class="font-medium">{patient.SexLabel}</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
|
||||
@ -165,7 +165,7 @@
|
||||
<Table.Cell class="text-muted-foreground">
|
||||
{patient.Birthdate ? patient.Birthdate.split(" ")[0] : ""}
|
||||
</Table.Cell>
|
||||
<Table.Cell class="font-medium">{patient.Gender}</Table.Cell>
|
||||
<Table.Cell class="font-medium">{patient.SexLabel}</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
|
||||
@ -60,18 +60,20 @@
|
||||
getFilteredRowModel: getFilteredRowModel(),
|
||||
});
|
||||
</script>
|
||||
<div class="h-full flex flex-col relative">
|
||||
<div class="flex items-center absolute top-[-2rem]">
|
||||
<Input
|
||||
placeholder="Filter all columns..."
|
||||
value={globalFilter}
|
||||
oninput={(e) => {
|
||||
globalFilter = e.currentTarget.value;
|
||||
}}
|
||||
class="h-7 w-64 text-xs px-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="rounded-md border h-full flex flex-col">
|
||||
<div class="h-full flex flex-col relative w-full">
|
||||
{#if props.searchable ?? true}
|
||||
<div class="flex items-center absolute top-[-2rem]">
|
||||
<Input
|
||||
placeholder="Filter all columns..."
|
||||
value={globalFilter}
|
||||
oninput={(e) => {
|
||||
globalFilter = e.currentTarget.value;
|
||||
}}
|
||||
class="h-7 w-64 text-xs px-2"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="rounded-md border h-full flex flex-col w-full">
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user