Teren-app/resources/js/Components/PhoneCreateForm.vue

<script setup>
import CreateDialog from "./Dialogs/CreateDialog.vue";
import InputLabel from "./InputLabel.vue";
import SectionTitle from "./SectionTitle.vue";
import TextInput from "./TextInput.vue";
import InputError from "./InputError.vue";
import { useForm, router } from "@inertiajs/vue3";

const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  person: Object,
  types: Array,
});

// Using Inertia useForm for state, errors and processing

const emit = defineEmits(["close"]);

const close = () => {
  emit("close");

  setTimeout(() => {
    try {
      form.clearErrors && form.clearErrors();
    } catch {}
  }, 500);
};

const form = useForm({
  nu: "",
  country_code: 386,
  type_id: props.types?.[0]?.id ?? null,
  description: "",
  validated: false,
  phone_type: null,
});

const resetForm = () => {
  form.nu = "";
  form.country_code = 386;
  form.type_id = props.types?.[0]?.id ?? null;
  form.description = "";
  form.validated = false;
  form.phone_type = null;
};

const create = async () => {
  router.post(route("person.phone.create", props.person), form, {
    preserveScroll: true,
    onSuccess: () => {
      close();
      form.reset();
    },
    onError: (e) => {
      // errors are available on form.errors
    },
  });
};


const submit = () => {
  create();
};
</script>
<template>
  <CreateDialog
    :show="show"
    title="Dodaj novi telefon"
    confirm-text="Shrani"
    :processing="form.processing"
    @close="close"
    @confirm="submit"
  >
    <form @submit.prevent="submit">
      <SectionTitle class="border-b mb-4">
        <template #title> Telefon </template>
      </SectionTitle>
      <div class="col-span-6 sm:col-span-4">
        <InputLabel for="pp_nu" value="Številka" />
        <TextInput
          id="pp_nu"
          ref="pp_nuInput"
          v-model="form.nu"
          type="text"
          class="mt-1 block w-full"
          autocomplete="nu"
        />

        <InputError
          v-if="form.errors.nu !== undefined"
          v-for="err in form.errors.nu"
          :message="err"
        />
      </div>
      <div class="col-span-6 sm:col-span-4">
        <InputLabel for="pp_countrycode" value="Koda države tel." />
        <select
          class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
          id="pp_countrycode"
          v-model="form.country_code"
        >
          <option value="386">+386 (Slovenija)</option>
          <option value="385">+385 (Hrvaška)</option>
          <option value="39">+39 (Italija)</option>
          <option value="36">+39 (Madžarska)</option>
          <option value="43">+43 (Avstrija)</option>
          <option value="381">+381 (Srbija)</option>
          <option value="387">+387 (Bosna in Hercegovina)</option>
          <option value="382">+382 (Črna gora)</option>
          <!-- ... -->
        </select>

        <InputError
          v-if="form.errors.country_code !== undefined"
          v-for="err in form.errors.country_code"
          :message="err"
        />
      </div>
      <div class="col-span-6 sm:col-span-4">
        <InputLabel for="pp_type" value="Tip" />
        <select
          class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
          id="pp_type"
          v-model="form.type_id"
        >
          <option v-for="type in types" :key="type.id" :value="type.id">
            {{ type.name }}
          </option>
        </select>
      </div>
      <div class="col-span-6 sm:col-span-4">
        <InputLabel for="pp_phone_type" value="Vrsta telefona (enum)" />
        <select
          class="block w-full border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 rounded-md shadow-sm"
          id="pp_phone_type"
          v-model="form.phone_type"
        >
          <option :value="null">—</option>
          <option value="mobile">Mobilni</option>
          <option value="landline">Stacionarni</option>
          <option value="voip">VOIP</option>
        </select>
        <InputError
          v-if="form.errors.phone_type !== undefined"
          v-for="err in form.errors.phone_type"
          :message="err"
        />
      </div>
      <div class="col-span-6 sm:col-span-4">
        <label class="inline-flex items-center mt-6">
          <input
            type="checkbox"
            v-model="form.validated"
            class="rounded border-gray-300 text-indigo-600 shadow-sm focus:ring-indigo-500"
          />
          <span class="ml-2">Potrjeno</span>
        </label>
        <InputError
          v-if="form.errors.validated !== undefined"
          v-for="err in form.errors.validated"
          :message="err"
        />
      </div>
    </form>
  </CreateDialog>
</template>