github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

chore(nc-gui): cleanup pages

pull/3801/head
braks 2 years ago
parent
b27e909ade
commit
81b769e932
5 changed files with 41 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      packages/nc-gui/pages/index/index.vue
  2. 10
      packages/nc-gui/pages/index/index/[projectId].vue
  3. 33
      packages/nc-gui/pages/index/index/create-external.vue
  4. 4
      packages/nc-gui/pages/index/index/create.vue
  5. 30
      packages/nc-gui/pages/index/index/index.vue

10
packages/nc-gui/pages/index/index.vue
Unescape View File

@ -5,13 +5,13 @@ const route = useRoute()
</script> </script>
<template> <template>
<NuxtLayout> <LazyNuxtLayout>
<div <div
class="min-h-[calc(100vh_-_var(--header-height))] h-auto bg-primary bg-opacity-5 flex flex-col lg:flex-row flex-wrap gap-6 py-6 px-12 pt-65px" class="min-h-[calc(100vh_-_var(--header-height))] h-auto bg-primary bg-opacity-5 flex flex-col lg:flex-row flex-wrap gap-6 py-6 px-12 pt-65px"
> >
<div class="flex-1 justify-end hidden xl:(flex)"> <div class="flex-1 justify-end hidden xl:(flex)">
<div> <div>
<GeneralSponsors /> <LazyGeneralSponsors />
</div> </div>
</div> </div>
@ -23,15 +23,15 @@ const route = useRoute()
<template v-if="route.name === 'index-index'"> <template v-if="route.name === 'index-index'">
<TransitionGroup name="page" mode="out-in"> <TransitionGroup name="page" mode="out-in">
<div key="social-card"> <div key="social-card">
<GeneralSocialCard /> <LazyGeneralSocialCard />
</div> </div>
<div key="sponsors" class="block mt-0 lg:(!mt-6) xl:hidden"> <div key="sponsors" class="block mt-0 lg:(!mt-6) xl:hidden">
<GeneralSponsors /> <LazyGeneralSponsors />
</div> </div>
</TransitionGroup> </TransitionGroup>
</template> </template>
</div> </div>
</div> </div>
</NuxtLayout> </LazyNuxtLayout>
</template> </template>

10
packages/nc-gui/pages/index/index/[projectId].vue
Unescape View File

