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

<script setup>
import { ref, watch } from 'vue';
import Drawer from './Drawer.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 axios from 'axios';

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

const processing = ref(false);
const errors = ref({});

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

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

  setTimeout(() => {
    errors.value = {};
  }, 500);
}

const form = ref({
  nu: '',
  country_code: 386,
  type_id: props.types[0].id,
  description: ''
});

const resetForm = () => {
  form.value = {
    nu: '',
    country_code: 386,
    type_id: props.types[0].id,
    description: ''
  }
};

const create = async () => {
  processing.value = true;
  errors.value = {};

  const data = await axios({
    method: 'post',
    url: route('person.phone.create', props.person),
    data: form.value
  }).then((response) => {
    props.person.phones.push(response.data.phone);

    processing.value = false;

    close();
    resetForm();
  }).catch((reason) => {
    errors.value = reason.response.data.errors;
    processing.value = false;
  });
};

const update = async () => {
  processing.value = true;
  errors.value = {};

  const data = await axios({
    method: 'put',
    url: route('person.phone.update', {person: props.person, phone_id: props.id}),
    data: form.value
  }).then((response) => {
    const index = props.person.phones.findIndex( p => p.id === response.data.phone.id );
    props.person.phones[index] = response.data.phone;

    processing.value = false;
    close();
    resetForm();
  }).catch((reason) => {
    errors.value = reason.response.data.errors;
    processing.value = false;
  });
}

watch(
  () => props.id,
  ((id) => {
    if ( id !== 0 && props.edit ){
      const index = props.person.phones.findIndex( p => p.id === id );
      form.value.nu = props.person.phones[index].nu;
      form.value.country_code = props.person.phones[index].country_code;
      form.value.type_id = props.person.phones[index].type_id;
      form.value.description = props.person.phones[index].description;
      return;
    }

    resetForm();

  })
);

const submit = () => {
  if( props.edit ) {
    update();
  } else {
    create();
  }
}

</script>
<template>
  <Drawer
    :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="errors.nu !== undefined" v-for="err in 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="errors.country_code !== undefined" v-for="err in 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="flex justify-end mt-4">

          <PrimaryButton :class="{ 'opacity-25': processing }" :disabled="processing">
              Shrani
          </PrimaryButton>
        </div>
      </form>
    </template>
  </Drawer>
</template>