43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<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[]
|
|
pickMode: 'single' | 'multi'
|
|
}>()
|
|
|
|
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 Pilihan Ruang Tindakan
|
|
</div>
|
|
<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>
|