254 lines
8.5 KiB
Vue
254 lines
8.5 KiB
Vue
<script setup>
|
|
import AuthLayout from '../../layouts/AuthLayout.vue'
|
|
import UiButton from '../../components/ui/UiButton.vue'
|
|
import UiInput from '../../components/ui/UiInput.vue'
|
|
import { Link } from '@inertiajs/inertia-vue3';
|
|
import provinces from '../../data/provinces.json'
|
|
import cities from '../../data/cities.json'
|
|
import UiInputWithDropdown from '../../components/ui/UiInputWithDropdown.vue';
|
|
import UiSelect from '../../components/ui/UiSelect.vue';
|
|
import { inject } from 'vue';
|
|
import { ref, onMounted } from 'vue';
|
|
import { countries } from '../../data/countries.js'
|
|
import { Inertia } from '@inertiajs/inertia';
|
|
import { toast } from 'vue3-toastify';
|
|
|
|
const props = defineProps({
|
|
phone: String
|
|
})
|
|
|
|
const route = inject('route');
|
|
|
|
const selectedCountry = ref(countries[0])
|
|
const handlePrefixChange = (country) => {
|
|
selectedCountry.value = country
|
|
}
|
|
|
|
const selectedSpecialty = ref(null)
|
|
const selectedCity = ref(null)
|
|
const selectedProvince = ref(null)
|
|
const citiesList = ref([])
|
|
const provincesList = ref(provinces)
|
|
const specialtiesList = ref([
|
|
{ id: 1, name: 'جراح عمومی' },
|
|
{ id: 2, name: 'جراح حیوانات' },
|
|
{ id: 3, name: 'جراح حیوانات و طبیعت' }
|
|
])
|
|
|
|
const formData = ref({
|
|
fullName: '',
|
|
nationalCode: '',
|
|
phone: props.phone || '',
|
|
clinicName: '',
|
|
clinicPhone: '',
|
|
address: '',
|
|
specialty: '',
|
|
province: '',
|
|
city: '',
|
|
address: '',
|
|
level: 'دانپزشک',
|
|
})
|
|
|
|
const errors = ref({})
|
|
const isLoading = ref(false)
|
|
|
|
const handleProvinceChange = (province) => {
|
|
if (province) {
|
|
const provinceId = province.id
|
|
const filteredCities = cities.filter(city => city.province_id === provinceId)
|
|
citiesList.value = filteredCities
|
|
} else {
|
|
citiesList.value = []
|
|
}
|
|
selectedCity.value = null
|
|
}
|
|
|
|
onMounted(() => {
|
|
if (props.phone) {
|
|
if (props.phone.startsWith('+')) {
|
|
const match = countries.find(c => props.phone.startsWith(c.prefix))
|
|
if (match) {
|
|
selectedCountry.value = match
|
|
formData.value.phone = props.phone.replace(match.prefix, '')
|
|
} else {
|
|
formData.value.phone = props.phone
|
|
}
|
|
} else {
|
|
formData.value.phone = props.phone
|
|
}
|
|
}
|
|
})
|
|
|
|
const handleSubmit = () => {
|
|
if (!selectedSpecialty.value) {
|
|
toast.error('لطفاً تخصص را انتخاب کنید')
|
|
return
|
|
}
|
|
|
|
if (!selectedProvince.value) {
|
|
toast.error('لطفاً استان را انتخاب کنید')
|
|
return
|
|
}
|
|
|
|
if (!selectedCity.value) {
|
|
toast.error('لطفاً شهر را انتخاب کنید')
|
|
return
|
|
}
|
|
if (!formData.value.nationalCode) {
|
|
toast.error('لطفاً کد ملی را وارد کنید')
|
|
return
|
|
}
|
|
|
|
isLoading.value = true
|
|
|
|
const fullPhone = selectedCountry.value.prefix + formData.value.phone
|
|
|
|
const submitData = {
|
|
fullName: formData.value.fullName,
|
|
national_code: formData.value.nationalCode,
|
|
specialty: selectedSpecialty.value.name,
|
|
phone: fullPhone,
|
|
clinic_name: formData.value.clinicName,
|
|
clinic_phone: formData.value.clinicPhone,
|
|
province: selectedProvince.value.name,
|
|
city: selectedCity.value.name,
|
|
address: formData.value.address,
|
|
level: 'دانپزشک'
|
|
}
|
|
|
|
Inertia.post(route('register.store'), submitData, {
|
|
onSuccess: () => {
|
|
},
|
|
onError: (errors) => {
|
|
errors.value = errors
|
|
isLoading.value = false
|
|
},
|
|
onFinish: () => {
|
|
isLoading.value = false
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AuthLayout>
|
|
<main class="p-9 h-auto w-[700px] max-sm:w-[90%] m-auto bg-white rounded-xl">
|
|
<div class="grid grid-cols-a justify-start">
|
|
<h1 class="text-[16px] font-semibold !text-dominant-800">
|
|
{{ $t('auth.RegisterVet.title').replace('%userType%', 'پزشکان') }}
|
|
</h1>
|
|
<p class="!text-dominant-800 mt-1 text-[11px] font-normal">
|
|
{{ $t('auth.RegisterVet.subtitle') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-2 content-start items-start mt-6">
|
|
<UiInput
|
|
prefix-start="نام و نام خانوادگی"
|
|
type="text"
|
|
class="!my-0 max-sm:!col-span-2"
|
|
v-model="formData.fullName"
|
|
:error="errors.first_name"
|
|
/>
|
|
<UiInput
|
|
prefix-end="کد ملی"
|
|
type="text"
|
|
convert-persian-numbers
|
|
class="!my-0 max-sm:!col-span-2"
|
|
direction="ltr"
|
|
custom-class="!font-yekanBakh !text-sm"
|
|
v-model="formData.nationalCode"
|
|
:error="errors.national_code"
|
|
/>
|
|
<UiSelect
|
|
v-model="selectedSpecialty"
|
|
:options="specialtiesList"
|
|
option-label="name"
|
|
option-value="id"
|
|
prefix-start="تخصص"
|
|
class="!my-0 max-sm:!col-span-2"
|
|
:filter="true"
|
|
filter-placeholder="جستجو در تخصصها..."
|
|
:show-clear="false"
|
|
/>
|
|
<UiInputWithDropdown
|
|
search-placeholder="Search Country Name or Phone Code ..."
|
|
dropdown-search-input-class="!text-dominant-200 !bg-dominant-50 !border-0 !pt-3 !font-normal !text-sm"
|
|
type="tel"
|
|
class="!my-0 max-sm:!col-span-2"
|
|
prefix-end="شماره موبایل"
|
|
dropdown-direction="ltr"
|
|
v-model="formData.phone"
|
|
:prefix-options="countries"
|
|
:default-prefix-value="selectedCountry.value"
|
|
direction="ltr"
|
|
@prefix-change="handlePrefixChange"
|
|
/>
|
|
<UiInput
|
|
prefix-start="نام کلینیک"
|
|
class="!mb-0 max-sm:!col-span-2"
|
|
type="text"
|
|
custom-class="!font-yekanBakh !text-sm"
|
|
v-model="formData.clinicName"
|
|
/>
|
|
<UiInput
|
|
prefix-end="تلفن کلینیک"
|
|
type="text"
|
|
direction="ltr"
|
|
class="!mb-0 max-sm:!col-span-2"
|
|
convert-persian-numbers
|
|
v-model="formData.clinicPhone"
|
|
/>
|
|
<UiSelect
|
|
v-model="selectedProvince"
|
|
:options="provincesList"
|
|
option-label="name"
|
|
option-value="id"
|
|
prefix-start="استان"
|
|
:filter="true"
|
|
filter-placeholder="جستجو در استانها..."
|
|
:show-clear="false"
|
|
class="!my-0"
|
|
@change="handleProvinceChange"
|
|
/>
|
|
<UiSelect
|
|
v-model="selectedCity"
|
|
:options="citiesList"
|
|
option-label="name"
|
|
option-value="id"
|
|
prefix-start="شهر"
|
|
class="!my-0 "
|
|
:filter="true"
|
|
filter-placeholder="جستجو در شهرها..."
|
|
:show-clear="false"
|
|
/>
|
|
|
|
<UiInput
|
|
prefix-start="آدرس"
|
|
type="text"
|
|
class="col-span-2 !mb-0"
|
|
v-model="formData.address"
|
|
/>
|
|
<UiButton
|
|
severity="dominant"
|
|
:label="isLoading ? 'در حال ثبت...' : 'تایید اطلاعات و ثبتنام'"
|
|
size="large"
|
|
full-width
|
|
outlined
|
|
class="col-span-2 mt-4 max-sm:!mt-0"
|
|
height="40px"
|
|
icon-position="start"
|
|
icon-class="!text-sm"
|
|
:loading="isLoading"
|
|
@click="handleSubmit"
|
|
/>
|
|
</div>
|
|
</main>
|
|
<template #footer>
|
|
<Link class="text-center text-[13px] font-normal text-dominant-700 mt-6" :href="route('register.chooseType')">
|
|
بازگشت
|
|
</Link>
|
|
</template>
|
|
</AuthLayout>
|
|
</template>
|