101 lines
3.3 KiB
Vue
101 lines
3.3 KiB
Vue
<script setup lang="ts">
|
|
import { ActionEvents, type LinkItem, type ListItemDto } from '~/components/pub/my-ui/data/types';
|
|
|
|
|
|
const props = defineProps<{
|
|
rec: ListItemDto
|
|
}>()
|
|
|
|
const { getActiveRole } = useUserStore()
|
|
const recId = inject<Ref<number>>('rec_id')!
|
|
const recAction = inject<Ref<string>>('rec_action')!
|
|
const recItem = inject<Ref<any>>('rec_item')!
|
|
const timestamp = inject<Ref<any>>('timestamp')!
|
|
|
|
const activeKey = ref<string | null>(null)
|
|
const linkItems = computed(() => {
|
|
const role = getActiveRole()
|
|
const isAdmin = role == "system"
|
|
const isDoctorRole = role == "emp|doc"
|
|
const isPhysioRole = role == "emp|doc"
|
|
const isUnverified = true // recItem.id === 0
|
|
const isUnvalidated = true // recItem.id
|
|
|
|
const items: LinkItem[] = [
|
|
{ label: 'Print', onClick: print, icon: 'i-lucide-printer', }
|
|
]
|
|
if (isDoctorRole || isAdmin) {
|
|
items.push({ label: 'Edit', onClick: edit, icon: 'i-lucide-pencil', })
|
|
|
|
if (isUnverified) {
|
|
items.push({ label: 'Verify', onClick: verify, icon: 'i-lucide-check', })
|
|
}
|
|
if (!isUnverified && isUnvalidated) { // verified & unvalidated
|
|
items.push({ label: 'Validate', onClick: validate, icon: 'i-lucide-check-check', })
|
|
}
|
|
|
|
items.push({ label: 'Delete', onClick: del, icon: 'i-lucide-trash', })
|
|
}
|
|
|
|
return items
|
|
})
|
|
|
|
function edit() {
|
|
recId.value = props.rec.id || 0
|
|
recAction.value = ActionEvents.showEdit
|
|
recItem.value = props.rec
|
|
timestamp.value = new Date().getTime()
|
|
}
|
|
|
|
function verify() {
|
|
recId.value = props.rec.id || 0
|
|
recAction.value = ActionEvents.showVerify
|
|
recItem.value = props.rec
|
|
timestamp.value = new Date().getTime()
|
|
}
|
|
function validate() {
|
|
recId.value = props.rec.id || 0
|
|
recAction.value = ActionEvents.showValidate
|
|
recItem.value = props.rec
|
|
timestamp.value = new Date().getTime()
|
|
}
|
|
|
|
function print() {
|
|
recId.value = props.rec.id || 0
|
|
recAction.value = ActionEvents.showPrint
|
|
recItem.value = props.rec
|
|
timestamp.value = new Date().getTime()
|
|
}
|
|
function del() {
|
|
recId.value = props.rec.id || 0
|
|
recAction.value = ActionEvents.showConfirmDelete
|
|
recItem.value = props.rec
|
|
timestamp.value = new Date().getTime()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger as-child>
|
|
<SidebarMenuButton size="lg"
|
|
class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800">
|
|
<Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
|
|
</SidebarMenuButton>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
|
|
align="end">
|
|
<DropdownMenuGroup>
|
|
<DropdownMenuItem v-for="item in linkItems" :key="item.label"
|
|
class="hover:bg-gray-100 dark:hover:bg-slate-700" @click="item.onClick" @mouseenter="activeKey = item.label"
|
|
@mouseleave="activeKey = null">
|
|
<Icon :name="item.icon ?? ''" />
|
|
<span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
|
|
</DropdownMenuItem>
|
|
</DropdownMenuGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</template>
|