#152 - change layout

Merge branch '#152-dashboard-tables' into #152-dashboard
#152 - updated vacation limits
2022-07-06 14:56:22 +02:00 · 2022-07-04 12:51:58 +02:00 · 2022-07-04 11:41:59 +02:00 · 2022-07-04 11:04:43 +02:00 · 2022-07-04 11:04:14 +02:00 · 2022-07-04 11:00:35 +02:00
19 changed files with 926 additions and 882 deletions
--- a/app/Domain/UserVacationStatsRetriever.php
+++ b/app/Domain/UserVacationStatsRetriever.php
@@ -103,14 +103,6 @@ class UserVacationStatsRetriever
        return $limit ?? 0;
    }

-    public function hasVacationDaysLimit(User $user, YearPeriod $yearPeriod): bool
-    {
-        return $user->vacationLimits()
-            ->whereBelongsTo($yearPeriod)
-            ->first()
-            ?->hasVacation() ?? false;
-    }
-
    protected function getLimitableVacationTypes(): Collection
    {
        $types = VacationType::all();
--- a/app/Infrastructure/Http/Controllers/DashboardController.php
+++ b/app/Infrastructure/Http/Controllers/DashboardController.php
@@ -74,7 +74,6 @@ class DashboardController extends Controller
            ->get();

        $limit = $vacationStatsRetriever->getVacationDaysLimit($user, $yearPeriod);
-        $hasLimit = $vacationStatsRetriever->hasVacationDaysLimit($user, $yearPeriod);
        $used = $vacationStatsRetriever->getUsedVacationDays($user, $yearPeriod);
        $pending = $vacationStatsRetriever->getPendingVacationDays($user, $yearPeriod);
        $homeOffice = $vacationStatsRetriever->getHomeOfficeDays($user, $yearPeriod);
@@ -100,7 +99,6 @@ class DashboardController extends Controller
                ],
            ),
            "stats" => [
-                "hasLimit" => $hasLimit,
                "limit" => $limit,
                "remaining" => $remaining,
                "used" => $used,
--- a/composer.json
+++ b/composer.json
@@ -9,7 +9,7 @@
        "ext-pdo": "*",
        "ext-redis": "*",
        "azuyalabs/yasumi": "^2.4",
-        "barryvdh/laravel-dompdf": "^2.0",
+        "barryvdh/laravel-dompdf": "^1.0",
        "fruitcake/laravel-cors": "^3.0",
        "guzzlehttp/guzzle": "^7.0.1",
        "inertiajs/inertia-laravel": "^0.6.2",
--- a/composer.lock
+++ b/composer.lock
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -2,7 +2,7 @@ version: '3.8'

 services:
  web:
-    image: nginx:1.23-alpine
+    image: nginx:1.21-alpine
    container_name: toby-web
    working_dir: /application
    volumes:
@@ -76,7 +76,7 @@ services:
    restart: unless-stopped

  node:
-    image: node:18.4.0-alpine3.16
+    image: node:18.1.0-alpine3.14
    container_name: toby-node
    working_dir: /application
    volumes:
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
        "lintf": "./node_modules/.bin/eslint resources/js --ext .js,.vue --fix"
    },
    "dependencies": {
-        "@headlessui/vue": "^1.6.5",
+        "@headlessui/vue": "^1.6.4",
        "@heroicons/vue": "^1.0.6",
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
@@ -21,27 +21,27 @@
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/line-clamp": "^0.4.0",
        "@tailwindcss/typography": "^0.5.2",
-        "@vue/compiler-sfc": "^3.2.37",
+        "@vue/compiler-sfc": "^3.2.31",
        "autoprefixer": "^10.4.7",
        "axios": "^0.27.2",
-        "echarts": "^5.3.3",
+        "echarts": "^5.3.2",
        "flatpickr": "^4.6.13",
-        "laravel-mix": "^6.0.49",
+        "laravel-mix": "^6.0.44",
        "lodash": "^4.17.21",
-        "luxon": "^2.4.0",
+        "luxon": "^2.3.2",
        "postcss": "^8.4.14",
-        "tailwindcss": "^3.1.4",
-        "vue": "3.2.37",
-        "vue-echarts": "^6.1.0",
+        "tailwindcss": "^3.0.24",
+        "vue": "3.2.21",
+        "vue-echarts": "^6.0.2",
        "vue-flatpickr-component": "^9.0.6",
        "vue-loader": "^17.0.0",
-        "vue-material-design-icons": "^5.1.1",
+        "vue-material-design-icons": "^5.0.0",
        "vue-toastification": "^2.0.0-rc.5",
        "vue3-popper": "^1.5.0",
        "vuedraggable": "^4.1.0"
    },
    "devDependencies": {
-        "eslint": "^8.19.0",
-        "eslint-plugin-vue": "^9.1.1"
+        "eslint": "^8.16.0",
+        "eslint-plugin-vue": "^9.1.0"
    }
 }
