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

wip

Browse Source
This commit is contained in:
Adrian Hopek 2022-04-07 10:36:48 +02:00
parent fb15811b16
commit 760c9bf514
8 changed files with 74 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/Domain/Validation/Rules/DoesNotExceedLimitRule.php
View File

@ -42,9 +42,9 @@ class DoesNotExceedLimitRule implements VacationRequestRule
protected function getUserVacationLimit(User $user, YearPeriod $yearPeriod): int
{
return $user->vacationLimits()
->whereBelongsTo($yearPeriod)
->first()
->days ?? 0;
->whereBelongsTo($yearPeriod)
->first()
->days ?? 0;
}
protected function getVacationDaysWithLimit(User $user, YearPeriod $yearPeriod): int

62
package-lock.json generated
View File

@ -20,7 +20,6 @@
"echarts": "^5.3.2",
"eslit": "^6.0.0",
"flatpickr": "^4.6.11",
"floating-vue": "^2.0.0-beta.13",
"laravel-mix": "^6.0.43",
"lodash": "^4.17.21",
"luxon": "^2.3.1",
@ -1682,19 +1681,6 @@
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@floating-ui/core": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
"integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
},
"node_modules/@floating-ui/dom": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
"integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
"dependencies": {
"@floating-ui/core": "^0.3.0"
}
},
"node_modules/@headlessui/vue": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.5.0.tgz",
@ -4767,18 +4753,6 @@
"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
"dev": true
},
"node_modules/floating-vue": {
"version": "2.0.0-beta.13",
"resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.13.tgz",
"integrity": "sha512-C2bGEtdbOXm+2rmkn8W6dTQeh3xJT7YbdHnrbanYDS3vK/1lumdXhYA6j2Qs+9shViNjoVUUND1EhLxLDP2OZA==",
"dependencies": {
"@floating-ui/dom": "^0.1.10",
"vue-resize": "^2.0.0-alpha.1"
},
"peerDependencies": {
"vue": "^3.2.0"
}
},
"node_modules/follow-redirects": {
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
@ -8763,14 +8737,6 @@
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.0.0.tgz",
"integrity": "sha512-lYSJFW/TyQqmg7MvUbEB8ua1mwWy/v8qve7QJuA/UWUAXC4/yVUdAm4pg/sM9+k5n7VLckBv6ucOROuGBsGPDQ=="
},
"node_modules/vue-resize": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
"peerDependencies": {
"vue": "^3.0.0"
}
},
"node_modules/vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@ -10495,19 +10461,6 @@
"strip-json-comments": "^3.1.1"
}
},
"@floating-ui/core": {
"version": "0.3.1",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.3.1.tgz",
"integrity": "sha512-ensKY7Ub59u16qsVIFEo2hwTCqZ/r9oZZFh51ivcLGHfUwTn8l1Xzng8RJUe91H/UP8PeqeBronAGx0qmzwk2g=="
},
"@floating-ui/dom": {
"version": "0.1.10",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.1.10.tgz",
"integrity": "sha512-4kAVoogvQm2N0XE0G6APQJuCNuErjOfPW8Ux7DFxh8+AfugWflwVJ5LDlHOwrwut7z/30NUvdtHzQ3zSip4EzQ==",
"requires": {
"@floating-ui/core": "^0.3.0"
}
},
"@headlessui/vue": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.5.0.tgz",
@ -12967,15 +12920,6 @@
"integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==",
"dev": true
},
"floating-vue": {
"version": "2.0.0-beta.13",
"resolved": "https://registry.npmjs.org/floating-vue/-/floating-vue-2.0.0-beta.13.tgz",
"integrity": "sha512-C2bGEtdbOXm+2rmkn8W6dTQeh3xJT7YbdHnrbanYDS3vK/1lumdXhYA6j2Qs+9shViNjoVUUND1EhLxLDP2OZA==",
"requires": {
"@floating-ui/dom": "^0.1.10",
"vue-resize": "^2.0.0-alpha.1"
}
},
"follow-redirects": {
"version": "1.14.9",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz",
@ -15812,12 +15756,6 @@
"resolved": "https://registry.npmjs.org/vue-material-design-icons/-/vue-material-design-icons-5.0.0.tgz",
"integrity": "sha512-lYSJFW/TyQqmg7MvUbEB8ua1mwWy/v8qve7QJuA/UWUAXC4/yVUdAm4pg/sM9+k5n7VLckBv6ucOROuGBsGPDQ=="
},
"vue-resize": {
"version": "2.0.0-alpha.1",
"resolved": "https://registry.npmjs.org/vue-resize/-/vue-resize-2.0.0-alpha.1.tgz",
"integrity": "sha512-7+iqOueLU7uc9NrMfrzbG8hwMqchfVfSzpVlCMeJQe4pyibqyoifDNbKTZvwxZKDvGkB+PdFeKvnGZMoEb8esg==",
"requires": {}
},
"vue-style-loader": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",

