wip: vuetify integration

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

.run/Run GUI v2.run.xml

@@ -0,0 +1,12 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="Run GUI" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/packages/nc-gui/package.json" />
+    <command value="run" />
+    <scripts>
+      <script value="dev" />
+    </scripts>
+    <node-interpreter value="project" />
+    <envs />
+    <method v="2" />
+  </configuration>
+</component>

.run/dev.run.xml

@@ -1,6 +1,6 @@
 <component name="ProjectRunConfigurationManager">
-  <configuration default="false" name="Run GUI" type="js.build_tools.npm">
-    <package-json value="$PROJECT_DIR$/packages/nc-gui/package.json" />
+  <configuration default="false" name="Run GUI v2" type="js.build_tools.npm">
+    <package-json value="$PROJECT_DIR$/packages/nc-gui-v2/package.json" />
     <command value="run" />
     <scripts>
       <script value="dev" />
@@ -9,4 +9,4 @@
     <envs />
     <method v="2" />
   </configuration>
-</component>
+</component>

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

@@ -1,27 +1,36 @@
 <template>
   <div>
-    <TabMenu :model="tabItems" v-model:activeIndex="activeTab"/>
-    <template v-if="tabItems && tabItems[activeTab]">
-     <TabsSmartsheet :tab-meta="tabs[activeTab]" :key="tabs[activeTab].id"/>
-    </template>
+    <!--    <TabMenu :model="tabItems" v-model:activeIndex="activeTab"/>
+        <template v-if="tabItems && tabItems[activeTab]">
+         <TabsSmartsheet :tab-meta="tabs[activeTab]" :key="tabs[activeTab].id"/>
+        </template>-->
+
+    <v-tabs v-model="activeTab">
+
+      <v-tab v-for="(tab,i) in tabs" :key="i" v-model:activeIndex="activeTab" >{{tab.title}} </v-tab>
+
+      <v-tab-item v-for="(tab,i) in tabs" :key="i">
+        <TabsSmartsheet :tab-meta="tab" />
+      </v-tab-item>
+    </v-tabs>
   </div>
 </template>
 
 <script setup lang="ts">
 
-import {useTabs} from "~/composables/tabs";
+import { useTabs } from "~/composables/tabs";
 
-const {tabs,activeTab} = useTabs()
+const { tabs, activeTab } = useTabs();
 
-const tabItems = computed(() => {
-  return tabs.value.map(tab => {
-    return {
-      label: tab.title,
-      // icon: tab.icon,
-      closable: true
-    }
-  })
-})
+// const tabItems = computed(() => {
+//   return tabs.value.map(tab => {
+//     return {
+//       label: tab.title,
+//       // icon: tab.icon,
+//       closable: true
+//     }
+//   })
+// })
 
 </script>
 

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

@@ -1,11 +1,12 @@
 <template>
   <div>
 
-    <div v-for="table in tables" class="p-2 text-sm pointer"
+    <v-list density="medium">
+    <v-list-item v-for="table in tables" class="p-2 text-sm pointer"
          @click="addTab({type:'table',title:table.title, id:table.id})">
       {{ table.title }}
-    </div>
-
+    </v-list-item>
+    </v-list>
   </div>
 </template>
 

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

@@ -2,51 +2,66 @@
   <div>
 
     <div class="card">
-      <DataTable :value="rows" responsiveLayout="scroll">
+      <v-table>
+        <thead>
+        <tr>
+          <th v-for="col in meta.columns">
+            {{ col.title }}
+          </th>
+        </tr>
+        </thead>
+        <tbody>
 
