chore(gui-v2): cleanup imports and styles

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

@@ -103,6 +103,7 @@ declare module '@vue/runtime-core' {
     MdiCheck: typeof import('~icons/mdi/check')['default']
     MdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
     MdiClose: typeof import('~icons/mdi/close')['default']
+    MdiCloseBox: typeof import('~icons/mdi/close-box')['default']
     MdiCloseCircle: typeof import('~icons/mdi/close-circle')['default']
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiCodeJson: typeof import('~icons/mdi/code-json')['default']

packages/nc-gui-v2/components/smartsheet-toolbar/ColumnFilter.vue

@@ -2,31 +2,42 @@
 import type { FilterType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import FieldListAutoCompleteDropdown from './FieldListAutoCompleteDropdown.vue'
-import { useNuxtApp } from '#app'
+import {
-import { inject, useViewFilters } from '#imports'
+  ActiveViewInj,
-import { comparisonOpList } from '~/utils/filterUtils'
+  MetaInj,
-import { ActiveViewInj, MetaInj, ReloadViewDataHookInj } from '~/context'
+  ReloadViewDataHookInj,
-import MdiDeleteIcon from '~icons/mdi/close-box'
+  comparisonOpList,
-import MdiAddIcon from '~icons/mdi/plus'
+  computed,
-import type { Filter } from '~/lib/types'
+  inject,
-
+  ref,
-const {
+  useNuxtApp,
-  nested = false,
+  useViewFilters,
-  parentId,
+  watch,
-  autoSave = true,
+} from '#imports'
-  hookId = null,
+import type { Filter } from '~/lib'
-  modelValue,
+
-} = defineProps<{ nested?: boolean; parentId?: string; autoSave: boolean; hookId?: string; modelValue?: Filter[] }>()
+interface Props {
+  nested?: boolean
+  parentId?: string
+  autoSave: boolean
+  hookId?: string
+  modelValue?: Filter[]
+}
+
+const { nested = false, parentId, autoSave = true, hookId = null, modelValue } = defineProps<Props>()
 
 const emit = defineEmits(['update:filtersLength'])
 
-const meta = inject(MetaInj)
+const logicalOps = [
+  { value: 'and', text: 'AND' },
+  { value: 'or', text: 'OR' },
+]
 
-const activeView = inject(ActiveViewInj)
+const meta = inject(MetaInj)!
 
-const reloadDataHook = inject(ReloadViewDataHookInj)
+const activeView = inject(ActiveViewInj)!
 
-// todo: replace with inject or get from state
+const reloadDataHook = inject(ReloadViewDataHookInj)!
 
 const { $e } = useNuxtApp()
 
@@ -35,11 +46,13 @@ const { filters, deleteFilter, saveOrUpdate, loadFilters, addFilter, addFilterGr
   parentId,
   computed(() => autoSave),
   () => {
-    reloadDataHook?.trigger()
+    reloadDataHook.trigger()
   },
   modelValue,
 )
 
+const nestedFilters = ref()
+
 const filterUpdateCondition = (filter: FilterType, i: number) => {
   saveOrUpdate(filter, i)
   $e('a:filter:update', {
@@ -63,12 +76,14 @@ const filterUpdateCondition = (filter: FilterType, i: number) => {
 //     return true
 //   })
 
-const columns = computed(() => meta?.value?.columns)
+const columns = computed(() => meta.value?.columns)
+
 const types = computed(() => {
-  if (!meta?.value?.columns?.length) {
+  if (!meta.value?.columns?.length) {
     return {}
   }
-  return meta?.value?.columns?.reduce((obj: any, col: any) => {
+
+  return meta.value?.columns?.reduce((obj: any, col: any) => {
     switch (col.uidt) {
       case UITypes.Number:
       case UITypes.Decimal:
@@ -83,22 +98,15 @@ const types = computed(() => {
 })
 
 watch(
-  () => (activeView?.value as any)?.id,
+  () => activeView.value?.id,
   (n, o) => {
     if (n !== o) loadFilters(hookId as string)
   },
   { immediate: true },
 )
 
-const nestedFilters = ref()
-
-const logicalOps = [
-  { value: 'and', text: 'AND' },
-  { value: 'or', text: 'OR' },
-]
-
 watch(
-  () => filters?.value?.length,
+  () => filters.value.length,
   (length) => {
     emit('update:filtersLength', length ?? 0)
   },
@@ -106,7 +114,10 @@ watch(
 
 const applyChanges = async (hookId?: string) => {
   await sync(hookId)
-  for (const nestedFilter of nestedFilters?.value || []) {
+
+  if (!nestedFilters.value.length) return
+
+  for (const nestedFilter of nestedFilters.value) {
     if (nestedFilter.parentId) {
       await nestedFilter.applyChanges(hookId, true)
     }
@@ -128,7 +139,7 @@ defineExpose({
       <template v-for="(filter, i) in filters" :key="filter.id || i">
         <template v-if="filter.status !== 'delete'">
           <template v-if="filter.is_group">
-            <MdiDeleteIcon
+            <MdiCloseBox
               v-if="!filter.readOnly"
               :key="i"
               small
@@ -174,7 +185,7 @@ defineExpose({
                                       mdi-close-box
                                     </v-icon> -->
 
-            <MdiDeleteIcon
+            <MdiCloseBox
               v-if="!filter.readOnly"
               class="nc-filter-item-remove-btn text-grey align-self-center"
               @click.stop="deleteFilter(filter, i)"
@@ -260,7 +271,7 @@ defineExpose({
       <a-button class="elevation-0 text-capitalize" type="primary" ghost @click.stop="addFilter">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
-          <MdiAddIcon />
+          <MdiPlus />
           <!-- Add Filter -->
           {{ $t('activity.addFilter') }}
         </div>
@@ -268,7 +279,7 @@ defineExpose({
       <a-button class="text-capitalize !text-gray-500" @click.stop="addFilterGroup">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
-          <MdiAddIcon />
+          <MdiPlus />
           Add Filter Group
           <!--     todo: add i18n {{ $t('activity.addFilterGroup') }} -->
         </div>

packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue

@@ -8,12 +8,14 @@ import {
   ref,
   useClipboard,
   useElementHover,
+  useGlobal,
   useProject,
   useRoute,
   useTabs,
   useUIPermission,
 } from '#imports'
 import { TabType } from '~/composables'
+
 const route = useRoute()
 
 const { appInfo, token } = useGlobal()
@@ -66,11 +68,13 @@ const isHovered = useElementHover(sidebar)
 const copyProjectInfo = async () => {
   try {
     await loadProjectMetaInfo()
-    copy(
+
+    await copy(
       Object.entries(projectMetaInfo.value!)
         .map(([k, v]) => `${k}: **${v}**`)
         .join('\n'),
     )
+
     message.info('Copied project info to clipboard')
   } catch (e: any) {
     console.log(e)
@@ -80,7 +84,8 @@ const copyProjectInfo = async () => {
 
 const copyAuthToken = async () => {
   try {
-    copy(token.value!)
+    await copy(token.value!)
+
     message.info('Copied auth token to clipboard')
   } catch (e: any) {
     console.log(e)
@@ -138,7 +143,7 @@ const copyAuthToken = async () => {
             <div
               :style="{ width: isOpen ? 'calc(100% - 40px) pr-2' : '100%' }"
               :class="[isOpen ? '' : 'justify-center']"
-              class="group cursor-pointer flex gap-4 items-center nc-project-menu"
+              class="group cursor-pointer flex gap-4 items-center nc-project-menu overflow-hidden"
             >
               <template v-if="isOpen">
                 <div class="text-xl font-semibold truncate">{{ project.title }}</div>

packages/nc-gui-v2/pages/[projectType]/[projectId]/index/index/index.vue

@@ -1,17 +1,3 @@
-<script>
-export default {
-  name: 'Index',
-}
-</script>
-
 <template>
-  <div class="nc-main-tab">
+  <div class="h-full w-full prose text-3xl text-gray-400 flex items-center justify-center">Welcome to NocoDB!</div>
-    <span>Welcome to NocoDB!</span>
-  </div>
 </template>
-
-<style scoped>
-.nc-main-tab {
-  @apply w-full text-3xl text-gray-400 flex align-center justify-center;
-}
-</style>

packages/nc-gui-v2/pages/[projectType]/view/[viewId].vue

@@ -1,7 +1,17 @@
 <script setup lang="ts">
-import { ReadonlyInj, ReloadViewDataHookInj, useRoute } from '#imports'
+import {
+  ReadonlyInj,
+  ReloadViewDataHookInj,
+  createEventHook,
+  definePageMeta,
+  provide,
+  ref,
+  useRoute,
+  useSharedView,
+} from '#imports'
 
 definePageMeta({
+  public: true,
   requiresAuth: false,
   layout: 'shared-view',
 })
@@ -10,7 +20,7 @@ const route = useRoute()
 
 const reloadEventHook = createEventHook<void>()
 provide(ReloadViewDataHookInj, reloadEventHook)
-provide(ReadonlyInj, ref(true))
+provide(ReadonlyInj, true)
 
 const { loadSharedView } = useSharedView()
 const showPassword = ref(false)
@@ -27,6 +37,7 @@ try {
     <div v-if="showPassword">
       <SharedViewAskPassword v-model="showPassword" />
     </div>
+
     <SharedViewGrid v-else />
   </NuxtLayout>
 </template>