1
package.json
View File

@ -27,7 +27,6 @@
"echarts": "^5.3.2",
"eslit": "^6.0.0",
"flatpickr": "^4.6.11",
"floating-vue": "^2.0.0-beta.13",
"laravel-mix": "^6.0.43",
"lodash": "^4.17.21",
"luxon": "^2.3.1",

14
resources/css/app.css
View File

@ -1,6 +1,5 @@
@import 'flatpickr/dist/themes/light.css';
@import 'vue-toastification/dist/index.css';
@import 'floating-vue/dist/style.css';
@tailwind base;
@tailwind components;
@ -69,16 +68,3 @@
::-webkit-scrollbar-thumb:hover {
background: #dadce0;
}
.v-popper--theme-tooltip .v-popper__inner {
padding: 0;
background: transparent;
}
.v-popper--theme-tooltip .v-popper__arrow-outer {
border-color: #000;
}
.v-popper--theme-tooltip:focus-visible {
outline: none;
}

48
resources/js/Composables/vacationTypeInfo.js
View File

@ -14,97 +14,71 @@ const types = [
text: 'Urlop wypoczynkowy',
value: 'vacation',
icon: WhiteBalanceSunnyIcon,
color: 'text-amber-500',
border: {
approved: 'border-amber-500',
pending: 'border-amber-300',
},
color: 'text-amber-300',
border: 'border-amber-300',
},
{
text: 'Urlop na żądanie',
value: 'vacation_on_request',
icon: CommentAlertIcon,
color: 'text-slate-500',
border: {
approved: 'border-slate-500',
pending: 'border-slate-300',
},
border: 'border-slate-500',
},
{
text: 'Urlop okolicznościowy',
value: 'special_vacation',
icon: StarShootingIcon,
color: 'text-orange-500',
border: {
approved: 'border-orange-500',
pending: 'border-orange-300',
},
border: 'border-orange-500',
},
{
text: 'Opieka nad dzieckiem art 188 kp',
value: 'childcare_vacation',
icon: BabyCarriageIcon,
color: 'text-purple-500',
border: {
approved: 'border-purple-500',
pending: 'border-purple-300',
},
border: 'border-purple-500',
},
{
text: 'Urlop szkoleniowy',
value: 'training_vacation',
icon: HumanMaleBoardIcon,
color: 'text-blumilk-500',
border: {
approved: 'border-blumilk-500',
pending: 'border-blumilk-300',
},
border: 'border-blumilk-500',
},
{
text: 'Urlop bezpłatny',
value: 'unpaid_vacation',
icon: CurrencyUsdOffIcon,
color: 'text-emerald-500',
border: {
approved: 'border-emerald-500',
pending: 'border-emerald-300',
},
border: 'border-emerald-500',
},
{
text: 'Wolontariat',
value: 'volunteering_vacation',
icon: HandHeartOutlineIcon,
color: 'text-pink-500',
border: {
approved: 'border-pink-500',
pending: 'border-pink-300',
},
border: 'border-pink-500',
},
{
text: 'Odbiór za święto',
value: 'time_in_lieu',
icon: CalendarCheckIcon,
color: 'text-stone-500',
border: {
approved: 'border-stone-500',
pending: 'border-stone-300',
},
border: 'border-stone-500',
},
{
text: 'Zwolnienie lekarskie',
value: 'sick_vacation',
icon: MedicalBagIcon,
color: 'text-rose-500',
border: {
approved: 'border-rose-500',
pending: 'border-rose-300',
},
border: 'border-rose-500',
},
{
text: 'Nieobecność',
value: 'absence',
icon: CalendarRemoveIcon,
color: 'text-cyan-500',
border: 'border-cyan-500',
},
]

96
resources/js/Pages/AnnualSummary.vue
View File