-        <Column v-for="col in meta.columns" :key="col.id" :field="col.title" :header="col.title">
-          <template v-if="col.uidt === 'LinkToAnotherRecord'" #body="{data:{[col.title]:d}}">
-            {{ d&& (Array.isArray(d) ? d : [d]).map(c1 => c1[Object.keys(c1)[1]]).join(', ') }}
-          </template>
-        </Column>
-      </DataTable>
+        <tr v-for="(row,i) in rows" :key="i">
+          <th v-for="col in meta.columns" :key="col.title">
+            {{ row[col.title] }}
+          </th>
+        </tr>
+
+        </tbody>
+        <!--        <Column v-for="col in meta.columns" :key="col.id" :field="col.title" :header="col.title">
+                  <template v-if="col.uidt === 'LinkToAnotherRecord'" #body="{data:{[col.title]:d}}">
+                    {{ d && (Array.isArray(d) ? d : [d]).map(c1 => c1[Object.keys(c1)[1]]).join(', ') }}
+                  </template>
+                </Column>-->
+      </v-table>
     </div>
 
   </div>
 </template>
 
 <script lang="ts" setup>
-import {useNuxtApp} from "#app";
-import {Api} from "nocodb-sdk";
-import {useUser} from "~/composables/user";
+import { useNuxtApp } from "#app";
+import { Api } from "nocodb-sdk";
+import { useUser } from "~/composables/user";
 
-const {tabMeta, meta} = defineProps({
+const { tabMeta, meta } = defineProps({
   tabMeta: Object,
   meta: Object
-})
+});
 
-const {project} = useProject()
-const {user} = useUser()
-const rows = ref()
+const { project } = useProject();
+const { user } = useUser();
+const rows = ref();
 
-const {$api}: { $api: Api<any> } = useNuxtApp() as any
+const { $api } = useNuxtApp();
 
 
 const loadData = async () => {
-  const response = await $api.dbTableRow.list('noco',
-      project.value.id,
-      meta.id, {}, {
-        headers: {
-          'xc-auth': user.token
-        }
-      })
+  const response = await $api.dbTableRow.list("noco",
+    project.value.id,
+    meta.id, {}, {
+      headers: {
+        "xc-auth": user.token
+      }
+    });
 
-  rows.value = response.list
-}
+  rows.value = response.list;
+};
 
 onMounted(async () => {
-  await loadData()
-})
+  await loadData();
+});
 
 
 </script>

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

