fix(nc-gui): sidebar search loading and empty state

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

@@ -31,7 +31,6 @@ const hours = computed(() => {
 })
 
 const renderData = computed(() => {
-  console.log(data.value)
   if (data.value) {
     return data.value
   }
@@ -40,7 +39,7 @@ const renderData = computed(() => {
 </script>
 
 <template>
-  <template v-if="filteredData && filteredData.length">
+  <template v-if="filteredData && filteredData.length && displayField.title && calendarRange[0].fk_from_col">
     <div
       v-if="calDataType === UITypes.Date"
       :class="{
@@ -49,7 +48,7 @@ const renderData = computed(() => {
       }"
       class="flex flex-col pt-3 gap-2 h-full w-full px-1"
     >
-      <LazySmartsheetRow v-for="(record, rowIndex) in renderData" :row="record">
+      <LazySmartsheetRow v-for="(record, rowIndex) in renderData" :key="rowIndex" :row="record">
         <LazySmartsheetCalendarRecordCard
           :key="rowIndex"
           :date="record.row[calendarRange[0].fk_from_col.title]"

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

@@ -22,6 +22,7 @@ const {
   selectedDateRange,
   activeDates,
   activeCalendarView,
+  isSidebarLoading,
   formattedSideBarData,
   calDataType,
   loadMoreSidebarData,
@@ -125,15 +126,23 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
         <span class="text-2xl font-bold">{{ t('objects.Records') }}</span>
         <NcSelect v-model:value="sideBarFilterOption" :options="options" />
       </div>
-      <a-input
-        v-model:value="searchQuery.value"
-        class="!rounded-lg !border-gray-200 !px-4 !py-2"
-        placeholder="Search your records"
-      >
-        <template #prefix>
-          <component :is="iconMap.search" class="h-4 w-4 mr-1 text-gray-500" />
-        </template>
-      </a-input>
+      <div class="flex items-center gap-3">
+        <a-input
+          v-model:value="searchQuery.value"
+          class="!rounded-lg !border-gray-200 !px-4 !py-2"
+          placeholder="Search your records"
+        >
+          <template #prefix>
+            <component :is="iconMap.search" class="h-4 w-4 mr-1 text-gray-500" />
+          </template>
+        </a-input>
+        <NcButton type="secondary">
+          <div class="px-4 flex items-center gap-2 justify-center">
+            <component :is="iconMap.plus" class="h-4 w-4 text-gray-700" />
+            {{ t('activity.newRecord') }}
+          </div>
+        </NcButton>
+      </div>
 
       <div
         v-if="displayField && calendarRange && calendarRange.length"
@@ -145,14 +154,23 @@ const sideBarListScrollHandle = useDebounceFn(async (e: Event) => {
         class="gap-2 flex flex-col nc-scrollbar-md overflow-y-auto nc-calendar-top-height"
         @scroll="sideBarListScrollHandle"
       >
-        <LazySmartsheetRow v-for="(record, rowIndex) in formattedSideBarData" :key="rowIndex" :row="record">
-          <LazySmartsheetCalendarSideRecordCard
-            :date="record.row[calendarRange[0].fk_from_col.title]"
-            :name="record.row[displayField.title]"
-            color="blue"
-            @click="emit('expand-record', record)"
-          />
-        </LazySmartsheetRow>
+        <div v-if="formattedSideBarData.length === 0 || isSidebarLoading" class="flex h-full items-center justify-center">
+          <GeneralLoader v-if="isSidebarLoading" size="large" />
+
+          <div v-else class="text-gray-500">
+            {{ t('msg.noRecordsFound') }}
+          </div>
+        </div>
+        <template v-else-if="formattedSideBarData.length > 0">
+          <LazySmartsheetRow v-for="(record, rowIndex) in formattedSideBarData" :key="rowIndex" :row="record">
+            <LazySmartsheetCalendarSideRecordCard
+              :date="record.row[calendarRange[0].fk_from_col.title]"
+              :name="record.row[displayField.title]"
+              color="blue"
+              @click="emit('expand-record', record)"
+            />
+          </LazySmartsheetRow>
+        </template>
       </div>
     </div>
   </div>

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

@@ -2,7 +2,6 @@
 import dayjs from 'dayjs'
 import {
   ActiveViewInj,
-  CalendarViewTypeInj,
   IsCalendarInj,
   IsFormInj,
   IsGalleryInj,
@@ -42,24 +41,20 @@ provide(IsKanbanInj, ref(false))
 provide(IsCalendarInj, ref(true))
 
 const {
-  formattedData,
   loadCalendarMeta,
   loadCalendarData,
   isCalendarDataLoading,
-  updateCalendarMeta,
-  calendarMetaData,
   selectedDate,
   selectedDateRange,
   activeCalendarView,
-  addEmptyRow,
-  paginationData,
   paginateCalendarView,
 } = useCalendarViewStoreOrThrow()
 
-provide(CalendarViewTypeInj, activeCalendarView)
-
 const showSideMenu = ref(true)
 
+const router = useRouter()
+const route = useRoute()
+
 const expandedFormOnRowIdDlg = computed({
   get() {
     return !!route.query.rowId
@@ -77,12 +72,8 @@ const expandedFormOnRowIdDlg = computed({
 
 const expandedFormDlg = ref(false)
 const expandedFormRow = ref<RowType>()
-const expandedFormRowState = ref<Record<string, any>>()
-
-const router = useRouter()
-const route = useRoute()
 
-const expandRecord = (row: RowType) => {
+const expandRecord = (row: RowType, isNew = false) => {
   const rowId = extractPkFromRow(row.row, meta.value!.columns!)
 
   if (rowId) {
@@ -94,7 +85,6 @@ const expandRecord = (row: RowType) => {
     })
   } else {
     expandedFormRow.value = row
-    expandedFormRowState.value = state
     expandedFormDlg.value = true
   }
 }
@@ -142,13 +132,7 @@ const headerText = computed(() => {
           </NcButton>
         </div>
         <NcButton v-if="!isMobileMode" size="small" type="secondary" @click="showSideMenu = !showSideMenu">
-          <component
-            :is="iconMap.sidebarMinimise"
-            :class="{
-              'transform rotate-180': showSideMenu,
-            }"
-            class="h-4 w-4 transition-all"
-          />
+          <component :is="iconMap.sidebar" class="h-4 w-4 text-gray-700 transition-all" />
         </NcButton>
       </div>
       <LazySmartsheetCalendarYearView v-if="activeCalendarView === 'year'" class="flex-grow-1" />

packages/nc-gui/composables/useCalendarViewStore.ts

@@ -54,6 +54,8 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     const formattedSideBarData = ref<Row[]>([])
 
+    const isSidebarLoading = ref<boolean>(false)
+
     const sideBarFilterOption = ref<string>(activeCalendarView.value)
 
     const { api } = useApi()
@@ -280,8 +282,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       // TODO: Fetch Calendar Meta
       const res = isPublic.value ? (sharedView.value?.view as CalendarType) : await $api.dbView.calendarRead(viewMeta.value.id)
       calendarMetaData.value = res
-      activeCalendarView.value =
-        typeof res.meta === 'string' ? JSON.parse(res.meta)?.active_view : res.meta?.active_view ?? 'month'
+      activeCalendarView.value = typeof res.meta === 'string' ? JSON.parse(res.meta)?.active_view : res.meta?.active_view
       calDataType.value = calendarRange.value[0].fk_from_col.uidt
     }
 
@@ -376,29 +377,28 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
 
     const loadSidebarData = async () => {
       if (!base?.value?.id || !meta.value?.id || !viewMeta.value?.id) return
+      isSidebarLoading.value = true
       const res = await api.dbViewRow.list('noco', base.value.id!, meta.value!.id!, viewMeta.value!.id!, {
         ...queryParams.value,
         ...{},
         where: sideBarxWhere?.value,
       })
       formattedSideBarData.value = formatData(res!.list)
+      isSidebarLoading.value = false
     }
 
     watch(selectedDate, async () => {
-      await loadCalendarData()
-      await loadSidebarData()
+      await Promise.all([loadCalendarData(), loadSidebarData()])
     })
 
     watch(selectedDateRange, async () => {
       if (activeCalendarView.value !== 'week') return
-      await loadCalendarData()
-      await loadSidebarData()
+      await Promise.all([loadCalendarData(), loadSidebarData()])
     })
 
     watch(activeCalendarView, async () => {
       sideBarFilterOption.value = activeCalendarView.value ?? 'allRecords'
-      await loadCalendarData()
-      await loadSidebarData()
+      await Promise.all([loadCalendarData(), loadSidebarData()])
     })
 
     watch(sideBarFilterOption, async () => {
@@ -422,6 +422,7 @@ const [useProvideCalendarViewStore, useCalendarViewStore] = useInjectionState(
       loadCalendarMeta,
       calendarRange,
       loadCalendarData,
+      isSidebarLoading,
       updateCalendarMeta,
       calendarMetaData,
       activeCalendarView,

packages/nc-gui/utils/iconUtils.ts

@@ -7,6 +7,7 @@ import MdiStar from '~icons/mdi/star'
 import MdiStarOutline from '~icons/mdi/star-outline'
 import MdiHeart from '~icons/mdi/heart'
 import MdiHeartOutline from '~icons/mdi/heart-outline'
+import LayoutSidebar from '~icons/tabler/layout-sidebar'
 import MdiMoonFull from '~icons/mdi/moon-full'
 import MdiMoonNew from '~icons/mdi/moon-new'
 import MdiThumbUp from '~icons/mdi/thumb-up'
@@ -363,6 +364,7 @@ export const iconMap = {
   arrowLeft: Left,
   arrowUp: Up,
   layout: PhLayout,
+  sidebar: LayoutSidebar,
   doubleRightArrow: h('span', { class: 'material-symbols', style: '-webkit-text-stroke: 0.5px' }, 'keyboard_double_arrow_right'),
   doubleLeftArrow: h('span', { class: 'material-symbols', style: '-webkit-text-stroke: 0.5px' }, 'keyboard_double_arrow_left'),
   sidebarMinimise: PhCaretDoubleLeftThin, // h('span', { class: 'material-symbols' }, 'left_panel_close'),