refactor: rename composables, corrections in components

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

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
 import { inject } from 'vue'
-import { enumColor } from '~/composables/colors'
+import { enumColor } from "~/utils/colorsUtils";
 
 const colors = enumColor.light
 

packages/nc-gui-v2/components/dashboard/TabView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTabs } from '~/composables/tabs'
+import useTabs  from '~/composables/useTabs'
 
 const { tabs, activeTab } = useTabs()
 </script>

packages/nc-gui-v2/components/dashboard/TreeView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { useProject } from '~/composables/project'
-import { useTabs } from '~/composables/tabs'
+import useProject from '~/composables/useProject'
+import  useTabs from '~/composables/useTabs'
 
 const { tables } = useProject()
 const { addTab } = useTabs()

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { useColumn } from '~/composables/column'
+import useColumn  from '~/composables/useColumn'
 
 const { column, value } = defineProps<{ column: ColumnType; value: any }>()
 provide('column', column)

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ColumnType } from 'nocodb-sdk'
-import { useColumn } from '~/composables/column'
+import useColumn  from '~/composables/useColumn'
 
 const { column, value } = defineProps<{ column: ColumnType; value: any }>()
 provide('column', column)

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

@@ -2,11 +2,11 @@
 import { inject, ComputedRef, onMounted } from "vue";
 import { isVirtualCol } from 'nocodb-sdk'
 import type { TableType } from 'nocodb-sdk'
-import { useData } from '~/composables/data'
+import  useViewData  from '~/composables/useViewData'
 
 const meta = inject<ComputedRef<TableType>>('meta')
 
-const { loadData, paginationData, formattedData: data } = useData(meta)
+const { loadData, paginationData, formattedData: data } = useViewData(meta)
 
 onMounted(() => loadData({}))
 </script>

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, provide, watch } from 'vue'
-import { useMetas } from '~/composables/metas'
+import  useMetas  from '~/composables/useMetas'
 
 const { tabMeta } = defineProps({
   tabMeta: Object,

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

@@ -1,72 +0,0 @@
-import { SqlUiFactory, UITypes, isVirtualCol } from 'nocodb-sdk'
-import { useProject } from '~/composables/project'
-
-export const useColumn = (column) => {
-  const { project } = useProject()
-
-  const uiDatatype = column && column.uidt
-  const abstractType = isVirtualCol(column) ? null : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: 'mysql2' }).getAbstractType(column)
-
-  const dataTypeLow = column && column.dt && column.dt.toLowerCase()
-  const isBoolean = abstractType === 'boolean'
-  const isString = abstractType === 'string'
-  const isTextArea = uiDatatype === UITypes.LongText
-  const isInt = abstractType === 'integer'
-  const isFloat = abstractType === 'float'
-  const isDate = abstractType === 'date' || uiDatatype === 'Date'
-  const isTime = abstractType === 'time' || uiDatatype === 'Time'
-  const isDateTime = abstractType === 'datetime' || uiDatatype === 'DateTime'
-  const isJSON = uiDatatype === 'JSON'
-  const isEnum = uiDatatype === 'SingleSelect'
-  const isSet = uiDatatype === 'MultiSelect'
-  const isURL = uiDatatype === 'URL'
-  const isEmail = uiDatatype === UITypes.Email
-  const isAttachment = uiDatatype === 'Attachment'
-  const isRating = uiDatatype === UITypes.Rating
-  const isCurrency = uiDatatype === 'Currency'
-  const isDuration = uiDatatype === UITypes.Duration
-  const isAutoSaved = [
-    UITypes.SingleLineText,
-    UITypes.LongText,
-    UITypes.PhoneNumber,
-    UITypes.Email,
-    UITypes.URL,
-    UITypes.Number,
-    UITypes.Decimal,
-    UITypes.Percent,
-    UITypes.Count,
-    UITypes.AutoNumber,
-    UITypes.SpecificDBType,
-    UITypes.Geometry,
-  ].includes(uiDatatype)
-  const isManualSaved = [
-    UITypes.Currency,
-    UITypes.Year,
-    UITypes.Time,
-    UITypes.Duration,
-  ].includes(uiDatatype)
-
-  return {
-    abstractType,
-    dataTypeLow,
-    isBoolean,
-    isString,
-    isTextArea,
-    isInt,
-    isFloat,
-    isDate,
-    isTime,
-    isDateTime,
-    isJSON,
-    isEnum,
-    isSet,
-    isURL,
-    isEmail,
-    isAttachment,
-    isRating,
-    isCurrency,
-    isDuration,
-    isAutoSaved,
-    isManualSaved,
-  }
-}

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

