Merge branch '#152-dashboard-calendar-widget' into #152-dashboard

- improved calendar responsiveness
Merge branch '#152-dashboard-tables' into #152-dashboard
2022-07-06 16:30:49 +02:00 · 2022-07-06 16:28:33 +02:00 · 2022-07-06 15:01:22 +02:00 · 2022-07-06 14:56:22 +02:00 · 2022-07-04 19:28:13 +02:00 · 2022-07-04 12:51:58 +02:00
19 changed files with 267 additions and 76 deletions
--- a/app/Eloquent/Models/Resume.php
+++ b/app/Eloquent/Models/Resume.php
@@ -31,6 +31,7 @@ class Resume extends Model
        "technologies" => AsCollection::class,
        "projects" => AsCollection::class,
    ];
+    protected $perPage = 50;

    public function user(): BelongsTo
    {
--- a/app/Eloquent/Models/User.php
+++ b/app/Eloquent/Models/User.php
@@ -46,6 +46,7 @@ class User extends Authenticatable implements NotifiableInterface
    protected $with = [
        "profile",
    ];
+    protected $perPage = 50;

    public function profile(): HasOne
    {
--- a/app/Eloquent/Models/VacationRequest.php
+++ b/app/Eloquent/Models/VacationRequest.php
@@ -49,6 +49,7 @@ class VacationRequest extends Model
        "to" => "date",
        "event_ids" => AsCollection::class,
    ];
+    protected $perPage = 50;

    public function user(): BelongsTo
    {
--- a/app/Infrastructure/Http/Controllers/DashboardController.php
+++ b/app/Infrastructure/Http/Controllers/DashboardController.php
@@ -12,8 +12,11 @@ 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\Vacation;
 use Toby\Eloquent\Models\VacationRequest;
 use Toby\Infrastructure\Http\Resources\HolidayResource;
+use Toby\Infrastructure\Http\Resources\SimpleVacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationRequestResource;
 use Toby\Infrastructure\Http\Resources\VacationResource;

@@ -54,6 +57,22 @@ class DashboardController extends Controller
            ->limit(3)
            ->get();

+        $allHolidays = $yearPeriod->holidays;
+
+        $approvedVacations = $request->user()
+            ->vacations()
+            ->with("vacationRequest.vacations")
+            ->whereBelongsTo($yearPeriod)
+            ->approved()
+            ->get();
+
+        $pendingVacations = $request->user()
+            ->vacations()
+            ->with("vacationRequest.vacations")
+            ->whereBelongsTo($yearPeriod)
+            ->pending()
+            ->get();
+
        $limit = $vacationStatsRetriever->getVacationDaysLimit($user, $yearPeriod);
        $used = $vacationStatsRetriever->getUsedVacationDays($user, $yearPeriod);
        $pending = $vacationStatsRetriever->getPendingVacationDays($user, $yearPeriod);
@@ -66,6 +85,19 @@ 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],
+            ),
+            "approvedVacations" => $approvedVacations->mapWithKeys(
+                fn(Vacation $vacation): array => [
+                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
+                ],
+            ),
+            "pendingVacations" => $pendingVacations->mapWithKeys(
+                fn(Vacation $vacation): array => [
+                    $vacation->date->toDateString() => new SimpleVacationRequestResource($vacation->vacationRequest),
+                ],
+            ),
            "stats" => [
                "limit" => $limit,
                "remaining" => $remaining,
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -3,11 +3,11 @@
  <div class="grid grid-cols-1 gap-4 items-start xl:grid-cols-3 xl:gap-8">
    <div class="grid grid-cols-1 gap-4 xl:col-span-2">
      <Welcome :user="auth.user" />
-      <VacationCalendar />
-      <VacationStats :stats="stats" />
-    </div>
-    <div class="grid grid-cols-1 gap-4">
-      <VacationCalendar />
+      <VacationCalendar
+        :holidays="allHolidays"
+        :approved-vacations="approvedVacations"
+        :pending-vacations="pendingVacations"
+      />
      <PendingVacationRequests
        v-if="can.listAllVacationRequests"
        :requests="vacationRequests.data"
@@ -16,6 +16,9 @@
        v-else
        :requests="vacationRequests.data"
      />
+    </div>
+    <div class="grid grid-cols-1 gap-4">
+      <VacationStats :stats="stats" />
      <AbsenceList
        v-if="years.current.year === years.selected.year && absences.data.length"
        :absences="absences.data"
@@ -51,5 +54,8 @@ defineProps({
  can: Object,
  stats: Object,
  years: Object,
+  allHolidays: Object,
+  approvedVacations: Object,
+  pendingVacations: Object,
 })
 </script>
--- a/resources/js/Pages/Holidays/Index.vue
+++ b/resources/js/Pages/Holidays/Index.vue
@@ -17,7 +17,7 @@
      </div>
    </div>
    <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
--- a/resources/js/Pages/Keys.vue
+++ b/resources/js/Pages/Keys.vue
@@ -19,7 +19,7 @@
      </div>
    </div>
    <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
--- a/resources/js/Pages/MonthlyUsage.vue
+++ b/resources/js/Pages/MonthlyUsage.vue
@@ -9,7 +9,7 @@
      </div>
    </div>
    <div class="border-t border-gray-200">
-      <div class="overflow-x-auto xl:overflow-x-visible">
+      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
--- a/resources/js/Pages/Resumes/Index.vue
+++ b/resources/js/Pages/Resumes/Index.vue
@@ -15,7 +15,7 @@
      </div>
    </div>
    <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
--- a/resources/js/Pages/Technologies.vue
+++ b/resources/js/Pages/Technologies.vue
@@ -18,7 +18,7 @@
      </div>
    </div>
    <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
--- a/resources/js/Pages/Users/Index.vue
+++ b/resources/js/Pages/Users/Index.vue
@@ -30,7 +30,7 @@
          >
        </div>
      </div>
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
--- a/resources/js/Pages/VacationLimits.vue
+++ b/resources/js/Pages/VacationLimits.vue
@@ -10,13 +10,13 @@
    </div>
    <div class="border-t border-gray-200">
      <form @submit.prevent="submitVacationDays">
-        <div class="overflow-auto xl:overflow-visible">
+        <div class="overflow-x-auto">
          <table class="min-w-full border-b divide-y divide-gray-200">
            <thead class="bg-gray-50">
              <tr>
                <th
                  scope="col"
-                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap bg-gray-50 sticky -left-1"
                >
                  Imię i nazwisko
                </th>
@@ -52,8 +52,8 @@
                :key="item.id"
                class="hover:bg-blumilk-25"
              >
-                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
-                  <div class="flex">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap bg-white sticky -left-1 z-10">
+                  <div class="flex justify-start items-center">
                    <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                      <img
                        class="w-10 h-10 rounded-full"
@@ -61,10 +61,16 @@
                      >
                    </span>
                    <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900 break-all">
-                        {{ item.user.name }}
+                      <p class="flex items-start flex-col-reverse md:flex-row">
+                        <span
+                          v-for="split in item.user.name.split(' ', 2)"
+                          :key="split"
+                          class="first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
+                        >
+                          {{ split }}
+                        </span>
                      </p>
-                      <p class="text-sm text-gray-500 break-all">
+                      <p class="hidden md:block text-sm text-gray-500 break-all">
                        {{ item.user.email }}
                      </p>
                    </div>
--- a/resources/js/Pages/VacationRequest/Create.vue
+++ b/resources/js/Pages/VacationRequest/Create.vue
@@ -297,8 +297,8 @@
              <button
                type="submit"
                class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                :disabled="form.processing || !form.isDirty"
+                :class="[form.processing || !isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                :disabled="form.processing || !isDirty"
              >
                Zapisz
              </button>
@@ -359,6 +359,13 @@ const form = useForm({
  flowSkipped: false,
 })

+let isDirty = ref(false)
+
+watch(form, formData => {
+  const { from, to } = formData.data()
+  isDirty.value = formData.isDirty || from !== null || to !== null
+}, { immediate: true, deep: true })
+
 refreshEstimatedDays(form.from, form.to)

 const estimatedDays = ref([])
--- a/resources/js/Pages/VacationRequest/Index.vue
+++ b/resources/js/Pages/VacationRequest/Index.vue
@@ -88,7 +88,7 @@
        </Listbox>
      </div>
    </div>
-    <div class="overflow-auto xl:overflow-visible">
+    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
--- a/resources/js/Pages/VacationRequest/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -53,7 +53,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-x-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"
              >
                <ListboxOption
                  v-slot="{ active }"
@@ -237,7 +237,7 @@
        </Listbox>
      </div>
    </div>
-    <div class="overflow-auto xl:overflow-visible">
+    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200">
        <thead class="bg-gray-50">
          <tr>
--- a/resources/js/Shared/Widgets/Calendar/DayComponent.vue
+++ b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
@@ -0,0 +1,104 @@
+<template>
+  <div
+    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
+  >
+    <Popper
+      v-if="day.isHoliday"
+      as="div"
+      open-delay="200"
+      hover
+      offset-distance="0"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <time
+        :datetime="day.date"
+        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white', 'text-red-600' ]"
+      >
+        {{ day.dayNumber }}
+      </time>
+      <template #content>
+        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
+          {{ getHolidayDescription(day) }}
+        </div>
+      </template>
+    </Popper>
+    <Popper
+      v-else-if="day.isPendingVacation"
+      as="div"
+      open-delay="200"
+      hover
+      offset-distance="0"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <time
+        :datetime="day.date"
+        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
+      >
+        {{ day.dayNumber }}
+      </time>
+      <template #content>
+        <VacationPopup :vacation="getVacationInfo(day)" />
+      </template>
+    </Popper>
+    <div
+      v-else-if="day.isWeekend"
+    >
+      <time
+        :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.dayNumber }}
+      </time>
+    </div>
+    <InertiaLink
+      v-else
+      href="/vacation/requests/create"
+      :data="{ 'from_date': day.date }"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
+    >
+      <time
+        :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.dayNumber }}
+      </time>
+    </InertiaLink>
+  </div>
+</template>
+
+<script setup>
+import Popper from 'vue3-popper'
+import { defineProps, ref } from 'vue'
+import VacationPopup from '@/Shared/VacationPopup'
+
+defineProps({
+  day: {
+    type: Object,
+    required: true,
+  },
+  getHolidayDescription: {
+    type: Function,
+  },
+  getVacationBorder: {
+    type: Function,
+  },
+  getVacationInfo: {
+    type: Function,
+  },
+})
+
+const isActive = ref(false)
+
+function onMouseover() {
+  if (!isActive.value)
+    isActive.value = true
+}
+
+function onMouseleave() {
+  if (isActive.value)
+    isActive.value = false
+}
+</script>
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -10,6 +10,7 @@
            v-if="calendarState.isPrevious"
            type="button"
            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            :class="{ 'rounded-r-md border-r md:rounded-r-none md:border-r-0': !calendarState.isNext }"
            @click="toLast"
          >
            <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
