* #44 - ui for summary * #44 - vacation monthly usage * #44 - fix * #44 - fix Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
This commit is contained in:
Adrian Hopek
GitHub
@@ -2,50 +2,62 @@ const months = [
|
||||
{
|
||||
'name': 'Styczeń',
|
||||
'value': 'january',
|
||||
'shortcut': 'Sty',
|
||||
},
|
||||
{
|
||||
'name': 'Luty',
|
||||
'value': 'february',
|
||||
'shortcut': 'Lut',
|
||||
},
|
||||
{
|
||||
'name': 'Marzec',
|
||||
'value': 'march',
|
||||
'shortcut': 'Mar',
|
||||
},
|
||||
{
|
||||
'name': 'Kwiecień',
|
||||
'value': 'april',
|
||||
'shortcut': 'Kwi',
|
||||
},
|
||||
{
|
||||
'name': 'Maj',
|
||||
'value': 'may',
|
||||
'shortcut':'Maj',
|
||||
},
|
||||
{
|
||||
'name': 'Czerwiec',
|
||||
'value': 'june',
|
||||
'shortcut': 'Cze',
|
||||
},
|
||||
{
|
||||
'name': 'Lipiec',
|
||||
'value': 'july',
|
||||
'shortcut': 'Lip',
|
||||
},
|
||||
{
|
||||
'name': 'Sierpień',
|
||||
'value': 'august',
|
||||
'shortcut': 'Sie',
|
||||
},
|
||||
{
|
||||
'name': 'Wrzesień',
|
||||
'value': 'september',
|
||||
'shortcut': 'Wrz',
|
||||
},
|
||||
{
|
||||
'name': 'Październik',
|
||||
'value': 'october',
|
||||
'shortcut': 'Paź',
|
||||
},
|
||||
{
|
||||
'name': 'Listopad',
|
||||
'value': 'november',
|
||||
'shortcut': 'Lis',
|
||||
},
|
||||
{
|
||||
'name': 'Grudzień',
|
||||
'value': 'december',
|
||||
'shortcut': 'Gru',
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-100">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
|
||||
94
resources/js/Pages/MonthlyUsage.vue
Normal file
94
resources/js/Pages/MonthlyUsage.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<InertiaHead title="Wykorzystanie miesięczne urlopu" />
|
||||
<div class="bg-white shadow-md">
|
||||
<div class="flex justify-between items-center p-4 sm:px-6">
|
||||
<div class="flex items-center">
|
||||
<h2 class="text-lg leading-6 font-medium text-gray-900">
|
||||
Wykorzystanie miesięczne urlopu wypoczynkowego
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-hidden">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="w-64 px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-left">
|
||||
Pracownik
|
||||
</th>
|
||||
<th
|
||||
v-for="month in months"
|
||||
:key="month"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center"
|
||||
:class="{'bg-blumilk-50': isCurrentMonth(month)}"
|
||||
style="min-width: 46px;"
|
||||
>
|
||||
<span :class="{'text-blumilk-600': isCurrentMonth(month)}">
|
||||
{{ month.shortcut }}
|
||||
</span>
|
||||
</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider text-center">
|
||||
Wykorzystanie urlopu
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
<tr
|
||||
v-for="item in monthlyUsage"
|
||||
:key="item.user.id"
|
||||
class="hover:bg-blumilk-25"
|
||||
>
|
||||
<th class="px-4 py-4 whitespace-nowrap text-sm text-gray-500 font-semibold capitalize">
|
||||
<div class="flex justify-start items-center">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="item.user.avatar"
|
||||
>
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
<div
|
||||
class="text-sm font-medium text-gray-900 whitespace-nowrap"
|
||||
>
|
||||
{{ item.user.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</th>
|
||||
<td
|
||||
v-for="month in months"
|
||||
:key="month.value"
|
||||
class="px-4 py-4 text-sm text-gray-500 font-semibold text-center"
|
||||
:class="{'bg-blumilk-25': isCurrentMonth(month)}"
|
||||
>
|
||||
{{ item.months[month.value] ?? '-' }}
|
||||
</td>
|
||||
<td class="px-4 py-4 text-sm text-gray-500 font-semibold text-center">
|
||||
<div style="min-width: 300px;">
|
||||
<VacationBar :stats="{ used: item.stats.used, pending: item.stats.pending, remaining: item.stats.remaining }" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useMonthInfo } from '@/Composables/monthInfo'
|
||||
import VacationBar from '@/Shared/VacationBar'
|
||||
|
||||
const props = defineProps({
|
||||
monthlyUsage: Object,
|
||||
currentMonth: String,
|
||||
})
|
||||
|
||||
const { getMonths } = useMonthInfo()
|
||||
const months = getMonths()
|
||||
|
||||
function isCurrentMonth(month) {
|
||||
return props.currentMonth === month.value
|
||||
}
|
||||
</script>
|
||||
@@ -11,123 +11,125 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
|
||||
<form @submit.prevent="submitVacationDays">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
<div class="border-t border-gray-200">
|
||||
<div class="overflow-x-auto xl:overflow-x-visible overflow-y-auto xl:overflow-y-visible">
|
||||
<form @submit.prevent="submitVacationDays">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Imię i nazwisko
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Forma zatrudnienia
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Posiada urlop?
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Pozostałe dni z poprzedniego roku
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Dostępne dni w roku
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
<tr
|
||||
v-for="(item, index) in form.items"
|
||||
:key="item.id"
|
||||
class="hover:bg-blumilk-25"
|
||||
>
|
||||
Imię i nazwisko
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Forma zatrudnienia
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Posiada urlop?
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Pozostałe dni z poprzedniego roku
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="px-6 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider"
|
||||
>
|
||||
Dostępne dni w roku
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-100">
|
||||
<tr
|
||||
v-for="(item, index) in form.items"
|
||||
:key="item.id"
|
||||
class="hover:bg-blumilk-25"
|
||||
>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div class="flex">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="item.user.avatar"
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div class="flex">
|
||||
<span class="inline-flex items-center justify-center h-10 w-10 rounded-full">
|
||||
<img
|
||||
class="h-10 w-10 rounded-full"
|
||||
:src="item.user.avatar"
|
||||
>
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium break-all text-gray-900">
|
||||
{{ item.user.name }}
|
||||
</p>
|
||||
<p class="text-sm break-all text-gray-500">
|
||||
{{ item.user.email }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ item.user.employmentForm }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<Switch
|
||||
v-model="item.hasVacation"
|
||||
:class="[item.hasVacation ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
|
||||
>
|
||||
<span
|
||||
:class="[item.hasVacation ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
|
||||
/>
|
||||
</Switch>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm">
|
||||
{{ item.remainingLastYear }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input
|
||||
v-model="item.days"
|
||||
type="number"
|
||||
min="0"
|
||||
class="block w-full shadow-sm rounded-md sm:text-sm disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed"
|
||||
:disabled="!item.hasVacation"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`items.${index}.days`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`items.${index}.days`] }"
|
||||
>
|
||||
</span>
|
||||
<div class="ml-3">
|
||||
<p class="text-sm font-medium break-all text-gray-900">
|
||||
{{ item.user.name }}
|
||||
</p>
|
||||
<p class="text-sm break-all text-gray-500">
|
||||
{{ item.user.email }}
|
||||
<p
|
||||
v-if="form.errors[`items.${index}.days`]"
|
||||
class="mt-2 text-sm text-red-600"
|
||||
>
|
||||
{{ form.errors[`items.${index}.days`] }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ item.user.employmentForm }}
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<Switch
|
||||
v-model="item.hasVacation"
|
||||
:class="[item.hasVacation ? 'bg-blumilk-500' : 'bg-gray-200', 'relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500']"
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!form.items.length">
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
>
|
||||
<span
|
||||
:class="[item.hasVacation ? 'translate-x-5' : 'translate-x-0', 'pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200']"
|
||||
/>
|
||||
</Switch>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2 w-full max-w-lg bg-gray-50 border border-gray-300 rounded-md px-4 py-2 inline-flex items-center text-gray-500 sm:text-sm">
|
||||
{{ item.remainingLastYear }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
<div class="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<input
|
||||
v-model="item.days"
|
||||
type="number"
|
||||
min="0"
|
||||
class="block w-full shadow-sm rounded-md sm:text-sm disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none disabled:cursor-not-allowed"
|
||||
:disabled="!item.hasVacation"
|
||||
:class="{ 'border-red-300 text-red-900 focus:outline-none focus:ring-red-500 focus:border-red-500': form.errors[`items.${index}.days`], 'focus:ring-blumilk-500 focus:border-blumilk-500 sm:text-sm border-gray-300': !form.errors[`items.${index}.days`] }"
|
||||
>
|
||||
<p
|
||||
v-if="form.errors[`items.${index}.days`]"
|
||||
class="mt-2 text-sm text-red-600"
|
||||
>
|
||||
{{ form.errors[`items.${index}.days`] }}
|
||||
</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="!form.items.length">
|
||||
<td
|
||||
colspan="100%"
|
||||
class="text-center py-4 text-xl leading-5 text-gray-700"
|
||||
>
|
||||
Brak danych
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex justify-end py-3 px-4">
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
Brak danych
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex justify-end py-3 px-4">
|
||||
<button
|
||||
type="submit"
|
||||
class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
|
||||
>
|
||||
Zapisz
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
<script setup>
|
||||
import MainMenu from '@/Shared/MainMenu'
|
||||
import { useToast } from 'vue-toastification'
|
||||
import { defineProps, watch } from 'vue'
|
||||
import { watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
flash: Object,
|
||||
@@ -30,6 +30,10 @@ watch(() => props.flash, flash => {
|
||||
toast.success(flash.success)
|
||||
}
|
||||
|
||||
if (flash.info) {
|
||||
toast.info(flash.info)
|
||||
}
|
||||
|
||||
if (flash.error) {
|
||||
toast.error(flash.error)
|
||||
}
|
||||
|
||||
@@ -268,7 +268,9 @@ import {
|
||||
XIcon,
|
||||
SunIcon,
|
||||
StarIcon,
|
||||
CalendarIcon, DocumentTextIcon,
|
||||
CalendarIcon,
|
||||
DocumentTextIcon,
|
||||
AdjustmentsIcon,
|
||||
} from '@heroicons/vue/outline'
|
||||
import { CheckIcon, ChevronDownIcon } from '@heroicons/vue/solid'
|
||||
|
||||
@@ -302,6 +304,13 @@ const navigation = computed(() =>
|
||||
icon: CalendarIcon,
|
||||
can: true,
|
||||
},
|
||||
{
|
||||
name: 'Wykorzystanie urlopu',
|
||||
href: '/monthly-usage',
|
||||
component: 'MonthlyUsage',
|
||||
icon: AdjustmentsIcon,
|
||||
can: props.auth.can.listMonthlyUsage,
|
||||
},
|
||||
{
|
||||
name: 'Dni wolne',
|
||||
href: '/holidays',
|
||||
|
||||
84
resources/js/Shared/VacationBar.vue
Normal file
84
resources/js/Shared/VacationBar.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<Popper
|
||||
hover
|
||||
class="h-full w-full"
|
||||
>
|
||||
<div class="flex bg-white text-white">
|
||||
<div
|
||||
v-show="stats.used > 0"
|
||||
:style="`background-color: ${colors.used}; flex-basis: ${calculatePercent(stats.used)}%;`"
|
||||
class="flex items-center justify-center py-2 px-0.5"
|
||||
>
|
||||
<strong>{{ stats.used }}</strong>
|
||||
</div>
|
||||
<div
|
||||
v-show="stats.pending > 0"
|
||||
:style="`background-color: ${colors.pending}; flex-basis: ${calculatePercent(stats.pending)}%;`"
|
||||
class="flex items-center justify-center py-2 px-0.5"
|
||||
>
|
||||
<strong>{{ stats.pending }}</strong>
|
||||
</div>
|
||||
<div
|
||||
v-show="stats.remaining > 0"
|
||||
:style="`background-color: ${colors.remaining}; flex-basis: ${calculatePercent(stats.remaining)}%;`"
|
||||
class="flex items-center justify-center py-2 px-0.5"
|
||||
>
|
||||
<strong>{{ stats.remaining }}</strong>
|
||||
</div>
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="px-4 py-2 bg-white text-md text-gray-900 rounded-md shadow-md flext">
|
||||
<div class="flex items-center font-normal">
|
||||
<i
|
||||
class="inline-block w-5 h-3 mr-3"
|
||||
:style="`background-color: ${colors.used}`"
|
||||
/>
|
||||
Wykorzystane:
|
||||
<span class="font-semibold ml-1">{{ stats.used }}</span>
|
||||
</div>
|
||||
<div class="flex items-center font-normal">
|
||||
<i
|
||||
class="inline-block w-5 h-3 mr-3"
|
||||
:style="`background-color: ${colors.pending}`"
|
||||
/>
|
||||
Rozpatrywane:
|
||||
<span class="font-semibold ml-1">{{ stats.pending }}</span>
|
||||
</div>
|
||||
<div class="flex items-center font-normal">
|
||||
<i
|
||||
class="inline-block w-5 h-3 mr-3"
|
||||
:style="`background-color: ${colors.remaining}`"
|
||||
/>
|
||||
Pozostałe:
|
||||
<span class="font-semibold ml-1">{{ stats.remaining }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Popper>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Popper from 'vue3-popper'
|
||||
|
||||
const props = defineProps({
|
||||
stats: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
used: 0,
|
||||
pending: 0,
|
||||
remaining: 0,
|
||||
}),
|
||||
},
|
||||
})
|
||||
|
||||
const colors = {
|
||||
used: '#2C466F',
|
||||
pending: '#AABDDD',
|
||||
remaining: '#527ABA',
|
||||
}
|
||||
|
||||
function calculatePercent(value) {
|
||||
return value / (props.stats.used + props.stats.pending + props.stats.remaining) * 100
|
||||
}
|
||||
|
||||
</script>
|
||||
@@ -20,7 +20,8 @@ createInertiaApp({
|
||||
.use(Toast, {
|
||||
position: 'bottom-right',
|
||||
maxToast: 5,
|
||||
|
||||
timeout: 3000,
|
||||
pauseOnFocusLoss: false,
|
||||
})
|
||||
.component('InertiaLink', Link)
|
||||
.component('InertiaHead', Head)
|
||||
|
||||
Reference in New Issue
Block a user