@@ -1,32 +0,0 @@
-import type { ComputedRef, Ref } from 'vue'
-import type { PaginatedType, TableType } from 'nocodb-sdk'
-import { useNuxtApp } from '#app'
-import { useProject } from '~/composables/project'
-
-export const formatData = (list: Array<Record<string, any>>) => list.map(row => ({
-  row: { ...row },
-  oldRow: { ...row },
-  rowMeta: {},
-}))
-
-export const useData = (meta: Ref<TableType> | ComputedRef<TableType>) => {
-  const data = ref<Array<Record<string, any>>>()
-  const formattedData = ref<Array<{ row: Record<string, any>; oldRow: Record<string, any> }>>()
-  const paginationData = ref<PaginatedType>()
-
-  const { project } = useProject()
-  const { $api } = useNuxtApp()
-
-  const loadData = async (params: { limit?: number; offset?: number; where?: string; sort?: string | string[]; fields?: string | string[] } = {}) => {
-    const response = await $api.dbTableRow.list(
-      'noco',
-      project.value.id,
-      meta.value.id,
-      params as any,
-    )
-    data.value = response.list
-    formattedData.value = formatData(response.list)
-  }
-
-  return { data, loadData, paginationData, formattedData }
-}

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

@@ -0,0 +1,72 @@
+import { SqlUiFactory, UITypes, isVirtualCol, ColumnType } from "nocodb-sdk";
+import useProject from "~/composables/useProject";
+
+export default (column: ColumnType) => {
+  const { project } = useProject();
+
+  const uiDatatype: UITypes = (column && column.uidt) as UITypes;
+  const abstractType = isVirtualCol(column) ? null : SqlUiFactory.create(project.value?.bases?.[0]?.config || { client: "mysql2" }).getAbstractType(column);
+
+  const dataTypeLow = column && column.dt && column.dt.toLowerCase();
+  const isBoolean = abstractType === "boolean";
+  const isString = abstractType === "string";
+  const isTextArea = uiDatatype === UITypes.LongText;
+  const isInt = abstractType === "integer";
+  const isFloat = abstractType === "float";
+  const isDate = abstractType === "date" || uiDatatype === "Date";
+  const isTime = abstractType === "time" || uiDatatype === "Time";
+  const isDateTime = abstractType === "datetime" || uiDatatype === "DateTime";
+  const isJSON = uiDatatype === "JSON";
+  const isEnum = uiDatatype === "SingleSelect";
+  const isSet = uiDatatype === "MultiSelect";
+  const isURL = uiDatatype === "URL";
+  const isEmail = uiDatatype === UITypes.Email;
+  const isAttachment = uiDatatype === "Attachment";
+  const isRating = uiDatatype === UITypes.Rating;
+  const isCurrency = uiDatatype === "Currency";
+  const isDuration = uiDatatype === UITypes.Duration;
+  const isAutoSaved = [
+    UITypes.SingleLineText,
+    UITypes.LongText,
+    UITypes.PhoneNumber,
+    UITypes.Email,
+    UITypes.URL,
+    UITypes.Number,
+    UITypes.Decimal,
+    UITypes.Percent,
+    UITypes.Count,
+    UITypes.AutoNumber,
+    UITypes.SpecificDBType,
+    UITypes.Geometry
+  ].includes(uiDatatype);
+  const isManualSaved = [
+    UITypes.Currency,
+    UITypes.Year,
+    UITypes.Time,
+    UITypes.Duration
+  ].includes(uiDatatype);
+
+  return {
+    abstractType,
+    dataTypeLow,
+    isBoolean,
+    isString,
+    isTextArea,
+    isInt,
+    isFloat,
+    isDate,
+    isTime,
+    isDateTime,
+    isJSON,
+    isEnum,
+    isSet,
+    isURL,
+    isEmail,
+    isAttachment,
+    isRating,
+    isCurrency,
+    isDuration,
+    isAutoSaved,
+    isManualSaved
+  };
+};

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

