From e2ef73f151e82a7d6a0c7604782b72b4672be8da Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Tue, 20 Feb 2024 07:16:11 +0000 Subject: [PATCH] fix(nc-gui): misc fixes --- .../calendar/DayView/DateTimeField.vue | 25 +++-- .../calendar/DayView/RecordCard.vue | 101 ------------------ .../smartsheet/calendar/MonthView.vue | 75 ++++++------- .../calendar/WeekView/DateField.vue | 6 +- .../calendar/WeekView/DateTimeField.vue | 8 +- .../smartsheet/calendar/YearView.vue | 2 +- .../components/smartsheet/calendar/index.vue | 4 +- .../composables/useCalendarViewStore.ts | 10 +- 8 files changed, 55 insertions(+), 176 deletions(-) delete mode 100644 packages/nc-gui/components/smartsheet/calendar/DayView/RecordCard.vue diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue index 4671add8fe..d709b388ac 100644 --- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue +++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue @@ -2,7 +2,7 @@ import dayjs from 'dayjs' import { type Row, computed, ref } from '#imports' -const emit = defineEmits(['expand-record', 'new-record']) +const emit = defineEmits(['expandRecord', 'new-record']) const meta = inject(MetaInj, ref()) const fields = inject(FieldsInj, ref([])) @@ -201,7 +201,7 @@ const resizeDirection = ref<'right' | 'left' | null>() const resizeInProgress = ref(false) const resizeRecord = ref() -const dragTimeout = ref(null) +const dragTimeout = ref>() const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => { updateRowProperty(row, updateProperty, isDelete) @@ -210,7 +210,7 @@ const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], const onResize = (event: MouseEvent) => { if (!isUIAllowed('dataEdit')) return if (!container.value || !resizeRecord.value) return - const { width, left, top, bottom } = container.value.getBoundingClientRect() + const { top, bottom } = container.value.getBoundingClientRect() const { scrollHeight } = container.value @@ -294,7 +294,7 @@ const onResizeEnd = () => { document.removeEventListener('mousemove', onResize) document.removeEventListener('mouseup', onResizeEnd) } -const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => { +const onResizeStart = (direction: 'right' | 'left', _event: MouseEvent, record: Row) => { if (!isUIAllowed('dataEdit')) return resizeInProgress.value = true resizeDirection.value = direction @@ -369,7 +369,7 @@ const onDrag = (event: MouseEvent) => { const stopDrag = (event: MouseEvent) => { event.preventDefault() - clearTimeout(dragTimeout.value) + clearTimeout(dragTimeout.value!) if (!isUIAllowed('dataEdit')) return if (!isDragging.value || !container.value || !dragRecord.value) return @@ -490,10 +490,10 @@ const dragStart = (event: MouseEvent, record: Row) => { }, 200) const onMouseUp = () => { - clearTimeout(dragTimeout.value) + clearTimeout(dragTimeout.value!) document.removeEventListener('mouseup', onMouseUp) if (!isDragging.value) { - emit('expand-record', record) + emit('expandRecord', record) } } @@ -636,11 +636,10 @@ const dragStart = (event: MouseEvent, record: Row) => { diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/RecordCard.vue deleted file mode 100644 index 17de3fe189..0000000000 --- a/packages/nc-gui/components/smartsheet/calendar/DayView/RecordCard.vue +++ /dev/null @@ -1,101 +0,0 @@ - - - - - diff --git a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue index 13273d49e9..4e03e0ec6e 100644 --- a/packages/nc-gui/components/smartsheet/calendar/MonthView.vue +++ b/packages/nc-gui/components/smartsheet/calendar/MonthView.vue @@ -47,7 +47,7 @@ const resizeInProgress = ref(false) const isDragging = ref(false) const dragRecord = ref() -const dragTimeout = ref(null) +const dragTimeout = ref>() const focusedDate = ref(null) @@ -85,18 +85,7 @@ function getRandomNumbers() { return randomValues.join('') } -const recordsToDisplay = computed<{ - records: Array - count: { - [key: string]: - | { - overflow: boolean - count: number - overflowCount: number - } - | undefined - } -}>(() => { +const recordsToDisplay = computed(() => { if (!dates.value || !calendarRange.value) return [] const perWidth = gridContainerWidth.value / 7 @@ -121,11 +110,11 @@ const recordsToDisplay = computed<{ const endCol = range.fk_to_col const sortedFormattedData = [...formattedData.value].filter((record) => { - const fromDate = record.row[startCol?.title] ? dayjs(record.row[startCol.title]) : null + const fromDate = record.row[startCol!.title!] ? dayjs(record.row[startCol!.title!]) : null if (startCol && endCol) { - const fromDate = record.row[startCol.title] ? dayjs(record.row[startCol.title]) : null - const toDate = record.row[endCol.title] ? dayjs(record.row[endCol.title]) : null + const fromDate = record.row[startCol!.title!] ? dayjs(record.row[startCol!.title!]) : null + const toDate = record.row[endCol!.title!] ? dayjs(record.row[endCol!.title!]) : null return fromDate && toDate && !toDate.isBefore(fromDate) } else if (startCol && !endCol) { return !!fromDate @@ -135,7 +124,7 @@ const recordsToDisplay = computed<{ sortedFormattedData.forEach((record: Row) => { if (!endCol && startCol) { - const startDate = dayjs(record.row[startCol.title]) + const startDate = dayjs(record.row[startCol!.title!]) const dateKey = startDate.format('YYYY-MM-DD') if (!recordsInDay[dateKey]) { @@ -179,8 +168,8 @@ const recordsToDisplay = computed<{ }, }) } else if (startCol && endCol) { - const startDate = dayjs(record.row[startCol.title]) - const endDate = dayjs(record.row[endCol.title]) + const startDate = dayjs(record.row[startCol!.title!]) + const endDate = dayjs(record.row[endCol!.title!]) let currentWeekStart = startDate.startOf('week') const id = record.rowMeta.id ?? getRandomNumbers() @@ -292,20 +281,23 @@ const recordsToDisplay = computed<{ } }) }) - return { + + const result: { records: Row[]; count: { [p: string]: { overflow: boolean; count: number; overflowCount: number } } } = { records: recordsToDisplay, count: recordsInDay, } + return result }) const onDrag = (event: MouseEvent) => { + if (!isUIAllowed('dataEdit') || !dragRecord.value) return const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect() const percentY = (event.clientY - top - window.scrollY) / height const percentX = (event.clientX - left - window.scrollX) / width - const fromCol = dragRecord.value!.rowMeta.range?.fk_from_col - const toCol = dragRecord.value!.rowMeta.range?.fk_to_col + const fromCol = dragRecord.value.rowMeta.range?.fk_from_col + const toCol = dragRecord.value.rowMeta.range?.fk_to_col const week = Math.floor(percentY * dates.value.length) const day = Math.floor(percentX * 7) @@ -359,15 +351,15 @@ const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], }, 500) const onResize = (event: MouseEvent) => { - if (!isUIAllowed('dataEdit')) return + if (!isUIAllowed('dataEdit') || !resizeRecord.value) return const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect() const percentY = (event.clientY - top - window.scrollY) / height const percentX = (event.clientX - left - window.scrollX) / width - const ogEndDate = resizeRecord.value.row[resizeRecord.value.rowMeta.range?.fk_to_col.title] - const ogStartDate = resizeRecord.value.row[resizeRecord.value.rowMeta.range?.fk_from_col.title] + const ogEndDate = resizeRecord.value.row[resizeRecord.value.rowMeta!.range!.fk_to_col!.title!] + const ogStartDate = resizeRecord.value.row[resizeRecord.value.rowMeta!.range!.fk_from_col!.title!] const fromCol = resizeRecord.value.rowMeta.range?.fk_from_col const toCol = resizeRecord.value.rowMeta.range?.fk_to_col @@ -435,8 +427,8 @@ const onResize = (event: MouseEvent) => { const onResizeEnd = () => { resizeInProgress.value = false - resizeDirection.value = null - resizeRecord.value = null + resizeDirection.value = undefined + resizeRecord.value = undefined document.removeEventListener('mousemove', onResize) document.removeEventListener('mouseup', onResizeEnd) } @@ -453,14 +445,14 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R } const stopDrag = (event: MouseEvent) => { - if (!isUIAllowed('dataEdit')) return + if (!isUIAllowed('dataEdit') || !dragRecord.value) return event.preventDefault() clearTimeout(dragTimeout.value) if (!isDragging.value) return - dragElement.value.style.boxShadow = 'none' + dragElement.value!.style.boxShadow = 'none' const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect() @@ -502,7 +494,7 @@ const stopDrag = (event: MouseEvent) => { endDate = newStartDate.clone() } - dragRecord.value = null + dragRecord.value = undefined newRow.row[toCol!.title!] = dayjs(endDate).format('YYYY-MM-DD HH:mm:ssZ') updateProperty.push(toCol!.title!) @@ -512,9 +504,9 @@ const stopDrag = (event: MouseEvent) => { if (dragElement.value) { formattedData.value = formattedData.value.map((r) => { - const pk = extractPkFromRow(r.row, meta.value.columns) + const pk = extractPkFromRow(r.row, meta.value!.columns!) - if (pk === extractPkFromRow(newRow.row, meta.value.columns)) { + if (pk === extractPkFromRow(newRow.row, meta.value!.columns!)) { return newRow } return r @@ -522,9 +514,9 @@ const stopDrag = (event: MouseEvent) => { } else { formattedData.value = [...formattedData.value, newRow] formattedSideBarData.value = formattedSideBarData.value.filter((r) => { - const pk = extractPkFromRow(r.row, meta.value.columns) + const pk = extractPkFromRow(r.row, meta.value!.columns!) - return pk !== extractPkFromRow(newRow.row, meta.value.columns) + return pk !== extractPkFromRow(newRow.row, meta.value!.columns!) }) } @@ -550,8 +542,7 @@ const stopDrag = (event: MouseEvent) => { } const dragStart = (event: MouseEvent, record: Row) => { - if (!isUIAllowed('dataEdit')) return - if (resizeInProgress.value) return + if (!isUIAllowed('dataEdit') || resizeInProgress.value || !record.rowMeta.id) return let target = event.target as HTMLElement isDragging.value = false @@ -562,7 +553,7 @@ const dragStart = (event: MouseEvent, record: Row) => { const allRecords = document.querySelectorAll('.draggable-record') allRecords.forEach((el) => { - if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id)) { + if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) { // el.style.visibility = 'hidden' el.style.opacity = '30%' } @@ -583,7 +574,7 @@ const dragStart = (event: MouseEvent, record: Row) => { clearTimeout(dragTimeout.value) document.removeEventListener('mouseup', onMouseUp) if (!isDragging.value) { - emit('expand-record', record) + emit('expandRecord', record) } } @@ -757,7 +748,7 @@ onBeforeUnmount(() => { () => { const record = { row: { - [range.fk_from_col.title]: dayjs(day).format('YYYY-MM-DD HH:mm:ssZ'), + [range.fk_from_col!.title!]: dayjs(day).format('YYYY-MM-DD HH:mm:ssZ'), }, } emit('new-record', record) @@ -766,7 +757,7 @@ onBeforeUnmount(() => { >
- {{ range.fk_from_col.title }} + {{ range.fk_from_col!.title }}
@@ -784,7 +775,7 @@ onBeforeUnmount(() => { () => { const record = { row: { - [calendarRange[0].fk_from_col.title]: dayjs(day).format('YYYY-MM-DD HH:mm:ssZ'), + [calendarRange[0].fk_from_col!.title!]: dayjs(day).format('YYYY-MM-DD HH:mm:ssZ'), }, } emit('new-record', record) @@ -833,7 +824,7 @@ onBeforeUnmount(() => { ? dayjs(record.row[record.rowMeta.range?.fk_from_col.title]).format('YYYY-MM-DD HH:mm') : dayjs(record.row[record.rowMeta.range?.fk_from_col.title]).format('YYYY-MM-DD') " - :name="record.row[displayField.title]" + :name="record.row[displayField!.title!]" :position="record.rowMeta.position" :record="record" :resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')" diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue index 2d5f9a3b9c..03d1421a0f 100644 --- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue +++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue @@ -3,7 +3,7 @@ import dayjs from 'dayjs' import type { Row } from '~/lib' import { ref } from '#imports' -const emits = defineEmits(['expand-record']) +const emits = defineEmits(['expandRecord']) const { selectedDateRange, formattedData, formattedSideBarData, calendarRange, selectedDate, displayField, updateRowProperty } = useCalendarViewStoreOrThrow() @@ -203,7 +203,7 @@ const draggingId = ref(null) const resizeInProgress = ref(false) -const dragTimeout = ref(null) +const dragTimeout = ref>() const isDragging = ref(false) const dragRecord = ref() @@ -484,7 +484,7 @@ const dragStart = (event: MouseEvent, record: Row) => { clearTimeout(dragTimeout.value!) document.removeEventListener('mouseup', onMouseUp) if (!isDragging.value) { - emits('expand-record', record) + emits('expandRecord', record) } } diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue index c8ee0dd2de..7d0deec01f 100644 --- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue +++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue @@ -3,7 +3,7 @@ import dayjs from 'dayjs' import type { Row } from '~/lib' import { computed, ref } from '#imports' -const emits = defineEmits(['expand-record']) +const emits = defineEmits(['expandRecord']) const { selectedDateRange, formattedData, formattedSideBarData, calendarRange, displayField, selectedTime, updateRowProperty } = useCalendarViewStoreOrThrow() @@ -229,7 +229,7 @@ const recordsAcrossAllRange = computed(() => { recordsToDisplay = recordsToDisplay.map((record) => { let maxOverlaps = 1 let overlapIndex = 0 - const dayIndex = record.rowMeta.dayIndex + const dayIndex = record.rowMeta.dayIndex as number const dateKey = dayjs(selectedDateRange.value.start).add(dayIndex, 'day').format('YYYY-MM-DD') @@ -261,7 +261,7 @@ const draggingId = ref(null) const resizeInProgress = ref(false) -const dragTimeout = ref(null) +const dragTimeout = ref>() const resizeDirection = ref<'right' | 'left' | null>() const resizeRecord = ref() @@ -565,7 +565,7 @@ const dragStart = (event: MouseEvent, record: Row) => { clearTimeout(dragTimeout.value!) document.removeEventListener('mouseup', onMouseUp) if (!isDragging.value) { - emits('expand-record', record) + emits('expandRecord', record) } } diff --git a/packages/nc-gui/components/smartsheet/calendar/YearView.vue b/packages/nc-gui/components/smartsheet/calendar/YearView.vue index 88e3bb120a..2dfeb5510c 100644 --- a/packages/nc-gui/components/smartsheet/calendar/YearView.vue +++ b/packages/nc-gui/components/smartsheet/calendar/YearView.vue @@ -13,7 +13,7 @@ const months = computed(() => {