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,87 +14,112 @@ 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>
-  <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)">
-      <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
-        <component
-          :is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
-          trigger="click"
-          destroy-popup-on-hide
-          class="flex items-center"
-          @click.stop
-        >
-          <div class="flex items-center" @click.stop>
-            <component :is="isUIAllowed('tableIconCustomisation') ? Tooltip : 'div'">
-              <span v-if="table.meta?.icon" :key="table.meta?.icon" class="nc-table-icon flex items-center">
-                <Icon
-                  :key="table.meta?.icon"
-                  :data-testid="`nc-icon-${table.meta?.icon}`"
-                  class="text-xl"
-                  :icon="table.meta?.icon"
-                ></Icon>
-              </span>
-              <component
-                :is="icon(table)"
-                v-else
-                class="nc-table-icon nc-view-icon w-5"
-                :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
-              />
+  <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)">
+        <div class="flex w-auto" :data-testid="`tree-view-table-draggable-handle-${table.title}`">
+          <component
+            :is="isUIAllowed('tableIconCustomisation') ? Dropdown : 'div'"
+            trigger="click"
+            destroy-popup-on-hide
+            class="flex items-center"
+            @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
+                    :key="table.meta?.icon"
+                    :data-testid="`nc-icon-${table.meta?.icon}`"
+                    class="text-xl"
+                    :icon="table.meta?.icon"
+                  ></Icon>
+                </span>
+                <component
+                  :is="icon(table)"
+                  v-else
+                  class="nc-table-icon nc-view-icon w-5"
+                  :class="{ 'group-hover:text-gray-500': isUIAllowed('treeview-drag-n-drop') }"
+                />
 
-              <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
-            </component>
-          </div>
-          <template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
-            <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
-          </template>
-        </component>
-      </div>
+                <template v-if="isUIAllowed('tableIconCustomisation')" #title>Change icon</template>
+              </component>
+            </div>
+            <template v-if="isUIAllowed('tableIconCustomisation')" #overlay>
+              <GeneralEmojiIcons class="shadow bg-white p-2" @select-icon="setIcon($event, table)" />
+            </template>
+          </component>
+        </div>
 
-      <div class="nc-tbl-title flex-1">
-        <GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{
-          table.title
-        }}</GeneralTruncateText>
-      </div>
+        <div class="nc-tbl-title flex-1">
+          <GeneralTruncateText :key="table.title" :length="activeTable === table.id ? 18 : 20">{{
+            table.title
+          }}</GeneralTruncateText>
+        </div>
 
-      <a-dropdown
-        v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
-        :trigger="['click']"
-        @click.stop
-      >
-        <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
+        <a-dropdown
+          v-if="!isSharedBase && (isUIAllowed('table-rename') || isUIAllowed('table-delete'))"
+          :trigger="['click']"
+          @click.stop
+        >
+          <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 outline-0" />
 
-        <template #overlay>
-          <a-menu class="!py-0 rounded text-sm">
-            <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, bases[0].id)">
-              <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
-                {{ $t('general.rename') }}
-              </div>
-            </a-menu-item>
+          <template #overlay>
+            <a-menu class="!py-0 rounded text-sm">
+              <a-menu-item v-if="isUIAllowed('table-rename')" @click="openRenameTableDialog(table, bases[0].id)">
+                <div class="nc-project-menu-item" :data-testid="`sidebar-table-rename-${table.title}`">
+                  {{ $t('general.rename') }}
+                </div>
+              </a-menu-item>
 
-            <a-menu-item
-              v-if="isUIAllowed('table-delete')"
-              :data-testid="`sidebar-table-delete-${table.title}`"
-              @click="deleteTable(table)"
-            >
-              <div class="nc-project-menu-item">
-                {{ $t('general.delete') }}
-              </div>
-            </a-menu-item>
-          </a-menu>
-        </template>
-      </a-dropdown>
-    </div>
-  </GeneralTooltip>
+              <a-menu-item
+                v-if="isUIAllowed('table-delete')"
+                :data-testid="`sidebar-table-delete-${table.title}`"
+                @click="deleteTable(table)"
+              >
+                <div class="nc-project-menu-item">
+                  {{ $t('general.delete') }}
+                </div>
+              </a-menu-item>
+            </a-menu>
+          </template>
+        </a-dropdown>
+      </div>
+    </GeneralTooltip>
+    <ul :style="{ marginLeft: '30px' }">
+      <li v-for="(view, idx) of views" :key="idx">{{ view.title }}</li>
+    </ul>
+  </div>
 </template>