@@ -1,8 +1,8 @@
 import type { TableType } from 'nocodb-sdk'
 import { useNuxtApp, useState } from '#app'
-import { useProject } from '~/composables/project'
+import useProject from "~/composables/useProject";
 
-export const useMetas = () => {
+export default () => {
   const { $api } = useNuxtApp()
   const { tables } = useProject()
 

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

@@ -1,7 +1,7 @@
 import type { ProjectType, TableType } from "nocodb-sdk";
 import { useNuxtApp } from "#app";
 
-export const useProject = () => {
+export default () => {
   const { $api } = useNuxtApp();
 
   const project = useState<ProjectType>("project");

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

@@ -6,7 +6,7 @@ export interface TabItem {
   id: string
 }
 
-export const useTabs = () => {
+export default () => {
   const tabs = useState<Array<TabItem>>('tabs', () => [])
   const activeTab = useState<number>('activeTab', () => 0)
 

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

@@ -0,0 +1,34 @@
+import { Api } from "nocodb-sdk";
+import type { ComputedRef, Ref } from "vue";
+import type { PaginatedType, TableType } from "nocodb-sdk";
+import { useNuxtApp } from "#app";
+import useProject from "~/composables/useProject";
+
+const formatData = (list: Array<Record<string, any>>) => list.map(row => ({
+  row: { ...row },
+  oldRow: { ...row },
+  rowMeta: {}
+}));
+
+export default  (meta: Ref<TableType> | ComputedRef<TableType> | undefined) => {
+  const data = ref<Array<Record<string, any>>>();
+  const formattedData = ref<Array<{ row: Record<string, any>; oldRow: Record<string, any> }>>();
+  const paginationData = ref<PaginatedType>();
+
+  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
+    );
+    data.value = response.list;
+    formattedData.value = formatData(response.list);
+  };
+
+  return { data, loadData, paginationData, formattedData };
+};

packages/nc-gui-v2/layouts/withoutSidebar.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  <v-layout>
-    <v-app-bar color="" />
-    <slot />
-  </v-layout>
-</template>

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

@@ -1,43 +1,42 @@
 <script setup lang="ts">
-import { watch } from 'vue'
-import { useProject } from '~/composables/project'
-import { useTabs } from '~/composables/tabs'
+import { watch } from "vue";
+import useProject from "~/composables/useProject";
+import useTabs from "~/composables/useTabs";
 
-definePageMeta({
-  layout: 'without-sidebar',
-})
 
-const route = useRoute()
-const { user } = useUser()
-const { loadProject, loadTables } = useProject()
-const { clearTabs } = useTabs()
+const route = useRoute();
+const { loadProject, loadTables } = useProject();
+const { clearTabs } = useTabs();
 
 onMounted(async () => {
-  await loadProject(route.params.projectId as string)
-  await loadTables()
-})
+  await loadProject(route.params.projectId as string);
+  await loadTables();
+});
 
 watch(
   () => route.params.projectId,
   async (newVal, oldVal) => {
     if (newVal && newVal !== oldVal) {
-      clearTabs()
-      await loadProject(newVal as string)
-      await loadTables()
+      clearTabs();
+      await loadProject(newVal as string);
+      await loadTables();
     }
-  },
-)
+  }
+);
 </script>
 
 <template>
-  <v-navigation-drawer permanent>
-    <DashboardTreeView />
-  </v-navigation-drawer>
-  <v-main>
-    <v-container>
-      <DashboardTabView />
-    </v-container>
-  </v-main>
+  <NuxtLayout>
+    <template #sidebar>
+      <v-navigation-drawer permanent>
+        <DashboardTreeView />
+      </v-navigation-drawer>
+    </template>
+
+      <v-container>
+        <DashboardTabView />
+      </v-container>
+    </NuxtLayout>
 </template>
 
 <style scoped lang="scss">