@@ -24,13 +25,17 @@
            :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
            @click="goToToday"
          >
-            Dziś
+            Dzisiaj
          </button>
-          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
+          <span
+            class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
+            :class="{ 'hidden': !calendarState.isPrevious || !calendarState.isNext }"
+          />
          <button
            v-if="calendarState.isNext"
            type="button"
            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
+            :class="{ 'rounded-l-md border-l md:rounded-l-none md:border-l-0': !calendarState.isPrevious }"
            @click="toNext"
          >
            <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
@@ -49,7 +54,8 @@
          type="button"
          class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
        >
-          {{ calendarState.viewMode.details.name }}
+          <span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
+          <span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
          <ChevronDownIcon
            class="ml-2 h-5 w-5 text-gray-400"
            aria-hidden="true"
@@ -120,19 +126,16 @@
          class="w-full grid grid-cols-7 gap-px"
          :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
        >
-          <div
+          <DayComponent
            v-for="(day, index) in days"
            :key="index"
-            class="flex flex-col"
-            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', calendarState.viewMode.isWeek && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, calendarState.viewMode.isWeek ? 'day' : 'month-day', 'relative py-2 px-3']"
-          >
-            <time
-              :datetime="day.date"
-              :class="day.isToday ? 'flex h-6 w-6 items-center justify-center rounded-full bg-indigo-600 font-semibold text-white' : undefined"
-            >
-              {{ day.date.split('-').pop().replace(/^0/, '') }}
-            </time>
-          </div>
+            :day="day"
+            class="flex flex-col relative py-2 px-3"
+            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
+            :get-holiday-description="getHolidayDescription"
+            :get-vacation-border="getVacationBorder"
+            :get-vacation-info="getVacationInfo"
+          />
        </div>
      </div>
    </div>
