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

<script setup>
import Master from "../../layouts/master.vue";
import { ref, reactive } from 'vue';
import TableGeneric from "../../components/TableGeneric.vue";
import { Link } from "@inertiajs/inertia-vue3";
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { useUserStore } from "../../store/User.js";
const userStore = useUserStore();
const toast = useToast();

const props = defineProps({
    users: {
        type: Object,
    },
    search: {
        type: String
    },
    level: {
        type: String
    }
})

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

const columns = ref(userStore.columns)

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

const confirm = useConfirm();

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

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

const exportData = () => {
    userStore.exportData({
        level: queryParams.level,
        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: () => {
            userStore.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: () => {
            userStore.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">{{ userStore.indexPageTitle }}</h2>
            <Button severity="secondary" asChild v-slot="slotProps">
                <Link :class="slotProps.class" :href="userStore.endpoints.create">
                    <span class="text-sm">{{ userStore.pageTitle }}</span>
                    <i class="fi fi-rr-plus flex text-sm"></i>
                </Link>
            </Button>
        </div>
        <div class="card border-[1px] border-client-gray/20 bg-white rounded-2xl">
            <TableGeneric
                :data="users.data"
                :columns="columns"
                :selectable="true"
                :pagination="users.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 justify-start gap-2">
                        <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="userStore.endpoints.edit(data.id)">
                                <i class="fi fi-rr-pen-clip flex !text-xs"></i>
                            </Link>
                        </Button>
                    </div>
                </template>
            </TableGeneric>
        </div>
    </master>
</template>