mirror of https://github.com/nocodb/nocodb
Pranav C
2 years ago
17 changed files with 271 additions and 203 deletions
@ -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> |
||||
@ -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>; |
||||
} |
||||
} |
||||
@ -1,88 +1,94 @@
|
||||
<template> |
||||
|
||||
|
||||
<!-- 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> |
||||
<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> |
||||
</template> |
||||
</Card> |
||||
</v-card-title> |
||||
</v-card> |
||||
|
||||
</v-col> |
||||
</v-row> |
||||
</v-container> |
||||
<!-- </div>--> |
||||
<!-- </div>--> |
||||
|
||||
</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> |
||||
|
||||
@ -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
|
||||
}); |
||||
|
||||
@ -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) |
||||
}) |
||||
|
||||
Loading…
Reference in new issue