--- a/resources/js/Pages/Calendar.vue
+++ b/resources/js/Pages/Calendar.vue
@@ -55,18 +55,20 @@
      </div>
    </div>
    <div class="overflow-x-auto">
-      <table class="w-full text-sm text-center border border-gray-300">
+      <table class="w-full text-sm text-center border-y border-r border-gray-300">
        <thead>
          <tr>
-            <th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
+            <th
+              class="py-2 w-64 text-lg font-semibold text-gray-800 border-y border-gray-300 bg-white sticky left-0 sticky-border"
+            >
              <div class="flex justify-center items-center">
-                {{ selectedMonth.name }} {{ years.selected.year }}
+                {{ selectedMonth.name }}
              </div>
            </th>
            <th
              v-for="day in calendar"
              :key="day.dayOfMonth"
-              class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
+              class="p-2 text-lg font-semibold text-gray-900 border second:border-l-0 border-gray-300"
              style="min-width: 46px;"
              :class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
            >
@@ -84,22 +86,28 @@
            v-for="user in users.data"
            :key="user.id"
          >
-            <th class="p-2 border border-gray-300">
+            <th
+              class="p-2 border-y border-gray-300 bg-white sticky left-0 sticky-border"
+            >
              <div class="flex justify-start items-center">
                <span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
                  <img :src="user.avatar">
                </span>
-                <div class="ml-3">
-                  <div class="text-sm font-medium text-gray-900 truncate">
-                    {{ user.name }}
-                  </div>
+                <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
+                  <span
+                    v-for="split in user.name.split(' ', 2)"
+                    :key="split"
+                    class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
+                  >
+                    {{ split }}
+                  </span>
                </div>
              </div>
            </th>
            <td
              v-for="day in calendar"
              :key="day.dayOfMonth"
-              class="border border-gray-300"
+              class="border second:border-l-0 border-gray-300"
              :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday }"
              @mouseover="setActiveDay(user.id + '+' + day.date)"
              @mouseleave="unsetActiveDay"
@@ -176,3 +184,10 @@ function linkParameters(user, day) {
  return props.can.createOnBehalfOfEmployee ? { user: user.id, from_date: day.date } : { from_date: day.date }
 }
 </script>
+
+<style lang="css">
+.sticky-border {
+  box-shadow: inset -1px 0 rgb(209 213 219 / 1),
+              inset 1px 0 rgb(209 213 219 / 1);
+}
+</style>
--- a/resources/js/Pages/Dashboard.vue
+++ b/resources/js/Pages/Dashboard.vue
@@ -20,9 +20,11 @@
    <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"
      />
      <HomeOfficeList
+        v-if="years.current.year === years.selected.year && remoteDays.data.length"
        :remote-days="remoteDays.data"
      />
      <UpcomingHolidays
