+
+
@@ -88,7 +108,7 @@ const toggleMiniSidebar = () => {
(null)
- const accessToken = ref(null)
- const isLoading = ref(false)
- const error = ref(null)
- const isAuthenticated = computed(() => !!user.value)
+ // Use useState inside the composable function (not at module level)
+ // This ensures all components and plugins share the same reactive state
+ const _user = useState('auth:user', () => null)
+ const _accessToken = useState('auth:accessToken', () => null)
+ const _isLoading = useState('auth:isLoading', () => false)
+ const _error = useState('auth:error', () => null)
+
+ const isAuthenticated = computed(() => !!_user.value)
const clearError = () => {
- error.value = null
+ _error.value = null
}
const checkAuth = async (): Promise => {
try {
- isLoading.value = true
+ _isLoading.value = true
clearError()
-
+
// The session API returns SessionResponse, or throws 401 if not authenticated
// $fetch automatically sends cookies for same-origin requests
const response = await $fetch('/api/auth/session', {
@@ -25,8 +28,9 @@ export const useAuth = () => {
// Handle response structure - session API returns { success, user, ... }
if (response && response.user) {
- user.value = response.user
- accessToken.value = response.accessToken || null
+ _user.value = response.user
+ _accessToken.value = response.accessToken || null
+
// Store tokens to localStorage for API interceptor (only on client-side)
// Only update if localStorage is empty to avoid overwriting refreshed tokens
@@ -47,19 +51,19 @@ export const useAuth = () => {
}
// If response exists but no user, clear and return null
- user.value = null
- accessToken.value = null
+ _user.value = null
+ _accessToken.value = null
return null
} catch (fetchError: any) {
- console.error('Session check failed:', fetchError)
+ console.error('â checkAuth: Session check failed:', fetchError)
// 401 errors are expected when not authenticated
if (fetchError.statusCode === 401 || fetchError.status === 401) {
- error.value = null // Don't show error for expected unauthenticated state
+ _error.value = null // Don't show error for expected unauthenticated state
} else {
- error.value = 'Failed to check authentication status'
+ _error.value = 'Failed to check authentication status'
}
- user.value = null
- accessToken.value = null
+ _user.value = null
+ _accessToken.value = null
// Clear tokens from localStorage on auth failure
if (process.client) {
@@ -70,7 +74,7 @@ export const useAuth = () => {
return null
} finally {
- isLoading.value = false
+ _isLoading.value = false
}
}
@@ -82,33 +86,31 @@ export const useAuth = () => {
})
if (response?.success && response?.data?.authUrl) {
- console.log('đ Redirecting to Keycloak login...')
window.location.href = response.data.authUrl
} else {
const errorMsg = response?.error || 'Failed to get authorization URL'
- error.value = errorMsg
+ _error.value = errorMsg
throw new Error(errorMsg)
}
} catch (loginError: any) {
console.error('â Login error:', loginError)
- error.value = loginError.message || 'Login failed'
+ _error.value = loginError.message || 'Login failed'
throw loginError
}
}
const logout = async (): Promise => {
try {
- isLoading.value = true
+ _isLoading.value = true
clearError()
- console.log('đĒ Starting logout process...')
const response = await $fetch('/api/auth/logout', {
method: 'POST'
})
// Clear user immediately regardless of response
- user.value = null
- accessToken.value = null
+ _user.value = null
+ _accessToken.value = null
if (response?.success && response?.logoutUrl) {
//remove all tokens from localstorage
@@ -116,7 +118,6 @@ export const useAuth = () => {
localStorage.removeItem('accessToken');
localStorage.removeItem('refreshToken');
- console.log('đ Redirecting to Keycloak logout...')
// Keycloak will redirect back to the base URL after logout
// We can add a query param to detect the logout and show a message
// window.location.href = response.logoutUrl
@@ -124,17 +125,17 @@ export const useAuth = () => {
} else {
const warningMsg = response?.error || response?.message || 'No logout URL received'
console.warn('â ī¸', warningMsg)
- error.value = warningMsg
+ _error.value = warningMsg
await navigateTo('/auth/login')
}
} catch (logoutError: any) {
console.error('â Logout error:', logoutError)
- error.value = logoutError.message || 'Logout failed'
- user.value = null
- accessToken.value = null
+ _error.value = logoutError.message || 'Logout failed'
+ _user.value = null
+ _accessToken.value = null
await navigateTo('/auth/login')
} finally {
- isLoading.value = false
+ _isLoading.value = false
}
}
@@ -145,12 +146,12 @@ export const useAuth = () => {
}
return {
- // State
- user: readonly(user),
- accessToken: readonly(accessToken),
+ // State - expose the global state
+ user: _user,
+ accessToken: _accessToken,
isAuthenticated,
- isLoading: readonly(isLoading),
- error: readonly(error),
+ isLoading: _isLoading,
+ error: _error,
// Actions
checkAuth,
diff --git a/composables/useUserMenu.ts b/composables/useUserMenu.ts
new file mode 100644
index 0000000..338cec8
--- /dev/null
+++ b/composables/useUserMenu.ts
@@ -0,0 +1,74 @@
+import { useUserMenuStore } from '~/store/userMenu'
+
+export const useUserMenu = () => {
+ const menuStore = useUserMenuStore()
+ const { user } = useAuth()
+
+ const initializeMenu = async () => {
+ // Get token from localStorage (client-side only)
+ if (!process.client) {
+ return
+ }
+
+ // Skip if menu already fetched (even if empty/no access)
+ if (menuStore.menuFetched) {
+ console.log('âšī¸ Menu already fetched, skipping re-fetch')
+ return
+ }
+
+ // Check if user ID is available
+ if (!user.value?.id) {
+ console.warn('â ī¸ Cannot fetch menu: User ID not available')
+ return
+ }
+
+ const token = localStorage.getItem('idToken')
+ if (!token) {
+ console.warn('â ī¸ Cannot fetch menu: No token available in localStorage')
+ return
+ }
+
+ // Use actual user ID from auth
+ const userIdToUse = user.value.id
+
+ try {
+ await menuStore.fetchUserMenu(userIdToUse, token)
+ } catch (error) {
+ console.error('â Error initializing menu:', error)
+ }
+ }
+
+ const refreshMenu = async () => {
+ if (!user.value?.id || !process.client) return
+
+ const token = localStorage.getItem('idToken')
+ if (!token) return
+
+ await menuStore.fetchUserMenu(user.value.id, token)
+ }
+
+ // Watch for user changes and auto-initialize menu
+ if (process.client) {
+ // Watch for user.id to become available
+ watchEffect(async () => {
+ const userId = user.value?.id
+ const hasToken = !!localStorage.getItem('idToken')
+
+ // Initialize if user ID and token exist, and menu not fetched yet
+ if (userId && hasToken && !menuStore.menuFetched && !menuStore.isLoading) {
+ await initializeMenu()
+ }
+ })
+ }
+
+ return {
+ menuStore,
+ menuItems: computed(() => menuStore.sidebarMenuItems),
+ hasMenu: computed(() => menuStore.hasMenu),
+ isLoading: computed(() => menuStore.isLoading),
+ error: computed(() => menuStore.error),
+ noAccess: computed(() => menuStore.noAccess),
+ initializeMenu,
+ refreshMenu
+ }
+}
diff --git a/data/mock/users.json b/data/mock/users.json
index 980c994..eaf293c 100644
--- a/data/mock/users.json
+++ b/data/mock/users.json
@@ -1,27 +1,27 @@
[
{
"id": "a2507dbf-5dfc-4f38-bdd5-bb227eb20015",
- "namaUser": "Akbar Attallah",
+ "name": "Akbar Attallah",
"email": "akbarantrean@gmail.com",
- "hakAkses": [
+ "hak_akses": [
"superadmin"
],
"status": "aktif"
},
{
"id": "31e5227f-78d2-4b4d-b255-afcc5ece6b27",
- "namaUser": "renaldy",
+ "name": "renaldy",
"email": "renaldy.brada@gmail.com",
- "hakAkses": [
+ "hak_akses": [
"Writer"
],
"status": "aktif"
},
{
"id": "d6621539-9e8e-4937-ba9a-fca68f625e39",
- "namaUser": "yusron",
+ "name": "yusron",
"email": "yusron.sandbox@gmai.com",
- "hakAkses": [
+ "hak_akses": [
"superadmin",
"Writer"
],
diff --git a/middleware/auth.ts b/middleware/auth.ts
index ea428c7..ed8b487 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -1,123 +1,213 @@
import { defineNuxtRouteMiddleware, navigateTo } from '#app';
import type { RouteLocationNormalized } from 'vue-router';
import { useAuth } from '~/composables/useAuth';
+import { useUserMenuStore } from '~/store/userMenu';
export default defineNuxtRouteMiddleware(async (to: RouteLocationNormalized) => {
console.log('đĄī¸ Auth middleware triggered for:', to.path);
- // Allow the login page to handle its own checks without redirection loops
- if (to.path === '/auth/login') {
- console.log('âī¸ Allowing access to Login page');
+ // Allow the login page and access denied page without checks
+ if (to.path === '/auth/login' || to.path === '/auth/access-denied') {
+ console.log('âī¸ Allowing access to auth page:', to.path);
return;
}
- // Check for authentication signal from successful login redirect FIRST
- // This must be checked before the root redirect logic
- const isAuthRedirect: boolean = to.query.authenticated === 'true';
-
- if (isAuthRedirect) {
- console.log('đ Authentication redirect detected, allowing access to verify session');
- // Don't redirect, let it proceed to auth verification below
- } else {
- // Check for bypass flag (from keyboard shortcut)
- if (process.client) {
- const bypassFlag = sessionStorage.getItem('bypassRootRedirect');
- if (bypassFlag === 'true' && to.path === '/') {
- console.log('đ Bypass flag detected - allowing root access');
- // Clear the flag immediately to prevent future bypasses
- sessionStorage.removeItem('bypassRootRedirect');
- return; // Allow access without any redirect
- }
- }
-
- // Redirect root path to Login page (only if not authenticated redirect)
- if (to.path === '/') {
- console.log('đ Redirecting from root to Login page');
- return navigateTo('/auth/login', { replace: true });
- }
- }
-
- // On server-side during development, skip intensive checks
- // The cookie check will happen on client-side
- if (process.server && process.env.NODE_ENV === 'development') {
- if (isAuthRedirect) {
- console.log('âī¸ Server-side: Allowing authenticated redirect to pass through (dev mode)');
- return; // Allow server-side render to proceed, client will verify
- }
- console.log('âī¸ Skipping intensive check on server-side during development');
- useAuth();
+ // Skip middleware on server-side - auth plugin handles client-side initialization
+ if (process.server) {
+ console.log('âī¸ Server-side: Skipping auth check (plugin will handle on client)');
return;
}
- // Process the authentication redirect
+ // Check for authentication signal from successful login redirect
+ const isAuthRedirect = to.query.authenticated === 'true';
+
+
+ const { user, checkAuth } = useAuth();
+
+ // Special handling for authentication redirect from Keycloak callback
if (isAuthRedirect) {
- console.log('âŗ Client-side is processing a new login session, checking cookie...');
+ console.log('đ Authentication redirect detected');
- // Give the browser a moment to process the cookie from the redirect
- if (process.client) {
- await new Promise(resolve => setTimeout(resolve, 50));
+ // Give browser a moment to process the cookie from redirect
+ await new Promise(resolve => setTimeout(resolve, 100));
+
+ // Verify session was created successfully
+ await checkAuth();
+
+ if (user.value) {
+ console.log('â
Session verified after redirect:', user.value.name);
+ // Clean up query parameter
+ return navigateTo({ path: to.path, query: {} }, { replace: true });
+ } else {
+ console.error('â Session verification failed after redirect');
+ return navigateTo('/auth/login?error=session_failed');
}
+ }
+
+ // For all other routes, check if user is authenticated
+ // User state should already be populated by auth plugin
+ // Only call checkAuth if user state is not available (edge case)
+ if (!user.value) {
+ console.log('â ī¸ User not in state, verifying session...');
+ await checkAuth();
+ }
+
+ if (user.value) {
+ console.log('â
User authenticated:', user.value.name);
- // Check authentication first before removing query parameter
- try {
- const { checkAuth } = useAuth();
- console.log('đ Checking authentication after redirect...');
-
- let user = await checkAuth();
-
- // If not found, retry once more
- if (!user && process.client) {
- console.log('â ī¸ Cookie not available yet, retrying...');
- await new Promise(resolve => setTimeout(resolve, 150));
- user = await checkAuth();
+ // Authorization Check: Verify if user has access to the requested path
+ const menuStore = useUserMenuStore();
+
+ // Check if user has no access (role inactive)
+ if (menuStore.noAccess) {
+ console.warn('â User has no access (role inactive or no permissions)');
+ return navigateTo({
+ path: '/auth/access-denied',
+ query: { reason: 'no_role_or_inactive' }
+ }, { replace: true });
}
-
- if (user) {
- console.log('â
User is authenticated after redirect:', user.name || user.preferred_username || user.email);
- // Remove query parameter and allow access
- await navigateTo({ path: to.path, query: {} }, { replace: true });
- return; // Allow access
- } else {
- console.log('â Still no session after retry, redirecting to login');
- return navigateTo('/auth/login');
- }
- } catch (authError) {
- console.error('â Auth check failed after redirect:', authError);
- // Retry once
- if (process.client) {
- await new Promise(resolve => setTimeout(resolve, 150));
- try {
- const { checkAuth } = useAuth();
- const retryUser = await checkAuth();
- if (retryUser) {
- console.log('â
User authenticated on retry after error');
- await navigateTo({ path: to.path, query: {} }, { replace: true });
- return;
+
+ // Skip authorization check for certain paths
+ const publicPaths = ['/','/dashboard', '/auth/access-denied'];
+ const isPublicPath = publicPaths.includes(to.path);
+
+ if (!isPublicPath) {
+ // If menu is not fetched yet, wait for it to load (with timeout)
+ if (!menuStore.menuFetched) {
+ console.log('âŗ Menu not fetched yet, loading...');
+
+ const token = localStorage.getItem('idToken');
+ if (token && user.value.id) {
+ try {
+ // Try to load menu
+ await menuStore.fetchUserMenu(user.value.id, token);
+ console.log('â
Menu loaded in middleware');
+ } catch (error) {
+ console.error('â Failed to load menu in middleware:', error);
+ // If menu fails to load, deny access by default for security
+ return navigateTo({
+ path: '/auth/access-denied',
+ query: { path: to.path, reason: 'menu_load_failed' }
+ }, { replace: true });
}
- } catch (retryError) {
- console.error('â Retry also failed:', retryError);
+ } else {
+ console.error('â Cannot load menu: No token or user ID');
+ return navigateTo('/auth/login');
}
}
- return navigateTo('/auth/login');
- }
- }
-
- try {
- const { checkAuth } = useAuth();
- console.log('đ Checking authentication status using useAuth...');
-
- const user = await checkAuth();
-
- if (user) {
- console.log('â
User is authenticated:', user.name || user.preferred_username || user.email);
- return;
+
+
+
+ // Now that menu is loaded (or was already loaded), check authorization
+ if (menuStore.hasMenu) {
+ // Extract all eligible paths from user's menu
+ const eligiblePaths = new Set();
+
+ menuStore.menuItems.forEach((group) => {
+ if (group.children) {
+ group.children.forEach((item) => {
+ if (item.to) {
+ eligiblePaths.add(item.to);
+ }
+ // Handle nested children if any
+ if (item.children) {
+ item.children.forEach((subItem) => {
+ if (subItem.to) {
+ eligiblePaths.add(subItem.to);
+ }
+ });
+ }
+ });
+ }
+ });
+
+ // Define path dependencies: child path requires parent path access
+ const pathDependencies: Record = {
+ '/setting/hak-akses/form': ['/setting/hak-akses'],
+ '/antrean/kategori': ['/antrean/list-kategori'],
+ '/antrean/spesialis': ['/antrean/list-spesialis'],
+ '/antrean/subspesialis': ['/antrean/list-spesialis'],
+ };
+
+ // Helper function to check if a path matches considering dynamic segments
+ const pathMatches = (requestedPath: string, eligiblePath: string): boolean => {
+ // Exact match
+ if (requestedPath === eligiblePath) return true;
+
+ // Check if eligiblePath is a parent of requestedPath (for nested routes)
+ // e.g., /antrean/kategori matches /antrean/kategori/123
+ const eligibleSegments = eligiblePath.split('/').filter(s => s);
+ const requestedSegments = requestedPath.split('/').filter(s => s);
+
+ if (eligibleSegments.length > requestedSegments.length) return false;
+
+ // Check if all eligible segments match (considering the requested path might have more segments)
+ return eligibleSegments.every((seg, idx) => seg === requestedSegments[idx]);
+ };
+
+ // Check if user has access to the requested path (direct or pattern match)
+ let hasAccess = false;
+ for (const eligiblePath of eligiblePaths) {
+ if (pathMatches(to.path, eligiblePath)) {
+ hasAccess = true;
+ break;
+ }
+ }
+
+ // If no direct access, check if this path is a child with satisfied dependencies
+ // If user has the required parent paths, grant access to the child
+ let grantedByDependency = false;
+ if (!hasAccess) {
+ for (const [childPath, requiredPaths] of Object.entries(pathDependencies)) {
+ if (pathMatches(to.path, childPath)) {
+ // This is a child path with dependencies
+ // Check if user has all required parent paths
+ const hasAllRequired = requiredPaths.every(requiredPath =>
+ Array.from(eligiblePaths).some(eligible => pathMatches(requiredPath, eligible))
+ );
+ if (hasAllRequired) {
+ grantedByDependency = true;
+ console.log('â
Access granted by dependency:', {
+ requestedPath: to.path,
+ satisfiedDependencies: requiredPaths
+ });
+ break;
+ }
+ }
+ }
+ }
+
+ console.log('đ Authorization check:', {
+ requestedPath: to.path,
+ eligiblePaths: Array.from(eligiblePaths),
+ hasAccess,
+ grantedByDependency
+ });
+
+ if (!hasAccess && !grantedByDependency) {
+ console.warn('â Access denied: User does not have permission to access', to.path);
+ return navigateTo({
+ path: '/auth/access-denied',
+ query: { path: to.path }
+ }, { replace: true });
+ }
+
+ console.log('â
Authorization granted for:', to.path);
+ } else {
+ // Menu fetched but empty (no access)
+ console.error('â Menu is empty, denying access for security');
+ return navigateTo({
+ path: '/auth/access-denied',
+ query: { path: to.path, reason: 'no_permissions' }
+ }, { replace: true });
+ }
} else {
- console.log('â No valid session found, redirecting to login');
- return navigateTo('/auth/login');
+ console.log('â
Public path, skipping authorization:', to.path);
}
- } catch (error) {
- console.error('â Auth middleware error:', error);
- console.log('đ Redirecting to login due to error');
+
+ return; // Allow access
+ } else {
+ console.log('â No active session, redirecting to login');
return navigateTo('/auth/login');
}
});
\ No newline at end of file
diff --git a/pages/auth/access-denied.vue b/pages/auth/access-denied.vue
index bc37b19..b2ff028 100644
--- a/pages/auth/access-denied.vue
+++ b/pages/auth/access-denied.vue
@@ -1,16 +1,79 @@
Go To Login Page
+ Go To Back Page
diff --git a/pages/dashboard.vue b/pages/dashboard.vue
index 6ed4ea4..0aa756f 100644
--- a/pages/dashboard.vue
+++ b/pages/dashboard.vue
@@ -5,6 +5,39 @@ import { Icon } from '@iconify/vue';
import VueApexCharts from "vue3-apexcharts";
import ModalPendaftaran from '@/components/pendaftaran/ModalPendaftaran.vue';
import api from '@/services/api';
+import { useAuth } from '~/composables/useAuth';
+import { useUserMenuStore } from '~/store/userMenu';
+
+// Check user access to dashboard
+const { user } = useAuth();
+const menuStore = useUserMenuStore();
+
+// Check if user has access to dashboard menu item
+const hasDashboardAccess = computed(() => {
+ if (!menuStore.hasMenu) return false;
+
+ // Extract all eligible paths from menu
+ const eligiblePaths: string[] = [];
+ menuStore.menuItems.forEach((group) => {
+ if (group.children) {
+ group.children.forEach((item) => {
+ if (item.to) {
+ eligiblePaths.push(item.to);
+ }
+ if (item.children) {
+ item.children.forEach((subItem) => {
+ if (subItem.to) {
+ eligiblePaths.push(subItem.to);
+ }
+ });
+ }
+ });
+ }
+ });
+
+ // Check if /dashboard is in eligible paths
+ return eligiblePaths.includes('/dashboard');
+});
// Filter bulan
const selectedMonth = ref(new Date().getMonth());
@@ -409,20 +442,35 @@ const headersSubspesialis = [
// Watch untuk refetch data saat bulan atau tahun berubah
watch([selectedMonth, selectedYear], () => {
- fetchStatusAntrian();
- fetchKategoriAntrian();
- fetchAntrianPerHari();
- fetchAntrianPerSpesialis();
- fetchAntrianPerSubspesialis();
+ if (hasDashboardAccess.value) {
+ fetchStatusAntrian();
+ fetchKategoriAntrian();
+ fetchAntrianPerHari();
+ fetchAntrianPerSpesialis();
+ fetchAntrianPerSubspesialis();
+ }
+});
+
+// Watch for dashboard access changes (when menu loads)
+watch(hasDashboardAccess, (hasAccess) => {
+ if (hasAccess) {
+ fetchStatusAntrian();
+ fetchKategoriAntrian();
+ fetchAntrianPerHari();
+ fetchAntrianPerSpesialis();
+ fetchAntrianPerSubspesialis();
+ }
});
// Fetch data saat component mounted
onMounted(() => {
- fetchStatusAntrian();
- fetchKategoriAntrian();
- fetchAntrianPerHari();
- fetchAntrianPerSpesialis();
- fetchAntrianPerSubspesialis();
+ if (hasDashboardAccess.value) {
+ fetchStatusAntrian();
+ fetchKategoriAntrian();
+ fetchAntrianPerHari();
+ fetchAntrianPerSpesialis();
+ fetchAntrianPerSubspesialis();
+ }
});
definePageMeta({
@@ -433,6 +481,63 @@ definePageMeta({
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -755,6 +860,7 @@ definePageMeta({
+
-import sidebarItem from '@/components/layout/full/vertical-sidebar/sidebarItem';
+import { getListRoleById, updateRolePage } from '~/services/access';
import type { PageMode } from '~/types/common';
+import LoadingState from '~/components/shared/LoadingState.vue';
+
+interface MenuItem {
+ title?: string;
+ icon?: string;
+ to?: string;
+ children?: MenuItem[] | null;
+}
+
+interface MenuGroup {
+ id: string;
+ header: string;
+ children: MenuItem[];
+}
const route = useRoute();
const router = useRouter();
-// Detect mode from route query
+// Detect mode from route query (only edit and view)
const mode = computed(() => {
const modeParam = route.query.mode as string;
- if (modeParam === 'edit') return 'edit';
if (modeParam === 'view') return 'view';
- return 'create';
+ return 'edit'; // Default to edit
});
// Computed readonly state
@@ -20,26 +33,12 @@ const isReadonly = computed(() => mode.value === 'view');
// Dynamic page title based on mode
const pageTitle = computed(() => {
- switch (mode.value) {
- case 'edit':
- return 'Edit Hak Akses';
- case 'view':
- return 'Detail Hak Akses';
- default:
- return 'Tambah Hak Akses';
- }
+ return mode.value === 'view' ? 'Detail Hak Akses' : 'Edit Hak Akses';
});
// Dynamic breadcrumbs based on mode
const breadcrumbText = computed(() => {
- switch (mode.value) {
- case 'edit':
- return 'Edit';
- case 'view':
- return 'Detail';
- default:
- return 'Tambah';
- }
+ return mode.value === 'view' ? 'Detail' : 'Edit';
});
definePageMeta({
@@ -67,10 +66,12 @@ watch([pageTitle, breadcrumbText], ([title, crumb]) => {
const form = ref();
const valid = ref(true);
const namaHakAkses = ref('');
-const status = ref('aktif');
+const status = ref(true);
const selectedPages = ref([]);
const loading = ref(false);
-const currentId = ref(null);
+const currentId = ref(null);
+const menuGroups = ref([]);
+const apiMenuItems = ref<{ id: string; header: string; pages: { id: string; page: string; to: string; is_active: boolean; sort: number; parent_id: string }[] }[]>([]);
// Snackbar state
const snackbar = ref(false);
@@ -90,21 +91,17 @@ const rules = {
// Get all menu items with their pages
const menuItems = computed(() => {
- const items: { header: string; pages: { title: string; to: string }[] }[] = [];
+ if (apiMenuItems.value.length === 0) {
+ return [];
+ }
- sidebarItem.forEach(section => {
- if (section.children && section.children.length > 0) {
- items.push({
- header: section.header || '',
- pages: section.children.map(child => ({
- title: child.title || '',
- to: child.to || ''
- }))
- });
- }
- });
-
- return items;
+ return apiMenuItems.value.map(section => ({
+ header: section.header,
+ pages: section.pages.map(page => ({
+ title: page.page,
+ to: page.to
+ }))
+ }));
});
// Toggle all pages in a section
@@ -149,30 +146,56 @@ const handleSimpan = async () => {
return;
}
+ if (!currentId.value) {
+ showSnackbar('ID tidak ditemukan', 'error');
+ return;
+ }
+
loading.value = true;
try {
+ // Build access_page array from API menu structure
+ const accessPages: any[] = [];
+
+ apiMenuItems.value.forEach((section) => {
+ // Check if any child in this section is selected
+ const hasActiveChild = section.pages.some((page) =>
+ selectedPages.value.includes(page.to)
+ );
+
+ // Add header item (parent) - active if any child is active
+ accessPages.push({
+ id: section.id,
+ is_active: hasActiveChild,
+ page: section.header,
+ parent_id: '',
+ sort: accessPages.length
+ });
+
+ // Add child pages
+ section.pages.forEach((page) => {
+ const isSelected = selectedPages.value.includes(page.to);
+ accessPages.push({
+ id: page.id,
+ is_active: isSelected,
+ page: page.page,
+ parent_id: page.parent_id,
+ sort: page.sort
+ });
+ });
+ });
+
const payload = {
- namaHakAkses: namaHakAkses.value,
+ id: currentId.value || '',
+ name: namaHakAkses.value,
status: status.value,
- pages: selectedPages.value
+ access_page: accessPages
};
let response;
- if (mode.value === 'edit' && currentId.value) {
- // Update existing
- response = await $fetch(`/api/hak-akses/${currentId.value}`, {
- method: 'PUT',
- body: payload
- });
- } else {
- // Create new
- response = await $fetch('/api/hak-akses', {
- method: 'POST',
- body: payload
- });
- }
+ // Update existing role
+ response = await updateRolePage(currentId.value, payload);
if (response && typeof response === 'object' && 'success' in response && response.success) {
const message = 'message' in response && typeof response.message === 'string'
@@ -203,7 +226,7 @@ const handleReset = () => {
if (confirm('Apakah Anda yakin ingin mereset form?')) {
form.value.reset();
namaHakAkses.value = '';
- status.value = 'aktif';
+ status.value = false;
selectedPages.value = [];
}
};
@@ -212,104 +235,157 @@ const handleKembali = () => {
router.push('/setting/hak-akses');
};
-// Load data if edit or view mode
-onMounted(async () => {
- if (mode.value !== 'create') {
- const id = route.query.id;
-
- if (id) {
- loading.value = true;
+// Helper function to transform access_page array to menu structure
+const transformAccessPageToMenuStructure = (accessPages: any[]) => {
+ const headers = accessPages.filter((item: any) => !item.parent_id);
+ const children = accessPages.filter((item: any) => item.parent_id);
+
+ const menuStructure: { id: string; header: string; pages: any[] }[] = [];
+
+ headers.forEach((header: any) => {
+ const headerChildren = children.filter((child: any) => child.parent_id === header.id);
+ if (headerChildren.length > 0) {
+ // Add 'to' property to each child page
+ const pagesWithRoutes = headerChildren.map((child: any) => ({
+ ...child,
+ to: child.to || `/route-placeholder/${child.page.toLowerCase().replace(/\s+/g, '-')}`
+ }));
- try {
- const response = await $fetch(`/api/hak-akses/${id}`);
-
- if (response && typeof response === 'object' && 'success' in response && response.success && 'data' in response) {
- const data = response.data;
-
- if (data && typeof data === 'object') {
- currentId.value = 'id' in data && typeof data.id === 'number' ? data.id : null;
- namaHakAkses.value = 'namaHakAkses' in data && typeof data.namaHakAkses === 'string' ? data.namaHakAkses : '';
- status.value = 'status' in data && typeof data.status === 'string' ? data.status : 'aktif';
- selectedPages.value = 'pages' in data && Array.isArray(data.pages) ? data.pages : [];
- }
- } else {
- const message = response && typeof response === 'object' && 'message' in response && typeof response.message === 'string'
- ? response.message
- : 'Data tidak ditemukan';
- showSnackbar(message, 'error');
-
- // Redirect to list after 2 seconds
- setTimeout(() => {
- router.push('/setting/hak-akses');
- }, 2000);
- }
- } catch (error) {
- console.error('Error loading hak akses:', error);
- showSnackbar('Gagal memuat data', 'error');
-
- // Redirect to list after 2 seconds
- setTimeout(() => {
- router.push('/setting/hak-akses');
- }, 2000);
- } finally {
- loading.value = false;
- }
+ menuStructure.push({
+ id: header.id,
+ header: header.page,
+ pages: pagesWithRoutes
+ });
}
+ });
+
+ return menuStructure;
+};
+
+// Load role data
+onMounted(async () => {
+ loading.value = true;
+
+ try {
+ const id = route.query.id as string;
+
+ if (!id) {
+ showSnackbar('ID tidak ditemukan', 'error');
+ setTimeout(() => {
+ router.push('/setting/hak-akses');
+ }, 2000);
+ return;
+ }
+
+ const response = await getListRoleById(id);
+
+ if (response && response.success && response.data) {
+ const data = response.data;
+
+ // Store current role ID
+ currentId.value = id;
+
+ // Extract role name and status
+ if (data.name) {
+ namaHakAkses.value = data.name;
+ }
+ if ('status' in data) {
+ status.value = data.status;
+ }
+
+ // Extract and transform access_page array
+ if (data.access_page && Array.isArray(data.access_page)) {
+ const menuStructure = transformAccessPageToMenuStructure(data.access_page);
+ apiMenuItems.value = menuStructure;
+
+ // Extract active pages
+ const extractedPages: string[] = [];
+
+ menuStructure.forEach(section => {
+ section.pages.forEach((page: any) => {
+ if (page.is_active && page.to) {
+ extractedPages.push(page.to);
+ }
+ });
+ });
+
+ selectedPages.value = extractedPages;
+ console.log('Menu structure loaded:', menuStructure);
+ console.log('Selected pages:', extractedPages);
+ }
+ } else {
+ showSnackbar(response?.message || 'Data tidak ditemukan', 'error');
+
+ setTimeout(() => {
+ router.push('/setting/hak-akses');
+ }, 2000);
+ }
+ } catch (error) {
+ console.error('Error loading data:', error);
+ showSnackbar('Gagal memuat data', 'error');
+
+ setTimeout(() => {
+ router.push('/setting/hak-akses');
+ }, 2000);
+ } finally {
+ loading.value = false;
}
});
-
-
-
-
-
-
-
-
-
-
-
- Nama Hak Akses *
-
+
+
+
+
+
+
+
+
+
+
+
+
+ Nama Hak Akses *
+
-
-
- Status *
-
-
-
- {{ status === 'aktif' ? 'Aktif' : 'Tidak Aktif' }}
-
-
-
-
-
-
-
-
+
+
+ Status *
+
+
+
+ {{ status ? 'Aktif' : 'Tidak Aktif' }}
+
+
+
+
+
+
+
+
@@ -335,7 +411,7 @@ onMounted(async () => {
hide-details
density="compact"
color="primary"
- :disabled="isReadonly"
+ :readonly="isReadonly"
>
@@ -357,7 +433,7 @@ onMounted(async () => {
hide-details
density="compact"
color="primary"
- :disabled="isReadonly"
+ :readonly="isReadonly"
>
@@ -383,15 +459,6 @@ onMounted(async () => {
{{ index + 1 }}
-
+
- {{ item.status }}
+ {{ item.is_active === true ? 'Aktif' : 'Nonaktif' }}
diff --git a/pages/setting/user/index.vue b/pages/setting/user/index.vue
index 4bb5f3f..e0e11ff 100644
--- a/pages/setting/user/index.vue
+++ b/pages/setting/user/index.vue
@@ -1,18 +1,73 @@
+
+
Access Denied!
-You don't have access. Call administrator.
-You don't have permission to access this page.
+ + +
+
+ Requested: {{ requestedPath }}
+
+
+
+
+
+
+ + Contact your administrator if you believe this is an error. +
+ +
+
+
+
+
+
+
+
+
+
+
+
+ + đ Selamat Datang, {{ user?.name || 'User' }}! +
++ Sistem Informasi Antrean Operasi RSSA +
+
+
+
+
+
+
+
+
+ Informasi Hak Akses
-Informasi Hak Akses
+
-
- Kembali
-
{
+
import TableAntrian from '@/components/pendaftaran/TableAntrian.vue';
import type { HakAkses } from '~/types/setting';
+import { getListRole } from '~/services/access';
-const page = ref({ title: 'Hak Akses' });
-const breadcrumbs = ref([
- {
- text: 'Setting',
- disabled: false,
- href: '#'
- },
- {
- text: 'Hak Akses',
- disabled: true,
- href: '#'
- }
-]);
const router = useRouter();
const search = ref('');
const hakAksesList = ref([]);
const loading = ref(false);
+const currentPage = ref(1);
+const itemsPerPage = ref(10);
+const totalItems = ref(0);
// Snackbar state
const snackbar = ref(false);
@@ -33,18 +24,23 @@ const showSnackbar = (message: string, color: string = 'success') => {
};
// Load data from API
-const loadData = async () => {
+const fetchData = async () => {
loading.value = true;
-
try {
- const response = await $fetch('/api/hak-akses');
+ const offset = (currentPage.value - 1) * itemsPerPage.value;
+ const response = await getListRole({
+ limit: itemsPerPage.value,
+ offset: offset,
+ search: search.value || undefined
+ });
- if (response && typeof response === 'object' && 'success' in response && response.success && 'data' in response) {
- hakAksesList.value = Array.isArray(response.data) ? response.data : [];
+ if (response && response.success) {
+ hakAksesList.value = response.data;
+ totalItems.value = response.Paginate.Total;
}
} catch (error) {
- console.error('Error loading hak akses:', error);
- showSnackbar('Gagal memuat data', 'error');
+ console.error('Error fetching hak akses:', error);
+ showSnackbar('Gagal mengambil data hak akses', 'error');
} finally {
loading.value = false;
}
@@ -52,15 +48,14 @@ const loadData = async () => {
const headers = [
{ title: 'No', key: 'no', width: '100px', align: 'center' as const },
- { title: 'Nama Hak Akses', key: 'namaHakAkses', sortable: true },
- { title: 'Status', key: 'status', sortable: true, align: 'center' as const },
+ { title: 'Nama Hak Akses', key: 'name', sortable: true },
+ { title: 'Status', key: 'is_active', sortable: true, align: 'center' as const },
{ title: 'Actions', key: 'actions', sortable: false }
];
const actions = [
{ icon: 'mdi-eye', color: 'info', tooltip: 'View', event: 'view' },
- { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' },
- { icon: 'mdi-delete', color: 'error', tooltip: 'Delete', event: 'delete' }
+ { icon: 'mdi-pencil', color: 'primary', tooltip: 'Edit', event: 'edit' }
];
const handleView = (item: unknown) => {
@@ -87,7 +82,7 @@ const handleEdit = (item: unknown) => {
const handleDelete = async (item: unknown) => {
const data = item as HakAkses;
- if (confirm(`Apakah Anda yakin ingin menghapus hak akses "${data.namaHakAkses}"?`)) {
+ if (confirm(`Apakah Anda yakin ingin menghapus hak akses "${data.name}"?`)) {
loading.value = true;
try {
@@ -121,9 +116,32 @@ const handleDelete = async (item: unknown) => {
}
};
-// Load data on mount
+// Watch for page changes
+watch(currentPage, () => {
+ fetchData();
+});
+
+watch(itemsPerPage, () => {
+ currentPage.value = 1;
+ fetchData();
+});
+
+
+// Watch for search with debounce
+let searchTimeout: NodeJS.Timeout | null = null;
+watch(search, () => {
+ if (searchTimeout) {
+ clearTimeout(searchTimeout);
+ }
+ searchTimeout = setTimeout(() => {
+ currentPage.value = 1;
+ fetchData();
+ }, 500); // 500ms debounce
+});
+
+// Initial fetch
onMounted(() => {
- loadData();
+ fetchData();
});
definePageMeta({
@@ -147,35 +165,37 @@ definePageMeta({
style="max-width: 400px;"
>
-
Tambah Hak Akses
-
+ -->