xXx

Hexid M1n1 5h3ll MobiLe

home/emberdemos/corehr_app/current/resources/js/Pages/Admin/Roles/_[ Writable ]

File:/home/emberdemos/corehr_app/current/resources/js/Pages/Admin/Roles/Index.vue

<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { Head, useForm, router } from '@inertiajs/vue3'
import { Checkbox } from '@/components/ui/checkbox'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog'
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { MoreHorizontal, PlusCircle, GripVertical } from 'lucide-vue-next'
import type { Role, Permission, BreadcrumbLink } from '@/types'
import { VueDraggable } from 'vue-draggable-plus'

const props = defineProps<{
    roles: Role[]
    permissions: Record<string, Permission[]>
}>()

const breadcrumbs: BreadcrumbLink[] = [
    { href: route('admin.roles.index'), text: 'Roles & Permissions' }
];

// --- State Management ---
const newRoleForm = useForm({ name: '' })
const renameRoleForm = useForm({ name: '' })
const isRenameDialogOpen = ref(false)
const roleToRename = ref<Role | null>(null)
const localRoles = ref<Role[]>([])
const permissionState = ref<Record<string, Record<string, boolean>>>({})

watch(() => props.roles, (newRoles) => {
    localRoles.value = JSON.parse(JSON.stringify(newRoles));

    const state: Record<string, Record<string, boolean>> = {}
    newRoles.forEach(role => {
        state[role.name] = {}
        const rolePermissions = new Set(role.permissions?.map((p: Permission) => p.name) || [])
        Object.values(props.permissions).flat().forEach(permission => {
            state[role.name][permission.name] = rolePermissions.has(permission.name)
        })
    })
    permissionState.value = state
}, { deep: true, immediate: true })

const roleSelectAllState = computed(() => {
    const states: Record<string, boolean | 'indeterminate'> = {}
    const allPermissionNames = Object.values(props.permissions).flat()

    localRoles.value.forEach(role => {
        if (role.name === 'Super Admin') {
            states[role.name] = true
            return
        }
        const checkedCount = allPermissionNames.filter(p => permissionState.value[role.name]?.[p.name]).length
        if (checkedCount === 0) states[role.name] = false
        else if (checkedCount === allPermissionNames.length) states[role.name] = true
        else states[role.name] = 'indeterminate'
    })
    return states
})

const groupRoleSelectAllState = computed(() => {
    const states: Record<string, Record<string, boolean | 'indeterminate'>> = {}
    Object.entries(props.permissions).forEach(([groupName, groupPermissions]) => {
        states[groupName] = {}
        const groupPermissionNames = groupPermissions.map(p => p.name)

        localRoles.value.forEach(role => {
            if (role.name === 'Super Admin') {
                states[groupName][role.name] = true
                return
            }
            const checkedCount = groupPermissionNames.filter(pName => permissionState.value[role.name]?.[pName]).length

            if (checkedCount === 0) states[groupName][role.name] = false
            else if (checkedCount === groupPermissionNames.length) states[groupName][role.name] = true
            else states[groupName][role.name] = 'indeterminate'
        })
    })
    return states
})

const onDragEnd = () => {
    const newOrderIds = localRoles.value.map(role => role.id)
    router.put(route('admin.roles.update-order'), {
        roles: newOrderIds,
    }, {
        preserveState: false,
        preserveScroll: true,
    })
}

const formatPermissionName = (name: string) => {
    return name.split(' ').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ')
}

const addNewRole = () => {
    newRoleForm.post(route('admin.roles.store'), {
        onSuccess: () => newRoleForm.reset(),
        preserveScroll: true,
    })
}

const deleteRole = (role: Role) => {
    if (confirm(`Are you sure you want to delete the role "${role.name}"?`)) {
        router.delete(route('admin.roles.destroy', role.id), { preserveScroll: true })
    }
}

const openRenameDialog = (role: Role) => {
    roleToRename.value = role
    renameRoleForm.name = role.name
    isRenameDialogOpen.value = true
}

const submitRename = () => {
    if (roleToRename.value) {
        renameRoleForm.post(route('admin.roles.rename', roleToRename.value.id), {
            onSuccess: () => {
                isRenameDialogOpen.value = false
                roleToRename.value = null
            },
            preserveScroll: true,
        })
    }
}

