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" /> <InertiaHead title="Kalendarz urlopów" />
<div class="bg-white shadow-md"> <div class="bg-white shadow-md">
<div class="flex justify-between items-center p-4 sm:px-6"> <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"> <h2 class="text-lg leading-6 font-medium text-gray-900">
Kalendarz urlopów Kalendarz urlopów
</h2> </h2>
</div> <span class="ml-6 inline-flex shadow-sm rounded-md">
<div v-if="can.generateTimesheet"> <InertiaLink
<a v-if="previousMonth"
:href="`/timesheet/${selectedMonth.value}`" :href="`/vacation-calendar/${previousMonth.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" 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 <ChevronLeftIcon class="h-5 w-5" />
</a> </InertiaLink>
</div> <span
</div> v-else
<div class="overflow-x-auto"> 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"
<table class="w-full text-center text-sm border border-gray-300"> >
<thead> <ChevronLeftIcon class="h-5 w-5" />
<tr> </span>
<th class="w-64 py-2 border border-gray-300">
<Menu <Menu
as="div" as="div"
class="relative inline-block text-left" class="-ml-px relative inline-block text-left"
> >
<div> <div>
<MenuButton <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 }} {{ selectedMonth.name }} {{ years.current }}
<ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" /> <ChevronDownIcon class="-mr-1 ml-2 h-5 w-5" />
@ -66,7 +65,35 @@
</MenuItems> </MenuItems>
</transition> </transition>
</Menu> </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 <th
v-for="day in calendar" v-for="day in calendar"
:key="day.dayOfMonth" :key="day.dayOfMonth"
@ -111,7 +138,7 @@
v-for="day in calendar" v-for="day in calendar"
:key="day.dayOfMonth" :key="day.dayOfMonth"
class="border border-gray-300" 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 <div
v-if="day.vacations.includes(user.id)" v-if="day.vacations.includes(user.id)"
@ -129,7 +156,7 @@
<script> <script>
import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue' 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 {computed} from 'vue'
import {useMonthInfo} from '@/Composables/monthInfo' import {useMonthInfo} from '@/Composables/monthInfo'
import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon' import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'
@ -144,6 +171,8 @@ export default {
MenuItems, MenuItems,
CheckIcon, CheckIcon,
ChevronDownIcon, ChevronDownIcon,
ChevronLeftIcon,
ChevronRightIcon,
}, },
props: { props: {
users: { users: {
@ -175,11 +204,18 @@ export default {
const {getMonths, findMonth} = useMonthInfo() const {getMonths, findMonth} = useMonthInfo()
const months = getMonths() const months = getMonths()
const selectedMonth = computed(() => findMonth(props.currentMonth)) 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 { return {
months, months,
selectedMonth, selectedMonth,
previousMonth,
nextMonth,
} }
}, },
} }