From c8e15dbfa49904060932281ce2e3f94bf730d8ae Mon Sep 17 00:00:00 2001
From: Adrian Hopek <adrian.hopek@blumilk.pl>
Date: Tue, 18 Jan 2022 11:18:39 +0100
Subject: [PATCH] #4 - fix

---
 resources/js/Pages/Users/Create.vue | 119 +++++++++++++++-------------
 resources/js/Pages/Users/Edit.vue   |  88 +++++++++++++++-----
 2 files changed, 131 insertions(+), 76 deletions(-)

diff --git a/resources/js/Pages/Users/Create.vue b/resources/js/Pages/Users/Create.vue
index 1763961..e724e72 100644
--- a/resources/js/Pages/Users/Create.vue
+++ b/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,60 +59,61 @@
                     </p>
                 </div>
             </div>
-            <div>
-                <Listbox
-                    v-model="form.employmentForm"
-                    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 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">
-                            <span class="block truncate">{{ form.employmentForm }}</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"
-                                    aria-hidden="true"
-                                />
-                            </span>
-                        </ListboxButton>
+            <Listbox
+                v-model="form.employmentForm"
+                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 }"
+                    >
+                        <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"
-                                    v-slot="{ active, selected }"
-                                    as="template"
-                                    :value="employmentForm.value"
-                                >
-                                    <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 }}
-                                        </span>
+                    <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"
+                                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 }}
+                                    </span>
 
-                                        <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"
-                                                aria-hidden="true"
-                                            />
-                                        </span>
-                                    </li>
-                                </ListboxOption>
-                            </ListboxOptions>
-                        </transition>
-                    </div>
-                </Listbox>
-            </div>
+                                    <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"
+                    >
+                        {{ form.errors.employmentForm }}
+                    </p>
+                </div>
+            </Listbox>
             <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>
diff --git a/resources/js/Pages/Users/Edit.vue b/resources/js/Pages/Users/Edit.vue
index 5431ce9..3cc58b4 100644
--- a/resources/js/Pages/Users/Edit.vue
+++ b/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">
-                <label
-                    for="employment_form"
-                    class="block text-sm font-medium text-gray-700 sm:mt-px"
-                >
+            <Listbox
+                v-model="form.employmentForm"
+                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
-                </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"
+                </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
-                            v-for="employmentForm in employmentForms"
-                            :key="employmentForm.value"
-                            :value="employmentForm.value"
-                        >
-                            {{ employmentForm.label }}
-                        </option>
-                    </select>
+                        <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"
+                                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 }}
+                                    </span>
+
+                                    <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>