--- a/resources/js/Pages/MonthlyUsage.vue
+++ b/resources/js/Pages/MonthlyUsage.vue
@@ -9,11 +9,11 @@
      </div>
    </div>
    <div class="border-t border-gray-200">
-      <div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
+      <div class="overflow-x-auto xl:overflow-x-visible">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
-              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
+              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase bg-gray-50 sticky -left-1">
                Pracownik
              </th>
              <th
@@ -38,7 +38,7 @@
              :key="item.user.id"
              class="hover:bg-blumilk-25"
            >
-              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
+              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap bg-white sticky -left-1">
                <div class="flex justify-start items-center">
                  <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                    <img
@@ -46,12 +46,14 @@
                      :src="item.user.avatar"
                    >
                  </span>
-                  <div class="ml-3">
-                    <div
-                      class="text-sm font-medium text-gray-900 whitespace-nowrap"
+                  <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
+                    <span
+                      v-for="split in item.user.name.split(' ', 2)"
+                      :key="split"
+                      class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
                    >
-                      {{ item.user.name }}
-                    </div>
+                      {{ split }}
+                    </span>
                  </div>
                </div>
              </th>
--- a/resources/js/Pages/VacationLimits.vue
+++ b/resources/js/Pages/VacationLimits.vue
@@ -16,7 +16,7 @@
              <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/IndexForApprovers.vue
+++ b/resources/js/Pages/VacationRequest/IndexForApprovers.vue
@@ -242,46 +242,12 @@
        <thead class="bg-gray-50">
          <tr>
            <th
+              v-for="head in headers"
+              :key="head"
              scope="col"
              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
            >
-              Numer
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Pracownik
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Rodzaj wniosku
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Od
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Do
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Dni urlopu
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Status
+              {{ head }}
            </th>
            <th scope="col" />
          </tr>
@@ -381,6 +347,8 @@ const props = defineProps({
  types: Object,
 })

