feat/procedure-room-order: adjust procedure-room-order

app/components/app/procedure-room-order/list.cfg.ts

@@ -2,7 +2,7 @@ import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 import type { ProcedureRoomOrder } from '~/models/procedure-room-order'
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dsd.vue'))
 
 export const config: Config = {
   cols: [{}, {}, {}, {}, {}, { width: 50 }],
@@ -16,7 +16,7 @@ export const config: Config = {
     { label: '' },
   ]],
 
-  keys: ['date', 'number', 'room', 'status', 'resume', 'action'],
+  keys: ['date', 'number', 'room', 'status_code', 'resume', 'action'],
 
   delKeyNames: [
     { key: 'createdAt', label: 'Tgl. Order' },
@@ -35,7 +35,14 @@ export const config: Config = {
     },
     room: (rec: any) => {
       const recX = rec as ProcedureRoomOrder
-      return recX.procedureRoom?.infra?.name || '--belum terdata0--'
+      let result = ''
+      if (recX.items && recX.items.length > 0) {
+        recX.items.forEach((item, idx) => {
+          result += item.infra?.name ? `<div>${item.infra.name}</div>` : ''
+        })
+      }
+      // recX.ite
+      return ''
     },
   },
 

app/components/app/procedure-room-order/list.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 // Components
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
 
 // Types
@@ -7,16 +8,11 @@ import type { PaginationMeta } from '~/components/pub/my-ui/pagination/paginatio
 
 // Configs
 import { config } from './list.cfg'
-import type { Config } from '~/components/pub/my-ui/data-table'
 
-interface Props {
+defineProps<{
   data: any[]
   paginationMeta: PaginationMeta
-  tableConfig?: Config
-}
-const props = withDefaults(defineProps<Props>(), {
-  tableConfig: () => config,
-})
+}>()
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -28,12 +24,11 @@ function handlePageChange(page: number) {
 </script>
 
 <template>
-  <div class="space-y-4">
-    <PubMyUiDataTable
-      v-bind="props.tableConfig"
-      :rows="data"
-      :skeleton-size="paginationMeta?.pageSize"
-    />
-    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-  </div>
+  <DataTable
+    v-bind="config"
+    :rows="data"
+    :skeleton-size="paginationMeta?.pageSize"
+    class="mb-4 border"
+  />
+  <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 </template>

app/components/app/procedure-room/multi-opt-picker.vue

@@ -1,22 +1,41 @@
 <script setup lang="ts">
 import type { ProcedureRoom } from '~/models/procedure-room';
+import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
 
+const dataModel = defineModel({ type: Array as PropType<ProcedureRoomOrderItem[]>, required: true })
 defineProps<{
-  items: ProcedureRoom[]
+  data: ProcedureRoom[]
 }>()
 
-// const model = defineModel<ProcedureRoom[]>()
+const emit = defineEmits<{
+  pick: [item: ProcedureRoom]
+}>()
+
+function pick(item: ProcedureRoom) {
+  emit('pick', item)
+}
 </script>
 
 <template>
   <div class="mb-5">
     <div class="font-semibold text-sm 2xl:text-base mb-2">
-      Daftar Ruang Tindakan
+      Daftar Pilihan Ruang Tindakan
     </div>
-    <div class="grid grid-cols-3 2xl:grid-cols-4 gap-2 2xl:gap-2">
-      <div>
-        <Button v-for="item in items">{{ item.infra?.name }}</Button>
+    <div class="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2 2xl:gap-2">
+      <!-- <div v-for="item, idx in data" :key="idx" class="flex gap-2"> -->
+      <div v-if="data.length > 0" v-for="item, idx in data">
+        <Button
+          :variant="dataModel.some(e => e.procedureRoom.code === item.code) ? 'default' : 'outline'"
+          class="w-full"
+          type="button"
+          @click="pick(item)"
+        >
+          {{ item.infra?.name }}
+        </Button>
+      </div>
+      <div v-else  class="col-span-full text-center text-sm text-gray-500">
+        <div>Tidak ada data ruang tindakan.</div>
       </div>
     </div>
   </div>
-</template>
+</template>

app/components/app/procedure-room/single-opt-picker.vue

@@ -1,9 +1,41 @@
+<script setup lang="ts">
+import type { ProcedureRoom } from '~/models/procedure-room';
+import type { ProcedureRoomOrderItem } from '~/models/procedure-room-order-item';
+
+const dataModel = defineModel({ type: Array as PropType<ProcedureRoomOrderItem[]>, required: true })
+defineProps<{
+  data: ProcedureRoom[]
+}>()
+
+const emit = defineEmits<{
+  pick: [item: ProcedureRoom]
+}>()
+
+function pick(item: ProcedureRoom) {
+  emit('pick', item)
+}
+</script>
+
 <template>
   <div class="mb-5">
     <div class="font-semibold text-sm 2xl:text-base mb-2">
-      Daftar Ruang Operasi
+      Daftar Pilihan Ruang Tindakan
     </div>
-    <div class="-mx-1 [&_button]:mx-1 ">
+    <div class="grid grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2 2xl:gap-2">
+      <!-- <div v-for="item, idx in data" :key="idx" class="flex gap-2"> -->
+      <div v-if="data.length > 0" v-for="item, idx in data">
+        <Button
+          :variant="dataModel.some(e => e.procedureRoom.code === item.code) ? 'default' : 'outline'"
+          class="w-full"
+          type="button"
+          @click="pick(item)"
+        >
+          {{ item.infra?.name }}
+        </Button>
+      </div>
+      <div v-else  class="col-span-full text-center text-sm text-gray-500">
+        <div>Tidak ada data ruang tindakan.</div>
+      </div>
     </div>
   </div>
-</template>
+</template>