const debouncedUpdate = (() => {
    let timer: number
    const rolesToUpdate = new Set<Role>()
    return (role: Role) => {
        rolesToUpdate.add(role)
        clearTimeout(timer)
        timer = setTimeout(() => {
            rolesToUpdate.forEach(r => {
                router.put(route('admin.roles.update', r.id), {
                    permissions: permissionState.value[r.name]
                }, { preserveScroll: true, preserveState: true })
            })
            rolesToUpdate.clear()
        }, 1000)
    }
})();

const handlePermissionChange = (role: Role, permissionName: string, checked: boolean | 'indeterminate') => {
    if (typeof checked !== 'boolean' || role.name === 'Super Admin') return
    if (permissionState.value[role.name]) {
        permissionState.value[role.name][permissionName] = checked
    }
    debouncedUpdate(role)
}

const toggleAllForRole = (role: Role, newState: boolean | 'indeterminate') => {
    if (role.name === 'Super Admin' || typeof newState !== 'boolean') return;
    const shouldCheck = newState;
    Object.values(props.permissions).flat().forEach(p => {
        permissionState.value[role.name][p.name] = shouldCheck
    });
    debouncedUpdate(role);
}

const toggleGroupForRole = (group: Permission[], role: Role, newState: boolean | 'indeterminate') => {
    if (role.name === 'Super Admin' || typeof newState !== 'boolean') return;
    const shouldCheck = newState;
    const groupPermissionNames = group.map(p => p.name);

    groupPermissionNames.forEach(pName => {
        if (permissionState.value[role.name]) {
            permissionState.value[role.name][pName] = shouldCheck;
        }
    });
    debouncedUpdate(role);
}
</script>