+const headers = ['Numer', 'Pracownik', 'Rodzaj wniosku', 'Od', 'Do', 'Dni urlopu', 'Status']
+
 const statuses = [
  {
    name: 'Wszystkie',
--- a/resources/js/Shared/Feedbacks/EmptyState.vue
+++ b/resources/js/Shared/Feedbacks/EmptyState.vue
@@ -8,10 +8,7 @@
        No search result
      </slot>
    </h3>
-    <p
-      v-if="showDescription"
-      class="text-sm"
-    >
+    <p class="text-sm">
      <slot name="text">
        Try a different search query
      </slot>
@@ -21,11 +18,4 @@

 <script setup>
 import { SearchIcon } from '@heroicons/vue/solid'
-
-defineProps({
-  showDescription: {
-    type: Boolean,
-    default: true,
-  },
-})
 </script>
--- a/resources/js/Shared/Widgets/AbsenceList.vue
+++ b/resources/js/Shared/Widgets/AbsenceList.vue
@@ -6,10 +6,7 @@
      </h2>
    </div>
    <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul
-        v-if="absences.length"
-        class="divide-y divide-gray-200"
-      >
+      <ul class="divide-y divide-gray-200">
        <li
          v-for="absence in absences"
          :key="absence.user.id"
@@ -29,25 +26,11 @@
          </div>
        </li>
      </ul>
-      <EmptyState
-        v-else
-        :show-description="false"
-      >
-        <template #head>
-          <SunIcon class="mx-auto w-12 h-12" />
-        </template>
-        <template #title>
-          Brak nieobecności
-        </template>
-      </EmptyState>
    </div>
  </section>
 </template>

 <script setup>
-import EmptyState from '@/Shared/Feedbacks/EmptyState'
-import { SunIcon } from '@heroicons/vue/solid'
-
 defineProps({
  absences: Object,
 })
--- a/resources/js/Shared/Widgets/Calendar/DayComponent.vue
+++ b/resources/js/Shared/Widgets/Calendar/DayComponent.vue
@@ -1,21 +1,6 @@
 <template>
  <div
-    class="box-border"
-    :class="[
-      day.isCurrentMonth ? {
-        'bg-red-100': day.isWeekend,
-        'bg-white hover:bg-blumilk-25': !day.isWeekend && !day.isHoliday,
-        'bg-red-100 text-red-800': day.isHoliday || day.isWeekend
-      } : [
-        'bg-gray-50 text-gray-500',
-        {
-          'bg-red-50': day.isWeekend
-        }
-      ],
-      day.isHoliday && 'font-bold cursor-default',
-      (day.isPendingVacation) && `pb-0 border-b-[3px] border-dashed ${day.getVacationType.border}`,
-      (day.isVacation) && `pb-0 border-b-[3px] ${day.getVacationType.border}`
-    ]"
+    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
  >
    <Popper
      v-if="day.isHoliday"
@@ -25,6 +10,27 @@
      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"
@@ -33,44 +39,14 @@
        {{ 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">
-          {{ day.getHolidayInfo }}
-        </div>
-      </template>
-    </Popper>
-    <Popper
-      v-else-if="day.isVacation || day.isPendingVacation"
-      as="div"
-      open-delay="200"
-      hover
-      offset-distance="0"
-      @mouseover.passive="onMouseover"
-      @mouseleave="onMouseleave"
-    >
-      <div class="flex justify-between">
-        <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>
-        <div class="hidden md:inline-block">
-          <VacationIcon
-            :type="day.getVacationType.value"
-          />
-        </div>
-      </div>
-      <template #content>
-        <VacationPopup :vacation="day.getVacationInfo" />
+        <VacationPopup :vacation="getVacationInfo(day)" />
      </template>
    </Popper>
    <div
      v-else-if="day.isWeekend"
-      class="text-red-800"
    >
      <time
        :datetime="day.date"
-        class="cursor-default"
        :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
      >
        {{ day.dayNumber }}
@@ -97,13 +73,21 @@
 import Popper from 'vue3-popper'
 import { defineProps, ref } from 'vue'
 import VacationPopup from '@/Shared/VacationPopup'
-import VacationIcon from '@/Shared/VacationTypeCalendarIcon'

 defineProps({
  day: {
    type: Object,
    required: true,
  },
+  getHolidayDescription: {
+    type: Function,
+  },
+  getVacationBorder: {
+    type: Function,
+  },
+  getVacationInfo: {
+    type: Function,
+  },
 })

 const isActive = ref(false)
--- a/resources/js/Shared/Widgets/HomeOfficeList.vue
+++ b/resources/js/Shared/Widgets/HomeOfficeList.vue
@@ -6,10 +6,7 @@
      </h2>
    </div>
    <div class="px-4 border-t border-gray-200 sm:px-6">
-      <ul
-        v-if="remoteDays.length"
-        class="divide-y divide-gray-200"
-      >
+      <ul class="divide-y divide-gray-200">
        <li
          v-for="day in remoteDays"
          :key="day.user.id"
@@ -29,28 +26,11 @@
          </div>
        </li>
      </ul>
-      <EmptyState
-        v-else
-        :show-description="false"
-      >
-        <template #head>
-          <HomeCityIcon
-            class="flex justify-center"
-            size="48"
-          />
-        </template>
-        <template #title>
-          Nikt nie pracuje z domu
-        </template>
-      </EmptyState>
    </div>
  </section>
 </template>

 <script setup>
-import EmptyState from '@/Shared/Feedbacks/EmptyState'
-import HomeCityIcon from 'vue-material-design-icons/HomeCity'
-
 defineProps({
  remoteDays: Object,
 })
--- a/resources/js/Shared/Widgets/VacationCalendar.vue
+++ b/resources/js/Shared/Widgets/VacationCalendar.vue
@@ -7,10 +7,10 @@
      <div class="flex justify-center">
        <div class="flex items-center rounded-md shadow-sm md:items-stretch">
          <button
+            v-if="calendarState.isPrevious"
            type="button"
-            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 py-2 pl-3 pr-4 text-gray-400 focus:relative md:w-9 md:px-2"
-            :class="[ calendarState.isPrevious ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
-            @click="toPrevious"
+            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"
+            @click="toLast"
          >
            <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
            <ChevronLeftIcon
@@ -21,18 +21,16 @@
          <button
            type="button"
            class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
+            :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
            @click="goToToday"
          >
-            Dzisiaj
+            Dziś
          </button>
-          <span
-            class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
-          />
+          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
          <button
+            v-if="calendarState.isNext"
            type="button"
-            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 py-2 pl-4 pr-3 text-gray-400 focus:relative md:w-9 md:px-2"
-            :class="[ calendarState.isNext ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
-            :disabled="!calendarState.isNext"
+            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"
            @click="toNext"
          >
            <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
@@ -51,8 +49,7 @@
          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"
        >
-          <span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
-          <span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
+          {{ calendarState.viewMode.details.name }}
          <ChevronDownIcon
            class="ml-2 h-5 w-5 text-gray-400"
            aria-hidden="true"
@@ -91,34 +88,34 @@
        </transition>
      </Menu>
    </div>
-    <div class="border border-gray-300 lg:flex lg:flex-auto lg:flex-col">
+    <div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
      <div
        v-if="calendarState.viewMode.isMonth"
-        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-300 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
+        class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
      >
-        <div class="py-2 bg-white">
-          Pon
+        <div class="bg-white py-2">
+          Pn
        </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
          Wt
        </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
          Śr
        </div>
-        <div class="py-2 bg-white">
-          Czw
+        <div class="bg-white py-2">
+          Cz
        </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
          Pt
        </div>
-        <div class="py-2 bg-red-100 text-red-800">
-          Sob
+        <div class="bg-red-100 py-2">
+          Sb
        </div>
-        <div class="py-2 bg-red-100 text-red-800">
-          Ndz
+        <div class="bg-red-100 py-2">
+          Nd
        </div>
      </div>
-      <div class="flex bg-gray-300 text-xs leading-6 text-gray-700 lg:flex-auto">
+      <div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
        <div
          class="w-full grid grid-cols-7 gap-px"
          :class="{ 'grid-rows-1': calendarState.viewMode.isWeek }"
@@ -127,8 +124,11 @@
            v-for="(day, index) in days"
            :key="index"
            :day="day"
-            class="flex flex-col relative py-3 px-3"
-            :class="{ 'day': calendarState.viewMode.isWeek }"
+            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>
@@ -164,10 +164,9 @@ 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(localStorage.getItem('calendarViewMode') ?? 'week'),
+  viewMode: ref('week'),
  currents: reactive({
    year: selectedYear,
    month: selectedYear === currentDate.year ? currentDate.month : 1,
@@ -184,7 +183,7 @@ 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 < weeksInYear),
+  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber),
 })

 const customCalendar = {
@@ -231,22 +230,15 @@ const customCalendar = {
  },
  prepareDay(day) {
    const isCurrentMonth = isInCurrentMonth(day)
-    const startDay = {
-      date: day.toISODate(),
-      isVacation: isCurrentMonth && isVacation(day),
-      isPendingVacation: isCurrentMonth && isPendingVacation(day),
-      isHoliday: isHoliday(day),
-    }
-
    return {
-      ...startDay,
+      date: day.toISODate(),
      dayNumber: day.day,
-      isCurrentMonth,
+      isCurrentMonth: isCurrentMonth,
      isToday: isToday(day),
      isWeekend: isWeekend(day),
-      getHolidayInfo: startDay.isHoliday ? getHolidayInfo(startDay) : undefined,
-      getVacationType: startDay.isVacation || startDay.isPendingVacation ? getVacationType(startDay) : undefined,
-      getVacationInfo: startDay.isVacation || startDay.isPendingVacation ? getVacationInfo(startDay) : undefined,
+      isHoliday: isHoliday(day),
+      isVacation: isCurrentMonth && isVacation(day),
+      isPendingVacation: isCurrentMonth && isPendingVacation(day),
    }
  },
 }
@@ -257,22 +249,18 @@ watch([calendar.viewMode, calendar.currents], () => {

 customCalendar.loadCalendar()

-function toPrevious() {
-  if (calendarState.isPrevious) {
-    if (calendar.viewMode.value === 'week')
-      minusWeek()
-    else
-      minusMonth()
-  }
+function toLast() {
+  if (calendar.viewMode.value === 'week')
+    minusWeek()
+  else
+    minusMonth()
 }

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

 function resetCalendar(config = {}) {
@@ -336,7 +324,6 @@ function updateViewMode(type) {
  else
    resetCalendar()
  calendar.viewMode.value = type
-  localStorage.setItem('calendarViewMode', type)
 }

 function isInCurrentMonth(date) {
@@ -355,7 +342,7 @@ function isHoliday(date) {
  return props.holidays[date.toISODate()] !== undefined
 }

-function getHolidayInfo(day) {
+function getHolidayDescription(day) {
  return props.holidays[day.date]
 }

@@ -367,8 +354,8 @@ function isPendingVacation(date) {
  return props.pendingVacations[date.toISODate()] !== undefined
 }

-function getVacationType(day) {
-  return findType(getVacationInfo(day).type)
+function getVacationBorder(day) {
+  return findType(getVacationInfo(day).type)?.border
 }

 function getVacationInfo(day) {
@@ -378,7 +365,7 @@ function getVacationInfo(day) {

 <style lang="css">
 .day:nth-of-type(7n - 6):before {
-  content: "Pon";
+  content: "Pn";
 }

 .day:nth-of-type(7n - 5):before {
@@ -390,7 +377,7 @@ function getVacationInfo(day) {
 }

 .day:nth-of-type(7n - 3):before {
-  content: "Czw";
+  content: "Cz";
 }

 .day:nth-of-type(7n - 2):before {
@@ -398,10 +385,10 @@ function getVacationInfo(day) {
 }

 .day:nth-of-type(7n - 1):before {
-  content: "Sob";
+  content: "Sb";
 }

 .day:nth-of-type(7n):before {
-  content: "Ndz";
+  content: "Nd";
 }
 </style>
--- a/resources/js/Shared/Widgets/VacationStats.vue
+++ b/resources/js/Shared/Widgets/VacationStats.vue
@@ -1,79 +1,73 @@
 <template>
-  <section>
-    <div
-      v-if="stats.hasLimit"
-      class="grid grid-cols-2 gap-2 h-full"
-    >
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
-          {{ stats.remaining }}
-        </dd>
-        <dt class="font-medium text-gray-700 truncate text-md">
-          Pozostało
-        </dt>
-        <dt class="mt-2 text-sm font-medium text-gray-500">
-          Dni do wykorzystania teraz.
-        </dt>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
-          {{ stats.used }}
-        </dd>
-        <dt class="font-medium text-gray-700 truncate text-md">
-          Wykorzystane
-        </dt>
-        <dt class="mt-2 text-sm font-medium text-gray-500">
-          Dni, które zostały już wykorzystane na urlop wypoczynkowy.
-        </dt>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
-          {{ stats.pending }}
-        </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Rozpatrywane
-        </dd>
-        <dt class="mt-2 text-sm font-medium text-gray-500">
-          Dni czekające na akceptację przełożonych.
-        </dt>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-blumilk-800">
-          {{ stats.limit }}
-        </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Limit urlopu
-        </dd>
-        <dt class="mt-2 text-sm font-medium text-gray-500">
-          Twój roczny limit urlopu wypoczynkowego.
-        </dt>
-      </div>
-    </div>
-    <div
-      v-else
-      class="h-full grid grid-cols-2 gap-2 h-full"
-    >
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-gray-500">
-          {{ stats.other }}
-        </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Inne urlopy
-        </dd>
-        <dt class="mt-2 text-sm font-medium text-gray-500">
-          Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
-        </dt>
-      </div>
-      <div class="py-5 px-4 bg-white shadow-md sm:p-6">
-        <dt class="mt-1 text-4xl font-semibold text-lime-500">
-          {{ stats.homeOffice }}
-        </dt>
-        <dd class="font-medium text-gray-700 truncate text-md">
-          Praca zdalna
-        </dd>
-        <dt class="mt-2 text-sm font-medium text-gray-500">
-          Dni przepracowane poza biurem.
-        </dt>
+  <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">
+          <dd class="mt-1 text-4xl font-semibold text-blumilk-500">
+            {{ stats.remaining }}
+          </dd>
+          <dt class="font-medium text-gray-700 truncate text-md">
+            Pozostało
+          </dt>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Dni do wykorzystania teraz.
+          </dt>
+        </div>
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+          <dd class="mt-1 text-4xl font-semibold text-blumilk-700">
+            {{ stats.used }}
+          </dd>
+          <dt class="font-medium text-gray-700 truncate text-md">
+            Wykorzystane
+          </dt>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Dni, które zostały już wykorzystane na urlop wypoczynkowy.
+          </dt>
+        </div>
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+          <dt class="mt-1 text-4xl font-semibold text-blumilk-200">
+            {{ stats.pending }}
+          </dt>
+          <dd class="font-medium text-gray-700 truncate text-md">
+            Rozpatrywane
+          </dd>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Dni czekające na akceptację przełożonych.
+          </dt>
+        </div>
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+          <dt class="mt-1 text-4xl font-semibold text-blumilk-800">
+            {{ stats.limit }}
+          </dt>
+          <dd class="font-medium text-gray-700 truncate text-md">
+            Limit urlopu
+          </dd>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Twój roczny limit urlopu wypoczynkowego.
+          </dt>
+        </div>
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+          <dt class="mt-1 text-4xl font-semibold text-gray-500">
+            {{ stats.other }}
+          </dt>
+          <dd class="font-medium text-gray-700 truncate text-md">
+            Inne urlopy
+          </dd>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Urlopy bezpłatne, okolicznościowe, zwolnienia lekarskie, itd., które zostały już zatwierdzone.
+          </dt>
+        </div>
+        <div class="py-5 px-4 bg-white shadow-md sm:p-6">
+          <dt class="mt-1 text-4xl font-semibold text-lime-500">
+            {{ stats.homeOffice }}
+          </dt>
+          <dd class="font-medium text-gray-700 truncate text-md">
+            Praca zdalna
+          </dd>
+          <dt class="mt-2 text-sm font-medium text-gray-500">
+            Dni przepracowane poza biurem.
+          </dt>
+        </div>
      </div>
    </div>
  </section>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,5 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
+const plugin = require('tailwindcss/plugin')

 module.exports = {
  content: [
@@ -31,5 +32,12 @@ module.exports = {
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/line-clamp'),
+    plugin(function({ addVariant, e }) {
+      addVariant('second', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`second${separator}${className}`)}:nth-child(2)`
+        })
+      })
+    }),
  ],
 }
Author	SHA1	Message	Date
Kamil Niemczycki	48bd4ab644	#152 - change layout	2022-07-06 14:56:22 +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	13aa2c7a86	Merge branch '#152-dashboard-calendar-widget' into #152-dashboard	2022-07-04 10:33:53 +02:00
Kamil Niemczycki	c16eb9aff5	Merge branch 'dashboard-calendar-widget' into #152-dashboard	2022-06-26 17:26:18 +02:00