@@ -144,19 +147,31 @@ import { CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from '@
 import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/vue'
 import { ref, watch, computed, reactive } from 'vue'
 import { DateTime } from 'luxon'
+import useVacationTypeInfo from '@/Composables/vacationTypeInfo'
 import useCurrentYearPeriodInfo from '@/Composables/yearPeriodInfo'
 import { useMonthInfo } from '@/Composables/monthInfo'
 import { viewModes, find as findViewMode } from '@/Shared/Widgets/Calendar/ViewModeOptions'
+import DayComponent from '@/Shared/Widgets/Calendar/DayComponent'
+
+const props = defineProps({
+  holidays: Object,
+  approvedVacations: Object,
+  pendingVacations: 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 { findType } = useVacationTypeInfo()
+const selectedYear = useCurrentYearPeriodInfo().year.value
+const weeksInYear = DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber
+
 const calendar = {
  viewMode: ref('week'),
  currents: reactive({
@@ -175,11 +190,11 @@ const calendarState = reactive({
  monthName: computed(() => months[calendar.currents.month - 1]?.name),
  isActualYear: computed(() => calendar.currents.year === DateTime.now().year),
  isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0),
-  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber),
+  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < weeksInYear),
 })

 const customCalendar = {
-  generateCalendar() {
+  loadCalendar() {
    const date = DateTime.fromObject({
      year: calendar.currents.year,
      month: calendarState.viewMode.isMonth ? calendar.currents.month : 1,
@@ -221,33 +236,38 @@ const customCalendar = {
    return days
  },
  prepareDay(day) {
+    const isCurrentMonth = isInCurrentMonth(day)
    return {
      date: day.toISODate(),
      dayNumber: day.day,
-      isCurrentMonth: isInCurrentMonth(day),
+      isCurrentMonth: isCurrentMonth,
      isToday: isToday(day),
+      isWeekend: isWeekend(day),
+      isHoliday: isHoliday(day),
+      isVacation: isCurrentMonth && isVacation(day),
+      isPendingVacation: isCurrentMonth && isPendingVacation(day),
    }
  },
 }

 watch([calendar.viewMode, calendar.currents], () => {
-  customCalendar.generateCalendar()
+  customCalendar.loadCalendar()
 })

-customCalendar.generateCalendar()
+customCalendar.loadCalendar()

 function toLast() {
  if (calendar.viewMode.value === 'week')
    minusWeek()
  else
-    addMonths(-1)
+    minusMonth()
 }

 function toNext() {
-  if (calendar.viewMode.value === 'week') {
+  if (calendar.viewMode.value === 'week')
    addWeek()
-  } else
-    addMonths()
+  else
+    addMonth()
 }

 function resetCalendar(config = {}) {
@@ -256,7 +276,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) {
@@ -275,15 +295,10 @@ function addWeek(minus = false) {

  const startWeekDay = date.startOf('week'), endWeekDay = date.endOf('week')
  nextMonth = howMany > 0 ? startWeekDay.month : endWeekDay.month
-  if (howMany < 0 && endWeekDay.day === endWeekDay.daysInMonth) {
-    console.log('pre', endWeekDay.day, endWeekDay.daysInMonth)
+  if (howMany < 0 && endWeekDay.day === endWeekDay.daysInMonth)
    calendar.currents.week--
-  } else if (howMany > 0 && startWeekDay.day === 1) {
-    console.log('next', endWeekDay.day, endWeekDay.daysInMonth)
+  else if (howMany > 0 && startWeekDay.day === 1)
    calendar.currents.week++
-  } else {
-    console.log('else', endWeekDay.day, endWeekDay.daysInMonth)
-  }

  if (nextMonth !== calendar.currents.month) {
    calendar.currents.month = calendar.currents.week > 1 ? nextMonth : 1
@@ -298,8 +313,12 @@ function minusWeek() {
  addWeek(true)
 }

-function addMonths(howMany = 1) {
-  calendar.currents.month += howMany
+function addMonth(minus = false) {
+  calendar.currents.month += minus ? -1 : 1
+}
+
+function minusMonth() {
+  addMonth(true)
 }

 function goToToday() {
@@ -308,7 +327,7 @@ function goToToday() {

 function updateViewMode(type) {
  if (type === 'month')
-    resetCalendar({ week: 1 })
+    resetCalendar({ week: 0 })
  else
    resetCalendar()
  calendar.viewMode.value = type
@@ -318,9 +337,37 @@ 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()
 }
+
+function isHoliday(date) {
+  return props.holidays[date.toISODate()] !== undefined
+}
+
+function getHolidayDescription(day) {
+  return props.holidays[day.date]
+}
+
+function isVacation(date) {
+  return props.approvedVacations[date.toISODate()] !== undefined
+}
+
+function isPendingVacation(date) {
+  return props.pendingVacations[date.toISODate()] !== undefined
+}
+
+function getVacationBorder(day) {
+  return findType(getVacationInfo(day).type)?.border
+}
+
+function getVacationInfo(day) {
+  return day.isVacation ? props.approvedVacations[day.date] : props.pendingVacations[day.date]
+}
 </script>

 <style lang="css">
@@ -344,11 +391,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";
 }
@@ -356,8 +398,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;
-}
 </style>
--- a/resources/js/Shared/Widgets/VacationStats.vue
+++ b/resources/js/Shared/Widgets/VacationStats.vue
@@ -1,8 +1,5 @@
 <template>
-  <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
-    <div class="hidden p-4 bg-white shadow-md md:block">
-      <VacationChart :stats="stats" />
-    </div>
+  <section class="grid grid-cols-1 gap-4 md:grid-cols-1">
    <div class="h-full">
      <div class="grid grid-cols-2 gap-4 h-full">
        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
@@ -77,8 +74,6 @@
 </template>

 <script setup>
-import VacationChart from '@/Shared/VacationChart'
-
 defineProps({
  stats: Object,
 })
--- a/tests/Feature/UserTest.php
+++ b/tests/Feature/UserTest.php
@@ -73,10 +73,10 @@ class UserTest extends FeatureTestCase

    public function testUserListIsPaginated(): void
    {
-        User::factory()->count(15)->create();
+        User::factory()->count(50)->create();
        $admin = User::factory()->admin()->create();

-        $this->assertDatabaseCount("users", 16);
+        $this->assertDatabaseCount("users", 51);

        $this->actingAs($admin)
            ->get("/users?page=2")
Author	SHA1	Message	Date
Kamil Niemczycki	0ffa89691a	Merge branch '#152-dashboard-calendar-widget' into #152-dashboard	2022-07-06 16:30:49 +02:00
Kamil Niemczycki	783586d3ed	- improved calendar responsiveness	2022-07-06 16:28:33 +02:00
Kamil Niemczycki	9bd3cca970	Merge branch '#152-dashboard-tables' into #152-dashboard	2022-07-06 15:01:22 +02:00
Kamil Niemczycki	48bd4ab644	#152 - change layout	2022-07-06 14:56:22 +02:00
Kamil Niemczycki	043217e9d4	- fixed overflow	2022-07-04 19:28:13 +02:00
Kamil Niemczycki	31f771b8e4	Merge branch '#152-dashboard-tables' into #152-dashboard	2022-07-04 12:51:58 +02:00
Kamil Niemczycki	9e47c7cb28	#152 - updated vacation limits	2022-07-04 11:41:59 +02:00
Kamil Niemczycki	e6f4d0e78c	#152 - updated calendar view	2022-07-04 11:04:43 +02:00
Kamil Niemczycki	8dc487a133	#152 - updated MonthlyUsage	2022-07-04 11:04:14 +02:00
Kamil Niemczycki	5f0d6b5af3	#152 - updated header in calendar	2022-07-04 11:00:35 +02:00
Kamil Niemczycki	f755e1e0db	#152 - updated calendar	2022-07-04 11:00:10 +02:00
Kamil Niemczycki	bf03289797	Merge branch '#152-dashboard-calendar-widget' into #152-dashboard	2022-07-04 10:47:41 +02:00
Kamil Niemczycki	1d7b4da903	- added new line in file	2022-07-04 10:45:14 +02:00
Kamil Niemczycki	13aa2c7a86	Merge branch '#152-dashboard-calendar-widget' into #152-dashboard	2022-07-04 10:33:53 +02:00
Kamil Niemczycki	94f433de6e	#152 - added redirections	2022-07-04 10:16:40 +02:00
Kamil Niemczycki	a9c476cb8e	wip	2022-07-04 10:16:36 +02:00
Kamil Niemczycki	5c3833d4cb	- component renamed	2022-07-04 10:16:23 +02:00
Kamil Niemczycki	6e627d11c8	#152 - added vacations	2022-07-04 10:16:19 +02:00
Kamil Niemczycki	eb644fa494	#152 - added holidays	2022-07-04 10:16:08 +02:00
Kamil Niemczycki	4392b666e1	#152 - small corrections	2022-07-01 14:57:38 +02:00
Kamil Niemczycki	e7c1028da1	#152 - updated style	2022-07-01 14:56:55 +02:00
Kamil Niemczycki	c16eb9aff5	Merge branch 'dashboard-calendar-widget' into #152-dashboard	2022-06-26 17:26:18 +02:00
Kamil Niemczycki	a7bc4695a7	#152 - final support for weeks	2022-06-24 11:20:18 +02:00
Kamil Niemczycki	4e16f363ac	#152 - optimization	2022-06-24 11:11:09 +02:00
Kamil Niemczycki	7893282385	#152 - wip	2022-06-24 10:22:51 +02:00
Kamil Niemczycki	db874d4395	#152 - wip	2022-06-24 10:08:48 +02:00
Kamil Niemczycki	dcc3808428	#152 - wip	2022-06-24 10:00:36 +02:00
Kamil Niemczycki	2a3e65ed5f	#152 - calendar template added	2022-06-24 09:58:21 +02:00
Kamil Niemczycki	643f546142	#173 - button behaviour in creating request (#174 ) #173 - improved button behaviour	2022-06-20 09:33:30 +02:00
Kamil Niemczycki	995c0b6696	- changed limits for item list (#171 ) * - changed limits for displayed items * - transferred to models * - updated tests	2022-06-15 10:14:58 +02:00