kamilniemczycki/toby
1
0
Fork 0
Code Issues Pull Requests 2 Projects Releases Activity

#74 - wip

Browse Source
This commit is contained in:
Adrian Hopek
2022-03-21 09:09:15 +01:00
parent de35711d6a
commit e106671d49
1 changed files with 86 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
resources/js/Pages/Calendar.vue
View File

@@ -2,10 +2,83 @@
<InertiaHead title="Kalendarz urlopów" />
<div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6">
<div>
<div class="flex items-center">
<h2 class="text-lg leading-6 font-medium text-gray-900">
Kalendarz urlopów
</h2>
<span class="ml-6 inline-flex shadow-sm rounded-md">
<InertiaLink
v-if="previousMonth"
:href="`/vacation-calendar/${previousMonth.value}`"
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blumilk-600 focus:border-blumilk-600"
>
<ChevronLeftIcon class="h-5 w-5" />
</InertiaLink>
<span
v-else
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500"
>
<ChevronLeftIcon class="h-5 w-5" />
</span>
<Menu
as="div"
class="-ml-px relative inline-block text-left"
>
<div>
<MenuButton
class="relative inline-flex items-center justify-center px-4 py-2 w-44 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blumilk-600 focus:border-blumilk-600"
>
{{ selectedMonth.name }} {{ years.current }}
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
</MenuButton>
</div>
<transition
enter-active-class="transition ease-out duration-100"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<MenuItems
class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div class="py-1">
<MenuItem
v-for="(month, index) in months"
:key="index"
v-slot="{ active }"
>
<InertiaLink
:href="`/vacation-calendar/${month.value}`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex w-full font-normal px-4 py-2 text-sm']"
>
{{ month.name }}
<CheckIcon
v-if="currentMonth === month.value"
class="h-5 w-5 text-blumilk-500 ml-2"
/>
</InertiaLink>
</MenuItem>
</div>
</MenuItems>
</transition>
</Menu>
<InertiaLink
v-if="nextMonth"
:href="`/vacation-calendar/${nextMonth.value}`"
class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-blumilk-600 focus:border-blumilk-600"
>
<ChevronRightIcon class="h-5 w-5" />
</InertiaLink>
<span
v-else
class="-ml-px relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500"
>
<ChevronRightIcon class="h-5 w-5" />
</span>
</span>
</div>
<div v-if="can.generateTimesheet">
<a
@@ -20,53 +93,7 @@
<table class="w-full text-center text-sm border border-gray-300">
<thead>
<tr>
<th class="w-64 py-2 border border-gray-300">
<Menu
as="div"
class="relative inline-block text-left"
>
<div>
<MenuButton
class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
>
{{ selectedMonth.name }} {{ years.current }}
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
</MenuButton>
</div>
<transition
enter-active-class="transition ease-out duration-100"
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
leave-active-class="transition ease-in duration-75"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
>
<MenuItems
class="origin-top-right absolute right-0 mt-2 w-32 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none"
>
<div class="py-1">
<MenuItem
v-for="(month, index) in months"
:key="index"
v-slot="{ active }"
>
<InertiaLink
:href="`/vacation-calendar/${month.value}`"
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex w-full font-normal px-4 py-2 text-sm']"
>
{{ month.name }}
<CheckIcon
v-if="currentMonth === month.value"
class="h-5 w-5 text-blumilk-500 ml-2"
/>
</InertiaLink>
</MenuItem>
</div>
</MenuItems>
</transition>
</Menu>
</th>
<th class="w-64 py-2 border border-gray-300" />
<th
v-for="day in calendar"
:key="day.dayOfMonth"
@@ -111,7 +138,7 @@
v-for="day in calendar"
:key="day.dayOfMonth"
class="border border-gray-300"
:class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday, 'bg-blumilk-500': day.vacations.includes(user.id) }"
:class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday}"
>
<div
v-if="day.vacations.includes(user.id)"
@@ -129,7 +156,7 @@
<script>
import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue'
import {CheckIcon, ChevronDownIcon} from '@heroicons/vue/solid'
import {CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon} from '@heroicons/vue/solid'
import {computed} from 'vue'
import {useMonthInfo} from '@/Composables/monthInfo'
import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'
@@ -144,6 +171,8 @@ export default {
MenuItems,
CheckIcon,
ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
},
props: {
users: {
@@ -175,11 +204,18 @@ export default {
const {getMonths, findMonth} = useMonthInfo()
const months = getMonths()
const selectedMonth = computed(() => findMonth(props.currentMonth))
const previousMonth = computed(() => months[months.indexOf(selectedMonth.value) - 1])
const nextMonth = computed(() => months[months.indexOf(selectedMonth.value) + 1])
return {
months,
selectedMonth,
previousMonth,
nextMonth,
}
},
}