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

<script setup>
import { ref, watch } from "vue";
import DialogModal from "./DialogModal.vue";
import InputLabel from "./InputLabel.vue";
import SectionTitle from "./SectionTitle.vue";
import TextInput from "./TextInput.vue";
import InputError from "./InputError.vue";
import PrimaryButton from "./PrimaryButton.vue";
import { useForm, router } from "@inertiajs/vue3";

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

// 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 update = async () => {
  router.put(
    route("person.phone.update", { person: props.person, phone_id: props.id }),
    form,
    {
      preserveScroll: true,
      onSuccess: () => {
        close();
        form.reset();
      },
      onError: (e) => {
        // errors are available on form.errors
      },
    }
  );
};

function hydrateFromProps() {
  if (props.edit && props.id) {
    const p = props.person?.phones?.find((x) => x.id === props.id);
    if (p) {
      form.nu = p.nu || "";
      form.country_code = p.country_code ?? 386;
      form.type_id = p.type_id ?? (props.types?.[0]?.id ?? null);
      form.description = p.description || "";
      form.validated = !!p.validated;
      form.phone_type = p.phone_type ?? null;
      return;
    }
  }
  resetForm();
}

watch(() => props.id, () => hydrateFromProps());
watch(() => props.show, (val) => { if (val) hydrateFromProps(); });

const submit = () => {
  if (props.edit) {
    update();
  } else {
    create();
  }
};
</script>
<template>
  <DialogModal :show="show" @close="close">
    <template #title>
      <span v-if="edit">Spremeni telefon</span>
      <span v-else>Dodaj novi telefon</span>
    </template>
    <template #content>
      <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>
        <div class="flex justify-end mt-4">
          <PrimaryButton
            :class="{ 'opacity-25': form.processing }"
            :disabled="form.processing"
          >
            Shrani
          </PrimaryButton>
        </div>
      </form>
    </template>
  </DialogModal>
</template>