complete Complete User Request Submission section RAD-1
This commit is contained in:
@@ -0,0 +1,194 @@
|
||||
<script setup>
|
||||
import Master from "../../layouts/master.vue";
|
||||
import {onMounted , onUnmounted} from 'vue';
|
||||
import {useDocumentStore} from "../../store/Document.js";
|
||||
import {Link} from "@inertiajs/inertia-vue3";
|
||||
import GlobalSelectMedium from "../../components/medium/GlobalSelectMedium.vue";
|
||||
import Card from "../../components/ui/Card.vue";
|
||||
import UISelect from "../../components/ui/UISelect.vue";
|
||||
|
||||
const documentStore = useDocumentStore();
|
||||
|
||||
const props = defineProps({
|
||||
is_edit: {
|
||||
type: Boolean,
|
||||
default: () => false
|
||||
},
|
||||
document: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
},
|
||||
pets: {
|
||||
type: Object,
|
||||
default: () => []
|
||||
}
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
documentStore.petOptions = props.pets;
|
||||
if (props.is_edit) {
|
||||
documentStore.setEditData(props.document);
|
||||
}
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
documentStore.resetCreateForm();
|
||||
documentStore.is_edit_form = false;
|
||||
documentStore.errorsCreateForm = [];
|
||||
})
|
||||
|
||||
const removePrimaryFile = (index) => {
|
||||
documentStore.createForm.primary_files.splice(index, 1);
|
||||
}
|
||||
|
||||
const removeHistoryFile = (index) => {
|
||||
documentStore.createForm.history_files.splice(index, 1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<master>
|
||||
<Card class="mb-4">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-[1fr_auto] justify-between items-center gap-4">
|
||||
<h2 class="font-bold text-client-Fontcolor">{{ documentStore.pageTitle }}</h2>
|
||||
<Button severity="secondary" asChild v-slot="slotProps">
|
||||
<Link :class="slotProps.class" :href="documentStore.endpoints.index">
|
||||
<span class="text-sm">{{ documentStore.indexPageTitle }}</span>
|
||||
<i class="fi fi-rr-list flex text-sm"></i>
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
<section class="grid w-full grid-cols-1 lg:grid-cols-[1fr_22rem] gap-4">
|
||||
<Card>
|
||||
<div class="rounded-2xl bg-white">
|
||||
<Form ref="formRef" v-slot="$form" class=" p-4 grid grid-cols-2 gap-4 !w-full">
|
||||
<FormField v-slot="$field" name="modality" initialValue="" class="flex flex-col gap-1">
|
||||
<label>نوع درخواست</label>
|
||||
<UISelect
|
||||
placeholder="انتخاب نوع درخواست"
|
||||
v-model="documentStore.createForm.modality"
|
||||
:options="documentStore.modalityOptions"
|
||||
optionValue="value"
|
||||
optionLabel="label"
|
||||
/>
|
||||
<Message v-if="documentStore.errorsCreateForm?.modality" severity="error" size="small" variant="simple">{{ documentStore.errorsCreateForm?.modality[0] }}</Message>
|
||||
</FormField>
|
||||
<FormField v-slot="$field" name="priority" initialValue="" class="flex flex-col gap-1">
|
||||
<label>اولویت</label>
|
||||
<UISelect
|
||||
placeholder="انتخاب اولویت"
|
||||
v-model="documentStore.createForm.priority"
|
||||
:options="documentStore.priorityOptions"
|
||||
optionValue="value"
|
||||
optionLabel="label"
|
||||
/>
|
||||
<Message v-if="documentStore.errorsCreateForm?.priority" severity="error" size="small" variant="simple">{{ documentStore.errorsCreateForm?.priority[0] }}</Message>
|
||||
</FormField>
|
||||
<FormField v-slot="$field" name="status" initialValue="" class="flex flex-col gap-1">
|
||||
<label>وضعیت</label>
|
||||
<UISelect
|
||||
placeholder="انتخاب وضعیت"
|
||||
v-model="documentStore.createForm.status"
|
||||
:options="documentStore.statusOptions"
|
||||
optionValue="value"
|
||||
optionLabel="label"
|
||||
/>
|
||||
<Message v-if="documentStore.errorsCreateForm?.status" severity="error" size="small" variant="simple">{{ documentStore.errorsCreateForm?.status[0] }}</Message>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="$field" name="pet_id" initialValue="" class="flex flex-col gap-1">
|
||||
<label>انتخاب کیس</label>
|
||||
<UISelect
|
||||
placeholder="انتخاب کیس"
|
||||
v-model="documentStore.createForm.pet_id"
|
||||
:options="documentStore.petOptions"
|
||||
optionValue="value"
|
||||
optionLabel="label"
|
||||
:filter="true"
|
||||
searchUrl="/admin/pets-options"
|
||||
searchParam="search"
|
||||
@update:options="documentStore.petOptions = $event"
|
||||
/>
|
||||
<Message v-if="documentStore.errorsCreateForm?.pet_id" severity="error" size="small" variant="simple">{{ documentStore.errorsCreateForm?.pet_id[0] }}</Message>
|
||||
</FormField>
|
||||
<FormField v-slot="$field" name="submitted_at" initialValue="" class="flex flex-col gap-1">
|
||||
<label>تاریخ ثبت</label>
|
||||
<CustomDatePicker v-model="documentStore.createForm.submitted_at" class="!text-xs" type="datetime" compact-time></CustomDatePicker>
|
||||
<Message v-if="documentStore.errorsCreateForm?.submitted_at" severity="error" size="small" variant="simple">{{ documentStore.errorsCreateForm?.submitted_at[0] }}</Message>
|
||||
</FormField>
|
||||
<FormField v-slot="$field" name="processing_deadline" initialValue="" class="flex flex-col gap-1">
|
||||
<label>مهلت پردازش</label>
|
||||
<CustomDatePicker v-model="documentStore.createForm.processing_deadline" class="!text-xs" type="datetime" compact-time></CustomDatePicker>
|
||||
<Message v-if="documentStore.errorsCreateForm?.processing_deadline" severity="error" size="small" variant="simple">{{ documentStore.errorsCreateForm?.processing_deadline[0] }}</Message>
|
||||
</FormField>
|
||||
<FormField v-slot="$field" name="note" initialValue="" class="flex flex-col col-span-2 gap-1">
|
||||
<label>متن درخواست</label>
|
||||
<Textarea type="text" class="placeholder:!text-sm" v-model="documentStore.createForm.note" placeholder="متن درخواست را وارد کنید" />
|
||||
</FormField>
|
||||
<div class="grid grid-cols-2 col-span-2 gap-4">
|
||||
<Card class="mt-4">
|
||||
<div class="p-4 rounded-2xl pb-8">
|
||||
<h5>فایلهای اصلی</h5>
|
||||
<global-select-medium v-model="documentStore.createForm.primary_files" :multiple="true" @remove-item="removePrimaryFile" upload-endpoint="/admin/documents-upload"></global-select-medium>
|
||||
<Message v-if="documentStore.errorsCreateForm?.primary_files" severity="error" size="small" variant="simple">{{ documentStore.errorsCreateForm?.primary_files[0] }}</Message>
|
||||
|
||||
</div>
|
||||
</Card>
|
||||
<Card class="mt-4">
|
||||
<div class="p-4 rounded-2xl pb-8">
|
||||
<h5>فایلهای سابقه</h5>
|
||||
<global-select-medium v-model="documentStore.createForm.history_files" :multiple="true" @remove-item="removeHistoryFile" upload-endpoint="/admin/documents-upload"></global-select-medium>
|
||||
<Message v-if="documentStore.errorsCreateForm?.history_files" severity="error" size="small" variant="simple">{{ documentStore.errorsCreateForm?.history_files[0] }}</Message>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</Card>
|
||||
<div class="gap-4">
|
||||
<Card class="grid grid-cols-1 content-start justify-start ">
|
||||
<div class="p-4 grid grid-cols-1 gap-4 rounded-2xl">
|
||||
<div class="grid grid-cols-1 justify-between items-center">
|
||||
<span>زمان انتشار:</span>
|
||||
<CustomDatePicker v-model="documentStore.createForm.datetime" class="!text-xs mt-2" type="datetime" compact-time></CustomDatePicker>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 justify-start">
|
||||
<Button :loading="documentStore.loaderCreateForm" @click="documentStore.update_and_store" type="button" severity="secondary" :label="documentStore.buttonLabel" />
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</master>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.p-multiselect {
|
||||
height: auto;
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
.p-multiselect-label {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.p-multiselect .p-multiselect-header {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.p-multiselect .p-multiselect-filter {
|
||||
max-height: calc(100px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.p-multiselect .p-multiselect-item {
|
||||
font-size: 0.875rem;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,301 @@
|
||||
<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 { useDocumentStore } from "../../store/Document.js";
|
||||
import { useUserStore } from "../../store/User.js";
|
||||
import { usePetStore } from "../../store/Pet.js";
|
||||
const documentStore = useDocumentStore();
|
||||
const toast = useToast();
|
||||
const userStore = useUserStore();
|
||||
const petStore = usePetStore();
|
||||
const props = defineProps({
|
||||
documents: {
|
||||
type: Object,
|
||||
},
|
||||
search: {
|
||||
type: String
|
||||
},
|
||||
status: {
|
||||
type: String
|
||||
},
|
||||
priority: {
|
||||
type: String
|
||||
},
|
||||
pet: {
|
||||
type: String
|
||||
},
|
||||
permissions_edit: {
|
||||
type: Boolean
|
||||
},
|
||||
permissions_delete: {
|
||||
type: Boolean
|
||||
}
|
||||
})
|
||||
|
||||
const documents = ref(props.documents ?? []);
|
||||
const selectedItems = ref([]);
|
||||
const searchLoader = ref(false);
|
||||
const filterLoader = ref(false);
|
||||
|
||||
const columns = ref(documentStore.columns)
|
||||
|
||||
const queryParams = reactive({
|
||||
search: props.search ?? '',
|
||||
status: props.status ?? '',
|
||||
priority: props.priority ?? '',
|
||||
pet: props.pet ?? '',
|
||||
})
|
||||
|
||||
const filters = ref({
|
||||
status: props.status ?? '',
|
||||
priority: props.priority ?? '',
|
||||
pet: props.pet ?? '',
|
||||
})
|
||||
|
||||
const confirm = useConfirm();
|
||||
|
||||
const onPageChange = (event) => {
|
||||
documentStore.navigateToPage(event.page + 1);
|
||||
};
|
||||
|
||||
const searchData = () => {
|
||||
searchLoader.value = true;
|
||||
|
||||
const searchParams = {
|
||||
...(queryParams.search && { search: queryParams.search }),
|
||||
...(queryParams.status && { status: queryParams.status }),
|
||||
...(queryParams.priority && { priority: queryParams.priority }),
|
||||
...(queryParams.pet && { pet: queryParams.pet }),
|
||||
...documentStore.convertFiltersToArrayParams(filters.value)
|
||||
};
|
||||
documentStore.search(searchParams);
|
||||
}
|
||||
|
||||
const exportData = () => {
|
||||
const exportParams = {
|
||||
...(queryParams.search && { search: queryParams.search }),
|
||||
...(queryParams.status && { status: queryParams.status }),
|
||||
...(queryParams.priority && { priority: queryParams.priority }),
|
||||
...(queryParams.pet && { pet: queryParams.pet }),
|
||||
...documentStore.convertFiltersToArrayParams(filters.value)
|
||||
};
|
||||
documentStore.exportData(exportParams);
|
||||
}
|
||||
|
||||
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: () => {
|
||||
documentStore.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: () => {
|
||||
documentStore.bulkDelete(ids);
|
||||
},
|
||||
reject: () => {
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
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 = {
|
||||
status: null,
|
||||
priority: null,
|
||||
pet: null,
|
||||
};
|
||||
queryParams.status = '';
|
||||
queryParams.priority = '';
|
||||
queryParams.pet = '';
|
||||
searchData();
|
||||
};
|
||||
|
||||
</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">{{ documentStore.indexPageTitle }}</h2>
|
||||
<Button severity="secondary" asChild v-slot="slotProps">
|
||||
<Link :class="slotProps.class" :href="documentStore.endpoints.create">
|
||||
<span class="text-sm">{{ documentStore.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="documents.data"
|
||||
:columns="columns"
|
||||
:selectable="true"
|
||||
:pagination="documents.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"
|
||||
@clear-filters="clearFilters"
|
||||
@apply-filters="applyFilters"
|
||||
>
|
||||
<template #bulk-action="{ selection }">
|
||||
<Button
|
||||
v-if="!permissions_delete"
|
||||
label="حذف همه"
|
||||
size="small"
|
||||
:pt="{icon : 'flex'}"
|
||||
icon="fi fi-rr-trash"
|
||||
severity="danger"
|
||||
class="!text-xs !flex"
|
||||
outlined
|
||||
@click="() => confirmDeleteSelected(selection.map(document => document.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="documentStore.getStatusSeverity(data.status)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #column-priority="{ data }">
|
||||
<Tag
|
||||
class="!text-xs"
|
||||
:value="data.priority"
|
||||
:severity="documentStore.getPrioritySeverity(data.priority)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #column-requester="{ data }">
|
||||
<div class="grid grid-cols-2a justify-start gap-2">
|
||||
<span class="text-right text-sm">{{ data.requester?.fullname }}</span>
|
||||
<Link :href="userStore.endpoints.edit(data.requester?.id)" class="text-sm">
|
||||
<i class="fi fi-rr-eye flex !text-xs !text-client-Fontcolor/40"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #column-pet="{ data }">
|
||||
<div class="grid grid-cols-2a justify-start gap-2">
|
||||
<span class="text-right text-sm">{{ data.pet?.name }}</span>
|
||||
<Link :href="petStore.endpoints.edit(data.pet?.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="documentStore.endpoints.edit(data.id)">
|
||||
<i class="fi fi-rr-pen-clip flex !text-xs"></i>
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</template>
|
||||
</TableGeneric>
|
||||
</div>
|
||||
</master>
|
||||
</template>
|
||||
Reference in New Issue
Block a user