Browse Source

Merge pull request #7731 from nocodb/nc-feat/calendar-granularity

feat(nc-gui): calendar drag-drop granularity
pull/7747/head
Raju Udava 8 months ago committed by GitHub
parent
commit
dfe9ecfabc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
  1. 2
      packages/nc-gui/components/nc/DateWeekSelector.vue
  2. 1
      packages/nc-gui/components/smartsheet/calendar/Cell.vue
  3. 63
      packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue
  4. 13
      packages/nc-gui/components/smartsheet/calendar/MonthView.vue
  5. 10
      packages/nc-gui/components/smartsheet/calendar/RecordCard.vue
  6. 8
      packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue
  7. 1
      packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue
  8. 140
      packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue
  9. 9
      packages/nc-gui/components/smartsheet/calendar/index.vue
  10. 3
      packages/nc-gui/utils/iconUtils.ts

2
packages/nc-gui/components/nc/DateWeekSelector.vue

@ -180,7 +180,7 @@ const paginate = (action: 'next' | 'prev') => {
'text-gray-400': !isDateInCurrentMonth(date),
'nc-selected-week-start': isSameDate(date, selectedWeek?.start),
'nc-selected-week-end': isSameDate(date, selectedWeek?.end),
'rounded-md bg-brand-50 text-brand-500': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
'rounded-md bg-brand-50 nc-calendar-today text-brand-500': isSameDate(date, dayjs()) && isDateInCurrentMonth(date),
}"
class="h-9 w-9 px-1 py-2 relative font-medium flex items-center cursor-pointer justify-center"
data-testid="nc-calendar-date"

1
packages/nc-gui/components/smartsheet/calendar/Cell.vue

