|
|
|
<script setup lang="ts">
|
|
|
|
|
|
|
|
import { CalendarViewTypeInj } from "#imports";
|
|
|
|
|
|
|
|
const props = defineProps<{
|
|
|
|
visible: boolean
|
|
|
|
}>()
|
|
|
|
|
|
|
|
const activeCalendarView = inject(CalendarViewTypeInj, ref<'month' | 'day' | 'year' | 'week'>('month' as const))
|
|
|
|
|
|
|
|
const {t} = useI18n()
|
|
|
|
|
|
|
|
const emit = defineEmits(['expand-record']);
|
|
|
|
|
|
|
|
const options = computed(() => {
|
|
|
|
switch (activeCalendarView.value) {
|
|
|
|
case 'day' as const:
|
|
|
|
return [
|
|
|
|
{label: 'in this day', value: 'day'},
|
|
|
|
{label: 'without dates', value: 'withoutDates'},
|
|
|
|
{label: 'in selected hours', value: 'selectedHours'},
|
|
|
|
{label: 'all records', value: 'allRecords'},
|
|
|
|
]
|
|
|
|
case 'week' as const:
|
|
|
|
return [
|
|
|
|
{label: 'in this week', value: 'week'},
|
|
|
|
{label: 'without dates', value: 'withoutDates'},
|
|
|
|
{label: 'in selected hours', value: 'selectedHours'},
|
|
|
|
{label: 'all records', value: 'allRecords'},
|
|
|
|
]
|
|
|
|
case 'month' as const:
|
|
|
|
return [
|
|
|
|
{label: 'in this month', value: 'month'},
|
|
|
|
{label: 'without dates', value: 'withoutDates'},
|
|
|
|
{label: 'all records', value: 'allRecords'},
|
|
|
|
{label: 'in selected date', value: 'selectedDate'},
|
|
|
|
]
|
|
|
|
case 'year' as const:
|
|
|
|
return [
|
|
|
|
{label: 'in this year', value: 'year'},
|
|
|
|
{label: 'without dates', value: 'withoutDates'},
|
|
|
|
{label: 'all records', value: 'allRecords'},
|
|
|
|
{label: 'in selected date', value: 'selectedDate'},
|
|
|
|
]
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
|
|
const { pageDate, selectedDate, selectedDateRange } = useCalendarViewStoreOrThrow()
|
|
|
|
|
|
|
|
const activeDates = ref([new Date()])
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div :class="{
|
|
|
|
'w-0': !props.visible,
|
|
|
|
'w-1/4 min-w-[22.1rem]': props.visible,
|
|
|
|
'transition-all': true,
|
|
|
|
}" class="h-full border-l-1 border-gray-200">
|
|
|
|
<NcDateWeekSelector v-if="activeCalendarView === ('day' as const)" v-model:page-date="pageDate" v-model:selected-date="selectedDate" :active-dates="activeDates" />
|
|
|
|
<NcDateWeekSelector v-else-if="activeCalendarView === ('week' as const)" v-model:page-date="pageDate" week-picker v-model:selected-week="selectedDateRange" />
|
|
|
|
<NcMonthYearSelector v-else-if="activeCalendarView === ('month' as const)" v-model:page-date="pageDate" v-model:selected-date="selectedDate" />
|
|
|
|
<NcMonthYearSelector v-else-if="activeCalendarView === ('year' as const)" year-picker v-model:page-date="pageDate" v-model:selected-date="selectedDate" />
|
|
|
|
|
|
|
|
<div class="px-4 flex flex-col gap-y-6 pt-4">
|
|
|
|
<div class="flex justify-between items-center">
|
|
|
|
<span class="text-2xl font-bold">{{ t('objects.Records') }}</span>
|
|
|
|
<NcSelect :options="options" value="all records"/>
|
|
|
|
</div>
|
|
|
|
<a-input class="!rounded-lg !border-gray-200 !px-4 !py-2" placeholder="Search your records">
|
|
|
|
<template #prefix>
|
|
|
|
<component :is="iconMap.search" class="h-4 w-4 mr-1 text-gray-500"/>
|
|
|
|
</template>
|
|
|
|
</a-input>
|
|
|
|
|
|
|
|
<div :class="{
|
|
|
|
'h-[calc(100vh-40rem)]': activeCalendarView === ('day' as const) || activeCalendarView === ('week' as const),
|
|
|
|
'h-[calc(100vh-29rem)]': activeCalendarView === ('month' as const) || activeCalendarView === ('year' as const),
|
|
|
|
}" class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height">
|
|
|
|
<LazySmartsheetCalendarSideRecordCard v-for="(x, id) in Array(50)" :color="x%2 === 0 ? 'maroon': 'blue'"
|
|
|
|
date="27 April 2003" name="Saturday HackNight" @click="emit('expand-record', id)"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
|
|
|
</style>
|