#4 - fix

resources/js/Pages/Users/Create.vue

@@ -11,7 +11,7 @@
         </div>
         <form
             class="border-t border-gray-200 px-6"
-            @submit.prevent="form.post('/users')"
+            @submit.prevent="createUser"
         >
             <div class="sm:grid sm:grid-cols-3 py-4 items-center">
                 <label
@@ -59,7 +59,6 @@
                     </p>
                 </div>
             </div>
-            <div>
             <Listbox
                 v-model="form.employmentForm"
                 as="div"
@@ -69,13 +68,13 @@
                     Forma zatrudnienia
                 </ListboxLabel>
                 <div class="mt-1 relative sm:mt-0 sm:col-span-2">
-                        <ListboxButton class="bg-white relative w-full max-w-lg border border-gray-300 rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default focus:outline-none focus:ring-1 focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm">
+                    <ListboxButton
-                            <span class="block truncate">{{ form.employmentForm }}</span>
+                        class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
+                        :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
+                    >
+                        <span class="block truncate">{{ form.employmentForm.label }}</span>
                         <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
-                                <SelectorIcon
+                            <SelectorIcon class="h-5 w-5 text-gray-400" />
-                                    class="h-5 w-5 text-gray-400"
-                                    aria-hidden="true"
-                                />
                         </span>
                     </ListboxButton>
 
@@ -90,7 +89,7 @@
                                 :key="employmentForm.value"
                                 v-slot="{ active, selected }"
                                 as="template"
-                                    :value="employmentForm.value"
+                                :value="employmentForm"
                             >
                                 <li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
                                     <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
@@ -101,18 +100,20 @@
                                         v-if="selected"
                                         :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
                                     >
-                                            <CheckIcon
+                                        <CheckIcon class="h-5 w-5" />
-                                                class="h-5 w-5"
-                                                aria-hidden="true"
-                                            />
                                     </span>
                                 </li>
                             </ListboxOption>
                         </ListboxOptions>
                     </transition>
+                    <p
+                        v-if="form.errors.employmentForm"
+                        class="mt-2 text-sm text-red-600"
+                    >
+                        {{ form.errors.employmentForm }}
+                    </p>
                 </div>
             </Listbox>
-            </div>
             <div class="sm:grid sm:grid-cols-3 py-4 items-center">
                 <label
                     for="employment_date"
@@ -185,11 +186,21 @@ export default {
         const form = useForm({
             name: null,
             email: null,
-            employmentForm: props.employmentForms[0].value,
+            employmentForm: props.employmentForms[0],
             employmentDate: new Date(),
         });
 
         return { form };
+    },
+    methods: {
+        createUser() {
+            this.form
+                .transform(data => ({
+                    ...data,
+                    employmentForm: data.employmentForm.value,
+                }))
+                .post('/users');
+        },
     }
 };
 </script>

resources/js/Pages/Users/Edit.vue

@@ -11,7 +11,7 @@
         </div>
         <form
             class="border-t border-gray-200 px-6"
-            @submit.prevent="form.put(`/users/${user.id}`)"
+            @submit.prevent="editUser"
         >
             <div class="sm:grid sm:grid-cols-3 py-4 items-center">
                 <label
@@ -59,28 +59,53 @@
                     </p>
                 </div>
             </div>
-            <div class="sm:grid sm:grid-cols-3 py-4 items-center">
+            <Listbox
-                <label
-                    for="employment_form"
-                    class="block text-sm font-medium text-gray-700 sm:mt-px"
-                >
-                    Forma zatrudnienia
-                </label>
-                <div class="mt-1 sm:mt-0 sm:col-span-2">
-                    <select
-                        id="employment_form"
                 v-model="form.employmentForm"
-                        class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
+                as="div"
+                class="sm:grid sm:grid-cols-3 py-4 items-center"
+            >
+                <ListboxLabel class="block text-sm font-medium text-gray-700">
+                    Forma zatrudnienia
+                </ListboxLabel>
+                <div class="mt-1 relative sm:mt-0 sm:col-span-2">
+                    <ListboxButton
+                        class="bg-white relative w-full max-w-lg border rounded-md shadow-sm pl-3 pr-10 py-2 text-left cursor-default sm:text-sm focus:ring-1"
                         :class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.employmentForm, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.employmentForm }"
                     >
-                        <option
+                        <span class="block truncate">{{ form.employmentForm.label }}</span>
+                        <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
+                            <SelectorIcon class="h-5 w-5 text-gray-400" />
+                        </span>
+                    </ListboxButton>
+
+                    <transition
+                        leave-active-class="transition ease-in duration-100"
+                        leave-from-class="opacity-100"
+                        leave-to-class="opacity-0"
+                    >
+                        <ListboxOptions class="absolute z-10 mt-1 w-full max-w-lg bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+                            <ListboxOption
                                 v-for="employmentForm in employmentForms"
                                 :key="employmentForm.value"
-                            :value="employmentForm.value"
+                                v-slot="{ active, selected }"
+                                as="template"
+                                :value="employmentForm"
                             >
+                                <li :class="[active ? 'text-white bg-blumilk-600' : 'text-gray-900', 'cursor-default select-none relative py-2 pl-3 pr-9']">
+                                    <span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
                                         {{ employmentForm.label }}
-                        </option>
+                                    </span>
-                    </select>
+
+                                    <span
+                                        v-if="selected"
+                                        :class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
+                                    >
+                                        <CheckIcon class="h-5 w-5" />
+                                    </span>
+                                </li>
+                            </ListboxOption>
+                        </ListboxOptions>
+                    </transition>
                     <p
                         v-if="form.errors.employmentForm"
                         class="mt-2 text-sm text-red-600"
@@ -88,7 +113,7 @@
                         {{ form.errors.employmentForm }}
                     </p>
                 </div>
-            </div>
+            </Listbox>
             <div class="sm:grid sm:grid-cols-3 py-4 items-center">
                 <label
                     for="employment_date"
@@ -136,11 +161,20 @@
 <script>
 import {useForm} from '@inertiajs/inertia-vue3';
 import FlatPickr from 'vue-flatpickr-component';
+import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from '@headlessui/vue';
+import {CheckIcon, SelectorIcon} from '@heroicons/vue/solid';
 
 export default {
     employmentDate: 'UserEdit',
     components: {
         FlatPickr,
+        Listbox,
+        ListboxButton,
+        ListboxLabel,
+        ListboxOption,
+        ListboxOptions,
+        CheckIcon,
+        SelectorIcon,
     },
     props: {
         employmentForms: {
@@ -156,11 +190,21 @@ export default {
         const form = useForm({
             name: props.user.name,
             email: props.user.email,
-            employmentForm: props.user.employmentForm,
+            employmentForm: props.employmentForms.find(form => form.value === props.user.employmentForm),
             employmentDate: new Date(props.user.employmentDate),
         });
 
         return { form };
+    },
+    methods: {
+        editUser() {
+            this.form
+                .transform(data => ({
+                    ...data,
+                    employmentForm: data.employmentForm.value,
+                }))
+                .put(`/users/${this.user.id}`);
+        },
     }
 };
 </script>