Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feat/rm-rajal-183

app/components/content/encounter/process.vue

@@ -1,15 +1,22 @@
 <script setup lang="ts">
-//
 import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
+///// Imports
+// Pubs components
+import ContentSwitcher from '~/components/pub/my-ui/content-switcher/content-switcher.vue'
+import { useSidebar } from '~/components/pub/ui/sidebar/utils'
+import SubMenu from '~/components/pub/my-ui/menus/submenu.vue'
+import ContentNavBa from '~/components/pub/my-ui/nav-content/ba.vue'
 
-import { getDetail } from '~/services/encounter.service'
+// App libs
+import { getServicePosition } from '~/lib/roles' // previously getPositionAs
 
-//
-import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
-import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+// App Models
+import { genEncounter, type Encounter } from '~/models/encounter'
 
-import { genEncounter } from '~/models/encounter'
+// Handlers
+import type { EncounterProps } from '~/handlers/encounter-init.handler'
+import { getEncounterData } from '~/handlers/encounter-process.handler'
+import { getMenuItems } from '~/handlers/encounter-init.handler'
 
 // PLASE ORDER BY TAB POSITION
 import Status from '~/components/content/encounter/status.vue'
@@ -27,40 +34,53 @@ import GeneralConsentList from '~/components/content/general-consent/entry.vue'
 import SummaryMedic from '~/components/content/summary-medic/entry.vue'
 import ResumeList from '~/components/content/resume/list.vue'
 import ControlLetterList from '~/components/content/control-letter/list.vue'
+// App Components
+import EncounterPatientInfo from '~/components/app/encounter/quick-info.vue'
+import EncounterHistoryButtonMenu from '~/components/app/encounter/quick-shortcut.vue'
 
+///// Declarations and Flows
+// Props
+const props = defineProps<{
+  classCode: EncounterProps['classCode']
+  subClassCode?: EncounterProps['subClassCode']
+}>()
+
+// Common preparations
 const route = useRoute()
 const router = useRouter()
 
-// activeTab selalu sinkron dengan query param
-const activeTab = computed({
-  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
-  set: (val: string) => {
-    router.replace({ path: route.path, query: { tab: val } })
+const { user, userActiveRole, getActiveRole } = useUserStore()
+const activeRole = getActiveRole()
+const activePosition = ref(getServicePosition(activeRole))
+const menus = ref([] as any)
+const activeMenu = computed({
+  get: () => (route.query?.menu && typeof route.query.menu === 'string' ? route.query.menu : 'status'),
+  set: (value: string) => {
+    router.replace({ path: route.path, query: { menu: value } })
   },
 })
 
 const id = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
-const data = ref(genEncounter())
+const data = ref<Encounter>(genEncounter())
+const isShowPatient = computed(() => data.value && data.value?.patient?.person)
 
-async function fetchDetail() {
-  const res = await getDetail(id, {
-    includes:
-      'patient,patient-person,patient-person-addresses,unit,Appointment_Doctor,Appointment_Doctor-employee,Appointment_Doctor-employee-person,EncounterDocuments',
-  })
-  if (res.body?.data) data.value = res.body?.data
+const { setOpen } = useSidebar()
+setOpen(false)
+
+if (activePosition.value === 'none') {
+  // if user position is none, redirect to home page
+  router.push('/')
 }
 
-onMounted(() => {
-  fetchDetail()
-})
-
-const tabs: TabItem[] = [
-  { value: 'status', label: 'Status Masuk/Keluar', component: Status, props: { encounter: data } },
+// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
+const protocolRows = [
   {
-    value: 'early-medical-assessment',
-    label: 'Pengkajian Awal Medis',
-    component: EarlyMedicalAssesmentList,
-    props: { encounter: data, type: 'early-medic', label: 'Pengkajian Awal Medis' },
+    number: '1',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'I',
+    periode: 'Siklus I',
+    kehadiran: 'Hadir',
+    action: '',
   },
   {
     value: 'rehab-medical-assessment',
@@ -97,20 +117,96 @@ const tabs: TabItem[] = [
     label: 'Upload Dokumen Pendukung',
     component: DocUploadList,
     props: { encounter: data },
+    number: '2',
+    tanggal: new Date().toISOString().substring(0, 10),
+    siklus: 'II',
+    periode: 'Siklus II',
+    kehadiran: 'Tidak Hadir',
+    action: '',
   },
 ]
+
+const paginationMeta = {
+  recordCount: protocolRows.length,
+  page: 1,
+  pageSize: 10,
+  totalPage: 1,
+  hasNext: false,
+  hasPrev: false,
+}
+
+// Reacrtivities
+watch(getActiveRole, () => {
+  activePosition.value = getServicePosition(userActiveRole)
+  initMenus()
+})
+
+onMounted(async () => {
+  await getData()
+  initMenus()
+})
+
+///// Functions
+function handleClick(type: string) {
+  if (type === 'draft') {
+    router.back()
+  }
+}
+
+function initMenus() {
+  menus.value = getMenuItems(
+    id,
+    props,
+    user,
+    {
+      encounter: data.value,
+    } as any,
+    {
+      protocolTheraphy: paginationMeta,
+      protocolChemotherapy: paginationMeta,
+      medicineProtocolChemotherapy: paginationMeta,
+    },
+  )
+}
+
+async function getData() {
+  data.value = await getEncounterData(id)
+}
 </script>
 
 <template>
   <div class="w-full">
-    <div class="mb-4">
-      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
+    <div class="bg-white p-4 dark:bg-slate-800 2xl:p-5">
+      <div class="mb-4 flex">
+        <div>
+          <ContentNavBa
+            label="Kembali"
+            @click="handleClick"
+          />
+        </div>
+        <!-- <div class="ms-auto pe-3 pt-1 text-end text-xl 2xl:text-2xl font-semibold">
+            Pasien: {{ data.patient.person.name }} --- No. RM: {{ data.patient.number }}
+        </div> -->
+      </div>
+      <ContentSwitcher
+        :active="1"
+        :height="150"
+      >
+        <template v-slot:content1>
+          <EncounterPatientInfo
+            v-if="isShowPatient"
+            :data="data"
+          />
+        </template>
+        <template v-slot:content2>
+          <EncounterHistoryButtonMenu v-if="isShowPatient" />
+        </template>
+      </ContentSwitcher>
     </div>
-    <AppEncounterQuickInfo :data="data" />
-    <CompTab
-      :data="tabs"
-      :initial-active-tab="activeTab"
-      @change-tab="activeTab = $event"
+    <SubMenu
+      :data="menus"
+      :initial-active-menu="activeMenu"
+      @change-menu="activeMenu = $event"
     />
   </div>
 </template>