antrean-operasi/pages/setting/hak-akses/form.vue

<script setup lang="ts">
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 (only edit and view)
const mode = computed<PageMode>(() => {
    const modeParam = route.query.mode as string;
    if (modeParam === 'view') return 'view';
    return 'edit'; // Default to edit
});

// Computed readonly state
const isReadonly = computed(() => mode.value === 'view');

// Dynamic page title based on mode
const pageTitle = computed(() => {
    return mode.value === 'view' ? 'Detail Hak Akses' : 'Edit Hak Akses';
});

// Dynamic breadcrumbs based on mode
const breadcrumbText = computed(() => {
    return mode.value === 'view' ? 'Detail' : 'Edit';
});

definePageMeta({
  middleware: 'auth',
  buttonBack: true,
  pageTitle: '',
  breadcrumbs: [
    { text: 'Setting' },
    { text: 'Hak Akses' },
    { text: '' }
  ]
});

// Update page meta dynamically
watch([pageTitle, breadcrumbText], ([title, crumb]) => {
    if (process.client) {
        route.meta.pageTitle = title;
        if (route.meta.breadcrumbs && Array.isArray(route.meta.breadcrumbs)) {
            route.meta.breadcrumbs[2] = { text: crumb };
        }
    }
}, { immediate: true });

// Form data
const form = ref();
const valid = ref(true);
const namaHakAkses = ref('');
const status = ref(true);
const selectedPages = ref<string[]>([]);
const loading = ref(false);
const currentId = ref<string | null>(null);
const menuGroups = ref<MenuGroup[]>([]);
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);
const snackbarMessage = ref('');
const snackbarColor = ref('success');

const showSnackbar = (message: string, color: string = 'success') => {
    snackbarMessage.value = message;
    snackbarColor.value = color;
    snackbar.value = true;
};

// Rules
const rules = {
    required: (value: string) => !!value || 'Field ini wajib diisi'
};

// Get all menu items with their pages
const menuItems = computed(() => {
    if (apiMenuItems.value.length === 0) {
        return [];
    }
    
    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
const toggleSection = (sectionPages: { to: string }[]) => {
    const allSelected = sectionPages.every(page => selectedPages.value.includes(page.to));
    
    if (allSelected) {
        // Unselect all in this section
        sectionPages.forEach(page => {
            const index = selectedPages.value.indexOf(page.to);
            if (index > -1) {
                selectedPages.value.splice(index, 1);
            }
        });
    } else {
        // Select all in this section
        sectionPages.forEach(page => {
            if (!selectedPages.value.includes(page.to)) {
                selectedPages.value.push(page.to);
            }
        });
    }
};

// Check if all pages in section are selected
const isSectionSelected = (sectionPages: { to: string }[]) => {
    return sectionPages.length > 0 && sectionPages.every(page => selectedPages.value.includes(page.to));
};

// Check if some pages in section are selected
const isSectionIndeterminate = (sectionPages: { to: string }[]) => {
    const selectedCount = sectionPages.filter(page => selectedPages.value.includes(page.to)).length;
    return selectedCount > 0 && selectedCount < sectionPages.length;
};

const handleSimpan = async () => {
    const { valid } = await form.value.validate();
    
    if (valid) {
        if (selectedPages.value.length === 0) {
            showSnackbar('Pilih minimal satu halaman untuk hak akses', 'error');
            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 = {
                id: currentId.value || '',
                name: namaHakAkses.value,
                status: status.value,
                access_page: accessPages
            };
            
            let response;
            
            // 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' 
                    ? response.message 
                    : 'Data berhasil disimpan';
                showSnackbar(message, 'success');
                
                // Redirect to list after 1 second
                setTimeout(() => {
                    router.push('/setting/hak-akses');
                }, 1000);
            } else {
                const message = response && typeof response === 'object' && 'message' in response && typeof response.message === 'string'
                    ? response.message
                    : 'Gagal menyimpan data';
                showSnackbar(message, 'error');
            }
        } catch (error) {
            console.error('Error saving hak akses:', error);
            showSnackbar('Terjadi kesalahan saat menyimpan data', 'error');
        } finally {
            loading.value = false;
        }
    }
};

const handleReset = () => {
    if (confirm('Apakah Anda yakin ingin mereset form?')) {
        form.value.reset();
        namaHakAkses.value = '';
        status.value = false;
        selectedPages.value = [];
    }
};

const handleKembali = () => {
    router.push('/setting/hak-akses');
};

// 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, '-')}`
            }));
            
            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;
    }
});
</script>

