116 lines
6.3 KiB
Vue
116 lines
6.3 KiB
Vue
<script setup>
|
|
import Master from "../../layouts/master.vue";
|
|
import {onMounted , onUnmounted} from 'vue';
|
|
import {usePetStore} from "../../store/Pet.js";
|
|
import {Link} from "@inertiajs/inertia-vue3";
|
|
import GlobalSelectMedium from "../../components/medium/GlobalSelectMedium.vue";
|
|
import Card from "../../components/ui/Card.vue";
|
|
|
|
const petStore = usePetStore();
|
|
|
|
const props = defineProps({
|
|
is_edit: {
|
|
type: Boolean,
|
|
default: () => false
|
|
},
|
|
pet: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
});
|
|
|
|
onMounted(() => {
|
|
if (props.is_edit) {
|
|
petStore.setEditData(props.pet);
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
petStore.resetCreateForm();
|
|
petStore.is_edit_form = false;
|
|
petStore.errorsCreateForm = [];
|
|
})
|
|
|
|
|
|
|
|
</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">{{ petStore.pageTitle }}</h2>
|
|
<Button severity="secondary" asChild v-slot="slotProps">
|
|
<Link :class="slotProps.class" :href="petStore.endpoints.index">
|
|
<span class="text-sm">{{ petStore.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="name" initialValue="" class="flex flex-col gap-1">
|
|
<label>نام کیس</label>
|
|
<InputText type="text" :class="petStore.errorsCreateForm?.name && !petStore.createForm.name ? 'p-invalid' : ''" v-model="petStore.createForm.name" placeholder="نام کیس خود را وارد کنید" />
|
|
<Message v-if="petStore.errorsCreateForm?.name"
|
|
severity="error" size="small" variant="simple">{{ petStore.errorsCreateForm?.name[0] }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="email" initialValue="" class="flex flex-col gap-1">
|
|
<label>نوع کیس</label>
|
|
<Select placeholder="انتخاب نوع کیس" v-model="petStore.createForm.type" :options="petStore.typeOptions" optionValue="value" optionLabel="label" />
|
|
<Message v-if="petStore.errorsCreateForm?.type" severity="error" size="small" variant="simple">{{ petStore.errorsCreateForm?.type[0] }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="breed" initialValue="" class="flex flex-col gap-1">
|
|
<label>نژاد</label>
|
|
<InputText type="text" v-model="petStore.createForm.breed" placeholder="نژاد را وارد کنید" />
|
|
</FormField>
|
|
<FormField v-slot="$field" name="weight" initialValue="" class="flex flex-col gap-1">
|
|
<label>وزن</label>
|
|
<InputText type="text" v-model="petStore.createForm.weight" placeholder="وزن را وارد کنید" />
|
|
<Message v-if="$field?.invalid" severity="error" size="small" variant="simple">{{ $field.error?.message }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="sterilized" initialValue="" class="flex flex-col gap-1">
|
|
<label>عقیم سازی</label>
|
|
<Select placeholder="انتخاب عقیم سازی" v-model="petStore.createForm.sterilized" optionLabel="label" optionValue="value" :options="petStore.sterilizedOptions" />
|
|
<Message v-if="petStore.errorsCreateForm?.sterilized"
|
|
severity="error" size="small" variant="simple">{{ petStore.errorsCreateForm?.sterilized[0] }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="gender" initialValue="" class="flex flex-col gap-1">
|
|
<label>جنسیت</label>
|
|
<Select placeholder="انتخاب جنسیت" v-model="petStore.createForm.gender" optionLabel="label" optionValue="value" :options="petStore.genderOptions" />
|
|
<Message v-if="petStore.errorsCreateForm?.gender" severity="error" size="small" variant="simple">{{ petStore.errorsCreateForm?.gender[0] }}</Message>
|
|
</FormField>
|
|
<FormField v-slot="$field" name="birthday" initialValue="" class="flex flex-col gap-1">
|
|
<label>تاریخ تولد</label>
|
|
<CustomDatePicker v-model="petStore.createForm.birthday" type="datetime" compact-time></CustomDatePicker>
|
|
<Message v-if="petStore.errorsCreateForm?.birthday" severity="error" size="small" variant="simple">{{ petStore.errorsCreateForm?.birthday[0] }}</Message>
|
|
</FormField>
|
|
</Form>
|
|
</div>
|
|
</Card>
|
|
<div>
|
|
<Card>
|
|
<div class="p-4 rounded-2xl pb-8">
|
|
<h5>تصویر کاربر</h5>
|
|
<global-select-medium v-model="petStore.createForm.image"></global-select-medium>
|
|
</div>
|
|
</Card>
|
|
<Card class="mt-4">
|
|
<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="petStore.createForm.datetime" class="mt-2" type="datetime" compact-time></CustomDatePicker>
|
|
</div>
|
|
<div class="grid grid-cols-1 justify-start">
|
|
<Button :loading="petStore.loaderCreateForm" @click="petStore.update_and_store" type="button" severity="secondary" :label="petStore.buttonLabel" />
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</section>
|
|
</master>
|
|
</template>
|