mirror of https://github.com/nocodb/nocodb
Anbarasu
1 day ago
committed by
GitHub
19 changed files with 1889 additions and 1232 deletions
@ -0,0 +1,544 @@ |
|||||||
|
<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 { 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, |
||||||
|
updateFormat, |
||||||
|
} = 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 + 8}px`, |
||||||
|
left: `${startDayIndex * perDayWidth}px`, |
||||||
|
width: `${spanDays * perDayWidth}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 isExpanded = ref(false) |
||||||
|
|
||||||
|
// This method is used to calculate the new start and end date of a record when dragging and dropping |
||||||
|
const calculateNewRow = (event: MouseEvent, updateSideBarData?: boolean) => { |
||||||
|
if (!container.value || !dragRecord.value) return { updatedProperty: [], newRow: null } |
||||||
|
const { width, left } = container.value.getBoundingClientRect() |
||||||
|
|
||||||
|
// Calculate the percentage of the width based on the mouse position |
||||||
|
// This is used to calculate the day index |
||||||
|
|
||||||
|
const relativeX = event.clientX - left |
||||||
|
|
||||||
|
// TODO: @DarkPhoenix2704 handle offset |
||||||
|
// if (dragOffset.value.x) { |
||||||
|
// relativeX -= dragOffset.value.x |
||||||
|
// } |
||||||
|
|
||||||
|
const percentX = Math.max(0, Math.min(1, relativeX / width)) |
||||||
|
|
||||||
|
const fromCol = dragRecord.value.rowMeta.range?.fk_from_col |
||||||
|
const toCol = dragRecord.value.rowMeta.range?.fk_to_col |
||||||
|
|
||||||
|
if (!fromCol) return { updatedProperty: [], newRow: null } |
||||||
|
|
||||||
|
// Calculate the day index based on the percentage of the width |
||||||
|
// The day index is a number between 0 and 6 |
||||||
|
const day = Math.floor(percentX * maxVisibleDays.value) |
||||||
|
|
||||||
|
// Calculate the new start date based on the day index by adding the day index to the start date of the selected date range |
||||||
|
const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day') |
||||||
|
if (!newStartDate) return { updatedProperty: [], newRow: null } |
||||||
|
|
||||||
|
let endDate |
||||||
|
|
||||||
|
const newRow = { |
||||||
|
...dragRecord.value, |
||||||
|
row: { |
||||||
|
...dragRecord.value.row, |
||||||
|
[fromCol.title!]: dayjs(newStartDate).format(updateFormat.value), |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
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 |
||||||
|
|
||||||
|
// Calculate the new end date based on the day index by adding the day index to the start date of the selected date range |
||||||
|
// If the record has an end date, we need to calculate the new end date based on the difference between the start and end date |
||||||
|
// If the record doesn't have an end date, we need to calculate the new end date based on the start date |
||||||
|
// If the record has an end date and no start Date, we set the end date to the start date |
||||||
|
if (fromDate && toDate) { |
||||||
|
endDate = dayjs(newStartDate).add(toDate.diff(fromDate, 'day'), 'day') |
||||||
|
} else if (fromDate && !toDate) { |
||||||
|
endDate = dayjs(newStartDate).endOf('day') |
||||||
|
} else if (!fromDate && toDate) { |
||||||
|
endDate = dayjs(newStartDate).endOf('day') |
||||||
|
} else { |
||||||
|
endDate = newStartDate.clone() |
||||||
|
} |
||||||
|
|
||||||
|
newRow.row[toCol.title!] = dayjs(endDate).format(updateFormat.value) |
||||||
|
updateProperty.push(toCol.title!) |
||||||
|
} |
||||||
|
|
||||||
|
const newPk = extractPkFromRow(newRow.row, meta.value!.columns!) |
||||||
|
if (updateSideBarData) { |
||||||
|
// If the record is being dragged from the sidebar, we need to remove the record from the sidebar data |
||||||
|
// and add the new record to the calendar data |
||||||
|
formattedData.value = [...formattedData.value, newRow] |
||||||
|
formattedSideBarData.value = formattedSideBarData.value.filter((r) => { |
||||||
|
const pk = extractPkFromRow(r.row, meta.value!.columns!) |
||||||
|
return pk !== newPk |
||||||
|
}) |
||||||
|
} else { |
||||||
|
// If the record is being dragged within the calendar, we need to update the record in the calendar data |
||||||
|
formattedData.value = formattedData.value.map((r) => { |
||||||
|
const pk = extractPkFromRow(r.row, meta.value!.columns!) |
||||||
|
return pk === newPk ? newRow : r |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
return { updateProperty, newRow } |
||||||
|
} |
||||||
|
|
||||||
|
const useDebouncedRowUpdate = useDebounceFn((row: Row, updateProperty: string[], isDelete: boolean) => { |
||||||
|
updateRowProperty(row, updateProperty, isDelete) |
||||||
|
}, 500) |
||||||
|
|
||||||
|
// This function is used to calculate the new start and end date of a record when resizing |
||||||
|
const onResize = (event: MouseEvent) => { |
||||||
|
if (!isUIAllowed('dataEdit') || !container.value || !resizeRecord.value) return |
||||||
|
|
||||||
|
const { width, left } = container.value.getBoundingClientRect() |
||||||
|
|
||||||
|
// Calculate the percentage of the width based on the mouse position |
||||||
|
const percentX = (event.clientX - left - window.scrollX) / width |
||||||
|
|
||||||
|
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 * maxVisibleDays.value) |
||||||
|
|
||||||
|
let updateProperty: string[] = [] |
||||||
|
let updateRecord: Row |
||||||
|
|
||||||
|
if (resizeDirection.value === 'right') { |
||||||
|
// Calculate the new end date based on the day index by adding the day index to the start date of the selected date range |
||||||
|
let newEndDate = dayjs(selectedDateRange.value.start).add(day, 'day') |
||||||
|
let newStartDate = ogStartDate.clone() |
||||||
|
|
||||||
|
updateProperty = [toCol.title!] |
||||||
|
|
||||||
|
// If the new end date is before the start date, we need to adjust the end date to the start date |
||||||
|
if (dayjs(newEndDate).isSameOrBefore(ogStartDate, 'day')) { |
||||||
|
newEndDate = ogStartDate.clone().add(1, 'hour') |
||||||
|
newStartDate = ogStartDate.clone().subtract(1, 'hour') |
||||||
|
updateProperty.push(fromCol.title!) |
||||||
|
} |
||||||
|
|
||||||
|
if (!newEndDate.isValid()) return |
||||||
|
|
||||||
|
updateRecord = { |
||||||
|
...resizeRecord.value, |
||||||
|
row: { |
||||||
|
...resizeRecord.value.row, |
||||||
|
[toCol.title!]: newEndDate.format(updateFormat.value), |
||||||
|
[fromCol.title!]: newStartDate.format(updateFormat.value), |
||||||
|
}, |
||||||
|
} |
||||||
|
} else if (resizeDirection.value === 'left') { |
||||||
|
// Calculate the new start date based on the day index by adding the day index to the start date of the selected date range |
||||||
|
let newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day') |
||||||
|
let newEndDate = ogEndDate.clone() |
||||||
|
updateProperty = [fromCol.title!] |
||||||
|
|
||||||
|
// If the new start date is after the end date, we need to adjust the start date to the end date |
||||||
|
if (dayjs(newStartDate).isSameOrAfter(ogEndDate)) { |
||||||
|
newStartDate = dayjs(dayjs(ogEndDate)).clone() |
||||||
|
newEndDate = dayjs(newStartDate).clone().add(1, 'hour') |
||||||
|
updateProperty.push(toCol.title!) |
||||||
|
} |
||||||
|
if (!newStartDate) return |
||||||
|
|
||||||
|
updateRecord = { |
||||||
|
...resizeRecord.value, |
||||||
|
row: { |
||||||
|
...resizeRecord.value.row, |
||||||
|
[fromCol.title!]: dayjs(newStartDate).format(updateFormat.value), |
||||||
|
[toCol.title!]: dayjs(newEndDate).format(updateFormat.value), |
||||||
|
}, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Update the record in the store |
||||||
|
const newPk = extractPkFromRow(updateRecord.row, meta.value!.columns!) |
||||||
|
formattedData.value = formattedData.value.map((r) => { |
||||||
|
const pk = extractPkFromRow(r.row, meta.value!.columns!) |
||||||
|
|
||||||
|
return pk === newPk ? updateRecord : r |
||||||
|
}) |
||||||
|
useDebouncedRowUpdate(updateRecord, updateProperty, false) |
||||||
|
} |
||||||
|
|
||||||
|
const onResizeEnd = () => { |
||||||
|
resizeInProgress.value = false |
||||||
|
resizeDirection.value = null |
||||||
|
resizeRecord.value = null |
||||||
|
document.removeEventListener('mousemove', onResize) |
||||||
|
document.removeEventListener('mouseup', onResizeEnd) |
||||||
|
} |
||||||
|
|
||||||
|
const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => { |
||||||
|
if (!isUIAllowed('dataEdit')) return |
||||||
|
resizeInProgress.value = true |
||||||
|
resizeDirection.value = direction |
||||||
|
resizeRecord.value = record |
||||||
|
document.addEventListener('mousemove', onResize) |
||||||
|
document.addEventListener('mouseup', onResizeEnd) |
||||||
|
} |
||||||
|
|
||||||
|
const onDrag = (event: MouseEvent) => { |
||||||
|
if (!isUIAllowed('dataEdit')) return |
||||||
|
if (!container.value || !dragRecord.value) return |
||||||
|
calculateNewRow(event, false) |
||||||
|
} |
||||||
|
|
||||||
|
const stopDrag = (event: MouseEvent) => { |
||||||
|
event.preventDefault() |
||||||
|
clearTimeout(dragTimeout.value!) |
||||||
|
|
||||||
|
if (!isUIAllowed('dataEdit')) return |
||||||
|
if (!isDragging.value || !container.value || !dragRecord.value) return |
||||||
|
|
||||||
|
const { updateProperty, newRow } = calculateNewRow(event) |
||||||
|
|
||||||
|
if (!newRow) return |
||||||
|
|
||||||
|
// Open drop the record, we reset the opacity of the other records |
||||||
|
const allRecords = document.querySelectorAll('.draggable-record') |
||||||
|
allRecords.forEach((el) => { |
||||||
|
el.style.visibility = '' |
||||||
|
el.style.opacity = '100%' |
||||||
|
}) |
||||||
|
|
||||||
|
if (dragElement.value) { |
||||||
|
dragElement.value.style.boxShadow = 'none' |
||||||
|
dragElement.value = null |
||||||
|
} |
||||||
|
dragRecord.value = undefined |
||||||
|
|
||||||
|
updateRowProperty(newRow, updateProperty, false) |
||||||
|
|
||||||
|
document.removeEventListener('mousemove', onDrag) |
||||||
|
document.removeEventListener('mouseup', stopDrag) |
||||||
|
} |
||||||
|
|
||||||
|
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) |
||||||
|
} |
||||||
|
|
||||||
|
const isSpanningRecordExpanded = () => isExpanded.value |
||||||
|
|
||||||
|
defineExpose({ |
||||||
|
isSpanningRecordExpanded, |
||||||
|
}) |
||||||
|
</script> |
||||||
|
|
||||||
|
<template> |
||||||
|
<div style="z-index: 100" class="sticky flex top-0 bg-white border-b-1 border-gray-200 shadow-sm prevent-select"> |
||||||
|
<div |
||||||
|
:style="{ |
||||||
|
maxWidth: `${activeCalendarView === 'week' ? '64px' : '66px'}`, |
||||||
|
minWidth: `${activeCalendarView === 'week' ? '64px' : '66px'}`, |
||||||
|
}" |
||||||
|
:class="{ |
||||||
|
'p-2': activeCalendarView === 'day', |
||||||
|
'py-2 pr-1': activeCalendarView === 'week', |
||||||
|
}" |
||||||
|
class="text-xs top-0 text-right z-50 !sticky h-full left-0 text-[#6A7184]" |
||||||
|
> |
||||||
|
All day |
||||||
|
|
||||||
|
<NcButton size="xsmall" class="mt-2" type="text" @click="isExpanded = !isExpanded"> |
||||||
|
<GeneralIcon v-if="!isExpanded" class="w-4 h-4 text-gray-800" icon="maximize" /> |
||||||
|
<GeneralIcon v-else-if="isExpanded" class="w-4 h-4 text-gray-800" icon="minimize" /> |
||||||
|
</NcButton> |
||||||
|
</div> |
||||||
|
<div |
||||||
|
ref="container" |
||||||
|
:style="{ |
||||||
|
width: `calc(100% - ${activeCalendarView === 'week' ? '64' : '66'}px)`, |
||||||
|
}" |
||||||
|
:class="{ |
||||||
|
'border-gray-100': activeCalendarView === 'day', |
||||||
|
'border-gray-200': activeCalendarView === 'week', |
||||||
|
'min-h-32 max-h-32 ': isExpanded, |
||||||
|
'h-20': !isExpanded, |
||||||
|
}" |
||||||
|
class="relative border-l-1 transition-all overflow-y-scroll z-30" |
||||||
|
> |
||||||
|
<div class="pointer-events-none h-full inset-y-0 relative"> |
||||||
|
<div |
||||||
|
v-if="maxVisibleDays === 7" |
||||||
|
class="absolute !right-0 h-full bg-gray-100 inset-y-0" |
||||||
|
:style="{ |
||||||
|
width: `${(containerWidth / 7) * 2}px`, |
||||||
|
}" |
||||||
|
></div> |
||||||
|
<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" |
||||||
|
:dragging="resizeRecord?.rowMeta.id === record.rowMeta.id || dragRecord?.rowMeta.id === 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