#4 - fix
This commit is contained in:
Adrian Hopek
parent
f9c9c7b873
commit
c8e15dbfa4
@ -11,7 +11,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<form
|
<form
|
||||||
class="border-t border-gray-200 px-6"
|
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">
|
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||||
<label
|
<label
|
||||||
@ -59,60 +59,61 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<Listbox
|
||||||
<Listbox
|
v-model="form.employmentForm"
|
||||||
v-model="form.employmentForm"
|
as="div"
|
||||||
as="div"
|
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||||
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
>
|
||||||
>
|
<ListboxLabel class="block text-sm font-medium text-gray-700">
|
||||||
<ListboxLabel class="block text-sm font-medium text-gray-700">
|
Forma zatrudnienia
|
||||||
Forma zatrudnienia
|
</ListboxLabel>
|
||||||
</ListboxLabel>
|
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
|
||||||
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
|
<ListboxButton
|
||||||
<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">
|
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"
|
||||||
<span class="block truncate">{{ form.employmentForm }}</span>
|
: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="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
>
|
||||||
<SelectorIcon
|
<span class="block truncate">{{ form.employmentForm.label }}</span>
|
||||||
class="h-5 w-5 text-gray-400"
|
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||||
aria-hidden="true"
|
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||||
/>
|
</span>
|
||||||
</span>
|
</ListboxButton>
|
||||||
</ListboxButton>
|
|
||||||
|
|
||||||
<transition
|
<transition
|
||||||
leave-active-class="transition ease-in duration-100"
|
leave-active-class="transition ease-in duration-100"
|
||||||
leave-from-class="opacity-100"
|
leave-from-class="opacity-100"
|
||||||
leave-to-class="opacity-0"
|
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">
|
<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
|
<ListboxOption
|
||||||
v-for="employmentForm in employmentForms"
|
v-for="employmentForm in employmentForms"
|
||||||
:key="employmentForm.value"
|
:key="employmentForm.value"
|
||||||
v-slot="{ active, selected }"
|
v-slot="{ active, selected }"
|
||||||
as="template"
|
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']">
|
<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']">
|
<span :class="[selected ? 'font-semibold' : 'font-normal', 'block truncate']">
|
||||||
{{ employmentForm.label }}
|
{{ employmentForm.label }}
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
v-if="selected"
|
v-if="selected"
|
||||||
:class="[active ? 'text-white' : 'text-blumilk-600', 'absolute inset-y-0 right-0 flex items-center pr-4']"
|
: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"
|
</span>
|
||||||
aria-hidden="true"
|
</li>
|
||||||
/>
|
</ListboxOption>
|
||||||
</span>
|
</ListboxOptions>
|
||||||
</li>
|
</transition>
|
||||||
</ListboxOption>
|
<p
|
||||||
</ListboxOptions>
|
v-if="form.errors.employmentForm"
|
||||||
</transition>
|
class="mt-2 text-sm text-red-600"
|
||||||
</div>
|
>
|
||||||
</Listbox>
|
{{ form.errors.employmentForm }}
|
||||||
</div>
|
</p>
|
||||||
|
</div>
|
||||||
|
</Listbox>
|
||||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||||
<label
|
<label
|
||||||
for="employment_date"
|
for="employment_date"
|
||||||
@ -185,11 +186,21 @@ export default {
|
|||||||
const form = useForm({
|
const form = useForm({
|
||||||
name: null,
|
name: null,
|
||||||
email: null,
|
email: null,
|
||||||
employmentForm: props.employmentForms[0].value,
|
employmentForm: props.employmentForms[0],
|
||||||
employmentDate: new Date(),
|
employmentDate: new Date(),
|
||||||
});
|
});
|
||||||
|
|
||||||
return { form };
|
return { form };
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
createUser() {
|
||||||
|
this.form
|
||||||
|
.transform(data => ({
|
||||||
|
...data,
|
||||||
|
employmentForm: data.employmentForm.value,
|
||||||
|
}))
|
||||||
|
.post('/users');
|
||||||
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -11,7 +11,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<form
|
<form
|
||||||
class="border-t border-gray-200 px-6"
|
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">
|
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||||
<label
|
<label
|
||||||
@ -59,28 +59,53 @@
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
<Listbox
|
||||||
<label
|
v-model="form.employmentForm"
|
||||||
for="employment_form"
|
as="div"
|
||||||
class="block text-sm font-medium text-gray-700 sm:mt-px"
|
class="sm:grid sm:grid-cols-3 py-4 items-center"
|
||||||
>
|
>
|
||||||
|
<ListboxLabel class="block text-sm font-medium text-gray-700">
|
||||||
Forma zatrudnienia
|
Forma zatrudnienia
|
||||||
</label>
|
</ListboxLabel>
|
||||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
<div class="mt-1 relative sm:mt-0 sm:col-span-2">
|
||||||
<select
|
<ListboxButton
|
||||||
id="employment_form"
|
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"
|
||||||
v-model="form.employmentForm"
|
|
||||||
class="block w-full max-w-lg shadow-sm rounded-md sm:text-sm"
|
|
||||||
: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 }"
|
: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>
|
||||||
v-for="employmentForm in employmentForms"
|
<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
|
||||||
:key="employmentForm.value"
|
<SelectorIcon class="h-5 w-5 text-gray-400" />
|
||||||
:value="employmentForm.value"
|
</span>
|
||||||
>
|
</ListboxButton>
|
||||||
{{ employmentForm.label }}
|
|
||||||
</option>
|
<transition
|
||||||
</select>
|
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
|
<p
|
||||||
v-if="form.errors.employmentForm"
|
v-if="form.errors.employmentForm"
|
||||||
class="mt-2 text-sm text-red-600"
|
class="mt-2 text-sm text-red-600"
|
||||||
@ -88,7 +113,7 @@
|
|||||||
{{ form.errors.employmentForm }}
|
{{ form.errors.employmentForm }}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</Listbox>
|
||||||
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
<div class="sm:grid sm:grid-cols-3 py-4 items-center">
|
||||||
<label
|
<label
|
||||||
for="employment_date"
|
for="employment_date"
|
||||||
@ -136,11 +161,20 @@
|
|||||||
<script>
|
<script>
|
||||||
import {useForm} from '@inertiajs/inertia-vue3';
|
import {useForm} from '@inertiajs/inertia-vue3';
|
||||||
import FlatPickr from 'vue-flatpickr-component';
|
import FlatPickr from 'vue-flatpickr-component';
|
||||||
|
import {Listbox, ListboxButton, ListboxLabel, ListboxOption, ListboxOptions} from '@headlessui/vue';
|
||||||
|
import {CheckIcon, SelectorIcon} from '@heroicons/vue/solid';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
employmentDate: 'UserEdit',
|
employmentDate: 'UserEdit',
|
||||||
components: {
|
components: {
|
||||||
FlatPickr,
|
FlatPickr,
|
||||||
|
Listbox,
|
||||||
|
ListboxButton,
|
||||||
|
ListboxLabel,
|
||||||
|
ListboxOption,
|
||||||
|
ListboxOptions,
|
||||||
|
CheckIcon,
|
||||||
|
SelectorIcon,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
employmentForms: {
|
employmentForms: {
|
||||||
@ -156,11 +190,21 @@ export default {
|
|||||||
const form = useForm({
|
const form = useForm({
|
||||||
name: props.user.name,
|
name: props.user.name,
|
||||||
email: props.user.email,
|
email: props.user.email,
|
||||||
employmentForm: props.user.employmentForm,
|
employmentForm: props.employmentForms.find(form => form.value === props.user.employmentForm),
|
||||||
employmentDate: new Date(props.user.employmentDate),
|
employmentDate: new Date(props.user.employmentDate),
|
||||||
});
|
});
|
||||||
|
|
||||||
return { form };
|
return { form };
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
editUser() {
|
||||||
|
this.form
|
||||||
|
.transform(data => ({
|
||||||
|
...data,
|
||||||
|
employmentForm: data.employmentForm.value,
|
||||||
|
}))
|
||||||
|
.put(`/users/${this.user.id}`);
|
||||||
|
},
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user