refactor(gui): bring back missing code

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/smartsheet/Gallery.vue

@@ -160,9 +160,10 @@ onMounted(async () => {
 // provide view data reload hook as fallback to row data reload
 provide(ReloadRowDataHookInj, reloadViewDataHook)
 
-watch(view, (nextView) => {
-  if (nextView?.type === ViewTypes.FORM) {
-    reloadEventHook.trigger()
+watch(view, async (nextView) => {
+  if (nextView?.type === ViewTypes.GALLERY) {
+    await loadData()
+    await loadGalleryData()
   }
 })
 </script>

packages/nc-gui/components/smartsheet/Grid.vue

@@ -230,6 +230,7 @@ useEventListener(document, 'keyup', async (e: KeyboardEvent) => {
 /** On clicking outside of table reset active cell  */
 const smartTable = ref(null)
 onClickOutside(smartTable, () => {
+  clearRangeRows()
   if (selected.col === null) return
 
   const activeCol = fields.value[selected.col]
@@ -411,7 +412,8 @@ watch(
               </th>
             </tr>
           </thead>
-          <tbody>
+          <!-- this prevent select text from field if not in edit mode -->
+          <tbody @selectstart.prevent>
             <LazySmartsheetRow v-for="(row, rowIndex) of data" ref="rowRefs" :key="rowIndex" :row="row">
               <template #default="{ state }">
                 <tr class="nc-grid-row">
@@ -460,14 +462,17 @@ watch(
                     :key="columnObj.id"
                     class="cell relative cursor-pointer nc-grid-cell"
                     :class="{
-                      active: isUIAllowed('xcDatatableEditable') && selected.col === colIndex && selected.row === rowIndex,
+                      active:
+                        (isUIAllowed('xcDatatableEditable') && selected.col === colIndex && selected.row === rowIndex) ||
+                        (isUIAllowed('xcDatatableEditable') && selectedRange(rowIndex, colIndex)),
                     }"
                     :data-key="rowIndex + columnObj.id"
                     :data-col="columnObj.id"
                     :data-title="columnObj.title"
                     @click="selectCell(rowIndex, colIndex)"
                     @dblclick="makeEditable(row, columnObj)"
-                    @contextmenu="showContextMenu($event, { row: rowIndex, col: colIndex })"
+                    @mousedown="startSelectRange($event, rowIndex, colIndex)"
+                    @mouseover="selectBlock(rowIndex, colIndex)"
                   >
                     <div class="w-full h-full">
                       <LazySmartsheetVirtualCell
@@ -483,12 +488,7 @@ watch(
                         v-else
                         v-model="row.row[columnObj.title]"
                         :column="columnObj"
-                        :edit-enabled="
-                          isUIAllowed('xcDatatableEditable') &&
-                          editEnabled &&
-                          selected.col === colIndex &&
-                          selected.row === rowIndex
-                        "
+                        :edit-enabled="hasEditPermission && editEnabled && selected.col === colIndex && selected.row === rowIndex"
                         :row-index="rowIndex"
                         :active="selected.col === colIndex && selected.row === rowIndex"
                         @update:edit-enabled="editEnabled = false"
@@ -502,7 +502,7 @@ watch(
               </template>
             </LazySmartsheetRow>
 
-            <tr v-if="!isView && !isLocked && isUIAllowed('xcDatatableEditable') && !isSqlView">
+            <tr v-if="!isView && !isLocked && hasEditPermission && !isSqlView">
               <td
                 v-e="['c:row:add:grid-bottom']"
                 :colspan="visibleColLength + 1"
@@ -521,7 +521,7 @@ watch(
           </tbody>
         </table>
 
-        <template v-if="!isLocked && isUIAllowed('xcDatatableEditable')" #overlay>
+        <template v-if="!isLocked && hasEditPermission" #overlay>
           <a-menu class="shadow !rounded !py-0" @click="contextMenu = false">
             <a-menu-item v-if="contextMenuTarget" @click="deleteRow(contextMenuTarget.row)">
               <div v-e="['a:row:delete']" class="nc-project-menu-item">

packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue

@@ -43,8 +43,6 @@ const { api } = useApi()
 
 const router = useRouter()
 
-const route = useRoute()
-
 /** Selected view(s) for menu */
 const selected = ref<string[]>([])
 
@@ -225,7 +223,7 @@ watch(views, (nextViews) => {
 <template>
   <a-menu ref="menuRef" :class="{ dragging }" class="nc-views-menu flex-1" :selected-keys="selected">
     <LazySmartsheetSidebarRenameableMenuItem
-      v-for="(view, index) of views"
+      v-for="view of views"
       :id="view.id"
       :key="view.id"
       :view="view"
@@ -233,8 +231,7 @@ watch(views, (nextViews) => {
       class="transition-all ease-in duration-300"
       :class="{
         'bg-gray-100': isMarked === view.id,
-        'active':
-          (route.params.viewTitle && route.params.viewTitle === view.title) || (route.params.viewTitle === '' && index === 0),
+        'active': activeView.id === view.id,
         [`nc-view-item nc-${viewTypeAlias[view.type] || view.type}-view-item`]: true,
       }"
       @change-view="changeView"

packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue

@@ -142,7 +142,7 @@ const getIcon = (c: ColumnType) =>
           <a-select
             v-model:value="coverImageColumnId"
             class="w-full"
-            :options="coverOptions ?? []"
+            :options="coverOptions"
             dropdown-class-name="nc-dropdown-cover-image"
             @click.stop
           />

packages/nc-gui/pages/[projectType]/[projectId]/index/index/[type]/[title]/[[viewTitle]].vue

@@ -15,16 +15,10 @@ const activeTab = inject(
   computed(() => ({} as TabItem)),
 )
 
-/** wait until table list loads since meta load requires table list **/
-// until(tables)
-//   .toMatch((tables) => tables.length > 0)
-//   .then(() => {
-//     getMeta(route.params.title as string, true).finally(() => (loading.value = false))
-//   })
-
 watch(
   () => route.params.title,
   (tableTitle) => {
+    /** wait until table list loads since meta load requires table list **/
     until(tables)
       .toMatch((tables) => tables.length > 0)
       .then(() => {
@@ -37,10 +31,6 @@ watch(
 
 <template>
   <div class="w-full h-full">
-    <!--    <div v-if="loading" class="flex items-center justify-center h-full w-full"> -->
-    <!--      <a-spin size="large" /> -->
-    <!--    </div> -->
-
     <LazyTabsSmartsheet :active-tab="activeTab" />
   </div>
 </template>

packages/nc-gui/pages/[projectType]/form/[viewId]/index.vue

@@ -14,7 +14,6 @@ const {
   passwordDlg,
   password,
   loadSharedView,
-  isLoading,
 } = useSharedFormStoreOrThrow()
 
 function isRequired(_columnObj: Record<string, any>, required = false) {