From 6a6e7db50ef5c7122fa9ea09cad035e704946d77 Mon Sep 17 00:00:00 2001 From: DarkPhoenix2704 Date: Tue, 20 Feb 2024 07:16:07 +0000 Subject: [PATCH] fix: random fixes --- .../smartsheet/calendar/DayView.vue | 55 ++++----- .../smartsheet/calendar/MonthView.vue | 88 ++++++++------ .../smartsheet/calendar/RecordCard.vue | 11 +- .../smartsheet/calendar/WeekView.vue | 112 +++++++++--------- .../composables/useCalendarViewStore.ts | 49 ++++++-- packages/nc-gui/lib/types.ts | 1 + 6 files changed, 187 insertions(+), 129 deletions(-) diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView.vue b/packages/nc-gui/components/smartsheet/calendar/DayView.vue index 3295ef0574..8c23b73274 100644 --- a/packages/nc-gui/components/smartsheet/calendar/DayView.vue +++ b/packages/nc-gui/components/smartsheet/calendar/DayView.vue @@ -29,8 +29,8 @@ const recordsAcrossAllRange = computed(() => { const endCol = range.fk_to_col if (fromCol && endCol) { for (const record of formattedData.value) { - const startDate = dayjs(record.row[fromCol.title]) - const endDate = dayjs(record.row[endCol.title]) + const startDate = dayjs(record.row[fromCol.title!]) + const endDate = dayjs(record.row[endCol.title!]) dayRecordCount++ @@ -42,9 +42,9 @@ const recordsAcrossAllRange = computed(() => { } 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') + const isSelectedDay = (date: dayjs.Dayjs) => date.isSame(selectedDate.value, 'day') + const isBeforeSelectedDay = (date: dayjs.Dayjs) => date.isBefore(selectedDate.value, 'day') + const isAfterSelectedDay = (date: dayjs.Dayjs) => date.isAfter(selectedDate.value, 'day') if (isSelectedDay(startDate) && isSelectedDay(endDate)) { position = 'rounded' @@ -64,7 +64,7 @@ const recordsAcrossAllRange = computed(() => { ...record.rowMeta, position, style, - range, + range: range as any, }, }) } @@ -75,7 +75,7 @@ const recordsAcrossAllRange = computed(() => { ...record, rowMeta: { ...record.rowMeta, - range, + range: range as any, style: { width: '100%', left: '0', @@ -90,8 +90,8 @@ const recordsAcrossAllRange = computed(() => { return recordsByRange }) -const hours = computed(() => { - const hours = [] +const hours = computed(() => { + const hours: Array = [] for (let i = 0; i < 24; i++) { hours.push( dayjs() @@ -101,8 +101,7 @@ const hours = computed(() => { .millisecond(0) .year(selectedDate.value.getFullYear() || dayjs().year()) .month(selectedDate.value.getMonth() || dayjs().month()) - .date(selectedDate.value.getDate() || dayjs().date()) - .toDate(), + .date(selectedDate.value.getDate() || dayjs().date()), ) } return hours @@ -154,6 +153,8 @@ const dropEvent = (event: DragEvent) => { const fromCol = record.rowMeta.range?.fk_from_col const toCol = record.rowMeta.range?.fk_to_col + if (!fromCol) return + const newStartDate = dayjs(selectedDate.value) .startOf('day') .add(percentY * 1440, 'minutes') @@ -164,15 +165,15 @@ const dropEvent = (event: DragEvent) => { ...record, row: { ...record.row, - [fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'), + [fromCol.title!]: dayjs(newStartDate).format('YYYY-MM-DD'), }, } - const updateProperty = [fromCol.title] + const updateProperty = [fromCol.title!] if (toCol) { - const fromDate = record.row[fromCol.title] ? dayjs(record.row[fromCol.title]) : null - const toDate = record.row[toCol.title] ? dayjs(record.row[toCol.title]) : null + const fromDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null + const toDate = record.row[toCol.title!] ? dayjs(record.row[toCol.title!]) : null if (fromDate && toDate) { endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day') @@ -183,17 +184,17 @@ const dropEvent = (event: DragEvent) => { } else { endDate = newStartDate.clone() } - newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD') - updateProperty.push(toCol.title) + newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD') + updateProperty.push(toCol.title!) } if (!newRow) return 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 @@ -201,9 +202,9 @@ const dropEvent = (event: DragEvent) => { } 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!) }) } @@ -230,10 +231,10 @@ const dropEvent = (event: DragEvent) => { v-for="(hour, index) in hours" :key="index" :class="{ - '!border-brand-500': dayjs(hour).isSame(selectedTime), + '!border-brand-500': hour.isSame(selectedTime), }" class="flex w-full min-h-20 relative border-1 group hover:bg-gray-50 border-white border-b-gray-100" - @click="selectedTime = hour" + @click="selectedTime = hour.toDate()" >
{{ dayjs(hour).format('H A') }} @@ -241,8 +242,8 @@ const dropEvent = (event: DragEvent) => {
{ > { return date.getMonth() === selectedMonth.value.getMonth() } +const dragElement = ref(null) +const draggingId = ref(null) + +const resizeInProgress = ref(false) + +const isDragging = ref(false) +const dragRecord = ref() + +const dragTimeout = ref(null) + +const focusedDate = ref(null) + +const resizeDirection = ref<'right' | 'left'>() +const resizeRecord = ref() + const dates = computed(() => { const startOfMonth = dayjs(selectedMonth.value).startOf('month') const endOfMonth = dayjs(selectedMonth.value).endOf('month') @@ -281,18 +296,6 @@ const recordsToDisplay = computed<{ } }) -const dragElement = ref(null) -const draggingId = ref(null) - -const resizeInProgress = ref(false) - -const isDragging = ref(false) -const dragRecord = ref() - -const selectedRecord = ref() - -const dragTimeout = ref(null) - const onDrag = (event: MouseEvent) => { const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect() @@ -305,6 +308,9 @@ const onDrag = (event: MouseEvent) => { const week = Math.floor(percentY * dates.value.length) const day = Math.floor(percentX * 7) + focusedDate.value = dates.value[week] ? dates.value[week][day] : null + selectedDate.value = null + const newStartDate = dates.value[week] ? dayjs(dates.value[week][day]) : null if (!newStartDate) return @@ -346,9 +352,6 @@ const onDrag = (event: MouseEvent) => { }) } -const resizeDirection = ref<'right' | 'left'>() -const resizeRecord = ref() - const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => { updateRowProperty(row, updateProperty, isDelete) }, 500) @@ -435,6 +438,7 @@ const onResizeEnd = () => { } const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => { + if (draggingId.value) return resizeInProgress.value = true resizeDirection.value = direction resizeRecord.value = record @@ -444,6 +448,8 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R const stopDrag = (event: MouseEvent) => { event.preventDefault() + clearTimeout(dragTimeout.value) + if (!isDragging.value) return dragElement.value.style.boxShadow = 'none' @@ -488,6 +494,7 @@ const stopDrag = (event: MouseEvent) => { endDate = newStartDate.clone() } + dragRecord.value = null newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD') updateProperty.push(toCol.title) @@ -528,6 +535,7 @@ const stopDrag = (event: MouseEvent) => { } updateRowProperty(newRow, updateProperty, false) + focusedDate.value = null document.removeEventListener('mousemove', onDrag) document.removeEventListener('mouseup', stopDrag) @@ -537,27 +545,29 @@ const dragStart = (event: MouseEvent, record: Row) => { if (resizeInProgress.value) return let target = event.target as HTMLElement - while (!target.classList.contains('draggable-record')) { - target = target.parentElement as HTMLElement - } - - const allRecords = document.querySelectorAll('.draggable-record') - allRecords.forEach((el) => { - if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id)) { - // el.style.visibility = 'hidden' - el.style.opacity = '30%' + dragTimeout.value = setTimeout(() => { + while (!target.classList.contains('draggable-record')) { + target = target.parentElement as HTMLElement } - }) - dragRecord.value = record + const allRecords = document.querySelectorAll('.draggable-record') + allRecords.forEach((el) => { + if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id)) { + // el.style.visibility = 'hidden' + el.style.opacity = '30%' + } + }) - isDragging.value = true - dragElement.value = target - draggingId.value = record.rowMeta.id - dragRecord.value = record + dragRecord.value = record - document.addEventListener('mousemove', onDrag) - document.addEventListener('mouseup', stopDrag) + isDragging.value = true + dragElement.value = target + draggingId.value = record.rowMeta.id + dragRecord.value = record + + document.addEventListener('mousemove', onDrag) + document.addEventListener('mouseup', stopDrag) + }, 500) } const selectDate = (date: Date) => { @@ -605,7 +615,7 @@ onBeforeUnmount(() => { v-for="(day, dateIndex) in week" :key="`${weekIndex}-${dateIndex}`" :class="{ - 'border-brand-500 border-2 border-r-2 border-b-2': isDateSelected(day), + 'border-brand-500 border-2 border-r-2 border-b-2': isDateSelected(day) || dayjs(day).isSame(focusedDate, 'day'), '!text-gray-400': !isDayInPagedMonth(day), }" class="text-right relative group text-sm h-full border-r-1 border-b-1 border-gray-200 font-semibold hover:bg-gray-50 text-gray-800 bg-white" @@ -723,9 +733,15 @@ onBeforeUnmount(() => { :position="record.rowMeta.position" :record="record" :resize="!!record.rowMeta.range?.fk_to_col" - @click="selectedRecord = record" - @dblclick="emit('expand-record', record)" + :selected=" + dragRecord + ? dragRecord.rowMeta.id === record.rowMeta.id + : resizeRecord + ? resizeRecord.rowMeta.id === record.rowMeta.id + : false + " @resize-start="onResizeStart" + @dblclick.stop="emit('expand-record', record)" />
diff --git a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue index 0390a47f7a..d9293191c2 100644 --- a/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue +++ b/packages/nc-gui/components/smartsheet/calendar/RecordCard.vue @@ -5,6 +5,7 @@ interface Props { date?: string color?: string resize?: boolean + selected?: boolean size?: 'small' | 'medium' | 'large' showDate?: boolean position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none' @@ -14,6 +15,7 @@ withDefaults(defineProps(), { name: '', date: '', resize: true, + selected: false, color: 'blue', size: 'small', showDate: true, @@ -40,6 +42,7 @@ const emit = defineEmits(['resize-start']) 'bg-pink-50': color === 'pink', 'bg-purple-50': color === 'purple', 'group-hover:(border-brand-500 border-2)': resize, + 'border-brand-500 border-2': selected, }" class="relative group" > @@ -61,9 +64,9 @@ const emit = defineEmits(['resize-start'])