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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,32 +2,31 @@
<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>
</div>
<div v-if="can.generateTimesheet">
<a
:href="`/timesheet/${selectedMonth.value}`"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
<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"
>
Pobierz plik Excel
</a>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-center text-sm border border-gray-300">
<thead>
<tr>
<th class="w-64 py-2 border border-gray-300">
<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="relative inline-block text-left"
class="-ml-px 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"
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" />
@ -66,7 +65,35 @@
</MenuItems>
</transition>
</Menu>
</th>
<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
:href="`/timesheet/${selectedMonth.value}`"
class="inline-flex items-center px-4 py-3 border border-transparent text-sm leading-4 font-medium rounded-md shadow-sm text-white bg-blumilk-600 hover:bg-blumilk-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blumilk-500"
>
Pobierz plik Excel
</a>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-center text-sm border border-gray-300">
<thead>
<tr>
<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,
}
},
}