effendy/module-farmasi
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add permission role

Browse Source
This commit is contained in:
Yusron alamsyah
2026-04-10 14:40:11 +07:00
parent 4325bae76f
commit 734a78bd37
19 changed files with 1067 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/apps/setting/pages/index.vue
+30 -2
View File
@@ -1,9 +1,10 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ref, onMounted, watch } from 'vue';
import api from '@/utils/api';
import PageRow from '@/components/apps/setting/pages/PageRow.vue';
import AddPageModal from '@/components/apps/setting/pages/AddPageModal.vue';
import DialogConfrim from '~/components/shared/DialogConfrim.vue';
import LoadingState from '~/components/shared/LoadingState.vue';
import type { RolePage } from '~/types/setting/menu';
import { useSnackbarStore } from '~/store/snackbar';
@@ -20,11 +21,22 @@ const isDeleting = ref(false);
const deleteTargetId = ref<number | null>(null);
const deleteTargetName = ref<string>('');
const activeFilter = ref<'Aktif' | boolean>(true);
const activeFilterItems: Array<{ title: string; value: '' | boolean }> = [
{ title: 'Semua', value: '' },
{ title: 'Aktif', value: true },
{ title: 'Tidak Aktif', value: false },
];
const fetchPages = async () => {
loading.value = true;
try {
const response = await api.get('/api/v1/roles/pages/tree');
const response = await api.get('/api/v1/roles/pages/tree', {
params: {
active: activeFilter.value,
},
});
pages.value = response.data?.data || [];
} catch (error) {
snackbarStore.showSnackbar('Gagal memuat data menu', 'error');
@@ -33,6 +45,10 @@ const fetchPages = async () => {
}
};
watch(activeFilter, () => {
fetchPages();
});
const handlePageSaved = async () => {
await fetchPages();
};
@@ -102,6 +118,18 @@ definePageMeta({
<h4 class="text-h4">Menu</h4>
</div>
<v-spacer></v-spacer>
<v-select
v-model="activeFilter"
:items="activeFilterItems"
item-title="title"
item-value="value"
variant="outlined"
density="compact"
hide-details
class="me-3"
style="max-width: 200px"
placeholder="Filter status"
/>
<v-btn color="primary" flat @click="openCreateModal">
<v-icon class="mr-2">mdi-plus</v-icon>
Tambah Menu
pages/apps/setting/permission/[roleId].vue
+132
View File
@@ -0,0 +1,132 @@
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import api from '@/utils/api';
import LoadingState from '~/components/shared/LoadingState.vue';
import PermissionRow from '~/components/apps/setting/permission/PermissionRow.vue';
import { useSnackbarStore } from '~/store/snackbar';
import type { RoleAccessItem, RoleAccessPermission } from '~/types/setting/rolePermission';
const route = useRoute();
const router = useRouter();
const snackbarStore = useSnackbarStore();
const access = ref<RoleAccessItem[]>([]);
const roleId = computed(() => {
const roleId = route.params.roleId;
return roleId
});
const roleName = ref<string>('');
const loading = ref(false);
type ApiRoleAccessPermission = Partial<RoleAccessPermission> & { id?: number | null };
const normalizePermission = (permission?: ApiRoleAccessPermission): RoleAccessPermission => {
return {
id: permission?.id ?? null,
create: Boolean(permission?.create),
read: Boolean(permission?.read),
update: Boolean(permission?.update),
delete: Boolean(permission?.delete),
disable: Boolean(permission?.disable),
};
};
const indexRoleItemsById = (items: any[], map = new Map<number, any>()) => {
for (const item of items ?? []) {
if (typeof item?.id === 'number') map.set(item.id, item);
if (Array.isArray(item?.children) && item.children.length) indexRoleItemsById(item.children, map);
}
return map;
};
const mergeRolePermissionsIntoAll = (allItems: any[], roleMap: Map<number, any>): RoleAccessItem[] => {
return (allItems ?? []).map((allItem: any) => {
const roleItem = roleMap.get(allItem?.id);
const children = Array.isArray(allItem?.children)
? mergeRolePermissionsIntoAll(allItem.children, roleMap)
: undefined;
return {
...allItem,
permission: normalizePermission(roleItem?.permission),
...(children ? { children } : {}),
} as RoleAccessItem;
});
};
const fetchRolePermissions = async () => {
if (!roleId.value) return;
loading.value = true;
try {
const [roleResponse, mergedResponse] = await Promise.all([
api.get<any>(`/api/v1/roles/master/${roleId.value}`),
api.get<any>(`/api/v1/roles/permissions/rolemaster/${roleId.value}`),
]);
roleName.value = roleResponse.data?.data?.name ?? '';
const payload = mergedResponse.data?.data?.[0];
const dataRole = payload?.dataRole ?? [];
const dataAll = payload?.dataAll ?? [];
const roleMap = indexRoleItemsById(dataRole);
access.value = mergeRolePermissionsIntoAll(dataAll, roleMap);
} catch (error: any) {
const message = error?.response?.data?.message || error?.message || 'Gagal memuat data permission role';
snackbarStore.showSnackbar(message, 'error');
} finally {
loading.value = false;
}
};
onMounted(() => {
fetchRolePermissions();
});
definePageMeta({
middleware: 'auth',
});
</script>
<template>
<v-card elevation="0" class="mb-5">
<v-card-title class="pa-4">
<div class="d-flex align-center">
<v-btn icon size="small" variant="text" class="me-2" @click="router.push('/apps/setting/permission')">
<v-icon>mdi-arrow-left</v-icon>
</v-btn>
<div>
<h4 class="text-h4">Role : {{ roleName }}</h4>
</div>
</div>
</v-card-title>
</v-card>
<LoadingState :loading="loading" :empty="access.length === 0 && !loading" loading-text="Memuat permission..." empty-text="Data Kosong">
<v-card elevation="2">
<v-card-text class="pa-5">
<div class="d-flex align-center py-3 px-5 header-row">
<div class="flex-grow-1 text-subtitle-2 font-weight-semibold">MODUL &amp; FITUR</div>
<div class="perm-header">LIHAT</div>
<div class="perm-header">TAMBAH</div>
<div class="perm-header">UBAH</div>
<div class="perm-header">HAPUS</div>
</div>
<v-divider />
<PermissionRow v-for="item in access" :key="item.id" :item="item" :level="0" />
</v-card-text>
</v-card>
</LoadingState>
</template>
<style scoped>
.perm-header {
width: 84px;
text-align: center;
font-weight: 600;
}
</style>
pages/apps/setting/permission/index.vue
+149
View File
@@ -0,0 +1,149 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import api from '@/utils/api';
import RoleList from '@/components/apps/setting/permission/RoleList.vue';
import RoleModal from '@/components/apps/setting/permission/RoleModal.vue';
import DialogConfrim from '~/components/shared/DialogConfrim.vue';
import LoadingState from '~/components/shared/LoadingState.vue';
import type { RoleMaster, RoleMasterListResponse } from '~/types/setting/roleMaster';
import { useSnackbarStore } from '~/store/snackbar';
const roles = ref<RoleMaster[]>([]);
const loading = ref(false);
const isModalOpen = ref(false);
const modalMode = ref<'create' | 'detail' | 'edit'>('create');
const selectedPageId = ref<number | null>(null);
const snackbarStore = useSnackbarStore();
const isDeleteDialogOpen = ref(false);
const isDeleting = ref(false);
const deleteTargetId = ref<number | null>(null);
const deleteTargetName = ref<string>('');
const fetchRoles = async () => {
loading.value = true;
try {
const response = await api.get<RoleMasterListResponse>('/api/v1/roles/master');
roles.value = response.data?.data ?? [];
} catch (error) {
snackbarStore.showSnackbar('Gagal memuat data roles', 'error');
} finally {
loading.value = false;
}
};
const handlePageSaved = async () => {
await fetchRoles();
};
const openCreateModal = () => {
modalMode.value = 'create';
selectedPageId.value = null;
isModalOpen.value = true;
};
const openDetailModal = (page: RoleMaster) => {
modalMode.value = 'detail';
selectedPageId.value = page.id;
isModalOpen.value = true;
};
const openEditRoleModal = (page: RoleMaster) => {
modalMode.value = 'edit';
selectedPageId.value = page.id;
isModalOpen.value = true;
};
const openAssignPermission = (page: RoleMaster) => {
navigateTo(`/apps/setting/permission/${page.id}`);
};
const openDeleteDialog = (page: RoleMaster) => {
deleteTargetId.value = page.id;
deleteTargetName.value = page.name;
isDeleteDialogOpen.value = true;
};
const handleCancelDelete = () => {
deleteTargetId.value = null;
deleteTargetName.value = '';
};
const handleConfirmDelete = async () => {
if (!deleteTargetId.value) return;
if (isDeleting.value) return;
isDeleting.value = true;
try {
await api.delete(`/api/v1/roles/master/${deleteTargetId.value}`);
snackbarStore.showSnackbar('Role berhasil dihapus', 'success');
isDeleteDialogOpen.value = false;
await fetchRoles();
} catch (error: any) {
const message = error?.response?.data?.message || error?.message || 'Gagal menghapus role';
snackbarStore.showSnackbar(message, 'error');
} finally {
isDeleting.value = false;
}
};
onMounted(() => {
fetchRoles();
});
definePageMeta({
middleware: 'auth',
});
</script>
<template>
<v-card elevation="0" class="mb-5">
<v-card-title class="pa-4">
<div class="d-flex align-center">
<div>
<h4 class="text-h4">Role Permission</h4>
</div>
<v-spacer></v-spacer>
<v-btn color="primary" flat @click="openCreateModal">
<v-icon class="mr-2">mdi-plus</v-icon>
Tambah Role
</v-btn>
</div>
</v-card-title>
</v-card>
<LoadingState :loading="loading" :empty="roles.length === 0 && !loading" loading-text="Memuat data roles..."
empty-text="Data Kosong">
<div>
<RoleList
v-for="role in roles"
:key="role.id"
:role="role"
@detail="openDetailModal"
@edit-role="openEditRoleModal"
@delete-role="openDeleteDialog"
@assign-permission="openAssignPermission"
/>
</div>
</LoadingState>
<DialogConfrim
v-model="isDeleteDialogOpen"
title="Hapus role"
:message="`Apakah anda yakin menghapus role ${deleteTargetName} ?`"
:loading="isDeleting"
:close-on-confirm="false"
@confirm="handleConfirmDelete"
@cancel="handleCancelDelete"
/>
<RoleModal
v-model="isModalOpen"
:mode="modalMode"
:role-id="selectedPageId"
@saved="handlePageSaved"
/>
</template>