radicall/resources/js/Admin/Pages/Documents/create_and_edit.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>