- polishing calendar

app/Domain/CalendarGenerator.php

@@ -44,6 +44,7 @@ class CalendarGenerator
                 "isWeekend" => $day->isWeekend(),
                 "isHoliday" => $holidays->contains($day),
                 "vacations" => $vacationsForDay->pluck("user_id"),
+                "vacationTypes" => $vacationsForDay->pluck("vacationRequest.type", "user_id"),
             ];
         }
 
@@ -55,6 +56,7 @@ class CalendarGenerator
         return Vacation::query()
             ->whereBetween("date", [$period->start, $period->end])
             ->whereRelation("vacationRequest", fn(Builder $query) => $query->states(VacationRequestStatesRetriever::successStates()))
+            ->with("vacationRequest")
             ->get()
             ->groupBy(fn(Vacation $vacation) => $vacation->date->toDateString());
     }

app/Infrastructure/Http/Resources/VacationRequestResource.php

@@ -16,7 +16,7 @@ class VacationRequestResource extends JsonResource
             "id" => $this->id,
             "name" => $this->name,
             "user" => new UserResource($this->user),
-            "type" => $this->type->label(),
+            "type" => $this->type,
             "state" => $this->state,
             "from" => $this->from->toDisplayString(),
             "to" => $this->to->toDisplayString(),

package-lock.json

@@ -27,7 +27,9 @@
                 "vue-echarts": "^6.0.2",
                 "vue-flatpickr-component": "^9.0.5",
                 "vue-loader": "^17.0.0",
-                "vue-toastification": "^2.0.0-rc.5"
+                "vue-material-design-icons": "^5.0.0",
+                "vue-toastification": "^2.0.0-rc.5",
+                "vue3-popper": "^1.4.2"
             },
             "devDependencies": {
                 "eslint": "^8.10.0",
@@ -1820,6 +1822,15 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.2",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+            "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@tailwindcss/forms": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.4.0.tgz",
@@ -3794,6 +3805,11 @@
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
             "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ=="
         },
+        "node_modules/debounce": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+            "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+        },
         "node_modules/debug": {
             "version": "4.3.3",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -8968,6 +8984,11 @@
                 "node": ">=8.9.0"
             }
         },
+        "node_modules/vue-material-design-icons": {
+            "version": "5.0.0",
+            "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-style-loader": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -8990,6 +9011,21 @@
                 "vue": "^3.0.2"
             }
         },
+        "node_modules/vue3-popper": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/vue3-popper/-/vue3-popper-1.4.2.tgz",
+            "integrity": "sha512-nc5vM//AJ8/DyNetjrrgkkLv7aKVdSsljvqlQ1tWhAV2lgA8tkn8xE6icDd0/kBt0Yo5Li8Pftf0H0C/hNmu1Q==",
+            "dependencies": {
+                "@popperjs/core": "^2.9.2",
+                "debounce": "^1.2.1"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "peerDependencies": {
+                "vue": "^3.2.20"
+            }
+        },
         "node_modules/watchpack": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",
@@ -10795,6 +10831,11 @@
                 "fastq": "^1.6.0"
             }
         },
+        "@popperjs/core": {
+            "version": "2.11.2",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+            "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+        },
         "@tailwindcss/forms": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.4.0.tgz",
@@ -12418,6 +12459,11 @@
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
             "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ=="
         },
+        "debounce": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+            "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+        },
         "debug": {
             "version": "4.3.3",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -16166,6 +16212,11 @@
                 }
             }
         },
+        "vue-material-design-icons": {
+            "version": "5.0.0",
+            "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-style-loader": {
             "version": "4.1.3",
             "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz",
@@ -16188,6 +16239,15 @@
             "integrity": "sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==",
             "requires": {}
         },
+        "vue3-popper": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/vue3-popper/-/vue3-popper-1.4.2.tgz",
+            "integrity": "sha512-nc5vM//AJ8/DyNetjrrgkkLv7aKVdSsljvqlQ1tWhAV2lgA8tkn8xE6icDd0/kBt0Yo5Li8Pftf0H0C/hNmu1Q==",
+            "requires": {
+                "@popperjs/core": "^2.9.2",
+                "debounce": "^1.2.1"
+            }
+        },
         "watchpack": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.3.1.tgz",

