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

#157 - more interactive calendar (#162)

Browse Source 
* #157 - added support for the date parameter

* #157 - prepared clikable days

* removed line with consol log

* lint

* #157 - prepared clikable days for calendar of holidays

* #157 - added a privilege check

* #157 - added support for the user id parameter

* improved loading of selected date

* updated calendar

* #157 - added the request class and improved the request parameters

* csf

* Apply suggestions from code review

Co-authored-by: Krzysztof Rewak <krzysztof.rewak@gmail.com>

* Apply suggestion

Co-authored-by: Krzysztof Rewak <krzysztof.rewak@gmail.com>

* icon has been renamed

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

* selection of previous days restored

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
Co-authored-by: Adrian Hopek <adrian.hopek@blumilk.pl>

* changes for the controller have been withdrawn

Co-authored-by: Adrian Hopek <adrian.hopek@blumilk.pl>

* wip

* Update resources/js/Composables/vacationTypeInfo.js

Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>

* #157 - updated cursor type for weekened

Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>

Co-authored-by: Krzysztof Rewak <krzysztof.rewak@gmail.com>
Co-authored-by: EwelinaLasowy <ewelina.lasowy@blumilk.pl>
Co-authored-by: Adrian Hopek <adrian.hopek@blumilk.pl>
Co-authored-by: Ewelina Lasowy <56546832+EwelinaLasowy@users.noreply.github.com>
This commit is contained in:
Kamil Niemczycki
2022-06-08 11:02:37 +02:00
committed by GitHub
parent fe639f264d
commit 2fb2415203
6 changed files with 78 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -100,7 +100,9 @@
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}"
:class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday }"
@mouseover="setActiveDay(user.id + '+' + day.date)"
@mouseleave="unsetActiveDay"
>
<div
v-if="day.vacations.includes(user.id)"
@@ -108,6 +110,20 @@
>
<VacationTypeCalendarIcon :type="day.vacationTypes[user.id]" />
</div>
<template
v-else-if="isActiveDay(user.id + '+' + day.date) && !day.isWeekend && !day.isHoliday && (auth.user.id === user.id || can.createOnBehalfOfEmployee)"
>
<InertiaLink
href="/vacation/requests/create"
:data="linkParameters(user, day)"
>
<div class="flex justify-center items-center">
<VacationTypeCalendarIcon
type="create"
/>
</div>
</InertiaLink>
</template>
</td>
</tr>
</tbody>
@@ -118,7 +134,7 @@
<script setup>
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/solid'
import { computed } from 'vue'
import { computed, ref } from 'vue'
import { useMonthInfo } from '@/Composables/monthInfo'
import VacationTypeCalendarIcon from '@/Shared/VacationTypeCalendarIcon'
@@ -132,6 +148,8 @@ const props = defineProps({
can: Object,
})
let activeElement = ref(undefined)
const { getMonths, findMonth } = useMonthInfo()
const months = getMonths()
@@ -140,4 +158,21 @@ const currentMonth = computed(() => findMonth(props.current))
const selectedMonth = computed(() => findMonth(props.selected))
const previousMonth = computed(() => months[months.indexOf(selectedMonth.value) - 1])
const nextMonth = computed(() => months[months.indexOf(selectedMonth.value) + 1])
function isActiveDay(key) {
return activeElement.value === key
}
function setActiveDay(key) {
if(activeElement.value === undefined)
activeElement.value = key
}
function unsetActiveDay() {
activeElement.value = undefined
}
function linkParameters(user, day) {
return props.can.createOnBehalfOfEmployee ? { user: user.id, from_date: day.date } : { from_date: day.date }
}
</script>