Merge remote-tracking branch 'origin/dev' into fe-refactor-division-40
This commit is contained in:
Khafid Prayoga
@@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
|
||||
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta?: PaginationMeta
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
@@ -21,15 +22,11 @@ function handlePageChange(page: number) {
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubBaseDataTable
|
||||
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
|
||||
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
|
||||
:func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
/>
|
||||
|
||||
<template v-if="paginationMeta">
|
||||
<div v-if="paginationMeta.totalPage > 1">
|
||||
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
|
||||
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta?: PaginationMeta
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
@@ -29,10 +30,7 @@ function handlePageChange(page: number) {
|
||||
:func-html="funcHtml"
|
||||
:func-component="funcComponent"
|
||||
/>
|
||||
<template v-if="paginationMeta">
|
||||
<div v-if="paginationMeta.totalPage > 1">
|
||||
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
|
||||
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta?: PaginationMeta
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
@@ -21,16 +22,10 @@ function handlePageChange(page: number) {
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubBaseDataTable
|
||||
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
|
||||
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
|
||||
:func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
|
||||
<!-- Data info and pagination -->
|
||||
<template v-if="paginationMeta">
|
||||
<div v-if="paginationMeta.totalPage > 1">
|
||||
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
/>
|
||||
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -0,0 +1,282 @@
|
||||
<script setup lang="ts">
|
||||
// helpers
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import * as z from 'zod'
|
||||
// components
|
||||
import { Button } from '~/components/pub/ui/button'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import { Label } from '~/components/pub/ui/label'
|
||||
import { Select } from '~/components/pub/ui/select'
|
||||
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
||||
import { Textarea } from '~/components/pub/ui/textarea'
|
||||
import DatepickerSingle from '~/components/pub/custom-ui/form/datepicker-single.vue'
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'event', value: any): void
|
||||
}>()
|
||||
|
||||
const items = [
|
||||
{ value: 'item-1', label: 'Item 1' },
|
||||
{ value: 'item-2', label: 'Item 2' },
|
||||
{ value: 'item-3', label: 'Item 3' },
|
||||
]
|
||||
|
||||
// Validation schema
|
||||
const schema = z.object({
|
||||
tanggalSep: z.string().min(1, 'Tanggal SEP wajib diisi'),
|
||||
jalur: z.string().min(1, 'Pilih jalur'),
|
||||
noBpjs: z.string().min(1, 'No. Kartu BPJS wajib diisi'),
|
||||
noKtp: z.string().min(1, 'No. KTP wajib diisi'),
|
||||
noRm: z.string().min(1, 'No. RM wajib diisi'),
|
||||
namaPasien: z.string().min(1, 'Nama pasien wajib diisi'),
|
||||
noTelp: z.string().min(1, 'Nomor telepon wajib diisi'),
|
||||
noSuratKontrol: z.string().min(1, 'No. Surat Kontrol wajib diisi'),
|
||||
tglSuratKontrol: z.string().min(1, 'Tanggal Surat Kontrol wajib diisi'),
|
||||
klinikTujuan: z.string().min(1, 'Klinik tujuan wajib diisi'),
|
||||
dpjp: z.string().min(1, 'DPJP wajib diisi'),
|
||||
diagnosaAwal: z.string().min(1, 'Diagnosa awal wajib diisi'),
|
||||
cob: z.string().min(1, 'COB wajib diisi'),
|
||||
katarak: z.string().min(1, 'Katarak wajib diisi'),
|
||||
jenisProsedur: z.string().min(1, 'Jenis prosedur wajib diisi'),
|
||||
kodePenunjang: z.string().min(1, 'Kode penunjang wajib diisi'),
|
||||
})
|
||||
|
||||
const { handleSubmit, errors, defineField } = useForm({
|
||||
validationSchema: toTypedSchema(schema),
|
||||
})
|
||||
|
||||
// Bind fields
|
||||
const [tanggalSep] = defineField('tanggalSep')
|
||||
const [jalur] = defineField('jalur')
|
||||
const [noBpjs] = defineField('noBpjs')
|
||||
const [noKtp] = defineField('noKtp')
|
||||
const [noRm] = defineField('noRm')
|
||||
const [namaPasien] = defineField('namaPasien')
|
||||
const [noTelp] = defineField('noTelp')
|
||||
const [noSuratKontrol] = defineField('noSuratKontrol')
|
||||
const [tglSuratKontrol] = defineField('tglSuratKontrol')
|
||||
const [klinikTujuan] = defineField('klinikTujuan')
|
||||
const [dpjp] = defineField('dpjp')
|
||||
const [diagnosaAwal] = defineField('diagnosaAwal')
|
||||
const [cob] = defineField('cob')
|
||||
const [katarak] = defineField('katarak')
|
||||
const [jenisProsedur] = defineField('jenisProsedur')
|
||||
const [kodePenunjang] = defineField('kodePenunjang')
|
||||
|
||||
// Submit handler
|
||||
const onSubmit = handleSubmit((values) => {
|
||||
console.log('✅ Validated form values:', values)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto w-full">
|
||||
<form @submit.prevent="onSubmit" class="grid gap-6 p-4">
|
||||
<!-- Tanggal SEP & Jalur -->
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label for="tanggalSep">Tanggal SEP<span class="text-red-500">*</span></Label>
|
||||
<DatepickerSingle v-model="tanggalSep" placeholder="Pilih tanggal sep" />
|
||||
<p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label for="jalur">Jalur</Label>
|
||||
<Select icon-name="i-lucide-chevron-down" v-model="jalur" :items="items" placeholder="Pilih jalur"></Select>
|
||||
<p v-if="errors.jalur" class="text-sm text-red-500">{{ errors.jalur }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Data Pasien -->
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="text-lg font-semibold">Data Pasien</h3>
|
||||
<Button
|
||||
variant="outline"
|
||||
class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
|
||||
@click="emit('event', 'search-patient')"
|
||||
>
|
||||
<Icon name="i-lucide-search" class="h-5 w-5" />
|
||||
Cari Pasien
|
||||
</Button>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label>No. Kartu BPJS<span class="text-red-500">*</span></Label>
|
||||
<Input v-model="noBpjs" />
|
||||
<p v-if="errors.noBpjs" class="text-sm text-red-500">{{ errors.noBpjs }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label>No. KTP<span class="text-red-500">*</span></Label>
|
||||
<Input v-model="noKtp" />
|
||||
<p v-if="errors.noKtp" class="text-sm text-red-500">{{ errors.noKtp }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label>No. RM<span class="text-red-500">*</span></Label>
|
||||
<Input v-model="noRm" />
|
||||
<p v-if="errors.noRm" class="text-sm text-red-500">{{ errors.noRm }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label>Nama Pasien<span class="text-red-500">*</span></Label>
|
||||
<Input v-model="namaPasien" />
|
||||
<p v-if="errors.namaPasien" class="text-sm text-red-500">{{ errors.namaPasien }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label>No. Telepon<span class="text-red-500">*</span></Label>
|
||||
<Input v-model="noTelp" />
|
||||
<p v-if="errors.noTelp" class="text-sm text-red-500">{{ errors.noTelp }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr />
|
||||
|
||||
<!-- Data SEP -->
|
||||
<h3 class="text-lg font-semibold">Data SEP</h3>
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
|
||||
<div class="flex gap-2">
|
||||
<Input class="flex-1" v-model="noSuratKontrol" />
|
||||
<Button
|
||||
variant="outline"
|
||||
class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
|
||||
@click="emit('event', 'search-letter')"
|
||||
>
|
||||
<Icon name="i-lucide-search" class="h-5 w-5" />
|
||||
Cari Data
|
||||
</Button>
|
||||
</div>
|
||||
<p v-if="errors.noSuratKontrol" class="text-sm text-red-500">{{ errors.noSuratKontrol }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
|
||||
<DatepickerSingle v-model="tglSuratKontrol" placeholder="Pilih tanggal surat kontrol" />
|
||||
<p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
|
||||
</div>
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<div class="flex-1">
|
||||
<Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
|
||||
<Select
|
||||
icon-name="i-lucide-chevron-down"
|
||||
v-model="klinikTujuan"
|
||||
:items="items"
|
||||
placeholder="Pilih klinik"
|
||||
></Select>
|
||||
<p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label class="mb-2 block">Klinik Eksekutif<span class="text-red-500">*</span></Label>
|
||||
<RadioGroup v-model="cob" class="flex items-center gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem value="Ya" id="cob-ya" />
|
||||
<Label for="cob-ya">Ya</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem value="Tidak" id="cob-tidak" />
|
||||
<Label for="cob-tidak">Tidak</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label>DPJP<span class="text-red-500">*</span></Label>
|
||||
<Select icon-name="i-lucide-chevron-down" v-model="dpjp" :items="items" placeholder="Pilih DPJP"></Select>
|
||||
<p v-if="errors.dpjp" class="text-sm text-red-500">{{ errors.dpjp }}</p>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label>Diagnosa Awal<span class="text-red-500">*</span></Label>
|
||||
<Input v-model="diagnosaAwal" />
|
||||
<p v-if="errors.diagnosaAwal" class="text-sm text-red-500">{{ errors.diagnosaAwal }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Catatan -->
|
||||
<div>
|
||||
<Label>Catatan</Label>
|
||||
<Textarea class="h-[200px] w-full border-gray-400 bg-white" placeholder="Masukkan catatan opsional" />
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<div>
|
||||
<Label class="mb-2 block">COB<span class="text-red-500">*</span></Label>
|
||||
<RadioGroup v-model="cob" class="flex items-center gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem value="Ya" id="cob-ya" />
|
||||
<Label for="cob-ya">Ya</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem value="Tidak" id="cob-tidak" />
|
||||
<Label for="cob-tidak">Tidak</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
<div>
|
||||
<Label class="mb-2 block">Katarak<span class="text-red-500">*</span></Label>
|
||||
<RadioGroup v-model="katarak" class="flex items-center gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem value="Ya" id="katarak-ya" />
|
||||
<Label for="katarak-ya">Ya</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem value="Tidak" id="katarak-tidak" />
|
||||
<Label for="katarak-tidak">Tidak</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label class="mb-2 block">Jenis Prosedur<span class="text-red-500">*</span></Label>
|
||||
<RadioGroup v-model="jenisProsedur" class="flex items-center gap-2">
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem value="procedure-one" id="procedure-one" />
|
||||
<Label for="procedure-one">Prosedur tidak berkelanjutan</Label>
|
||||
</div>
|
||||
<div class="flex items-center space-x-2">
|
||||
<RadioGroupItem value="procedure-two" id="procedure-two" />
|
||||
<Label for="procedure-two">Prosedur dan terapi berkelanjutan</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-4 md:grid-cols-3">
|
||||
<div class="flex flex-col gap-2">
|
||||
<Label>Kode Penunjang<span class="text-red-500">*</span></Label>
|
||||
<Select
|
||||
icon-name="i-lucide-chevron-down"
|
||||
v-model="kodePenunjang"
|
||||
:items="items"
|
||||
placeholder="Pilih Kode Penunjang"
|
||||
></Select>
|
||||
<p v-if="errors.kodePenunjang" class="text-sm text-red-500">{{ errors.kodePenunjang }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="mt-6 flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
class="h-[40px] min-w-[120px] text-green-600 hover:bg-green-50"
|
||||
@click="emit('event', 'history-sep')"
|
||||
>
|
||||
<Icon name="i-lucide-history" class="h-5 w-5" /> Riwayat SEP
|
||||
</Button>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
class="h-[40px] min-w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50 hover:text-green-600"
|
||||
>
|
||||
<Icon name="i-lucide-eye" class="h-5 w-5" />Preview
|
||||
</Button>
|
||||
<Button type="submit" class="h-[40px] min-w-[120px] text-white">
|
||||
<Icon name="i-lucide-save" class="h-5 w-5" />
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,78 @@
|
||||
import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, Th } from '~/components/pub/custom-ui/data/types'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SepDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
|
||||
|
||||
export const cols: Col[] = [
|
||||
{ width: 120 }, // TGL. SEP
|
||||
{ width: 150 }, // NO. SEP
|
||||
{ width: 120 }, // PELAYANAN
|
||||
{ width: 100 }, // JALUR
|
||||
{ width: 150 }, // NO. RM
|
||||
{ width: 200 }, // NAMA PASIEN
|
||||
{ width: 150 }, // NO. KARTU BPJS
|
||||
{ width: 150 }, // NO. SURAT KONTROL
|
||||
{ width: 150 }, // TGL SURAT KONTROL
|
||||
{ width: 150 }, // KLINIK TUJUAN
|
||||
{ width: 200 }, // DPJP
|
||||
{ width: 200 }, // DIAGNOSIS AWAL
|
||||
{ width: 100 }, // AKSI
|
||||
]
|
||||
|
||||
export const header: Th[][] = [
|
||||
[
|
||||
{ label: 'TGL. SEP' },
|
||||
{ label: 'NO. SEP' },
|
||||
{ label: 'PELAYANAN' },
|
||||
{ label: 'JALUR' },
|
||||
{ label: 'NO. RM' },
|
||||
{ label: 'NAMA PASIEN' },
|
||||
{ label: 'NO. KARTU BPJS' },
|
||||
{ label: 'NO. SURAT KONTROL' },
|
||||
{ label: 'TGL SURAT KONTROL' },
|
||||
{ label: 'KLINIK TUJUAN' },
|
||||
{ label: 'DPJP' },
|
||||
{ label: 'DIAGNOSIS AWAL' },
|
||||
{ label: 'AKSI' },
|
||||
],
|
||||
]
|
||||
|
||||
export const keys = [
|
||||
'tgl_sep',
|
||||
'no_sep',
|
||||
'pelayanan',
|
||||
'jalur',
|
||||
'no_rm',
|
||||
'nama_pasien',
|
||||
'no_kartu_bpjs',
|
||||
'no_surat_kontrol',
|
||||
'tgl_surat_kontrol',
|
||||
'klinik_tujuan',
|
||||
'dpjp',
|
||||
'diagnosis_awal',
|
||||
'action',
|
||||
]
|
||||
|
||||
export const delKeyNames: KeyLabel[] = [
|
||||
{ key: 'no_sep', label: 'NO. SEP' },
|
||||
{ key: 'nama_pasien', label: 'Nama Pasien' },
|
||||
]
|
||||
|
||||
export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
|
||||
|
||||
}
|
||||
|
||||
export const funcComponent: RecStrFuncComponent = {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
}
|
||||
return res
|
||||
},
|
||||
}
|
||||
|
||||
export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}
|
||||
@@ -0,0 +1,34 @@
|
||||
<script setup lang="ts">
|
||||
import { cols, header, keys, funcParsed, funcComponent, funcHtml } from './list-cfg'
|
||||
|
||||
interface SepData {
|
||||
tgl_sep: string
|
||||
no_sep: string
|
||||
pelayanan: string
|
||||
jalur: string
|
||||
no_rm: string
|
||||
nama_pasien: string
|
||||
no_kartu_bpjs: string
|
||||
no_surat_kontrol: string
|
||||
tgl_surat_kontrol: string
|
||||
klinik_tujuan: string
|
||||
dpjp: string
|
||||
diagnosis_awal: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
data: SepData[]
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubBaseDataTable
|
||||
:cols="cols"
|
||||
:header="header"
|
||||
:keys="keys"
|
||||
:rows="props.data"
|
||||
:funcParsed="funcParsed"
|
||||
:funcComponent="funcComponent"
|
||||
:funcHtml="funcHtml"
|
||||
/>
|
||||
</template>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from '~/components/pub/ui/dialog'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
histories: Array<{
|
||||
no_sep: string
|
||||
tgl_sep: string
|
||||
no_rujukan: string
|
||||
diagnosis: string
|
||||
pelayanan: string
|
||||
kelas: string
|
||||
}>
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:open', value: boolean): void
|
||||
}>()
|
||||
|
||||
const search = ref('')
|
||||
|
||||
const filteredHistories = computed(() => {
|
||||
const histories = props.histories || []
|
||||
return histories.filter((p) => p.no_sep.includes(search.value))
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="props.open" @update:open="emit('update:open', $event)">
|
||||
<DialogTrigger as-child></DialogTrigger>
|
||||
<DialogContent class="max-w-[50%]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>History SEP</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<!-- Input Search -->
|
||||
<div class="mb-2 max-w-[50%]">
|
||||
<Input v-model="search" placeholder="Cari berdasarkan No. SEP" />
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto rounded-lg border">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="text-left">
|
||||
<th class="p-2">NO. SEP</th>
|
||||
<th class="p-2">TGL. SEP</th>
|
||||
<th class="p-2">NO. RUJUKAN</th>
|
||||
<th class="p-2">DIAGNOSIS AWAL</th>
|
||||
<th class="p-2">JENIS PELAYANAN</th>
|
||||
<th class="p-2">KELAS RAWAT</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-normal">
|
||||
<tr v-for="p in filteredHistories" :key="p.no_sep" class="border-t hover:bg-gray-50">
|
||||
<td class="p-2">{{ p.no_sep }}</td>
|
||||
<td class="p-2">{{ p.tgl_sep }}</td>
|
||||
<td class="p-2">{{ p.no_rujukan }}</td>
|
||||
<td class="p-2">{{ p.diagnosis }}</td>
|
||||
<td class="p-2">{{ p.pelayanan }}</td>
|
||||
<td class="p-2">{{ p.kelas }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<DialogFooter>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,104 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from '~/components/pub/ui/dialog'
|
||||
import { Button } from '~/components/pub/ui/button'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
letters: Array<{
|
||||
noSurat: string
|
||||
tglRencana: string
|
||||
noSep: string
|
||||
namaPasien: string
|
||||
noBpjs: string
|
||||
klinik: string
|
||||
dokter: string
|
||||
}>
|
||||
selected: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:open', value: boolean): void
|
||||
(e: 'update:selected', value: string): void
|
||||
(e: 'save'): void
|
||||
}>()
|
||||
|
||||
const search = ref('')
|
||||
|
||||
const filteredLetters = computed(() => {
|
||||
const letters = props.letters || []
|
||||
return letters.filter((p) => p.noSurat.includes(search.value) || p.noSep.includes(search.value))
|
||||
})
|
||||
|
||||
function saveSelection() {
|
||||
emit('save')
|
||||
emit('update:open', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="props.open" @update:open="emit('update:open', $event)">
|
||||
<DialogTrigger as-child></DialogTrigger>
|
||||
<DialogContent class="max-w-[50%]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cari No. Surat Kontrol</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<!-- Input Search -->
|
||||
<div class="mb-2 max-w-[50%]">
|
||||
<Input v-model="search" placeholder="Cari berdasarkan No. Surat Kontrol / No. SEP" />
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto rounded-lg border">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="text-left">
|
||||
<th class="p-2"></th>
|
||||
<th class="p-2">NO. SURAT KONTROL</th>
|
||||
<th class="p-2">TGL RENCANA KONTROL</th>
|
||||
<th class="p-2">NO. SEP</th>
|
||||
<th class="p-2">NAMA PASIEN</th>
|
||||
<th class="p-2">NO. KARTU BPJS</th>
|
||||
<th class="p-2">KLINIK</th>
|
||||
<th class="p-2">DOKTER</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-normal">
|
||||
<tr v-for="p in filteredLetters" :key="p.noSurat" class="border-t hover:bg-gray-50">
|
||||
<td class="p-2">
|
||||
<RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
|
||||
<RadioGroupItem :id="p.noSurat" :value="p.noSurat" />
|
||||
</RadioGroup>
|
||||
</td>
|
||||
<td class="p-2">{{ p.noSurat }}</td>
|
||||
<td class="p-2">{{ p.tglRencana }}</td>
|
||||
<td class="p-2">{{ p.noSep }}</td>
|
||||
<td class="p-2">{{ p.namaPasien }}</td>
|
||||
<td class="p-2">{{ p.noBpjs }}</td>
|
||||
<td class="p-2">{{ p.klinik }}</td>
|
||||
<td class="p-2">{{ p.dokter }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<DialogFooter>
|
||||
<Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
|
||||
<Icon name="i-lucide-save" class="h-5 w-5" />
|
||||
Simpan
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,100 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
DialogFooter,
|
||||
} from '~/components/pub/ui/dialog'
|
||||
import { Button } from '~/components/pub/ui/button'
|
||||
import { Input } from '~/components/pub/ui/input'
|
||||
import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
|
||||
|
||||
const props = defineProps<{
|
||||
open: boolean
|
||||
patients: Array<{
|
||||
ktp: string
|
||||
rm: string
|
||||
bpjs: string
|
||||
nama: string
|
||||
}>
|
||||
selected: string
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:open', value: boolean): void
|
||||
(e: 'update:selected', value: string): void
|
||||
(e: 'save'): void
|
||||
}>()
|
||||
|
||||
const search = ref('')
|
||||
const filteredPatients = computed(() => {
|
||||
const patients = props.patients || []
|
||||
return patients.filter(
|
||||
(p) =>
|
||||
p.ktp.includes(search.value) ||
|
||||
p.rm.includes(search.value) ||
|
||||
p.bpjs.includes(search.value) ||
|
||||
p.nama.toLowerCase().includes(search.value.toLowerCase()),
|
||||
)
|
||||
})
|
||||
|
||||
function saveSelection() {
|
||||
emit('save')
|
||||
emit('update:open', false)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog :open="props.open" @update:open="emit('update:open', $event)">
|
||||
<DialogTrigger as-child></DialogTrigger>
|
||||
<DialogContent class="max-w-3xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cari Pasien</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<!-- Input Search -->
|
||||
<div class="mb-2 max-w-[50%]">
|
||||
<Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<div class="overflow-x-auto rounded-lg border">
|
||||
<table class="w-full text-sm">
|
||||
<thead class="bg-gray-100">
|
||||
<tr class="text-left">
|
||||
<th class="p-2"></th>
|
||||
<th class="p-2">NO. KTP</th>
|
||||
<th class="p-2">NO. RM</th>
|
||||
<th class="p-2">NO. KARTU BPJS</th>
|
||||
<th class="p-2">NAMA PASIEN</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="font-normal">
|
||||
<tr v-for="p in filteredPatients" :key="p.ktp" class="border-t hover:bg-gray-50">
|
||||
<td class="p-2">
|
||||
<RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
|
||||
<RadioGroupItem :id="p.ktp" :value="p.ktp" />
|
||||
</RadioGroup>
|
||||
</td>
|
||||
<td class="p-2">{{ p.ktp }}</td>
|
||||
<td class="p-2">{{ p.rm }}</td>
|
||||
<td class="p-2">{{ p.bpjs }}</td>
|
||||
<td class="p-2">{{ p.nama }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<DialogFooter>
|
||||
<Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
|
||||
<Icon name="i-lucide-save" class="h-5 w-5" />
|
||||
Simpan
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
@@ -0,0 +1,105 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Block from '~/components/pub/custom-ui/form/block.vue'
|
||||
import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||
import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
|
||||
import { mapToComboboxOptList } from '~/lib/utils'
|
||||
|
||||
interface DivisionFormData {
|
||||
name: string
|
||||
code: string
|
||||
parentId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
division: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
schema: any
|
||||
initialValues?: Partial<DivisionFormData>
|
||||
errors?: FormErrors
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
submit: [values: DivisionFormData, resetForm: () => void]
|
||||
cancel: [resetForm: () => void]
|
||||
}>()
|
||||
|
||||
const relationshipOpts = mapToComboboxOptList(relationshipCodes)
|
||||
const educationOpts = mapToComboboxOptList(educationCodes)
|
||||
const occupationOpts = mapToComboboxOptList(occupationCodes)
|
||||
const genderOpts = mapToComboboxOptList(genderCodes)
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: DivisionFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
parentId: values.parentId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
v-slot="{ handleSubmit, resetForm }"
|
||||
as=""
|
||||
keep-values
|
||||
:validation-schema="formSchema"
|
||||
:initial-values="initialValues"
|
||||
>
|
||||
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<Block>
|
||||
<!-- Specialist -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="specialist_id">Specialist</Label>
|
||||
<Field id="specialist_id" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="specialist_id">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="specialist_id" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<!-- Subpecialist -->
|
||||
<FieldGroup :column="2">
|
||||
<Label label-for="subspecialist_id">Subspecialist</Label>
|
||||
<Field id="subspecialist_id" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="subspecialist_id">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox id="subspecialist_id" v-bind="componentField" :items="genderOpts" />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</Block>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,181 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||
|
||||
interface SpecialistFormData {
|
||||
name: string
|
||||
code: string
|
||||
installationId: string
|
||||
unitId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
schema: any
|
||||
initialValues?: Partial<SpecialistFormData>
|
||||
errors?: FormErrors
|
||||
installation: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
}
|
||||
unit: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
}
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'submit': [values: SpecialistFormData, resetForm: () => void]
|
||||
'cancel': [resetForm: () => void]
|
||||
'installationChanged': [id: string]
|
||||
}>()
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: SpecialistFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
installationId: values.installationId || '',
|
||||
unitId: values.unitId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
|
||||
// Form cancel handler
|
||||
function onCancelForm({ resetForm }: { resetForm: () => void }) {
|
||||
emit('cancel', resetForm)
|
||||
}
|
||||
|
||||
// Watch for installation changes
|
||||
function onInstallationChanged(installationId: string, setFieldValue: any) {
|
||||
setFieldValue('unitId', '', false)
|
||||
emit('installationChanged', installationId || '')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
v-slot="{ handleSubmit, resetForm, values, setFieldValue }" as="" keep-values :validation-schema="formSchema"
|
||||
:initial-values="initialValues"
|
||||
>
|
||||
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<FieldGroup>
|
||||
<Label label-for="name">Nama</Label>
|
||||
<Field id="name" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="name">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="Masukkan nama spesialisasi"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup>
|
||||
<Label label-for="code">Kode</Label>
|
||||
<Field id="code" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="code">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="code"
|
||||
type="text"
|
||||
placeholder="Masukkan kode spesialisasi"
|
||||
autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup>
|
||||
<Label label-for="installationId">Instalasi</Label>
|
||||
<Field id="installationId" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="installationId">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox
|
||||
id="installationId"
|
||||
v-bind="componentField"
|
||||
:items="installation.items"
|
||||
:placeholder="installation.msg.placeholder"
|
||||
:search-placeholder="installation.msg.search"
|
||||
:empty-message="installation.msg.empty"
|
||||
@update:model-value="(value) => onInstallationChanged(value, setFieldValue)"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup>
|
||||
<Label label-for="unitId">Unit</Label>
|
||||
<Field id="unitId" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="unitId">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox
|
||||
id="unitId"
|
||||
:disabled="!values.installationId"
|
||||
v-bind="componentField"
|
||||
:items="unit.items"
|
||||
:placeholder="unit.msg.placeholder"
|
||||
:search-placeholder="unit.msg.search"
|
||||
:empty-message="unit.msg.empty"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
|
||||
Batal
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,50 @@
|
||||
import type {
|
||||
Col,
|
||||
KeyLabel,
|
||||
RecComponent,
|
||||
RecStrFuncComponent,
|
||||
RecStrFuncUnknown,
|
||||
Th,
|
||||
} from '~/components/pub/custom-ui/data/types'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-ud.vue'))
|
||||
|
||||
export const cols: Col[] = [{ width: 100 }, {}, {}, {}, { width: 50 }]
|
||||
|
||||
export const header: Th[][] = [
|
||||
[{ label: 'Id' }, { label: 'Name' }, { label: 'Code' }, { label: 'Unit' }, { label: '' }],
|
||||
]
|
||||
|
||||
export const keys = ['id', 'name', 'cellphone', 'religion_code', 'action']
|
||||
|
||||
export const delKeyNames: KeyLabel[] = [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
]
|
||||
|
||||
export const funcParsed: RecStrFuncUnknown = {
|
||||
name: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return `${recX.firstName} ${recX.lastName || ''}`.trim()
|
||||
},
|
||||
}
|
||||
|
||||
export const funcComponent: RecStrFuncComponent = {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
}
|
||||
return res
|
||||
},
|
||||
}
|
||||
|
||||
export const funcHtml: RecStrFuncUnknown = {
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
|
||||
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubBaseDataTable
|
||||
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
|
||||
:func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,213 @@
|
||||
<script setup lang="ts">
|
||||
import type { FormErrors } from '~/types/error'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
|
||||
import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
|
||||
import Field from '~/components/pub/custom-ui/form/field.vue'
|
||||
import Label from '~/components/pub/custom-ui/form/label.vue'
|
||||
|
||||
interface SubSpecialistFormData {
|
||||
name: string
|
||||
code: string
|
||||
installationId: string
|
||||
unitId: string
|
||||
specialistId: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
schema: any
|
||||
initialValues?: Partial<SubSpecialistFormData>
|
||||
errors?: FormErrors
|
||||
installation: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
}
|
||||
unit: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
}
|
||||
specialist: {
|
||||
msg: {
|
||||
placeholder: string
|
||||
search: string
|
||||
empty: string
|
||||
}
|
||||
items: {
|
||||
value: string
|
||||
label: string
|
||||
code: string
|
||||
}[]
|
||||
}
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'submit': [values: SubSpecialistFormData, resetForm: () => void]
|
||||
'cancel': [resetForm: () => void]
|
||||
'installationChanged': [id: string]
|
||||
'unitChanged': [id: string]
|
||||
}>()
|
||||
|
||||
const formSchema = toTypedSchema(props.schema)
|
||||
|
||||
// Form submission handler
|
||||
function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
|
||||
const formData: SubSpecialistFormData = {
|
||||
name: values.name || '',
|
||||
code: values.code || '',
|
||||
installationId: values.installationId || '',
|
||||
unitId: values.unitId || '',
|
||||
specialistId: values.specialistId || '',
|
||||
}
|
||||
emit('submit', formData, resetForm)
|
||||
}
|
||||
|
||||
// Form cancel handler
|
||||
function onCancelForm({ resetForm }: { resetForm: () => void }) {
|
||||
emit('cancel', resetForm)
|
||||
}
|
||||
|
||||
// Watch for installation changes
|
||||
function onInstallationChanged(installationId: string, setFieldValue: any) {
|
||||
setFieldValue('unitId', '', false)
|
||||
setFieldValue('specialistId', '', false)
|
||||
emit('installationChanged', installationId || '')
|
||||
}
|
||||
|
||||
function onUnitChanged(unitId: string, setFieldValue: any) {
|
||||
setFieldValue('specialistId', '', false)
|
||||
emit('unitChanged', unitId || '')
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Form
|
||||
v-slot="{
|
||||
handleSubmit,
|
||||
resetForm,
|
||||
values,
|
||||
setFieldValue,
|
||||
}" as="" keep-values :validation-schema="formSchema"
|
||||
:initial-values="initialValues"
|
||||
>
|
||||
<form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<div class="flex flex-col justify-between">
|
||||
<FieldGroup>
|
||||
<Label label-for="name">Nama</Label>
|
||||
<Field id="name" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="name">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="name" type="text" placeholder="Masukkan nama spesialisasi" autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup>
|
||||
<Label label-for="code">Kode</Label>
|
||||
<Field id="code" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="code">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Input
|
||||
id="code" type="text" placeholder="Masukkan kode spesialisasi" autocomplete="off"
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup>
|
||||
<Label label-for="installationId">Instalasi</Label>
|
||||
<Field id="installationId" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="installationId">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox
|
||||
id="installationId" v-bind="componentField" :items="installation.items"
|
||||
:placeholder="installation.msg.placeholder" :search-placeholder="installation.msg.search"
|
||||
:empty-message="installation.msg.empty"
|
||||
@update:model-value="(value) => onInstallationChanged(value, setFieldValue)"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup>
|
||||
<Label label-for="unitId">Unit</Label>
|
||||
<Field id="unitId" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="unitId">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox
|
||||
id="unitId" :disabled="!values.installationId" v-bind="componentField" :items="unit.items"
|
||||
:placeholder="unit.msg.placeholder" :search-placeholder="unit.msg.search"
|
||||
:empty-message="unit.msg.empty"
|
||||
@update:model-value="(value) => onUnitChanged(value, setFieldValue)"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
|
||||
<FieldGroup>
|
||||
<Label label-for="specialistId">Specialist</Label>
|
||||
<Field id="specialistId" :errors="errors">
|
||||
<FormField v-slot="{ componentField }" name="specialistId">
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Combobox
|
||||
id="specialistId" :disabled="!values.unitId" v-bind="componentField" :items="specialist.items"
|
||||
:placeholder="specialist.msg.placeholder" :search-placeholder="specialist.msg.search"
|
||||
:empty-message="specialist.msg.empty"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end gap-2 mt-4">
|
||||
<Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
|
||||
Batal
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
Simpan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</template>
|
||||
@@ -0,0 +1,56 @@
|
||||
import type {
|
||||
Col,
|
||||
KeyLabel,
|
||||
RecComponent,
|
||||
RecStrFuncComponent,
|
||||
RecStrFuncUnknown,
|
||||
Th,
|
||||
} from '~/components/pub/custom-ui/data/types'
|
||||
import { defineAsyncComponent } from 'vue'
|
||||
|
||||
type SmallDetailDto = any
|
||||
|
||||
const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-ud.vue'))
|
||||
|
||||
export const cols: Col[] = [{ width: 100 }, {}, {}, {}, { width: 50 }]
|
||||
|
||||
export const header: Th[][] = [
|
||||
[{ label: 'Id' }, { label: 'Nama' }, { label: 'Kode' }, { label: 'Specialist' }, { label: '' }],
|
||||
]
|
||||
export const keys = ['id', 'name', 'cellphone', 'religion_code', 'action']
|
||||
|
||||
export const delKeyNames: KeyLabel[] = [
|
||||
{ key: 'code', label: 'Kode' },
|
||||
{ key: 'name', label: 'Nama' },
|
||||
]
|
||||
|
||||
export const funcParsed: RecStrFuncUnknown = {
|
||||
name: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return `${recX.firstName} ${recX.lastName || ''}`.trim()
|
||||
},
|
||||
unit: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.unit?.name || '-'
|
||||
},
|
||||
specialist: (rec: unknown): unknown => {
|
||||
const recX = rec as SmallDetailDto
|
||||
return recX.specialist?.name || '-'
|
||||
},
|
||||
}
|
||||
|
||||
export const funcComponent: RecStrFuncComponent = {
|
||||
action(rec, idx) {
|
||||
const res: RecComponent = {
|
||||
idx,
|
||||
rec: rec as object,
|
||||
component: action,
|
||||
props: {
|
||||
size: 'sm',
|
||||
},
|
||||
}
|
||||
return res
|
||||
},
|
||||
}
|
||||
|
||||
export const funcHtml: RecStrFuncUnknown = {}
|
||||
@@ -0,0 +1,31 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
|
||||
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubBaseDataTable
|
||||
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
|
||||
:func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
|
||||
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta?: PaginationMeta
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
@@ -19,18 +20,12 @@ function handlePageChange(page: number) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PubBaseDataTable
|
||||
:rows="data"
|
||||
:cols="cols"
|
||||
:header="header"
|
||||
:keys="keys"
|
||||
:func-parsed="funcParsed"
|
||||
:func-html="funcHtml"
|
||||
:func-component="funcComponent"
|
||||
/>
|
||||
<template v-if="paginationMeta">
|
||||
<div v-if="paginationMeta.totalPage > 1">
|
||||
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<PubBaseDataTable
|
||||
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
|
||||
:func-html="funcHtml" :func-component="funcComponent"
|
||||
/>
|
||||
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
|
||||
import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
|
||||
|
||||
interface Props {
|
||||
data: any[]
|
||||
paginationMeta?: PaginationMeta
|
||||
paginationMeta: PaginationMeta
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
@@ -21,15 +22,10 @@ function handlePageChange(page: number) {
|
||||
<template>
|
||||
<div class="space-y-4">
|
||||
<PubBaseDataTable
|
||||
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
|
||||
:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
|
||||
:func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
|
||||
/>
|
||||
|
||||
<template v-if="paginationMeta">
|
||||
<div v-if="paginationMeta.totalPage > 1">
|
||||
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
/>
|
||||
|
||||
<PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -17,20 +17,9 @@ const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// Fungsi untuk fetch data division
|
||||
async function fetchDivisionData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
// return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
return await xfetch('/api/v1/_dev/division/list')
|
||||
async function fetchDivisionData(_params: any) {
|
||||
const endpoint = '/api/v1/_dev/division/list'
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
@@ -193,22 +182,18 @@ function handleCancelConfirmation() {
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Divisi" size="lg" prevent-outside>
|
||||
|
||||
<AppDivisionEntryForm
|
||||
:division="divisionConf"
|
||||
:division-tree="divisionTreeConfig"
|
||||
:schema="schema"
|
||||
:initial-values="{ name: '', code: '', parentId: '' }"
|
||||
@submit="onSubmitForm"
|
||||
@cancel="onCancelForm"
|
||||
/>
|
||||
<AppDivisionEntryForm
|
||||
:division="divisionConf" :division-tree="divisionTreeConfig" :schema="schema"
|
||||
:initial-values="{ name: '', code: '', parentId: '' }" @submit="onSubmitForm" @cancel="onCancelForm"
|
||||
/>
|
||||
|
||||
</Dialog>
|
||||
|
||||
<!-- Record Confirmation Modal -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
|
||||
>
|
||||
v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
|
||||
>
|
||||
<template #default="{ record }">
|
||||
<div class="text-sm">
|
||||
<p><strong>ID:</strong> {{ record?.id }}</p>
|
||||
|
||||
@@ -24,19 +24,10 @@ const items = [
|
||||
{ value: 'item-3', label: 'Item 3' },
|
||||
]
|
||||
|
||||
// Fungsi untuk fetch data division
|
||||
// Fungsi untuk fetch data equipment
|
||||
async function fetchEquipmentData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
return await xfetch(`/api/v1/equipment?${urlParams.toString()}`)
|
||||
const endpoint = transform('/api/v1/equipment', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
@@ -188,17 +179,13 @@ const handleCancelConfirmation = () => {
|
||||
</div>
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Perlengkapan" size="lg" prevent-outside>
|
||||
<AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
|
||||
<AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm"
|
||||
@submit="onSubmitForm" />
|
||||
</Dialog>
|
||||
|
||||
<!-- Record Confirmation Modal -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="handleConfirmDelete"
|
||||
@cancel="handleCancelConfirmation"
|
||||
>
|
||||
<RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
|
||||
<template #default="{ record }">
|
||||
<div class="text-sm">
|
||||
<p><strong>ID:</strong> {{ record?.id }}</p>
|
||||
|
||||
@@ -5,7 +5,7 @@ import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/header.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { transform, usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { installationConf, schemaConf } from './entry'
|
||||
|
||||
// #region State & Computed
|
||||
@@ -21,16 +21,8 @@ const recItem = ref<any>(null)
|
||||
// Fungsi untuk fetch data installation
|
||||
async function fetchInstallationData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
const endpoint = transform('/api/v1/patient', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
@@ -192,18 +184,14 @@ function handleCancelConfirmation() {
|
||||
<AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Instalasi" size="lg" prevent-outside>
|
||||
<AppInstallationEntryForm
|
||||
:installation="installationConf" :schema="schemaConf"
|
||||
<AppInstallationEntryForm :installation="installationConf" :schema="schemaConf"
|
||||
:initial-values="{ name: '', code: '', encounterClassCode: '' }" @submit="onSubmitForm"
|
||||
@cancel="onCancelForm"
|
||||
/>
|
||||
@cancel="onCancelForm" />
|
||||
</Dialog>
|
||||
|
||||
<!-- Record Confirmation Modal -->
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
|
||||
>
|
||||
<RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
|
||||
@confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
|
||||
<template #default="{ record }">
|
||||
<div class="text-sm">
|
||||
<p><strong>ID:</strong> {{ record?.id }}</p>
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
<script setup lang="ts">
|
||||
const openPatient = ref(false)
|
||||
const openLetter = ref(false)
|
||||
const openHistory = ref(false)
|
||||
const selectedPatient = ref('3456512345678880')
|
||||
const selectedLetter = ref('SK22334442')
|
||||
|
||||
const patients = [
|
||||
{
|
||||
ktp: '3456512345678880',
|
||||
rm: 'RM23311224',
|
||||
bpjs: '334423213214',
|
||||
nama: 'Ahmad Baidowi',
|
||||
},
|
||||
{
|
||||
ktp: '345678804565123',
|
||||
rm: 'RM23455667',
|
||||
bpjs: '33442367656',
|
||||
nama: 'Bian Maulana',
|
||||
},
|
||||
]
|
||||
|
||||
const letters = [
|
||||
{
|
||||
noSurat: 'SK22334442',
|
||||
tglRencana: '12 Agustus 2025',
|
||||
noSep: 'SEP3232332',
|
||||
namaPasien: 'Ahmad Baidowi',
|
||||
noBpjs: '33442331214',
|
||||
klinik: 'Penyakit Dalam',
|
||||
dokter: 'dr. Andi Prasetyo, Sp.PD-KHOM',
|
||||
},
|
||||
{
|
||||
noSurat: 'SK99120039',
|
||||
tglRencana: '12 Agustus 2025',
|
||||
noSep: 'SEP4443232',
|
||||
namaPasien: 'Bian Maulana',
|
||||
noBpjs: '33442367656',
|
||||
klinik: 'Gigi',
|
||||
dokter: 'dr. Achmad Suparjo',
|
||||
},
|
||||
]
|
||||
|
||||
const histories = [
|
||||
{
|
||||
no_sep: "SP23311224",
|
||||
tgl_sep: "12 Agustus 2025",
|
||||
no_rujukan: "123444",
|
||||
diagnosis: "C34.9 – Karsinoma Paru",
|
||||
pelayanan: "Rawat Jalan",
|
||||
kelas: "Kelas II",
|
||||
},
|
||||
{
|
||||
no_sep: "SP23455667",
|
||||
tgl_sep: "11 Agustus 2025",
|
||||
no_rujukan: "2331221",
|
||||
diagnosis: "K35 – Apendisitis akut",
|
||||
pelayanan: "Rawat Jalan",
|
||||
kelas: "Kelas II",
|
||||
},
|
||||
]
|
||||
|
||||
function handleSavePatient() {
|
||||
console.log('Pasien dipilih:', selectedPatient.value)
|
||||
}
|
||||
|
||||
function handleSaveLetter() {
|
||||
console.log('Letter dipilih:', selectedLetter.value)
|
||||
}
|
||||
|
||||
function handleEvent(value: string) {
|
||||
if (value === 'search-patient') {
|
||||
openPatient.value = true
|
||||
return
|
||||
}
|
||||
if (value === 'search-letter') {
|
||||
openLetter.value = true
|
||||
return
|
||||
}
|
||||
if (value === 'history-sep') {
|
||||
openHistory.value = true
|
||||
return
|
||||
}
|
||||
if (value === 'back') {
|
||||
navigateTo('/bpjs/sep')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<Icon name="i-lucide-panel-bottom" class="me-2" />
|
||||
<span class="font-semibold">Tambah</span> SEP
|
||||
</div>
|
||||
<AppSepEntryForm @event="handleEvent" />
|
||||
<AppSepTableSearchPatient
|
||||
v-model:open="openPatient"
|
||||
v-model:selected="selectedPatient"
|
||||
:patients="patients"
|
||||
@save="handleSavePatient"
|
||||
/>
|
||||
<AppSepTableSearchLetter
|
||||
v-model:open="openLetter"
|
||||
v-model:selected="selectedLetter"
|
||||
:letters="letters"
|
||||
@save="handleSaveLetter"
|
||||
/>
|
||||
<AppSepTableHistorySep
|
||||
v-model:open="openHistory"
|
||||
:histories="histories"
|
||||
/>
|
||||
|
||||
</template>
|
||||
@@ -0,0 +1,250 @@
|
||||
<script setup lang="ts">
|
||||
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
} from '~/components/pub/ui/dropdown-menu'
|
||||
import { X, Check } from 'lucide-vue-next'
|
||||
|
||||
const search = ref('')
|
||||
const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
|
||||
const open = ref(false)
|
||||
|
||||
const sepData = {
|
||||
no_sep: 'SP23311224',
|
||||
kartu: '001234',
|
||||
nama: 'Kenzie',
|
||||
}
|
||||
|
||||
interface SepData {
|
||||
tgl_sep: string
|
||||
no_sep: string
|
||||
pelayanan: string
|
||||
jalur: string
|
||||
no_rm: string
|
||||
nama_pasien: string
|
||||
no_kartu_bpjs: string
|
||||
no_surat_kontrol: string
|
||||
tgl_surat_kontrol: string
|
||||
klinik_tujuan: string
|
||||
dpjp: string
|
||||
diagnosis_awal: string
|
||||
}
|
||||
|
||||
const paginationMeta = reactive<PaginationMeta>({
|
||||
recordCount: 0,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 5,
|
||||
hasNext: false,
|
||||
hasPrev: false,
|
||||
})
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
console.log('pageChange', page)
|
||||
}
|
||||
|
||||
const data = ref<SepData[]>([])
|
||||
|
||||
// contoh data dummy
|
||||
const rows = [
|
||||
{
|
||||
tgl_sep: '12 Agustus 2025',
|
||||
no_sep: 'SP23311224',
|
||||
pelayanan: 'Rawat Jalan',
|
||||
jalur: 'Kontrol',
|
||||
no_rm: 'RM23311224',
|
||||
nama_pasien: 'Ahmad Baidowi',
|
||||
no_kartu_bpjs: '334423231214',
|
||||
no_surat_kontrol: 'SK22334442',
|
||||
tgl_surat_kontrol: '13 Agustus 2024',
|
||||
klinik_tujuan: 'Penyakit dalam',
|
||||
dpjp: 'dr. Andi Prasetyo, Sp.PD-KHOM',
|
||||
diagnosis_awal: 'C34.9 - Karsinoma Paru',
|
||||
},
|
||||
{
|
||||
tgl_sep: '12 Agustus 2025',
|
||||
no_sep: 'SP23311224',
|
||||
pelayanan: 'Rawat Jalan',
|
||||
jalur: 'Kontrol',
|
||||
no_rm: 'RM001234',
|
||||
nama_pasien: 'Kenzie',
|
||||
no_kartu_bpjs: '12301234',
|
||||
no_surat_kontrol: '123456',
|
||||
tgl_surat_kontrol: '10 Agustus 2024',
|
||||
klinik_tujuan: 'Penyakit dalam',
|
||||
dpjp: 'Dr. Andreas Sutaji',
|
||||
diagnosis_awal: 'Bronchitis',
|
||||
},
|
||||
{
|
||||
tgl_sep: '11 Agustus 2025',
|
||||
no_sep: 'SP23455667',
|
||||
pelayanan: 'Rawat Jalan',
|
||||
jalur: 'Kontrol',
|
||||
no_rm: 'RM001009',
|
||||
nama_pasien: 'Abraham Sulaiman',
|
||||
no_kartu_bpjs: '334235',
|
||||
no_surat_kontrol: '123334',
|
||||
tgl_surat_kontrol: '11 Agustus 2024',
|
||||
klinik_tujuan: 'Penyakit dalam',
|
||||
dpjp: 'Dr. Andreas Sutaji',
|
||||
diagnosis_awal: 'Paru-paru basah',
|
||||
},
|
||||
]
|
||||
|
||||
const refSearchNav: RefSearchNav = {
|
||||
onClick: () => {
|
||||
// open filter modal
|
||||
},
|
||||
onInput: (_val: string) => {
|
||||
// filter patient list
|
||||
},
|
||||
onClear: () => {
|
||||
// clear url param
|
||||
},
|
||||
}
|
||||
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Daftar SEP Prosedur',
|
||||
icon: 'i-lucide-panel-bottom',
|
||||
addNav: {
|
||||
label: 'Tambah',
|
||||
onClick: () => {
|
||||
navigateTo('/bpjs/sep/add')
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
async function getSepList() {
|
||||
isLoading.dataListLoading = true
|
||||
data.value = [...rows]
|
||||
isLoading.dataListLoading = false
|
||||
}
|
||||
|
||||
function exportCsv() {
|
||||
console.log('Ekspor CSV dipilih')
|
||||
// tambahkan logic untuk generate CSV
|
||||
}
|
||||
|
||||
function exportExcel() {
|
||||
console.log('Ekspor Excel dipilih')
|
||||
// tambahkan logic untuk generate Excel
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
console.log('Data dihapus:', sepData)
|
||||
open.value = false
|
||||
}
|
||||
|
||||
watch(
|
||||
() => recAction.value,
|
||||
() => {
|
||||
if (recAction.value === 'showConfirmDel') {
|
||||
open.value = true
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onMounted(() => {
|
||||
getSepList()
|
||||
})
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rounded-md border p-4">
|
||||
<Header :prep="{ ...headerPrep }" />
|
||||
<!-- Filter Bar -->
|
||||
<div class="my-2 flex flex-wrap items-center gap-2">
|
||||
<!-- Search -->
|
||||
<Input v-model="search" placeholder="Cari No. SEP / No. Kartu BPJS..." class="w-72" />
|
||||
|
||||
<!-- Date Range -->
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal">
|
||||
{{ dateRange }}
|
||||
<Icon name="i-lucide-calendar" class="h-5 w-5" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="p-2">
|
||||
<Calendar mode="range" />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<!-- Export -->
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button
|
||||
variant="outline"
|
||||
class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
|
||||
>
|
||||
<Icon name="i-lucide-download" class="h-5 w-5" /> Ekspor
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent class="w-40">
|
||||
<DropdownMenuItem @click="exportCsv"> Ekspor CSV </DropdownMenuItem>
|
||||
<DropdownMenuItem @click="exportExcel"> Ekspor Excel </DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
<div class="rounded-md border p-4">
|
||||
<AppSepList v-if="!isLoading.dataListLoading" :data="data" />
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<template v-if="paginationMeta">
|
||||
<div v-if="paginationMeta.totalPage > 1">
|
||||
<PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Trigger button -->
|
||||
<Dialog v-model:open="open">
|
||||
<DialogTrigger as-child></DialogTrigger>
|
||||
|
||||
<DialogContent class="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Hapus SEP</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<DialogDescription class="text-gray-700">
|
||||
Apakah anda yakin ingin menghapus SEP dengan data:
|
||||
</DialogDescription>
|
||||
|
||||
<div class="mt-4 space-y-2 text-sm">
|
||||
<p>No. SEP : {{ sepData.no_sep }}</p>
|
||||
<p>No. Kartu BPJS : {{ sepData.kartu }}</p>
|
||||
<p>Nama Pasien : {{ sepData.nama }}</p>
|
||||
</div>
|
||||
|
||||
<DialogFooter class="mt-6 flex justify-end gap-3">
|
||||
<Button variant="outline" class="border-green-600 text-green-600 hover:bg-green-50" @click="open = false">
|
||||
<X class="mr-1 h-4 w-4" /> Tidak
|
||||
</Button>
|
||||
<Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleDelete">
|
||||
<Check class="mr-1 h-4 w-4" /> Ya
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
|
||||
import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
|
||||
|
||||
const data = ref({
|
||||
name: '',
|
||||
password: '',
|
||||
status: '',
|
||||
type: 'doctor',
|
||||
})
|
||||
|
||||
function onClick(type: string) {
|
||||
if (type === 'cancel') {
|
||||
navigateTo('/human-src/specialist-intern')
|
||||
} else if (type === 'draft') {
|
||||
// do something
|
||||
} else if (type === 'submit') {
|
||||
// do something
|
||||
}
|
||||
}
|
||||
|
||||
const items = [
|
||||
{ value: 'doctor', label: 'Dokter' },
|
||||
{ value: 'nurse', label: 'Perawat' },
|
||||
{ value: 'nutritionist', label: 'Ahli Gizi' },
|
||||
{ value: 'laborant', label: 'Laboran' },
|
||||
{ value: 'pharmacy', label: 'Farmasi' },
|
||||
{ value: 'payment', label: 'Pembayaran' },
|
||||
{ value: 'payment-verificator', label: 'Konfirmasi Pembayaran' },
|
||||
{ value: 'management', label: 'Management' },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
|
||||
<Icon name="i-lucide-user" class="me-2" />
|
||||
<span class="font-semibold">Tambah</span> Karyawan
|
||||
</div>
|
||||
|
||||
<AppUserEntryForm v-model="data" />
|
||||
|
||||
<AppSpecialistInternEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
|
||||
|
||||
<AppPersonEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
|
||||
|
||||
<div class="my-2 flex justify-end py-2">
|
||||
<Action @click="onClick" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,63 @@
|
||||
<script setup lang="ts">
|
||||
import type { DataTableLoader } from '~/components/pub/base/data-table/type'
|
||||
import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
|
||||
|
||||
const data = ref([])
|
||||
|
||||
const refSearchNav: RefSearchNav = {
|
||||
onClick: () => {
|
||||
// open filter modal
|
||||
},
|
||||
onInput: (_val: string) => {
|
||||
// filter patient list
|
||||
},
|
||||
onClear: () => {
|
||||
// clear url param
|
||||
},
|
||||
}
|
||||
|
||||
const isLoading = reactive<DataTableLoader>({
|
||||
isTableLoading: false,
|
||||
})
|
||||
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'User',
|
||||
icon: 'i-lucide-users',
|
||||
addNav: {
|
||||
label: 'Tambah',
|
||||
onClick: () => navigateTo('/human-src/specialist-intern/add'),
|
||||
},
|
||||
}
|
||||
|
||||
async function getDoctorList() {
|
||||
isLoading.dataListLoading = true
|
||||
|
||||
const resp = await xfetch('/api/v1/doctor')
|
||||
if (resp.success) {
|
||||
data.value = (resp.body as Record<string, any>).data
|
||||
}
|
||||
|
||||
isLoading.dataListLoading = false
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
getDoctorList()
|
||||
})
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
|
||||
<div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
|
||||
<AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,95 @@
|
||||
import * as z from 'zod'
|
||||
|
||||
export const schemaConf = z.object({
|
||||
name: z
|
||||
.string({
|
||||
required_error: 'Nama spesialisasi harus diisi',
|
||||
})
|
||||
.min(3, 'Nama spesialisasi minimal 3 karakter'),
|
||||
|
||||
code: z
|
||||
.string({
|
||||
required_error: 'Kode spesialisasi harus diisi',
|
||||
})
|
||||
.min(3, 'Kode spesialisasi minimal 3 karakter'),
|
||||
|
||||
installationId: z
|
||||
.string({
|
||||
required_error: 'Instalasi harus dipilih',
|
||||
})
|
||||
.min(1, 'Instalasi harus dipilih'),
|
||||
|
||||
unitId: z
|
||||
.string({
|
||||
required_error: 'Unit harus dipilih',
|
||||
})
|
||||
.min(1, 'Unit harus dipilih'),
|
||||
})
|
||||
|
||||
// Unit mapping berdasarkan installation
|
||||
export const installationUnitMapping: Record<string, string[]> = {
|
||||
'1': ['1', '3', '5'],
|
||||
'2': ['2', '4', '6'],
|
||||
'3': ['7', '8', '9', '10', '11'],
|
||||
}
|
||||
|
||||
export const unitConf = {
|
||||
msg: {
|
||||
placeholder: '---pilih unit',
|
||||
search: 'kode, nama unit',
|
||||
empty: 'unit tidak ditemukan',
|
||||
},
|
||||
items: [
|
||||
{ value: '1', label: 'Instalasi Medis', code: 'MED' },
|
||||
{ value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
|
||||
{ value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
|
||||
{ value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
|
||||
{ value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
|
||||
{ value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
|
||||
{ value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
|
||||
{ value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
|
||||
{ value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
|
||||
{ value: '10', label: 'Instalasi SDM', code: 'HR' },
|
||||
{ value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
|
||||
{ value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
|
||||
{ value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
|
||||
{ value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
|
||||
{ value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
|
||||
{ value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
|
||||
{ value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
|
||||
{ value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
|
||||
{ value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
|
||||
{ value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
|
||||
],
|
||||
}
|
||||
|
||||
export const installationConf = {
|
||||
msg: {
|
||||
placeholder: '---pilih instalasi',
|
||||
search: 'kode, nama instalasi',
|
||||
empty: 'instalasi tidak ditemukan',
|
||||
},
|
||||
items: [
|
||||
{ value: '1', label: 'Ambulatory', code: 'AMB' },
|
||||
{ value: '2', label: 'Inpatient', code: 'IMP' },
|
||||
{ value: '3', label: 'Emergency', code: 'EMER' },
|
||||
],
|
||||
}
|
||||
|
||||
// Helper function untuk filter unit berdasarkan installation
|
||||
export function getFilteredUnits(installationId: string) {
|
||||
if (!installationId || !installationUnitMapping[installationId]) {
|
||||
return []
|
||||
}
|
||||
|
||||
const allowedUnitIds = installationUnitMapping[installationId]
|
||||
return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
|
||||
}
|
||||
|
||||
// Helper function untuk membuat unit config yang ter-filter
|
||||
export function createFilteredUnitConf(installationId: string) {
|
||||
return {
|
||||
...unitConf,
|
||||
items: getFilteredUnits(installationId),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
<script setup lang="ts">
|
||||
import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
|
||||
import AppSpecialistEntryForm from '~/components/app/specialist/entry-form.vue'
|
||||
import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/header.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { createFilteredUnitConf, installationConf, schemaConf, unitConf } from './entry'
|
||||
|
||||
// #region State & Computed
|
||||
// Dialog state
|
||||
const isFormEntryDialogOpen = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
|
||||
// Table action rowId provider
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// State untuk tracking installation yang dipilih di form
|
||||
const selectedInstallationId = ref<string>('')
|
||||
|
||||
// Computed untuk filtered unit berdasarkan installation yang dipilih
|
||||
const filteredUnitConf = computed(() => {
|
||||
if (!selectedInstallationId.value) {
|
||||
return { ...unitConf, items: [] }
|
||||
}
|
||||
return createFilteredUnitConf(selectedInstallationId.value)
|
||||
})
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
fetchData: getSpecialistList,
|
||||
} = usePaginatedList({
|
||||
fetchFn: fetchSpecialistData,
|
||||
entityName: 'specialist',
|
||||
})
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Specialist',
|
||||
icon: 'i-lucide-box',
|
||||
refSearchNav: {
|
||||
placeholder: 'Cari (min. 3 karakter)...',
|
||||
minLength: 3,
|
||||
debounceMs: 500,
|
||||
showValidationFeedback: true,
|
||||
onInput: (_val: string) => {
|
||||
// Handle search input - this will be triggered by the header component
|
||||
},
|
||||
onClick: () => {
|
||||
// Handle search button click if needed
|
||||
},
|
||||
onClear: () => {
|
||||
// Handle search clear
|
||||
},
|
||||
},
|
||||
addNav: {
|
||||
label: 'Tambah Specialist',
|
||||
icon: 'i-lucide-send',
|
||||
onClick: () => {
|
||||
isFormEntryDialogOpen.value = true
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
async function fetchSpecialistData(params: any) {
|
||||
const endpoint = transform('/api/v1/patient', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
async function handleDeleteRow(record: any) {
|
||||
try {
|
||||
// TODO : hit backend request untuk delete
|
||||
console.log('Deleting record:', record)
|
||||
|
||||
// Simulate API call
|
||||
// const response = await xfetch(`/api/v1/Installation/${record.id}`, {
|
||||
// method: 'DELETE'
|
||||
// })
|
||||
|
||||
// Refresh data setelah berhasil delete
|
||||
await getSpecialistList()
|
||||
|
||||
// TODO: Show success message
|
||||
console.log('Record deleted successfully')
|
||||
} catch (error) {
|
||||
console.error('Error deleting record:', error)
|
||||
// TODO: Show error message
|
||||
} finally {
|
||||
// Reset record state
|
||||
recId.value = 0
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// Handle confirmation result
|
||||
function handleConfirmDelete(record: any, action: string) {
|
||||
console.log('Confirmed action:', action, 'for record:', record)
|
||||
handleDeleteRow(record)
|
||||
}
|
||||
|
||||
function handleCancelConfirmation() {
|
||||
// Reset record state when cancelled
|
||||
recId.value = 0
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
}
|
||||
|
||||
// #endregion region
|
||||
|
||||
// #region Form event handlers
|
||||
|
||||
function onCancelForm(resetForm: () => void) {
|
||||
isFormEntryDialogOpen.value = false
|
||||
// Reset installation selection ketika form dibatal
|
||||
selectedInstallationId.value = ''
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
function onInstallationChanged(installationId: string) {
|
||||
// Update local state untuk trigger re-render filtered units
|
||||
selectedInstallationId.value = installationId
|
||||
|
||||
// The filteredUnitConf computed will automatically update
|
||||
// based on the new selectedInstallationId value
|
||||
}
|
||||
|
||||
async function onSubmitForm(values: any, resetForm: () => void) {
|
||||
let isSuccess = false
|
||||
try {
|
||||
// TODO: Implement form submission logic
|
||||
console.log('Form submitted:', values)
|
||||
|
||||
// Simulate API call
|
||||
// const response = await xfetch('/api/v1/Installation', {
|
||||
// method: 'POST',
|
||||
// body: JSON.stringify(values)
|
||||
// })
|
||||
|
||||
// If successful, mark as success and close dialog
|
||||
isFormEntryDialogOpen.value = false
|
||||
isSuccess = true
|
||||
|
||||
// Reset installation selection ketika form berhasil submit
|
||||
selectedInstallationId.value = ''
|
||||
|
||||
// Refresh data after successful submission
|
||||
await getSpecialistList()
|
||||
|
||||
// TODO: Show success message
|
||||
console.log('Installation created successfully')
|
||||
} catch (error: unknown) {
|
||||
console.warn('Error submitting form:', error)
|
||||
isSuccess = false
|
||||
// Don't close dialog or reset form on error
|
||||
// TODO: Show error message to user
|
||||
} finally {
|
||||
if (isSuccess) {
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
|
||||
// Watch for row actions
|
||||
watch(recId, () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showEdit:
|
||||
// TODO: Handle edit action
|
||||
// isFormEntryDialogOpen.value = true
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
// Trigger confirmation modal open
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
// Note: Installation change logic is now handled by the entry-form component
|
||||
// through the onInstallationChanged event handler
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rounded-md border p-4">
|
||||
<Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
|
||||
<AppSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
|
||||
<AppSpecialistEntryForm
|
||||
:installation="installationConf"
|
||||
:unit="filteredUnitConf"
|
||||
:schema="schemaConf"
|
||||
:disabled-unit="!selectedInstallationId"
|
||||
:initial-values="{ name: '', code: '', installationId: '', unitId: '' }"
|
||||
@submit="onSubmitForm"
|
||||
@cancel="onCancelForm"
|
||||
@installation-changed="onInstallationChanged"
|
||||
/>
|
||||
</Dialog>
|
||||
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="handleConfirmDelete"
|
||||
@cancel="handleCancelConfirmation"
|
||||
>
|
||||
<template #default="{ record }">
|
||||
<div class="text-sm">
|
||||
<p><strong>ID:</strong> {{ record?.id }}</p>
|
||||
<p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
|
||||
<p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</RecordConfirmation>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* component style */
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
import * as z from 'zod'
|
||||
|
||||
export const schemaConf = z.object({
|
||||
name: z
|
||||
.string({
|
||||
required_error: 'Nama spesialisasi harus diisi',
|
||||
})
|
||||
.min(3, 'Nama spesialisasi minimal 3 karakter'),
|
||||
|
||||
code: z
|
||||
.string({
|
||||
required_error: 'Kode spesialisasi harus diisi',
|
||||
})
|
||||
.min(3, 'Kode spesialisasi minimal 3 karakter'),
|
||||
|
||||
installationId: z
|
||||
.string({
|
||||
required_error: 'Instalasi harus dipilih',
|
||||
})
|
||||
.min(1, 'Instalasi harus dipilih'),
|
||||
|
||||
unitId: z
|
||||
.string({
|
||||
required_error: 'Unit harus dipilih',
|
||||
})
|
||||
.min(1, 'Unit harus dipilih'),
|
||||
specialistId: z
|
||||
.string({
|
||||
required_error: 'Specialist harus dipilih',
|
||||
})
|
||||
.min(1, 'Specialist harus dipilih'),
|
||||
})
|
||||
|
||||
// Unit mapping berdasarkan installation
|
||||
export const installationUnitMapping: Record<string, string[]> = {
|
||||
'1': ['1', '3'],
|
||||
'2': ['2', '3'],
|
||||
'3': ['1', '2', '3'],
|
||||
}
|
||||
|
||||
export const unitConf = {
|
||||
msg: {
|
||||
placeholder: '---pilih unit',
|
||||
search: 'kode, nama unit',
|
||||
empty: 'unit tidak ditemukan',
|
||||
},
|
||||
items: [
|
||||
{ value: '1', label: 'Instalasi Medis', code: 'MED' },
|
||||
{ value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
|
||||
{ value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
|
||||
],
|
||||
}
|
||||
|
||||
export const specialistConf = {
|
||||
msg: {
|
||||
placeholder: '---pilih specialist',
|
||||
search: 'kode, nama specialist',
|
||||
empty: 'specialist tidak ditemukan',
|
||||
},
|
||||
items: [
|
||||
{ value: '1', label: 'Spesialis Jantung', code: 'CARD' },
|
||||
{ value: '2', label: 'Spesialis Mata', code: 'OPHT' },
|
||||
{ value: '3', label: 'Spesialis Bedah', code: 'SURG' },
|
||||
{ value: '4', label: 'Spesialis Anak', code: 'PEDI' },
|
||||
{ value: '5', label: 'Spesialis Kandungan', code: 'OBGY' },
|
||||
],
|
||||
}
|
||||
|
||||
export const installationConf = {
|
||||
msg: {
|
||||
placeholder: '---pilih instalasi',
|
||||
search: 'kode, nama instalasi',
|
||||
empty: 'instalasi tidak ditemukan',
|
||||
},
|
||||
items: [
|
||||
{ value: '1', label: 'Ambulatory', code: 'AMB' },
|
||||
{ value: '2', label: 'Inpatient', code: 'IMP' },
|
||||
{ value: '3', label: 'Emergency', code: 'EMER' },
|
||||
],
|
||||
}
|
||||
|
||||
// Helper function untuk filter unit berdasarkan installation
|
||||
export function getFilteredUnits(installationId: string) {
|
||||
if (!installationId || !installationUnitMapping[installationId]) {
|
||||
return []
|
||||
}
|
||||
|
||||
const allowedUnitIds = installationUnitMapping[installationId]
|
||||
return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
|
||||
}
|
||||
|
||||
// Helper function untuk membuat unit config yang ter-filter
|
||||
export function createFilteredUnitConf(installationId: string) {
|
||||
return {
|
||||
...unitConf,
|
||||
items: getFilteredUnits(installationId),
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,241 @@
|
||||
<script setup lang="ts">
|
||||
import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
|
||||
import AppSubspecialistEntryForm from '~/components/app/subspecialist/entry-form.vue'
|
||||
import Dialog from '~/components/pub/base/modal/dialog.vue'
|
||||
import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
|
||||
import { ActionEvents } from '~/components/pub/custom-ui/data/types'
|
||||
import Header from '~/components/pub/custom-ui/nav-header/header.vue'
|
||||
import { usePaginatedList } from '~/composables/usePaginatedList'
|
||||
import { createFilteredUnitConf, installationConf, schemaConf, specialistConf, unitConf } from './entry'
|
||||
|
||||
// #region State & Computed
|
||||
// Dialog state
|
||||
const isFormEntryDialogOpen = ref(false)
|
||||
const isRecordConfirmationOpen = ref(false)
|
||||
|
||||
// Table action rowId provider
|
||||
const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// State untuk tracking installation, unit, dan specialist yang dipilih di form
|
||||
const selectedInstallationId = ref<string>('')
|
||||
const selectedUnitId = ref<string>('')
|
||||
|
||||
// Computed untuk filtered unit berdasarkan installation yang dipilih
|
||||
const filteredUnitConf = computed(() => {
|
||||
if (!selectedInstallationId.value) {
|
||||
return { ...unitConf, items: [] }
|
||||
}
|
||||
return createFilteredUnitConf(selectedInstallationId.value)
|
||||
})
|
||||
|
||||
const {
|
||||
data,
|
||||
isLoading,
|
||||
paginationMeta,
|
||||
searchInput,
|
||||
handlePageChange,
|
||||
handleSearch,
|
||||
fetchData: getSubSpecialistList,
|
||||
} = usePaginatedList({
|
||||
fetchFn: fetchSubSpecialistData,
|
||||
entityName: 'subspecialist',
|
||||
})
|
||||
|
||||
const headerPrep: HeaderPrep = {
|
||||
title: 'Sub Specialist',
|
||||
icon: 'i-lucide-box',
|
||||
refSearchNav: {
|
||||
placeholder: 'Cari (min. 3 karakter)...',
|
||||
minLength: 3,
|
||||
debounceMs: 500,
|
||||
showValidationFeedback: true,
|
||||
onInput: (_val: string) => {
|
||||
// Handle search input - this will be triggered by the header component
|
||||
},
|
||||
onClick: () => {
|
||||
// Handle search button click if needed
|
||||
},
|
||||
onClear: () => {
|
||||
// Handle search clear
|
||||
},
|
||||
},
|
||||
addNav: {
|
||||
label: 'Tambah Sub Specialist',
|
||||
icon: 'i-lucide-send',
|
||||
onClick: () => {
|
||||
isFormEntryDialogOpen.value = true
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
provide('rec_id', recId)
|
||||
provide('rec_action', recAction)
|
||||
provide('rec_item', recItem)
|
||||
provide('table_data_loader', isLoading)
|
||||
// #endregion
|
||||
|
||||
// #region Functions
|
||||
async function fetchSubSpecialistData(params: any) {
|
||||
const endpoint = transform('/api/v1/patient', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
async function handleDeleteRow(record: any) {
|
||||
try {
|
||||
// TODO : hit backend request untuk delete
|
||||
console.log('Deleting record:', record)
|
||||
|
||||
// Simulate API call
|
||||
// const response = await xfetch(`/api/v1/subspecialist/${record.id}`, {
|
||||
// method: 'DELETE'
|
||||
// })
|
||||
|
||||
// Refresh data setelah berhasil delete
|
||||
await getSubSpecialistList()
|
||||
|
||||
// TODO: Show success message
|
||||
console.log('Record deleted successfully')
|
||||
} catch (error) {
|
||||
console.error('Error deleting record:', error)
|
||||
// TODO: Show error message
|
||||
} finally {
|
||||
// Reset record state
|
||||
recId.value = 0
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// Handle confirmation result
|
||||
function handleConfirmDelete(record: any, action: string) {
|
||||
console.log('Confirmed action:', action, 'for record:', record)
|
||||
handleDeleteRow(record)
|
||||
}
|
||||
|
||||
function handleCancelConfirmation() {
|
||||
// Reset record state when cancelled
|
||||
recId.value = 0
|
||||
recAction.value = ''
|
||||
recItem.value = null
|
||||
}
|
||||
|
||||
// #endregion region
|
||||
|
||||
// #region Form event handlers
|
||||
|
||||
function onCancelForm(resetForm: () => void) {
|
||||
isFormEntryDialogOpen.value = false
|
||||
selectedInstallationId.value = ''
|
||||
selectedUnitId.value = ''
|
||||
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
}, 500)
|
||||
}
|
||||
|
||||
function onInstallationChanged(installationId: string) {
|
||||
selectedInstallationId.value = installationId
|
||||
}
|
||||
|
||||
function onUnitChanged(unitId: string) {
|
||||
selectedUnitId.value = unitId
|
||||
}
|
||||
|
||||
async function onSubmitForm(values: any, resetForm: () => void) {
|
||||
let isSuccess = false
|
||||
try {
|
||||
// TODO: Implement form submission logic
|
||||
console.log('Form submitted:', values)
|
||||
|
||||
// Simulate API call
|
||||
// const response = await xfetch('/api/v1/subspecialist', {
|
||||
// method: 'POST',
|
||||
// body: JSON.stringify(values)
|
||||
// })
|
||||
|
||||
// If successful, mark as success and close dialog
|
||||
isFormEntryDialogOpen.value = false
|
||||
isSuccess = true
|
||||
|
||||
// Reset selection ketika form berhasil submit
|
||||
selectedInstallationId.value = ''
|
||||
selectedUnitId.value = ''
|
||||
|
||||
// Refresh data after successful submission
|
||||
await getSubSpecialistList()
|
||||
|
||||
// TODO: Show success message
|
||||
console.log('Sub Specialist created successfully')
|
||||
} catch (error: unknown) {
|
||||
console.warn('Error submitting form:', error)
|
||||
isSuccess = false
|
||||
// Don't close dialog or reset form on error
|
||||
// TODO: Show error message to user
|
||||
} finally {
|
||||
if (isSuccess) {
|
||||
setTimeout(() => {
|
||||
resetForm()
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// #region Watchers
|
||||
|
||||
// Watch for row actions
|
||||
watch(recId, () => {
|
||||
switch (recAction.value) {
|
||||
case ActionEvents.showEdit:
|
||||
// TODO: Handle edit action
|
||||
// isFormEntryDialogOpen.value = true
|
||||
break
|
||||
case ActionEvents.showConfirmDelete:
|
||||
// Trigger confirmation modal open
|
||||
isRecordConfirmationOpen.value = true
|
||||
break
|
||||
}
|
||||
})
|
||||
|
||||
// #endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rounded-md border p-4">
|
||||
<Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
|
||||
<AppSubspecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
|
||||
|
||||
<Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
|
||||
<AppSubspecialistEntryForm
|
||||
:installation="installationConf"
|
||||
:unit="filteredUnitConf"
|
||||
:specialist="specialistConf"
|
||||
:schema="schemaConf"
|
||||
:initial-values="{ name: '', code: '', installationId: '', unitId: '', specialistId: '' }"
|
||||
@submit="onSubmitForm"
|
||||
@cancel="onCancelForm"
|
||||
@installation-changed="onInstallationChanged"
|
||||
@unit-changed="onUnitChanged"
|
||||
/>
|
||||
</Dialog>
|
||||
|
||||
<RecordConfirmation
|
||||
v-model:open="isRecordConfirmationOpen"
|
||||
action="delete"
|
||||
:record="recItem"
|
||||
@confirm="handleConfirmDelete"
|
||||
@cancel="handleCancelConfirmation"
|
||||
>
|
||||
<template #default="{ record }">
|
||||
<div class="text-sm">
|
||||
<p><strong>ID:</strong> {{ record?.id }}</p>
|
||||
<p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
|
||||
<p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
|
||||
<p v-if="record?.specialist"><strong>Specialist:</strong> {{ record.specialist?.name }}</p>
|
||||
</div>
|
||||
</template>
|
||||
</RecordConfirmation>
|
||||
</div>
|
||||
</template>
|
||||
@@ -24,19 +24,9 @@ const items = [
|
||||
{ value: 'item-3', label: 'Item 3' },
|
||||
]
|
||||
|
||||
// Fungsi untuk fetch data division
|
||||
async function fetchDeviceData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
return await xfetch(`/api/v1/device?${urlParams.toString()}`)
|
||||
const endpoint = transform('/api/v1/device', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
|
||||
@@ -18,19 +18,9 @@ const recId = ref<number>(0)
|
||||
const recAction = ref<string>('')
|
||||
const recItem = ref<any>(null)
|
||||
|
||||
// Fungsi untuk fetch data unit
|
||||
async function fetchUnitData(params: any) {
|
||||
// Prepare query parameters for pagination and search
|
||||
const urlParams = new URLSearchParams({
|
||||
'page-number': params.page.toString(),
|
||||
'page-size': params.pageSize.toString(),
|
||||
})
|
||||
|
||||
if (params.q) {
|
||||
urlParams.append('search', params.q)
|
||||
}
|
||||
|
||||
return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
|
||||
const endpoint = transform('/api/v1/patient', params)
|
||||
return await xfetch(endpoint)
|
||||
}
|
||||
|
||||
// Menggunakan composable untuk pagination
|
||||
|
||||
@@ -15,6 +15,7 @@ const props = defineProps<{
|
||||
searchPlaceholder?: string
|
||||
emptyMessage?: string
|
||||
class?: string
|
||||
disabled?: boolean
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@@ -63,13 +64,14 @@ function onSelect(item: Item) {
|
||||
<PopoverTrigger as-child>
|
||||
<Button
|
||||
:id="props.id"
|
||||
:disabled="props.disabled"
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
:aria-expanded="open"
|
||||
:aria-controls="`${props.id}-list`"
|
||||
:aria-describedby="`${props.id}-search`"
|
||||
:class="cn(
|
||||
'w-full justify-between border-black bg-white hover:bg-gray-50 text-sm font-normal',
|
||||
'w-full justify-between border-1 border-gray-400 bg-white hover:bg-gray-50 text-sm font-normal focus:outline-none focus:ring-1 focus:ring-black',
|
||||
!modelValue && 'text-muted-foreground',
|
||||
props.class,
|
||||
)"
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
<script setup lang="ts">
|
||||
// helpers
|
||||
import { format, parseISO } from 'date-fns'
|
||||
// components
|
||||
import { Button } from '~/components/pub/ui/button'
|
||||
import { Calendar } from '~/components/pub/ui/calendar'
|
||||
import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
|
||||
|
||||
const props = defineProps<{
|
||||
placeholder?: string
|
||||
modelValue?: Date | string | undefined
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: Date | string | undefined]
|
||||
}>()
|
||||
|
||||
const date = ref<Date | any>(undefined)
|
||||
|
||||
watch(date, (value) => {
|
||||
const newValue = format(value, 'yyyy-MM-dd')
|
||||
emit('update:modelValue', newValue)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (props.modelValue) {
|
||||
const value = props.modelValue
|
||||
if (value instanceof Date) {
|
||||
date.value = value
|
||||
} else if (typeof value === 'string' && value) {
|
||||
date.value = parseISO(value)
|
||||
} else {
|
||||
date.value = undefined
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col space-y-2">
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" class="bg-white border-gray-400 font-normal text-right h-[40px] w-full">
|
||||
<div class="flex justify-between items-center w-full">
|
||||
<p v-if="date">{{ format(date, 'PPP') }}</p>
|
||||
<p v-else class="text-sm text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
|
||||
<Icon name="i-lucide-calendar" class="h-5 w-5" />
|
||||
</div>
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-auto p-0">
|
||||
<Calendar v-model="date" mode="single" />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</div>
|
||||
</template>
|
||||
@@ -54,8 +54,10 @@ function onValueChange(value: string) {
|
||||
|
||||
<template>
|
||||
<SelectRoot :model-value="modelValue" @update:model-value="onValueChange">
|
||||
<SelectTrigger :class="cn('w-full', props.class)">
|
||||
<SelectValue :placeholder="placeholder || 'Pilih item'" />
|
||||
<SelectTrigger :class="cn('w-full focus:outline-none focus:ring-1 focus:ring-black bg-white', props.class)">
|
||||
<SelectValue :placeholder="placeholder || 'Pilih item'" :class="cn(
|
||||
props.modelValue ? 'text-black' : 'text-muted-foreground',
|
||||
)" />
|
||||
</SelectTrigger>
|
||||
|
||||
<SelectContent>
|
||||
@@ -64,12 +66,7 @@ function onValueChange(value: string) {
|
||||
{{ label }}
|
||||
</SelectLabel>
|
||||
|
||||
<SelectItem
|
||||
v-for="item in sortedItems"
|
||||
:key="item.value"
|
||||
:value="item.value"
|
||||
class="cursor-pointer"
|
||||
>
|
||||
<SelectItem v-for="item in sortedItems" :key="item.value" :value="item.value" class="cursor-pointer">
|
||||
<div class="flex items-center justify-between w-full">
|
||||
<span>{{ item.label }}</span>
|
||||
<span v-if="item.code" class="text-xs text-muted-foreground ml-2">
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
|
||||
import Pagination from './pagination.vue'
|
||||
|
||||
const props = defineProps<{
|
||||
paginationMeta: PaginationMeta
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
pageChange: [page: number]
|
||||
}>()
|
||||
|
||||
function handlePageChange(page: number) {
|
||||
emit('pageChange', page)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Pagination
|
||||
v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
|
||||
:pagination-meta="paginationMeta"
|
||||
@page-change="handlePageChange"
|
||||
/>
|
||||
</template>
|
||||
@@ -65,7 +65,8 @@ const formattedRecordCount = computed(() => {
|
||||
})
|
||||
|
||||
const startRecord = computed(() => {
|
||||
return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
|
||||
const start = ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
|
||||
return Number(start).toLocaleString('id-ID')
|
||||
})
|
||||
|
||||
const endRecord = computed(() => {
|
||||
@@ -89,12 +90,12 @@ function getButtonClass(pageNumber: number) {
|
||||
<template>
|
||||
<div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
|
||||
<!-- Info text -->
|
||||
<div v-if="showInfo" class="text-sm text-muted-foreground shrink-0">
|
||||
<div v-if="showInfo && endRecord > 0" class="text-sm text-muted-foreground shrink-0">
|
||||
Menampilkan {{ startRecord }}
|
||||
hingga {{ endRecord }}
|
||||
hingga {{ Number(endRecord).toLocaleString('id-ID') }}
|
||||
dari {{ formattedRecordCount }} data
|
||||
</div>
|
||||
<div v-else class="shrink-0"></div>
|
||||
<div v-else class="shrink-0">-</div>
|
||||
|
||||
<!-- Spacer untuk memastikan ada ruang di tengah -->
|
||||
<div class="flex-1 min-w-4"></div>
|
||||
|
||||
@@ -28,7 +28,7 @@ const iconName = computed(() => props.iconName || 'i-radix-icons-caret-sort')
|
||||
>
|
||||
<slot />
|
||||
<SelectIcon as-child class="absolute right-3 top-1/2 -translate-y-1/2">
|
||||
<Icon name="i-radix-icons-caret-sort" class="h-4 w-4 opacity-50" />
|
||||
<Icon :name="iconName" class="h-4 w-4 opacity-50" />
|
||||
</SelectIcon>
|
||||
</SelectTrigger>
|
||||
</template>
|
||||
|
||||
@@ -5,15 +5,18 @@ import * as z from 'zod'
|
||||
|
||||
// Default query schema yang bisa digunakan semua list
|
||||
export const defaultQuerySchema = z.object({
|
||||
q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
|
||||
page: z.coerce.number().int().min(1).default(1).catch(1),
|
||||
pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
|
||||
search: z
|
||||
.union([z.literal(''), z.string().min(3)])
|
||||
.optional()
|
||||
.catch(''),
|
||||
'page-number': z.coerce.number().int().min(1).default(1).catch(1),
|
||||
'page-size': z.coerce.number().int().min(5).max(20).default(10).catch(10),
|
||||
})
|
||||
|
||||
export const defaultQueryParams = {
|
||||
q: '',
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
export const defaultQueryParams: Record<string, any> = {
|
||||
search: '',
|
||||
'page-number': 1,
|
||||
'page-size': 10,
|
||||
}
|
||||
|
||||
export type DefaultQueryParams = z.infer<typeof defaultQuerySchema>
|
||||
@@ -37,12 +40,7 @@ interface UsePaginatedListOptions<T = any> {
|
||||
}
|
||||
|
||||
export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
|
||||
const {
|
||||
querySchema = defaultQuerySchema,
|
||||
defaultQuery = defaultQueryParams,
|
||||
fetchFn,
|
||||
entityName,
|
||||
} = options
|
||||
const { querySchema = defaultQuerySchema, defaultQuery = defaultQueryParams, fetchFn, entityName } = options
|
||||
|
||||
// State management
|
||||
const data = ref<T[]>([])
|
||||
@@ -64,15 +62,15 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
|
||||
// Pagination state - computed from URL params
|
||||
const paginationMeta = reactive<PaginationMeta>({
|
||||
recordCount: 0,
|
||||
page: params.value.page,
|
||||
pageSize: params.value.pageSize,
|
||||
page: params.value['page-number'],
|
||||
pageSize: params.value['page-size'],
|
||||
totalPage: 0,
|
||||
hasNext: false,
|
||||
hasPrev: false,
|
||||
})
|
||||
|
||||
// Search model with debounce
|
||||
const searchInput = ref(params.value.q || '')
|
||||
const searchInput = ref(params.value.search || '')
|
||||
const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
|
||||
|
||||
// Functions
|
||||
@@ -92,8 +90,8 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
|
||||
const pager = responseBody.meta
|
||||
// Update pagination meta from response
|
||||
paginationMeta.recordCount = pager.record_totalCount
|
||||
paginationMeta.page = currentParams.page
|
||||
paginationMeta.pageSize = currentParams.pageSize
|
||||
paginationMeta.page = currentParams['page-number']
|
||||
paginationMeta.pageSize = currentParams['page-size']
|
||||
paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
|
||||
paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
|
||||
paginationMeta.hasPrev = paginationMeta.page > 1
|
||||
@@ -113,32 +111,36 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
|
||||
// Handle pagination page change
|
||||
function handlePageChange(page: number) {
|
||||
// Update URL params - this will trigger watcher
|
||||
queryParams.page = page
|
||||
queryParams['page-number'] = page
|
||||
}
|
||||
|
||||
// Handle search from header component
|
||||
function handleSearch(searchValue: string) {
|
||||
// Update URL params - this will trigger watcher and refetch data
|
||||
queryParams.q = searchValue
|
||||
queryParams.page = 1 // Reset to first page when searching
|
||||
queryParams.search = searchValue
|
||||
queryParams['page-number'] = 1 // Reset to first page when searching
|
||||
}
|
||||
|
||||
// Watchers
|
||||
// Watch for URL param changes and trigger refetch
|
||||
watch(params, (newParams) => {
|
||||
// Sync search input with URL params (for back/forward navigation)
|
||||
if (newParams.q !== searchInput.value) {
|
||||
searchInput.value = newParams.q || ''
|
||||
}
|
||||
fetchData()
|
||||
}, { deep: true })
|
||||
watch(
|
||||
params,
|
||||
(newParams) => {
|
||||
// Sync search input with URL params (for back/forward navigation)
|
||||
if (newParams.search !== searchInput.value) {
|
||||
searchInput.value = newParams.search || ''
|
||||
}
|
||||
fetchData()
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
|
||||
// Watch debounced search and update URL params (keeping for backward compatibility)
|
||||
watch(debouncedSearch, (newValue) => {
|
||||
// Only search if 3+ characters or empty (to clear search)
|
||||
if (newValue.length === 0 || newValue.length >= 3) {
|
||||
queryParams.q = newValue
|
||||
queryParams.page = 1 // Reset to first page when searching
|
||||
queryParams.search = newValue
|
||||
queryParams['page-number'] = 1 // Reset to first page when searching
|
||||
}
|
||||
})
|
||||
|
||||
@@ -162,3 +164,15 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
|
||||
handleSearch,
|
||||
}
|
||||
}
|
||||
|
||||
export function transform(endpoint: string ,params: any): string {
|
||||
const urlParams = new URLSearchParams()
|
||||
|
||||
Object.entries(params).forEach(([key, value]) => {
|
||||
if (value) {
|
||||
urlParams.append(key, value.toString())
|
||||
}
|
||||
})
|
||||
|
||||
return `${endpoint}?${urlParams.toString()}`
|
||||
}
|
||||
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import type { PagePermission } from '~/models/role'
|
||||
import Error from '~/components/pub/base/error/error.vue'
|
||||
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
|
||||
|
||||
definePageMeta({
|
||||
middleware: [],
|
||||
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
|
||||
title: 'Tambah SEP',
|
||||
contentFrame: 'cf-full-width',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
useHead({
|
||||
title: () => route.meta.title as string,
|
||||
})
|
||||
|
||||
const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
|
||||
|
||||
const { checkRole, hasCreateAccess } = useRBAC()
|
||||
|
||||
// Check if user has access to this page
|
||||
const hasAccess = checkRole(roleAccess)
|
||||
if (!hasAccess) {
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage: 'Access denied',
|
||||
})
|
||||
}
|
||||
|
||||
// Define permission-based computed properties
|
||||
const canCreate = true // hasCreateAccess(roleAccess)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="canCreate">
|
||||
<ContentSepEntry />
|
||||
</div>
|
||||
<Error v-else :status-code="403" />
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import type { PagePermission } from '~/models/role'
|
||||
import Error from '~/components/pub/base/error/error.vue'
|
||||
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['rbac'],
|
||||
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
|
||||
title: 'Daftar User',
|
||||
contentFrame: 'cf-full-width',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
useHead({
|
||||
title: () => route.meta.title as string,
|
||||
})
|
||||
|
||||
const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
|
||||
|
||||
const { checkRole, hasReadAccess } = useRBAC()
|
||||
|
||||
// Check if user has access to this page
|
||||
const hasAccess = checkRole(roleAccess)
|
||||
if (!hasAccess) {
|
||||
navigateTo('/403')
|
||||
}
|
||||
|
||||
// Define permission-based computed properties
|
||||
const canRead = true // hasReadAccess(roleAccess)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="canRead">
|
||||
<ContentSepList />
|
||||
</div>
|
||||
<Error v-else :status-code="403" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
import type { PagePermission } from '~/models/role'
|
||||
import Error from '~/components/pub/base/error/error.vue'
|
||||
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['rbac'],
|
||||
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
|
||||
title: 'Tambah User',
|
||||
contentFrame: 'cf-full-width',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
useHead({
|
||||
title: () => route.meta.title as string,
|
||||
})
|
||||
|
||||
const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
|
||||
|
||||
const { checkRole, hasCreateAccess } = useRBAC()
|
||||
|
||||
// Check if user has access to this page
|
||||
const hasAccess = checkRole(roleAccess)
|
||||
if (!hasAccess) {
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage: 'Access denied',
|
||||
})
|
||||
}
|
||||
|
||||
// Define permission-based computed properties
|
||||
const canCreate = hasCreateAccess(roleAccess)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="canCreate">
|
||||
<ContentSpecialistInternEntry />
|
||||
</div>
|
||||
<Error v-else :status-code="403" />
|
||||
</template>
|
||||
@@ -0,0 +1,40 @@
|
||||
<script setup lang="ts">
|
||||
import type { PagePermission } from '~/models/role'
|
||||
import Error from '~/components/pub/base/error/error.vue'
|
||||
import { PAGE_PERMISSIONS } from '~/lib/page-permission'
|
||||
|
||||
definePageMeta({
|
||||
middleware: ['rbac'],
|
||||
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
|
||||
title: 'Daftar User',
|
||||
contentFrame: 'cf-full-width',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
useHead({
|
||||
title: () => route.meta.title as string,
|
||||
})
|
||||
|
||||
const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
|
||||
|
||||
const { checkRole, hasReadAccess } = useRBAC()
|
||||
|
||||
// Check if user has access to this page
|
||||
const hasAccess = checkRole(roleAccess)
|
||||
if (!hasAccess) {
|
||||
navigateTo('/403')
|
||||
}
|
||||
|
||||
// Define permission-based computed properties
|
||||
const canRead = hasReadAccess(roleAccess)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="canRead">
|
||||
<ContentSpecialistInternList />
|
||||
</div>
|
||||
<Error v-else :status-code="403" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
// import type { PagePermission } from '~/models/role'
|
||||
import Error from '~/components/pub/base/error/error.vue'
|
||||
// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
|
||||
|
||||
definePageMeta({
|
||||
// middleware: ['rbac'],
|
||||
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
|
||||
title: 'List Specialist',
|
||||
contentFrame: 'cf-full-width',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
useHead({
|
||||
title: () => route.meta.title as string,
|
||||
})
|
||||
|
||||
// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
|
||||
|
||||
// const { checkRole, hasReadAccess } = useRBAC()
|
||||
|
||||
// // Check if user has access to this page
|
||||
// const hasAccess = checkRole(roleAccess)
|
||||
// if (!hasAccess) {
|
||||
// navigateTo('/403')
|
||||
// }
|
||||
|
||||
// Define permission-based computed properties
|
||||
// const canRead = hasReadAccess(roleAccess)
|
||||
const canRead = true
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="canRead">
|
||||
<ContentSpecialistList />
|
||||
</div>
|
||||
<Error v-else :status-code="403" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,41 @@
|
||||
<script setup lang="ts">
|
||||
// import type { PagePermission } from '~/models/role'
|
||||
import Error from '~/components/pub/base/error/error.vue'
|
||||
// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
|
||||
|
||||
definePageMeta({
|
||||
// middleware: ['rbac'],
|
||||
roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
|
||||
title: 'List Specialist',
|
||||
contentFrame: 'cf-full-width',
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
|
||||
useHead({
|
||||
title: () => route.meta.title as string,
|
||||
})
|
||||
|
||||
// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
|
||||
|
||||
// const { checkRole, hasReadAccess } = useRBAC()
|
||||
|
||||
// // Check if user has access to this page
|
||||
// const hasAccess = checkRole(roleAccess)
|
||||
// if (!hasAccess) {
|
||||
// navigateTo('/403')
|
||||
// }
|
||||
|
||||
// Define permission-based computed properties
|
||||
// const canRead = hasReadAccess(roleAccess)
|
||||
const canRead = true
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="canRead">
|
||||
<ContentSubspecialistList />
|
||||
</div>
|
||||
<Error v-else :status-code="403" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -20,6 +20,7 @@
|
||||
"@radix-icons/vue": "^1.0.0",
|
||||
"@unovis/ts": "^1.5.1",
|
||||
"@unovis/vue": "^1.5.1",
|
||||
"date-fns": "^4.1.0",
|
||||
"embla-carousel": "^8.5.2",
|
||||
"embla-carousel-vue": "^8.5.2",
|
||||
"h3": "^1.15.4",
|
||||
|
||||
Generated
+7
@@ -23,6 +23,9 @@ dependencies:
|
||||
'@unovis/vue':
|
||||
specifier: ^1.5.1
|
||||
version: 1.5.2(@unovis/ts@1.5.2)(vue@3.5.18)
|
||||
date-fns:
|
||||
specifier: ^4.1.0
|
||||
version: 4.1.0
|
||||
embla-carousel:
|
||||
specifier: ^8.5.2
|
||||
version: 8.6.0
|
||||
@@ -6124,6 +6127,10 @@ packages:
|
||||
engines: {node: '>= 12'}
|
||||
dev: true
|
||||
|
||||
/date-fns@4.1.0:
|
||||
resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
|
||||
dev: false
|
||||
|
||||
/db0@0.3.2:
|
||||
resolution: {integrity: sha512-xzWNQ6jk/+NtdfLyXEipbX55dmDSeteLFt/ayF+wZUU5bzKgmrDOxmInUTbyVRp46YwnJdkDA1KhB7WIXFofJw==}
|
||||
peerDependencies:
|
||||
|
||||
Reference in New Issue
Block a user