<template>

    <Head title="Roles & Permissions" />
    <AuthenticatedLayout title="Roles & Permissions" :breadcrumbs="breadcrumbs">
        <div class="w-full">
            <div class="overflow-x-auto border rounded-lg">
                <div class="min-w-full text-sm">
                    <!-- Header Row -->
                    <div class="sticky top-0 z-20 grid items-stretch bg-background"
                        :style="{ gridTemplateColumns: `minmax(16rem, 1fr) repeat(${localRoles.length}, minmax(11rem, 1fr)) minmax(16rem, 1fr)` }">
                        <div
                            class="sticky left-0 z-30 flex items-center p-2 font-semibold text-left border-b bg-background">
                            Permission</div>
                        <VueDraggable v-model="localRoles" handle=".drag-handle" class="contents" @end="onDragEnd">
                            <div v-for="role in localRoles" :key="role.id"
                                class="flex flex-col p-2 font-semibold text-left border-b border-l">
                                <div class="flex items-center justify-between gap-2 grow">
                                    <GripVertical
                                        class="w-4 h-4 cursor-move drag-handle text-muted-foreground shrink-0" />
                                    <span class="grow">{{ role.name }}</span>
                                    <DropdownMenu v-if="!['Super Admin', 'HR Admin', 'Employee'].includes(role.name)">
                                        <DropdownMenuTrigger as-child>
                                            <Button variant="ghost" size="icon" class="w-6 h-6 shrink-0">
                                                <MoreHorizontal class="w-4 h-4" />
                                            </Button>
                                        </DropdownMenuTrigger>
                                        <DropdownMenuContent>
                                            <DropdownMenuItem @click="openRenameDialog(role)">Rename Role
                                            </DropdownMenuItem>
                                            <DropdownMenuItem @click="deleteRole(role)">Delete Role</DropdownMenuItem>
                                        </DropdownMenuContent>
                                    </DropdownMenu>
                                </div>
                                <!-- MODIFICATION 1: Display a consistent "Select All" for every role -->
                                <div class="flex items-center gap-2 pt-2 mt-2 border-t">
                                    <template v-if="role.name === 'Super Admin'">
                                        <Checkbox :id="`select-all-role-${role.id}`" :model-value="true" disabled
                                            class="opacity-50" />
                                    </template>
                                    <template v-else>
                                        <Checkbox :id="`select-all-role-${role.id}`"
                                            :model-value="roleSelectAllState[role.name]"
                                            @update:model-value="(state: boolean | 'indeterminate') => toggleAllForRole(role, state)" />
                                    </template>
                                    <Label :for="`select-all-role-${role.id}`"
                                        class="text-xs font-medium text-muted-foreground">Select All</Label>
                                </div>
                            </div>
                        </VueDraggable>
                        <div class="flex items-center p-2 font-semibold text-left border-b border-l">
                            <form @submit.prevent="addNewRole" class="flex items-center gap-2">
                                <Input v-model="newRoleForm.name" placeholder="New Role Name..." class="w-40" />
                                <TooltipProvider>
                                    <Tooltip>
                                        <TooltipTrigger as-child>
                                            <Button type="submit" size="icon" :disabled="newRoleForm.processing">
                                                <PlusCircle class="w-4 h-4" />
                                            </Button>
                                        </TooltipTrigger>
                                        <TooltipContent>
                                            <p>Press Enter or click to add</p>
                                        </TooltipContent>
                                    </Tooltip>
                                </TooltipProvider>
                            </form>
                        </div>
                    </div>

                    <!-- Body Rows -->
                    <div>
                        <template v-for="(group, groupName) in permissions" :key="groupName">
                            <div class="grid"
                                :style="{ gridTemplateColumns: `minmax(16rem, 1fr) repeat(${localRoles.length}, minmax(11rem, 1fr)) minmax(16rem, 1fr)` }">
                                <div class="sticky left-0 z-10 p-2 font-semibold border-b col-span-full bg-muted/50">{{
                                    groupName }}</div>
                            </div>
                            <div class="grid"
                                :style="{ gridTemplateColumns: `minmax(16rem, 1fr) repeat(${localRoles.length}, minmax(11rem, 1fr)) minmax(16rem, 1fr)` }">
                                <div class="sticky left-0 z-10 p-2 text-xs border-b bg-muted/50 text-muted-foreground">
                                    Select All in Group</div>
                                <div v-for="role in localRoles" :key="role.id"
                                    class="flex items-center justify-center p-2 border-b border-l bg-muted/50">
                                    <Checkbox v-if="role.name !== 'Super Admin'"
                                        :id="`select-all-group-${groupName}-${role.id}`"
                                        :model-value="groupRoleSelectAllState[groupName]?.[role.name]"
                                        @update:model-value="(state: boolean | 'indeterminate') => toggleGroupForRole(group, role, state)" />
                                    <Checkbox v-else :model-value="true" disabled class="opacity-50" />
                                </div>
                                <div class="p-2 border-b border-l"></div>
                            </div>

                            <div v-for="permission in group" :key="permission.id" class="grid"
                                :style="{ gridTemplateColumns: `minmax(16rem, 1fr) repeat(${localRoles.length}, minmax(11rem, 1fr)) minmax(16rem, 1fr)` }">
                                <div class="sticky left-0 z-10 p-2 border-b bg-background">{{
                                    formatPermissionName(permission.name) }}</div>
                                <div v-for="role in localRoles" :key="role.id"
                                    class="flex items-center justify-center p-2 border-b border-l">
                                    <TooltipProvider v-if="role.name === 'Super Admin'">
                                        <Tooltip>
                                            <TooltipTrigger class="flex items-center justify-center w-full">
                                                <Checkbox :model-value="true" disabled class="opacity-50" />
                                            </TooltipTrigger>
                                            <TooltipContent>
                                                <p>Super Admin has all permissions</p>
                                            </TooltipContent>
                                        </Tooltip>
                                    </TooltipProvider>
                                    <Checkbox v-else
                                        :model-value="permissionState[role.name]?.[permission.name] ?? false"
                                        @update:model-value="(checked: boolean | 'indeterminate') => handlePermissionChange(role, permission.name, checked)" />
                                </div>
                                <div class="p-2 border-b border-l"></div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
        </div>
        <AlertDialog :open="isRenameDialogOpen" @update:open="isRenameDialogOpen = false">
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>Rename Role: {{ roleToRename?.name }}</AlertDialogTitle>
                </AlertDialogHeader>
                <Input v-model="renameRoleForm.name" @keydown.enter.prevent="submitRename" class="mt-2" />
                <p v-if="renameRoleForm.errors.name" class="mt-2 text-sm text-red-500">{{ renameRoleForm.errors.name }}
                </p>
                <AlertDialogFooter>
                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                    <AlertDialogAction @click="submitRename" :disabled="renameRoleForm.processing">Save
                    </AlertDialogAction>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    </AuthenticatedLayout>
</template>

Your Access Expired	Date. in : 19-12-2025
Regist : 09-12-2024	Expired : 01-12-2027