mobile optimisations - put views into the tree view on left sidebar (WIP)

packages/nc-gui/components/dashboard/TreeView.vue

@@ -579,22 +579,20 @@ const setIcon = async (icon: string, table: TableType) => {
                   :key="`sortable-${bases[0].id}-${bases[0].id && bases[0].id in keys ? keys[bases[0].id] : '0'}`"
                   :nc-base="bases[0].id"
                 >
-                  <div
+                  <LazyDashboardTreeViewTableEntry
                     v-for="(table, idx) of tables.filter((table) => table.base_id === bases[0].id)"
-                    :key="table.id"
-                    v-e="['a:table:open']"
+                    :key="idx"
+                    v-model="tables[idx]"
                     :class="[
                       { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
                       `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
                     ]"
-                    class="nc-tree-item text-sm cursor-pointer group"
-                    :data-order="table.order"
-                    :data-id="table.id"
-                    :data-testid="`tree-view-table-${table.title}`"
-                    @click="addTableTab(table)"
-                  >
-                    <LazyDashboardTreeViewTableEntry v-model="tables[idx]" :set-menu-context="setMenuContext" :icon="icon" :set-icon="setIcon" :active-table="activeTable" :open-rename-table-dialog="openRenameTableDialog" />
-                  </div>
+                    :set-menu-context="setMenuContext"
+                    :icon="icon"
+                    :set-icon="setIcon"
+                    :active-table="activeTable"
+                    :open-rename-table-dialog="openRenameTableDialog"
+                  />
                 </div>
               </div>
             </div>

packages/nc-gui/components/dashboard/TreeViewTableEntry.vue

@@ -14,17 +14,37 @@ const props = defineProps<{
   openRenameTableDialog: (table: TableType, baseId?: string | undefined, rightClick?: boolean) => void
 }>()
 
+const table = useVModel(props, 'modelValue') // , emits)
+
 const { deleteTable } = useTable()
+// const { views, loadViews, isLoading } = useViews(table)
+const { views } = useViews(table)
 
-// const emits = defineEmits(['update:modelValue'])
+// onMounted(async () => {
+//   await loadViews()
+//   loadViews()
+// })
 
-const table = useVModel(props, 'modelValue') // , emits)
+// const emits = defineEmits(['update:modelValue'])
 
 // const { bases, isSharedBase } = useProject()
 const { isUIAllowed } = useUIPermission()
 </script>
 
 <template>
+  <div
+    :key="table.id"
+    v-e="['a:table:open']"
+    :class="[
+      { hidden: !filteredTables?.includes(table), active: activeTable === table.id },
+      `nc-project-tree-tbl nc-project-tree-tbl-${table.title}`,
+    ]"
+    class="nc-tree-item text-sm cursor-pointer group"
+    :data-order="table.order"
+    :data-id="table.id"
+    :data-testid="`tree-view-table-${table.title}`"
+    @click="addTableTab(table)"
+  >
     <GeneralTooltip class="pl-2 pr-3 py-2" modifier-key="Alt">
       <template #title>{{ table.table_name }}</template>
       <div class="flex items-center gap-2 h-full" @contextmenu="setMenuContext('table', table)">
@@ -37,6 +57,7 @@ const { isUIAllowed } = useUIPermission()
             @click.stop
           >
             <div class="flex items-center" @click.stop>
+              <!-- <div>views: {{ JSON.stringify(views) }}</div> -->
               <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
                 <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
                   <Icon
@@ -97,4 +118,8 @@ const { isUIAllowed } = useUIPermission()
         </a-dropdown>
       </div>
     </GeneralTooltip>
+    <ul :style="{ marginLeft: '30px' }">
+      <li v-for="(view, idx) of views" :key="idx">{{ view.title }}</li>
+    </ul>
+  </div>
 </template>