@ -1,27 +1,25 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Form } from 'ant-design-vue' import type { Form } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import type { ProjectType } from 'nocodb-sdk' import type { ProjectType } from 'nocodb-sdk'
import { import {
extractSdkResponseErrorMsg, extractSdkResponseErrorMsg,
message,
navigateTo, navigateTo,
nextTick, nextTick,
onMounted, onMounted,
projectTitleValidator, projectTitleValidator,
reactive, reactive,
ref, ref,
useApi, useProject,
useRoute, useRoute,
useSidebar, useSidebar,
} from '#imports' } from '#imports'
const { isLoading } = useApi()
useSidebar('nc-left-sidebar', { hasSidebar: false }) useSidebar('nc-left-sidebar', { hasSidebar: false })
const route = useRoute() const route = useRoute()
const { project, loadProject, updateProject } = useProject(route.params.projectId as string) const { project, loadProject, updateProject, isLoading } = useProject(route.params.projectId as string)
await loadProject() await loadProject()
@ -69,7 +67,7 @@ onMounted(async () => {
<div <div
class="update-project bg-white relative flex-auto flex flex-col justify-center gap-2 p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)" class="update-project bg-white relative flex-auto flex flex-col justify-center gap-2 p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
> >
<general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" /> <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
<div <div
class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer" class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"

33
packages/nc-gui/pages/index/index/create-external.vue
Unescape View File

@ -1,5 +1,5 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Form, Modal, message } from 'ant-design-vue' import { Form, Modal } from 'ant-design-vue'
import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select' import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
import { import {
CertTypes, CertTypes,
@ -11,6 +11,7 @@ import {
generateUniqueName, generateUniqueName,
getDefaultConnectionConfig, getDefaultConnectionConfig,
getTestDatabaseName, getTestDatabaseName,
message,
navigateTo, navigateTo,
nextTick, nextTick,
onMounted, onMounted,
@ -24,8 +25,7 @@ import {
watch, watch,
} from '#imports' } from '#imports'
import { ClientType } from '~/lib' import { ClientType } from '~/lib'
import { DefaultConnection, SQLiteConnection } from '~/utils' import type { DefaultConnection, ProjectCreateForm } from '~/utils'
import type { ProjectCreateForm } from '~/utils'
const useForm = Form.useForm const useForm = Form.useForm
@ -318,9 +318,10 @@ watch(
) )
// select and focus title field on load // select and focus title field on load
onMounted(() => { onMounted(async () => {
formState.title = generateUniqueName() formState.title = await generateUniqueName()
nextTick(() => {
await nextTick(() => {
// todo: replace setTimeout and follow better approach // todo: replace setTimeout and follow better approach
setTimeout(() => { setTimeout(() => {
const input = form.value?.$el?.querySelector('input[type=text]') const input = form.value?.$el?.querySelector('input[type=text]')
@ -335,7 +336,7 @@ onMounted(() => {
<div <div
class="create-external bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)" class="create-external bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
> >
<general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" /> <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
<div <div
class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer" class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"
@ -377,34 +378,28 @@ onMounted(() => {
:label="$t('labels.sqliteFile')" :label="$t('labels.sqliteFile')"
v-bind="validateInfos['dataSource.connection.connection.filename']" v-bind="validateInfos['dataSource.connection.connection.filename']"
> >
<a-input v-model:value="(formState.dataSource.connection as SQLiteConnection).connection.filename" /> <a-input v-model:value="formState.dataSource.connection.connection.filename" />
</a-form-item> </a-form-item>
<template v-else> <template v-else>
<!-- Host Address --> <!-- Host Address -->
<a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']"> <a-form-item :label="$t('labels.hostAddress')" v-bind="validateInfos['dataSource.connection.host']">
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).host" class="nc-extdb-host-address" /> <a-input v-model:value="formState.dataSource.connection.host" class="nc-extdb-host-address" />
</a-form-item> </a-form-item>
<!-- Port Number --> <!-- Port Number -->
<a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']"> <a-form-item :label="$t('labels.port')" v-bind="validateInfos['dataSource.connection.port']">
<a-input-number <a-input-number v-model:value="formState.dataSource.connection.port" class="!w-full nc-extdb-host-port" />
v-model:value="(formState.dataSource.connection as DefaultConnection).port"
class="!w-full nc-extdb-host-port"
/>
</a-form-item> </a-form-item>
<!-- Username --> <!-- Username -->
<a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']"> <a-form-item :label="$t('labels.username')" v-bind="validateInfos['dataSource.connection.user']">
<a-input v-model:value="(formState.dataSource.connection as DefaultConnection).user" class="nc-extdb-host-user" /> <a-input v-model:value="formState.dataSource.connection.user" class="nc-extdb-host-user" />
</a-form-item> </a-form-item>
<!-- Password --> <!-- Password -->
<a-form-item :label="$t('labels.password')"> <a-form-item :label="$t('labels.password')">
<a-input-password <a-input-password v-model:value="formState.dataSource.connection.password" class="nc-extdb-host-password" />
v-model:value="(formState.dataSource.connection as DefaultConnection).password"
class="nc-extdb-host-password"
/>
</a-form-item> </a-form-item>
<!-- Database --> <!-- Database -->
@ -557,7 +552,7 @@ onMounted(() => {
wrap-class-name="nc-modal-edit-connection-json" wrap-class-name="nc-modal-edit-connection-json"
@ok="handleOk" @ok="handleOk"
> >
<MonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" /> <LazyMonacoEditor v-if="configEditDlg" v-model="customFormState" class="h-[400px] w-full" />
</a-modal> </a-modal>
<!-- Use Connection URL --> <!-- Use Connection URL -->

4
packages/nc-gui/pages/index/index/create.vue
Unescape View File

@ -1,8 +1,8 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { Form } from 'ant-design-vue' import type { Form } from 'ant-design-vue'
import { message } from 'ant-design-vue'
import { import {
extractSdkResponseErrorMsg, extractSdkResponseErrorMsg,
message,
navigateTo, navigateTo,
nextTick, nextTick,
onMounted, onMounted,
@ -66,7 +66,7 @@ onMounted(async () => {
<div <div
class="create bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)" class="create bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"
> >
<general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" /> <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
<div <div
class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer" class="color-transition transform group absolute top-5 left-5 text-4xl rounded-full bg-white cursor-pointer"

30
packages/nc-gui/pages/index/index/index.vue
Unescape View File

@ -1,16 +1,17 @@
<script lang="ts" setup> <script lang="ts" setup>
import { Empty, Modal, message } from 'ant-design-vue' import { Empty, Modal } from 'ant-design-vue'
import type { ProjectType } from 'nocodb-sdk' import type { ProjectType } from 'nocodb-sdk'
import tinycolor from 'tinycolor2' import tinycolor from 'tinycolor2'
import { import {
computed, computed,
definePageMeta, definePageMeta,
extractSdkResponseErrorMsg, extractSdkResponseErrorMsg,
message,
navigateTo, navigateTo,
projectThemeColors, projectThemeColors,
ref, ref,
themeV2Colors, themeV2Colors,
useApi, useLazyAsyncData,
useNuxtApp, useNuxtApp,
useSidebar, useSidebar,
useUIPermission, useUIPermission,
@ -22,7 +23,15 @@ definePageMeta({
const { $api, $e } = useNuxtApp() const { $api, $e } = useNuxtApp()
const { api, isLoading } = useApi() const {
data: projects,
pending: isLoading,
execute,
} = useLazyAsyncData(async () => {
const response = await $api.project.list({})
return response.list
})
const { isUIAllowed } = useUIPermission() const { isUIAllowed } = useUIPermission()
@ -30,13 +39,6 @@ useSidebar('nc-left-sidebar', { hasSidebar: false, isOpen: true })
const filterQuery = ref('') const filterQuery = ref('')
const projects = ref<ProjectType[]>()
const loadProjects = async () => {
const response = await api.project.list({})
projects.value = response.list
}
const filteredProjects = computed( const filteredProjects = computed(
() => () =>
projects.value?.filter( projects.value?.filter(
@ -55,7 +57,7 @@ const deleteProject = (project: ProjectType) => {
cancelText: 'No', cancelText: 'No',
async onOk() { async onOk() {
try { try {
await api.project.delete(project.id as string) await $api.project.delete(project.id as string)
$e('a:project:delete') $e('a:project:delete')
@ -67,7 +69,7 @@ const deleteProject = (project: ProjectType) => {
}) })
} }
await loadProjects() await execute()
const handleProjectColor = async (projectId: string, color: string) => { const handleProjectColor = async (projectId: string, color: string) => {
const tcolor = tinycolor(color) const tcolor = tinycolor(color)
@ -126,7 +128,7 @@ const customRow = (record: ProjectType) => ({
<template> <template>
<div class="bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)"> <div class="bg-white relative flex flex-col justify-center gap-2 w-full p-8 md:(rounded-lg border-1 border-gray-200 shadow-xl)">
<general-noco-icon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" /> <LazyGeneralNocoIcon class="color-transition hover:(ring ring-accent)" :class="[isLoading ? 'animated-bg-gradient' : '']" />
<h1 class="flex items-center justify-center gap-2 leading-8 mb-8 mt-4"> <h1 class="flex items-center justify-center gap-2 leading-8 mb-8 mt-4">
<!-- My Projects --> <!-- My Projects -->
@ -141,7 +143,7 @@ const customRow = (record: ProjectType) => ({
v-e="['a:project:refresh']" v-e="['a:project:refresh']"
class="text-xl text-gray-500 group-hover:text-accent cursor-pointer" class="text-xl text-gray-500 group-hover:text-accent cursor-pointer"
:class="isLoading ? '!text-primary' : ''" :class="isLoading ? '!text-primary' : ''"
@click="loadProjects" @click="execute"
/> />
</span> </span>
</a-tooltip> </a-tooltip>

Write Preview
Loading…
Cancel
Save