mirror of https://github.com/nocodb/nocodb
DarkPhoenix2704
6 days ago
9 changed files with 611 additions and 238 deletions
@ -0,0 +1,304 @@ |
|||||||
|
<script setup lang="ts"> |
||||||
|
import dayjs from 'dayjs' |
||||||
|
import type { Row } from '#imports' |
||||||
|
|
||||||
|
const props = defineProps<{ |
||||||
|
records: Row[] |
||||||
|
}>() |
||||||
|
|
||||||
|
const emit = defineEmits(['expandRecord', 'newRecord']) |
||||||
|
|
||||||
|
const container = ref<null | HTMLElement>(null) |
||||||
|
|
||||||
|
const { $e } = useNuxtApp() |
||||||
|
|
||||||
|
const { width: containerWidth } = useElementSize(container) |
||||||
|
|
||||||
|
const meta = inject(MetaInj, ref()) |
||||||
|
|
||||||
|
const { isUIAllowed } = useRoles() |
||||||
|
|
||||||
|
const records = toRef(props, 'records') |
||||||
|
|
||||||
|
const fields = inject(FieldsInj, ref()) |
||||||
|
|
||||||
|
const { fields: _fields } = useViewColumnsOrThrow() |
||||||
|
|
||||||
|
const fieldStyles = computed(() => { |
||||||
|
return (_fields.value ?? []).reduce((acc, field) => { |
||||||
|
acc[field.fk_column_id!] = { |
||||||
|
bold: !!field.bold, |
||||||
|
italic: !!field.italic, |
||||||
|
underline: !!field.underline, |
||||||
|
} |
||||||
|
return acc |
||||||
|
}, {} as Record<string, { bold?: boolean; italic?: boolean; underline?: boolean }>) |
||||||
|
}) |
||||||
|
|
||||||
|
const { |
||||||
|
selectedDate, |
||||||
|
formattedData, |
||||||
|
formattedSideBarData, |
||||||
|
calendarRange, |
||||||
|
updateRowProperty, |
||||||
|
selectedDateRange, |
||||||
|
viewMetaProperties, |
||||||
|
displayField, |
||||||
|
activeCalendarView, |
||||||
|
} = useCalendarViewStoreOrThrow() |
||||||
|
|
||||||
|
const maxVisibleDays = computed(() => { |
||||||
|
return activeCalendarView.value === 'week' ? (viewMetaProperties.value?.hide_weekend ? 5 : 7) : 1 |
||||||
|
}) |
||||||
|
|
||||||
|
// This function is used to find the first suitable row for a record |
||||||
|
// It takes the recordsInDay object, the start day index and the span of the record in days |
||||||
|
// It returns the first suitable row for the entire span of the record |
||||||
|
const findFirstSuitableRow = (recordsInDay: any, startDayIndex: number, spanDays: number) => { |
||||||
|
let row = 0 |
||||||
|
while (true) { |
||||||
|
let isRowSuitable = true |
||||||
|
// Check if the row is suitable for the entire span |
||||||
|
for (let i = 0; i < spanDays; i++) { |
||||||
|
const dayIndex = startDayIndex + i |
||||||
|
if (!recordsInDay[dayIndex]) { |
||||||
|
recordsInDay[dayIndex] = {} |
||||||
|
} |
||||||
|
// If the row is occupied, the entire span is not suitable |
||||||
|
if (recordsInDay[dayIndex][row]) { |
||||||
|
isRowSuitable = false |
||||||
|
break |
||||||
|
} |
||||||
|
} |
||||||
|
// If the row is suitable, return it |
||||||
|
if (isRowSuitable) { |
||||||
|
return row |
||||||
|
} |
||||||
|
row++ |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const viewStartDate = computed(() => { |
||||||
|
if (activeCalendarView.value === 'week') { |
||||||
|
return selectedDateRange.value.start |
||||||
|
} else { |
||||||
|
return selectedDate.value |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
const isInRange = (date: dayjs.Dayjs) => { |
||||||
|
if (activeCalendarView.value === 'day') { |
||||||
|
return date.isSame(selectedDate.value, 'day') |
||||||
|
} else { |
||||||
|
const rangeEndDate = |
||||||
|
maxVisibleDays.value === 5 ? dayjs(selectedDateRange.value.end).subtract(2, 'day') : dayjs(selectedDateRange.value.end) |
||||||
|
|
||||||
|
return ( |
||||||
|
date && date.isBetween(dayjs(selectedDateRange.value.start).startOf('day'), dayjs(rangeEndDate).endOf('day'), 'day', '[]') |
||||||
|
) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const calendarData = computed(() => { |
||||||
|
if (!records.value?.length || !calendarRange.value) return [] |
||||||
|
|
||||||
|
const recordsInDay = Array.from({ length: 7 }, () => ({})) as Record<number, Record<number, boolean>> |
||||||
|
|
||||||
|
const perDayWidth = containerWidth.value / maxVisibleDays.value |
||||||
|
|
||||||
|
const recordsInRange = [] as Row[] |
||||||
|
calendarRange.value.forEach(({ fk_from_col, fk_to_col }) => { |
||||||
|
if (!fk_from_col || !fk_to_col) return |
||||||
|
for (const record of records.value) { |
||||||
|
const id = record.rowMeta.id ?? generateRandomNumber() |
||||||
|
|
||||||
|
const startDate = dayjs(record.row[fk_from_col.title!]) |
||||||
|
const endDate = dayjs(record.row[fk_to_col.title!]) |
||||||
|
|
||||||
|
const startDayIndex = Math.max(startDate.diff(viewStartDate.value, 'day'), 0) |
||||||
|
const endDayIndex = Math.min(endDate.diff(viewStartDate.value, 'day'), maxVisibleDays.value - 1) |
||||||
|
|
||||||
|
const spanDays = endDayIndex - startDayIndex + 1 |
||||||
|
|
||||||
|
const row = findFirstSuitableRow(recordsInDay, startDayIndex, spanDays) |
||||||
|
|
||||||
|
for (let i = 0; i < spanDays; i++) { |
||||||
|
const dayIndex = startDayIndex + i |
||||||
|
recordsInDay[dayIndex][row] = true |
||||||
|
} |
||||||
|
|
||||||
|
const isStartInRange = isInRange(startDate) |
||||||
|
const isEndInRange = isInRange(endDate) |
||||||
|
|
||||||
|
let position = 'none' |
||||||
|
if (isStartInRange && isEndInRange) position = 'rounded' |
||||||
|
else if (isStartInRange) position = 'leftRounded' |
||||||
|
else if (isEndInRange) position = 'rightRounded' |
||||||
|
|
||||||
|
const style: Partial<CSSStyleDeclaration> = { |
||||||
|
top: `${row * 28 + row * 8}px`, |
||||||
|
left: `${startDayIndex * perDayWidth}px`, |
||||||
|
width: `${spanDays * perDayWidth + 8}px`, |
||||||
|
} |
||||||
|
|
||||||
|
recordsInRange.push({ |
||||||
|
...record, |
||||||
|
rowMeta: { |
||||||
|
...record.rowMeta, |
||||||
|
style, |
||||||
|
position, |
||||||
|
range: { fk_from_col, fk_to_col }, |
||||||
|
id, |
||||||
|
}, |
||||||
|
}) |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
return recordsInRange |
||||||
|
}) |
||||||
|
|
||||||
|
const dragElement = ref<HTMLElement | null>(null) |
||||||
|
|
||||||
|
const resizeInProgress = ref(false) |
||||||
|
|
||||||
|
const dragTimeout = ref<ReturnType<typeof setTimeout>>() |
||||||
|
|
||||||
|
const isDragging = ref(false) |
||||||
|
|
||||||
|
const dragRecord = ref<Row>() |
||||||
|
|
||||||
|
const resizeDirection = ref<'right' | 'left' | null>() |
||||||
|
|
||||||
|
const resizeRecord = ref<Row | null>(null) |
||||||
|
|
||||||
|
const hoverRecord = ref<string | null>() |
||||||
|
|
||||||
|
const onResizeStart = (record: Row, direction: 'right' | 'left') => { |
||||||
|
resizeDirection.value = direction |
||||||
|
resizeRecord.value = record |
||||||
|
} |
||||||
|
|
||||||
|
const dragStart = (event: MouseEvent, record: Row) => { |
||||||
|
if (resizeInProgress.value) return |
||||||
|
let target = event.target as HTMLElement |
||||||
|
|
||||||
|
if (activeCalendarView.value === 'day') { |
||||||
|
emit('expandRecord', record) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
isDragging.value = false |
||||||
|
|
||||||
|
dragTimeout.value = setTimeout(() => { |
||||||
|
if (!isUIAllowed('dataEdit')) return |
||||||
|
isDragging.value = true |
||||||
|
while (!target.classList.contains('draggable-record')) { |
||||||
|
target = target.parentElement as HTMLElement |
||||||
|
} |
||||||
|
|
||||||
|
// TODO: Implement dragOffset @DarkPhoenix2704 |
||||||
|
/* dragOffset.value = { |
||||||
|
x: event.clientX - target.getBoundingClientRect().left, |
||||||
|
y: event.clientY - target.getBoundingClientRect().top, |
||||||
|
} */ |
||||||
|
|
||||||
|
const allRecords = document.querySelectorAll('.draggable-record') |
||||||
|
allRecords.forEach((el) => { |
||||||
|
if (!el.getAttribute('data-unique-id').includes(record.rowMeta.id!)) { |
||||||
|
el.style.opacity = '30%' |
||||||
|
} |
||||||
|
}) |
||||||
|
|
||||||
|
isDragging.value = true |
||||||
|
dragElement.value = target |
||||||
|
dragRecord.value = record |
||||||
|
|
||||||
|
// document.addEventListener('mousemove', onDrag) |
||||||
|
// document.addEventListener('mouseup', stopDrag) |
||||||
|
}, 200) |
||||||
|
|
||||||
|
const onMouseUp = () => { |
||||||
|
clearTimeout(dragTimeout.value!) |
||||||
|
document.removeEventListener('mouseup', onMouseUp) |
||||||
|
if (!isDragging.value) { |
||||||
|
emit('expandRecord', record) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
document.addEventListener('mouseup', onMouseUp) |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div style="z-index: 100" class="sticky flex top-0 bg-white border-b-1 border-gray-100 prevent-select"> |
||||||
|
<div |
||||||
|
style="width: 64px" |
||||||
|
:style="{ |
||||||
|
width: `${activeCalendarView === 'week' ? '64px' : '66px'}`, |
||||||
|
}" |
||||||
|
class="text-xs top-0 text-right z-50 !sticky h-full left-0 text-[#6A7184] p-2" |
||||||
|
> |
||||||
|
All day |
||||||
|
</div> |
||||||
|
<div |
||||||
|
ref="container" |
||||||
|
:style="{ |
||||||
|
height: `min(64px)`, |
||||||
|
width: 'calc(100% - 67px)', |
||||||
|
}" |
||||||
|
:class="{ |
||||||
|
'border-gray-100': activeCalendarView === 'day', |
||||||
|
'border-gray-200': activeCalendarView === 'week', |
||||||
|
}" |
||||||
|
class="relative border-l-1 z-30 py-1" |
||||||
|
> |
||||||
|
<div class="pointer-events-none inset-y-0 relative"> |
||||||
|
<template v-for="(record, id) in calendarData" :key="id"> |
||||||
|
<div |
||||||
|
v-if="record.rowMeta.style?.display !== 'none'" |
||||||
|
:data-testid="`nc-calendar-week-record-${record.row[displayField!.title!]}`" |
||||||
|
:data-unique-id="record.rowMeta.id" |
||||||
|
:style="{ |
||||||
|
...record.rowMeta.style, |
||||||
|
}" |
||||||
|
class="absolute group draggable-record pointer-events-auto nc-calendar-week-record-card" |
||||||
|
@mouseleave="hoverRecord = null" |
||||||
|
@mouseover="hoverRecord = record.rowMeta.id" |
||||||
|
@mousedown.stop="dragStart($event, record)" |
||||||
|
> |
||||||
|
<LazySmartsheetRow :row="record"> |
||||||
|
<LazySmartsheetCalendarRecordCard |
||||||
|
:hover="hoverRecord === record.rowMeta.id" |
||||||
|
:position="record.rowMeta.position" |
||||||
|
:record="record" |
||||||
|
:resize="activeCalendarView === 'week'" |
||||||
|
@dblclick.stop="emit('expandRecord', record)" |
||||||
|
@resize-start="onResizeStart" |
||||||
|
> |
||||||
|
<template v-for="(field, index) in fields" :key="index"> |
||||||
|
<LazySmartsheetPlainCell |
||||||
|
v-if="!isRowEmpty(record, field!)" |
||||||
|
v-model="record.row[field!.title!]" |
||||||
|
class="text-xs" |
||||||
|
:column="field" |
||||||
|
:bold="!!fieldStyles[field.id]?.bold" |
||||||
|
:italic="!!fieldStyles[field.id]?.italic" |
||||||
|
:underline="!!fieldStyles[field.id]?.underline" |
||||||
|
/> |
||||||
|
</template> |
||||||
|
</LazySmartsheetCalendarRecordCard> |
||||||
|
</LazySmartsheetRow> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.prevent-select { |
||||||
|
-webkit-user-select: none; |
||||||
|
-ms-user-select: none; |
||||||
|
user-select: none; |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue