Yusron alamsyah
99 lines
2.7 KiB
Vue
99 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { Icon } from "@iconify/vue";
|
|
|
|
import type { RolePage } from '~/types/setting/menu';
|
|
|
|
const props = defineProps<{
|
|
page: RolePage;
|
|
level: number;
|
|
}>();
|
|
|
|
const emit = defineEmits(['detail', 'edit', 'delete']);
|
|
|
|
const handleDetail = (page: RolePage) => emit('detail', page);
|
|
const handleEdit = (page: RolePage) => emit('edit', page);
|
|
const handleDelete = (page: RolePage) => emit('delete', page);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:style="{ marginLeft: (level > 0 ? 40 : 0) + 'px' }"
|
|
:class="{ 'is-child': level > 0 }"
|
|
class="page-row-container"
|
|
>
|
|
<v-card class="mb-3 page-card" elevation="2" @click="handleDetail(page)">
|
|
<v-card-text class="pa-5">
|
|
<div class="d-flex align-center">
|
|
<v-tooltip location="bottom" :text="page.active ? 'Aktif' : 'Tidak Aktif'">
|
|
<template #activator="{ props: activatorProps }">
|
|
<v-avatar v-bind="activatorProps" :color="page.active ? 'primary' : 'muted'" size="40" class="me-3">
|
|
<Icon :icon="'solar:' + page.icon" width="24" />
|
|
</v-avatar>
|
|
</template>
|
|
</v-tooltip>
|
|
<div class="flex-grow-1">
|
|
<div class="d-flex align-center">
|
|
<h6 class="text-subtitle-1 font-weight-semibold">{{ page.name }}
|
|
<!-- <v-chip size="small" :color="page.active ? 'success' : 'default'" class="ml-2">
|
|
{{ page.active ? 'Aktif' : 'Tidak Aktif' }}
|
|
</v-chip> -->
|
|
</h6>
|
|
</div>
|
|
<p class="text-muted mb-0">{{ page.url }}</p>
|
|
</div>
|
|
<v-btn icon variant="text" class="ml-2" @click.stop="handleEdit(page)">
|
|
<v-icon>mdi-pencil</v-icon>
|
|
</v-btn>
|
|
<v-btn icon variant="text" class="ml-2" @click.stop="handleDelete(page)">
|
|
<v-icon>mdi-delete</v-icon>
|
|
</v-btn>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
<div v-if="page.children && page.children.length > 0" class="children-container">
|
|
<PageRow
|
|
v-for="child in page.children"
|
|
:key="child.id"
|
|
:page="child"
|
|
:level="level + 1"
|
|
@detail="handleDetail"
|
|
@edit="handleEdit"
|
|
@delete="handleDelete"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page-row-container {
|
|
position: relative;
|
|
}
|
|
.page-card {
|
|
cursor: pointer;
|
|
}
|
|
.children-container {
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.children-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -12px;
|
|
bottom: 0;
|
|
left: 20px;
|
|
width: 3px;
|
|
background-color: #e0e0e0;
|
|
}
|
|
|
|
.children-container > .page-row-container::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 28px;
|
|
left: -20px;
|
|
width: 20px;
|
|
height: 3px;
|
|
background-color: #e0e0e0;
|
|
}
|
|
</style>
|