packages/nc-gui-v2/pages/projects/create-external.vue

@@ -1,31 +1,30 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-import { useI18n } from 'vue-i18n'
-import { useToast } from 'vue-toastification'
-import { useNuxtApp, useRouter } from '#app'
-import { extractSdkResponseErrorMsg } from '~/helpers/errorUtils'
-import { clientTypes, getDefaultConnectionConfig, getTestDatabaseName } from '~/helpers/projectCreateUtils'
+import { ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { useToast } from "vue-toastification";
+import { useNuxtApp, useRouter } from "#app";
+import { extractSdkResponseErrorMsg } from "~/utils/errorUtils";
+import { clientTypes, getDefaultConnectionConfig, getTestDatabaseName } from "~/utils/projectCreateUtils";
 
-const name = ref('')
-const loading = ref(false)
-const valid = ref(false)
-const testSuccess = ref(false)
-const projectDatasource = ref(getDefaultConnectionConfig('mysql2'))
+const name = ref("");
+const loading = ref(false);
+const valid = ref(false);
+const testSuccess = ref(false);
+const projectDatasource = ref(getDefaultConnectionConfig("mysql2"));
 const inflection = reactive({
-  tableName: 'camelize',
-  columnName: 'camelize',
-})
+  tableName: "camelize",
+  columnName: "camelize"
+});
 
-const $router = useRouter()
-const { $api, $e } = useNuxtApp()
-const { user } = useUser()
-const toast = useToast()
-const { t: $t } = useI18n()
+const $router = useRouter();
+const { $api, $e } = useNuxtApp();
+const toast = useToast();
+const { t: $t } = useI18n();
 
-const titleValidationRule = [(v) => !!v || 'Title is required', (v) => v.length <= 50 || 'Project name exceeds 50 characters']
+const titleValidationRule = [(v: string) => !!v || "Title is required", (v: string) => v.length <= 50 || "Project name exceeds 50 characters"];
 
 const createProject = async () => {
-  loading.value = true
+  loading.value = true;
   try {
     const result = await $api.project.create({
       title: name.value,
@@ -34,50 +33,50 @@ const createProject = async () => {
           type: projectDatasource.value.client,
           config: projectDatasource.value,
           inflection_column: inflection.columnName,
-          inflection_table: inflection.tableName,
-        },
+          inflection_table: inflection.tableName
+        }
       ],
-      external: true,
-    })
+      external: true
+    });
 
-    await $router.push(`/dashboard/${result.id}`)
-  } catch (e) {
+    await $router.push(`/dashboard/${result.id}`);
+  } catch (e: any) {
     // todo: toast
-    toast.error(await extractSdkResponseErrorMsg(e))
+    toast.error(await extractSdkResponseErrorMsg(e));
   }
-  loading.value = false
-}
+  loading.value = false;
+};
 
 const testConnection = async () => {
-  $e('a:project:create:extdb:test-connection')
+  $e("a:project:create:extdb:test-connection",[]);
   try {
     // this.handleSSL(projectDatasource)
 
-    if (projectDatasource.value.client === 'sqlite3') {
-      testSuccess.value = true
+    if (projectDatasource.value.client === "sqlite3") {
+      testSuccess.value = true;
     } else {
       const testConnectionConfig = {
         ...projectDatasource,
         connection: {
           ...projectDatasource.value.connection,
-          database: getTestDatabaseName(projectDatasource.value),
-        },
-      }
+          database: getTestDatabaseName(projectDatasource.value)
+        }
+      };
 
-      const result = await $api.utils.testConnection(testConnectionConfig)
+      const result = await $api.utils.testConnection(testConnectionConfig);
 
       if (result.code === 0) {
-        testSuccess.value = true
+        testSuccess.value = true;
       } else {
-        testSuccess.value = false
-        toast.error($t('msg.error.dbConnectionFailed') + result.message)
+        testSuccess.value = false;
+        toast.error($t("msg.error.dbConnectionFailed") + result.message);
       }
     }
-  } catch (e) {
-    testSuccess.value = false
-    toast.error(await extractSdkResponseErrorMsg(e))
+  } catch (e:any) {
+    testSuccess.value = false;
+    toast.error(await extractSdkResponseErrorMsg(e));
   }