@@ -5,7 +5,7 @@ import {useProject} from "~/composables/project";
 
 
 export const useMetas = () => {
-  const {$api}: { $api: Api<any> } = useNuxtApp() as any
+  const {$api} = useNuxtApp()
   const {user} = useUser()
   const {tables} = useProject()
 

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

@@ -3,7 +3,7 @@ import {Api, TableType} from "nocodb-sdk";
 import {useUser} from "~/composables/user";
 
 export const useProject = () => {
-  const {$api}: { $api: Api<any> } = useNuxtApp() as any
+  const {$api} = useNuxtApp()
   const {user} = useUser()
 
   const project = useState<{ id?: string, title?: string }>('project', null)

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

@@ -11,7 +11,7 @@ export  const useUser = () =>{
     version: '1.0.0'
   })
 
-  const {$api}: { $api: Api<any> } = useNuxtApp() as any
+  const {$api} = useNuxtApp()
 
 
   const getUser =async (args = {}) => {

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

@@ -5,7 +5,13 @@
 <!--    <div class="sidebar">-->
 <!--    </div>-->
 <!--    <div class="content">-->
-      <slot></slot>
+
+
+    <v-layout>
+      <v-app-bar color=""></v-app-bar>
+<slot></slot>
+    </v-layout>
+
 <!--    </div>-->
   </div>
 </template>

packages/nc-gui-v2/nuxt-shim.d.ts

@@ -0,0 +1,8 @@
+import type { NuxtApp as BaseApp } from '#app/nuxt'
+import type { Api } from 'nocodb-sdk'
+
+declare module '#app/nuxt' {
+  interface NuxtApp extends BaseApp {
+    $api: Api<any>;
+  }
+}

packages/nc-gui-v2/nuxt.config.ts

@@ -12,21 +12,21 @@ export default defineNuxtConfig({
     // '~/plugins/vuetify.ts',
     // '~/plugins/api.ts',
   ],
-  // css: ['vuetify/lib/styles/main.sass'],
-  // build: {
-  //   transpile: ['vuetify']
-  // },
-
-  css: [
-    'primevue/resources/themes/saga-blue/theme.css',
-    'primevue/resources/primevue.css',
-    'primeicons/primeicons.css',
-    'primeflex/primeflex.css',
-  ],
+  css: ['vuetify/lib/styles/main.sass'],
   build: {
-    transpile: ['primevue']
+    transpile: ['vuetify']
   },
 
+  // css: [
+  //   'primevue/resources/themes/saga-blue/theme.css',
+  //   'primevue/resources/primevue.css',
+  //   'primeicons/primeicons.css',
+  //   'primeflex/primeflex.css',
+  // ],
+  // build: {
+  //   transpile: ['primevue']
+  // },
+
   vite: {
     define: {
       'process.env.DEBUG': 'false',

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

@@ -1,7 +1,22 @@
 <template>
 
   <NuxtLayout>
-    <!--  todo: move to layout or create a reusable component -->
+    <v-navigation-drawer color="" permanent>
+
+      <DashboardTreeView></DashboardTreeView>
+    </v-navigation-drawer>
+    <v-main>
+      <v-container>
+        <DashboardTabView></DashboardTabView>
+      </v-container>
+
+
+    </v-main>
+  </NuxtLayout>
+
+
+<!--  <NuxtLayout>
+    &lt;!&ndash;  todo: move to layout or create a reusable component &ndash;&gt;
     <div class="nc-container">
       <div class="nc-topbar shadow-2">
       </div>
@@ -13,7 +28,7 @@
       </div>
     </div>
 
-  </NuxtLayout>
+  </NuxtLayout>-->
 </template>
 
 <script setup lang="ts">

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

@@ -1,88 +1,94 @@
 <template>
+  <NuxtLayout>
+    <v-navigation-drawer color="" permanent></v-navigation-drawer>
+    <v-main>
+      <v-container>
+        <!--  tod
+        o: move to layout or create a reusable component -->
+        <!--  <div class="nc-container">-->
+        <!--    <div class="nc-topbar shadow-2">-->
+        <!--    </div>-->
+        <!--    <div class="nc-sidebar shadow-2 p-4 overflow-y-auto">-->
+
+        <!--    </div>-->
+        <!--    <div class="nc-content p-4 overflow-auto">-->
+        <v-row>
+          <v-col cols="4" v-for="project in projects" :key="project.id">
+
+            <v-card @click="navigateToDashboard(project)">
+              <v-card-title>
+                <div class="text-center">
+                  <h3>{{ project.title }}</h3>
+                </div>
+              </v-card-title>
+            </v-card>
+
+          </v-col>
+        </v-row>
+      </v-container>
+      <!--    </div>-->
+      <!--  </div>-->
 
 
-  <!--  todo: move to layout or create a reusable component -->
-  <div class="nc-container">
-    <div class="nc-topbar shadow-2">
-    </div>
-    <div class="nc-sidebar shadow-2 p-4 overflow-y-auto">
-
-    </div>
-    <div class="nc-content p-4 overflow-auto">
-      <div class="grid">
-        <div class="col-3 p-3" v-for="project in projects" :key="project.id">
-
-          <Card @click="navigateToDashboard(project)">
-            <template #content>
-              <div class="text-center">
-                <h3>{{ project.title }}</h3>
-              </div>
-            </template>
-          </Card>
-
-        </div>
-      </div>
-    </div>
-  </div>
-
+    </v-main>
+  </NuxtLayout>
 </template>
 
 <script setup lang="ts">
 
-import {useRouter} from "#app";
+import { useRouter } from "#app";
 
-const {$api} = useNuxtApp()
-const {user} = useUser()
+const { $api } = useNuxtApp();
+const { user } = useUser();
 
 
+const $router = useRouter();
 
-const $router = useRouter()
-
-const projects = ref()
+const projects = ref();
 
 const loadProjects = async () => {
   const projectsResponse = await $api.project.list({}, {
     headers: {
-      'xc-auth': user.token
+      "xc-auth": user.token
     }
-  })
-  projects.value = projectsResponse.list
-}
+  });
+  projects.value = projectsResponse.list;
+};
 
 const navigateToDashboard = async (project) => {
-  await $router.push('/dashboard/' + project.id)
-}
+  await $router.push("/dashboard/" + project.id);
+};
 
 onMounted(async () => {
-  await loadProjects()
-})
+  await loadProjects();
+});
 </script>
 
 <style scoped lang="scss">
