kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

#108 - types of vacation request (#110)

Browse Source 
* #108 - wip

* #108 - add icon to absence

* #108 - wip

* #108 - fix

* #108 - fix title

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
This commit is contained in:
Adrian Hopek
2022-04-06 15:13:54 +02:00
committed by GitHub
parent fa244b96cd
commit 6af4380fe6
22 changed files with 208 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
resources/js/Pages/VacationRequest/Create.vue
View File

@@ -1,10 +1,10 @@
<template>
<InertiaHead title="Złóż wniosek urlopowy" />
<InertiaHead title="Złóż wniosek" />
<div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
<div class="flex flex-col h-full bg-white shadow-md xl:col-span-2">
<div class="p-4 sm:px-6">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Złóż wniosek urlopowy
Złóż wniosek
</h2>
</div>
<form
@@ -42,8 +42,8 @@
</ListboxLabel>
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.user, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.user }"
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.user, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.user }"
>
<span class="flex items-center">
<img
@@ -63,7 +63,7 @@
leave-to-class="opacity-0"
>
<ListboxOptions
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 focus:ring-blumilk-500 ring-opacity-5 shadow-lg sm:text-sm"
>
<ListboxOption
v-for="user in users.data"
@@ -134,24 +134,29 @@
class="items-center py-4 sm:grid sm:grid-cols-3"
>
<ListboxLabel class="block text-sm font-medium text-gray-700">
Rodzaj urlopu
Typ wniosku
</ListboxLabel>
<div class="relative mt-1 sm:col-span-2 sm:mt-0">
<ListboxButton
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
class="relative py-2 pr-10 pl-3 w-full max-w-lg text-left bg-white rounded-md border focus:outline-none focus:ring-1 shadow-sm cursor-default sm:text-sm"
:class="{ 'border-red-300 text-red-900 focus:ring-red-500 focus:border-red-500': form.errors.type, 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors.type }"
>
<span class="block truncate">{{ form.vacationType.label }}</span>
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
<template v-if="form.vacationType">
<span class="block truncate">{{ form.vacationType.label }}</span>
<span class="flex absolute inset-y-0 right-0 items-center pr-2 pointer-events-none">
<SelectorIcon class="w-5 h-5 text-gray-400" />
</span>
</template>
<template v-else>
Ładowanie...
</template>
</ListboxButton>
<transition
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm">
<ListboxOptions class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 focus:ring-blumilk-500 ring-opacity-5 shadow-lg sm:text-sm">
<ListboxOption
v-for="vacationType in vacationTypes"
:key="vacationType.value"
@@ -187,7 +192,7 @@
for="date_from"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Planowany urlop od
Data od
</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr
@@ -212,7 +217,7 @@
for="date_from"
class="block text-sm font-medium text-gray-700 sm:mt-px"
>
Planowany urlop do
Data do
</label>
<div class="mt-1 sm:col-span-2 sm:mt-0">
<FlatPickr
@@ -233,7 +238,7 @@
</div>
</div>
<div class="items-center py-4 sm:grid sm:grid-cols-3">
<span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba dni urlopu</span>
<span class="block text-sm font-medium text-gray-700 sm:mt-px">Liczba dni</span>
<div
class="inline-flex items-center py-2 px-4 mt-1 w-full max-w-lg text-gray-500 bg-gray-50 rounded-md border border-gray-300 sm:col-span-2 sm:mt-0 sm:text-sm"
>
@@ -303,10 +308,10 @@
<div class="p-4 sm:px-6">
<h2 class="text-lg font-medium leading-6 text-gray-900">
<span v-if="auth.user.id !== form.user.id">
Urlop wypoczynkowy, dane dla: {{ form.user.name }}
Dane urlopowe dla: {{ form.user.name }}
</span>
<span v-else>
Twoje dane o urlopie wypoczynkowym
Twoje dane o urlopie
</span>
</h2>
</div>
@@ -330,7 +335,6 @@ import VacationChart from '@/Shared/VacationChart'
const props = defineProps({
auth: Object,
users: Object,
vacationTypes: Object,
holidays: Object,
can: Object,
})
@@ -341,12 +345,13 @@ const form = useForm({
: props.auth.user,
from: null,
to: null,
vacationType: props.vacationTypes[0],
vacationType: null,
comment: null,
flowSkipped: false,
})
const estimatedDays = ref([])
const vacationTypes = ref([])
const stats = ref({
used: 0,
@@ -372,8 +377,9 @@ const toInputConfig = reactive({
watch(() => form.user, user => {
resetForm()
refreshVacationStats(user)
refreshAvailableTypes(user)
refreshUnavailableDays(user)
refreshVacationStats(user)
}, { immediate: true })
function createForm() {
@@ -406,7 +412,7 @@ function onToChange(selectedDates, dateStr) {
}
function resetForm() {
form.reset('type', 'to', 'from', 'comment', 'flowSkipped')
form.reset('to', 'from', 'comment', 'flowSkipped')
form.clearErrors()
estimatedDays.value = []
}
@@ -440,4 +446,11 @@ async function refreshUnavailableDays(user) {
]
}
async function refreshAvailableTypes(user) {
const res = await axios.post('/api/vacation/get-available-vacation-types', { user: user.id })
vacationTypes.value = res.data
form.vacationType = vacationTypes.value[0]
}
</script>

6
resources/js/Pages/VacationRequest/Index.vue
View File

@@ -1,9 +1,9 @@
<template>
<InertiaHead title="Moje wnioski urlopowe" />
<InertiaHead title="Moje wnioski" />
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<h2 class="text-lg font-medium leading-6 text-gray-900">
Moje wnioski urlopowe
Moje wnioski
</h2>
<div>
<InertiaLink
@@ -102,7 +102,7 @@
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Rodzaj urlopu
Rodzaj wniosku
</th>
<th
scope="col"

6
resources/js/Pages/VacationRequest/IndexForApprovers.vue
View File

@@ -1,10 +1,10 @@
<template>
<InertiaHead title="Wnioski urlopowe" />
<InertiaHead title="Lista wniosków" />
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<div>
<h2 class="text-lg font-medium leading-6 text-gray-900">
Wnioski urlopowe
Lista wniosków
</h2>
</div>
<div>
@@ -181,7 +181,7 @@
scope="col"
class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
>
Rodzaj urlopu
Rodzaj wniosku
</th>
<th
scope="col"

2
resources/js/Pages/VacationRequest/Show.vue
View File

@@ -41,7 +41,7 @@
</div>
<div class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:py-5 sm:px-6">
<dt class="text-sm font-medium text-gray-500">
Rodzaj urlopu
Rodzaj wniosku
</dt>
<dd class="mt-1 text-sm text-gray-900 sm:col-span-2 sm:mt-0">
<VacationType :type="request.type" />