From e7c1028da18f7f3a294f62b3d9dfd0bc019a1a66 Mon Sep 17 00:00:00 2001 From: Kamil Niemczycki Date: Mon, 27 Jun 2022 11:55:55 +0200 Subject: [PATCH 1/7] #152 - updated style --- .../js/Shared/Widgets/VacationCalendar.vue | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue index 7d9de57..0ae8b91 100644 --- a/resources/js/Shared/Widgets/VacationCalendar.vue +++ b/resources/js/Shared/Widgets/VacationCalendar.vue @@ -123,12 +123,12 @@
@@ -226,6 +226,7 @@ const customCalendar = { dayNumber: day.day, isCurrentMonth: isInCurrentMonth(day), isToday: isToday(day), + isWeekend: isWeekend(day), } }, } @@ -317,6 +318,10 @@ function isInCurrentMonth(date) { return calendar.currents.month === date.month } +function isWeekend(date) { + return date.weekday === 6 || date.weekday === 7 +} + function isToday(date) { return date.toISODate() === DateTime.local().toISODate() } @@ -343,11 +348,6 @@ function isToday(date) { content: "Pt"; } -.day:nth-of-type(7n - 1):before, -.day:nth-of-type(7n):before { - color: #991b1b; -} - .day:nth-of-type(7n - 1):before { content: "Sb"; } @@ -355,8 +355,4 @@ function isToday(date) { .day:nth-of-type(7n):before { content: "Nd"; } - -.month-day:nth-of-type(7n - 1), .month-day:nth-of-type(7n) { - background-color: #fee2e2; -} From 4392b666e1014c51bd932c7ab803320ef649cc41 Mon Sep 17 00:00:00 2001 From: Kamil Niemczycki Date: Mon, 27 Jun 2022 12:42:15 +0200 Subject: [PATCH 2/7] #152 - small corrections --- resources/js/Shared/Widgets/VacationCalendar.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue index 0ae8b91..d8b709f 100644 --- a/resources/js/Shared/Widgets/VacationCalendar.vue +++ b/resources/js/Shared/Widgets/VacationCalendar.vue @@ -130,7 +130,7 @@ :datetime="day.date" :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }" > - {{ day.date.split('-').pop().replace(/^0/, '') }} + {{ day.dayNumber }}
@@ -257,7 +257,7 @@ function resetCalendar(config = {}) { calendar.currents.year = isUndefined(config.year) ? selectedYear : config.month calendar.currents.month = calendarState.isActualYear || !isUndefined(config.year) ? currentMonth : 1 - calendar.currents.week = calendarState.isActualYear || !isUndefined(config.year) ? currentWeek : 1 + calendar.currents.week = calendarState.isActualYear || !isUndefined(config.week) ? currentWeek : 0 } function isUndefined(value) { @@ -308,7 +308,7 @@ function goToToday() { function updateViewMode(type) { if (type === 'month') - resetCalendar({ week: 1 }) + resetCalendar({ week: 0 }) else resetCalendar() calendar.viewMode.value = type From eb644fa494a94d2b263e78763e303261ed7382af Mon Sep 17 00:00:00 2001 From: Kamil Niemczycki Date: Tue, 28 Jun 2022 16:21:55 +0200 Subject: [PATCH 3/7] #152 - added holidays --- .../Http/Controllers/DashboardController.php | 6 ++ resources/js/Pages/Dashboard.vue | 5 +- .../Shared/Widgets/Calendar/DateComponent.vue | 70 +++++++++++++++++++ .../js/Shared/Widgets/VacationCalendar.vue | 33 ++++++--- 4 files changed, 102 insertions(+), 12 deletions(-) create mode 100644 resources/js/Shared/Widgets/Calendar/DateComponent.vue diff --git a/app/Infrastructure/Http/Controllers/DashboardController.php b/app/Infrastructure/Http/Controllers/DashboardController.php index 9f164a9..63a62d9 100644 --- a/app/Infrastructure/Http/Controllers/DashboardController.php +++ b/app/Infrastructure/Http/Controllers/DashboardController.php @@ -12,6 +12,7 @@ use Toby\Domain\UserVacationStatsRetriever; use Toby\Domain\VacationRequestStatesRetriever; use Toby\Domain\VacationTypeConfigRetriever; use Toby\Eloquent\Helpers\YearPeriodRetriever; +use Toby\Eloquent\Models\Holiday; use Toby\Eloquent\Models\VacationRequest; use Toby\Infrastructure\Http\Resources\HolidayResource; use Toby\Infrastructure\Http\Resources\VacationRequestResource; @@ -54,6 +55,8 @@ class DashboardController extends Controller ->limit(3) ->get(); + $allHolidays = $yearPeriod->holidays; + $limit = $vacationStatsRetriever->getVacationDaysLimit($user, $yearPeriod); $used = $vacationStatsRetriever->getUsedVacationDays($user, $yearPeriod); $pending = $vacationStatsRetriever->getPendingVacationDays($user, $yearPeriod); @@ -66,6 +69,9 @@ class DashboardController extends Controller "remoteDays" => VacationResource::collection($remoteDays), "vacationRequests" => VacationRequestResource::collection($vacationRequests), "holidays" => HolidayResource::collection($holidays), + "allHolidays" => $allHolidays->mapWithKeys( + fn(Holiday $holiday): array => [$holiday->date->toDateString() => $holiday->name], + ), "stats" => [ "limit" => $limit, "remaining" => $remaining, diff --git a/resources/js/Pages/Dashboard.vue b/resources/js/Pages/Dashboard.vue index 1188c6d..5b5f5ae 100644 --- a/resources/js/Pages/Dashboard.vue +++ b/resources/js/Pages/Dashboard.vue @@ -3,7 +3,9 @@
- +
@@ -50,5 +52,6 @@ defineProps({ can: Object, stats: Object, years: Object, + allHolidays: Object, }) diff --git a/resources/js/Shared/Widgets/Calendar/DateComponent.vue b/resources/js/Shared/Widgets/Calendar/DateComponent.vue new file mode 100644 index 0000000..63f6993 --- /dev/null +++ b/resources/js/Shared/Widgets/Calendar/DateComponent.vue @@ -0,0 +1,70 @@ + + + \ No newline at end of file diff --git a/resources/js/Shared/Widgets/VacationCalendar.vue b/resources/js/Shared/Widgets/VacationCalendar.vue index d8b709f..5d5dc2c 100644 --- a/resources/js/Shared/Widgets/VacationCalendar.vue +++ b/resources/js/Shared/Widgets/VacationCalendar.vue @@ -120,19 +120,14 @@ class="w-full grid grid-cols-7 gap-px" :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }" > -
- -
+ :holidaydescription="getHolidayDescription" + />
@@ -147,16 +142,23 @@ import { DateTime } from 'luxon' import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo' import { useMonthInfo } from '@/Composables/monthInfo' import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions' +import DateComponent from '@/Shared/Widgets/Calendar/DateComponent' + +const props = defineProps({ + holidays: Object, +}) let days = ref([]) -const months = useMonthInfo().getMonths() + function getCurrentDate() { const { year, month, weekNumber } = DateTime.now() return { year, month, week: weekNumber } } -const selectedYear = useCurrentYearPeriodInfo().year.value const currentDate = getCurrentDate() +const months = useMonthInfo().getMonths() +const selectedYear = useCurrentYearPeriodInfo().year.value + const calendar = { viewMode: ref('week'), currents: reactive({ @@ -227,6 +229,7 @@ const customCalendar = { isCurrentMonth: isInCurrentMonth(day), isToday: isToday(day), isWeekend: isWeekend(day), + isHoliday: isHoliday(day), } }, } @@ -325,6 +328,14 @@ function isWeekend(date) { function isToday(date) { return date.toISODate() === DateTime.local().toISODate() } + +function isHoliday(date) { + return props.holidays[date.toISODate()] !== undefined +} + +function getHolidayDescription(day) { + return props.holidays[day.date] +}