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

wip #VC - optimization part 1

Browse Source
This commit is contained in:
Kamil Niemczycki
2022-06-22 15:29:36 +02:00
parent cdb15519a9
commit bf0af8c053
1 changed files with 40 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
resources/js/Shared/Widgets/VacationCalendar.vue
View File

@@ -2,17 +2,17 @@
<section class="bg-white shadow-md">
<div class="grid grid-cols-3 grid-rows-1 items-center justify-center p-4 sm:px-6">
<h2 class="text-lg font-medium leading-6 text-gray-900">
{{ monthName }} {{ calendar.currents.year !== selectedYear ? calendar.currents.year : undefined }}
{{ calendarState.monthName }} {{ calendar.currents.year !== selectedYear ? calendar.currents.year : undefined }}
</h2>
<div class="flex justify-center">
<div class="flex items-center rounded-md shadow-sm md:items-stretch">
<button
v-if="calendar.currents.month > 1"
v-if="calendarState.isPrevious"
type="button"
class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
@click="toLast"
>
<span class="sr-only">Previous {{ viewMode.key }}</span>
<span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
<ChevronLeftIcon
class="h-5 w-5"
aria-hidden="true"
@@ -21,19 +21,19 @@
<button
type="button"
class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
:class="[calendar.currents.month === 1 ? 'rounded-l-md border border-r-0' : undefined, calendar.currents.month === 12 ? 'rounded-r-md border border-l-0' : undefined]"
:class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
@click="resetCalendar"
>
Today
Dziś
</button>
<span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
<button
v-if="calendar.currents.month < 12"
v-if="calendarState.isNext"
type="button"
class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
@click="toNext"
>
<span class="sr-only">Next {{ viewMode.key }}</span>
<span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
<ChevronRightIcon
class="h-5 w-5"
aria-hidden="true"
@@ -49,7 +49,7 @@
type="button"
class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
>
{{ viewMode.name }}
{{ calendarState.viewMode.details.name }}
<ChevronDownIcon
class="ml-2 h-5 w-5 text-gray-400"
aria-hidden="true"
@@ -76,9 +76,9 @@
:class="[active ? 'bg-gray-100 text-gray-900' : 'text-gray-700', 'flex px-4 py-2 text-sm text-left w-full']"
@click="updateViewMode(option.key)"
>
{{ option.name }}
{{ option.shortcut }}
<CheckIcon
v-if="option.key === viewMode.key"
v-if="option.is(calendar.viewMode)"
class="ml-2 w-5 h-5 text-blumilk-500"
/>
</button>
@@ -90,7 +90,7 @@
</div>
<div class="ring-1 ring-black ring-opacity-5 lg:flex lg:flex-auto lg:flex-col">
<div
v-if="viewMode.key === 'month'"
v-if="calendarState.viewMode.isMonth"
class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
>
<div class="bg-white py-2">
@@ -116,12 +116,12 @@
</div>
</div>
<div class="flex bg-gray-200 text-xs leading-6 text-gray-700 lg:flex-auto">
<div :class="[viewMode.key === 'week' ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
<div :class="[calendarState.viewMode.isWeek ? 'grid-rows-1' : 'grid-rows-5', 'w-full grid grid-cols-7 gap-px']">
<div
v-for="(day, index) in days"
:key="index"
class="flex flex-col"
:class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', viewMode.key === 'week' && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, viewMode.key === 'week' ? 'day' : 'month-day', 'relative py-2 px-3']"
:class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', calendarState.viewMode.isWeek && index !== 0 && (index % 5 === 0 || index % 6 === 0) ? 'bg-red-100' : undefined, calendarState.viewMode.isWeek ? 'day' : 'month-day', 'relative py-2 px-3']"
>
<time
:datetime="day.date"
@@ -152,10 +152,16 @@ function getCurrentDate() {
}
const selectedYear = useCurrentYearPeriodInfo().year.value
const currentDate = getCurrentDate()
let viewModeOptions = [
{ key: 'week', name: 'Week view' },
{ key: 'month', name: 'Month view' },
function isViewModeKey(key) {
return this.key === key.value
}
const viewModeOptions = [
{ key: 'week', name: 'Widok tygodnia', shortcut: 'Tydzień', is: isViewModeKey },
{ key: 'month', name: 'Widok miesiąca', shortcut: 'Miesiąc', is: isViewModeKey },
]
const calendar = {
viewMode: ref('week'),
currents: reactive({
@@ -163,20 +169,25 @@ const calendar = {
month: selectedYear === currentDate.year ? currentDate.month : 1,
week: selectedYear === currentDate.year ? currentDate.weekNumber : 1,
}),
toPreviousActive: computed(() => calendar.currents.month !== 1),
}
const calendarState = reactive({
viewMode: {
isWeek: computed(() => calendar.viewMode.value === 'week'),
isMonth: computed(() => calendar.viewMode.value === 'month'),
details: computed(() => viewModeOptions.find((obj) => obj.key === calendar.viewMode.value)),
},
monthName: computed(() => months[calendar.currents.month - 1]?.name),
isActualYear: computed(() => calendar.currents.year !== selectedYear),
isPrevious: computed(() => calendar.currents.month !== 1),
isNext: computed(() => calendar.currents.month !== 12),
})
watch([calendar.viewMode, calendar.currents], () => {
loadCalendar()
})
const viewMode = computed(() => {
const key = calendar.viewMode.value
return {
key,
name: viewModeOptions.find((obj) => obj.key === key)?.name,
}
})
const monthName = computed(() => months[calendar.currents.month - 1]?.name)
loadCalendar()
function loadCalendar() {
@@ -186,14 +197,14 @@ function loadCalendar() {
})
let start, end
if (viewMode.value.key === 'week') {
if (calendar.viewMode.value === 'week') {
if (currentDate.year === selectedYear)
focusDate = DateTime.fromObject({ weekNumber: calendar.currents.week })
else
focusDate = focusDate.plus({ week: calendar.currents.week - 1 } )
start = focusDate.startOf('week')
end = focusDate.endOf('week')
} else if (viewMode.value.key === 'month') {
} else if (calendar.viewMode.value === 'month') {
focusDate = focusDate.startOf('month')
start = focusDate.startOf('week')
end = focusDate.endOf('month').endOf('week')
@@ -219,14 +230,14 @@ function generateCalendarData(startDate, endDate, focusDate) {
}
function toLast() {
if (viewMode.value.key === 'week')
if (calendar.viewMode.value === 'week')
addWeeks(-1)
else
addMonths(-1)
}
function toNext() {
if (viewMode.value.key === 'week') {
if (calendar.viewMode.value === 'week') {
addWeeks()
} else
addMonths()