<template>
    <LoadingState 
        :loading="loading"
        loadingText="Memuat data..."
        minHeight="400px"
    >
        <v-form ref="form" v-model="valid" lazy-validation>
            <v-row>
                <!-- Form Card -->
                <v-col cols="12">
                    <v-card elevation="10">
                        <v-card-item>
                            <h5 class="text-h5 font-weight-bold">Informasi Hak Akses</h5>
                        </v-card-item>
                        <v-divider></v-divider>
                        <v-card-text>
                            <v-row>
                                <!-- Nama Hak Akses -->
                                <v-col cols="12" md="6">
                                    <v-label class="mb-2 font-weight-medium">Nama Hak Akses <span class="text-error">*</span></v-label>
                                    <v-text-field
                                        v-model="namaHakAkses"
                                        placeholder="Contoh: Admin, Dokter, Perawat"
                                        variant="outlined"
                                        density="comfortable"
                                        :rules="[rules.required]"
                                        hide-details="auto"
                                        :readonly="isReadonly"
                                        :bg-color="isReadonly ? 'grey-lighten-3' : undefined"
                                    ></v-text-field>
                                </v-col>

                                <!-- Status -->
                                <v-col cols="12" md="6">
                                    <v-label class="mb-2 font-weight-medium">Status <span class="text-error">*</span></v-label>
                                    <v-switch
                                        v-model="status"
                                        color="success"
                                        hide-details="auto"
                                        :readonly="isReadonly"
                                        inset
                                    >
                                        <template #label>
                                            <span :class="status ? 'text-success' : 'text-error'">
                                                {{ status ? 'Aktif' : 'Tidak Aktif' }}
                                            </span>
                                        </template>
                                    </v-switch>
                                </v-col>
                            </v-row>
                        </v-card-text>
                    </v-card>
                </v-col>

            <!-- Akses Halaman Card -->
            <v-col cols="12">
                <v-card elevation="10">
                    <v-card-item>
                        <h5 class="text-h5 font-weight-bold">Akses Halaman</h5>
                    </v-card-item>
                    <v-divider></v-divider>
                    <v-card-text>
                        <v-row>
                            <v-col 
                                v-for="(section, index) in menuItems" 
                                :key="index"
                                cols="12"
                                md="4"
                            >
                                <v-card variant="outlined">
                                    <div class="d-flex align-center pa-1">
                                        <v-checkbox
                                            :model-value="isSectionSelected(section.pages)"
                                            :indeterminate="isSectionIndeterminate(section.pages)"
                                            @click="!isReadonly && toggleSection(section.pages)"
                                            hide-details
                                            density="compact"
                                            color="primary"
                                            :readonly="isReadonly"
                                        >
                                            <template #label>
                                                <span class="text-capitalize font-weight-bold">
                                                    {{ section.header }}
                                                </span>
                                            </template>
                                        </v-checkbox>
                                    </div>
                                    
                                    <v-divider class="mb-1"></v-divider>
                                    
                                    <div class="pl-3">
                                        <v-checkbox
                                            v-for="page in section.pages"
                                            :key="page.to"
                                            v-model="selectedPages"
                                            :value="page.to"
                                            :label="page.title"
                                            hide-details
                                            density="compact"
                                            color="primary"
                                            :readonly="isReadonly"
                                        ></v-checkbox>
                                    </div>
                                </v-card>
                            </v-col>
                        </v-row>

                        <!-- Selected Pages Summary -->
                        <v-row v-if="selectedPages.length > 0" class="mt-4">
                            <v-col cols="12">
                                <v-alert type="info" variant="tonal" density="compact">
                                    <div class="d-flex align-center">
                                        <span><strong>{{ selectedPages.length }}</strong> halaman dipilih</span>
                                    </div>
                                </v-alert>
                            </v-col>
                        </v-row>
                    </v-card-text>
                </v-card>
            </v-col>

            <!-- Action Buttons -->
            <v-col cols="12">
                <v-card elevation="10">
                    <v-card-text>
                        <div class="d-flex justify-end ga-3">
                            <v-btn
                                v-if="!isReadonly"
                                color="error"
                                size="large"
                                variant="outlined"
                                prepend-icon="mdi-reload"
                                @click="handleReset"
                            >
                                Reset
                            </v-btn>
                            <v-btn
                                v-if="!isReadonly"
                                color="primary"
                                size="large"
                                prepend-icon="mdi-content-save"
                                @click="handleSimpan"
                                :loading="loading"
                                :disabled="loading"
                            >
                                Simpan
                            </v-btn>
                        </div>
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>
    </v-form>
    </LoadingState>

    <!-- Snackbar for notifications -->
    <v-snackbar
        v-model="snackbar"
        :color="snackbarColor"
        :timeout="3000"
        location="top"
    >
        {{ snackbarMessage }}
        <template #actions>
            <v-btn
                variant="text"
                @click="snackbar = false"
            >
                Close
            </v-btn>
        </template>
    </v-snackbar>
</template>