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

<script setup lang="ts">
import BaseBreadcrumb from '@/components/shared/BaseBreadcrumb.vue';
import sidebarItem from '@/components/layout/full/vertical-sidebar/sidebarItem';
import type { PageMode } from '~/types/common';

const route = useRoute();
const router = useRouter();

// Detect mode from route query
const mode = computed<PageMode>(() => {
    const modeParam = route.query.mode as string;
    if (modeParam === 'edit') return 'edit';
    if (modeParam === 'view') return 'view';
    return 'create';
});

// Computed readonly state
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';
    }
});

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

const page = ref({ title: pageTitle });
const breadcrumbs = computed(() => [
    {
        text: 'Hak Akses',
        disabled: false,
        href: '/setting/hak-akses'
    },
    {
        text: breadcrumbText.value,
        disabled: true,
        href: '#'
    }
]);

// Form data
const form = ref();
const valid = ref(true);
const namaHakAkses = ref('');
const status = ref('aktif');
const selectedPages = ref<string[]>([]);

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

// Get all menu items with their pages
const menuItems = computed(() => {
    const items: { header: string; pages: { title: string; to: string }[] }[] = [];
    
    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;
});

// 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) {
            alert('Pilih minimal satu halaman untuk hak akses');
            return;
        }
        
        console.log({
            namaHakAkses: namaHakAkses.value,
            status: status.value,
            pages: selectedPages.value
        });
        
        alert('Data berhasil disimpan!');
    }
};

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

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

// Load data if edit or view mode
onMounted(() => {
    if (mode.value !== 'create') {
        const id = route.query.id;
        // TODO: Load data based on id
        // For now, just mock data
        if (id === '1') {
            namaHakAkses.value = 'Super Admin';
            status.value = 'aktif';
            selectedPages.value = ['/antrean/all', '/antrean/pendaftaran', '/master/guarantor'];
        } else if (id === '2') {
            namaHakAkses.value = 'Admin Operasi';
            status.value = 'aktif';
            selectedPages.value = ['/antrean/all', '/antrean/pendaftaran'];
        } else if (id === '5') {
            namaHakAkses.value = 'Admin Rekam Medis';
            status.value = 'tidak aktif';
            selectedPages.value = ['/antrean/all'];
        }
    }
});

definePageMeta({
  middleware: 'auth'
});
</script>

<template>
    <v-form ref="form" v-model="valid" lazy-validation>
        <v-row>
            <v-col cols="12">
                <BaseBreadcrumb :title="pageTitle" :button-back="true" :breadcrumbs="breadcrumbs"></BaseBreadcrumb>
            </v-col>

            <!-- 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"
                                    true-value="aktif"
                                    false-value="tidak aktif"
                                    color="success"
                                    hide-details="auto"
                                    :readonly="isReadonly"
                                    :disabled="isReadonly"
                                    inset
                                >
                                    <template #label>
                                        <span :class="status === 'aktif' ? 'text-success' : 'text-error'">
                                            {{ status === 'aktif' ? '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"
                                            :disabled="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"
                                            :disabled="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
                                color="default"
                                size="large"
                                variant="outlined"
                                prepend-icon="mdi-arrow-left"
                                @click="handleKembali"
                            >
                                Kembali
                            </v-btn>
                            <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"
                            >
                                Simpan
                            </v-btn>
                        </div>
                    </v-card-text>
                </v-card>
            </v-col>
        </v-row>
    </v-form>
</template>