+
+
+
+
+
-
-
+
+
-
-
+
+
+
+
+
-
+
-
+
-
+
-
-
-
-
-
diff --git a/packages/nc-gui/components/smartsheet/Kanban.vue b/packages/nc-gui/components/smartsheet/Kanban.vue
index c2f1fb691a..5f888edebb 100644
--- a/packages/nc-gui/components/smartsheet/Kanban.vue
+++ b/packages/nc-gui/components/smartsheet/Kanban.vue
@@ -1,5 +1,7 @@
-
-
-
-
+
@@ -243,17 +259,25 @@ watch(
-
-
+
-
+
@@ -261,7 +285,8 @@ watch(
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+ -
-
-
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
-
+
-
+
+
+
+
+
+
+
+
- {{ stack.title ?? 'uncategorized' }}
-
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
@@ -729,17 +1120,20 @@ const getRowId = (row: RowType) => {
:row="expandedFormRow"
:state="expandedFormRowState"
:meta="meta"
+ :load-row="!isPublic"
:view="view"
+ @cancel="removeRowFromUncategorizedStack"
/>
) => {
const rowId = extractPkFromRow(row.row, meta.value!.columns!)
- if (rowId) {
+
+ if (rowId && !isPublic.value) {
router.push({
query: {
...route.query,
@@ -236,6 +237,7 @@ const count = computed(() => paginationData.value.totalRows)
v-if="expandedFormRow && expandedFormDlg"
v-model="expandedFormDlg"
:row="expandedFormRow"
+ :load-row="!isPublic"
:state="expandedFormRowState"
:meta="meta"
:view="view"
@@ -245,9 +247,11 @@ const count = computed(() => paginationData.value.totalRows)
diff --git a/packages/nc-gui/components/smartsheet/SharedMapMarkerPopup.vue b/packages/nc-gui/components/smartsheet/SharedMapMarkerPopup.vue
index 2b1dc7e4f2..ca081e18fd 100644
--- a/packages/nc-gui/components/smartsheet/SharedMapMarkerPopup.vue
+++ b/packages/nc-gui/components/smartsheet/SharedMapMarkerPopup.vue
@@ -15,13 +15,6 @@ const { loadData } = useViewData(meta, view)
provide(IsFormInj, ref(false))
provide(IsGridInj, ref(false))
-const isRowEmpty = (record: any, col: any) => {
- const val = record.row[col.title]
- if (!val) return true
-
- return Array.isArray(val) && val.length === 0
-}
-
reloadViewDataHook?.on(async () => {
await loadData()
})
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index 7fbcdede43..b550838b5f 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -1,8 +1,6 @@
-
+
-
-
-
+
+
+
-
-
+
+
-
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
-
+
+
+
-
-
-
-
-
-
- -
+
+
+
+
+
+
+
+ {{ $t('general.empty') }} {{ $t('general.stack').toLowerCase() }}
+
+
+ {{ $t('title.looksLikeThisStackIsEmpty') }}
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
-
-
+
+ {{ formattedData.get(stack.title)!.length }}/{{ countByStack.get(stack.title) ?? 0 }}
+ {{ countByStack.get(stack.title) !== 1 ? $t('objects.records') : $t('objects.record') }}
+
+
+
-
+
-
+
+
+
+
+
+
+
-
+
+
+
+
+ {{ stack.title ?? 'Uncategorized' }}
+
+
+ {{ stack.title ?? 'Uncategorized' }}
+
+
+
+
+
+
-
+
+
+
+
-
+
+
+
+
+
+
+ {{ formattedData.get(stack.title)!.length }}
+ {{ countByStack.get(stack.title) !== 1 ? $t('objects.records') : $t('objects.record') }}
+
-
-
- {{ formattedData.get(stack.title)!.length }} / {{ countByStack.get(stack.title) ?? 0 }}
- {{ countByStack.get(stack.title) !== 1 ? $t('objects.records') : $t('objects.record') }}
+
+
+
+
+
+
+
-
-
-
-
-
-
-
+
+
+
+
+
-
- Add Record
+
+
+
+
-
-
+
+
-
-
-
-
-
-
+
+
-
- {{ stack.title ?? 'uncategorized' }}
-
-
- {{ formattedData.get(stack.title)!.length }} / {{ countByStack.get(stack.title) }}
- {{ countByStack.get(stack.title) !== 1 ? $t('objects.records') : $t('objects.record') }}
diff --git a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
index 463ea3dc11..5701131615 100644
--- a/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
@@ -26,6 +26,8 @@ const meta = inject(MetaInj, ref())
const fields = inject(FieldsInj, ref())
+const isPublic = inject(IsPublicInj, ref(false))
+
const { fields: _fields } = useViewColumnsOrThrow()
const fieldStyles = computed(() => {
@@ -56,6 +58,29 @@ const hours = computed(() => {
return hours
})
+const currTime = ref(dayjs())
+
+const overlayTop = computed(() => {
+ const perRecordHeight = 52
+
+ const minutes = currTime.value.minute() + currTime.value.hour() * 60
+
+ const top = (perRecordHeight / 60) * minutes
+
+ return top
+})
+
+onMounted(() => {
+ const intervalId = setInterval(() => {
+ currTime.value = dayjs()
+ }, 10000) // 10000 ms = 10 seconds
+
+ // Clean up the interval when the component is unmounted
+ onUnmounted(() => {
+ clearInterval(intervalId)
+ })
+})
+
const calculateNewDates = useMemoize(
({
endDate,
@@ -166,12 +191,21 @@ const getMaxOverlaps = ({
return maxOverlaps
}
- let maxOverlaps = 1
const id = row.rowMeta.id as string
if (graph.has(id)) {
- maxOverlaps = dfs(id)
+ dfs(id)
}
- return maxOverlaps
+
+ const overlapIterations: Array = []
+
+ columnArray
+ .flat()
+ .filter((record) => visited.has(record.rowMeta.id!))
+ .forEach((record) => {
+ overlapIterations.push(record.rowMeta.overLapIteration!)
+ })
+
+ return Math.max(...overlapIterations)
}
const recordsAcrossAllRange = computed<{
@@ -246,8 +280,8 @@ const recordsAcrossAllRange = computed<{
const heightInPixels = Math.max(endDate.diff(startDate, 'minute'), perRecordHeight)
const style: Partial = {
- height: `${heightInPixels - 8}px`,
- top: `${topInPixels + 4}px`,
+ height: `${heightInPixels - 2}px`,
+ top: `${topInPixels + 1}px`,
}
// This property is used to determine which side the record should be rounded. It can be top, bottom, both or none
@@ -298,8 +332,8 @@ const recordsAcrossAllRange = computed<{
const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 52, perRecordHeight)
style = {
...style,
- top: `${topInPixels + 4}px`,
- height: `${heightInPixels - 8}px`,
+ top: `${topInPixels + 1}px`,
+ height: `${heightInPixels - 2}px`,
}
recordsByRange.push({
@@ -681,13 +715,13 @@ const stopDrag = (event: MouseEvent) => {
}
const dragStart = (event: MouseEvent, record: Row) => {
- if (!isUIAllowed('dataEdit')) return
let target = event.target as HTMLElement
isDragging.value = false
// We use a timeout to determine if the user is dragging or clicking on the record
dragTimeout.value = setTimeout(() => {
+ if (!isUIAllowed('dataEdit')) return
isDragging.value = true
while (!target.classList.contains('draggable-record')) {
target = target.parentElement as HTMLElement
@@ -868,6 +902,24 @@ watch(
data-testid="nc-calendar-day-view"
@drop="dropEvent"
>
+
@@ -944,12 +996,12 @@ watch(
-
+
+
+
+ {{ dayjs().format('hh:mm A') }}
+
+
+
+
+
{{ day }}
@@ -690,50 +727,61 @@ const addRecord = (date: dayjs.Dayjs) => {
style="height: calc(100% - 1.59rem)"
@drop="dropEvent"
>
-
-
-
- + {{ recordsToDisplay.count[dayjs(day).format('YYYY-MM-DD')]?.overflowCount }}
-
-
+
-
-
-
-
+
+
-
-
- {{ day.format('DD') }}
-
-
+
+
+
+ {{ day.format('DD') }}
+
+
+
+
-
- Select date field to add
-
+
+
+
+
+
+
+ Select date field to add
+
-
-
-
-
-
+
+
+
+
+
+
-
- {{ dayjs(day).format('DD') }}
+
+ {{ dayjs(day).format('DD') }}
-
-
@@ -825,7 +874,6 @@ const addRecord = (date: dayjs.Dayjs) => {
:resize="!!record.rowMeta.range?.fk_to_col && isUIAllowed('dataEdit')"
:selected="dragRecord?.rowMeta?.id === record.rowMeta.id || resizeRecord?.rowMeta?.id === record.rowMeta.id"
@resize-start="onResizeStart"
- @dblclick.stop="emit('expandRecord', record)"
>
@@ -857,4 +905,8 @@ const addRecord = (date: dayjs.Dayjs) => {
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
+
+.grid-cols-5 {
+ grid-template-columns: repeat(5, minmax(0, 1fr));
+}
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
index 35330889e1..cdaa03a3ba 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideMenu.vue
@@ -9,6 +9,10 @@ const props = defineProps<{
const emit = defineEmits(['expandRecord', 'newRecord'])
+interface Attachment {
+ url: string
+}
+
const INFINITY_SCROLL_THRESHOLD = 100
const { isUIAllowed } = useRoles()
@@ -21,6 +25,10 @@ const { height } = useWindowSize()
const meta = inject(MetaInj, ref())
+const { fields } = useViewColumnsOrThrow()
+
+const { getPossibleAttachmentSrc } = useAttachment()
+
const { t } = useI18n()
const {
@@ -45,6 +53,23 @@ const {
const sideBarListRef = ref(null)
+const coverImageColumns: any = computed(() => {
+ if (!fields.value || !meta.value?.columns) return
+ return meta.value.columns.find((c) => c.uidt === UITypes.Attachment && fields.value?.find((f) => f.fk_column_id === c.id).show)
+})
+
+const attachments = (record: any): Attachment[] => {
+ const col = coverImageColumns.value
+ try {
+ if (col?.title && record.row[col.title]) {
+ return typeof record.row[col.title] === 'string' ? JSON.parse(record.row[col.title]) : record.row[col.title]
+ }
+ return []
+ } catch (e) {
+ return []
+ }
+}
+
const pushToArray = (arr: Array, record: Row, range) => {
arr.push({
...record,
@@ -381,9 +406,14 @@ onClickOutside(searchRef, toggleSearch)
>
{{ $t('objects.records') }}
-
+
-
+
{{ option.label }}
@@ -429,7 +459,7 @@ onClickOutside(searchRef, toggleSearch)
v-if="!showSearch"
data-testid="nc-calendar-sidebar-search-btn"
size="small"
- class="!h-7"
+ class="!h-7 !rounded-md"
type="secondary"
@click="clickSearch"
>
@@ -444,7 +474,7 @@ onClickOutside(searchRef, toggleSearch)
v-if="isUIAllowed('dataEdit') && props.visible"
v-e="['c:calendar:calendar-sidemenu-new-record-btn']"
data-testid="nc-calendar-side-menu-new-btn"
- class="!h-7"
+ class="!h-7 !rounded-md"
size="small"
type="secondary"
@click="newRecord"
@@ -497,8 +527,8 @@ onClickOutside(searchRef, toggleSearch)
:from-date="
record.rowMeta.range?.fk_from_col
? calDataType === UITypes.Date
- ? dayjs(record.row[record.rowMeta.range.fk_from_col.title!]).format('DD MMM')
- : dayjs(record.row[record.rowMeta.range.fk_from_col.title!]).format('DD MMM • HH:mm A')
+ ? dayjs(record.row[record.rowMeta.range.fk_from_col.title!]).format('D MMM')
+ : dayjs(record.row[record.rowMeta.range.fk_from_col.title!]).format('D MMM • h:mm a')
: null
"
:invalid="
@@ -521,6 +551,50 @@ onClickOutside(searchRef, toggleSearch)
@dragstart="dragStart($event, record)"
@dragover.prevent
>
+
+
+
+
+
+
-
+
diff --git a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
index bdbd9344b3..3a5b4e1394 100644
--- a/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/SideRecordCard.vue
@@ -16,17 +16,7 @@ const props = withDefaults(defineProps(), {
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
(null)
@@ -41,12 +53,17 @@ const getFieldStyle = (field: ColumnType) => {
// Calculate the dates of the week
const weekDates = computed(() => {
let startOfWeek = dayjs(selectedDateRange.value.start)
- const endOfWeek = dayjs(selectedDateRange.value.end)
+ let endOfWeek = dayjs(selectedDateRange.value.end)
+
+ if (maxVisibleDays.value === 5) {
+ endOfWeek = endOfWeek.subtract(2, 'day')
+ }
const datesArray = []
while (startOfWeek.isBefore(endOfWeek) || startOfWeek.isSame(endOfWeek, 'day')) {
datesArray.push(dayjs(startOfWeek))
startOfWeek = startOfWeek.add(1, 'day')
}
+
return datesArray
})
@@ -111,7 +128,7 @@ const calendarData = computed(() => {
}
const recordsInRange: Array = []
- const perDayWidth = containerWidth.value / 7
+ const perDayWidth = containerWidth.value / maxVisibleDays.value
calendarRange.value.forEach((range) => {
const fromCol = range.fk_from_col
@@ -284,7 +301,7 @@ const onResize = (event: MouseEvent) => {
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 * maxVisibleDays.value)
let updateProperty: string[] = []
let updateRecord: Row
@@ -370,7 +387,7 @@ const calculateNewRow = (event: MouseEvent, updateSideBarData?: boolean) => {
// 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 * 7)
+ 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')
@@ -467,13 +484,13 @@ const stopDrag = (event: MouseEvent) => {
}
const dragStart = (event: MouseEvent, record: Row) => {
- if (!isUIAllowed('dataEdit')) return
if (resizeInProgress.value) return
let target = event.target as HTMLElement
isDragging.value = false
dragTimeout.value = setTimeout(() => {
+ if (!isUIAllowed('dataEdit')) return
isDragging.value = true
while (!target.classList.contains('draggable-record')) {
target = target.parentElement as HTMLElement
@@ -557,8 +574,10 @@ const addRecord = (date: dayjs.Dayjs) => {
:key="weekIndex"
:class="{
'!border-brand-500 !border-b-gray-200': dayjs(date).isSame(selectedDate, 'day'),
+ 'w-1/5': maxVisibleDays === 5,
+ 'w-1/7': maxVisibleDays === 7,
}"
- class="w-1/7 cursor-pointer text-center text-[10px] font-semibold leading-4 flex items-center justify-center uppercase text-gray-500 w-full py-1 border-gray-200 border-l-gray-50 border-t-gray-50 last:border-r-0 border-1 bg-gray-50"
+ class="cursor-pointer text-center text-[10px] font-semibold leading-4 flex items-center justify-center uppercase text-gray-500 w-full py-1 border-gray-200 border-l-gray-50 border-t-gray-50 last:border-r-0 border-1 bg-gray-50"
@click="selectDate(date)"
@dblclick="addRecord(date)"
>
@@ -572,8 +591,10 @@ const addRecord = (date: dayjs.Dayjs) => {
:class="{
'!border-1 !border-t-0 border-brand-500': dayjs(date).isSame(selectedDate, 'day'),
'!bg-gray-50': date.get('day') === 0 || date.get('day') === 6,
+ 'w-1/5': maxVisibleDays === 5,
+ 'w-1/7': maxVisibleDays === 7,
}"
- class="flex cursor-pointer flex-col border-r-1 min-h-[100vh] last:border-r-0 items-center w-1/7"
+ class="flex cursor-pointer flex-col border-r-1 min-h-[100vh] last:border-r-0 items-center"
data-testid="nc-calendar-week-day"
@click="selectDate(date)"
@dblclick="addRecord(date)"
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
index 9005928fd7..248156e071 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
@@ -11,6 +11,7 @@ const {
formattedSideBarData,
calendarRange,
displayField,
+ viewMetaProperties,
selectedTime,
updateRowProperty,
sideBarFilterOption,
@@ -25,6 +26,8 @@ const scrollContainer = ref(null)
const { width: containerWidth } = useElementSize(container)
+const isPublic = inject(IsPublicInj, ref(false))
+
const { isUIAllowed } = useRoles()
const meta = inject(MetaInj, ref())
@@ -47,6 +50,50 @@ const fieldStyles = computed(() => {
)
})
+const getDayIndex = (date: dayjs.Dayjs) => {
+ let dayIndex = date.day() - 1
+ if (dayIndex === -1) {
+ dayIndex = 6
+ }
+ return dayIndex
+}
+
+const maxVisibleDays = computed(() => {
+ return viewMetaProperties.value?.hide_weekend ? 5 : 7
+})
+
+const currTime = ref(dayjs())
+
+const overlayStyle = computed(() => {
+ if (!containerWidth.value)
+ return {
+ top: 0,
+ left: 0,
+ }
+
+ const left = (containerWidth.value / maxVisibleDays.value) * getDayIndex(currTime.value)
+ const minutes = currTime.value.hour() * 60 + currTime.value.minute()
+
+ const top = (52 / 60) * minutes
+
+ return {
+ width: `${containerWidth.value / maxVisibleDays.value}px`,
+ top: `${top}px`,
+ left: `${left}px`,
+ }
+})
+
+onMounted(() => {
+ const intervalId = setInterval(() => {
+ currTime.value = dayjs()
+ }, 10000) // 10000 ms = 10 seconds
+
+ // Clean up the interval when the component is unmounted
+ onUnmounted(() => {
+ clearInterval(intervalId)
+ })
+})
+
const getFieldStyle = (field: ColumnType) => {
return fieldStyles.value.get(field.id)
}
@@ -85,7 +132,11 @@ const calculateNewDates = useMemoize(
const datesHours = computed(() => {
const datesHours: Array> = []
let startOfWeek = dayjs(selectedDateRange.value.start) ?? dayjs().startOf('week')
- const endOfWeek = dayjs(selectedDateRange.value.end) ?? dayjs().endOf('week')
+ let endOfWeek = dayjs(selectedDateRange.value.end) ?? dayjs().endOf('week')
+
+ if (maxVisibleDays.value === 5) {
+ endOfWeek = endOfWeek.subtract(2, 'day')
+ }
while (startOfWeek.isSameOrBefore(endOfWeek)) {
const hours: Array = []
@@ -107,14 +158,6 @@ const datesHours = computed(() => {
return datesHours
})
-const getDayIndex = (date: dayjs.Dayjs) => {
- let dayIndex = date.day() - 1
- if (dayIndex === -1) {
- dayIndex = 6
- }
- return dayIndex
-}
-
const getGridTime = (date: dayjs.Dayjs, round = false) => {
const gridCalc = date.hour() * 60 + date.minute()
if (round) {
@@ -201,8 +244,20 @@ const getMaxOverlaps = ({
let maxOverlaps = 1
if (graph.has(id)) {
- maxOverlaps = dfs(id)
+ dfs(id)
}
+
+ const overlapIterations: Array = []
+
+ columnArray[dayIndex]
+ .flat()
+ .filter((record) => visited.has(record.rowMeta.id!))
+ .forEach((record) => {
+ overlapIterations.push(record.rowMeta.overLapIteration!)
+ })
+
+ maxOverlaps = Math.max(...overlapIterations)
+
return { maxOverlaps, dayIndex, overlapIndex }
}
@@ -224,11 +279,15 @@ const recordsAcrossAllRange = computed<{
records: [],
gridTimeMap: new Map(),
}
- const perWidth = containerWidth.value / 7
+ const perWidth = containerWidth.value / maxVisibleDays.value
const perHeight = 52
const scheduleStart = dayjs(selectedDateRange.value.start).startOf('day')
- const scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day')
+ let scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day')
+
+ if (maxVisibleDays.value === 5) {
+ scheduleEnd = scheduleEnd.subtract(2, 'day')
+ }
const columnArray: Array>> = [[[]]]
const gridTimeMap = new Map<
@@ -489,17 +548,25 @@ const recordsAcrossAllRange = computed<{
})
const dayIndex = record.rowMeta.dayIndex ?? tDayIndex
+
+ let display = 'block'
+
+ if (maxVisibleDays.value === 5) {
+ if (dayIndex === 5 || dayIndex === 6) {
+ display = 'none'
+ }
+ }
+
record.rowMeta.numberOfOverlaps = maxOverlaps
let width = 0
let left = 100
const majorLeft = dayIndex * perWidth
- let display = 'block'
if (record.rowMeta.overLapIteration! - 1 > 2) {
display = 'none'
} else {
- width = 100 / Math.min(maxOverlaps, 3) / 7
+ width = 100 / Math.min(maxOverlaps, 3) / maxVisibleDays.value
left = width * (overlapIndex - 1)
}
record.rowMeta.style = {
@@ -563,7 +630,7 @@ const onResize = (event: MouseEvent) => {
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 * maxVisibleDays.value)
const hour = Math.floor(percentY * 23)
const minutes = Math.round((percentY * 24 * 60) % 60)
@@ -656,7 +723,7 @@ const calculateNewRow = (
if (!fromCol) return { newRow: null, updatedProperty: [] }
- const day = Math.max(0, Math.min(6, Math.floor(percentX * 7)))
+ const day = Math.max(0, Math.min(6, Math.floor(percentX * maxVisibleDays.value)))
const hour = Math.max(0, Math.min(23, Math.floor(percentY * 24)))
const minutes = Math.round(((percentY * 24 * 60) % 60) / 15) * 15
@@ -762,13 +829,13 @@ const stopDrag = (event: MouseEvent) => {
}
const dragStart = (event: MouseEvent, record: Row) => {
- if (!isUIAllowed('dataEdit')) return
if (resizeInProgress.value) return
let target = event.target as HTMLElement
isDragging.value = false
dragTimeout.value = setTimeout(() => {
+ if (!isUIAllowed('dataEdit')) return
isDragging.value = true
while (!target.classList.contains('draggable-record')) {
target = target.parentElement as HTMLElement
@@ -877,14 +944,32 @@ watch(
data-testid="nc-calendar-week-view"
@drop="dropEvent"
>
+
+
diff --git a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
index f896139bf8..8071b26605 100644
--- a/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
@@ -5,8 +5,20 @@ import type { Row } from '~/lib/types'
const emits = defineEmits(['expandRecord', 'newRecord'])
-const { selectedDateRange, formattedData, formattedSideBarData, calendarRange, selectedDate, displayField, updateRowProperty } =
- useCalendarViewStoreOrThrow()
+const {
+ selectedDateRange,
+ formattedData,
+ formattedSideBarData,
+ calendarRange,
+ selectedDate,
+ displayField,
+ updateRowProperty,
+ viewMetaProperties,
+} = useCalendarViewStoreOrThrow()
+
+const maxVisibleDays = computed(() => {
+ return viewMetaProperties.value?.hide_weekend ? 5 : 7
+})
const container = ref
-
+
+
+
+
+ {{ dayjs().format('hh:mm A') }}
+
+
+
+
{{ dayjs(date[0]).format('DD ddd') }}
@@ -899,15 +984,27 @@ watch(
-
+
+
{
if (width.value > 1250) {
size.value = 'medium'
cols.value = 4
- } else if (width.value > 850) {
+ } else if (width.value > 950) {
size.value = 'medium'
cols.value = 3
} else if (width.value > 680) {
diff --git a/packages/nc-gui/components/smartsheet/calendar/index.vue b/packages/nc-gui/components/smartsheet/calendar/index.vue
index eb1dbb1a51..bc08f9e44b 100644
--- a/packages/nc-gui/components/smartsheet/calendar/index.vue
+++ b/packages/nc-gui/components/smartsheet/calendar/index.vue
@@ -8,11 +8,13 @@ const meta = inject(MetaInj, ref())
const view = inject(ActiveViewInj, ref())
+const { isMobileMode } = useGlobal()
+
const reloadViewMetaHook = inject(ReloadViewMetaHookInj)
const reloadViewDataHook = inject(ReloadViewDataHookInj)
-const { isMobileMode } = useGlobal()
+const isPublic = inject(IsPublicInj, ref(false))
provide(IsFormInj, ref(false))
@@ -45,14 +47,15 @@ const expandedFormOnRowIdDlg = computed({
get() {
return !!route.query.rowId
},
- set(val) {
- if (!val)
+ set(value) {
+ if (!value) {
router.push({
query: {
...route.query,
rowId: undefined,
},
})
+ }
},
})
@@ -64,7 +67,10 @@ const expandedFormRowState = ref>()
const expandRecord = (row: RowType, state?: Record) => {
const rowId = extractPkFromRow(row.row, meta.value!.columns!)
- if (rowId) {
+
+ expandedFormRowState.value = state
+
+ if (rowId && !isPublic.value) {
router.push({
query: {
...route.query,
@@ -73,12 +79,12 @@ const expandRecord = (row: RowType, state?: Record) => {
})
} else {
expandedFormRow.value = row
- expandedFormRowState.value = state
expandedFormDlg.value = true
}
}
const newRecord = (row: RowType) => {
+ if (isPublic.value) return
$e('c:calendar:new-record', activeCalendarView.value)
expandRecord({
row: {
@@ -114,77 +120,97 @@ reloadViewDataHook?.on(async (params: void | { shouldShowLoading?: boolean }) =>
-
-
-
+
+
-
+
diff --git a/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue b/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
index 31528ad2a4..312bdc437e 100644
--- a/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/AdvancedOptions.vue
@@ -32,7 +32,7 @@ vModel.value.au = !!vModel.value.au */
-
-
-
-
+
+
+
+
+ {{ $t('general.available') }}
{{ $t('title.inDesktop') }} +
+ {{ $t('title.inDesktop') }} +
+ {{ $t('msg.calendarViewNotSupportedOnMobile') }}
+
+
+
-
+
+
+
+
-
-
-
-
-
-
-
-
-
-
- {{ $t('activity.noRange') }}
-
-
+
+
+
+
+
+
+ {{ $t('activity.noRange') }}
+
+
+
+
@@ -72,7 +72,11 @@ vModel.value.au = !!vModel.value.au */
-
+
+
+
{{ type }}
@@ -85,19 +89,14 @@ vModel.value.au = !!vModel.value.au */
-
-
-
-
-
+
diff --git a/packages/nc-gui/components/smartsheet/column/CheckboxOptions.vue b/packages/nc-gui/components/smartsheet/column/CheckboxOptions.vue
index c1b3826587..25226c799a 100644
--- a/packages/nc-gui/components/smartsheet/column/CheckboxOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/CheckboxOptions.vue
@@ -46,6 +46,8 @@ const picked = computed({
},
})
+const isOpenColorPicker = ref(false)
+
// set default value
vModel.value.meta = {
icon: {
@@ -73,26 +75,19 @@ watch(
-
-
-
+
+
+
+
+
-
-
-
-
-
- {{ $t('msg.validColumnsForBarCode') }}
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ option.title }}
+
+
+
+
+ {{ $t('msg.validColumnsForBarCode') }}
+
+
+
+
+
-
-
-
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
index 392841ab63..ac8f36956e 100644
--- a/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/CurrencyOptions.vue
@@ -86,6 +86,8 @@ currencyLocales().then((locales) => {
:disabled="isMoney && isPg"
dropdown-class-name="nc-dropdown-currency-cell-locale"
>
+
@@ -115,6 +117,8 @@ currencyLocales().then((locales) => {
:disabled="isMoney && isPg"
dropdown-class-name="nc-dropdown-currency-cell-code"
>
+
+
+
-
+
+
+
-
+
+
+
{{ currencyCode }}
diff --git a/packages/nc-gui/components/smartsheet/column/DateOptions.vue b/packages/nc-gui/components/smartsheet/column/DateOptions.vue
index de079c405e..c8037c2d4a 100644
--- a/packages/nc-gui/components/smartsheet/column/DateOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DateOptions.vue
@@ -16,15 +16,18 @@ if (!vModel.value.meta?.date_format) {
-
+
+
+
-
+
{{ format }}
-
-
-
-
-
-
-
-
-
-
-
-
+
- {{ format }}
-
-
- {{ format }}
-
-
+
+
+ 12 Hrs
+ 24 Hrs
+
+
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/column/DecimalOptions.vue b/packages/nc-gui/components/smartsheet/column/DecimalOptions.vue
index de8db503af..11adec8061 100644
--- a/packages/nc-gui/components/smartsheet/column/DecimalOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DecimalOptions.vue
@@ -22,12 +22,12 @@ const precisionFormatsDisplay = {
const vModel = useVModel(props, 'value', emit)
-onMounted(() => {
- if (!vModel.value.meta?.precision) {
- if (!vModel.value.meta) vModel.value.meta = {}
- vModel.value.meta.precision = precisionFormats[0]
- }
-})
+// set default value
+vModel.value.meta = {
+ precision: precisionFormats[0],
+ isLocaleString: false,
+ ...(vModel.value.meta || {}),
+}
// update datatype precision when precision is less than the new value
// avoid downgrading precision if the new value is less than the current precision
@@ -45,6 +45,9 @@ const onPrecisionChange = (value: number) => {
dropdown-class-name="nc-dropdown-decimal-format"
@change="onPrecisionChange"
>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ format }}
+
+
+ {{ format }}
+
+
{{ (precisionFormatsDisplay as any)[format] }}
@@ -58,4 +61,12 @@ const onPrecisionChange = (value: number) => {
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/column/DefaultValue.vue b/packages/nc-gui/components/smartsheet/column/DefaultValue.vue
index c5cde4b971..74ea13d5cf 100644
--- a/packages/nc-gui/components/smartsheet/column/DefaultValue.vue
+++ b/packages/nc-gui/components/smartsheet/column/DefaultValue.vue
@@ -1,14 +1,17 @@
-
+
+
+
+ {{ $t('labels.showThousandsSeparator') }}
+ {{ $t('placeholder.defaultValue') }}
-
-
- {{ $t('labels.durationInfo') }}
-
-
-
-
+
+
-
+
-
+
+
+
+ {{ $t('general.set') }} {{ $t('placeholder.defaultValue').toLowerCase() }}
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/column/DurationOptions.vue b/packages/nc-gui/components/smartsheet/column/DurationOptions.vue
index a53fe5f0cc..3674fbbbe7 100644
--- a/packages/nc-gui/components/smartsheet/column/DurationOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/DurationOptions.vue
@@ -11,7 +11,7 @@ const durationOptionList =
durationOptions.map((o) => ({
...o,
// h:mm:ss (e.g. 3:45, 1:23:40)
- title: `${o.title} ${o.example}`,
+ title: `${o.title}`,
})) || []
// set default value
@@ -24,14 +24,12 @@ vModel.value.meta = {
+
+ {{ $t('placeholder.defaultValue') }}
+
+
+
+
{{ duration.title }}
{{ duration.title }}
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index 928d140027..303020633d 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -1,7 +1,8 @@
-
-
tableExplorerColumns?: ColumnType[]
fromTableExplorer?: boolean
+ isColumnValid?: (value: Partial) => boolean
}
const props = defineProps()
@@ -16,13 +17,9 @@ const emit = defineEmits(['submit', 'cancel', 'mounted'])
const meta = inject(MetaInj, ref())
-const column = toRef(props, 'column')
+const { column, preload, tableExplorerColumns, fromTableExplorer, isColumnValid } = toRefs(props)
-const preload = toRef(props, 'preload')
-
-const tableExplorerColumns = toRef(props, 'tableExplorerColumns')
-
-useProvideColumnCreateStore(meta, column, tableExplorerColumns)
+useProvideColumnCreateStore(meta, column, tableExplorerColumns, fromTableExplorer, isColumnValid)
diff --git a/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue b/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
index 5a6e1db3da..fdeae9a644 100644
--- a/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/FormulaOptions.vue
@@ -283,27 +283,42 @@ setAdditionalValidations({
onMounted(() => {
jsep.plugins.register(jsepCurlyHook)
})
+
+const suggestionPreviewLeft = ref('-left-85')
+
+watch(sugListRef, () => {
+ nextTick(() => {
+ setTimeout(() => {
+ const fieldModal = document.querySelector('.nc-dropdown-edit-column.active') as HTMLDivElement
+
+ if (fieldModal && fieldModal.getBoundingClientRect().left < 364) {
+ suggestionPreviewLeft.value = '-right-85'
+ }
+ }, 500)
+ })
+})
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue b/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
index 62c188f169..50d77f2a68 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAddProvider.vue
@@ -8,6 +8,7 @@ interface Props {
preload?: Partial
-
-
-
-
+
+
+
-
- {{ `${$t('msg.acceptOnlyValid')} ${formState.uidt}` }}
-
-
-
-
-
-
-
-
-
-
+
-
-
+
-
-
+
- {{ opt.name }}
+ {{ UITypesName[opt.name] }}
({{ $t('general.deprecated') }})
-
+
+
-
+ {{
+ `${$t('msg.acceptOnlyValid', {
+ type:
+ formState.uidt === UITypes.URL
+ ? `${UITypesName[formState.uidt as UITypes]}s`
+ : `${UITypesName[formState.uidt as UITypes]}s`.toLowerCase(),
+ })}`
+ }}
+
+
-
-
-
-
-
-
- Set as Unique
-
-
-
-
+
+
+
Set as Unique
+
-
-
- {{ $t('general.cancel') }}
-
-
-
-
- {{ $t('general.save') }} {{ columnLabel }}
- {{ $t('general.saving') }} {{ columnLabel }}
-
+ {{ advancedOptions ? $t('general.hideAll') : $t('general.showMore') }}
+
+
+
+
+
+ {{ $t('general.cancel') }}
+
+
+
+
+ {{ submitBtnLabel.label }}
+
+ {{ submitBtnLabel.loadingLabel }}
+
+
+
+
-
-
+
@@ -463,4 +618,21 @@ const loadListData = async ($state: any) => {
width: calc(100% + 5px);
display: block;
}
+
+:deep(.nc-select-col-option-select-option) {
+ @apply !truncate;
+
+ &:not(.nc-kanban-stack-input):not(:focus):hover {
+ @apply !border-transparent;
+ }
+
+ &:not(.nc-kanban-stack-input):not(:focus) {
+ @apply !border-transparent;
+ }
+
+ &:focus,
+ &:focus-visible {
+ @apply !border-[var(--ant-primary-color-hover)];
+ }
+}
diff --git a/packages/nc-gui/components/smartsheet/column/SpecificDBTypeOptions.vue b/packages/nc-gui/components/smartsheet/column/SpecificDBTypeOptions.vue
index 04d85e1bdb..5fe9d800cb 100644
--- a/packages/nc-gui/components/smartsheet/column/SpecificDBTypeOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/SpecificDBTypeOptions.vue
@@ -1,3 +1,3 @@
-
+
diff --git a/packages/nc-gui/components/smartsheet/column/TimeOptions.vue b/packages/nc-gui/components/smartsheet/column/TimeOptions.vue
new file mode 100644
index 0000000000..91a2fd7fa2
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/column/TimeOptions.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
-
-
-
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue b/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
new file mode 100644
index 0000000000..a15e86302d
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/column/UITypesOptionsWithSearch.vue
@@ -0,0 +1,119 @@
+
+
+
+
+
+
+ 12 Hrs
+ 24 Hrs
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/column/UserOptions.vue b/packages/nc-gui/components/smartsheet/column/UserOptions.vue
index 9210b51040..4235bb120e 100644
--- a/packages/nc-gui/components/smartsheet/column/UserOptions.vue
+++ b/packages/nc-gui/components/smartsheet/column/UserOptions.vue
@@ -14,7 +14,7 @@ const initialIsMulti = ref()
const validators = {}
-const { setAdditionalValidations } = useColumnCreateStoreOrThrow()
+const { setAdditionalValidations, updateFieldName } = useColumnCreateStoreOrThrow()
setAdditionalValidations({
...validators,
@@ -31,34 +31,35 @@ onMounted(() => {
initialIsMulti.value = vModel.value.meta.is_multi
})
-const updateIsMulti = (e) => {
- vModel.value.meta.is_multi = e.target.checked
+const updateIsMulti = (isChecked: boolean) => {
+ vModel.value.meta.is_multi = isChecked
if (!vModel.value.meta.is_multi) {
vModel.value.cdf = vModel.value.cdf?.split(',')[0] || null
}
+ updateFieldName()
}
-
+
+
+
+
+
+
+ 
+
+ {{ options.length ? $t('title.noResultsMatchedYourSearch') : 'The list is empty' }}
+
+
+
+
+ {{ options.length ? $t('title.noResultsMatchedYourSearch') : 'The list is empty' }}
+
+
+
+
+ {{ UITypesName[option.name] }}
+ ({{ $t('general.deprecated') }})
+
- ', comment: 'API token' }],
+ headers: [
+ {
+ name: 'xc-token',
+ value: `CREATE_YOUR_API_TOKEN_FROM ${location.origin + location.pathname}#/account/tokens`,
+ comment: 'API token',
+ },
+ ],
url: apiUrl.value,
queryString: [
...Object.entries(queryParams.value || {}).map(([name, value]) => {
@@ -95,7 +101,7 @@ const code = computed(() => {
const api = new Api({
baseURL: "${(appInfo.value && appInfo.value.ncSiteUrl) || '/'}",
headers: {
- "xc-token": ""
+ "xc-token": "CREATE_YOUR_API_TOKEN_FROM ${location.origin + location.pathname}#/account/tokens"
}
})
diff --git a/packages/nc-gui/components/smartsheet/details/Fields.vue b/packages/nc-gui/components/smartsheet/details/Fields.vue
index d023c0275e..24b1eb783f 100644
--- a/packages/nc-gui/components/smartsheet/details/Fields.vue
+++ b/packages/nc-gui/components/smartsheet/details/Fields.vue
@@ -1,10 +1,11 @@
@@ -955,7 +1039,7 @@ watch(
{{ $t('labels.multiField.deletedField') }}
()
const commentInputRef = ref()
-const editRef = ref()
+const comment = ref('')
+
+const { copy } = useClipboard()
+
+const route = useRoute()
+
+const { dashboardUrl } = useDashboard()
const { user, appInfo } = useGlobal()
@@ -33,6 +38,8 @@ const tab = ref<'comments' | 'audits'>('comments')
const { isUIAllowed } = useRoles()
+const router = useRouter()
+
const hasEditPermission = computed(() => isUIAllowed('commentEdit'))
const editComment = ref()
@@ -66,10 +73,16 @@ async function onEditComment() {
isCommentMode.value = true
- await updateComment(editComment.value.id!, {
- comment: editComment.value?.comment,
+ const tempCom = {
+ ...editCommentValue.value,
+ }
+
+ isEditing.value = false
+ editCommentValue.value = undefined
+ await updateComment(tempCom.id!, {
+ comment: tempCom.comment,
})
- onStopEdit()
+ loadComments()
}
function onCancel() {
@@ -93,6 +106,9 @@ onKeyStroke('Enter', (event) => {
function editComments(comment: CommentType) {
editComment.value = comment
isEditing.value = true
+ nextTick(() => {
+ scrollToComment(comment.id)
+ })
}
const value = computed({
@@ -114,18 +130,44 @@ function scrollComments() {
}
}
-const isSaving = ref(false)
-
const saveComment = async () => {
- if (isSaving.value) return
+ if (!comment.value.trim()) return
+
+ while (comment.value.endsWith('
') || comment.value.endsWith('\n')) { + if (comment.value.endsWith('
')) { + comment.value = comment.value.slice(0, -6) + } else { + comment.value = comment.value.slice(0, -2) + } + } isCommentMode.value = true isSaving.value = true + // Optimistic Insert + + comments.value = [ + ...comments.value, + { + id: `temp-${new Date().getTime()}`, + comment: comment.value, + created_at: new Date().toISOString(), + created_by: user.value?.id, + created_by_email: user.value?.email, + created_display_name: user.value?.display_name ?? '', + }, + ] + + const tempCom = comment.value + comment.value = '' + + commentInputRef?.value?.setEditorContent('', true) + await nextTick(() => { + scrollComments() + }) try { - await _saveComment() + await _saveComment(tempCom) await nextTick(() => { - commentInputRef?.value?.setEditorContent('', true) isExpandedFormCommentMode.value = true }) scrollComments() @@ -136,13 +178,69 @@ const saveComment = async () => { } } +function scrollToComment(commentId: string) { + const commentEl = document.querySelector(`.${commentId}`) + if (commentEl) { + commentEl.scrollIntoView({ + behavior: 'smooth', + block: 'center', + }) + } +} + watch(commentsWrapperEl, () => { setTimeout(() => { nextTick(() => { - scrollComments() + const query = router.currentRoute.value.query + const commentId = query.commentId + if (commentId) { + router.push({ + query: { + rowId: query.rowId, + }, + }) + scrollToComment(commentId as string) + } else { + scrollComments() + } }) }, 100) }) + +const timesAgo = (comment: CommentType) => { + return comment.created_at !== comment.updated_at ? `Edited ${timeAgo(comment.updated_at!)}` : timeAgo(comment.created_at!) +} + +const createdBy = ( + comment: CommentType & { + created_display_name?: string + }, +) => { + if (comment.created_by === user.value?.id) { + return 'You' + } else if (comment.created_display_name?.trim()) { + return comment.created_by_email || 'Shared source' + } else if (comment.created_by_email) { + return comment.created_by_email + } else { + return 'Shared source' + } +} + +const getUserRole = (email: string) => { + const user = baseUsers.value.find((user) => user.email === email) + if (!user) return ProjectRoles.NO_ACCESS + + return user.roles || ProjectRoles.NO_ACCESS +} + +const editedAt = (comment: CommentType) => { + if (comment.updated_at !== comment.created_at && comment.updated_at) { + const str = timeAgo(comment.updated_at).replace(' ', '_') + return `[(edited)](a~~~###~~~Edited_${str}) ` + } + return '' +} @@ -172,77 +270,71 @@ watch(commentsWrapperEl, () => {
-
- Allow adding multiple users
-
-
-
-
- Notify users with base access when they're added
-
-
-
- Changing from multiple mode to single will retain only first user in each cell!!!
-
+
+
+
+
+
+
+
diff --git a/packages/nc-gui/components/smartsheet/details/Api.vue b/packages/nc-gui/components/smartsheet/details/Api.vue
index 6b5ca12e5f..99691c809c 100644
--- a/packages/nc-gui/components/smartsheet/details/Api.vue
+++ b/packages/nc-gui/components/smartsheet/details/Api.vue
@@ -7,7 +7,7 @@ const { t } = useI18n()
const baseStore = useBase()
const { base } = storeToRefs(baseStore)
-const { appInfo, token } = useGlobal()
+const { appInfo } = useGlobal()
const meta = inject(MetaInj, ref())
@@ -73,7 +73,13 @@ const snippet = computed(
() =>
new HTTPSnippet({
method: 'GET',
- headers: [{ name: 'xc-token', value: '
+
+
+
+ Allow adding multiple users
+
+
+
+
+ Notify users with base access when they're added
+ ') || comment.value.endsWith('\n')) { + if (comment.value.endsWith('
')) { + comment.value = comment.value.slice(0, -6) + } else { + comment.value = comment.value.slice(0, -2) + } + } isCommentMode.value = true isSaving.value = true + // Optimistic Insert + + comments.value = [ + ...comments.value, + { + id: `temp-${new Date().getTime()}`, + comment: comment.value, + created_at: new Date().toISOString(), + created_by: user.value?.id, + created_by_email: user.value?.email, + created_display_name: user.value?.display_name ?? '', + }, + ] + + const tempCom = comment.value + comment.value = '' + + commentInputRef?.value?.setEditorContent('', true) + await nextTick(() => { + scrollComments() + }) try { - await _saveComment() + await _saveComment(tempCom) await nextTick(() => { - commentInputRef?.value?.setEditorContent('', true) isExpandedFormCommentMode.value = true }) scrollComments() @@ -136,13 +178,69 @@ const saveComment = async () => { } } +function scrollToComment(commentId: string) { + const commentEl = document.querySelector(`.${commentId}`) + if (commentEl) { + commentEl.scrollIntoView({ + behavior: 'smooth', + block: 'center', + }) + } +} + watch(commentsWrapperEl, () => { setTimeout(() => { nextTick(() => { - scrollComments() + const query = router.currentRoute.value.query + const commentId = query.commentId + if (commentId) { + router.push({ + query: { + rowId: query.rowId, + }, + }) + scrollToComment(commentId as string) + } else { + scrollComments() + } }) }, 100) }) + +const timesAgo = (comment: CommentType) => { + return comment.created_at !== comment.updated_at ? `Edited ${timeAgo(comment.updated_at!)}` : timeAgo(comment.created_at!) +} + +const createdBy = ( + comment: CommentType & { + created_display_name?: string + }, +) => { + if (comment.created_by === user.value?.id) { + return 'You' + } else if (comment.created_display_name?.trim()) { + return comment.created_by_email || 'Shared source' + } else if (comment.created_by_email) { + return comment.created_by_email + } else { + return 'Shared source' + } +} + +const getUserRole = (email: string) => { + const user = baseUsers.value.find((user) => user.email === email) + if (!user) return ProjectRoles.NO_ACCESS + + return user.roles || ProjectRoles.NO_ACCESS +} + +const editedAt = (comment: CommentType) => { + if (comment.updated_at !== comment.created_at && comment.updated_at) { + const str = timeAgo(comment.updated_at).replace(' ', '_') + return `[(edited)](a~~~###~~~Edited_${str}) ` + } + return '' +} @@ -172,77 +270,71 @@ watch(commentsWrapperEl, () => {
{{ $t('activity.startCommenting') }}