github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

fix: random fixes

pull/7611/head
DarkPhoenix2704 8 months ago
parent
d70abe749b
commit
6a6e7db50e
6 changed files with 187 additions and 129 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 55
      packages/nc-gui/components/smartsheet/calendar/DayView.vue
  2. 54
      packages/nc-gui/components/smartsheet/calendar/MonthView.vue
  3. 11
      packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
  4. 112
      packages/nc-gui/components/smartsheet/calendar/WeekView.vue
  5. 45
      packages/nc-gui/composables/useCalendarViewStore.ts
  6. 1
      packages/nc-gui/lib/types.ts

55
packages/nc-gui/components/smartsheet/calendar/DayView.vue
Unescape View File

@ -29,8 +29,8 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
const endCol = range.fk_to_col const endCol = range.fk_to_col
if (fromCol && endCol) { if (fromCol && endCol) {
for (const record of formattedData.value) { for (const record of formattedData.value) {
const startDate = dayjs(record.row[fromCol.title]) const startDate = dayjs(record.row[fromCol.title!])
const endDate = dayjs(record.row[endCol.title]) const endDate = dayjs(record.row[endCol.title!])
dayRecordCount++ dayRecordCount++
@ -42,9 +42,9 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
} }
let position = 'none' let position = 'none'
const isSelectedDay = (date) => date.isSame(selectedDate.value, 'day') const isSelectedDay = (date: dayjs.Dayjs) => date.isSame(selectedDate.value, 'day')
const isBeforeSelectedDay = (date) => date.isBefore(selectedDate.value, 'day') const isBeforeSelectedDay = (date: dayjs.Dayjs) => date.isBefore(selectedDate.value, 'day')
const isAfterSelectedDay = (date) => date.isAfter(selectedDate.value, 'day') const isAfterSelectedDay = (date: dayjs.Dayjs) => date.isAfter(selectedDate.value, 'day')
if (isSelectedDay(startDate) && isSelectedDay(endDate)) { if (isSelectedDay(startDate) && isSelectedDay(endDate)) {
position = 'rounded' position = 'rounded'
@ -64,7 +64,7 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
...record.rowMeta, ...record.rowMeta,
position, position,
style, style,
range, range: range as any,
}, },
}) })
} }
@ -75,7 +75,7 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
...record, ...record,
rowMeta: { rowMeta: {
...record.rowMeta, ...record.rowMeta,
range, range: range as any,
style: { style: {
width: '100%', width: '100%',
left: '0', left: '0',
@ -90,8 +90,8 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
return recordsByRange return recordsByRange
}) })
const hours = computed<dayjs.Dayjs>(() => { const hours = computed(() => {
const hours = [] const hours: Array<dayjs.Dayjs> = []
for (let i = 0; i < 24; i++) { for (let i = 0; i < 24; i++) {
hours.push( hours.push(
dayjs() dayjs()
@ -101,8 +101,7 @@ const hours = computed<dayjs.Dayjs>(() => {
.millisecond(0) .millisecond(0)
.year(selectedDate.value.getFullYear() || dayjs().year()) .year(selectedDate.value.getFullYear() || dayjs().year())
.month(selectedDate.value.getMonth() || dayjs().month()) .month(selectedDate.value.getMonth() || dayjs().month())
.date(selectedDate.value.getDate() || dayjs().date()) .date(selectedDate.value.getDate() || dayjs().date()),
.toDate(),
) )
} }
return hours return hours
@ -154,6 +153,8 @@ const dropEvent = (event: DragEvent) => {
const fromCol = record.rowMeta.range?.fk_from_col const fromCol = record.rowMeta.range?.fk_from_col
const toCol = record.rowMeta.range?.fk_to_col const toCol = record.rowMeta.range?.fk_to_col
if (!fromCol) return
const newStartDate = dayjs(selectedDate.value) const newStartDate = dayjs(selectedDate.value)
.startOf('day') .startOf('day')
.add(percentY * 1440, 'minutes') .add(percentY * 1440, 'minutes')
@ -164,15 +165,15 @@ const dropEvent = (event: DragEvent) => {
...record, ...record,
row: { row: {
...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) { if (toCol) {
const fromDate = record.row[fromCol.title] ? dayjs(record.row[fromCol.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 const toDate = record.row[toCol.title!] ? dayjs(record.row[toCol.title!]) : null
if (fromDate && toDate) { if (fromDate && toDate) {
endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day') endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
@ -183,17 +184,17 @@ const dropEvent = (event: DragEvent) => {
} else { } else {
endDate = newStartDate.clone() endDate = newStartDate.clone()
} }
newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD') newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD')
updateProperty.push(toCol.title) updateProperty.push(toCol.title!)
} }
if (!newRow) return if (!newRow) return
if (dragElement.value) { if (dragElement.value) {
formattedData.value = formattedData.value.map((r) => { 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 newRow
} }
return r return r
@ -201,9 +202,9 @@ const dropEvent = (event: DragEvent) => {
} else { } else {
formattedData.value = [...formattedData.value, newRow] formattedData.value = [...formattedData.value, newRow]
formattedSideBarData.value = formattedSideBarData.value.filter((r) => { 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" v-for="(hour, index) in hours"
:key="index" :key="index"
:class="{ :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" 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()"
> >
<div class="pt-2 px-4 text-xs text-gray-500 font-semibold h-20"> <div class="pt-2 px-4 text-xs text-gray-500 font-semibold h-20">
{{ dayjs(hour).format('H A') }} {{ dayjs(hour).format('H A') }}
@ -241,8 +242,8 @@ const dropEvent = (event: DragEvent) => {
<div></div> <div></div>
<NcButton <NcButton
:class="{ :class="{
'!block': dayjs(hour).isSame(selectedTime), '!block': hour.isSame(selectedTime),
'!hidden': !dayjs(hour).isSame(selectedTime), '!hidden': !hour.isSame(selectedTime),
}" }"
class="mr-4 my-auto ml-auto z-10 top-0 bottom-0 !group-hover:block absolute" class="mr-4 my-auto ml-auto z-10 top-0 bottom-0 !group-hover:block absolute"
size="xsmall" size="xsmall"
@ -265,8 +266,8 @@ const dropEvent = (event: DragEvent) => {
> >
<LazySmartsheetRow :row="record"> <LazySmartsheetRow :row="record">
<LazySmartsheetCalendarRecordCard <LazySmartsheetCalendarRecordCard
:date="dayjs(record.row[record.rowMeta.range.fk_from_col.title]).format('H:mm')" :date="dayjs(record.row[record.rowMeta.range!.fk_from_col.title!]).format('H:mm')"
:name="record.row[displayField.title]" :name="record.row[displayField!.title!]"
:position="record.rowMeta.position" :position="record.rowMeta.position"
:record="record" :record="record"
:resize="false" :resize="false"

54
packages/nc-gui/components/smartsheet/calendar/MonthView.vue
Unescape View File

@ -4,7 +4,7 @@ import { UITypes } from 'nocodb-sdk'
import type { Row } from '#imports' import type { Row } from '#imports'
const emit = defineEmits(['new-record', 'expand-record']) const emit = defineEmits(['new-record', 'expandRecord'])
const { const {
selectedDate, selectedDate,
@ -37,6 +37,21 @@ const isDayInPagedMonth = (date: Date) => {
return date.getMonth() === selectedMonth.value.getMonth() return date.getMonth() === selectedMonth.value.getMonth()
} }
const dragElement = ref<HTMLElement | null>(null)
const draggingId = ref<string | null>(null)
const resizeInProgress = ref(false)
const isDragging = ref(false)
const dragRecord = ref<Row>()
const dragTimeout = ref(null)
const focusedDate = ref<Date | null>(null)
const resizeDirection = ref<'right' | 'left'>()
const resizeRecord = ref<Row>()
const dates = computed(() => { const dates = computed(() => {
const startOfMonth = dayjs(selectedMonth.value).startOf('month') const startOfMonth = dayjs(selectedMonth.value).startOf('month')
const endOfMonth = dayjs(selectedMonth.value).endOf('month') const endOfMonth = dayjs(selectedMonth.value).endOf('month')
@ -281,18 +296,6 @@ const recordsToDisplay = computed<{
} }
}) })
const dragElement = ref<HTMLElement | null>(null)
const draggingId = ref<string | null>(null)
const resizeInProgress = ref(false)
const isDragging = ref(false)
const dragRecord = ref<Row>()
const selectedRecord = ref<Row>()
const dragTimeout = ref(null)
const onDrag = (event: MouseEvent) => { const onDrag = (event: MouseEvent) => {
const { top, height, width, left } = calendarGridContainer.value.getBoundingClientRect() 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 week = Math.floor(percentY * dates.value.length)
const day = Math.floor(percentX * 7) 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 const newStartDate = dates.value[week] ? dayjs(dates.value[week][day]) : null
if (!newStartDate) return if (!newStartDate) return
@ -346,9 +352,6 @@ const onDrag = (event: MouseEvent) => {
}) })
} }
const resizeDirection = ref<'right' | 'left'>()
const resizeRecord = ref<Row>()
const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => { const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
updateRowProperty(row, updateProperty, isDelete) updateRowProperty(row, updateProperty, isDelete)
}, 500) }, 500)
@ -435,6 +438,7 @@ const onResizeEnd = () => {
} }
const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => { const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => {
if (draggingId.value) return
resizeInProgress.value = true resizeInProgress.value = true
resizeDirection.value = direction resizeDirection.value = direction
resizeRecord.value = record resizeRecord.value = record
@ -444,6 +448,8 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
const stopDrag = (event: MouseEvent) => { const stopDrag = (event: MouseEvent) => {
event.preventDefault() event.preventDefault()
clearTimeout(dragTimeout.value)
if (!isDragging.value) return if (!isDragging.value) return
dragElement.value.style.boxShadow = 'none' dragElement.value.style.boxShadow = 'none'
@ -488,6 +494,7 @@ const stopDrag = (event: MouseEvent) => {
endDate = newStartDate.clone() endDate = newStartDate.clone()
} }
dragRecord.value = null
newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD') newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD')
updateProperty.push(toCol.title) updateProperty.push(toCol.title)
@ -528,6 +535,7 @@ const stopDrag = (event: MouseEvent) => {
} }
updateRowProperty(newRow, updateProperty, false) updateRowProperty(newRow, updateProperty, false)
focusedDate.value = null
document.removeEventListener('mousemove', onDrag) document.removeEventListener('mousemove', onDrag)
document.removeEventListener('mouseup', stopDrag) document.removeEventListener('mouseup', stopDrag)
@ -537,6 +545,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
if (resizeInProgress.value) return if (resizeInProgress.value) return
let target = event.target as HTMLElement let target = event.target as HTMLElement
dragTimeout.value = setTimeout(() => {
while (!target.classList.contains('draggable-record')) { while (!target.classList.contains('draggable-record')) {
target = target.parentElement as HTMLElement target = target.parentElement as HTMLElement
} }
@ -558,6 +567,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
document.addEventListener('mousemove', onDrag) document.addEventListener('mousemove', onDrag)
document.addEventListener('mouseup', stopDrag) document.addEventListener('mouseup', stopDrag)
}, 500)
} }
const selectDate = (date: Date) => { const selectDate = (date: Date) => {
@ -605,7 +615,7 @@ onBeforeUnmount(() => {
v-for="(day, dateIndex) in week" v-for="(day, dateIndex) in week"
:key="`${weekIndex}-${dateIndex}`" :key="`${weekIndex}-${dateIndex}`"
:class="{ :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), '!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" 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" :position="record.rowMeta.position"
:record="record" :record="record"
:resize="!!record.rowMeta.range?.fk_to_col" :resize="!!record.rowMeta.range?.fk_to_col"
@click="selectedRecord = record" :selected="
@dblclick="emit('expand-record', record)" dragRecord
? dragRecord.rowMeta.id === record.rowMeta.id
: resizeRecord
? resizeRecord.rowMeta.id === record.rowMeta.id
: false
"
@resize-start="onResizeStart" @resize-start="onResizeStart"
@dblclick.stop="emit('expand-record', record)"
/> />
</LazySmartsheetRow> </LazySmartsheetRow>
</div> </div>

11
packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
Unescape View File

@ -5,6 +5,7 @@ interface Props {
date?: string date?: string
color?: string color?: string
resize?: boolean resize?: boolean
selected?: boolean
size?: 'small' | 'medium' | 'large' size?: 'small' | 'medium' | 'large'
showDate?: boolean showDate?: boolean
position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none' position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none'
@ -14,6 +15,7 @@ withDefaults(defineProps<Props>(), {
name: '', name: '',
date: '', date: '',
resize: true, resize: true,
selected: false,
color: 'blue', color: 'blue',
size: 'small', size: 'small',
showDate: true, showDate: true,
@ -40,6 +42,7 @@ const emit = defineEmits(['resize-start'])
'bg-pink-50': color === 'pink', 'bg-pink-50': color === 'pink',
'bg-purple-50': color === 'purple', 'bg-purple-50': color === 'purple',
'group-hover:(border-brand-500 border-2)': resize, 'group-hover:(border-brand-500 border-2)': resize,
'border-brand-500 border-2': selected,
}" }"
class="relative group" class="relative group"
> >
@ -61,9 +64,9 @@ const emit = defineEmits(['resize-start'])
<div <div
v-if="position === 'leftRounded' || (position === 'rounded' && resize)" v-if="position === 'leftRounded' || (position === 'rounded' && resize)"
:class="{ :class="{
'!group-hover:(border-brand-500 block border-2 rounded-lg)': resize, '!block border-2 rounded-lg border-brand-500': selected,
}" }"
class="absolute mt-0.6 h-7.1 hidden -left-3 resize" class="absolute mt-0.6 h-7.1 hidden -left-3 resize !group-hover:(border-brand-500 block border-2 rounded-lg)"
> >
<NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'left', $event, record)"> <NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'left', $event, record)">
<component :is="iconMap.drag" class="text-gray-400"></component> <component :is="iconMap.drag" class="text-gray-400"></component>
@ -79,9 +82,9 @@ const emit = defineEmits(['resize-start'])
<div <div
v-if="position === 'rightRounded' || (position === 'rounded' && resize)" v-if="position === 'rightRounded' || (position === 'rounded' && resize)"
:class="{ :class="{
'!group-hover:(border-brand-500 border-2 block rounded-lg)': resize, '!block border-2 rounded-lg border-brand-500': selected,
}" }"
class="absolute mt-0.6 hidden h-7.1 -right-3 border-1 resize" class="absolute mt-0.6 hidden h-7.1 -right-3 border-1 resize !group-hover:(border-brand-500 border-2 block rounded-lg)"
> >
<NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'right', $event, record)"> <NcButton size="xsmall" type="secondary" @mousedown.stop="emit('resize-start', 'right', $event, record)">
<component :is="iconMap.drag" class="text-gray-400"></component> <component :is="iconMap.drag" class="text-gray-400"></component>

112
packages/nc-gui/components/smartsheet/calendar/WeekView.vue
Unescape View File

@ -16,15 +16,15 @@ const {
updateRowProperty, updateRowProperty,
} = useCalendarViewStoreOrThrow() } = useCalendarViewStoreOrThrow()
const container = ref(null) const container = ref<null | HTMLElement>(null)
const { width: containerWidth } = useElementSize(container) const { width: containerWidth } = useElementSize(container)
const meta = inject(MetaInj, ref()) const meta = inject(MetaInj, ref())
const weekDates = computed(() => { const weekDates = computed(() => {
const startOfWeek = new Date(selectedDateRange.value.start) const startOfWeek = new Date(selectedDateRange.value.start!)
const endOfWeek = new Date(selectedDateRange.value.end) const endOfWeek = new Date(selectedDateRange.value.end!)
const datesArray = [] const datesArray = []
while (startOfWeek.getTime() <= endOfWeek.getTime()) { while (startOfWeek.getTime() <= endOfWeek.getTime()) {
datesArray.push(new Date(startOfWeek)) datesArray.push(new Date(startOfWeek))
@ -85,15 +85,15 @@ const calendarData = computed(() => {
const toCol = range.fk_to_col const toCol = range.fk_to_col
if (fromCol && toCol) { if (fromCol && toCol) {
for (const record of [...formattedData.value].filter((r) => { for (const record of [...formattedData.value].filter((r) => {
const startDate = dayjs(r.row[fromCol.title]) const startDate = dayjs(r.row[fromCol.title!])
const endDate = dayjs(r.row[toCol.title]) const endDate = dayjs(r.row[toCol.title!])
if (!startDate.isValid() || !endDate.isValid()) return false if (!startDate.isValid() || !endDate.isValid()) return false
return !endDate.isBefore(startDate) return !endDate.isBefore(startDate)
})) { })) {
const id = record.row.id ?? getRandomNumbers() const id = record.row.id ?? getRandomNumbers()
let startDate = dayjs(record.row[fromCol.title]) let startDate = dayjs(record.row[fromCol.title!])
const ogStartDate = startDate.clone() const ogStartDate = startDate.clone()
const endDate = dayjs(record.row[toCol.title]) const endDate = dayjs(record.row[toCol.title!])
if (startDate.isBefore(selectedDateRange.value.start)) { if (startDate.isBefore(selectedDateRange.value.start)) {
startDate = dayjs(selectedDateRange.value.start) startDate = dayjs(selectedDateRange.value.start)
@ -162,13 +162,13 @@ const calendarData = computed(() => {
...record, ...record,
rowMeta: { rowMeta: {
...record.rowMeta, ...record.rowMeta,
range, range: range as any,
position, position,
id, id,
style: { style: {
width: widthStyle, width: widthStyle,
left: `${startDaysDiff * perDayWidth}px`, left: `${startDaysDiff * perDayWidth}px`,
top: `${suitableColumn * 50}px`, top: `${suitableColumn * 40}px`,
}, },
}, },
}) })
@ -177,7 +177,7 @@ const calendarData = computed(() => {
for (const record of formattedData.value) { for (const record of formattedData.value) {
const id = record.row.id ?? getRandomNumbers() const id = record.row.id ?? getRandomNumbers()
const startDate = dayjs(record.row[fromCol.title]) const startDate = dayjs(record.row[fromCol.title!])
const startDaysDiff = Math.max(startDate.diff(selectedDateRange.value.start, 'day'), 0) const startDaysDiff = Math.max(startDate.diff(selectedDateRange.value.start, 'day'), 0)
const suitableColumn = findFirstSuitableColumn(recordsInDay, startDaysDiff, 1) const suitableColumn = findFirstSuitableColumn(recordsInDay, startDaysDiff, 1)
recordsInDay[startDaysDiff][suitableColumn] = true recordsInDay[startDaysDiff][suitableColumn] = true
@ -186,13 +186,13 @@ const calendarData = computed(() => {
...record, ...record,
rowMeta: { rowMeta: {
...record.rowMeta, ...record.rowMeta,
range, range: range as any,
id, id,
position: 'rounded', position: 'rounded',
style: { style: {
width: `calc(${perDayWidth}px)`, width: `calc(${perDayWidth}px)`,
left: `${startDaysDiff * perDayWidth}px`, left: `${startDaysDiff * perDayWidth}px`,
top: `${suitableColumn * 50}px`, top: `${suitableColumn * 40}px`,
}, },
}, },
}) })
@ -212,48 +212,50 @@ const resizeInProgress = ref(false)
const isDragging = ref(false) const isDragging = ref(false)
const dragRecord = ref<Row>() const dragRecord = ref<Row>()
const resizeDirection = ref<'right' | 'left'>() const resizeDirection = ref<'right' | 'left' | null>()
const resizeRecord = ref<Row>() const resizeRecord = ref<Row | null>(null)
const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => { const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
updateRowProperty(row, updateProperty, isDelete) updateRowProperty(row, updateProperty, isDelete)
}, 500) }, 500)
const onResize = (event: MouseEvent) => { const onResize = (event: MouseEvent) => {
if (!container.value || !resizeRecord.value) return
const { width, left } = container.value.getBoundingClientRect() const { width, left } = container.value.getBoundingClientRect()
const percentX = (event.clientX - left - window.scrollX) / width 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 fromCol = resizeRecord.value.rowMeta.range?.fk_from_col const fromCol = resizeRecord.value.rowMeta.range?.fk_from_col
const toCol = resizeRecord.value.rowMeta.range?.fk_to_col const toCol = resizeRecord.value.rowMeta.range?.fk_to_col
if (!fromCol || !toCol) return
const ogEndDate = dayjs(resizeRecord.value.row[toCol.title!])
const ogStartDate = dayjs(resizeRecord.value.row[fromCol.title!])
const day = Math.floor(percentX * 7) const day = Math.floor(percentX * 7)
if (resizeDirection.value === 'right') { if (resizeDirection.value === 'right') {
let newEndDate = dayjs(selectedDateRange.value.start).add(day, 'day') let newEndDate = dayjs(selectedDateRange.value.start).add(day, 'day')
const updateProperty = [toCol.title!]
const updateProperty = [toCol.title] if (dayjs(newEndDate).isBefore(ogStartDate, 'day')) {
if (dayjs(newEndDate).isBefore(ogStartDate)) { newEndDate = ogStartDate.clone()
newEndDate = dayjs(ogStartDate).clone()
} }
if (!newEndDate) return if (!newEndDate.isValid()) return
const newRow = { const newRow = {
...resizeRecord.value, ...resizeRecord.value,
row: { row: {
...resizeRecord.value.row, ...resizeRecord.value.row,
[toCol.title]: dayjs(newEndDate).format('YYYY-MM-DD'), [toCol.title!]: newEndDate.format('YYYY-MM-DD'),
}, },
} }
formattedData.value = formattedData.value.map((r) => { 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 newRow
} }
return r return r
@ -261,10 +263,10 @@ const onResize = (event: MouseEvent) => {
useDebouncedRowUpdate(newRow, updateProperty, false) useDebouncedRowUpdate(newRow, updateProperty, false)
} else if (resizeDirection.value === 'left') { } else if (resizeDirection.value === 'left') {
let newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day') let newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day')
const updateProperty = [fromCol.title] const updateProperty = [fromCol.title!]
if (dayjs(newStartDate).isAfter(ogEndDate)) { if (dayjs(newStartDate).isAfter(ogEndDate)) {
newStartDate = dayjs(ogEndDate).clone() newStartDate = dayjs(dayjs(ogEndDate)).clone()
} }
if (!newStartDate) return if (!newStartDate) return
@ -272,19 +274,18 @@ const onResize = (event: MouseEvent) => {
...resizeRecord.value, ...resizeRecord.value,
row: { row: {
...resizeRecord.value.row, ...resizeRecord.value.row,
[fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'), [fromCol.title!]: dayjs(newStartDate).format('YYYY-MM-DD'),
}, },
} }
formattedData.value = formattedData.value.map((r) => { 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 newRow
} }
return r return r
}) })
useDebouncedRowUpdate(newRow, updateProperty, false) useDebouncedRowUpdate(newRow, updateProperty, false)
} }
} }
@ -306,6 +307,7 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
} }
const onDrag = (event: MouseEvent) => { const onDrag = (event: MouseEvent) => {
if (!container.value || !dragRecord.value) return
const { width, left } = container.value.getBoundingClientRect() const { width, left } = container.value.getBoundingClientRect()
const percentX = (event.clientX - left - window.scrollX) / width const percentX = (event.clientX - left - window.scrollX) / width
@ -313,6 +315,8 @@ const onDrag = (event: MouseEvent) => {
const fromCol = dragRecord.value.rowMeta.range?.fk_from_col const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
const toCol = dragRecord.value.rowMeta.range?.fk_to_col const toCol = dragRecord.value.rowMeta.range?.fk_to_col
if (!fromCol) return
const day = Math.floor(percentX * 7) const day = Math.floor(percentX * 7)
const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day') const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day')
@ -324,13 +328,13 @@ const onDrag = (event: MouseEvent) => {
...dragRecord.value, ...dragRecord.value,
row: { row: {
...dragRecord.value.row, ...dragRecord.value.row,
[fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'), [fromCol.title!]: dayjs(newStartDate).format('YYYY-MM-DD'),
}, },
} }
if (toCol) { if (toCol) {
const fromDate = dragRecord.value.row[fromCol.title] ? dayjs(dragRecord.value.row[fromCol.title]) : null const fromDate = dragRecord.value.row[fromCol.title!] ? dayjs(dragRecord.value.row[fromCol.title!]) : null
const toDate = dragRecord.value.row[toCol.title] ? dayjs(dragRecord.value.row[toCol.title]) : null const toDate = dragRecord.value.row[toCol.title!] ? dayjs(dragRecord.value.row[toCol.title!]) : null
if (fromDate && toDate) { if (fromDate && toDate) {
endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day') endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
@ -342,13 +346,13 @@ const onDrag = (event: MouseEvent) => {
endDate = newStartDate.clone() endDate = newStartDate.clone()
} }
newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD') newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD')
} }
formattedData.value = formattedData.value.map((r) => { 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 newRow
} }
return r return r
@ -357,9 +361,7 @@ const onDrag = (event: MouseEvent) => {
const stopDrag = (event: MouseEvent) => { const stopDrag = (event: MouseEvent) => {
event.preventDefault() event.preventDefault()
if (!isDragging.value) return if (!isDragging.value || !container.value || !dragRecord.value) return
dragElement.value.style.boxShadow = 'none'
const { width, left } = container.value.getBoundingClientRect() const { width, left } = container.value.getBoundingClientRect()
@ -371,7 +373,7 @@ const stopDrag = (event: MouseEvent) => {
const day = Math.floor(percentX * 7) const day = Math.floor(percentX * 7)
const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day') const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day')
if (!newStartDate) return if (!newStartDate || !fromCol) return
let endDate let endDate
@ -379,15 +381,15 @@ const stopDrag = (event: MouseEvent) => {
...dragRecord.value, ...dragRecord.value,
row: { row: {
...dragRecord.value.row, ...dragRecord.value.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) { if (toCol) {
const fromDate = dragRecord.value.row[fromCol.title] ? dayjs(dragRecord.value.row[fromCol.title]) : null const fromDate = dragRecord.value.row[fromCol.title!] ? dayjs(dragRecord.value.row[fromCol.title!]) : null
const toDate = dragRecord.value.row[toCol.title] ? dayjs(dragRecord.value.row[toCol.title]) : null const toDate = dragRecord.value.row[toCol.title!] ? dayjs(dragRecord.value.row[toCol.title!]) : null
if (fromDate && toDate) { if (fromDate && toDate) {
endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day') endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
@ -399,18 +401,18 @@ const stopDrag = (event: MouseEvent) => {
endDate = newStartDate.clone() endDate = newStartDate.clone()
} }
newRow.row[toCol.title] = dayjs(endDate).format('YYYY-MM-DD') newRow.row[toCol.title!] = dayjs(endDate).format('YYYY-MM-DD')
updateProperty.push(toCol.title) updateProperty.push(toCol.title!)
} }
if (!newRow) return if (!newRow) return
if (dragElement.value) { if (dragElement.value) {
formattedData.value = formattedData.value.map((r) => { 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 newRow
} }
return r return r
@ -418,9 +420,9 @@ const stopDrag = (event: MouseEvent) => {
} else { } else {
formattedData.value = [...formattedData.value, newRow] formattedData.value = [...formattedData.value, newRow]
formattedSideBarData.value = formattedSideBarData.value.filter((r) => { 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!)
}) })
} }
@ -454,7 +456,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
const allRecords = document.querySelectorAll('.draggable-record') const allRecords = document.querySelectorAll('.draggable-record')
allRecords.forEach((el) => { 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.visibility = 'hidden'
el.style.opacity = '30%' el.style.opacity = '30%'
} }
@ -464,7 +466,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
isDragging.value = true isDragging.value = true
dragElement.value = target dragElement.value = target
draggingId.value = record.rowMeta.id draggingId.value = record.rowMeta.id!
dragRecord.value = record dragRecord.value = record
document.addEventListener('mousemove', onDrag) document.addEventListener('mousemove', onDrag)
@ -513,10 +515,10 @@ const dragStart = (event: MouseEvent, record: Row) => {
<LazySmartsheetCalendarRecordCard <LazySmartsheetCalendarRecordCard
:date=" :date="
calDataType === UITypes.DateTime calDataType === UITypes.DateTime
? dayjs(record.row[record.rowMeta.range.fk_from_col.title]).format('DD-MM-YYYY HH:MM') ? dayjs(record.row[record.rowMeta.range!.fk_from_col.title!]).format('DD-MM-YYYY HH:MM')
: dayjs(record.row[record.rowMeta.range.fk_from_col.title]).format('DD-MM-YYYY') : dayjs(record.row[record.rowMeta.range!.fk_from_col.title!]).format('DD-MM-YYYY')
" "
:name="record.row[displayField.title]" :name="record.row[displayField!.title!]"
:position="record.rowMeta.position" :position="record.rowMeta.position"
:record="record" :record="record"
:resize="!!record.rowMeta.range?.fk_to_col" :resize="!!record.rowMeta.range?.fk_to_col"

45
packages/nc-gui/composables/useCalendarViewStore.ts
Unescape View File

@ -106,7 +106,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
const calDataType = computed(() => { const calDataType = computed(() => {
if (!calendarRange.value || !calendarRange.value[0]) return null if (!calendarRange.value || !calendarRange.value[0]) return null
return calendarRange.value[0]!.fk_from_col.uidt return calendarRange.value[0]!.fk_from_col!.uidt
}) })
const sideBarFilter = computed(() => { const sideBarFilter = computed(() => {
@ -597,14 +597,22 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
isSidebarLoading.value = false isSidebarLoading.value = false
} }
async function updateRowProperty(toUpdate: Row, property: [], undo = false) { async function updateRowProperty(toUpdate: Row, property: string[], undo = false) {
try { try {
const id = extractPkFromRow(toUpdate.row, meta?.value?.columns as ColumnType[]) const id = extractPkFromRow(toUpdate.row, meta?.value?.columns as ColumnType[])
const updateObj = property.reduce((acc, curr) => { const updateObj = property.reduce(
(
acc: {
[x: string]: string
},
curr,
) => {
acc[curr] = toUpdate.row[curr] acc[curr] = toUpdate.row[curr]
return acc return acc
}, {}) },
{},
)
return await $api.dbViewRow.update( return await $api.dbViewRow.update(
NOCO, NOCO,
@ -644,7 +652,34 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
await Promise.all([loadCalendarData(), loadSidebarData()]) await Promise.all([loadCalendarData(), loadSidebarData()])
}) })
watch(activeCalendarView, async () => { watch(activeCalendarView, async (value, oldValue) => {
if (oldValue === 'week') {
pageDate.value = selectedDate.value
selectedDate.value = selectedDateRange.value.start!
selectedMonth.value = selectedDateRange.value.start!
} else if (oldValue === 'month') {
selectedDate.value = selectedMonth.value
pageDate.value = selectedDate.value
selectedDateRange.value = {
start: dayjs(selectedDate.value).startOf('week').toDate(),
end: dayjs(selectedDate.value).endOf('week').toDate(),
}
} else if (oldValue === 'day') {
pageDate.value = selectedDate.value
selectedMonth.value = selectedDate.value
selectedDateRange.value = {
start: dayjs(selectedDate.value).startOf('week').toDate(),
end: dayjs(selectedDate.value).endOf('week').toDate(),
}
} else if (oldValue === 'year') {
selectedMonth.value = selectedDate.value
pageDate.value = selectedDate.value
selectedDateRange.value = {
start: dayjs(selectedDate.value).startOf('week').toDate(),
end: dayjs(selectedDate.value).endOf('week').toDate(),
}
}
sideBarFilterOption.value = activeCalendarView.value ?? 'allRecords' sideBarFilterOption.value = activeCalendarView.value ?? 'allRecords'
await Promise.all([loadCalendarData(), loadSidebarData()]) await Promise.all([loadCalendarData(), loadSidebarData()])
}) })

1
packages/nc-gui/lib/types.ts
Unescape View File

@ -69,6 +69,7 @@ interface Row {
fk_from_col: ColumnType fk_from_col: ColumnType
fk_to_col: ColumnType | null fk_to_col: ColumnType | null
} }
id?: string
position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none' | string position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none' | string
} }
} }

Write Preview
Loading…
Cancel
Save