Skip to content

Commit 9e5fdd8

Browse files
authored
feat: support sql completion for table names (#722)
* feat: support sql completion for table names * add template functions autocomplation --------- Co-authored-by: rick <[email protected]>
1 parent 0fe2afb commit 9e5fdd8

File tree

8 files changed

+137
-10
lines changed

8 files changed

+137
-10
lines changed

console/atest-ui/package-lock.json

Lines changed: 71 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

console/atest-ui/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616
"test": "vitest"
1717
},
1818
"dependencies": {
19+
"@codemirror/lang-json": "^6.0.2",
20+
"@codemirror/lang-sql": "github:codemirror/lang-sql",
1921
"@vueuse/core": "^10.11.0",
2022
"codemirror": "^5.65.17",
2123
"diff-match-patch": "^1.0.5",

console/atest-ui/src/assets/base.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@
4242

4343
--page-title-right-padding: 10px;
4444
--page-title-bottom-padding: 5px;
45+
46+
--sql-editor-height: 180px;
47+
--payload-editor-height: 180px;
4548
}
4649

4750
*,
@@ -99,3 +102,8 @@ html.dark .el-main {
99102
height: 32px;
100103
padding-bottom: var(--page-title-bottom-padding, 0px);
101104
}
105+
106+
.block-align-right {
107+
display: flex;
108+
justify-content: flex-end;
109+
}

console/atest-ui/src/assets/main.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22

33
#app {
44
margin: 0 auto;
5-
{{/* padding-top: 40px; */}}
65
height: 100vh;
76
font-weight: normal;
87
}

console/atest-ui/src/locales/en.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"send": "Send",
1212
"copy": "Copy",
1313
"ok": "OK",
14+
"next-page": "Next",
1415
"reload": "Reload",
1516
"insertSample": "Insert Sample",
1617
"toolbox": "Tool Box",

console/atest-ui/src/locales/zh.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"send": "发送",
1212
"copy": "拷贝",
1313
"ok": "确定",
14+
"next-page": "下一页",
1415
"reload": "重新加载",
1516
"insertSample": "插入样例",
1617
"toolbox": "工具箱",

console/atest-ui/src/views/DataManager.vue

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import type { Pair } from './types'
77
import { GetDataManagerPreference, SetDataManagerPreference } from './cache'
88
import { ElMessage } from 'element-plus'
99
import { Codemirror } from 'vue-codemirror'
10+
import { sql, StandardSQL } from "@codemirror/lang-sql"
1011
import HistoryInput from '../components/HistoryInput.vue'
1112
import type { Ref } from 'vue'
1213
import { Refresh, Document } from '@element-plus/icons-vue'
@@ -176,7 +177,9 @@ const ormDataHandler = (data: QueryData) => {
176177
}
177178
178179
tablesTree.value = []
180+
sqlConfig.value.schema = {}
179181
queryDataMeta.value.tables.forEach((i) => {
182+
sqlConfig.value.schema[i] = []
180183
tablesTree.value.push({
181184
label: i,
182185
})
@@ -194,6 +197,13 @@ const keyValueDataHandler = (data: QueryData) => {
194197
})
195198
}
196199
200+
const sqlConfig = ref({
201+
dialect: StandardSQL,
202+
defaultSchema: queryDataMeta.value.currentDatabase,
203+
upperCaseKeywords: true,
204+
schema: {}
205+
})
206+
197207
const executeQuery = async () => {
198208
if (sqlQuery.value === '') {
199209
switch (kind.value) {
@@ -264,7 +274,7 @@ watch(largeContent, (e) => {
264274
})
265275
266276
Magic.AdvancedKeys([{
267-
Keys: ['Ctrl+E'],
277+
Keys: ['Ctrl+E', 'Ctrl+Enter'],
268278
Func: executeQuery,
269279
Description: 'Execute query'
270280
}])
@@ -342,11 +352,16 @@ Magic.AdvancedKeys([{
342352
</el-input>
343353
</el-col>
344354
<el-col :span="2">
345-
<el-button type="primary" @click="nextPage">Next</el-button>
355+
<el-button type="primary" @click="nextPage">{{ t("button.next-page") }}</el-button>
346356
</el-col>
347357
</el-row>
348358
</el-form>
349-
<Codemirror v-model="sqlQuery" v-if="complexEditor" style="height: 180px"/>
359+
<Codemirror
360+
v-model="sqlQuery"
361+
v-if="complexEditor"
362+
style="height: var(--sql-editor-height);"
363+
:extensions="[sql(sqlConfig)]"
364+
/>
350365
</el-header>
351366
<el-main>
352367
<div style="display: flex; gap: 8px;">

console/atest-ui/src/views/TestCase.vue

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@ import { Codemirror } from 'vue-codemirror'
1919
import jsonlint from 'jsonlint-mod'
2020
2121
import CodeMirror from 'codemirror'
22+
import { json, jsonLanguage } from "@codemirror/lang-json"
23+
import { LanguageSupport } from "@codemirror/language"
24+
import { CompletionContext } from "@codemirror/autocomplete"
25+
import type { Completion } from "@codemirror/autocomplete"
2226
import 'codemirror/lib/codemirror.css'
2327
import 'codemirror/addon/merge/merge.js'
2428
import 'codemirror/addon/merge/merge.css'
@@ -30,6 +34,36 @@ window.DIFF_DELETE = -1;
3034
window.DIFF_INSERT = 1;
3135
window.DIFF_EQUAL = 0;
3236
37+
const templateFuncs = ref([] as Completion[])
38+
function myCompletions(context: CompletionContext) {
39+
if (templateFuncs.value.length == 0) {
40+
API.FunctionsQuery("", "template", (e) => {
41+
if (e.data) {
42+
e.data.forEach((item: any) => {
43+
templateFuncs.value.push({
44+
label: item.key,
45+
type: "text",
46+
} as Completion)
47+
})
48+
}
49+
})
50+
}
51+
52+
let word = context.matchBefore(/\w*/) || {
53+
from: "",
54+
to: ""
55+
}
56+
if (word.from == word.to && !context.explicit)
57+
return null
58+
return {
59+
from: word.from,
60+
options: templateFuncs.value
61+
}
62+
}
63+
const jsonComplete = new LanguageSupport(jsonLanguage, jsonLanguage.data.of(
64+
{autocomplete: myCompletions}
65+
))
66+
3367
const { t } = useI18n()
3468
3569
const props = defineProps({
@@ -1141,6 +1175,8 @@ Magic.AdvancedKeys([{
11411175
<Codemirror v-if="bodyType === 3 || bodyType === 5 || bodyType === 6"
11421176
@blur="jsonFormat(-1)"
11431177
v-model="testCaseWithSuite.data.request.body"
1178+
style="height: var(--payload-editor-height);"
1179+
:extensions="[json(), jsonComplete]"
11441180
:disabled="isHistoryTestCase"/>
11451181
<el-table :data="testCaseWithSuite.data.request.form" style="width: 100%" v-if="bodyType === 4">
11461182
<el-table-column label="Key" width="180">

0 commit comments

Comments
 (0)