@ -6,8 +6,9 @@
Podsumowanie roczne
</h2>
</div>
<div class="max-w-md" />
<div class="grid grid-cols-1 gap-8 py-8 px-4 mx-auto max-w-3xl border-t border-gray-200 sm:grid-cols-2 sm:px-6 xl:grid-cols-3 xl:px-8 xl:max-w-none 2xl:grid-cols-4">
<div
class="grid grid-cols-1 gap-8 py-8 px-4 mx-auto max-w-3xl border-t border-gray-200 sm:grid-cols-2 sm:px-6 xl:grid-cols-3 xl:px-8 xl:max-w-none 2xl:grid-cols-4"
>
<section
v-for="month in months"
:key="month.name"
@ -30,45 +31,64 @@
v-for="(day, dayIdx) in month.days"
:key="dayIdx"
>
<button
v-if="day.isCurrentMonth"
:class="[day.isVacation && `${getVacationBorder(day.date)}`, day.isPendingVacation && `border-dashed mx-0.5 ${getPendingVacationBorder(day.date)}`, !day.isVacation && !day.isPendingVacation && 'border-transparent', 'relative bg-white hover:bg-blumilk-25 border-b-4 py-1.5 font-medium']"
>
<div :class="[day.isCurrentMonth && (day.isWeekend || day.isHoliday) && 'text-red-600 font-bold', day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']">
<time :datetime="day.date.toISODate()">
{{ day.date.day }}
</time>
</div>
<Tooltip
<template v-if="day.isCurrentMonth">
<Popper
v-if="day.isVacation || day.isPendingVacation"
:triggers="['click']"
placement="bottom"
auto-hide
open-delay="200"
arrow
hover
offset-distance="0"
>
<div class="absolute inset-0" />
<template #popper>
<div class="mt-1">
<VacationPopup :vacation="getVacationInfo(day)" />
</div>
<div :class="[day.isPendingVacation && 'mx-0.5']">
<button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium`]">
<time
:datetime="day.date.toISODate()"
:class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
>
{{ day.date.day }}
</time>
</button>
</div>
<template #content>
<VacationPopup :vacation="getVacationInfo(day)" />
</template>
</Tooltip>
<Tooltip
</Popper>
<Popper
v-else-if="day.isHoliday"
:triggers="['click']"
placement="bottom"
auto-hide
open-delay="200"
arrow
hover
offset-distance="0"
>
<div class="absolute inset-0" />
<button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent">
<time
:datetime="day.date.toISODate()"
:class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center']"
>
{{ day.date.day }}
</time>
</button>
<template #popper>
<div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
{{ holidays[day.date.toISODate()] }}
</div>
</template>
</Tooltip>
</button>
</Popper>
<button
v-else
class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent"
>
<time
:datetime="day.date.toISODate()"
:class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', day.isWeekend && 'text-red-700 font-bold', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
>
{{ day.date.day }}
</time>
</button>
</template>
<div
v-else
:class="['bg-gray-50 text-gray-400 border-b-4 border-transparent py-1.5 w-full focus:z-10 font-medium']"
class="focus:z-10 py-1.5 w-full font-medium text-gray-400 bg-gray-50 border-b-4 border-transparent"
>
<div class="flex justify-center items-center p-4 mx-auto w-7 h-7">
<time :datetime="day.date.toISODate()">
@ -87,7 +107,7 @@
import { DateTime } from 'luxon'
import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
import { Tooltip } from 'floating-vue'
import Popper from 'vue3-popper'
import VacationPopup from '@/Shared/VacationPopup'
const props = defineProps({
@ -103,7 +123,7 @@ const months = []
for (let i = 1; i < 13; i++) {
const currentMonth = DateTime.fromObject({ year: year.value, month: i }).startOf('month')
const start = currentMonth.startOf('week')
const end = currentMonth.endOf('month').endOf('week')
@ -153,19 +173,13 @@ function isWeekend(date) {
return date.weekday === 6 || date.weekday === 7
}
function getVacationBorder(date) {
const type = findType(props.vacations[date.toISODate()].type)
function getVacationBorder(day) {
const type = findType(getVacationInfo(day).type)
return type.border.approved
}
function getPendingVacationBorder(date) {
const type = findType(props.pendingVacations[date.toISODate()].type)
return type.border.approved
return type.border
}
function getVacationInfo(day) {
return day.isVacation ? props.vacations[day.date.toISODate()] : props.pendingVacations[day.date.toISODate()]
}
</script>
</script>

5
resources/js/Shared/VacationBar.vue
View File

@ -1,5 +1,8 @@
<template>
<Popper hover>
<Popper
hover
class="w-full"
>
<div class="flex text-white bg-white">
<div
v-show="stats.used > 0"

2
resources/js/Shared/VacationTypeCalendarIcon.vue
View File

@ -8,7 +8,7 @@
</div>
</div>
<template #content>
<div class="py-1 px-2 text-xs text-gray-900 bg-white shadow-md ">
<div class="py-2 px-4 text-xs text-gray-900 bg-white rounded-lg border border-gray-400 ">
{{ typeInfo.text }}
</div>
</template>