radicall/resources/js/Admin/Pages/Roles/index.vue

<script setup>
import Master from "../../layouts/master.vue";
import {ref, reactive} from 'vue';
import {Link} from "@inertiajs/inertia-vue3";
import {useConfirm} from 'primevue/useconfirm';
import TableGeneric from "../../components/TableGeneric.vue";
import {useRoleStore} from "../../store/Role.js";

const props = defineProps({
    roles: {
        type: Object,
    },
    search: {
        type: String
    },
})
const roleStore = useRoleStore();

const roles = ref(props.roles ?? []);
const selectedItems = ref([]);
const searchLoader = ref(false);

const columns = ref(roleStore.columns)

const queryParams = reactive({
    search: props.search ?? ''
})

const confirm = useConfirm();

const onPageChange = (event) => {
    roleStore.navigateToPage(event.page + 1);
};

const searchData = () => {
    searchLoader.value = true;
    roleStore.search(queryParams).then((response) => {
        searchLoader.value = false;
        roles.value = response.props.roles.data;
    });
}

const exportData = () => {
    roleStore.exportData({
        search: queryParams.search
    });
}

const onSelectionChange = (selection) => {
    selectedItems.value = selection;
};

const onSearchChange = (value) => {
    queryParams.search = value;
    searchData();
};

const showDeleteConfirm = (data) => {
    confirm.require({
        group: 'deleteTemplate',
        header: 'مطمعن هستید؟',
        message: 'اگر به عملیات اطمینان دارید، تأیید کنید.',
        icon: 'fi fi-rr-info',
        rejectProps: {
            label: 'انصراف',
            icon: 'fi fi-rr-ban',
            outlined: true,
            size: 'small',
            class: '!text-xs !flex pt-1 !item-center',
            iconClass: '!flex !text-xs',
        },
        acceptProps: {
            label: 'حذف',
            icon: 'fi fi-rr-check',
            size: 'small',
            class: '!text-xs !flex pt-1 !item-center',
            iconClass: '!flex !text-xs',
        },
        accept: () => {
            roleStore.deleteRecord(data.id);
        },
        reject: () => {

        }
    });
}

const confirmDeleteSelected = (ids) => {
    confirm.require({
        group: 'deleteTemplate',
        header: 'مطمعن هستید؟',
        message: 'اگر به عملیات اطمینان دارید، تأیید کنید.',
        icon: 'fi fi-rr-info',
        rejectProps: {
            label: 'انصراف',
            icon: 'fi fi-rr-ban',
            outlined: true,
            size: 'small',
            class: '!text-xs !flex pt-1 !item-center',
            iconClass: '!flex !text-xs',
        },
        acceptProps: {
            label: 'حذف',
            icon: 'fi fi-rr-check',
            size: 'small',
            class: '!text-xs !flex pt-1 !item-center',
            iconClass: '!flex !text-xs',
        },
        accept: () => {
            roleStore.bulkDelete(ids);
        },
        reject: () => {

        }
    });
};
</script>

<template>
    <master>
        <div class="mb-4 grid grid-cols-2a justify-between items-center bg-white border-[1px] border-client-gray/20 py-4 px-4 rounded-2xl">
            <h2 class="font-bold text-client-Fontcolor">{{ roleStore.indexPageTitle }}</h2>
            <Button severity="secondary" asChild v-slot="slotProps">
                <Link :class="slotProps.class" :href="roleStore.endpoints.create">
                    <span class="text-sm">{{ roleStore.pageTitle }}</span>
                    <i class="fi fi-rr-plus flex text-sm"></i>
                </Link>
            </Button>
        </div>
        <div class="card border-[1px] overflow-hidden border-client-gray/20 bg-white rounded-2xl">
            <TableGeneric
                :data="roles.data"
                :columns="columns"
                :selectable="true"
                :pagination="roles.meta"
                :searchable="true"
                :searchValue="queryParams.search"
                v-model="selectedItems"
                @selection-change="onSelectionChange"
                @page-change="onPageChange"
                @search-change="onSearchChange"
            >
                <template #bulk-action="{ selection }">
                    <Button
                        label="حذف همه"
                        size="small"
                        :pt="{icon : 'flex'}"
                        icon="fi fi-rr-trash"
                        severity="danger"
                        class="!text-xs !flex"
                        outlined
                        @click="() => confirmDeleteSelected(selection.map(user => user.id))"
                    />
                </template>

                <template #toolbar-actions>
                    <div class="grid grid-cols-a gap-4 justify-start">
                        <Button
                            label="خروجی اکسل"
                            :pt="{icon : 'flex'}"
                            icon="fi fi-rr-file-export"
                            class="!text-xs !bg-client-primary"
                            @click="exportData"
                        />
                    </div>
                </template>

                <template #column-actions="{ data }">
                    <div class="grid grid-cols-2a">
                        <Button
                            type="button"
                            class="!w-8 !h-8"
                            variant="outlined"
                            severity="danger"
                            icon="fi fi-rr-trash"
                            :pt="{icon : '!mt-2 !text-xs'}"
                            @click="showDeleteConfirm(data)"
                        />
                        <Button severity="info" variant="outlined" asChild v-slot="slotProps">
                            <Link :class="[slotProps.class , '!w-8 !h-8']" :href="roleStore.endpoints.edit(data.id)">
                                <i class="fi fi-rr-pen-clip flex !text-xs"></i>
                            </Link>
                        </Button>
                    </div>
                </template>
            </TableGeneric>
        </div>
    </master>
</template>