Merge branch 'polishing-calendar' into #74-vacation-calendar
# Conflicts: # resources/js/Pages/Calendar.vue
This commit is contained in:
Adrian Hopek
commit
de35711d6a
@ -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());
|
||||
}
|
||||
|
||||
@ -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(),
|
||||
|
||||
62
package-lock.json
generated
62
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -35,7 +35,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",
|
||||
|
||||
139
resources/js/Composables/vacationTypeInfo.js
Normal file
139
resources/js/Composables/vacationTypeInfo.js
Normal file
@ -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 types = [
|
||||
{
|
||||
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 getTypes = () => types
|
||||
const findType = value => types.find(type => type.value === value)
|
||||
|
||||
return {
|
||||
getTypes,
|
||||
findType,
|
||||
}
|
||||
}
|
||||
@ -117,16 +117,7 @@
|
||||
v-if="day.vacations.includes(user.id)"
|
||||
class="flex justify-center items-center"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 640 512"
|
||||
>
|
||||
<path
|
||||
fill="currentColor"
|
||||
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"
|
||||
/>
|
||||
</svg>
|
||||
<VacationTypeCalendarIcon :type="day.vacationTypes[user.id]" />
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -141,10 +132,12 @@ 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'
|
||||
|
||||
export default {
|
||||
name: 'VacationCalendar',
|
||||
components: {
|
||||
VacationTypeCalendarIcon,
|
||||
Menu,
|
||||
MenuButton,
|
||||
MenuItem,
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
class="hover:underline focus:outline-none"
|
||||
>
|
||||
<span class="absolute inset-0" />
|
||||
Wniosek o {{ request.type.toLowerCase() }}
|
||||
Wniosek o {{ findType(request.type).text.toLowerCase() }}
|
||||
[{{ request.name }}]
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
@ -185,7 +185,7 @@
|
||||
class="hover:underline focus:outline-none"
|
||||
>
|
||||
<span class="absolute inset-0" />
|
||||
Wniosek o {{ request.type.toLowerCase() }}
|
||||
Wniosek o {{ findType(request.type).text.toLowerCase() }}
|
||||
[{{ request.name }}]
|
||||
</InertiaLink>
|
||||
</h3>
|
||||
@ -302,6 +302,7 @@ import {computed} from 'vue'
|
||||
import {usePage} from '@inertiajs/inertia-vue3'
|
||||
import Status from '@/Shared/Status'
|
||||
import VacationChart from '@/Shared/VacationChart'
|
||||
import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
|
||||
|
||||
export default {
|
||||
name: 'DashboardPage',
|
||||
@ -335,8 +336,11 @@ export default {
|
||||
setup() {
|
||||
const user = computed(() => usePage().props.value.auth.user)
|
||||
|
||||
const { findType } = useVacationTypeInfo()
|
||||
|
||||
return {
|
||||
user,
|
||||
findType,
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
@ -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 :type="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: {
|
||||
|
||||
@ -247,7 +247,7 @@
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-4 whitespace-nowrap text-sm font-medium text-gray-500">
|
||||
{{ request.type }}
|
||||
<VacationType :type="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,
|
||||
},
|
||||
|
||||
@ -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 :type="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,
|
||||
|
||||
38
resources/js/Shared/VacationType.vue
Normal file
38
resources/js/Shared/VacationType.vue
Normal file
@ -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: {
|
||||
type: {
|
||||
type: String,
|
||||
default: () => null,
|
||||
},
|
||||
last: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { findType } = useVacationTypeInfo()
|
||||
|
||||
const vacationTypeInfo = computed(() => findType(props.type))
|
||||
|
||||
return {
|
||||
vacationTypeInfo,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
51
resources/js/Shared/VacationTypeCalendarIcon.vue
Normal file
51
resources/js/Shared/VacationTypeCalendarIcon.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<Popper hover>
|
||||
<div class="flex items-center">
|
||||
<div>
|
||||
<span :class="[typeInfo.outline.background, typeInfo.outline.foreground, 'flex items-center justify-center']">
|
||||
<component
|
||||
:is="typeInfo.outline.icon"
|
||||
:class="typeInfo.outline.background"
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<template #content>
|
||||
<div class="px-2 py-1 bg-white text-xs text-gray-900 shadow-md ">
|
||||
{{ typeInfo.text }}
|
||||
</div>
|
||||
</template>
|
||||
</Popper>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {computed} from 'vue'
|
||||
import {useVacationTypeInfo} from '@/Composables/vacationTypeInfo'
|
||||
import Popper from 'vue3-popper'
|
||||
|
||||
export default {
|
||||
name: 'VacationTypeCalendarIcon',
|
||||
components: {
|
||||
Popper,
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: () => null,
|
||||
},
|
||||
last: {
|
||||
type: Boolean,
|
||||
default: () => false,
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const { findType } = useVacationTypeInfo()
|
||||
|
||||
const typeInfo = computed(() => findType(props.type))
|
||||
|
||||
return {
|
||||
typeInfo,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user