Dev branch

2025-11-02 12:31:01 +01:00
parent 5f879c9436
commit 63e0958b66
241 changed files with 17686 additions and 7327 deletions
@@ -0,0 +1,229 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useForm, Field as FormField } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import * as z from "zod";
+import { router } from "@inertiajs/vue3";
+import CreateDialog from "../Dialogs/CreateDialog.vue";
+import SectionTitle from "../SectionTitle.vue";
+import {
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/Components/ui/form";
+import { Input } from "@/Components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/Components/ui/select";
+import { Checkbox } from "@/Components/ui/checkbox";
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  person: Object,
+  types: Array,
+});
+
+const emit = defineEmits(["close"]);
+
+const formSchema = toTypedSchema(
+  z.object({
+    nu: z.string().min(1, "Številka je obvezna."),
+    country_code: z.number().default(386),
+    type_id: z.number().nullable(),
+    description: z.string().optional(),
+    validated: z.boolean().default(false),
+    phone_type: z.string().nullable().optional(),
+  })
+);
+
+const form = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    nu: "",
+    country_code: 386,
+    type_id: props.types?.[0]?.id ?? null,
+    description: "",
+    validated: false,
+    phone_type: null,
+  },
+});
+
+const processing = ref(false);
+
+const close = () => {
+  emit("close");
+  setTimeout(() => {
+    form.resetForm();
+    processing.value = false;
+  }, 500);
+};
+
+const resetForm = () => {
+  form.resetForm({
+    values: {
+      nu: "",
+      country_code: 386,
+      type_id: props.types?.[0]?.id ?? null,
+      description: "",
+      validated: false,
+      phone_type: null,
+    },
+  });
+};
+
+const countryOptions = [
+  { value: 386, label: "+386 (Slovenija)" },
+  { value: 385, label: "+385 (Hrvaška)" },
+  { value: 39, label: "+39 (Italija)" },
+  { value: 36, label: "+36 (Madžarska)" },
+  { value: 43, label: "+43 (Avstrija)" },
+  { value: 381, label: "+381 (Srbija)" },
+  { value: 387, label: "+387 (Bosna in Hercegovina)" },
+  { value: 382, label: "+382 (Črna gora)" },
+];
+
+const phoneTypeOptions = [
+  { value: null, label: "—" },
+  { value: "mobile", label: "Mobilni" },
+  { value: "landline", label: "Stacionarni" },
+  { value: "voip", label: "VOIP" },
+];
+
+const create = async () => {
+  processing.value = true;
+  const { values } = form;
+
+  router.post(
+    route("person.phone.create", props.person),
+    values,
+    {
+      preserveScroll: true,
+      onSuccess: () => {
+        close();
+        resetForm();
+      },
+      onError: (errors) => {
+        Object.keys(errors).forEach((field) => {
+          const errorMessages = Array.isArray(errors[field])
+            ? errors[field]
+            : [errors[field]];
+          form.setFieldError(field, errorMessages[0]);
+        });
+        processing.value = false;
+      },
+      onFinish: () => {
+        processing.value = false;
+      },
+    }
+  );
+};
+
+const onSubmit = form.handleSubmit(() => {
+  create();
+});
+</script>
+
+<template>
+  <CreateDialog
+    :show="show"
+    title="Dodaj novi telefon"
+    confirm-text="Shrani"
+    :processing="processing"
+    @close="close"
+    @confirm="onSubmit"
+  >
+    <form @submit.prevent="onSubmit">
+      <SectionTitle class="border-b mb-4">
+        <template #title> Telefon </template>
+      </SectionTitle>
+
+      <div class="space-y-4">
+        <FormField v-slot="{ componentField }" name="nu">
+          <FormItem>
+            <FormLabel>Številka</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Številka telefona" autocomplete="tel" v-bind="componentField" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="country_code">
+          <FormItem>
+            <FormLabel>Koda države tel.</FormLabel>
+            <Select :model-value="value" @update:model-value="handleChange">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Izberi kodo države" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectItem v-for="option in countryOptions" :key="option.value" :value="option.value">
+                  {{ option.label }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="type_id">
+          <FormItem>
+            <FormLabel>Tip</FormLabel>
+            <Select :model-value="value" @update:model-value="handleChange">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Izberi tip" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectItem v-for="type in types" :key="type.id" :value="type.id">
+                  {{ type.name }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="phone_type">
+          <FormItem>
+            <FormLabel>Vrsta telefona (enum)</FormLabel>
+            <Select :model-value="value" @update:model-value="handleChange">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Izberi vrsto" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectItem v-for="option in phoneTypeOptions" :key="option.value" :value="option.value">
+                  {{ option.label }}
+                </SelectItem>
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ value, handleChange }" name="validated">
+          <FormItem class="flex flex-row items-start space-x-3 space-y-0">
+            <FormControl>
+              <Checkbox :checked="value" @update:checked="handleChange" />
+            </FormControl>
+            <div class="space-y-1 leading-none">
+              <FormLabel class="cursor-pointer">Potrjeno</FormLabel>
+            </div>
+          </FormItem>
+        </FormField>
+      </div>
+    </form>
+  </CreateDialog>
+</template>