Merge pull request #166 from dikstub-rssa/feat/encounter-adjustment-163

Feat: Encounter Adjustment

app/components/pub/my-ui/comp-menu/comp-menu.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { type TabItem } from '../comp-tab/type'
+
+const props = defineProps<{
+  initialActiveMenu: string
+  data: TabItem[]
+}>()
+
+const activeMenu = ref(props.initialActiveMenu)
+const emit = defineEmits<{
+  changeMenu: [value: string]
+}>()
+
+function changeMenu(value: string) {
+  activeMenu.value = value
+  emit('changeMenu', value)
+}
+</script>
+
+<template>
+  <div class="mt-4 flex gap-4">
+    <!-- Menu Sidebar -->
+    <div v-if="data.length > 0" class="w-72 flex-shrink-0 rounded-md border bg-white shadow-sm dark:bg-neutral-950">
+      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto p-2">
+        <button
+          v-for="menu in data"
+          :key="menu.value"
+          :data-active="activeMenu === menu.value"
+          class="w-full rounded-md px-4 py-3 text-left text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
+          @click="changeMenu(menu.value)"
+        >
+          {{ menu.label }}
+        </button>
+      </div>
+    </div>
+
+    <!-- Active Menu Content -->
+    <div v-if="data.find((m) => m.value === activeMenu)?.component" class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+      <component
+        :is="data.find((m) => m.value === activeMenu)?.component"
+        v-bind="data.find((m) => m.value === activeMenu)?.props"
+      />
+    </div>
+  </div>
+</template>

app/components/pub/my-ui/comp-tab/type.ts

@@ -3,5 +3,7 @@ export interface TabItem {
   label: string
   component?: any
   groups?: string[]
+  classCode?: string[]
+  subClassCode?: string[]
   props?: Record<string, any>
 }

app/components/pub/my-ui/content-switcher/content-switcher.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+const props = defineProps<{
+  height: 200
+  activeTab?: 1 | 2
+}>()
+
+const activeTab = ref(props.activeTab || 1)
+
+function handleClick(value: 1 | 2) {
+  activeTab.value = value
+}
+</script>
+
+<template>
+  <div class="content-switcher" :style="`height: ${height}px`">
+    <div :class="`${activeTab === 1 ? 'active' : 'inactive'}`">
+      <div class="content-wrapper">
+        <div>
+          <slot name="content1" />
+        </div>
+      </div>
+      <div class="content-nav">
+        <button @click="handleClick(1)">
+          <Icon name="i-lucide-chevron-right" />
+        </button>
+      </div>
+    </div>
+    <div :class="`${activeTab === 2 ? 'active' : 'inactive'}`">
+      <div class="content-nav">
+        <button @click="handleClick(2)">
+          <Icon name="i-lucide-chevron-left" />
+        </button>
+      </div>
+      <div class="content-wrapper">
+        <div>
+          <slot name="content2" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style>
+  .content-switcher {
+    @apply flex overflow-hidden gap-3
+  }
+  .content-switcher > * {
+    @apply border border-slate-300 rounded-md flex overflow-hidden
+  }
+
+  .content-wrapper {
+    @apply p-4 2xl:p-5 overflow-hidden
+  }
+  .inactive .content-wrapper {
+    @apply p-0 w-0
+  }
+
+  .content-nav {
+    @apply h-full flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
+  }
+
+  .content-nav button {
+    @apply pt-2 px-2 h-full w-full
+  }
+
+  /* .content-switcher .inactive > .content-wrapper {
+    @apply w-0 p-0 opacity-0 transition-all duration-500 ease-in-out
+  } */
+  .content-switcher .inactive {
+    @apply w-16 transition-all duration-500 ease-in-out
+  }
+  .content-switcher .inactive > .content-nav {
+    @apply w-full transition-all duration-100 ease-in-out
+  }
+
+  .content-switcher .active {
+    @apply grow transition-all duration-500 ease-in-out
+  }
+  .content-switcher .active > .content-nav {
+    @apply w-0 transition-all duration-100 ease-in-out
+  }
+  /* .content-switcher .active > .content-wrapper {
+    @apply w-full delay-1000 transition-all duration-1000 ease-in-out
+  } */
+
+</style>

app/components/pub/my-ui/data/types.ts

@@ -71,6 +71,7 @@ export interface KeyNames {
 
 export interface LinkItem {
   label: string
+  value?: string
   icon?: string
   href?: string // to cover the needs of stating full external origins full url
   action?: string // for local paths
@@ -84,6 +85,7 @@ export const ActionEvents = {
   showEdit: 'showEdit',
   showDetail: 'showDetail',
   showProcess: 'showProcess',
+  showCancel: 'showCancel',
   showVerify: 'showVerify',
   showValidate: 'showValidate',
   showPrint: 'showPrint',

app/components/pub/my-ui/menus/submenu.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type EncounterItem } from "../../../../handlers/encounter-process.handler";
+
+const props = defineProps<{
+  initialActiveMenu: string
+  data: EncounterItem[]
+}>()
+
+const activeMenu = ref(props.initialActiveMenu)
+const emit = defineEmits<{
+  changeMenu: [value: string]
+}>()
+
+function changeMenu(value: string) {
+  activeMenu.value = value
+  emit('changeMenu', value)
+}
+</script>
+
+<template>
+  <div class="mt-4 flex gap-4">
+    <!-- Menu Sidebar -->
+    <div v-if="data.length > 0" class="w-72 flex-shrink-0 rounded-md border bg-white shadow-sm dark:bg-neutral-950">
+      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto p-2">
+        <button v-for="menu in data" :key="menu.id" :data-active="activeMenu === menu.id"
+          class="w-full rounded-md px-4 py-3 text-left text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
+          @click="changeMenu(menu.id)">
+          {{ menu.title }}
+        </button>
+      </div>
+    </div>
+    <!-- Active Menu Content -->
+    <div v-if="data.find((m) => m.id === activeMenu)?.component"
+      class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+      <component :is="data.find((m) => m.id === activeMenu)?.component"
+        v-bind="data.find((m) => m.id === activeMenu)?.props" />
+    </div>
+  </div>
+</template>