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

Signed-off-by: Pranav C <pranavxc@gmail.com>
2 years ago · 0c772a3932
8 changed files with 83 additions and 50 deletions
--- a/packages/nc-gui-v2/components/cell/Checkbox.vue
+++ b/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>()
--- a/packages/nc-gui-v2/components/cell/Rating.vue
+++ b/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
 }

--- a/packages/nc-gui-v2/components/index.ts
+++ b/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')
--- a/packages/nc-gui-v2/components/smartsheet/Grid.vue
+++ b/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;
--- a/packages/nc-gui-v2/components/smartsheet/Sidebar.vue
+++ b/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,8 +34,9 @@ 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
                          :is="_isUIAllowed('viewlist-drag-n-drop') ? 'draggable' : 'div'"
@ -41,45 +45,48 @@ const toggleDrawer = ref(false)
                          v-bind="dragOptions"
                          @change="onMove($event)"
                        > -->
-            <!--            <transition-group
+          <!--            <transition-group
                          type="transition"
                          :name="!drag ? 'flip-list' : null"
                        > -->
-            <v-list-item
-              v-for="(view, i) in views"
-              :key="view.id"
-              v-t="['a:view:open', { view: view.type }]"
-              dense
-              :value="view.id"
-              active-class="x-active--text"
-            >
-              <!--                :class="`body-2  view nc-view-item nc-draggable-child nc-${
+          <v-list-item
+            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-list-item-icon class="mr-n1">
+              </v-icon> -->
+            <!--              <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-title>
+              </v-list-item-icon> -->
+            <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,9 +94,9 @@ const toggleDrawer = ref(false)
                  </template>
                  {{ view.alias || view.title }}
                </v-tooltip>
-              </v-list-item-title>
-              <v-spacer />
-              <!--              <template v-if="_isUIAllowed('virtualViewsCreateOrEdit')">
+              </v-list-item-title> -->
+            <v-spacer />
+            <!--              <template v-if="_isUIAllowed('virtualViewsCreateOrEdit')">
                &lt;!&ndash; Copy view &ndash;&gt;
                <x-icon
                  v-if="!view.edit"
@ -131,10 +138,10 @@ const toggleDrawer = ref(false)
              >
                mdi-check-bold
              </v-icon> -->
-            </v-list-item>
-            <!--            </transition-group> -->
-            <!--            </draggable> -->
-          </v-list-group>
+          </v-list-item>
+          <!--            </transition-group> -->
+          <!--            </draggable> -->
+          <!--          </v-list-group> -->
        </v-list>
      </div>
    </div>
--- a/packages/nc-gui-v2/components/tabs/Smartsheet.vue
+++ b/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">
-          <SmartsheetGrid />
+        <div v-if="activeView" class="flex-grow-1 min-w-0">
+          <SmartsheetGrid v-if="activeView.type === ViewTypes.GRID" />
        </div>
        <SmartsheetSidebar />
      </div>
--- a/packages/nc-gui-v2/composables/useViewData.ts
+++ b/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] = {}) => {
-    if (!project?.value?.id || !meta?.value?.id) return
-    const response = await $api.dbTableRow.list('noco', project.value.id, meta.value.id, params)
+  const loadData = async (params: Parameters<Api<any>['dbViewRow']['list']>[4] = {}) => {
+    if (!project?.value?.id || !meta?.value?.id || !viewMeta?.value?.id) return
+    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,
--- a/packages/nc-gui-v2/composables/useViews.ts
+++ b/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 }