Merge pull request #5 from dikstub-rssa/feat/doctor

feat(doctor): implement list and create form resource

app/components/app/doctor/entry-form.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import Block from '~/components/pub/form/block.vue'
+import FieldGroup from '~/components/pub/form/field-group.vue'
+import Field from '~/components/pub/form/field.vue'
+import Label from '~/components/pub/form/label.vue'
+</script>
+
+<template>
+  <form id="entry-form">
+    <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> Dokter
+    </div>
+
+    <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>
+          <FieldGroup :column="1">
+            <Label>Nama dan Gelar</Label>
+            <Field>
+              <Input type="text" name="name" default-value="dr." />
+            </Field>
+            <Field>
+              <Input type="text" name="name" />
+            </Field>
+            <Field>
+              <Input type="text" name="name" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>NIK</Label>
+            <Field>
+              <Input type="text" name="identity_number" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>NO SIP</Label>
+            <Field name="sip_number">
+              <Input type="text" name="sip_no" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Telepon / HP</Label>
+            <Field name="phone">
+              <Input type="text" name="phone" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Kode BPJS</Label>
+            <Field>
+              <Input type="text" name="bpjs_code" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Fee Rajal</Label>
+            <Field>
+              <Input type="number" name="outPatient_rate" />
+
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Fee Ranap</Label>
+            <Field>
+              <Input type="number" name="inPatient_rate" />
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="3">
+            <Label>Status</Label>
+            <Field>
+              <Input type="select" name="status">
+              <option value="active">Aktif</option>
+              <option value="inactive">Tidak Aktif</option>
+              </Input>
+            </Field>
+          </FieldGroup>
+        </Block>
+        <Block>
+          <FieldGroup :column="2">
+            <Label>Username</Label>
+            <Field>
+              <Input type="text" name="username" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
+            <Label>Password</Label>
+            <Field>
+              <Input type="password" name="password" />
+            </Field>
+
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+    <div class="my-2 flex justify-end py-2">
+      <PubNavFooterCsd />
+    </div>
+  </form>
+</template>

app/components/app/doctor/list-cfg.ts

@@ -0,0 +1,102 @@
+import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/nav/dropdown-action-dud.vue'))
+
+const doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 100 },
+  { width: 100 },
+  { width: 100 },
+  { width: 50 },
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode JKN' },
+    { label: 'Nama' },
+    { label: 'No KTP' },
+    { label: 'No SIP' },
+    { label: 'No IHS' },
+    { label: 'Telpon' },
+    { label: 'Fee Ranap' },
+    { label: 'Fee Rajal' },
+    { label: 'Status' },
+  ],
+]
+
+export const keys = [
+  'bpjs_code',
+  'name',
+  'identity_number',
+  'sip_no',
+  'ihs_number',
+  'phone',
+  'inPatient_itemPrice',
+  'outPatient_itemPrice',
+  'status',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    console.log(rec)
+    const recX = rec as SmallDetailDto
+    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  status: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return doctorStatus[recX.status_code as keyof typeof doctorStatus]
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}

app/components/app/doctor/list.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>

app/components/flow/doctor/add.vue

@@ -0,0 +1,6 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <AppDoctorEntryForm />
+</template>

app/components/flow/doctor/list.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Dokter',
+  icon: 'i-lucide-network',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/doctor/add'),
+  },
+}
+
+useAsyncData('getDoctor', () => xfetch('/api/v1/doctor'), { server: false, immediate: true })
+
+async function getDoctorList() {
+  const resp = await xfetch('/api/v1/doctor')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getDoctorList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+</script>
+
+<template>
+  <PubNavHeaderPrep :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <AppDoctorList :data="data" />
+</template>

app/components/layout/AppSidebar.vue

@@ -12,12 +12,12 @@ const teams: {
   logo: string
   plan: string
 }[] = [
-  {
-    name: 'SIMRS - RSSA',
-    logo: '/rssa-logo.png',
-    plan: 'Saiful Anwar Hospital',
-  },
-]
+    {
+      name: 'SIMRS - RSSA',
+      logo: '/rssa-logo.png',
+      plan: 'Saiful Anwar Hospital',
+    },
+  ]
 const sidebar = {
   collapsible: 'offcanvas', // 'offcanvas' | 'icon' | 'none'
   side: 'left', // 'left' | 'right'
@@ -59,13 +59,8 @@ async function setMenu() {
         <SidebarGroupLabel>
           {{ navMenu.heading }}
         </SidebarGroupLabel>
-        <component
-          :is="resolveNavItemComponent(item)"
-          v-for="(item, index) in navMenu.items"
-          :key="index"
-          :item="item"
-          class="my-2 mb-2"
-        />
+        <component :is="resolveNavItemComponent(item)" v-for="(item, index) in navMenu.items" :key="index" :item="item"
+          class="my-2 mb-2" />
       </SidebarGroup>
       <template v-else>
         <div class="p-5">
@@ -73,13 +68,8 @@ async function setMenu() {
         </div>
       </template>
       <SidebarGroup class="mt-auto">
-        <component
-          :is="resolveNavItemComponent(item)"
-          v-for="(item, index) in navMenuBottom"
-          :key="index"
-          :item="item"
-          size="sm"
-        />
+        <component :is="resolveNavItemComponent(item)" v-for="(item, index) in navMenuBottom" :key="index" :item="item"
+          size="sm" />
       </SidebarGroup>
     </SidebarContent>
     <SidebarFooter>