-.nc-container {
-  .nc-topbar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    height: 50px;
-    width: 100%;
-    z-index: 5;
-  }
-
-  .nc-sidebar {
-    position: fixed;
-    top: 50px;
-    left: 0;
-    height: calc(100% - 50px);
-    width: 250px;
-  }
-
-  .nc-content {
-    position: fixed;
-    top: 50px;
-    left: 250px;
-    height: calc(100% - 50px);
-    width: calc(100% - 250px);
-  }
-}
+//.nc-container {
+//  .nc-topbar {
+//    position: fixed;
+//    top: 0;
+//    left: 0;
+//    height: 50px;
+//    width: 100%;
+//    z-index: 5;
+//  }
+//
+//  .nc-sidebar {
+//    position: fixed;
+//    top: 50px;
+//    left: 0;
+//    height: calc(100% - 50px);
+//    width: 250px;
+//  }
+//
+//  .nc-content {
+//    position: fixed;
+//    top: 50px;
+//    left: 250px;
+//    height: calc(100% - 50px);
+//    width: calc(100% - 250px);
+//  }
+//}
 </style>

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

@@ -1,32 +1,30 @@
 <template>
   <div>
     <!-- Enter your work email -->
-    <Card class="p-4 mx-auto mt-5" style="max-width: 500px">
-      <template #content>
+    <v-card class="pa-10 mx-auto mt-10" style="max-width: 500px">
+      <v-card-text>
 
-        <Message class="" v-if="error" severity="error">{{ error }}</Message>
+        <v-alert density="medium" class="mb-10" v-if="error" type="error">{{ error }}</v-alert>
 
-        <div class="p-float-label mt-5">
-          <InputText id="email" type="text" v-model="form.email" style="width:100%"/>
-          <label for="email">Email</label>
+        <div class="p-float-label ">
+          <v-text-field label="Email" id="email" type="text" v-model="form.email" style="width:100%"/>
         </div>
 
         <!-- Enter your password -->
-        <div class="p-float-label mt-5">
-          <InputText id="password" type="password" v-model="form.password" style="width:100%"/>
-          <label for="password">Password</label>
+        <div class="p-float-label ">
+          <v-text-field  label="Password" id="password" type="password" v-model="form.password" style="width:100%"/>
         </div>
 
         <div class="text-center">
-          <Button
-              class="mt-5"
+          <v-btn
+              class=""
               @click="signIn"
           >
             <b>Sign In</b>
-          </Button>
+          </v-btn>
         </div>
-      </template>
-    </Card>
+      </v-card-text>
+    </v-card>
   </div>
 
 </template>

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

@@ -1,32 +1,30 @@
 <template>
   <div>
     <!-- Enter your work email -->
-    <Card class="p-4 mx-auto mt-5" style="max-width: 500px">
-      <template #content>
+    <v-card class="pa-10 mx-auto mt-10" style="max-width: 500px">
+      <v-card-text>
 
-        <Message class="" v-if="error" severity="error">{{ error }}</Message>
+        <v-alert density="medium" class="mb-4" v-if="error" type="error">{{ error }}</v-alert>
 
-        <div class="p-float-label mt-5">
-          <InputText id="email" type="text" v-model="form.email" style="width:100%"/>
-          <label for="email">Email</label>
+        <div class="p-float-label ">
+          <v-text-field label="Email" id="email" type="text" v-model="form.email" style="width:100%"/>
         </div>
 
         <!-- Enter your password -->
-        <div class="p-float-label mt-5">
-          <InputText id="password" type="password" v-model="form.password" style="width:100%"/>
-          <label for="password">Password</label>
+        <div class="p-float-label ">
+          <v-text-field  label="Password" id="password" type="password" v-model="form.password" style="width:100%"/>
         </div>
 
         <div class="text-center">
-          <Button
-              class="mt-5"
-              @click="signUp"
+          <v-btn
+            class=""
+            @click="signUp"
           >
             <b>Sign Up</b>
