Skip to content
Permalink
Browse files
[Fix] fix sql editor can not show suggestions (#26)
fix sql editor can not show suggestions
  • Loading branch information
colordove committed Mar 30, 2022
1 parent 017d70e commit 81f883aeab1ab4cf5673741f3efa45174cfe05f4
Showing 11 changed files with 36 additions and 45 deletions.
@@ -37,7 +37,6 @@
"style": "css"
}
],
["@babel/plugin-proposal-decorators", { "legacy": true }]
],
"plugins": [["import", { "libraryName": "antd", "libraryDirectory": "lib", "style": true}, "antd"],]
["@babel/plugin-proposal-decorators", { "legacy": true }],
]
}
@@ -19,7 +19,7 @@
"@ant-design/pro-list": "^1.17.7",
"@ant-design/pro-table": "^2.56.7",
"@babel/core": "^7.12.10",
"@monaco-editor/react": "^4.3.1",
"@monaco-editor/react": "^4.4.1",
"ahooks": "^3.1.10",
"antd": "^4.16.11",
"axios": "^0.24.0",
@@ -41,14 +41,14 @@ export function useMonacoEditor() {
});
const textArr = textUntilPosition.split(' ');
const lastText = textArr[textArr.length - 1];
const currentDatabase = databases?.find(database => database.id === selectedDatabaseId);
// const currentDatabase = databases?.find(database => database.id === selectedDatabaseId);
const SUGGESTIONS = [
...DEFAULT_SUGGESTIONS,
...currentDatabase.tables.map((table: any) => ({
label: table.name,
insertText: table.name,
detail: '表',
})),
// ...currentDatabase.tables.map((table: any) => ({
// label: table.name,
// insertText: table.name,
// detail: '表',
// })),
];
const match = SUGGESTIONS.some((item: any) => {
// 循环判断是否包含在补全数组中
@@ -23,6 +23,7 @@ import styles from './style.module.less';
import VisualEditor from './visual-editor';
import { DatabasesContext, DataContext } from '../../context';
import LoadingLayout from '../loading-layout';
import VisualTable from './visual-table';

function VisualContent(props: any, ref: any) {
const { databasesLoading } = useContext(DatabasesContext);
@@ -56,6 +57,9 @@ function VisualContent(props: any, ref: any) {
);
return (
<>
<div style={{ height: '80%' }}>
<VisualTable ref={visualTableRef} />
</div>
</>
);
}, [dataLoading, isFetchingError, resultData, dataError]);
@@ -46,7 +46,7 @@ export default function VisualEditor(props: VisualEditorProps) {
message.error('请输入查询语句');
return;
}
runFetchData(fetchData({ database: selectedDatabaseId, native: { query: editorValue }, type: 'NATIVE' })).catch(
runFetchData(fetchData({ database: selectedDatabaseId, query: editorValue })).catch(
() => message.error('查询失败'),
);
};
@@ -77,7 +77,7 @@ export default function VisualEditor(props: VisualEditorProps) {
>
<Editor
height="100%"
defaultLanguage="sql"
language="sql"
theme={THEME_NAME}
options={{
minimap: {
@@ -76,7 +76,7 @@ export default function DataContextProvider(props: PropsWithChildren<{}>) {
return;
}
const newColumns = resultData.data.cols.map(item => ({
title: item.display_name,
title: item.displayName,
dataIndex: item.name,
}));
setColumns(newColumns);
@@ -15,10 +15,11 @@
// specific language governing permissions and limitations
// under the License.

import React, { PropsWithChildren, useEffect, useState } from 'react';
import React, { PropsWithChildren, useContext, useEffect, useState } from 'react';
import { message } from 'antd';
import { fetchDatabases } from '../visual-query.api';
import { useAsync } from '../hooks';
import { UserInfoContext } from '@src/common/common.context';

interface DatabasesContextProps {
databases: any[] | null;
@@ -41,12 +42,15 @@ export default function QueryContextProvider(props: PropsWithChildren<{}>) {
run: runFetchDatabases,
} = useAsync<any[]>({ loading: true, data: [] });
const [selectedDatabaseId, setSelectedDatabaseId] = useState<number | null>(null);
const userInfo = useContext(UserInfoContext);

useEffect(() => {
runFetchDatabases(fetchDatabases())
.then(res => res && res.length > 0 && setSelectedDatabaseId(res[0].id))
.catch(() => message.error('获取数据库列表失败'));
}, [runFetchDatabases]);
if (userInfo && userInfo.space_id) {
runFetchDatabases(fetchDatabases(userInfo.space_id))
.then(res => res && res.length > 0 && setSelectedDatabaseId(res[0].id))
.catch(() => message.error('获取数据库列表失败'));
}
}, [runFetchDatabases, userInfo?.space_id]);

return (
<DatabasesContext.Provider
@@ -19,15 +19,12 @@ import React from 'react';

export interface DataType {
cols: {
source: string;
source?: string;
name: string;
display_name: string;
displayName: string;
base_type: string;
}[];
rows: any[][];
native_form: {
query: string;
};
}

export type Dataset = { source: any[][] }[];
@@ -18,18 +18,17 @@
import { http, isSuccess } from '@src/utils/http';
import { DataType } from './types';

export function fetchDatabases() {
return http.get('/api/database/', { include: 'tables' }).then(res => res.data) as Promise<any[]>;
export function fetchDatabases(nsId: number) {
return http.get(`/api/meta/nsId/${nsId}/databases`).then(res => res.data.filter((item: any) => item.name !== 'information_schema')) as Promise<any[]>;
}

interface NativeSqlQueryParams {
interface SQLQueryParams {
database: number;
native: { query: string };
type: 'NATIVE';
query: string;
}

export function fetchData(params: NativeSqlQueryParams) {
return http.post('/api/dataset/', params).then(res => res.data) as Promise<{
// query
export function fetchData(params: SQLQueryParams) {
return http.post('/api/query/sql/', params).then(res => res.data) as Promise<{
data: DataType;
error?: any;
database_id: number;
@@ -19,27 +19,15 @@ import React, { useRef, useState } from 'react';
import VisualQueryProvider from './context';
import VisualContent from './components/visual-content';
import VisualHeader from './components/visual-header';
import SaveQueryModal from './components/save-query-modal';
import SaveDashboardModal from './components/save-dashboard-modal';
import { useCollections } from './hooks';

export default function VisualQuery() {
const [saveQueryModalVisible, setSaveQueryModalVisible] = useState(false);
const [saveDashboardModalVisible, setSaveDashboardModalVisible] = useState(false);
const visualContentRef = useRef<{ refreshTableWidth: () => void }>(null);
const { collections, loading } = useCollections();

const onAnimated = () => {
if (visualContentRef.current) {
visualContentRef.current.refreshTableWidth();
}
};

return (
<VisualQueryProvider>
<VisualHeader setSaveQueryModalVisible={setSaveQueryModalVisible} />
<div style={{ display: 'flex' }}>
<VisualContent ref={visualContentRef} />
<VisualContent />
</div>
</VisualQueryProvider>
);
@@ -1,3 +1,3 @@
{
"version": "1.0.1"
"version": "1.0.0"
}

0 comments on commit 81f883a

Please sign in to comment.