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
Split 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
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<Row[]>(() => {
}
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<Row[]>(() => {
...record.rowMeta,
position,
style,
range,
range: range as any,
},
})
}
@ -75,7 +75,7 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
...record,
rowMeta: {
...record.rowMeta,
range,
range: range as any,
style: {
width: '100%',
left: '0',
@ -90,8 +90,8 @@ const recordsAcrossAllRange = computed<Row[]>(() => {
return recordsByRange
})
const hours = computed<dayjs.Dayjs>(() => {
const hours = []
const hours = computed(() => {
const hours: Array<dayjs.Dayjs> = []
for (let i = 0; i < 24; i++) {
hours.push(
dayjs()
@ -101,8 +101,7 @@ const hours = computed<dayjs.Dayjs>(() => {
.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()"
>
<div class="pt-2 px-4 text-xs text-gray-500 font-semibold h-20">
{{ dayjs(hour).format('H A') }}
@ -241,8 +242,8 @@ const dropEvent = (event: DragEvent) => {
<div></div>
<NcButton
:class="{
'!block': dayjs(hour).isSame(selectedTime),
'!hidden': !dayjs(hour).isSame(selectedTime),
'!block': hour.isSame(selectedTime),
'!hidden': !hour.isSame(selectedTime),
}"
class="mr-4 my-auto ml-auto z-10 top-0 bottom-0 !group-hover:block absolute"
size="xsmall"
@ -265,8 +266,8 @@ const dropEvent = (event: DragEvent) => {
>
<LazySmartsheetRow :row="record">
<LazySmartsheetCalendarRecordCard
:date="dayjs(record.row[record.rowMeta.range.fk_from_col.title]).format('H:mm')"
:name="record.row[displayField.title]"
:date="dayjs(record.row[record.rowMeta.range!.fk_from_col.title!]).format('H:mm')"
:name="record.row[displayField!.title!]"
:position="record.rowMeta.position"
:record="record"
: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'
const emit = defineEmits(['new-record', 'expand-record'])
const emit = defineEmits(['new-record', 'expandRecord'])
const {
selectedDate,
@ -37,6 +37,21 @@ const isDayInPagedMonth = (date: Date) => {
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 startOfMonth = dayjs(selectedMonth.value).startOf('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 { 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<Row>()
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,6 +545,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
if (resizeInProgress.value) return
let target = event.target as HTMLElement
dragTimeout.value = setTimeout(() => {
while (!target.classList.contains('draggable-record')) {
target = target.parentElement as HTMLElement
}
@ -558,6 +567,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
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)"
/>
</LazySmartsheetRow>
</div>

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

@ -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<Props>(), {
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'])
<div
v-if="position === 'leftRounded' || (position === 'rounded' && resize)"
: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)">
<component :is="iconMap.drag" class="text-gray-400"></component>
@ -79,9 +82,9 @@ const emit = defineEmits(['resize-start'])
<div
v-if="position === 'rightRounded' || (position === 'rounded' && resize)"
: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)">
<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,
} = useCalendarViewStoreOrThrow()
const container = ref(null)
const container = ref<null | HTMLElement>(null)
const { width: containerWidth } = useElementSize(container)
const meta = inject(MetaInj, ref())
const weekDates = computed(() => {
const startOfWeek = new Date(selectedDateRange.value.start)
const endOfWeek = new Date(selectedDateRange.value.end)
const startOfWeek = new Date(selectedDateRange.value.start!)
const endOfWeek = new Date(selectedDateRange.value.end!)
const datesArray = []
while (startOfWeek.getTime() <= endOfWeek.getTime()) {
datesArray.push(new Date(startOfWeek))
@ -85,15 +85,15 @@ const calendarData = computed(() => {
const toCol = range.fk_to_col
if (fromCol && toCol) {
for (const record of [...formattedData.value].filter((r) => {
const startDate = dayjs(r.row[fromCol.title])
const endDate = dayjs(r.row[toCol.title])
const startDate = dayjs(r.row[fromCol.title!])
const endDate = dayjs(r.row[toCol.title!])
if (!startDate.isValid() || !endDate.isValid()) return false
return !endDate.isBefore(startDate)
})) {
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 endDate = dayjs(record.row[toCol.title])
const endDate = dayjs(record.row[toCol.title!])
if (startDate.isBefore(selectedDateRange.value.start)) {
startDate = dayjs(selectedDateRange.value.start)
@ -162,13 +162,13 @@ const calendarData = computed(() => {
...record,
rowMeta: {
...record.rowMeta,
range,
range: range as any,
position,
id,
style: {
width: widthStyle,
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) {
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 suitableColumn = findFirstSuitableColumn(recordsInDay, startDaysDiff, 1)
recordsInDay[startDaysDiff][suitableColumn] = true
@ -186,13 +186,13 @@ const calendarData = computed(() => {
...record,
rowMeta: {
...record.rowMeta,
range,
range: range as any,
id,
position: 'rounded',
style: {
width: `calc(${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 dragRecord = ref<Row>()
const resizeDirection = ref<'right' | 'left'>()
const resizeRecord = ref<Row>()
const resizeDirection = ref<'right' | 'left' | null>()
const resizeRecord = ref<Row | null>(null)
const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => {
updateRowProperty(row, updateProperty, isDelete)
}, 500)
const onResize = (event: MouseEvent) => {
if (!container.value || !resizeRecord.value) return
const { width, left } = container.value.getBoundingClientRect()
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 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)
if (resizeDirection.value === 'right') {
let newEndDate = dayjs(selectedDateRange.value.start).add(day, 'day')
const updateProperty = [toCol.title!]
const updateProperty = [toCol.title]
if (dayjs(newEndDate).isBefore(ogStartDate)) {
newEndDate = dayjs(ogStartDate).clone()
if (dayjs(newEndDate).isBefore(ogStartDate, 'day')) {
newEndDate = ogStartDate.clone()
}
if (!newEndDate) return
if (!newEndDate.isValid()) return
const newRow = {
...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) => {
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
@ -261,10 +263,10 @@ const onResize = (event: MouseEvent) => {
useDebouncedRowUpdate(newRow, updateProperty, false)
} else if (resizeDirection.value === 'left') {
let newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day')
const updateProperty = [fromCol.title]
const updateProperty = [fromCol.title!]
if (dayjs(newStartDate).isAfter(ogEndDate)) {
newStartDate = dayjs(ogEndDate).clone()
newStartDate = dayjs(dayjs(ogEndDate)).clone()
}
if (!newStartDate) return
@ -272,19 +274,18 @@ const onResize = (event: MouseEvent) => {
...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) => {
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
})
useDebouncedRowUpdate(newRow, updateProperty, false)
}
}
@ -306,6 +307,7 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
}
const onDrag = (event: MouseEvent) => {
if (!container.value || !dragRecord.value) return
const { width, left } = container.value.getBoundingClientRect()
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 toCol = dragRecord.value.rowMeta.range?.fk_to_col
if (!fromCol) return
const day = Math.floor(percentX * 7)
const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day')
@ -324,13 +328,13 @@ const onDrag = (event: MouseEvent) => {
...dragRecord.value,
row: {
...dragRecord.value.row,
[fromCol.title]: dayjs(newStartDate).format('YYYY-MM-DD'),
[fromCol.title!]: dayjs(newStartDate).format('YYYY-MM-DD'),
},
}
if (toCol) {
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 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
if (fromDate && toDate) {
endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
@ -342,13 +346,13 @@ const onDrag = (event: MouseEvent) => {
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) => {
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
@ -357,9 +361,7 @@ const onDrag = (event: MouseEvent) => {
const stopDrag = (event: MouseEvent) => {
event.preventDefault()
if (!isDragging.value) return
dragElement.value.style.boxShadow = 'none'
if (!isDragging.value || !container.value || !dragRecord.value) return
const { width, left } = container.value.getBoundingClientRect()
@ -371,7 +373,7 @@ const stopDrag = (event: MouseEvent) => {
const day = Math.floor(percentX * 7)
const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day')
if (!newStartDate) return
if (!newStartDate || !fromCol) return
let endDate
@ -379,15 +381,15 @@ const stopDrag = (event: MouseEvent) => {
...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) {
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 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
if (fromDate && toDate) {
endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day')
@ -399,18 +401,18 @@ const stopDrag = (event: MouseEvent) => {
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 (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
@ -418,9 +420,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!)
})
}
@ -454,7 +456,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%'
}
@ -464,7 +466,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
isDragging.value = true
dragElement.value = target
draggingId.value = record.rowMeta.id
draggingId.value = record.rowMeta.id!
dragRecord.value = record
document.addEventListener('mousemove', onDrag)
@ -513,10 +515,10 @@ const dragStart = (event: MouseEvent, record: Row) => {
<LazySmartsheetCalendarRecordCard
:date="
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')
? 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')
"
:name="record.row[displayField.title]"
:name="record.row[displayField!.title!]"
:position="record.rowMeta.position"
:record="record"
: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(() => {
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(() => {
@ -597,14 +597,22 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
isSidebarLoading.value = false
}
async function updateRowProperty(toUpdate: Row, property: [], undo = false) {
async function updateRowProperty(toUpdate: Row, property: string[], undo = false) {
try {
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]
return acc
}, {})
},
{},
)
return await $api.dbViewRow.update(
NOCO,
@ -644,7 +652,34 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
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'
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_to_col: ColumnType | null
}
id?: string
position?: 'leftRounded' | 'rightRounded' | 'rounded' | 'none' | string
}
}

Write Preview
Loading…
Cancel
Save