From 738c6406cc07d77f3120da6e8bb80262012d1a18 Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Tue, 20 Feb 2024 07:16:02 +0000 Subject: [PATCH] fix(nc-gui): refactor day view --- .../smartsheet/calendar/DayView.vue | 276 ++++++------------ 1 file changed, 88 insertions(+), 188 deletions(-) diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView.vue b/packages/nc-gui/components/smartsheet/calendar/DayView.vue index 87a0f1eaab..fc32fb6668 100644 --- a/packages/nc-gui/components/smartsheet/calendar/DayView.vue +++ b/packages/nc-gui/components/smartsheet/calendar/DayView.vue @@ -3,142 +3,95 @@ import { UITypes } from 'nocodb-sdk' import dayjs from 'dayjs' import { type Row, computed, ref } from '#imports' -interface Props { - isEmbed?: boolean - renderDate?: Date | null - data?: Row[] | null -} - -const props = withDefaults(defineProps(), { - isEmbed: false, - renderDate: null, - data: null, -}) - const emit = defineEmits(['expand-record', 'new-record']) const meta = inject(MetaInj, ref()) const fields = inject(FieldsInj, ref([])) const container = ref() -const data = toRefs(props).data - const displayField = computed(() => meta.value?.columns?.find((c) => c.pv && fields.value.includes(c)) ?? null) -const { - selectedTime, - selectedDate: _selectedDate, - calDataType, - formattedData, - calendarRange, - selectedDateRange, -} = useCalendarViewStoreOrThrow() - -const renderData = computed(() => { - if (data.value) { - return data.value - } - return formattedData.value -}) - -const selectedDate = computed(() => { - if (props.isEmbed) { - return props.renderDate ?? renderData - } - return _selectedDate.value -}) +const { selectedTime, selectedDate, calDataType, formattedData, calendarRange } = useCalendarViewStoreOrThrow() const recordsAcrossAllRange = computed(() => { if (!calendarRange.value) return [] - const recordsByRange = [] + + const recordsByRange: Array = [] calendarRange.value.forEach((range) => { - if (range.fk_from_col && range.fk_to_col) { - const startCol = range.fk_from_col.title - const endCol = range.fk_to_col.title - for (const record of renderData.value) { - const startDate = dayjs(record.row[startCol]) - const endDate = dayjs(record.row[endCol]) - if ( - startDate.isSame(selectedDate.value, 'day') || - endDate.isSame(selectedDate.value, 'day') || - (startDate.isBefore(selectedDate.value, 'day') && endDate.isAfter(selectedDate.value, 'day')) || - (startDate.isSame(selectedDate.value, 'day') && endDate.isBefore(selectedDate.value, 'day')) || - (startDate.isAfter(selectedDate.value, 'day') && endDate.isSame(selectedDate.value, 'day')) || - (startDate.isAfter(selectedDate.value, 'day') && endDate.isBefore(selectedDate.value, 'day')) - ) { - recordsByRange.push({ - ...record, - rowMeta: { - ...record.rowMeta, - range, - }, - }) + const fromCol = range.fk_from_col + const endCol = range.fk_to_col + if (fromCol && endCol) { + for (const record of formattedData.value) { + const scheduleStart = dayjs(selectedDate.value).startOf('day') + const scheduleEnd = dayjs(selectedDate.value).endOf('day') + const startDate = dayjs(record.row[fromCol.title]) + const endDate = dayjs(record.row[endCol.title]) + const scaleMin = (scheduleEnd - scheduleStart) / 60000 + const startMinutes = Math.max((startDate - scheduleStart) / 60000, 0) + const endMinutes = Math.min((endDate - scheduleStart) / 60000, scaleMin) + + const height = ((endMinutes - startMinutes) / scaleMin) * 100 + const top = (startMinutes / scaleMin) * 100 + + const columnIndex = 0 // getColumnIndexFromGroup(record) + const totalColumns = 0 // getTotalColumns(record) + + const width = 100 / totalColumns + const left = width * columnIndex + + const style: Partial = { + top: `${top}%`, + height: `max(${height}%, 40px)`, + width: columnIndex === 0 && calDataType.value === UITypes.DateTime ? `calc(${width}% - 69px)` : `${width}%`, + left: columnIndex === 0 && calDataType.value === UITypes.DateTime ? `calc(${left}% + 69px)` : `${left}%`, } - } - } else if (range.fk_from_col) { - const startCol = range.fk_from_col.title - for (const record of renderData.value) { - const startDate = dayjs(record.row[startCol]) - if (startDate.isSame(selectedDate.value, 'day')) { - recordsByRange.push({ - ...record, - rowMeta: { - ...record.rowMeta, - range, - }, - }) + + let position = 'none' + const isSelectedDay = (date) => date.isSame(selectedDate.value, 'day') + const isBeforeSelectedDay = (date) => date.isBefore(selectedDate.value, 'day') + const isAfterSelectedDay = (date) => date.isAfter(selectedDate.value, 'day') + + console.log(selectedDate.value, startDate, endDate) + console.log(isSelectedDay(startDate), isSelectedDay(endDate)) + if (isSelectedDay(startDate) && isSelectedDay(endDate)) { + position = 'rounded' + } else if (isBeforeSelectedDay(startDate) && isAfterSelectedDay(endDate)) { + position = 'none' + } else if (isSelectedDay(startDate) && isAfterSelectedDay(endDate)) { + position = 'leftRounded' + } else if (isBeforeSelectedDay(startDate) && isSelectedDay(endDate)) { + position = 'rightRounded' + } else { + position = 'none' } + + recordsByRange.push({ + ...record, + rowMeta: { + ...record.rowMeta, + position, + style, + range, + }, + }) + } + } else if (fromCol) { + for (const record of formattedData.value) { + recordsByRange.push({ + ...record, + rowMeta: { + ...record.rowMeta, + range, + position: 'rounded', + }, + }) } } }) return recordsByRange }) -const getRecordPosition = (record: Row) => { - if (!calendarRange.value) return '' - if (!record.rowMeta.range) return '' - const range = record.rowMeta.range - const startCol = range.fk_from_col - const endCol = range.fk_to_col - if (!endCol && startCol) { - const startDate = dayjs(record.row[startCol.title]) - if (props.isEmbed) { - return startDate.isSame(props.renderDate, 'day') ? 'rounded' : '' - } - return startDate.isSame(selectedDate.value, 'day') ? 'rounded' : '' - } else if (endCol && startCol) { - const startDate = dayjs(record.row[startCol.title]) - const endDate = dayjs(record.row[endCol.title]) - // StartDate is Same as selectedDate and EndDate is Same as selectedDate -> Same Day No Spanning - none - // StartDate is Same as selectedDate and EndDate is After selectedDate -> Spanning Right - // StartDate is Before selectedDate and EndDate is Same as selectedDate -> Spanning Left - // StartDate is Before selectedDate and EndDate is After selectedDate -> Spanning Both - // StartDate is same as selectedDate and EndDate is Before selectedDate -> Spanning Left - // StartDate is after selectedDate and EndDate is same as selectedDate -> Spanning Right - // StartDate is after selectedDate and EndDate is before selectedDate -> Spanning Both - // StartDate and no EndDate -> Same Day No Spanning - none - // EndDate and no StartDate -> Same Day No Spanning - none - if (startDate.isSame(selectedDate.value, 'day') && endDate.isSame(selectedDate.value, 'day')) { - return 'rounded' - } else if (startDate.isBefore(selectedDate.value, 'day') && endDate.isAfter(selectedDate.value, 'day')) { - return 'none' - } else if (startDate.isSame(selectedDate.value, 'day') && endDate.isAfter(selectedDate.value, 'day')) { - return 'leftRounded' - } else if (startDate.isBefore(selectedDate.value, 'day') && endDate.isSame(selectedDate.value, 'day')) { - return 'rightRounded' - } else if (startDate.isSame(selectedDate.value, 'day') && endDate.isBefore(selectedDate.value, 'day')) { - return 'rightRounded' - } else if (startDate.isAfter(selectedDate.value, 'day') && endDate.isSame(selectedDate.value, 'day')) { - return 'leftRounded' - } else if (startDate.isAfter(selectedDate.value, 'day') && endDate.isBefore(selectedDate.value, 'day')) { - return 'rounded' - } else { - return 'rounded' - } - } -} - const hours = computed(() => { const hours = [] for (let i = 0; i < 24; i++) { @@ -148,47 +101,17 @@ const hours = computed(() => { .minute(0) .second(0) .millisecond(0) - .year(selectedDate.value.getFullYear()) - .month(selectedDate.value.getMonth()) - .date(selectedDate.value.getDate()) + .year(selectedDate.value.getFullYear() || dayjs().year()) + .month(selectedDate.value.getMonth() || dayjs().month()) + .date(selectedDate.value.getDate() || dayjs().date()) .toDate(), ) } return hours }) -const getRecordStyle = (record: Row) => { - if (!calendarRange.value || !record.rowMeta.range) return {} - const range = record.rowMeta.range - const startCol = range.fk_from_col.title - const endCol = range.fk_to_col.title - const scheduleStart = dayjs(selectedDate.value).startOf('day') - const scheduleEnd = dayjs(selectedDate.value).endOf('day') - const startDate = dayjs(record.row[startCol]) - const endDate = dayjs(record.row[endCol]) - - const scaleMin = (scheduleEnd - scheduleStart) / 60000 - const startMinutes = Math.max((startDate - scheduleStart) / 60000, 0) - const endMinutes = Math.min((endDate - scheduleStart) / 60000, scaleMin) - - const height = ((endMinutes - startMinutes) / scaleMin) * 100 - const top = (startMinutes / scaleMin) * 100 - - const columnIndex = getColumnIndexFromGroup(record) - const totalColumns = getTotalColumns(record) - - const width = 100 / totalColumns - const left = width * columnIndex - return { - top: `${top}%`, - height: `max(${height}%, 40px)`, - width: columnIndex === 0 && calDataType.value === UITypes.DateTime ? `calc(${width}% - 69px)` : `${width}%`, - left: columnIndex === 0 && calDataType.value === UITypes.DateTime ? `calc(${left}% + 69px)` : `${left}%`, - } -} - const dragStart = (event: DragEvent, record: Row) => { - const eventRect = event.target.getBoundingClientRect() + const eventRect = (event.target as HTMLElement).getBoundingClientRect() const initialClickOffsetY = event.clientY - eventRect.top event.dataTransfer?.setData( @@ -214,8 +137,8 @@ const dropEvent = (event: DragEvent) => { const newStartTime = dayjs(selectedDate.value).startOf('day').add(minutes, 'minutes') const newEndTime = dayjs(newStartTime).add( - dayjs(record.row[calendarRange.value[0].fk_to_col.title]).diff( - dayjs(record.row[calendarRange.value[0].fk_from_col.title]), + dayjs(record.row[record.rowMeta.range.fk_to_col.title]).diff( + dayjs(record.row[record.rowMeta.range.fk_to_col.title]), 'minutes', ), 'minutes', @@ -227,29 +150,17 @@ const dropEvent = (event: DragEvent) => {