refactor(gui-v2): introduce typed injection keys

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

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

@@ -4,6 +4,7 @@ import type { ColumnType, TableType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { useToast } from 'vue-toastification'
 import { useNuxtApp } from '#app'
+import { ColumnInj, MetaInj } from '~/components'
 import useProject from '~/composables/useProject'
 // import FileSaver from "file-saver";
 import { isImage } from '~/utils/fileUtils'
@@ -15,8 +16,8 @@ const emit = defineEmits(['update:modelValue'])
 
 const isPublicForm = inject<boolean>('isPublicForm', false)
 const isForm = inject<boolean>('isForm', false)
-const meta = inject<Ref<TableType>>('meta')
-const column = inject<ColumnType>('column')
+const meta = inject(MetaInj)
+const column = inject<ColumnType>(ColumnInj)
 const editEnabled = inject<boolean>('editEnabled')
 
 const localFilesState = reactive([])

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

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { ColumnType } from 'nocodb-sdk'
 import { computed, inject } from 'vue'
+import { ColumnInj } from '~/components'
 
 const { modelValue: value } = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue'])
-const column = inject<ColumnType & { meta?: any }>('column')
+const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm')
 
 const checkboxMeta = computed(() => {

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { computed, inject } from 'vue'
+import { ColumnInj } from '~/components'
 import MdiStarIcon from '~icons/mdi/star'
 import MdiStarOutlineIcon from '~icons/mdi/star-outline'
 
 const { modelValue: value } = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue'])
-const column = inject<ColumnType & { meta?: any }>('column')
+const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm')
 
 const ratingMeta = computed(() => {

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

@@ -2,11 +2,12 @@
 import { computed } from '@vue/reactivity'
 import type { ColumnType } from 'nocodb-sdk'
 import { Ref, inject } from 'vue'
+import { ColumnInj } from '~/components'
 const { modelValue } = defineProps<{ modelValue: any }>()
 const emit = defineEmits(['update:modelValue'])
 // import {enumColor}from "~/utils/colorsUtils";
 
-const column = inject<ColumnType>('column')
+const column = inject(ColumnInj)
 const isForm = inject<boolean>('isForm')
 const editEnabled = inject<boolean>('editEnabled')
 

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

@@ -0,0 +1,6 @@
+import type { ColumnType, TableType } from 'nocodb-sdk'
+import type { InjectionKey, Ref } from 'vue'
+
+export const ColumnInj: InjectionKey<ColumnType> = Symbol('column-injection')
+export const MetaInj: InjectionKey<Ref<TableType>> = Symbol('meta-injection')
+export const TabMetaInj: InjectionKey<any> = Symbol('tab-meta-injection')

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

@@ -2,13 +2,15 @@
 import { computed } from '@vue/reactivity'
 import { watchEffect } from '@vue/runtime-core'
 import type { ColumnType } from 'nocodb-sdk'
+import { provide } from 'vue'
+import { ColumnInj } from '~/components'
 import useColumn from '~/composables/useColumn'
 
 const { column, modelValue: value, editEnabled } = defineProps<{ column: ColumnType; modelValue: any; editEnabled: boolean }>()
 
 const emit = defineEmits(['update:modelValue'])
 
-provide('column', column)
+provide(ColumnInj, column)
 provide(
   'editEnabled',
   computed(() => editEnabled),

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

@@ -1,10 +1,13 @@
 <script lang="ts" setup>
+import type { Ref } from 'vue'
 import { inject, onMounted } from 'vue'
 import { isVirtualCol } from 'nocodb-sdk'
 import type { TableType } from 'nocodb-sdk'
+import { MetaInj } from '~/components'
+import Smartsheet from '~/components/tabs/Smartsheet.vue'
 import useViewData from '~/composables/useViewData'
 
-const meta = inject<TableType>('meta')
+const meta = inject(MetaInj)
 
 // todo: get from parent ( inject or use prop )
 const isPublicView = false
@@ -12,10 +15,11 @@ const isPublicView = false
 const selected = reactive<{ row?: number | null; col?: number | null }>({})
 const editEnabled = ref(false)
 
+const { loadData, paginationData, formattedData: data, updateRowProperty } = useViewData(meta)
+
 provide('isForm', false)
 provide('isGrid', true)
-
-const { loadData, paginationData, formattedData: data, updateRowProperty } = useViewData(meta)
+provide('paginationData', paginationData)
 
 onMounted(() => loadData({}))
 
@@ -151,6 +155,8 @@ onKeyStroke(['Enter'], (e) => {
       </tr>
     </tbody>
   </table>
+
+  <!--  <SmartsheetPagination /> -->
 </template>
 
 <style scoped lang="scss">

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

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { PaginatedType } from 'nocodb-sdk'
+import type { Ref } from 'vue'
+import { computed, inject } from 'vue'
+
+const paginatedData = inject<Ref<PaginatedType>>('paginatedData')
+const count = computed<number>(() => {
+  return paginatedData?.value?.totalRows ?? Infinity
+})
+const size = computed<number>(() => {
+  return paginatedData?.value?.pageSize ?? 25
+})
+const page = computed<number>(() => {
+  return paginatedData?.value?.page ?? 1
+})
+/*
+export default {
+  name: 'Pagination',
+  props: {
+    count: [Number, String],
+    value: [Number, String],
+    size: [Number, String],
+  },
+  data: () => ({
+    page: 1,
+  }),
+  watch: {
+    value(v) {
+      this.page = v
+    },
+    count(c) {
+      const page = Math.max(1, Math.min(this.page, Math.ceil(c / this.size)))
+      if (this.value !== page) {
+        this.$emit('input', page)
+      }
+    },
+  },
+  mounted() {
+    this.page = this.value
+  },
+}
+*/
+</script>
+
+<template>
+  {{ paginatedData }}
+
+  <div class="d-flex align-center">
+    <span v-if="count !== null && count !== Infinity" class="caption ml-2"> {{ count }} record{{ count !== 1 ? 's' : '' }} </span>
+    <v-spacer />
+    <v-pagination
+      v-if="count !== Infinity"
+      v-model="page"
+      style="max-width: 100%"
+      :length="Math.ceil(count / size)"
+      :total-visible="8"
+      color="primary lighten-2"
+      class="nc-pagination"
+      @input="$emit('input', page)"
+    />
+    <div v-else class="mx-auto d-flex align-center mt-n1" style="max-width: 250px">
+      <span class="caption" style="white-space: nowrap"> Change page:</span>
+      <v-text-field
+        v-model="page"
+        class="ml-1 caption"
+        :full-width="false"
+        outlined
+        dense
+        hide-details
+        type="number"
+        @keydown.enter="$emit('input', page)"
+      >
+        <template #append>
+          <x-icon tooltip="Change page" small icon.class="mt-1" @click="$emit('input', page)"> mdi-keyboard-return </x-icon>
+        </template>
+      </v-text-field>
+    </div>
+
+    <v-spacer />
+    <v-spacer />
+  </div>
+</template>
+
+<style scoped></style>

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

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
+import { ColumnInj } from '~/components'
 import useVirtualCell from '~/composables/useVirtualCell'
 
 const { column, modelValue: value } = defineProps<{ column: ColumnType; modelValue: any; editEnabled: boolean }>()
 
 const emit = defineEmits(['update:modelValue'])
 
-provide('column', column)
+provide(ColumnInj, column)
 provide('value', value)
 
 const { isLookup, isBt, isRollup, isMm, isHm, isFormula } = useVirtualCell(column)

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, provide, watch } from 'vue'
+import { MetaInj, TabMetaInj } from '~/components'
 import useMetas from '~/composables/useMetas'
 
 const { tabMeta } = defineProps({
@@ -16,8 +17,8 @@ onMounted(async () => {
   await getMeta(tabMeta?.id)
 })
 
-provide('meta', meta)
-provide('tabMeta', tabMeta)
+provide(MetaInj, meta)
+provide(TabMetaInj, tabMeta)
 
 watch(
   () => tabMeta && tabMeta?.id,
@@ -29,7 +30,7 @@ watch(
 
 <template>
   <div class="overflow-auto">
-    <!--    <v-toolbar height="32" dense class="nc-table-toolbar elevation-0 xc-toolbar xc-border-bottom mx-1" style="z-index: 7" /> -->
+    <v-toolbar dense class="nc-table-toolbar elevation-0 xc-toolbar xc-border-bottom mx-1" style="z-index: 7"> </v-toolbar>
     <template v-if="meta && tabMeta">
       <SmartsheetGrid />
     </template>

packages/nc-gui-v2/components/virtual-cell/BelongsTo.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
+import { ColumnInj } from '~/components'
 import useBelongsTo from '~/composables/useBelongsTo'
 
-const column = inject<ColumnType>('column')
+const column = inject(ColumnInj)
 const value = inject('value')
 
 const { parentMeta, loadParentMeta, primaryValueProp } = useBelongsTo(column as ColumnType)

packages/nc-gui-v2/components/virtual-cell/Formula.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
 import type { ColumnType } from 'nocodb-sdk'
 import { computed } from 'vue'
+import { ColumnInj } from '~/components'
 import { handleTZ } from '~/utils/dateTimeUtils'
 import { replaceUrlsWithLink } from '~/utils/urlUtils'
-
-const column = inject<ColumnType>('column')
+const column = inject(ColumnInj)
 const value = inject('value')
 
 const { isPg } = useProject()

packages/nc-gui-v2/components/virtual-cell/HasMany.vue

@@ -2,9 +2,9 @@
 import { computed } from '@vue/reactivity'
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
+import { ColumnInj } from '~/components'
 import useHasMany from '~/composables/useHasMany'
-
-const column = inject<ColumnType>('column')
+const column = inject(ColumnInj)
 const value = inject('value')
 
 const { childMeta, loadChildMeta, primaryValueProp } = useHasMany(column as ColumnType)

packages/nc-gui-v2/components/virtual-cell/ManyToMany.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import ItemChip from './components/ItemChip.vue'
+import { ColumnInj } from '~/components'
 import useManyToMany from '~/composables/useManyToMany'
-
-const column = inject<ColumnType>('column')
+const column = inject(ColumnInj)
 const value = inject('value')
 
 const { childMeta, loadChildMeta, primaryValueProp } = useManyToMany(column as ColumnType)