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-06 14:27:04 +02:00
parent 2a574bec62
commit aeb43fe448
7 changed files with 205 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,10 +1,12 @@
<template>
<InertiaHead title="Podsumowanie roczne" />
<div class="bg-white shadow-md">
<div class="p-4 sm:px-6">
<h2 class="text-lg font-medium leading-6 text-gray-900">
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">
<section
v-for="month in months"
@@ -23,32 +25,46 @@
<div>Sb</div>
<div>Nd</div>
</div>
<div class="grid isolate grid-cols-7 mt-2 text-sm ring-1 ring-gray-200 shadow">
<div class="grid grid-cols-7 mt-2 text-sm ring-1 ring-gray-200 shadow">
<template
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-gray-100 border-b-4 py-1.5 focus:z-10 font-medium']"
: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>
<Popper
v-if="day.isHoliday || day.isVacation || day.isPendingVacation"
hover
<Tooltip
v-if="day.isVacation || day.isPendingVacation"
:triggers="['click']"
placement="bottom"
auto-hide
>
<button class="absolute inset-0" />
<template #content>
<div class="py-2 px-4 text-gray-900 bg-white rounded-md shadow-md text-md">
{{ dayIdx }}
<div class="absolute inset-0" />
<template #popper>
<div class="mt-1">
<VacationPopup :vacation="getVacationInfo(day)" />
</div>
</template>
</Popper>
</Tooltip>
<Tooltip
v-else-if="day.isHoliday"
:triggers="['click']"
placement="bottom"
auto-hide
>
<div class="absolute inset-0" />
<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>
<div
v-else
@@ -71,7 +87,9 @@
import { DateTime } from 'luxon'
import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
import Popper from 'vue3-popper'
import { Tooltip } from 'floating-vue'
import VacationPopup from '@/Shared/VacationPopup'
const props = defineProps({
holidays: Object,
vacations: Object,
@@ -136,14 +154,18 @@ function isWeekend(date) {
}
function getVacationBorder(date) {
const type = findType(props.vacations[date.toISODate()])
const type = findType(props.vacations[date.toISODate()].type)
return type.border.approved
}
function getPendingVacationBorder(date) {
const type = findType(props.pendingVacations[date.toISODate()])
const type = findType(props.pendingVacations[date.toISODate()].type)
return type.border.approved
}
function getVacationInfo(day) {
return day.isVacation ? props.vacations[day.date.toISODate()] : props.pendingVacations[day.date.toISODate()]
}
</script>

62
resources/js/Shared/VacationPopup.vue Normal file
View File

@@ -0,0 +1,62 @@
<template>
<div class="py-2 px-6 text-left text-gray-900 whitespace-nowrap bg-white rounded-lg border border-gray-400">
<dl class="divide-y divide-gray-200">
<div class="py-2 space-y-1">
<dt class="text-sm font-medium text-gray-500">
Nr wniosku
</dt>
<dd class="text-sm text-gray-900">
<InertiaLink
:href="`/vacation/requests/${vacation.id}`"
class="font-semibold text-blumilk-600 hover:text-blumilk-500 hover:underline"
>
{{ vacation.name }}
</InertiaLink>
</dd>
</div>
<div class="py-2 space-y-1">
<dt class="text-sm font-medium text-gray-500">
Rodzaj urlopu
</dt>
<dd class="mt-1 text-sm text-gray-900">
<VacationType :type="vacation.type" />
</dd>
</div>
<div class="py-2 space-y-1">
<dt class="text-sm font-medium text-gray-500">
Obecny status
</dt>
<dd class="mt-1 text-sm text-gray-900">
<Status :status="vacation.state" />
</dd>
</div>
<div class="py-2 space-y-1">
<dt class="text-sm font-medium text-gray-500">
Data
</dt>
<dd class="mt-1 text-sm text-gray-900">
<template v-if="vacation.days > 1">
{{ vacation.from }} - {{ vacation.to }}
</template>
<template v-else>
{{ vacation.from }}
</template>
<span class="font-semibold">
[Liczba dni: {{ vacation.days }}]
</span>
</dd>
</div>
</dl>
</div>
</template>
<script setup>
import VacationType from '@/Shared/VacationType'
import Status from '@/Shared/Status'
defineProps({
vacation: Object,
})
</script>