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

refactor/gui-v2-store-ui-and-code-cleanup

pull/2798/head
Muhammed Mustafa 2 years ago
parent
0727d91770
commit
6c90083ad4
4 changed files with 209 additions and 177 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 262
      packages/nc-gui-v2/components/dashboard/settings/AppStore/AppInstall.vue
  2. 104
      packages/nc-gui-v2/components/dashboard/settings/AppStore/index.vue
  3. 19
      packages/nc-gui-v2/package-lock.json
  4. 1
      packages/nc-gui-v2/package.json

262
packages/nc-gui-v2/components/dashboard/settings/AppStore/AppInstall.vue
Unescape View File

@ -15,45 +15,45 @@ const emits = defineEmits(['saved'])
const toast = useToast()
const { $api } = useNuxtApp()
const plugin = ref<any>(null)
const pluginFormData = ref<any>({})
const formRef = ref()
const isLoading = ref(true)
const loadingAction = ref<null | string>(null)
let plugin = $ref<any>(null)
let pluginFormData = $ref<any>({})
let isLoading = $ref(true)
let loadingAction = $ref<null | string>(null)
const saveSettings = async () => {
loadingAction.value = 'save'
loadingAction = 'save'
try {
await formRef.value?.validateFields()
await $api.plugin.update(id, {
input: JSON.stringify(pluginFormData.value),
input: JSON.stringify(pluginFormData),
active: true,
})
emits('saved')
toast.success(plugin.value.formDetails.msgOnInstall || 'Plugin settings saved successfully')
toast.success(plugin.formDetails.msgOnInstall || 'Plugin settings saved successfully')
} catch (_e: any) {
const e = await extractSdkResponseErrorMsg(_e)
toast.error(e.message)
} finally {
loadingAction.value = null
loadingAction = null
}
}
const addSetting = () => {
pluginFormData.value.push({})
pluginFormData.push({})
}
const testSettings = async () => {
loadingAction.value = 'test'
loadingAction = 'test'
try {
const res = await $api.plugin.test({
input: pluginFormData.value,
id: plugin.value?.id,
category: plugin.value?.category,
title: plugin.value?.title,
input: pluginFormData,
id: plugin?.id,
category: plugin?.category,
title: plugin?.title,
})
if (res) {
toast.success('Successfully tested plugin settings')
@ -64,7 +64,7 @@ const testSettings = async () => {
const e = await extractSdkResponseErrorMsg(_e)
toast.error(e.message)
} finally {
loadingAction.value = null
loadingAction = null
}
}
@ -83,149 +83,147 @@ const doAction = async (action: { key: string }) => {
const readPluginDetails = async () => {
try {
isLoading.value = true
isLoading = true
const res = await $api.plugin.read(id)
const formDetails = JSON.parse(res.input_schema ?? '{}')
const emptyParsedInput = formDetails.array ? [{}] : {}
const parsedInput = res.input ? JSON.parse(res.input) : emptyParsedInput
plugin.value = { ...res, formDetails, parsedInput }
pluginFormData.value = plugin.value.parsedInput
plugin = { ...res, formDetails, parsedInput }
pluginFormData = plugin.parsedInput
} catch (e) {
console.log(e)
} finally {
isLoading.value = false
isLoading = false
}
}
const deleteRow = (index: number) => {
pluginFormData.value.splice(index, 1)
const deleteFormRow = (index: number) => {
pluginFormData.splice(index, 1)
}
onMounted(async () => {
if (plugin.value === null) {
if (plugin === null) {
await readPluginDetails()
}
})
</script>
<template>
<div>
<div v-if="isLoading" class="flex flex-row w-full justify-center">
<a-spin size="large" />
</div>
<template v-else>
<div class="flex flex-col">
<div class="flex flex-row justify-center pb-4 mb-2 border-b-1 w-full space-x-1">
<div
v-if="plugin.logo"
:style="{ background: plugin.title === 'SES' ? '#242f3e' : '' }"
class="mr-1 d-flex align-center justify-center"
:class="{ 'pa-2': plugin.title === 'SES' }"
>
<img :src="`/${plugin.logo}`" class="h-6" />
</div>
<span class="font-semibold text-lg">{{ plugin.formDetails.title }}</span>
<div v-if="isLoading" class="flex flex-row w-full justify-center items-center h-52">
<a-spin size="large" />
</div>
<template v-else>
<div class="flex flex-col">
<div class="flex flex-row justify-center pb-4 mb-2 border-b-1 w-full space-x-1">
<div
v-if="plugin.logo"
:style="{ background: plugin.title === 'SES' ? '#242f3e' : '' }"
class="mr-1 d-flex align-center justify-center"
:class="{ 'pa-2': plugin.title === 'SES' }"
>
<img :src="`/${plugin.logo}`" class="h-6" />
</div>
<a-form ref="formRef" :model="pluginFormData" class="mx-auto mt-2">
<!-- Form with multiple entry -->
<table v-if="plugin.formDetails.array" class="form-table">
<thead>
<tr>
<th v-for="(columnData, columnIndex) in plugin.formDetails.items" :key="columnIndex">
<div class="text-center font-normal">
{{ columnData.label }} <span v-if="columnData.required" class="text-red-600">*</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(itemRow, itemIndex) in plugin.parsedInput" :key="itemIndex">
<td v-for="(columnData, columnIndex) in plugin.formDetails.items" :key="columnIndex" class="px-2">
<a-form-item
:name="[`${itemIndex}`, columnData.key]"
:rules="[{ required: columnData.required, message: `${columnData.label} is required` }]"
>
<a-input-password
v-if="columnData.type === 'Password'"
v-model:value="itemRow[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-textarea
v-else-if="columnData.type === 'LongText'"
v-model:value="itemRow[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-switch
v-else-if="columnData.type === 'Checkbox'"
v-model:value="itemRow[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-input v-else v-model:value="itemRow[columnData.key]" :placeholder="columnData.placeholder" />
</a-form-item>
</td>
<td v-if="itemIndex !== 0" class="pb-4">
<MdiDeleteOutlineIcon class="hover:text-red-400 cursor-pointer" @click="deleteRow(itemIndex)" />
</td>
</tr>
</tbody>
<span class="font-semibold text-lg">{{ plugin.formDetails.title }}</span>
</div>
<a-form ref="formRef" :model="pluginFormData" class="mx-auto mt-2">
<!-- Form with multiple entry -->
<table v-if="plugin.formDetails.array" class="form-table">
<thead>
<tr>
<td :colspan="plugin.formDetails.items.length" class="text-center">
<a-button type="default" class="!bg-gray-100 rounded-md border-0" @click="addSetting">
<template #icon>
<MdiPlusIcon class="flex mx-auto" />
</template>
</a-button>
<th v-for="(columnData, columnIndex) in plugin.formDetails.items" :key="columnIndex">
<div class="text-center font-normal">
{{ columnData.label }} <span v-if="columnData.required" class="text-red-600">*</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="(itemRow, itemIndex) in plugin.parsedInput" :key="itemIndex">
<td v-for="(columnData, columnIndex) in plugin.formDetails.items" :key="columnIndex" class="px-2">
<a-form-item
:name="[`${itemIndex}`, columnData.key]"
:rules="[{ required: columnData.required, message: `${columnData.label} is required` }]"
>
<a-input-password
v-if="columnData.type === 'Password'"
v-model:value="itemRow[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-textarea
v-else-if="columnData.type === 'LongText'"
v-model:value="itemRow[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-switch
v-else-if="columnData.type === 'Checkbox'"
v-model:value="itemRow[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-input v-else v-model:value="itemRow[columnData.key]" :placeholder="columnData.placeholder" />
</a-form-item>
</td>
<td v-if="itemIndex !== 0" class="pb-4">
<MdiDeleteOutlineIcon class="hover:text-red-400 cursor-pointer" @click="deleteFormRow(itemIndex)" />
</td>
</tr>
</table>
<!-- Form with only one entry -->
<div v-else>
<a-form-item
v-for="(columnData, i) in plugin.formDetails.items"
:key="i"
:label="columnData.label"
:name="columnData.key"
:rules="[{ required: columnData.required, message: `${columnData.label} is required` }]"
>
<a-input-password
v-if="columnData.type === 'Password'"
v-model:value="pluginFormData[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-textarea
v-else-if="columnData.type === 'LongText'"
v-model:value="pluginFormData[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-switch
v-else-if="columnData.type === 'Checkbox'"
v-model:checked="pluginFormData[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-input v-else v-model:value="pluginFormData[columnData.key]" :placeholder="columnData.placeholder" />
</a-form-item>
</div>
<div class="flex flex-row space-x-4 justify-center mt-4">
<a-button
v-for="(action, i) in plugin.formDetails.actions"
:key="i"
:loading="loadingAction === action.key"
:type="action.key === 'save' ? 'primary' : 'default'"
:disabled="!!loadingAction"
@click="doAction(action)"
>
{{ action.label }}
</a-button>
</div>
</a-form>
</div>
</template>
</div>
</tbody>
<tr>
<td :colspan="plugin.formDetails.items.length" class="text-center">
<a-button type="default" class="!bg-gray-100 rounded-md border-0" @click="addSetting">
<template #icon>
<MdiPlusIcon class="flex mx-auto" />
</template>
</a-button>
</td>
</tr>
</table>
<!-- Form with only one entry -->
<div v-else>
<a-form-item
v-for="(columnData, i) in plugin.formDetails.items"
:key="i"
:label="columnData.label"
:name="columnData.key"
:rules="[{ required: columnData.required, message: `${columnData.label} is required` }]"
>
<a-input-password
v-if="columnData.type === 'Password'"
v-model:value="pluginFormData[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-textarea
v-else-if="columnData.type === 'LongText'"
v-model:value="pluginFormData[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-switch
v-else-if="columnData.type === 'Checkbox'"
v-model:checked="pluginFormData[columnData.key]"
:placeholder="columnData.placeholder"
/>
<a-input v-else v-model:value="pluginFormData[columnData.key]" :placeholder="columnData.placeholder" />
</a-form-item>
</div>
<div class="flex flex-row space-x-4 justify-center mt-4">
<a-button
v-for="(action, i) in plugin.formDetails.actions"
:key="i"
:loading="loadingAction === action.key"
:type="action.key === 'save' ? 'primary' : 'default'"
:disabled="!!loadingAction"
@click="doAction(action)"
>
{{ action.label }}
</a-button>
</div>
</a-form>
</div>
</template>
</template>
<style scoped lang="scss">

104
packages/nc-gui-v2/components/dashboard/settings/AppStore/index.vue
Unescape View File

@ -1,5 +1,4 @@
<script setup lang="ts">
import { ref } from 'vue'
import { useToast } from 'vue-toastification'
import AppInstall from './AppInstall.vue'
import MdiEditIcon from '~icons/ic/round-edit'
@ -8,63 +7,64 @@ import MdiPlusIcon from '~icons/mdi/plus'
const { $api, $e } = useNuxtApp()
const toast = useToast()
const apps = ref<null | Array<any>>(null)
const showPluginUninstallModal = ref(false)
const showPluginInstallModal = ref(false)
const pluginApp = ref<any>(null)
let apps = $ref<null | Array<any>>(null)
let showPluginUninstallModal = $ref(false)
let showPluginInstallModal = $ref(false)
let pluginApp = $ref<any>(null)
const loadPluginList = async () => {
const fetchPluginApps = async () => {
try {
const plugins = (await $api.plugin.list()).list ?? []
apps.value = plugins.map((p) => ({
apps = plugins.map((p) => ({
...p,
tags: p.tags ? p.tags.split(',') : [],
parsedInput: p.input && JSON.parse(p.input),
}))
} catch (e) {
console.error(e)
toast.error('Something went wrong')
}
}
const confirmResetPlugin = async () => {
const resetPlugin = async () => {
try {
await $api.plugin.update(pluginApp.value.id, {
await $api.plugin.update(pluginApp.id, {
input: undefined,
active: false,
})
toast.success('Plugin uninstalled successfully')
showPluginUninstallModal.value = false
await loadPluginList()
showPluginUninstallModal = false
await fetchPluginApps()
} catch (e: any) {
console.log(e)
toast.error(e.message)
}
$e('a:appstore:reset', { app: pluginApp.value.title })
$e('a:appstore:reset', { app: pluginApp.title })
}
const saved = async () => {
showPluginInstallModal.value = false
await loadPluginList()
$e('a:appstore:install', { app: pluginApp.value.title })
showPluginInstallModal = false
await fetchPluginApps()
$e('a:appstore:install', { app: pluginApp.title })
}
const installApp = async (app: any) => {
showPluginInstallModal.value = true
pluginApp.value = app
const showInstallPluginModal = async (app: any) => {
showPluginInstallModal = true
pluginApp = app
$e('c:appstore:install', { app: app.title })
}
const resetApp = async (app: any) => {
showPluginUninstallModal.value = true
pluginApp.value = app
const showResetPluginModal = async (app: any) => {
showPluginUninstallModal = true
pluginApp = app
}
onMounted(async () => {
if (apps.value === null) {
loadPluginList()
if (apps === null) {
fetchPluginApps()
}
})
</script>
@ -79,12 +79,14 @@ onMounted(async () => {
/>
</a-modal>
<a-modal v-model:visible="showPluginUninstallModal" min-width="400px" max-width="700px" min-height="300" :footer="null">
<div class="flex flex-col">
<div class="flex">{{ `Please click on submit to reset ${pluginApp && pluginApp.title}` }}</div>
<div class="flex mt-6 justify-center space-x-2">
<a-modal v-model:visible="showPluginUninstallModal" width="22rem" centered :footer="null">
<div class="flex flex-col h-full">
<div class="flex flex-row justify-center mt-2 text-center w-full">
{{ `Are you sure you to reset ${pluginApp && pluginApp.title}` }}
</div>
<div class="flex mt-10 justify-center space-x-2">
<a-button @click="showPluginUninstallModal = false"> Cancel </a-button>
<a-button type="primary" @click="confirmResetPlugin"> Submit </a-button>
<a-button type="primary" danger @click="resetPlugin"> Reset </a-button>
</div>
</div>
</a-modal>
@ -93,29 +95,34 @@ onMounted(async () => {
<v-card v-if="pluginApp">
<v-card-text> Please confirm to reset {{ pluginApp.title }} </v-card-text>
<v-card-actions>
<v-btn color="primary" @click="confirmResetPlugin"> Yes </v-btn>
<v-btn color="primary" @click="resetPlugin"> Yes </v-btn>
<v-btn @click="showPluginUninstallModal = false"> No </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<div class="h-full overflow-y-scroll grid grid-cols-2 gap-x-2 gap-y-4">
<a-card v-for="(app, i) in apps" :key="i" class="relative flex overflow-x-hidden app-item-card !shadow-sm rounded-md w-full" :bodyStyle="{width: '100%'}">
<a-card
v-for="(app, i) in apps"
:key="i"
class="relative flex overflow-x-hidden app-item-card !shadow-sm rounded-md w-full"
:body-style="{ width: '100%' }"
>
<div class="install-btn flex flex-row justify-end space-x-1">
<a-button v-if="app.parsedInput" size="small" outlined class="!caption capitalize" @click="installApp(app)">
<div class="flex flex-row justify-center items-center">
<MdiEditIcon :height="12" />
<a-button v-if="app.parsedInput" size="small" outlined @click="showInstallPluginModal(app)">
<div class="flex flex-row justify-center items-center caption capitalize">
<MdiEditIcon class="pr-0.5" :height="12" />
Edit
</div>
</a-button>
<a-button v-if="app.parsedInput" size="small" outlined class="caption capitalize" @click="resetApp(app)">
<div class="flex flex-row justify-center items-center">
<a-button v-if="app.parsedInput" size="small" outlined @click="showResetPluginModal(app)">
<div class="flex flex-row justify-center items-center caption capitalize">
<MdiCloseCircleIcon />
<div class="flex ml-0.5">Reset</div>
</div>
</a-button>
<a-button v-else size="small" outlined class="caption capitalize" @click="installApp(app)">
<div class="flex flex-row justify-center items-center">
<a-button v-else size="small" outlined @click="showInstallPluginModal(app)">
<div class="flex flex-row justify-center items-center caption capitalize">
<MdiPlusIcon />
Install
</div>
@ -123,18 +130,18 @@ onMounted(async () => {
</div>
<div class="flex flex-row space-x-2 items-center justify-start w-full">
<div class="flex w-20 px-4">
<a-avatar
shape="circle"
<div class="flex w-20 pl-3">
<img
v-if="app.title !== 'SMTP'"
class="avatar"
:style="{
backgroundColor: app.title === 'SES' ? '#242f3e' : '',
}"
:src="`/${app.logo}`"
:color="app.title === 'SES' ? '#242f3e' : ''"
>
</a-avatar>
/>
<div v-else />
</div>
<div class="flex flex-col flex-grow-1 w-3/4">
<div class="flex flex-col flex-grow-1 w-3/5 pl-3">
<a-typography-title :level="5">{{ app.title }}</a-typography-title>
{{ app.description }}
</div>
@ -171,7 +178,14 @@ onMounted(async () => {
}
.caption {
font-size: 12px;
font-size: 0.7rem;
color: #242f3e;
}
.avatar {
width: 5rem;
height: 5rem;
padding: 0.25rem;
object-fit: contain;
}
</style>

19
packages/nc-gui-v2/package-lock.json generated
Unescape View File

@ -22,6 +22,7 @@
"devDependencies": {
"@antfu/eslint-config": "^0.25.2",
"@iconify-json/clarity": "^1.1.4",
"@iconify-json/ic": "^1.1.7",
"@iconify-json/material-symbols": "^1.1.8",
"@iconify-json/mdi": "^1.1.25",
"@intlify/vite-plugin-vue-i18n": "^4.0.0",
@ -968,6 +969,15 @@
"@iconify/types": "*"
}
},
"node_modules/@iconify-json/ic": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/@iconify-json/ic/-/ic-1.1.7.tgz",
"integrity": "sha512-CYwkhja02SZoevezNHSqM7d1lpsRJxKt9fzvn3MpRxI8s2v3LNmhGiD/bTq3uFgqQMRPp+OnD+OOjHrMo7ah1g==",
"dev": true,
"dependencies": {
"@iconify/types": "*"
}
},
"node_modules/@iconify-json/material-symbols": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.1.8.tgz",
@ -14901,6 +14911,15 @@
"@iconify/types": "*"
}
},
"@iconify-json/ic": {
"version": "1.1.7",
"resolved": "https://registry.npmjs.org/@iconify-json/ic/-/ic-1.1.7.tgz",
"integrity": "sha512-CYwkhja02SZoevezNHSqM7d1lpsRJxKt9fzvn3MpRxI8s2v3LNmhGiD/bTq3uFgqQMRPp+OnD+OOjHrMo7ah1g==",
"dev": true,
"requires": {
"@iconify/types": "*"
}
},
"@iconify-json/material-symbols": {
"version": "1.1.8",
"resolved": "https://registry.npmjs.org/@iconify-json/material-symbols/-/material-symbols-1.1.8.tgz",

1
packages/nc-gui-v2/package.json
Unescape View File

@ -28,6 +28,7 @@
"devDependencies": {
"@antfu/eslint-config": "^0.25.2",
"@iconify-json/clarity": "^1.1.4",
"@iconify-json/ic": "^1.1.7",
"@iconify-json/material-symbols": "^1.1.8",
"@iconify-json/mdi": "^1.1.25",
"@intlify/vite-plugin-vue-i18n": "^4.0.0",

Write Preview
Loading…
Cancel
Save