complete Complete User Request Submission section RAD-1
This commit is contained in:
@@ -0,0 +1,265 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user