changes

2025-01-02 18:38:47 +01:00
parent 0c3bbfe18f
commit 0f8cfd3f16
41 changed files with 2013 additions and 591 deletions
@@ -0,0 +1,193 @@
+<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>