feat(gui-v2): show view list and show data based on selected view

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

packages/nc-gui-v2/components/cell/Checkbox.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, inject } from '#imports'
-import { ColumnInj, IsFormInj } from "~/components";
+import { ColumnInj, IsFormInj } from '~/components'
 
 interface Props {
-  modelValue: boolean
+  modelValue?: boolean | undefined | number
 }
 
 const { modelValue: value } = defineProps<Props>()

packages/nc-gui-v2/components/cell/Rating.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { computed, inject } from '#imports'
-import { ColumnInj, IsFormInj } from "~/components";
+import { ColumnInj, IsFormInj } from '~/components'
 import MdiStarIcon from '~icons/mdi/star'
 import MdiStarOutlineIcon from '~icons/mdi/star-outline'
 
 interface Props {
-  modelValue: string | number
+  modelValue?: string | number
   readOnly?: boolean
 }
 

packages/nc-gui-v2/components/index.ts

@@ -11,3 +11,4 @@ export const ChangePageInj: InjectionKey<ReturnType<typeof useViewData>['changeP
 export const IsFormInj: InjectionKey<boolean> = Symbol('is-form-injection')
 export const IsGridInj: InjectionKey<boolean> = Symbol('is-grid-injection')
 export const ValueInj: InjectionKey<any> = Symbol('value-injection')
+export const ActiveViewInj: InjectionKey<any> = Symbol('active-view-injection')

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

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { isVirtualCol } from 'nocodb-sdk'
 import { inject, onKeyStroke, onMounted, provide } from '#imports'
-import { ChangePageInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj } from '~/components'
+import { ActiveViewInj, ChangePageInj, IsFormInj, IsGridInj, MetaInj, PaginationDataInj } from '~/components'
 import useViewData from '~/composables/useViewData'
 
 const meta = inject(MetaInj)
+const view = inject(ActiveViewInj)
 
 // todo: get from parent ( inject or use prop )
 const isPublicView = false
@@ -12,15 +13,13 @@ const isPublicView = false
 const selected = reactive<{ row?: number | null; col?: number | null }>({})
 const editEnabled = ref(false)
 
-const { loadData, paginationData, formattedData: data, updateRowProperty, changePage } = useViewData(meta)
+const { loadData, paginationData, formattedData: data, updateRowProperty, changePage } = useViewData(meta, view)
 
 provide(IsFormInj, false)
 provide(IsGridInj, true)
 provide(PaginationDataInj, paginationData)
 provide(ChangePageInj, changePage)
 
-onMounted(() => loadData({}))
-
 const selectCell = (row: number, col: number) => {
   selected.row = row
   selected.col = col
@@ -31,6 +30,16 @@ onKeyStroke(['Enter'], (e) => {
     editEnabled.value = true
   }
 })
+
+watch(
+  [meta, view],
+  async () => {
+    if (meta?.value && view?.value) {
+      await loadData()
+    }
+  },
+  { immediate: true },
+)
 </script>
 
 <template>
@@ -164,6 +173,7 @@ onKeyStroke(['Enter'], (e) => {
   // todo : proper height calculation
   height: calc(100vh - 250px);
   overflow: auto;
+
   td,
   tr {
     min-height: 31px !important;

packages/nc-gui-v2/components/smartsheet/Sidebar.vue

@@ -2,17 +2,20 @@
 import type { TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { inject, onMounted, ref } from '#imports'
-import { MetaInj } from '~/components'
+import { ActiveViewInj, MetaInj } from '~/components'
 import useViews from '~/composables/useViews'
 import { viewIcons } from '~/utils/viewUtils'
 
 const meta = inject(MetaInj)
+const activeView = inject(ActiveViewInj)
+
 const { views, loadViews } = useViews(meta as Ref<TableType>)
 const _isUIAllowed = (view: string) => {}
 
-onMounted(loadViews)
+loadViews().then(() => {
+  activeView.value = views.value?.[0]
+})
 
-const selectedViewIdLocal = ref('')
 const toggleDrawer = ref(false)
 </script>
 
@@ -31,7 +34,8 @@ const toggleDrawer = ref(false)
             <!-- Views -->
             <span class="body-2 font-weight-medium">{{ $t('objects.views') }}</span>
           </v-list-item>
-          <v-list-group v-model="selectedViewIdLocal" mandatory color="primary">
+
+          <!--          <v-list-group v-model="selectedViewIdLocal" mandatory color="primary"> -->
           <!--
                todo: add sortable
                <draggable
@@ -46,40 +50,43 @@ const toggleDrawer = ref(false)
                           :name="!drag ? 'flip-list' : null"
                         > -->
           <v-list-item
-              v-for="(view, i) in views"
+            v-for="view in views"
             :key="view.id"
             v-t="['a:view:open', { view: view.type }]"
             dense
             :value="view.id"
             active-class="x-active--text"
+            @click="activeView = view"
           >
             <!--                :class="`body-2  view nc-view-item nc-draggable-child nc-${
                       viewTypeAlias[view.type]
                     }-view-item`"
                 @click="$emit('rerender')" -->
-              <v-icon
+            <!--              <v-icon
                 v-if="_isUIAllowed('viewlist-drag-n-drop')"
                 small
                 :class="`nc-child-draggable-icon nc-child-draggable-icon-${view.title}`"
                 @click.stop
               >
                 mdi-drag-vertical
-              </v-icon>
+              </v-icon> -->
-              <v-list-item-icon class="mr-n1">
+            <!--              <v-list-item-icon class="mr-n1">
                 <v-icon v-if="viewIcons[view.type]" x-small :color="viewIcons[view.type].color">
                   {{ viewIcons[view.type].icon }}
                 </v-icon>
                 <v-icon v-else color="primary" small> mdi-table </v-icon>
-              </v-list-item-icon>
+              </v-list-item-icon> -->
-              <v-list-item-title>
+            <span>{{ view.alias || view.title }}</span>
+
+            <!--              <v-list-item-title>
                 <v-tooltip bottom>
                   <template #activator="{ on }">
                     <div class="font-weight-regular" style="overflow: hidden; text-overflow: ellipsis">
                       <input v-if="view.edit" :ref="`input${i}`" v-model="view.title_temp" />
 
-                      <!--                        @click.stop
+                      &lt;!&ndash;                        @click.stop
                                               @keydown.enter.stop="updateViewName(view, i)"
-                                              @blur="updateViewName(view, i)" -->
+                                              @blur="updateViewName(view, i)" &ndash;&gt;
                       <template v-else>
                         <span v-on="on">{{ view.alias || view.title }}</span>
                       </template>
@@ -87,7 +94,7 @@ const toggleDrawer = ref(false)
                   </template>
                   {{ view.alias || view.title }}
                 </v-tooltip>
-              </v-list-item-title>
+              </v-list-item-title> -->
             <v-spacer />
             <!--              <template v-if="_isUIAllowed('virtualViewsCreateOrEdit')">
                 &lt;!&ndash; Copy view &ndash;&gt;
@@ -134,7 +141,7 @@ const toggleDrawer = ref(false)
           </v-list-item>
           <!--            </transition-group> -->
           <!--            </draggable> -->
-          </v-list-group>
+          <!--          </v-list-group> -->
         </v-list>
       </div>
     </div>

packages/nc-gui-v2/components/tabs/Smartsheet.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import type { FormType, GalleryType, GridType, KanbanType } from 'nocodb-sdk'
+import { ViewTypes } from 'nocodb-sdk'
 import { computed, onMounted, provide, watch } from '#imports'
-import { MetaInj, TabMetaInj } from '~/components'
+import { ActiveViewInj, MetaInj, TabMetaInj } from '~/components'
 import useMetas from '~/composables/useMetas'
 
 const { tabMeta } = defineProps({
@@ -9,6 +11,7 @@ const { tabMeta } = defineProps({
 
 const { getMeta, metas } = useMetas()
 
+const activeView = ref<GridType | FormType | KanbanType | GalleryType>()
 const meta = computed(() => metas.value?.[tabMeta?.id])
 
 onMounted(async () => {
@@ -17,6 +20,7 @@ onMounted(async () => {
 
 provide(MetaInj, meta)
 provide(TabMetaInj, tabMeta)
+provide(ActiveViewInj, activeView)
 
 watch(
   () => tabMeta && tabMeta?.id,
@@ -29,10 +33,10 @@ watch(
 <template>
   <div class="overflow-auto">
     <SmartsheetToolbar />
-    <template v-if="meta && tabMeta">
+    <template v-if="meta">
       <div class="d-flex">
-        <div class="flex-grow-1 min-w-0">
+        <div v-if="activeView" class="flex-grow-1 min-w-0">
-          <SmartsheetGrid />
+          <SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" />
         </div>
         <SmartsheetSidebar />
       </div>

packages/nc-gui-v2/composables/useViewData.ts

@@ -10,7 +10,10 @@ const formatData = (list: Array<Record<string, any>>) =>
     rowMeta: {},
   }))
 
-export default (meta: Ref<TableType> | ComputedRef<TableType> | undefined) => {
+export default (
+  meta: Ref<TableType> | ComputedRef<TableType> | undefined,
+  viewMeta: Ref<TableType> | ComputedRef<TableType> | undefined,
+) => {
   const data = ref<Array<Record<string, any>>>()
   const formattedData = ref<Array<{ row: Record<string, any>; oldRow: Record<string, any>; rowMeta?: any }>>()
   const paginationData = ref<PaginatedType>({ page: 1, pageSize: 25 })
@@ -18,9 +21,9 @@ export default (meta: Ref<TableType> | ComputedRef<TableType> | undefined) => {
   const { project } = useProject()
   const { $api } = useNuxtApp()
 
-  const loadData = async (params: Parameters<Api<any>['dbTableRow']['list']>[3] = {}) => {
+  const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
-    if (!project?.value?.id || !meta?.value?.id) return
+    if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
-    const response = await $api.dbTableRow.list('noco', project.value.id, meta.value.id, params)
+    const response = await $api.dbViewRow.list('noco', project.value.id, meta.value.id, viewMeta.value.id, params)
     data.value = response.list
     formattedData.value = formatData(response.list)
     paginationData.value = response.pageInfo
@@ -32,10 +35,11 @@ export default (meta: Ref<TableType> | ComputedRef<TableType> | undefined) => {
       .map((c) => row[c.title as string])
       .join('___') as string
 
-    return $api.dbTableRow.update(
+    return $api.dbViewRow.update(
       'noco',
       project?.value.id as string,
       meta?.value.id as string,
+      viewMeta?.value?.id as string,
       id,
       {
         [property]: row[property],
@@ -72,7 +76,13 @@ export default (meta: Ref<TableType> | ComputedRef<TableType> | undefined) => {
       return o
     }, {})
 
-    const insertedData = await $api.dbTableRow.create('noco', project?.value.id as string, meta?.value.id as string, insertObj)
+    const insertedData = await $api.dbViewRow.create(
+      'noco',
+      project?.value.id as string,
+      meta?.value.id as string,
+      viewMeta?.value?.id as string,
+      insertObj,
+    )
 
     formattedData.value?.splice(rowIndex ?? 0, 1, {
       row: insertedData,

packages/nc-gui-v2/composables/useViews.ts

@@ -1,13 +1,14 @@
-import type { TableType } from 'nocodb-sdk'
+import type { FormType, GalleryType, GridType, KanbanType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useNuxtApp } from '#app'
 
 export default function (meta: Ref<TableType>) {
-  const views = ref()
+  const views = ref<Array<GridType | FormType | KanbanType | GalleryType>>()
   const { $api } = useNuxtApp()
 
   const loadViews = async () => {
-    if (meta.value?.id) views.value = (await $api.dbView.list(meta.value?.id)).list
+    if (meta.value?.id)
+      views.value = (await $api.dbView.list(meta.value?.id)).list as Array<GridType | FormType | KanbanType | GalleryType>
   }
 
   return { views, loadViews }