mirror of
https://github.com/nocodb/nocodb.git
synced 2026-04-29 23:46:51 +00:00
refactor(gui): linting
Signed-off-by: Pranav C <61551451+pranavxc@users.noreply.github.com>
This commit is contained in:
Pranav C
@@ -1,205 +1,221 @@
|
||||
<!-- eslint-disable -->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<v-toolbar flat height="42" class="toolbar-border-bottom">
|
||||
<v-toolbar-title>
|
||||
<v-breadcrumbs :items="[{
|
||||
text: nodes.env,
|
||||
disabled: true,
|
||||
href: '#'
|
||||
},{
|
||||
text: nodes.dbAlias,
|
||||
disabled: true,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: name + ' (APIs)',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}]" divider=">" small>
|
||||
<template v-slot:divider>
|
||||
<v-icon small color="grey lighten-2">forward</v-icon>
|
||||
<v-breadcrumbs
|
||||
:items="[{
|
||||
text: nodes.env,
|
||||
disabled: true,
|
||||
href: '#'
|
||||
},{
|
||||
text: nodes.dbAlias,
|
||||
disabled: true,
|
||||
href: '#'
|
||||
},
|
||||
{
|
||||
text: name + ' (APIs)',
|
||||
disabled: true,
|
||||
href: '#'
|
||||
}]"
|
||||
divider=">"
|
||||
small
|
||||
>
|
||||
<template #divider>
|
||||
<v-icon small color="grey lighten-2">
|
||||
forward
|
||||
</v-icon>
|
||||
</template>
|
||||
</v-breadcrumbs>
|
||||
|
||||
</v-toolbar-title>
|
||||
<v-spacer></v-spacer>
|
||||
<v-spacer />
|
||||
|
||||
<v-btn small outlined @click="showSwagger = !showSwagger" class="caption text-capitalize" color="primary">
|
||||
<v-icon small color="primary"> {{ showSwagger ? 'mdi-eye-off-outline' : 'mdi-eye-outline' }}</v-icon>
|
||||
<v-btn small outlined class="caption text-capitalize" color="primary" @click="showSwagger = !showSwagger">
|
||||
<v-icon small color="primary">
|
||||
{{ showSwagger ? 'mdi-eye-off-outline' : 'mdi-eye-outline' }}
|
||||
</v-icon>
|
||||
|
||||
{{ showSwagger ? 'Hide Swagger' : 'Show Swagger' }}
|
||||
</v-btn>
|
||||
|
||||
<x-btn outlined tooltip="Reload Rows"
|
||||
color="primary"
|
||||
small
|
||||
v-ge="['rows','reload']" btn.class="caption text-capitalize"
|
||||
@click="loadSwaggerDoc(); loadRoutes();">
|
||||
<v-icon small left>refresh</v-icon>
|
||||
<x-btn
|
||||
v-ge="['rows','reload']"
|
||||
outlined
|
||||
tooltip="Reload Rows"
|
||||
color="primary"
|
||||
small
|
||||
btn.class="caption text-capitalize"
|
||||
@click="loadSwaggerDoc(); loadRoutes();"
|
||||
>
|
||||
<v-icon small left>
|
||||
refresh
|
||||
</v-icon>
|
||||
Reload
|
||||
</x-btn>
|
||||
|
||||
|
||||
</v-toolbar>
|
||||
|
||||
|
||||
<v-text-field dense hide-details class="ma-2" :placeholder="`Search ${name} routes`"
|
||||
prepend-inner-icon="search" v-model="search"
|
||||
outlined></v-text-field>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
dense
|
||||
hide-details
|
||||
class="ma-2"
|
||||
:placeholder="`Search ${name} routes`"
|
||||
prepend-inner-icon="search"
|
||||
outlined
|
||||
/>
|
||||
|
||||
<!-- <div class="d-flex justify-center">-->
|
||||
<v-container fluid>
|
||||
<v-row>
|
||||
|
||||
<v-col v-if="showSwagger">
|
||||
|
||||
<v-card>
|
||||
|
||||
<div class="text-center" style="padding: 3px">
|
||||
|
||||
<span class="title schema-card-title">Swagger JSON</span>
|
||||
</div>
|
||||
<div class="d-flex pa-3">
|
||||
<v-spacer></v-spacer>
|
||||
<x-btn outlined :tooltip="`Compare GQL schema history of ${nodes.tn}`"
|
||||
color="primary"
|
||||
x-small
|
||||
:disabled="loading || !swaggerDocHistory.length"
|
||||
@click.prevent="schemaDiffDialog = true">
|
||||
<v-icon small left>mdi-source-branch</v-icon>
|
||||
History <span class="history-count" v-if="swaggerDocHistory.length">({{
|
||||
<v-spacer />
|
||||
<x-btn
|
||||
outlined
|
||||
:tooltip="`Compare GQL schema history of ${nodes.tn}`"
|
||||
color="primary"
|
||||
x-small
|
||||
:disabled="loading || !swaggerDocHistory.length"
|
||||
@click.prevent="schemaDiffDialog = true"
|
||||
>
|
||||
<v-icon small left>
|
||||
mdi-source-branch
|
||||
</v-icon>
|
||||
History <span v-if="swaggerDocHistory.length" class="history-count">({{
|
||||
swaggerDocHistory.length
|
||||
}})</span>
|
||||
</x-btn>
|
||||
<x-btn outlined tooltip="Save Changes"
|
||||
color="primary"
|
||||
x-small
|
||||
:disabled="loading"
|
||||
v-ge="['rows','save']"
|
||||
@click.prevent="saveSwaggerDoc">
|
||||
<v-icon small left>save</v-icon>
|
||||
<x-btn
|
||||
v-ge="['rows','save']"
|
||||
outlined
|
||||
tooltip="Save Changes"
|
||||
color="primary"
|
||||
x-small
|
||||
:disabled="loading"
|
||||
@click.prevent="saveSwaggerDoc"
|
||||
>
|
||||
<v-icon small left>
|
||||
save
|
||||
</v-icon>
|
||||
Save
|
||||
</x-btn>
|
||||
|
||||
</div>
|
||||
<monaco-json-editor
|
||||
v-model="swaggerDoc"
|
||||
theme=""
|
||||
style="min-height:500px;"
|
||||
|
||||
/>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col>
|
||||
|
||||
<v-card class="flex-shrink-1" style="" v-if="filteredGroupedData.length">
|
||||
|
||||
<v-skeleton-loader v-if="loading" type="table"></v-skeleton-loader>
|
||||
|
||||
<v-card v-if="filteredGroupedData.length" class="flex-shrink-1" style="">
|
||||
<v-skeleton-loader v-if="loading" type="table" />
|
||||
|
||||
<v-simple-table v-else-if="routers" dense style="width: auto; min-width: 500px">
|
||||
<thead>
|
||||
<tr>
|
||||
|
||||
<th colspan="2" class="text-center">
|
||||
|
||||
<div class="d-flex justify-center">
|
||||
|
||||
<span class="title">Routes</span>
|
||||
</div>
|
||||
|
||||
</th>
|
||||
|
||||
<template v-for="(method,i) in methods">
|
||||
<th
|
||||
width="60"
|
||||
class=" method-cell caption px-1 text-center text-uppercase font-weight-bold" :key="`${method}`"
|
||||
:class="`${methodColor[method]}--text`">{{ method }}
|
||||
<tr>
|
||||
<th colspan="2" class="text-center">
|
||||
<div class="d-flex justify-center">
|
||||
<span class="title">Routes</span>
|
||||
</div>
|
||||
</th>
|
||||
</template>
|
||||
</tr>
|
||||
|
||||
<template v-for="(method,i) in methods">
|
||||
<th
|
||||
:key="`${method}`"
|
||||
width="60"
|
||||
class=" method-cell caption px-1 text-center text-uppercase font-weight-bold"
|
||||
:class="`${methodColor[method]}--text`"
|
||||
>
|
||||
{{ method }}
|
||||
</th>
|
||||
</template>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="[path,route] in filteredGroupedData"
|
||||
>
|
||||
|
||||
<td width="20" class="px-0">
|
||||
|
||||
</td>
|
||||
<td class="pl-0">
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on }">
|
||||
<span v-on="on">{{ path }}</span>
|
||||
</template>
|
||||
<span>{{ path }}</span>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
<template v-for="(method,i) in methods">
|
||||
<td
|
||||
|
||||
width="60" class="pa-1 text-center method-cell" :key="`${path}_${method}}`">
|
||||
|
||||
<tr
|
||||
v-for="[path,route] in filteredGroupedData"
|
||||
>
|
||||
<td width="20" class="px-0" />
|
||||
<td class="pl-0">
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on }">
|
||||
<template #activator="{ on }">
|
||||
<span v-on="on">{{ path }}</span>
|
||||
</template>
|
||||
<span>{{ path }}</span>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
<template v-for="(method,i) in methods">
|
||||
<td
|
||||
|
||||
<v-hover v-if="route[method]" v-slot:default="{ hover }">
|
||||
<v-icon @click="showSourceCode(route,method)" small
|
||||
:color="hover ? methodColor[method]:''" v-on="on">mdi-pencil
|
||||
:key="`${path}_${method}}`"
|
||||
width="60"
|
||||
class="pa-1 text-center method-cell"
|
||||
>
|
||||
<v-tooltip bottom>
|
||||
<template #activator="{ on }">
|
||||
<v-hover v-if="route[method]" v-slot="{ hover }">
|
||||
<v-icon
|
||||
small
|
||||
:color="hover ? methodColor[method]:''"
|
||||
@click="showSourceCode(route,method)"
|
||||
v-on="on"
|
||||
>
|
||||
mdi-pencil
|
||||
</v-icon>
|
||||
</v-hover>
|
||||
</template>
|
||||
Edit business logic
|
||||
</v-tooltip>
|
||||
</td>
|
||||
</template>
|
||||
</tr>
|
||||
|
||||
<tr
|
||||
v-for="mw in middlewares"
|
||||
>
|
||||
<td width="20" class="px-0" />
|
||||
<td class="pl-0">
|
||||
<v-tooltip bottom>
|
||||
<template #activator="{ on }">
|
||||
<span v-on="on">{{ mw.title }} - Middleware</span>
|
||||
</template>
|
||||
<span>{{ mw.title }} - Middleware</span>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
<td
|
||||
:colspan="methods.length"
|
||||
width="60"
|
||||
class="pa-1 text-center method-cell"
|
||||
>
|
||||
<v-tooltip bottom>
|
||||
<template #activator="{ on }">
|
||||
<v-hover v-slot="{ hover }">
|
||||
<v-icon
|
||||
small
|
||||
:color="hover ? methodColor[method]:''"
|
||||
@click="showMiddlewareSourceCode(mw)"
|
||||
v-on="on"
|
||||
>
|
||||
mdi-pencil
|
||||
</v-icon>
|
||||
</v-hover>
|
||||
</template>
|
||||
Edit business logic
|
||||
Edit middleware business logic
|
||||
</v-tooltip>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
<tr v-for="mw in middlewares"
|
||||
>
|
||||
|
||||
<td width="20" class="px-0">
|
||||
|
||||
</td>
|
||||
<td class="pl-0">
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on }">
|
||||
<span v-on="on">{{ mw.title }} - Middleware</span>
|
||||
</template>
|
||||
<span>{{ mw.title }} - Middleware</span>
|
||||
</v-tooltip>
|
||||
</td>
|
||||
<td
|
||||
:colspan="methods.length"
|
||||
width="60" class="pa-1 text-center method-cell">
|
||||
|
||||
<v-tooltip bottom>
|
||||
<template v-slot:activator="{ on }">
|
||||
|
||||
<v-hover v-slot:default="{ hover }">
|
||||
<v-icon small
|
||||
@click="showMiddlewareSourceCode(mw)"
|
||||
:color="hover ? methodColor[method]:''" v-on="on">mdi-pencil
|
||||
</v-icon>
|
||||
</v-hover>
|
||||
</template>
|
||||
Edit middleware business logic
|
||||
</v-tooltip>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
|
||||
|
||||
</tr>
|
||||
</tbody>
|
||||
</v-simple-table>
|
||||
|
||||
|
||||
<v-alert v-else outlined type="info">Permission file not found</v-alert>
|
||||
<v-alert v-else outlined type="info">
|
||||
Permission file not found
|
||||
</v-alert>
|
||||
</v-card>
|
||||
<!-- </div>-->
|
||||
</v-col>
|
||||
@@ -207,32 +223,31 @@
|
||||
</v-row>
|
||||
</v-container>
|
||||
<handler-code-editor
|
||||
v-model="showCodeEditor"
|
||||
:is-middleware="isMiddleware"
|
||||
:nodes="nodes"
|
||||
:route="editRoute"
|
||||
:method="editMethod"
|
||||
v-model="showCodeEditor"></handler-code-editor>
|
||||
|
||||
/>
|
||||
|
||||
<v-dialog v-model="schemaDiffDialog" scrollable min-width="600px">
|
||||
<v-card>
|
||||
<xc-diff
|
||||
v-model="swaggerDoc"
|
||||
:history="swaggerDocHistory"
|
||||
></xc-diff>
|
||||
/>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import HandlerCodeEditor from "@/components/project/restHandlerCodeEditor";
|
||||
import MonacoJsonEditor from "@/components/monaco/MonacoJsonEditor";
|
||||
import HandlerCodeEditor from '@/components/project/restHandlerCodeEditor'
|
||||
import MonacoJsonEditor from '@/components/monaco/MonacoJsonEditor'
|
||||
|
||||
export default {
|
||||
name: "logic-rest",
|
||||
components: {MonacoJsonEditor, HandlerCodeEditor},
|
||||
name: 'LogicRest',
|
||||
components: { MonacoJsonEditor, HandlerCodeEditor },
|
||||
props: ['nodes'],
|
||||
data: () => ({
|
||||
showSwagger: false,
|
||||
@@ -245,11 +260,11 @@ export default {
|
||||
'get', 'post', 'put', 'delete'
|
||||
],
|
||||
methodColor: {
|
||||
'get': 'success',
|
||||
'post': 'warning',
|
||||
'put': 'info',
|
||||
'patch': 'secondary',
|
||||
'delete': 'error'
|
||||
get: 'success',
|
||||
post: 'warning',
|
||||
put: 'info',
|
||||
patch: 'secondary',
|
||||
delete: 'error'
|
||||
},
|
||||
editRoute: '',
|
||||
editMethod: '',
|
||||
@@ -259,48 +274,62 @@ export default {
|
||||
swaggerDoc: '',
|
||||
schemaDiffDialog: false
|
||||
}),
|
||||
computed: {
|
||||
filteredGroupedData () {
|
||||
return Object.entries(this.groupedData)
|
||||
.filter(([path]) => !this.search || path.toLowerCase().includes(this.search.toLowerCase()))
|
||||
},
|
||||
name () {
|
||||
return this.nodes.tn || this.nodes.view_name
|
||||
}
|
||||
},
|
||||
async created () {
|
||||
await this.loadRoutes()
|
||||
this.groupRoutes()
|
||||
await this.loadSwaggerDoc()
|
||||
},
|
||||
methods: {
|
||||
groupRoutes() {
|
||||
const groupedData = {};
|
||||
this.middlewares = [];
|
||||
groupRoutes () {
|
||||
const groupedData = {}
|
||||
this.middlewares = []
|
||||
for (const route of this.routers) {
|
||||
if (route.path) {
|
||||
groupedData[route.path] = groupedData[route.path] || {};
|
||||
groupedData[route.path][route.type] = route;
|
||||
groupedData[route.path] = groupedData[route.path] || {}
|
||||
groupedData[route.path][route.type] = route
|
||||
} else if (route.handler_type === 2) {
|
||||
this.middlewares.push(route)
|
||||
}
|
||||
}
|
||||
this.groupedData = groupedData;
|
||||
this.groupedData = groupedData
|
||||
},
|
||||
showSourceCode(route, method) {
|
||||
this.editRoute = route;
|
||||
this.editMethod = method;
|
||||
this.isMiddleware = false;
|
||||
this.showCodeEditor = true;
|
||||
showSourceCode (route, method) {
|
||||
this.editRoute = route
|
||||
this.editMethod = method
|
||||
this.isMiddleware = false
|
||||
this.showCodeEditor = true
|
||||
},
|
||||
showMiddlewareSourceCode(mw) {
|
||||
this.editRoute = mw;
|
||||
this.editMethod = null;
|
||||
this.isMiddleware = true;
|
||||
this.showCodeEditor = true;
|
||||
showMiddlewareSourceCode (mw) {
|
||||
this.editRoute = mw
|
||||
this.editMethod = null
|
||||
this.isMiddleware = true
|
||||
this.showCodeEditor = true
|
||||
},
|
||||
async loadSwaggerDoc() {
|
||||
async loadSwaggerDoc () {
|
||||
const tableMeta = await this.$store.dispatch('sqlMgr/ActSqlOp', [{
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias
|
||||
}, 'tableXcModelGet', {
|
||||
tn: this.nodes.tn || this.nodes.view_name
|
||||
}]);
|
||||
this.swaggerDoc = JSON.stringify(JSON.parse(tableMeta.schema), 0, 2);
|
||||
}])
|
||||
this.swaggerDoc = JSON.stringify(JSON.parse(tableMeta.schema), 0, 2)
|
||||
if (tableMeta.schema_previous) {
|
||||
this.swaggerDocHistory = JSON.parse(tableMeta.schema_previous).reverse().map(o => JSON.stringify(o, null, 2));
|
||||
this.swaggerDocHistory = JSON.parse(tableMeta.schema_previous).reverse().map(o => JSON.stringify(o, null, 2))
|
||||
} else {
|
||||
this.swaggerDocHistory = [];
|
||||
this.swaggerDocHistory = []
|
||||
}
|
||||
},
|
||||
async saveSwaggerDoc() {
|
||||
this.edited = false;
|
||||
async saveSwaggerDoc () {
|
||||
this.edited = false
|
||||
try {
|
||||
await this.$store.dispatch('sqlMgr/ActSqlOp', [{
|
||||
env: this.nodes.env,
|
||||
@@ -308,35 +337,21 @@ export default {
|
||||
}, 'xcModelSwaggerDocSet', {
|
||||
tn: this.nodes.tn || this.nodes.view_name,
|
||||
swaggerDoc: JSON.parse(this.swaggerDoc)
|
||||
}]);
|
||||
this.$toast.success('Successfully updated swagger doc').goAway(3000);
|
||||
}])
|
||||
this.$toast.success('Successfully updated swagger doc').goAway(3000)
|
||||
} catch (e) {
|
||||
this.$toast.error('Failed to update swagger doc').goAway(3000);
|
||||
this.$toast.error('Failed to update swagger doc').goAway(3000)
|
||||
}
|
||||
},
|
||||
async loadRoutes() {
|
||||
this.loading = true;
|
||||
async loadRoutes () {
|
||||
this.loading = true
|
||||
this.routers = (await this.$store.dispatch('sqlMgr/ActSqlOp', [{
|
||||
env: this.nodes.env,
|
||||
dbAlias: this.nodes.dbAlias,
|
||||
dbAlias: this.nodes.dbAlias
|
||||
}, 'xcRoutesPolicyGet', {
|
||||
tn: this.name
|
||||
}])).data.list;
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
await this.loadRoutes();
|
||||
this.groupRoutes();
|
||||
await this.loadSwaggerDoc();
|
||||
},
|
||||
computed: {
|
||||
filteredGroupedData() {
|
||||
return Object.entries(this.groupedData)
|
||||
.filter(([path]) => !this.search || path.toLowerCase().indexOf(this.search.toLowerCase()) > -1);
|
||||
},
|
||||
name() {
|
||||
return this.nodes.tn || this.nodes.view_name;
|
||||
}])).data.list
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user