@ -260,7 +260,6 @@ const getLookupValue = (modelValue: string | null | number | Array<any>, col: Co
}
const getAttachmentValue = (modelValue: string | null | number | Array<any>) => {
console.log(modelValue)
if (Array.isArray(modelValue)) {
return modelValue.map((v) => `${v.title} (${getPossibleAttachmentSrc(v).join(', ')})`).join(', ')
}

63
packages/nc-gui/components/smartsheet/calendar/DayView/DateTimeField.vue

@ -56,7 +56,7 @@ const recordsAcrossAllRange = computed<{
record: Row[]
count: {
[key: string]: {
id: string
id: string[]
overflow: boolean
overflowCount: number
}
@ -167,7 +167,7 @@ const recordsAcrossAllRange = computed<{
style.display = 'none'
overlaps[timeKey].overflowCount += 1
}
_startDate = _startDate.add(15, 'minutes')
_startDate = _startDate.add(1, 'minutes')
}
// This property is used to determine which side the record should be rounded. It can be top, bottom, both or none
@ -205,16 +205,21 @@ const recordsAcrossAllRange = computed<{
const id = generateRandomNumber()
const startDate = dayjs(record.row[fromCol.title!])
const endDate = dayjs(record.row[fromCol.title!]).add(15, 'minutes')
let endDate = dayjs(record.row[fromCol.title!]).add(1, 'hour')
if (endDate.isAfter(scheduleEnd, 'minutes')) {
endDate = scheduleEnd
}
const startHour = startDate.hour()
let style: Partial<CSSStyleDeclaration> = {}
let _startDate = startDate.clone()
// We loop through every 15 minutes between the start and end date and keep track of the number of records that overlap at a given time
// We loop through every minute between the start and end date and keep track of the number of records that overlap at a given time
while (_startDate.isBefore(endDate)) {
const timeKey = _startDate.startOf('hour').format('HH:mm')
const timeKey = _startDate.format('HH:mm')
if (!overlaps[timeKey]) {
overlaps[timeKey] = {
@ -234,15 +239,20 @@ const recordsAcrossAllRange = computed<{
display: 'none',
}
}
_startDate = _startDate.add(15, 'minutes')
_startDate = _startDate.add(1, 'minute')
}
const topInPixels = (startDate.hour() + startDate.startOf('hour').minute() / 60) * 80
// The top of the record is calculated based on the start hour
// Update such that it is also based on Minutes
const minutes = startDate.minute() + startDate.hour() * 60
const updatedTopInPixels = (minutes * 80) / 60
// A minimum height of 80px is set for each record
const heightInPixels = Math.max((endDate.diff(startDate, 'minute') / 60) * 80, perRecordHeight)
const finalTopInPixels = topInPixels + startHour * 2
const finalTopInPixels = updatedTopInPixels + startHour * 2
style = {
...style,
@ -332,8 +342,9 @@ const calculateNewRow = (event: MouseEvent) => {
// It can be between 0 and 23 (inclusive)
const hour = Math.max(Math.floor(percentY * 23), 0)
const minutes = Math.min(Math.max(Math.round(Math.floor((percentY * 23 - hour) * 60) / 15) * 15, 0), 60)
// We calculate the new startDate by adding the hour to the start of the selected date
const newStartDate = dayjs(selectedDate.value).startOf('day').add(hour, 'hour')
const newStartDate = dayjs(selectedDate.value).startOf('day').add(hour, 'hour').add(minutes, 'minute')
if (!newStartDate || !fromCol) return { newRow: null, updateProperty: [] }
let endDate
@ -570,6 +581,35 @@ const dragStart = (event: MouseEvent, record: Row) => {
document.addEventListener('mouseup', onMouseUp)
}
const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
let startOfHour = hour.startOf('hour')
const endOfHour = hour.endOf('hour')
const ids: Array<string> = []
let isOverflow = false
let overflowCount = 0
while (startOfHour.isBefore(endOfHour, 'minute')) {
const hourKey = startOfHour.format('HH:mm')
if (recordsAcrossAllRange.value?.count?.[hourKey]?.overflow) {
isOverflow = true
recordsAcrossAllRange.value?.count?.[hourKey]?.id.forEach((id) => {
if (!ids.includes(id)) {
ids.push(id)
overflowCount += 1
}
})
}
startOfHour = startOfHour.add(1, 'minute')
}
overflowCount = overflowCount > 8 ? overflowCount - 8 : 0
return { isOverflow, overflowCount }
}
const viewMore = (hour: dayjs.Dayjs) => {
sideBarFilterOption.value = 'selectedHours'
selectedTime.value = hour
@ -680,7 +720,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
</NcButton>
<NcButton
v-if="recordsAcrossAllRange?.count?.[hour.format('HH:mm')]?.overflow"
v-if="isOverflowAcrossHourRange(hour).isOverflow"
class="!absolute bottom-2 text-center w-15 mx-auto inset-x-0 z-3 text-gray-500"
size="xxsmall"
type="secondary"
@ -688,7 +728,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
>
<span class="text-xs">
+
{{ recordsAcrossAllRange?.count[hour.format('HH:mm')]?.overflowCount }}
{{ isOverflowAcrossHourRange(hour).overflowCount }}
more
</span>
</NcButton>
@ -709,7 +749,6 @@ const viewMore = (hour: dayjs.Dayjs) => {
>
<LazySmartsheetRow :row="record">
<LazySmartsheetCalendarVRecordCard
:view="activeCalendarView"
:hover="hoverRecord === record.rowMeta.id"
:position="record.rowMeta!.position"
:record="record"

13
packages/nc-gui/components/smartsheet/calendar/MonthView.vue

@ -497,7 +497,7 @@ const onResizeEnd = () => {
const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: Row) => {
if (!isUIAllowed('dataEdit') || draggingId.value) return
selectedDate.value = null
// selectedDate.value = null
resizeInProgress.value = true
resizeDirection.value = direction
resizeRecord.value = record
@ -508,12 +508,8 @@ const onResizeStart = (direction: 'right' | 'left', event: MouseEvent, record: R
const stopDrag = (event: MouseEvent) => {
clearTimeout(dragTimeout.value)
console.log('stopDrag')
console.log('stopDrag', dragRecord.value, isDragging.value)
if (!isUIAllowed('dataEdit') || !dragRecord.value || !isDragging.value) return
console.log('stopDrag')
event.preventDefault()
dragElement.value!.style.boxShadow = 'none'
@ -560,7 +556,7 @@ const dragStart = (event: MouseEvent, record: Row) => {
})
dragRecord.value = record
selectedDate.value = null
// selectedDate.value = null
isDragging.value = true
dragElement.value = target
@ -633,7 +629,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
<div
v-for="(day, index) in days"
:key="index"
class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-200 font-semibold text-gray-500"
class="text-center bg-gray-50 py-1 text-sm border-b-1 border-r-1 last:border-r-0 border-gray-100 font-semibold text-gray-500"
>
{{ day }}
</div>
@ -657,7 +653,7 @@ const isDateSelected = (date: dayjs.Dayjs) => {
isDateSelected(day) || (focusedDate && dayjs(day).isSame(focusedDate, 'day')),
'!text-gray-400': !isDayInPagedMonth(day),
}"
class="text-right relative group last:border-r-0 text-sm h-full border-r-1 border-b-1 border-gray-200 font-medium hover:bg-gray-50 text-gray-800 bg-white"
class="text-right relative group last:border-r-0 text-sm h-full border-r-1 border-b-1 border-gray-100 font-medium hover:bg-gray-50 text-gray-800 bg-white"
data-testid="nc-calendar-month-day"
@click="selectDate(day)"
>
@ -793,7 +789,6 @@ const isDateSelected = (date: dayjs.Dayjs) => {
>
<template v-if="!isRowEmpty(record, displayField)">
<LazySmartsheetCalendarCell
v-if="!isRowEmpty(record, displayField!)"
v-model="record.row[displayField!.title!]"
:bold="getFieldStyle(displayField).bold"
:column="displayField"

10
packages/nc-gui/components/smartsheet/calendar/RecordCard.vue

@ -28,8 +28,8 @@ const emit = defineEmits(['resize-start'])
:class="{
'min-h-9': size === 'small',
'h-full': size === 'auto',
'rounded-l-lg ml-1': position === 'leftRounded',
'rounded-r-lg mr-1': position === 'rightRounded',
'rounded-l-lg': position === 'leftRounded',
'rounded-r-lg': position === 'rightRounded',
'rounded-lg mx-1': position === 'rounded',
'rounded-none': position === 'none',
'bg-maroon-50': color === 'maroon',
@ -53,7 +53,7 @@ const emit = defineEmits(['resize-start'])
'bg-pink-500': color === 'pink',
'bg-purple-500': color === 'purple',
}"
class="block h-full min-h-5 w-1 rounded"
class="w-1 min-h-5 bg-blue-500 rounded-x rounded-y-sm"
></div>
<div v-if="(position === 'leftRounded' || position === 'rounded') && resize" class="mt-0.7 h-7.1 absolute -left-4 resize">
@ -70,13 +70,13 @@ const emit = defineEmits(['resize-start'])
</NcButton>
</div>
<div class="overflow-hidden flex w-full ml-2 h-8 absolute">
<div class="overflow-hidden items-center flex w-full ml-2 h-8">
<span v-if="position === 'rightRounded' || position === 'none'" class="mr-1"> .... </span>
<span
:class="{
'pr-7': position === 'leftRounded',
}"
class="text-sm pt-1.5 pr-3 mr-3 break-word space-x-2 whitespace-nowrap gap-2 overflow-hidden text-ellipsis w-full truncate text-gray-800"
class="text-sm pr-3 mr-3 break-word space-x-2 whitespace-nowrap gap-2 overflow-hidden text-ellipsis w-full truncate text-gray-800"
>
<slot />
</span>

8
packages/nc-gui/components/smartsheet/calendar/VRecordCard.vue

@ -51,9 +51,9 @@ const emit = defineEmits(['resize-start'])
'group-hover:(border-brand-500)': resize,
'!border-brand-500 border-1': selected || hover,
}"
class="relative h-full ml-0.25 border-1 border-gray-50"
class="relative flex items-center h-full ml-0.25 border-1 border-transparent"
>
<div class="h-full absolute py-2">
<div class="h-full py-1">
<div
:class="{
'bg-maroon-500': color === 'maroon',
@ -63,14 +63,14 @@ const emit = defineEmits(['resize-start'])
'bg-pink-500': color === 'pink',
'bg-purple-500': color === 'purple',
}"
class="block h-full min-h-5 ml-1 w-1 rounded mr-2"
class="block h-full min-h-5 ml-1 w-1 rounded"
></div>
</div>
<div v-if="position === 'bottomRounded' || position === 'none'" class="ml-3">....</div>
<span
class="mt-1.5 pl-4 pr-1 text-sm h-[80%] text-gray-800 leading-7 space-x-2 break-all whitespace-normal truncate w-full overflow-y-hidden absolute"
class="pl-1 pr-1 text-sm h-[80%] text-gray-800 leading-7 space-x-2 break-all whitespace-normal truncate w-full overflow-y-hidden"
>
<slot />
</span>

1
packages/nc-gui/components/smartsheet/calendar/WeekView/DateField.vue

@ -584,7 +584,6 @@ const dropEvent = (event: DragEvent) => {
>
<template v-if="!isRowEmpty(record, displayField)">
<LazySmartsheetCalendarCell
v-if="!isRowEmpty(record, displayField!)"
v-model="record.row[displayField!.title!]"
:bold="getFieldStyle(displayField).bold"
:column="displayField"

140
packages/nc-gui/components/smartsheet/calendar/WeekView/DateTimeField.vue

@ -99,7 +99,7 @@ const recordsAcrossAllRange = computed<{
const scheduleStart = dayjs(selectedDateRange.value.start).startOf('day')
const scheduleEnd = dayjs(selectedDateRange.value.end).endOf('day')
// We need to keep track of the overlaps for each day and hour in the week to calculate the width and left position of each record
// We need to keep track of the overlaps for each day and hour, minute in the week to calculate the width and left position of each record
// The first key is the date, the second key is the hour, and the value is an object containing the ids of the records that overlap
// The key is in the format YYYY-MM-DD and the hour is in the format HH:mm
const overlaps: {
@ -137,61 +137,83 @@ const recordsAcrossAllRange = computed<{
sortedFormattedData.forEach((record: Row) => {
if (!toCol && fromCol) {
// If there is no toColumn chosen in the range
const startDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
if (!startDate) return
const ogStartDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
if (!ogStartDate) return
// Hour Key currently is set as start of the hour
// TODO: Need to work on the granularity of the hour
const dateKey = startDate?.format('YYYY-MM-DD')
const hourKey = startDate?.startOf('hour').format('HH:mm')
let endDate = ogStartDate.clone().add(1, 'hour')
if (endDate.isAfter(scheduleEnd, 'minutes')) {
endDate = scheduleEnd
}
const id = record.rowMeta.id ?? generateRandomNumber()
let startDate = ogStartDate.clone()
let style: Partial<CSSStyleDeclaration> = {}
// If the dateKey and hourKey are valid, we add the id to the overlaps object
if (dateKey && hourKey) {
if (!overlaps[dateKey]) {
overlaps[dateKey] = {}
}
if (!overlaps[dateKey][hourKey]) {
overlaps[dateKey][hourKey] = {
id: [],
overflow: false,
overflowCount: 0,
while (startDate.isBefore(endDate, 'minutes')) {
const dateKey = startDate?.format('YYYY-MM-DD')
const hourKey = startDate?.format('HH:mm')
// If the dateKey and hourKey are valid, we add the id to the overlaps object
if (dateKey && hourKey) {
if (!overlaps[dateKey]) {
overlaps[dateKey] = {}
}
if (!overlaps[dateKey][hourKey]) {
overlaps[dateKey][hourKey] = {
id: [],
overflow: false,
overflowCount: 0,
}
}
overlaps[dateKey][hourKey].id.push(id)
}
// If the number of records that overlap in a single hour is more than 4, we hide the record and set the overflow flag to true
// We also keep track of the number of records that overflow
if (overlaps[dateKey][hourKey].id.length > 4) {
overlaps[dateKey][hourKey].overflow = true
style.display = 'none'
overlaps[dateKey][hourKey].overflowCount += 1
}
overlaps[dateKey][hourKey].id.push(id)
}
// If the number of records that overlap in a single hour is more than 4, we hide the record and set the overflow flag to true
// We also keep track of the number of records that overflow
if (overlaps[dateKey][hourKey].id.length > 4) {
overlaps[dateKey][hourKey].overflow = true
style.display = 'none'
overlaps[dateKey][hourKey].overflowCount += 1
// TODO: dayIndex is not calculated perfectly
// Should revisit this part in next iteration
let dayIndex = dayjs(dateKey).day() - 1
if (dayIndex === -1) {
dayIndex = 6
}
startDate = startDate.add(1, 'minute')
}
// TODO: dayIndex is not calculated perfectly
// Should revisit this part in next iteration
let dayIndex = dayjs(dateKey).day() - 1
let dayIndex = ogStartDate.day() - 1
if (dayIndex === -1) {
dayIndex = 6
}
const hourKey = ogStartDate.format('HH:mm')
// We calculate the index of the hour in the day and set the top and height of the record
const hourIndex = Math.min(
Math.max(
datesHours.value[dayIndex].findIndex((h) => h.startOf('hour').format('HH:mm') === hourKey),
datesHours.value[dayIndex]?.findIndex((h) => h.startOf('hour').format('HH:mm') === hourKey),
0,
),
23,
)
const minutes = ogStartDate.minute() + ogStartDate.hour() * 60
const topPx = (minutes * perHeight) / 60
style = {
...style,
top: `${hourIndex * perHeight - hourIndex - hourIndex * 0.15}px`,
height: `${perHeight - 2}px`,
top: `${topPx - hourIndex - hourIndex * 0.15 + 0.7}px`,
height: `${perHeight - 4}px`,
}
recordsToDisplay.push({
@ -353,14 +375,14 @@ const recordsAcrossAllRange = computed<{
overlapIndex = Math.max(overlapIndex, overlaps[dateKey][hours].id.indexOf(record.rowMeta.id!))
}
}
const spacing = 1
const spacing = 0.1
const widthPerRecord = (100 - spacing * (maxOverlaps - 1)) / maxOverlaps / 7
const leftPerRecord = widthPerRecord * overlapIndex
record.rowMeta.style = {
...record.rowMeta.style,
left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}%)`,
width: `calc(${widthPerRecord}%)`,
left: `calc(${dayIndex * perWidth}px + ${leftPerRecord}% )`,
width: `calc(${widthPerRecord - 0.1}%)`,
}
return record
})
@ -504,7 +526,7 @@ const calculateNewRow = (
const { scrollHeight } = container.value
const percentX = (event.clientX - left - window.scrollX) / width
const percentY = (event.clientY - top + container.value.scrollTop) / scrollHeight
const percentY = (event.clientY - top + container.value.scrollTop - 36.8) / scrollHeight
const fromCol = dragRecord.value.rowMeta.range?.fk_from_col
const toCol = dragRecord.value.rowMeta.range?.fk_to_col
@ -514,7 +536,9 @@ const calculateNewRow = (
const day = Math.max(0, Math.min(6, Math.floor(percentX * 7)))
const hour = Math.max(0, Math.min(23, Math.floor(percentY * 24)))
const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour')
const minutes = Math.round(((percentY * 24 * 60) % 60) / 15) * 15
const newStartDate = dayjs(selectedDateRange.value.start).add(day, 'day').add(hour, 'hour').add(minutes, 'minute')
if (!newStartDate) return { newRow: null, updatedProperty: [] }
let endDate
@ -573,9 +597,9 @@ const onDrag = (event: MouseEvent) => {
const scrollBottomThreshold = 20
if (event.clientY > containerRect.bottom - scrollBottomThreshold) {
scrollContainer.value.scrollTop += 10
scrollContainer.value.scrollTop += 20
} else if (event.clientY < containerRect.top + scrollBottomThreshold) {
scrollContainer.value.scrollTop -= 10
scrollContainer.value.scrollTop -= 20
}
calculateNewRow(event)
@ -678,6 +702,36 @@ const viewMore = (hour: dayjs.Dayjs) => {
selectedTime.value = hour
showSideMenu.value = true
}
const isOverflowAcrossHourRange = (hour: dayjs.Dayjs) => {
let startOfHour = hour.startOf('hour')
const endOfHour = hour.endOf('hour')
const ids: Array<string> = []
let isOverflow = false
let overflowCount = 0
while (startOfHour.isBefore(endOfHour, 'minute')) {
const dateKey = startOfHour.format('YYYY-MM-DD')
const hourKey = startOfHour.format('HH:mm')
if (recordsAcrossAllRange.value?.count?.[dateKey]?.[hourKey]?.overflow) {
isOverflow = true
recordsAcrossAllRange.value?.count?.[dateKey]?.[hourKey]?.id.forEach((id) => {
if (!ids.includes(id)) {
ids.push(id)
overflowCount += 1
}
})
}
startOfHour = startOfHour.add(1, 'minute')
}
overflowCount = overflowCount > 4 ? overflowCount - 4 : 0
return { isOverflow, overflowCount }
}
</script>
<template>
@ -694,7 +748,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
:class="{
'text-brand-500': date[0].isSame(dayjs(), 'date'),
}"
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-200 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50"
class="w-1/7 text-center text-sm text-gray-500 w-full py-1 border-gray-100 last:border-r-0 border-b-0 border-l-1 border-r-0 bg-gray-50"
>
{{ dayjs(date[0]).format('DD ddd') }}
</div>
@ -709,14 +763,14 @@ const viewMore = (hour: dayjs.Dayjs) => {
</div>
</div>
<div ref="container" class="absolute ml-16 flex w-[calc(100%-64px)]">
<div v-for="(date, index) in datesHours" :key="index" class="h-full w-1/7" data-testid="nc-calendar-week-day">
<div v-for="(date, index) in datesHours" :key="index" class="h-full w-1/7 mt-7.1" data-testid="nc-calendar-week-day">
<div
v-for="(hour, hourIndex) in date"
:key="hourIndex"
:class="{
'border-1 !border-brand-500 bg-gray-50': hour.isSame(selectedTime, 'hour'),
}"
class="text-center relative first:mt-7.1 h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-200 border-t-gray-200"
class="text-center relative h-20 text-sm text-gray-500 w-full hover:bg-gray-50 py-1 border-transparent border-1 border-x-gray-100 border-t-gray-100"
data-testid="nc-calendar-week-hour"
@click="
() => {
@ -726,7 +780,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
"
>
<NcButton
v-if="recordsAcrossAllRange?.count?.[hour.format('YYYY-MM-DD')]?.[hour.format('HH:mm')]?.overflow"
v-if="isOverflowAcrossHourRange(hour).isOverflow"
class="!absolute bottom-1 text-center w-15 ml-auto inset-x-0 z-3 text-gray-500"
size="xxsmall"
type="secondary"
@ -734,7 +788,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
>
<span class="text-xs">
+
{{ recordsAcrossAllRange?.count[hour.format('YYYY-MM-DD')][hour.format('HH:mm')]?.overflowCount }}
{{ isOverflowAcrossHourRange(hour).overflowCount }}
more
</span>
</NcButton>

9
packages/nc-gui/components/smartsheet/calendar/index.vue

@ -140,6 +140,11 @@ const goToToday = () => {
start: dayjs().startOf('week'),
end: dayjs().endOf('week'),
}
document?.querySelector('.nc-calendar-today')?.scrollIntoView({
behavior: 'smooth',
block: 'center',
})
}
const headerText = computed(() => {
@ -237,7 +242,9 @@ const headerText = computed(() => {
type="secondary"
@click="goToToday"
>
{{ $t('activity.goToToday') }}
<span class="text-gray-700">
{{ $t('activity.goToToday') }}
</span>
</NcButton>
<span class="opacity-0" data-testid="nc-active-calendar-view">
{{ activeCalendarView }}

3
packages/nc-gui/utils/iconUtils.ts

@ -128,6 +128,9 @@ import NcItalic from '~icons/nc-icons/italic'
import NcBold from '~icons/nc-icons/bold'
import NcUnderline from '~icons/nc-icons/underline'
import NcCrop from '~icons/nc-icons/crop'
import NcItalic from '~icons/nc-icons/italic'
import NcBold from '~icons/nc-icons/bold'
import NcUnderline from '~icons/nc-icons/underline'
// keep it for reference
// todo: remove it after all icons are migrated

Loading…
Cancel
Save