169 lines
9.0 KiB
Vue
169 lines
9.0 KiB
Vue
<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" 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" 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" 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="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>
|