-}
+};
 </script>
 
 <template>
@@ -94,7 +93,8 @@ const testConnection = async () => {
             <div class="mx-auto" style="width: 350px">
               <!-- label="Enter Project Name" -->
               <!-- rule text: Required -->
-              <v-text-field v-model="name" :rules="titleValidationRule" class="nc-metadb-project-name" label="Project name" />
+              <v-text-field v-model="name" :rules="titleValidationRule" class="nc-metadb-project-name"
+                            label="Project name" />
               <!--                :rules="titleValidationRule" -->
             </div>
 
@@ -115,7 +115,8 @@ const testConnection = async () => {
                   <v-text-field v-model="projectDatasource.connection.host" density="compact" label="Host" />
                 </v-col>
                 <v-col cols="6">
-                  <v-text-field v-model="projectDatasource.connection.port" density="compact" label="Port" type="number" />
+                  <v-text-field v-model="projectDatasource.connection.port" density="compact" label="Port"
+                                type="number" />
                 </v-col>
                 <v-col cols="6">
                   <v-text-field v-model="projectDatasource.connection.user" density="compact" label="Username" />
@@ -129,7 +130,8 @@ const testConnection = async () => {
                   />
                 </v-col>
                 <v-col cols="6">
-                  <v-text-field v-model="projectDatasource.connection.database" density="compact" label="Database name" />
+                  <v-text-field v-model="projectDatasource.connection.database" density="compact"
+                                label="Database name" />
                 </v-col>
 
                 <!--                <v-col cols="6">
@@ -152,14 +154,14 @@ const testConnection = async () => {
 
             <div class="d-flex justify-center" style="gap: 4px">
               <v-btn :disabled="!testSuccess" class="" large :loading="loading" color="primary" @click="createProject">
-                <v-icon class="mr-1 mt-n1"> mdi-rocket-launch-outline </v-icon>
+                <v-icon class="mr-1 mt-n1"> mdi-rocket-launch-outline</v-icon>
                 <!-- Create -->
-                <span class="mr-1">{{ $t('general.create') }} </span>
+                <span class="mr-1">{{ $t("general.create") }} </span>
               </v-btn>
 
               <v-btn size="sm" class="text-sm text-capitalize">
                 <!-- Test Database Connection -->
-                {{ $t('activity.testDbConn') }}
+                {{ $t("activity.testDbConn") }}
               </v-btn>
             </div>
           </v-container>

packages/nc-gui-v2/pages/projects/create.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 import { useNuxtApp, useRouter } from '#app'
+import { extractSdkResponseErrorMsg } from "~/utils/errorUtils";
 
 const name = ref('')
 const loading = ref(false)
@@ -8,9 +9,8 @@ const valid = ref(false)
 
 const { $api, $toast } = useNuxtApp()
 const $router = useRouter()
-const { user } = useUser()
 
-const titleValidationRule = [(v) => !!v || 'Title is required', (v) => v.length <= 50 || 'Project name exceeds 50 characters']
+const titleValidationRule = [(v:string) => !!v || 'Title is required', (v:string) => v.length <= 50 || 'Project name exceeds 50 characters']
 
 const createProject = async () => {
   loading.value = true
@@ -20,9 +20,9 @@ const createProject = async () => {
     })
 
     await $router.push(`/dashboard/${result.id}`)
-  } catch (e) {
+  } catch (e:any) {
     // todo: toast
-    $toast.error(await this._extractSdkResponseErrorMsg(e)).goAway(3000)
+    $toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
   }
   loading.value = false
 }

packages/nc-gui-v2/pages/signin.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { extractSdkResponseErrorMsg } from '~/helpers/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { navigateTo, useNuxtApp } from '#app'
 
 const { $api, $state } = useNuxtApp()

packages/nc-gui-v2/pages/signup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { extractSdkResponseErrorMsg } from '~/helpers/errorUtils'
+import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
 import { navigateTo } from '#app'
 
 const { $api, $state } = useNuxtApp()