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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 78 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/Infrastructure/Http/Controllers/VacationCalendarController.php
View File

@ -44,6 +44,7 @@ class VacationCalendarController extends Controller
"users" => SimpleUserResource::collection($users),
"can" => [
"generateTimesheet" => $request->user()->can("generateTimesheet"),
"createOnBehalfOfEmployee" => $request->user()->can("createOnBehalfOfEmployee"),
],
]);
}

2
app/Infrastructure/Http/Controllers/VacationRequestController.php
View File

@ -180,6 +180,8 @@ class VacationRequestController extends Controller
"createOnBehalfOfEmployee" => $request->user()->can("createOnBehalfOfEmployee", VacationRequest::class),
"skipFlow" => $request->user()->can("skipFlow", VacationRequest::class),
],
"vacationUserId" => (int)$request->get("user"),
"vacationFromDate" => $request->get("from_date"),
]);
}

8
resources/js/Composables/vacationTypeInfo.js
View File

@ -9,6 +9,7 @@ import CalendarCheckIcon from 'vue-material-design-icons/CalendarCheck.vue'
import MedicalBagIcon from 'vue-material-design-icons/MedicalBag.vue'
import CalendarRemoveIcon from 'vue-material-design-icons/CalendarRemove.vue'
import HomeCityIcon from 'vue-material-design-icons/HomeCity.vue'
import PlusIcon from 'vue-material-design-icons/Plus.vue'
const types = [
{
@ -88,6 +89,13 @@ const types = [
color: 'text-lime-500',
border: 'border-lime-500',
},
{
text: 'Złóż wniosek',
value: 'create',
icon: PlusIcon,
color: 'text-blumilk-700',
border: 'border-lime-500',
},
]
export default function useVacationTypeInfo() {

24
resources/js/Pages/AnnualSummary.vue
View File

@ -39,7 +39,7 @@
offset-distance="0"
>
<div :class="[day.isPendingVacation && 'mx-0.5']">
<button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium focus:outline-blumilk-500`]">
<button :class="[day.isPendingVacation && `border-dashed`, `${getVacationBorder(day)} isolate bg-white w-full hover:bg-blumilk-25 border-b-4 py-1.5 font-medium focus:outline-blumilk-500 cursor-default`]">
<time
:datetime="day.date.toISODate()"
:class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@ -58,7 +58,7 @@
hover
offset-distance="0"
>
<button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500">
<button class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500 cursor-default">
<time
:datetime="day.date.toISODate()"
:class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center']"
@ -73,16 +73,29 @@
</template>
</Popper>
<button
v-else
class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500"
v-else-if="day.isWeekend"
class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500 hover:bg-transparent cursor-default"
>
<time
:datetime="day.date.toISODate()"
:class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', day.isWeekend && 'text-red-700 font-bold', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
class="text-red-700 font-bold mx-auto flex h-7 w-7 p-4 items-center justify-center"
>
{{ day.date.day }}
</time>
</button>
<InertiaLink
v-else
href="/vacation/requests/create"
:data="{ 'from_date': day.date.toISODate() }"
class="py-1.5 w-full font-medium bg-white hover:bg-blumilk-25 border-b-4 border-transparent focus:outline-blumilk-500"
>
<time
:datetime="day.date.toISODate()"
:class="[ day.isToday && 'bg-blumilk-500 font-semibold text-white rounded-full', 'mx-auto flex h-7 w-7 p-4 items-center justify-center']"
>
{{ day.date.day }}
</time>
</InertiaLink>
</template>
<div
v-else
@ -112,6 +125,7 @@ const props = defineProps({
holidays: Object,
vacations: Object,
pendingVacations: Object,
overButtonDay: String,
})
const { findType } = useVacationTypeInfo()

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>

14
resources/js/Pages/VacationRequest/Create.vue
View File

@ -343,19 +343,23 @@ const props = defineProps({
users: Object,
holidays: Object,
can: Object,
vacationUserId: [Number, null],
vacationFromDate: [String, null],
})
const form = useForm({
user: props.can.createOnBehalfOfEmployee
? props.users.data.find(user => user.id === props.auth.user.id) ?? props.users.data[0]
? props.users.data.find(user => user.id === (checkUserId(props.vacationUserId) ?? props.auth.user.id)) ?? props.users.data[0]
: props.auth.user,
from: null,
to: null,
from: props.vacationFromDate,
to: props.vacationFromDate,
vacationType: null,
comment: null,
flowSkipped: false,
})
refreshEstimatedDays(form.from, form.to)
const estimatedDays = ref([])
const vacationTypes = ref([])
@ -423,6 +427,10 @@ function resetForm() {
estimatedDays.value = []
}
function checkUserId(userId) {
return userId > 0 ? userId: null
}
async function refreshEstimatedDays(from, to) {
if (from && to) {
const res = await axios.post('/api/vacation/calculate-days', { from, to })