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

<script setup>
import Master from "../../layouts/master.vue";
import { ref, reactive, onMounted, watch } from 'vue';
import TableGeneric from "../../components/TableGeneric.vue";
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { useReportStore } from "../../store/Report.js";
import UIModal from "../../components/ui/UIModal.vue";
import CreateReportForm from "../../components/reports/CreateReportForm.vue";
const reportStore = useReportStore();
const toast = useToast();

const props = defineProps({
    reports: {
        type: Object,
    },
    search: {
        type: String
    },
    status: {
        type: String
    },
})

const reports = ref(props.reports ?? []);
const selectedItems = ref([]);
const searchLoader = ref(false);
const editReportData = ref(null);

const columns = ref(reportStore.columns)

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

const confirm = useConfirm();

watch(() => props.reports, (newReports) => {
    if (newReports) {
        reports.value = newReports;
    }
}, { deep: true, immediate: true });


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

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

const exportData = () => {
    reportStore.exportData({
        search: queryParams.search,
        status: queryParams.status,
    });
}

const openCreateModal = () => {
    reportStore.is_edit_form = false;
    editReportData.value = null;
    reportStore.showCreateModal = true;
}

const openEditModal = (reportData) => {
    reportStore.is_edit_form = true;
    editReportData.value = reportData;
    reportStore.showCreateModal = true;
}

const closeCreateModal = () => {
    reportStore.showCreateModal = false;
    reportStore.is_edit_form = false;
    editReportData.value = null;
}

const handleCreateOrUpdateReport = async (reportId = null) => {
    const formData = reportStore.createForm;

    if (reportStore.is_edit_form && reportId) {
        await reportStore.update(reportId, formData);
    } else {
        await reportStore.create(formData);
    }

}

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: () => {
            reportStore.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: () => {
            reportStore.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">{{ reportStore.indexPageTitle }}</h2>
            <Button
                severity="secondary"
                @click="openCreateModal"
            >
                <span class="text-sm">{{ reportStore.pageTitle }}</span>
                <i class="fi fi-rr-plus flex text-sm"></i>
            </Button>
        </div>
        <div class="card border-[1px] border-client-gray/20 bg-white rounded-2xl">
            <TableGeneric
                :data="reports.data"
                :columns="columns"
                :selectable="true"
                :pagination="reports.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(report => report.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-status="{ data }">
                    <Tag
                        class="!text-xs"
                        :value="data.status"
                        :severity="reportStore.getStatusSeverity(data.status)"
                    />
                </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"
                            class="!w-8 !h-8"
                            @click="openEditModal(data)"
                        >
                            <i class="fi fi-rr-pen-clip flex !text-xs"></i>
                        </Button>
                    </div>
                </template>
            </TableGeneric>
        </div>

        <UIModal
            v-model:visible="reportStore.showCreateModal"
            :title="reportStore.is_edit_form ? 'ویرایش گزارش' : 'ایجاد گزارش جدید'"
            size="medium"
            maximizable
            @hide="closeCreateModal"
        >
            <template #default="{ isFullscreen }">
                <CreateReportForm
                    :reportData="editReportData"
                    :isEdit="reportStore.is_edit_form"
                    :isFullscreen="isFullscreen"
                    @submit="handleCreateOrUpdateReport"
                    @cancel="closeCreateModal"
                />
            </template>
        </UIModal>
    </master>
</template>