#4 - fix
This commit is contained in:
Adrian Hopek
parent
f9c9c7b873
commit
c8e15dbfa4
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user