mirror of https://github.com/nocodb/nocodb
DarkPhoenix2704
9 months ago
8 changed files with 316 additions and 85 deletions
@ -1,38 +1,76 @@ |
|||||||
<script setup lang="ts"> |
<script lang="ts" setup> |
||||||
import { UITypes } from 'nocodb-sdk' |
import { UITypes } from 'nocodb-sdk'; |
||||||
|
import { computed, ref, type Row } from '#imports'; |
||||||
|
|
||||||
|
interface Props { |
||||||
|
isEmbed?: boolean |
||||||
|
data?: Row[] | null |
||||||
|
} |
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), { |
||||||
|
isEmbed: false, |
||||||
|
data: null, |
||||||
|
}) |
||||||
|
|
||||||
const emit = defineEmits(['expand-record']) |
const emit = defineEmits(['expand-record']) |
||||||
|
const meta = inject(MetaInj, ref()) |
||||||
|
const fields = inject(FieldsInj, ref([])) |
||||||
|
|
||||||
|
const data = toRefs(props).data |
||||||
|
|
||||||
|
const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value.includes(c)) ?? null) |
||||||
|
|
||||||
const { pageDate, selectedDate, calDataType } = useCalendarViewStoreOrThrow() |
const { pageDate, selectedDate, calDataType, formattedData, calendarRange } = useCalendarViewStoreOrThrow() |
||||||
|
|
||||||
const events = ref([ |
const hours = computed(() => { |
||||||
{ |
const hours = [] |
||||||
Id: 1, |
for (let i = 0; i < 24; i++) { |
||||||
Title: 'Event 01', |
hours.push(i) |
||||||
from_date_time: '2023-12-15', |
} |
||||||
to_date_time: '2023-12-20', |
return hours |
||||||
}, |
}) |
||||||
{ |
|
||||||
Id: 2, |
const renderData = computed(() => { |
||||||
Title: 'Event 02', |
console.log(data.value) |
||||||
from_date_time: '2023-12-20', |
if (data.value) { |
||||||
to_date_time: '2023-12-25', |
|
||||||
}, |
return data.value |
||||||
]) |
} |
||||||
|
return formattedData.value |
||||||
|
}) |
||||||
</script> |
</script> |
||||||
|
|
||||||
<template> |
<template> |
||||||
<div v-if="calDataType === UITypes.Date" class="flex flex-col px-2 gap-4 pt-4"> |
<template v-if="formattedData.length"> |
||||||
|
<div |
||||||
|
v-if="calDataType === UITypes.Date" |
||||||
|
:class="{ |
||||||
|
'h-calc(100vh-10.8rem) overflow-y-auto nc-scrollbar-md': !props.isEmbed, |
||||||
|
'border-r-1 h-full border-gray-200 hover:bg-gray-50 ': props.isEmbed, |
||||||
|
}" |
||||||
|
class="flex flex-col pt-3 gap-2 h-full w-full px-1" |
||||||
|
> |
||||||
|
<LazySmartSheetRow v-for="(record, rowIndex) in renderData" :row="record"> |
||||||
<LazySmartsheetCalendarRecordCard |
<LazySmartsheetCalendarRecordCard |
||||||
v-for="event in events" |
:key="rowIndex" |
||||||
:key="event.Id" |
:date="record.row[calendarRange[0].fk_from_col.title]" |
||||||
:name="event.Title" |
:name="record.row[displayField.title]" |
||||||
:date="event.from_date_time" |
|
||||||
color="blue" |
color="blue" |
||||||
size="medium" |
size="small" |
||||||
@click="emit('expand-record', 'xxx')" |
@click="emit('expand-record', record)" |
||||||
/> |
/> |
||||||
|
</LazySmartSheetRow> |
||||||
</div> |
</div> |
||||||
|
<div |
||||||
|
v-else-if="calDataType === UITypes.DateTime" |
||||||
|
:class="{ |
||||||
|
'h-calc(100vh-10.8rem) overflow-y-auto nc-scrollbar-md': !props.isEmbed, |
||||||
|
'border-r-1 h-full border-gray-200 ': props.isEmbed, |
||||||
|
}" |
||||||
|
class="flex flex-col mt-3 gap-2 w-full px-1" |
||||||
|
></div> |
||||||
|
</template> |
||||||
|
<div v-else-if="!data" class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center">No Records in this day</div> |
||||||
</template> |
</template> |
||||||
|
|
||||||
<style scoped lang="scss"></style> |
<style lang="scss" scoped></style> |
||||||
|
|||||||
@ -0,0 +1,42 @@ |
|||||||
|
<script lang="ts" setup> |
||||||
|
import dayjs from 'dayjs'; |
||||||
|
|
||||||
|
const { selectedDateRange, formattedData, calendarRange } = useCalendarViewStoreOrThrow() |
||||||
|
|
||||||
|
const weekDates = computed(() => { |
||||||
|
const startOfWeek = new Date(selectedDateRange.value.start) |
||||||
|
const endOfWeek = new Date(selectedDateRange.value.end) |
||||||
|
const datesArray = [] |
||||||
|
while (startOfWeek <= endOfWeek) { |
||||||
|
datesArray.push(new Date(startOfWeek)) |
||||||
|
startOfWeek.setDate(startOfWeek.getDate() + 1) |
||||||
|
} |
||||||
|
return datesArray |
||||||
|
}) |
||||||
|
|
||||||
|
const getData = (date: Date) => { |
||||||
|
const range = calendarRange.value[0] |
||||||
|
return formattedData.value.filter((record) => dayjs(date).isSame(dayjs(record.row[range.fk_from_col.title]))) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div class="flex flex-col"> |
||||||
|
<div class="flex"> |
||||||
|
<div |
||||||
|
v-for="date in weekDates" |
||||||
|
:key="date" |
||||||
|
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 !last:mr-2.5 border-gray-200 border-b-1 border-r-1 bg-gray-50" |
||||||
|
> |
||||||
|
{{ dayjs(date).format('DD ddd') }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="flex overflow-auto nc-scrollbar-md h-[calc(100vh-12rem)]"> |
||||||
|
<div v-for="date in weekDates" :key="date" class="flex flex-col items-center w-1/7"> |
||||||
|
<LazySmartsheetCalendarDayView :data="getData(date)" :is-embed="true" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style lang="scss" scoped></style> |
||||||
Loading…
Reference in new issue