Yusron alamsyah
80 lines
3.0 KiB
Vue
80 lines
3.0 KiB
Vue
<script setup lang="ts">
|
|
import type { RoleMaster } from '~/types/setting/roleMaster';
|
|
import { formatDateTime } from '~/utils/datetime';
|
|
|
|
defineProps<{
|
|
role: RoleMaster;
|
|
}>();
|
|
|
|
const emit = defineEmits(['detail', 'edit-role', 'delete-role', 'assign-permission']);
|
|
|
|
const handleDetail = (role: RoleMaster) => emit('detail', role);
|
|
const handleEditRole = (role: RoleMaster) => emit('edit-role', role);
|
|
const handleDeleteRole = (role: RoleMaster) => emit('delete-role', role);
|
|
const handleAssignPermission = (role: RoleMaster) => emit('assign-permission', role);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page-row-container">
|
|
<v-card class="mb-3 page-card" elevation="2" @click="handleDetail(role)">
|
|
<v-card-text class="pa-5">
|
|
<div class="d-flex align-center">
|
|
<v-tooltip location="bottom" :text="role.active ? 'Aktif' : 'Tidak Aktif'">
|
|
<template #activator="{ props: activatorProps }">
|
|
<v-avatar v-bind="activatorProps" :color="role.active ? 'primary' : 'muted'" size="40" class="me-3">
|
|
<v-icon>mdi-shield-account</v-icon>
|
|
</v-avatar>
|
|
</template>
|
|
</v-tooltip>
|
|
<div class="flex-grow-1">
|
|
<div class="d-flex align-center gap-2">
|
|
<h6 class="text-subtitle-1 font-weight-semibold mb-0">{{ role.name }}</h6>
|
|
</div>
|
|
<div class="d-flex align-center gap-3 mt-2">
|
|
<p class="text-muted mb-0">{{ role.slug }}</p>
|
|
<v-divider vertical></v-divider>
|
|
<div class="d-flex align-center gap-1">
|
|
<v-icon size="16" color="primary">mdi-calendar</v-icon>
|
|
<span class="ml-2 text-caption text-medium">{{ formatDateTime(role.created_at) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<v-tooltip location="bottom" text="Assign permission">
|
|
<template #activator="{ props: activatorProps }">
|
|
<v-btn v-bind="activatorProps" icon variant="text" class="ml-2" @click.stop="handleAssignPermission(role)">
|
|
<v-icon>mdi-account-cog</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
</v-tooltip>
|
|
|
|
<v-tooltip location="bottom" text="Edit role">
|
|
<template #activator="{ props: activatorProps }">
|
|
<v-btn v-bind="activatorProps" icon variant="text" class="ml-2" @click.stop="handleEditRole(role)">
|
|
<v-icon>mdi-pencil</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
</v-tooltip>
|
|
|
|
<v-tooltip location="bottom" text="Hapus role">
|
|
<template #activator="{ props: activatorProps }">
|
|
<v-btn v-bind="activatorProps" icon variant="text" class="ml-2" @click.stop="handleDeleteRole(role)">
|
|
<v-icon>mdi-delete</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
</v-tooltip>
|
|
</div>
|
|
</v-card-text>
|
|
</v-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.page-row-container {
|
|
position: relative;
|
|
}
|
|
.page-card {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|