Browse Source

wip: vuetify integration

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2534/head
Pranav C 3 years ago
parent
commit
d8e5bd09e3
  1. 12
      .run/Run GUI v2.run.xml
  2. 4
      .run/dev.run.xml
  3. 39
      packages/nc-gui-v2/components/dashboard/TabView.vue
  4. 7
      packages/nc-gui-v2/components/dashboard/TreeView.vue
  5. 71
      packages/nc-gui-v2/components/smartsheet/Grid.vue
  6. 2
      packages/nc-gui-v2/composables/metas.ts
  7. 2
      packages/nc-gui-v2/composables/project.ts
  8. 2
      packages/nc-gui-v2/composables/user.ts
  9. 8
      packages/nc-gui-v2/layouts/default.vue
  10. 8
      packages/nc-gui-v2/nuxt-shim.d.ts
  11. 24
      packages/nc-gui-v2/nuxt.config.ts
  12. 19
      packages/nc-gui-v2/pages/dashboard/[projectId].vue
  13. 138
      packages/nc-gui-v2/pages/projects/index.vue
  14. 26
      packages/nc-gui-v2/pages/signin.vue
  15. 28
      packages/nc-gui-v2/pages/signup.vue
  16. 54
      packages/nc-gui-v2/plugins/primevue.ts
  17. 28
      packages/nc-gui-v2/plugins/vuetify.ts

12
.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>

4
.run/dev.run.xml

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

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

@ -1,27 +1,36 @@
<template> <template>
<div> <div>
<TabMenu :model="tabItems" v-model:activeIndex="activeTab"/> <!-- <TabMenu :model="tabItems" v-model:activeIndex="activeTab"/>
<template v-if="tabItems && tabItems[activeTab]"> <template v-if="tabItems && tabItems[activeTab]">
<TabsSmartsheet :tab-meta="tabs[activeTab]" :key="tabs[activeTab].id"/> <TabsSmartsheet :tab-meta="tabs[activeTab]" :key="tabs[activeTab].id"/>
</template> </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> </div>
</template> </template>
<script setup lang="ts"> <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(() => { // const tabItems = computed(() => {
return tabs.value.map(tab => { // return tabs.value.map(tab => {
return { // return {
label: tab.title, // label: tab.title,
// icon: tab.icon, // // icon: tab.icon,
closable: true // closable: true
} // }
}) // })
}) // })
</script> </script>

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

@ -1,11 +1,12 @@
<template> <template>
<div> <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})"> @click="addTab({type:'table',title:table.title, id:table.id})">
{{ table.title }} {{ table.title }}
</div> </v-list-item>
</v-list>
</div> </div>
</template> </template>

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

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

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

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

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

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

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

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

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

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

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

@ -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>;
}
}

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

@ -12,21 +12,21 @@ export default defineNuxtConfig({
// '~/plugins/vuetify.ts', // '~/plugins/vuetify.ts',
// '~/plugins/api.ts', // '~/plugins/api.ts',
], ],
// css: ['vuetify/lib/styles/main.sass'], 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',
],
build: { 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: { vite: {
define: { define: {
'process.env.DEBUG': 'false', 'process.env.DEBUG': 'false',

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

@ -1,7 +1,22 @@
<template> <template>
<NuxtLayout> <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-container">
<div class="nc-topbar shadow-2"> <div class="nc-topbar shadow-2">
</div> </div>
@ -13,7 +28,7 @@
</div> </div>
</div> </div>
</NuxtLayout> </NuxtLayout>-->
</template> </template>
<script setup lang="ts"> <script setup lang="ts">

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

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

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

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

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

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

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

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

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

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

Loading…
Cancel
Save