fix(nc-gui): ui bugs

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

@@ -2,13 +2,9 @@
 import dayjs from 'dayjs'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import { type Row, computed, ref } from '#imports'
-import { isRowEmpty } from '~/utils'
+import { generateRandomNumber, isRowEmpty } from '~/utils'
 
 const emit = defineEmits(['expandRecord', 'new-record'])
-const meta = inject(MetaInj, ref())
-const container = ref()
-
-const { isUIAllowed } = useRoles()
 
 const {
   selectedDate,
@@ -22,6 +18,11 @@ const {
   showSideMenu,
 } = useCalendarViewStoreOrThrow()
 
+const container = ref<null | HTMLElement>(null)
+
+const { isUIAllowed } = useRoles()
+const meta = inject(MetaInj, ref())
+
 const hours = computed(() => {
   const hours: Array<dayjs.Dayjs> = []
   const _selectedDate = dayjs(selectedDate.value)
@@ -32,12 +33,6 @@ const hours = computed(() => {
   return hours
 })
 
-function getRandomNumbers() {
-  const typedArray = new Uint8Array(10)
-  const randomValues = window.crypto.getRandomValues(typedArray)
-  return randomValues.join('')
-}
-
 const recordsAcrossAllRange = computed<{
   record: Row[]
   count: {
@@ -85,7 +80,7 @@ const recordsAcrossAllRange = computed<{
 
     if (fromCol && endCol) {
       for (const record of sortedFormattedData) {
-        const id = getRandomNumbers()
+        const id = generateRandomNumber()
         let startDate = dayjs(record.row[fromCol.title!])
         let endDate = dayjs(record.row[endCol.title!])
 
@@ -164,7 +159,7 @@ const recordsAcrossAllRange = computed<{
       }
     } else if (fromCol) {
       for (const record of sortedFormattedData) {
-        const id = getRandomNumbers()
+        const id = generateRandomNumber()
 
         const startDate = dayjs(record.row[fromCol.title!])
         const endDate = dayjs(record.row[fromCol.title!]).add(15, 'minutes')
@@ -728,9 +723,7 @@ const viewMore = (hour: dayjs.Dayjs) => {
     </div>
   </div>
 
-  <div v-else ref="container" class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center">
-    No records in this day
-  </div>
+  <div v-else class="w-full h-full flex text-md font-bold text-gray-500 items-center justify-center">No records in this day</div>
 </template>
 
 <style lang="scss" scoped>

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

@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Row } from '#imports'
-import { isRowEmpty } from '~/utils'
+import { generateRandomNumber, isRowEmpty } from '~/utils'
 
 const emit = defineEmits(['new-record', 'expandRecord'])
 
@@ -82,12 +82,6 @@ const dates = computed(() => {
   return weeksArray
 })
 
-function getRandomNumbers() {
-  const typedArray = new Uint8Array(10)
-  const randomValues = window.crypto.getRandomValues(typedArray)
-  return randomValues.join('')
-}
-
 const recordsToDisplay = computed<{
   records: Row[]
   count: { [p: string]: { overflow: boolean; count: number; overflowCount: number } }
@@ -137,7 +131,7 @@ const recordsToDisplay = computed<{
           recordsInDay[dateKey] = { overflow: false, count: 0, overflowCount: 0 }
         }
         recordsInDay[dateKey].count++
-        const id = record.rowMeta.id ?? getRandomNumbers()
+        const id = record.rowMeta.id ?? generateRandomNumber()
 
         const weekIndex = dates.value.findIndex((week) => week.some((day) => dayjs(day).isSame(startDate, 'day')))
 
@@ -178,7 +172,7 @@ const recordsToDisplay = computed<{
         const endDate = dayjs(record.row[endCol!.title!])
         let currentWeekStart = startDate.startOf('week')
 
-        const id = record.rowMeta.id ?? getRandomNumbers()
+        const id = record.rowMeta.id ?? generateRandomNumber()
         while (
           currentWeekStart.isSameOrBefore(endDate, 'day') &&
           currentWeekStart.isBefore(dates.value[dates.value.length - 1][6])

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

@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Row } from '~/lib'
 import { ref } from '#imports'
-import { isRowEmpty } from '~/utils'
+import { generateRandomNumber, isRowEmpty } from '~/utils'
 
 const emits = defineEmits(['expandRecord'])
 
@@ -29,12 +29,6 @@ const weekDates = computed(() => {
   return datesArray
 })
 
-function getRandomNumbers() {
-  const typedArray = new Uint8Array(10)
-  const randomValues = window.crypto.getRandomValues(typedArray)
-  return randomValues.join('')
-}
-
 const findFirstSuitableColumn = (recordsInDay: any, startDayIndex: number, spanDays: number) => {
   let column = 0
   while (true) {
@@ -86,7 +80,7 @@ const calendarData = computed(() => {
         if (!startDate.isValid() || !endDate.isValid()) return false
         return !endDate.isBefore(startDate)
       })) {
-        const id = record.row.id ?? getRandomNumbers()
+        const id = record.row.id ?? generateRandomNumber()
         let startDate = dayjs(record.row[fromCol.title!])
         const ogStartDate = startDate.clone()
         const endDate = dayjs(record.row[toCol.title!])
@@ -171,7 +165,7 @@ const calendarData = computed(() => {
       }
     } else if (fromCol) {
       for (const record of formattedData.value) {
-        const id = record.row.id ?? getRandomNumbers()
+        const id = record.row.id ?? generateRandomNumber()
 
         const startDate = dayjs(record.row[fromCol.title!])
         const startDaysDiff = Math.max(startDate.diff(selectedDateRange.value.start, 'day'), 0)

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

@@ -3,7 +3,7 @@ import dayjs from 'dayjs'
 import { UITypes, isVirtualCol } from 'nocodb-sdk'
 import type { Row } from '~/lib'
 import { computed, ref } from '#imports'
-import { isRowEmpty } from '~/utils'
+import { generateRandomNumber, isRowEmpty } from '~/utils'
 
 const emits = defineEmits(['expandRecord'])
 
@@ -53,12 +53,6 @@ const datesHours = computed(() => {
   return datesHours
 })
 
-function getRandomNumbers() {
-  const typedArray = new Uint8Array(10)
-  const randomValues = window.crypto.getRandomValues(typedArray)
-  return randomValues.join('')
-}
-
 const recordsAcrossAllRange = computed<{
   records: Array<Row>
   count: {
@@ -117,7 +111,7 @@ const recordsAcrossAllRange = computed<{
         if (!startDate) return
         const dateKey = startDate?.format('YYYY-MM-DD')
         const hourKey = startDate?.startOf('hour').format('HH:mm')
-        const id = record.rowMeta.id ?? getRandomNumbers()
+        const id = record.rowMeta.id ?? generateRandomNumber()
 
         let style: Partial<CSSStyleDeclaration> = {}
 
@@ -169,7 +163,7 @@ const recordsAcrossAllRange = computed<{
           },
         })
       } else if (fromCol && toCol) {
-        const id = record.rowMeta.id ?? getRandomNumbers()
+        const id = record.rowMeta.id ?? generateRandomNumber()
 
         let startDate = record.row[fromCol.title!] ? dayjs(record.row[fromCol.title!]) : null
         let endDate = record.row[toCol.title!] ? dayjs(record.row[toCol.title!]) : null

packages/nc-gui/composables/useCalendarViewStore.ts

@@ -515,7 +515,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
             ...queryParams.value,
             ...{},
             ...{},
-            ...{ filterArrJson: JSON.stringify([...filterJSON.value, ...activeDateFilter]) },
+            ...{ filterArrJson: JSON.stringify([...activeDateFilter]) },
           })
         : await fetchSharedViewActiveDate({
             sortsArr: sorts.value,
@@ -726,6 +726,8 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
           Object.assign(toUpdate.row, updatedRowData)
           Object.assign(toUpdate.oldRow, updatedRowData)
         }
+
+        await fetchActiveDates()
         return updatedRowData
       } catch (e: any) {
         message.error(`${t('msg.error.rowUpdateFailed')} ${await extractSdkResponseErrorMsg(e)}`)
@@ -744,7 +746,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
           await loadSidebarData()
         }
       } else {
-        await Promise.all([loadSidebarData()])
+        await Promise.all([loadSidebarData(), loadCalendarData()])
       }
 
       if (activeCalendarView.value === 'year' && value.year() !== oldValue.year()) {
@@ -812,6 +814,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     watch(pageDate, async () => {
       if (activeCalendarView.value === 'year') return
+      console.log('pageDate changed')
       await fetchActiveDates()
     })
 

packages/nc-gui/lang/en.json

@@ -439,6 +439,7 @@
     "organizeBy": "Organize by",
     "previous": "Previous",
     "nextMonth": "Next Month",
+    "previousMonth": "Previous Month",
     "next": "Next",
     "organiseBy": "Organise by",
     "heading1": "Heading 1",

packages/nc-gui/utils/generateName.ts

@@ -20,3 +20,9 @@ export const generateUniqueTitle = <T extends Record<string, any> = Record<strin
 
   return `${title}-${c}`
 }
+
+export const generateRandomNumber = () => {
+  const typedArray = new Uint8Array(10)
+  const randomValues = window.crypto.getRandomValues(typedArray)
+  return randomValues.join('')
+}