package.json

@@ -34,7 +34,9 @@
         "vue-echarts": "^6.0.2",
         "vue-flatpickr-component": "^9.0.5",
         "vue-loader": "^17.0.0",
-        "vue-toastification": "^2.0.0-rc.5"
+        "vue-material-design-icons": "^5.0.0",
+        "vue-toastification": "^2.0.0-rc.5",
+        "vue3-popper": "^1.4.2"
     },
     "devDependencies": {
         "eslint": "^8.10.0",

resources/js/Composables/vacationTypeInfo.js

@@ -0,0 +1,139 @@
+import WhiteBalanceSunnyIcon from 'vue-material-design-icons/WhiteBalanceSunny.vue'
+import CommentAlertIcon from 'vue-material-design-icons/CommentAlert.vue'
+import StarShootingIcon from 'vue-material-design-icons/StarShooting.vue'
+import BabyCarriageIcon from 'vue-material-design-icons/BabyCarriage.vue'
+import HumanMaleBoardIcon from 'vue-material-design-icons/HumanMaleBoard.vue'
+import CurrencyUsdOffIcon from 'vue-material-design-icons/CurrencyUsdOff.vue'
+import HandHeartOutlineIcon from 'vue-material-design-icons/HandHeartOutline.vue'
+import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck.vue'
+import MedicalBagIcon from 'vue-material-design-icons/MedicalBag.vue'
+
+const statuses = [
+  {
+    text: 'Urlop wypoczynkowy',
+    value: 'vacation',
+    outline: {
+      icon: WhiteBalanceSunnyIcon,
+      background: 'bg-white',
+      foreground: 'text-amber-500',
+    },
+    solid: {
+      icon: WhiteBalanceSunnyIcon,
+      color: 'text-amber-500',
+    },
+  },
+  {
+    text: 'Urlop na żądanie',
+    value: 'vacation_on_request',
+    outline: {
+      icon: CommentAlertIcon,
+      background: 'bg-white',
+      foreground: 'text-slate-500',
+    },
+    solid: {
+      icon: CommentAlertIcon,
+      color: 'text-slate-500',
+    },
+  },
+  {
+    text: 'Urlop okolicznościowy',
+    value: 'special_vacation',
+    outline: {
+      icon: StarShootingIcon,
+      background: 'bg-white',
+      foreground: 'text-orange-500',
+    },
+    solid: {
+      icon: StarShootingIcon,
+      color: 'text-orange-500',
+    },
+  },
+  {
+    text: 'Opieka nad dzieckiem art 188 kp',
+    value: 'childcare_vacation',
+    outline: {
+      icon: BabyCarriageIcon,
+      background: 'bg-white',
+      foreground: 'text-purple-500',
+    },
+    solid: {
+      icon: BabyCarriageIcon,
+      color: 'text-purple-500',
+    },
+  },
+  {
+    text: 'Urlop szkoleniowy',
+    value: 'training_vacation',
+    outline: {
+      icon: HumanMaleBoardIcon,
+      background: 'bg-white',
+      foreground: 'text-blumilk-500',
+    },
+    solid: {
+      icon: HumanMaleBoardIcon,
+      color: 'text-blumilk-500',
+    },
+  },
+  {
+    text: 'Urlop bezpłatny',
+    value: 'unpaid_vacation',
+    outline: {
+      icon: CurrencyUsdOffIcon,
+      background: 'bg-white',
+      foreground: 'text-emerald-500',
+    },
+    solid: {
+      icon: CurrencyUsdOffIcon,
+      color: 'text-emerald-500',
+    },
+  },
+  {
+    text: 'Wolontariat',
+    value: 'volunteering_vacation',
+    outline: {
+      icon: HandHeartOutlineIcon,
+      background: 'bg-white',
+      foreground: 'text-pink-500',
+    },
+    solid: {
+      icon: HandHeartOutlineIcon,
+      color: 'text-pink-500',
+    },
+  },
+  {
+    text: 'Odbiór za święto',
+    value: 'time_in_lieu',
+    outline: {
+      icon: CalendarCheckIcon,
+      background: 'bg-white',
+      foreground: 'text-stone-500',
+    },
+    solid: {
+      icon: CalendarCheckIcon,
+      color: 'text-stone-500',
+    },
+  },
+  {
+    text: 'Zwolnienie lekarskie',
+    value: 'sick_vacation',
+    outline: {
+      icon: MedicalBagIcon,
+      background: 'bg-white',
+      foreground: 'text-rose-500',
+    },
+    solid: {
+      icon: MedicalBagIcon,
+      color: 'text-rose-500',
+    },
+  },
+]
+
+export function useVacationTypeInfo() {
+  const getStatues = () => statuses
+  const findStatus = value => statuses.find(month => month.value === value)
+
+  return {
+    getStatues,
+    findStatus,
+  }
+}

resources/js/Pages/Calendar.vue

@@ -106,22 +106,20 @@
               v-for="day in calendar"
               :key="day.dayOfMonth"
               class="border border-gray-300"
-              :class="{'bg-red-100': day.isWeekend || day.isHoliday, 'bg-blumilk-500': day.vacations.includes(user.id) }"
+              :class="{'bg-red-100': day.isWeekend || day.isHoliday }"
             >
               <div
                 v-if="day.vacations.includes(user.id)"
                 class="flex justify-center items-center"
               >
-                <svg
+                <Popper hover>
-                  class="w-6 h-6 text-white"
+                  <VacationTypeCalendarIcon :status="day.vacationTypes[user.id]" />
-                  xmlns="http://www.w3.org/2000/svg"
+                  <template #content>
-                  viewBox="0 0 640 512"
+                    <div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
-                >
+                      {{ day.vacationTypes[user.id] }}
-                  <path
+                    </div>
-                    fill="currentColor"
+                  </template>
-                    d="M115.38 136.9l102.11 37.18c35.19-81.54 86.21-144.29 139-173.7-95.88-4.89-188.78 36.96-248.53 111.8-6.69 8.4-2.66 21.05 7.42 24.72zm132.25 48.16l238.48 86.83c35.76-121.38 18.7-231.66-42.63-253.98-7.4-2.7-15.13-4-23.09-4-58.02.01-128.27 69.17-172.76 171.15zM521.48 60.5c6.22 16.3 10.83 34.6 13.2 55.19 5.74 49.89-1.42 108.23-18.95 166.98l102.62 37.36c10.09 3.67 21.31-3.43 21.57-14.17 2.32-95.69-41.91-187.44-118.44-245.36zM560 447.98H321.06L386 269.5l-60.14-21.9-72.9 200.37H16c-8.84 0-16 7.16-16 16.01v32.01C0 504.83 7.16 512 16 512h544c8.84 0 16-7.17 16-16.01v-32.01c0-8.84-7.16-16-16-16z"
+                </Popper>
-                  />
-                </svg>
               </div>
             </td>
           </tr>
@@ -136,16 +134,20 @@ import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue'
 import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
 import {computed} from 'vue'
 import {useMonthInfo} from '@/Composables/monthInfo'
+import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'
+import Popper from 'vue3-popper'
 
 export default {
   name: 'VacationCalendar',
   components: {
+    VacationTypeCalendarIcon,
     Menu,
     MenuButton,
     MenuItem,
     MenuItems,
     CheckIcon,
     ChevronDownIcon,
+    Popper,
   },
   props: {
     users: {

resources/js/Pages/VacationRequest/Index.vue

@@ -1,10 +1,10 @@
 <template>
-  <InertiaHead title="Twoje wnioski urlopowe" />
+  <InertiaHead title="Moje wnioski urlopowe" />
   <div class="bg-white shadow-md">
     <div class="flex justify-between items-center p-4 sm:px-6">
       <div>
         <h2 class="text-lg leading-6 font-medium text-gray-900">
-          Twoje wnioski urlopowe
+          Moje wnioski urlopowe
         </h2>
       </div>
       <div>
@@ -85,7 +85,7 @@
               </InertiaLink>
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
-              {{ request.type }}
+              <VacationType :status="request.type" />
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
               {{ request.from }}
@@ -189,6 +189,7 @@ import {
   DocumentTextIcon,
 } from '@heroicons/vue/solid'
 import Status from '@/Shared/Status'
+import VacationType from '@/Shared/VacationType'
 
 export default {
   name: 'VacationRequestIndex',
@@ -204,6 +205,7 @@ export default {
     DocumentTextIcon,
     ThumbDownIcon,
     Status,
+    VacationType,
   },
   props: {
     requests: {

resources/js/Pages/VacationRequest/IndexForApprovers.vue

@@ -247,7 +247,7 @@
               </div>
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
-              {{ request.type }}
+              <VacationType :status="request.type" />
             </td>
             <td class="px-4 py-4 whitespace-nowrap text-sm text-gray-500">
               {{ request.from }}
@@ -353,6 +353,7 @@ import {
   XIcon,
 } from '@heroicons/vue/solid'
 import Status from '@/Shared/Status'
+import VacationType from '@/Shared/VacationType'
 import {watch, reactive} from 'vue'
 import {debounce} from 'lodash'
 import {Inertia} from '@inertiajs/inertia'
@@ -377,6 +378,7 @@ export default {
     DocumentTextIcon,
     ThumbDownIcon,
     Status,
+    VacationType,
     SelectorIcon,
     XCircleIcon,
   },

resources/js/Pages/VacationRequest/Show.vue

@@ -44,7 +44,7 @@
                 Rodzaj urlopu
               </dt>
               <dd class="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
-                {{ request.type }}
+                <VacationType :status="request.type" />
               </dd>
             </div>
             <div class="py-4 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
@@ -65,7 +65,7 @@
                     {{ request.from }} - {{ request.to }} [Liczba dni: {{ request.days.length }}]
                   </template>
                   <template v-else>
-                    {{ request.from }}
+                    {{ request.from }} [Liczba dni: {{ request.days.length }}]
                   </template>
                 </span>
               </dd>
@@ -249,10 +249,12 @@
 import {PaperClipIcon} from '@heroicons/vue/outline'
 import Activity from '@/Shared/Activity'
 import Status from '@/Shared/Status'
+import VacationType from '@/Shared/VacationType'
 
 export default {
   name: 'VacationRequestShow',
   components: {
+    VacationType,
     Activity,
     PaperClipIcon,
     Status,

resources/js/Shared/VacationType.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="flex items-center">
+    <component
+      :is="vacationTypeInfo.solid.icon"
+      :class="[vacationTypeInfo.solid.color ,'w-5 h-5 mr-1.5']"
+      :size="20"
+    />
+    <span>{{ vacationTypeInfo.text }}</span>
+  </div>
+</template>
+
+<script>
+import {computed} from 'vue'
+import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
+
+export default {
+  name: 'VacationType',
+  props: {
+    status: {
+      type: String,
+      default: () => null,
+    },
+    last: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  setup(props) {
+    const { findStatus } = useVacationTypeInfo()
+
+    const vacationTypeInfo = computed(() => findStatus(props.status))
+
+    return {
+      vacationTypeInfo,
+    }
+  },
+}
+</script>

resources/js/Shared/VacationTypeCalendarIcon.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="flex items-center">
+    <div>
+      <span :class="[statusInfo.outline.background, statusInfo.outline.foreground, 'flex items-center justify-center']">
+        <component
+          :is="statusInfo.outline.icon"
+          :class="statusInfo.outline.background"
+        />
+      </span>
+    </div>
+  </div>
+</template>
+
+<script>
+import {computed} from 'vue'
+import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
+
+export default {
+  name: 'VacationTypeCalendarIcon',
+  props: {
+    status: {
+      type: String,
+      default: () => null,
+    },
+    last: {
+      type: Boolean,
+      default: () => false,
+    },
+  },
+  setup(props) {
+    const { findStatus } = useVacationTypeInfo()
+
+    const statusInfo = computed(() => findStatus(props.status))
+
+    return {
+      statusInfo,
+    }
+  },
+}
+</script>