-          </Button>
+          </v-btn>
         </div>
-      </template>
-    </Card>
+      </v-card-text>
+    </v-card>
   </div>
 
 </template>

packages/nc-gui-v2/plugins/primevue.ts

@@ -1,29 +1,29 @@
-import { defineNuxtPlugin } from "#app";
-import PrimeVue from "primevue/config";
-import Button from "primevue/button";
-import InputText from "primevue/inputtext";
-import Toast from "primevue/toast";
-import Card from "primevue/card";
-import Sidebar from "primevue/sidebar";
-import Message from "primevue/message";
-import TabMenu from "primevue/tabmenu";
-import DataTable from "primevue/datatable";
-import Column from "primevue/column";
-import Dropdown from "primevue/dropdown";
-import ToastService from "primevue/toastservice";
-
+// import { defineNuxtPlugin } from "#app";
+// import PrimeVue from "primevue/config";
+// import Button from "primevue/button";
+// import InputText from "primevue/inputtext";
+// import Toast from "primevue/toast";
+// import Card from "primevue/card";
+// import Sidebar from "primevue/sidebar";
+// import Message from "primevue/message";
+// import TabMenu from "primevue/tabmenu";
+// import DataTable from "primevue/datatable";
+// import Column from "primevue/column";
+// import Dropdown from "primevue/dropdown";
+// import ToastService from "primevue/toastservice";
+//
 export default defineNuxtPlugin(nuxtApp => {
-  nuxtApp.vueApp.use(PrimeVue, { ripple: true });
-  nuxtApp.vueApp.use(ToastService);
-  nuxtApp.vueApp.component("Button", Button);
-  nuxtApp.vueApp.component("InputText", InputText);
-  nuxtApp.vueApp.component("Toast", Toast);
-  nuxtApp.vueApp.component("Card", Card);
-  nuxtApp.vueApp.component("Sidebar", Sidebar);
-  nuxtApp.vueApp.component("Message", Message);
-  nuxtApp.vueApp.component("TabMenu", TabMenu);
-  nuxtApp.vueApp.component("DataTable", DataTable);
-  nuxtApp.vueApp.component("Dropdown", Dropdown);
-  nuxtApp.vueApp.component("Column", Column);
-  //other components that you need
+//   nuxtApp.vueApp.use(PrimeVue, { ripple: true });
+//   nuxtApp.vueApp.use(ToastService);
+//   nuxtApp.vueApp.component("Button", Button);
+//   nuxtApp.vueApp.component("InputText", InputText);
+//   nuxtApp.vueApp.component("Toast", Toast);
+//   nuxtApp.vueApp.component("Card", Card);
+//   nuxtApp.vueApp.component("Sidebar", Sidebar);
+//   nuxtApp.vueApp.component("Message", Message);
+//   nuxtApp.vueApp.component("TabMenu", TabMenu);
+//   nuxtApp.vueApp.component("DataTable", DataTable);
+//   nuxtApp.vueApp.component("Dropdown", Dropdown);
+//   nuxtApp.vueApp.component("Column", Column);
+//   //other components that you need
 });

packages/nc-gui-v2/plugins/vuetify.ts

@@ -1,21 +1,21 @@
 import { createVuetify } from 'vuetify'
-import {
-  VApp,
-  VAppBar,
-  VBtn
-} from 'vuetify/components'
+// import {
+//   VApp,
+//   VAppBar,
+//   VBtn
+// } from 'vuetify/components'
 import {defineNuxtPlugin} from "nuxt/app";
 
 // Import everything
-// import * as components from 'vuetify/components'
+import * as components from 'vuetify/components'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  // const vuetify = createVuetify({
-  //   components/*: {
-  //     VApp,
-  //     VAppBar,
-  //     VBtn*/
-  //   // }
-  // })
-  // nuxtApp.vueApp.use(vuetify)
+  const vuetify = createVuetify({
+    components/*: {
+      VApp,
+      VAppBar,
+      VBtn*/
+    // }
+  })
+  nuxtApp.vueApp.use(vuetify)
 })