simrsx-fe/app/components/content/encounter/process.vue

<script setup lang="ts">
import { computed } from 'vue'
///// 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'

// App libs
import { getServicePosition } from '~/lib/roles' // previously getPositionAs

// App Models
import { genEncounter, type Encounter } 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"

// 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()

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<Encounter>(genEncounter())
const isShowPatient = computed(() => data.value && data.value?.patient?.person)

const { setOpen } = useSidebar()
setOpen(false)

if (activePosition.value === 'none') { // if user position is none, redirect to home page
  router.push('/')
}

// Dummy rows for ProtocolList (matches keys expected by list-cfg.protocol)
const protocolRows = [
  {
    number: '1',
    tanggal: new Date().toISOString().substring(0, 10),
    siklus: 'I',
    periode: 'Siklus I',
    kehadiran: 'Hadir',
    action: '',
  },
  {
    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="bg-white dark:bg-slate-800 p-4 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>
    <SubMenu :data="menus" :initial-active-menu="activeMenu" @change-menu="activeMenu = $event" />
  </div>
</template>