radicall/resources/js/Admin/Pages/Pets/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 { usePetStore } from "../../store/Pet.js";
import { useUserStore } from "../../store/User.js";
import Button from 'primevue/button';
import Tag from 'primevue/tag';
const petStore = usePetStore();
const userStore = useUserStore();
const props = defineProps({
    pets: {
        type: Object,
    },
    search: {
        type: String
    },
    type: {
        type: [String, Array],
        default: null
    },
    gender: {
        type: String
    },
    permissions_edit: {
        type: Boolean
    },
    permissions_delete: {
        type: Boolean
    }
})

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

const columns = ref(petStore.columns)

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

const filters = ref({
    gender: (props.gender && typeof props.gender === 'string') ? props.gender : null,
    type: petStore.parseStringToArray(props.type),
})
const confirm = useConfirm();

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

const searchData = () => {
    searchLoader.value = true;

    const searchParams = {
        ...(queryParams.search && { search: queryParams.search }),
        ...(queryParams.gender && { gender: queryParams.gender }),
        ...petStore.convertFiltersToArrayParams(filters.value)
    };
    petStore.search(searchParams);
}

const exportData = () => {
    const exportParams = {
        ...(queryParams.search && { search: queryParams.search }),
        ...(queryParams.gender && { gender: queryParams.gender }),
        ...petStore.convertFiltersToArrayParams(filters.value)
    };
    petStore.exportData(exportParams);
}

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

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

const onFilterChange = (newFilters) => {
    filters.value = { ...newFilters };
    Object.keys(newFilters).forEach(key => {
        if (Array.isArray(newFilters[key])) {
            queryParams[key] = newFilters[key].join(',');
        } else {
            queryParams[key] = newFilters[key] || '';
        }
    });
};

const applyFilters = () => {
    filterLoader.value = true;
    searchData();
};

const clearFilters = () => {
    filters.value = {
        gender: null,
        type: [],
    };
    queryParams.gender = '';
    queryParams.type = '';
    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: () => {
            petStore.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: () => {
            petStore.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">{{ petStore.indexPageTitle }}</h2>
            <Button severity="secondary" asChild v-slot="slotProps">
                <Link :class="slotProps.class" :href="petStore.endpoints.create">
                    <span class="text-sm">{{ petStore.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="pets.data"
                :columns="columns"
                :selectable="true"
                :pagination="pets.meta"
                :searchable="true"
                :searchValue="queryParams.search"
                :filters="filters"
                :filterLoader="filterLoader"
                v-model="selectedItems"
                @selection-change="onSelectionChange"
                @page-change="onPageChange"
                @search-change="onSearchChange"
                @filter-change="onFilterChange"
                @apply-filters="applyFilters"
                @clear-filters="clearFilters"
            >
                <template #bulk-action="{ selection }" v-if="!permissions_delete">
                    <Button
                        label="حذف همه"
                        size="small"
                        :pt="{icon : 'flex'}"
                        icon="fi fi-rr-trash"
                        severity="danger"
                        class="!text-xs !flex"
                        outlined
                        @click="() => confirmDeleteSelected(selection.map(pet => pet.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-sterilized="{ data }">
                    <Tag
                        class="!text-xs"
                        :value="data.sterilized ? 'عقیم شده' : 'عقیم نشده'"
                        :severity="petStore.getSterilized(data.sterilized)"
                    />
                </template>
                <template #column-owner="{ data }">
                    <div class="grid grid-cols-2a justify-start gap-2">
                        <span class="text-right text-sm">{{ data.owner?.fullname }}</span>
                        <Link :href="userStore.endpoints.edit(data.owner.id)" class="text-sm">
                                <i class="fi fi-rr-eye flex !text-xs !text-client-Fontcolor/40"></i>
                        </Link>
                    </div>
                </template>

                <template #column-actions="{ data }">
                    <div class="grid grid-cols-2a justify-start gap-2">
                        <Button
                            v-if="!permissions_delete"
                            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
                            v-if="!permissions_edit"
                            severity="info"
                            variant="outlined"
                            asChild
                            v-slot="slotProps"
                        >
                            <Link :class="[slotProps.class , '!w-8 !h-8']" :href="petStore.endpoints.edit(data.id)">
                                <i class="fi fi-rr-pen-clip flex !text-xs"></i>
                            </Link>
                        </Button>
                    </div>
                </template>
            </TableGeneric>
        </div>
    </master>
</template>