Changes

resources/js/Components/PersonInfo/PhoneUpdateForm.vue

@@ -6,12 +6,7 @@ import * as z from "zod";
 import { router } from "@inertiajs/vue3";
 import UpdateDialog from "../Dialogs/UpdateDialog.vue";
 import SectionTitle from "../SectionTitle.vue";
-import {
-  FormControl,
-  FormItem,
-  FormLabel,
-  FormMessage,
-} from "@/Components/ui/form";
+import { FormControl, FormItem, FormLabel, FormMessage } from "@/Components/ui/form";
 import { Input } from "@/Components/ui/input";
 import {
   Select,
@@ -108,7 +103,7 @@ function hydrateFromProps() {
       form.setValues({
         nu: p.nu || "",
         country_code: p.country_code ?? 386,
-        type_id: p.type_id ?? (props.types?.[0]?.id ?? null),
+        type_id: p.type_id ?? props.types?.[0]?.id ?? null,
         description: p.description || "",
         validated: !!p.validated,
         phone_type: p.phone_type ?? null,
@@ -119,8 +114,17 @@ function hydrateFromProps() {
   resetForm();
 }
 
-watch(() => props.id, () => hydrateFromProps(), { immediate: true });
-watch(() => props.show, (val) => { if (val) hydrateFromProps(); });
+watch(
+  () => props.id,
+  () => hydrateFromProps(),
+  { immediate: true }
+);
+watch(
+  () => props.show,
+  (val) => {
+    if (val) hydrateFromProps();
+  }
+);
 
 const update = async () => {
   processing.value = true;
@@ -175,7 +179,12 @@ const onSubmit = form.handleSubmit(() => {
           <FormItem>
             <FormLabel>Številka</FormLabel>
             <FormControl>
-              <Input type="text" placeholder="Številka telefona" autocomplete="tel" v-bind="componentField" />
+              <Input
+                type="text"
+                placeholder="Številka telefona"
+                autocomplete="tel"
+                v-bind="componentField"
+              />
             </FormControl>
             <FormMessage />
           </FormItem>
@@ -191,7 +200,11 @@ const onSubmit = form.handleSubmit(() => {
                 </SelectTrigger>
               </FormControl>
               <SelectContent>
-                <SelectItem v-for="option in countryOptions" :key="option.value" :value="option.value">
+                <SelectItem
+                  v-for="option in countryOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
                   {{ option.label }}
                 </SelectItem>
               </SelectContent>
@@ -229,7 +242,11 @@ const onSubmit = form.handleSubmit(() => {
                 </SelectTrigger>
               </FormControl>
               <SelectContent>
-                <SelectItem v-for="option in phoneTypeOptions" :key="option.value" :value="option.value">
+                <SelectItem
+                  v-for="option in phoneTypeOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
                   {{ option.label }}
                 </SelectItem>
               </SelectContent>
@@ -238,6 +255,16 @@ const onSubmit = form.handleSubmit(() => {
           </FormItem>
         </FormField>
 
+        <FormField v-slot="{ componentField }" name="description">
+          <FormItem>
+            <FormLabel>Opis</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Opis" v-bind="componentField" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
         <FormField v-slot="{ value, handleChange }" name="validated">
           <FormItem class="flex flex-row items-start space-x-3 space-y-0">
             <FormControl>