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

fix(nc-gui): refactor day view

pull/7611/head
DarkPhoenix2704 9 months ago
parent
204469defc
commit
738c6406cc
1 changed files with 88 additions and 188 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. 276
      packages/nc-gui/components/smartsheet/calendar/DayView.vue

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

@ -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<Props>(), {
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<Row[]>(() => {
if (!calendarRange.value) return []
const recordsByRange = []
const recordsByRange: Array<Row> = []
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<CSSStyleDeclaration> = {
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<dayjs.Dayjs>(() => {
const hours = []
for (let i = 0; i < 24; i++) {
@ -148,47 +101,17 @@ const hours = computed<dayjs.Dayjs>(() => {
.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) => {
</script>
<template>
<template v-if="((renderData && renderData.length) || isEmbed) && displayField">
<template v-if="recordsAcrossAllRange && recordsAcrossAllRange.length && displayField">
<div
v-if="calDataType === UITypes.Date"
:class="{
'h-calc(100vh-10.8rem) overflow-y-auto nc-scrollbar-md': !isEmbed,
'border-r-1 h-full border-gray-200 hover:bg-gray-50 ': isEmbed,
'bg-gray-50': isEmbed && dayjs(selectedDate).isSame(renderDate, 'day'),
}"
class="flex flex-col pt-3 !gap-2 h-full w-full"
@click="
() => {
if (renderDate) {
selectedDate = renderDate
}
}
"
class="flex flex-col pt-3 !gap-2 h-full w-full h-calc(100vh-10.8rem) overflow-y-auto nc-scrollbar-md"
>
<LazySmartsheetRow v-for="(record, rowIndex) in recordsAcrossAllRange" :key="rowIndex" :row="record">
<LazySmartsheetCalendarRecordCard
:key="rowIndex"
:date="record.row[record.rowMeta.range.fk_from_col.title]"
:name="record.row[displayField.title]"
:position="getRecordPosition(record)"
:position="record.rowMeta.position"
color="blue"
size="small"
@click="emit('expand-record', record)"
@ -259,30 +170,19 @@ const dropEvent = (event: DragEvent) => {
</div>
<div
v-else-if="calDataType === UITypes.DateTime"
:class="{
'h-calc(100vh-10.8rem) overflow-y-auto nc-scrollbar-md': !isEmbed,
'border-r-1 h-full border-gray-200 ': isEmbed,
}"
class="flex flex-col w-full"
class="flex flex-col w-full h-calc(100vh-10.8rem) overflow-y-auto nc-scrollbar-md"
>
<div ref="container" class="relative" @drop="dropEvent($event)">
<div
v-for="(hour, index) in hours"
:key="index"
:class="{
'!border-brand-500': dayjs(hour).isSame(selectedTime) && !isEmbed,
'!border-brand-500': dayjs(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="
() => {
if (!isEmbed) selectedTime = hour
}
"
@click="selectedTime = hour"
>
<div
v-if="(isEmbed && dayjs(hour).isSame(dayjs(selectedDateRange.start), 'day')) || !isEmbed"
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') }}
</div>
<div></div>
@ -300,14 +200,14 @@ const dropEvent = (event: DragEvent) => {
</NcButton>
</div>
<div
v-for="(record, rowIndex) in renderData"
v-for="(record, rowIndex) in recordsAcrossAllRange"
:key="rowIndex"
:class="{
'ml-3': getRecordPosition(record) === 'leftRounded',
'mr-3': getRecordPosition(record) === 'rightRounded',
'': getRecordPosition(record) === 'rounded',
'ml-3': record.rowMeta.position === 'leftRounded',
'mr-3': record.rowMeta.position === 'rightRounded',
'': record.rowMeta.position === 'rounded',
}"
:style="getRecordStyle(record)"
:style="record.rowMeta.style"
class="absolute"
draggable="true"
@dragstart="dragStart($event, record)"
@ -317,7 +217,7 @@ const dropEvent = (event: DragEvent) => {
<LazySmartsheetCalendarRecordCard
:date="dayjs(record.row[record.rowMeta.range.fk_from_col.title]).format('H:mm')"
:name="record.row[displayField.title]"
:position="getRecordPosition(record)"
:position="record.rowMeta.position"
class="!h-full"
color="blue"
size="small"
@ -328,7 +228,7 @@ const dropEvent = (event: DragEvent) => {
</div>
</div>
</template>
<div v-else-if="!data" class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center">
<div v-else-if="!recordsAcrossAllRange" class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center">
No Records in this day
</div>
</template>

Write Preview
Loading…
Cancel
Save