Browse Source

fix(gui-v2): project create/update/list corrections

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/2730/head
Pranav C 2 years ago
parent
commit
5006f18f9c
  1. 38
      packages/nc-gui-v2/pages/index/index.vue
  2. 10
      packages/nc-gui-v2/pages/project/index/[id].vue
  3. 12
      packages/nc-gui-v2/pages/project/index/create.vue
  4. 4
      packages/nc-gui-v2/plugins/api.ts

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

@ -2,6 +2,7 @@
import { Modal } from 'ant-design-vue'
import type { ProjectType } from 'nocodb-sdk'
import { useToast } from 'vue-toastification'
import { navigateTo } from '#app'
import { computed, onMounted } from '#imports'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@ -12,7 +13,7 @@ import MdiMenuDown from '~icons/mdi/menu-down'
import MdiPlus from '~icons/mdi/plus'
import MdiDatabaseOutline from '~icons/mdi/database-outline'
const { $api } = useNuxtApp()
const { $api, $state } = useNuxtApp()
const toast = useToast()
const filterQuery = ref('')
@ -34,15 +35,14 @@ const filteredProjects = computed(() => {
const deleteProject = (project: ProjectType) => {
Modal.confirm({
title: 'Do you want to delete the project?',
content: 'Some descriptions',
title: `Do you want to delete '${project.title}' project?`,
okText: 'Yes',
okType: 'danger',
cancelText: 'No',
async onOk() {
try {
await $api.project.delete(project.id as string)
projects.splice(projects.indexOf(project), 1)
projects.value.splice(projects.value.indexOf(project), 1)
} catch (e) {
toast.error(await extractSdkResponseErrorMsg(e))
}
@ -53,6 +53,9 @@ const deleteProject = (project: ProjectType) => {
onMounted(() => {
loadProjects()
})
// hide sidebar
$state.sidebarOpen.value = false
</script>
<template>
@ -74,10 +77,10 @@ onMounted(() => {
<div class="flex-grow"></div>
<a-dropdown @click.stop>
<a-button
>
<div class="flex align-center" >{{ $t('title.newProj') }}
<MdiMenuDown class="menu-icon" />
<a-button>
<div class="flex align-center">
{{ $t('title.newProj') }}
<MdiMenuDown class="menu-icon" />
</div>
</a-button>
@ -106,17 +109,26 @@ onMounted(() => {
<a-skeleton />
</div>
<a-table v-else :data-source="filteredProjects" :pagination="{ position: ['bottomCenter'] }">
<a-table
v-else
:custom-row="
(record) => ({
onClick: () => navigateTo(`/nc/${record.id}`),
})
"
:data-source="filteredProjects"
:pagination="{ position: ['bottomCenter'] }"
>
<a-table-column key="title" title="Title" data-index="title">
<template #default="{ text }">
<div class="capitalize !w-[400px] overflow-hidden overflow-ellipsis whitespace-nowrap" :title="text">{{ text }}</div>
</template>
</a-table-column>
<a-table-column key="id" title="Actions" data-index="id">
<template #default="{ text }">
<template #default="{ text, record }">
<div class="flex align-center">
<MdiEditOutline class="nc-action-btn" @click.stop="navigateTo(`/project/${text}`)" />
<MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(text)" />
<MdiDeleteOutline class="nc-action-btn" @click.stop="deleteProject(record)" />
</div>
</template>
</a-table-column>
@ -133,4 +145,8 @@ onMounted(() => {
:deep(.ant-table-cell) {
@apply py-1;
}
:deep(.ant-table-row) {
@apply cursor-pointer;
}
</style>

10
packages/nc-gui-v2/pages/project/index/[id].vue

@ -3,6 +3,7 @@ import { onMounted } from '@vue/runtime-core'
import type { Form } from 'ant-design-vue'
import type { ProjectType } from 'nocodb-sdk'
import { ref } from 'vue'
import { useToast } from 'vue-toastification'
import { navigateTo, useNuxtApp, useRoute } from '#app'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
import { projectTitleValidator } from '~/utils/projectCreateUtils'
@ -10,7 +11,8 @@ import MaterialSymbolsRocketLaunchOutline from '~icons/material-symbols/rocket-l
const loading = ref(false)
const { $api, $toast, $state } = useNuxtApp()
const { $api, $state } = useNuxtApp()
const toast = useToast()
const route = useRoute()
const nameValidationRules = [
@ -30,7 +32,7 @@ const getProject = async () => {
const result: ProjectType = await $api.project.read(route.params.id as string)
formState.title = result.title as string
} catch (e: any) {
$toast.error(await extractSdkResponseErrorMsg(e))
toast.error(await extractSdkResponseErrorMsg(e))
}
}
const renameProject = async () => {
@ -40,7 +42,7 @@ const renameProject = async () => {
navigateTo(`/nc/${route.params.id}`)
} catch (e) {
$toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
toast.error(await extractSdkResponseErrorMsg(e))
}
loading.value = false
}
@ -68,7 +70,7 @@ onMounted(async () => {
<a-card class="w-[500px] mx-auto !mt-100px shadow-md">
<h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.editProject') }}</h3>
<a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="renameProject">
<a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @finish="renameProject">
<a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
<a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
</a-form-item>

12
packages/nc-gui-v2/pages/project/index/create.vue

@ -1,6 +1,7 @@
<script lang="ts" setup>
import { onMounted, onUpdated } from '@vue/runtime-core'
import type { Form } from 'ant-design-vue'
import { useToast } from 'vue-toastification'
import { nextTick, ref } from '#imports'
import { navigateTo, useNuxtApp } from '#app'
import { extractSdkResponseErrorMsg } from '~/utils/errorUtils'
@ -11,7 +12,8 @@ const name = ref('')
const loading = ref(false)
const valid = ref(false)
const { $api, $toast, $state } = useNuxtApp()
const { $api, $state } = useNuxtApp()
const toast = useToast()
const nameValidationRules = [
{
@ -32,9 +34,11 @@ const createProject = async () => {
title: formState.title,
})
debugger
await navigateTo(`/nc/${result.id}`)
} catch (e: any) {
$toast.error(await extractSdkResponseErrorMsg(e)).goAway(3000)
debugger
toast.error(await extractSdkResponseErrorMsg(e))
}
loading.value = false
}
@ -42,7 +46,7 @@ const createProject = async () => {
const form = ref<typeof Form>()
// hide sidebar
// $state.sidebarOpen.value = false
$state.sidebarOpen.value = false
// select and focus title field on load
onMounted(async () => {
@ -61,7 +65,7 @@ onMounted(async () => {
<a-card class="w-[500px] mx-auto !mt-100px shadow-md">
<h3 class="text-3xl text-center font-semibold mb-2">{{ $t('activity.createProject') }}</h3>
<a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @submit="createProject">
<a-form ref="form" :model="formState" name="basic" layout="vertical" autocomplete="off" @finish="createProject">
<a-form-item :label="$t('labels.projName')" name="title" :rules="nameValidationRules" class="my-10 mx-10">
<a-input v-model:value="formState.title" name="title" class="nc-metadb-project-name" />
</a-form-item>

4
packages/nc-gui-v2/plugins/api.ts

@ -43,14 +43,14 @@ function addAxiosInterceptors(api: Api<any>, app: { $state: GlobalState }) {
// Return any error which is not due to authentication back to the calling service
if (!error.response || error.response.status !== 401) {
return error
return Promise.reject(error)
}
// Logout user if token refresh didn't work or user is disabled
if (error.config.url === '/auth/refresh-token') {
app.$state.signOut()
return error
return Promise.reject(error)
}
// Try request again with new token

Loading…
Cancel
Save