radicall/resources/js/Client/Pages/Auth/RegisterSupervisor.vue

<script setup>
import AuthLayout from '../../layouts/AuthLayout.vue'
import UiButton from '../../components/ui/UiButton.vue'
import UiInput from '../../components/ui/UiInput.vue'
import UiInputWithDropdown from '../../components/ui/UiInputWithDropdown.vue'
import { Link } from '@inertiajs/inertia-vue3';
import { inject } from 'vue';
import { countries } from '../../data/countries.js'
import { ref, onMounted } from 'vue';
import UiSelect from '../../components/ui/UiSelect.vue';
import provinces from '../../data/provinces.json'
import cities from '../../data/cities.json'
import { Inertia } from '@inertiajs/inertia';
import { toast } from 'vue3-toastify';

const props = defineProps({
    phone: String
})

const errors = ref([])
const isLoading = ref(false)
const route = inject('route');

const selectedCountry = ref(countries[0])

const handlePrefixChange = (country) => {
  selectedCountry.value = country
}

const selectedCity = ref(null)
const selectedProvince = ref(null)
const citiesList = ref([])
const provincesList = ref(provinces);

const formData = ref({
    fullName: '',
    nationalCode: '',
    phone: props.phone || '',
    address: '',
    province: '',
    city: '',
    address: '',
    level: 'سرپرست',
})

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 (!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,
        phone: fullPhone,
        province: selectedProvince.value.name,
        city: selectedCity.value.name,
        address: formData.value.address,
        level: formData.value.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.RegisterSupervisor.title').replace('%userType%', 'سرپرستان') }}
                </h1>
                <p class="!text-dominant-800 mt-1 text-[11px] font-normal">
                    {{ $t('auth.RegisterSupervisor.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"
                />
                <UiInput
                    prefix-end="کد ملی"
                    type="text"
                    convert-persian-numbers
                    direction="ltr"
                    class="!my-0 max-sm:!col-span-2"
                    custom-class="!font-yekanBakh !text-sm"
                    v-model="formData.nationalCode"
                    :error="errors.national_code"
                />
                <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 !col-span-2"
                    prefix-end="شماره موبایل"
                    dropdown-direction="ltr"
                    :prefix-options="countries"
                    :default-prefix-value="selectedCountry.value"
                    direction="ltr"
                    v-model="formData.phone"
                    @prefix-change="handlePrefixChange"
                />
                <UiSelect
                    v-model="selectedProvince"
                    :options="provincesList"
                    option-label="name"
                    option-value="id"
                    prefix-start="استان"
                    :filter="true"
                    filter-placeholder="جستجو در استانها..."
                    :show-clear="false"
                    class="!my-0 max-sm:col-span-2"
                    @change="handleProvinceChange"
                />
                <UiSelect
                    v-model="selectedCity"
                    :options="citiesList"
                    option-label="name"
                    option-value="id"
                    prefix-start="شهر"
                    :filter="true"
                    class="!my-0 max-sm:col-span-2"
                    filter-placeholder="جستجو در شهرها..."
                    :show-clear="false"
                />

                <UiInput
                    prefix-start="آدرس"
                    type="text"
                    class="!my-0 col-span-2"
                    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>