QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 13:20:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Initial version of auto-complete. add onbeforeunload handler (guess why lol)

Browse Source
This commit is contained in:
darin.kelkhoff
2023-03-15 12:20:48 -05:00
parent b2216e5e6d
commit bb122ed23a
1 changed files with 57 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/qqq/components/scripts/ScriptEditor.tsx
View File

@ -29,13 +29,17 @@ import Grid from "@mui/material/Grid";
import Snackbar from "@mui/material/Snackbar";
import TextField from "@mui/material/TextField";
import FormData from "form-data";
import React, {useReducer, useState} from "react";
import React, {useEffect, useReducer, useState} from "react";
import AceEditor from "react-ace";
import {QCancelButton, QSaveButton} from "qqq/components/buttons/DefaultButtons";
import ScriptDocsForm from "qqq/components/scripts/ScriptDocsForm";
import ScriptTestForm from "qqq/components/scripts/ScriptTestForm";
import Client from "qqq/utils/qqq/Client";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/ext-language_tools";
export interface ScriptEditorProps
{
title: string;
@ -49,7 +53,6 @@ export interface ScriptEditorProps
scriptTypeRecord: QRecord;
}
const qController = Client.getInstance();
function ScriptEditor({title, scriptId, contents, closeCallback, tableName, fieldName, recordId, scriptDefinition, scriptTypeRecord}: ScriptEditorProps): JSX.Element
@ -61,6 +64,54 @@ function ScriptEditor({title, scriptId, contents, closeCallback, tableName, fiel
const [errorAlert, setErrorAlert] = useState("")
const [, forceUpdate] = useReducer((x) => x + 1, 0);
useEffect(() =>
{
// @ts-ignore
// eslint-disable-next-line import/namespace
const langTools = ace.require("ace/ext/language_tools");
const myCompleter =
{
// @ts-ignore
getCompletions: function (editor, session, pos, prefix, callback)
{
// @ts-ignore
let completions = [];
// todo - get from backend, based on the script type
completions.push({value: "api.query(", meta: "Search for records in a table."});
completions.push({value: "api.insert(", meta: "Create one or more records in a table."});
completions.push({value: "api.update(", meta: "Update one or more records in a table."});
completions.push({value: "api.delete(", meta: "Remove one or more records from a table."});
completions.push({value: "api.newRecord(", meta: "Create a new QRecord object."});
completions.push({value: "api.newQueryInput(", meta: "Create a new QueryInput object."});
completions.push({value: "api.newQueryFilter(", meta: "Create a new QueryFilter object."});
completions.push({value: "api.newFilterCriteria(", meta: "Create a new FilterCriteria object."});
completions.push({value: "api.newFilterOrderBy(", meta: "Create a new FilterOrderBy object."});
completions.push({value: "getValue(", meta: "Get a value from a record"});
completions.push({value: "logger.log(", meta: "Write a Script Log Line"});
// @ts-ignore
callback(null, completions);
}
};
langTools.addCompleter(myCompleter);
const preventUnload = (event: BeforeUnloadEvent) =>
{
// NOTE: This message isn't used in modern browsers, but is required
const message = "Are you sure you want to leave?";
event.preventDefault();
event.returnValue = message;
};
window.addEventListener("beforeunload", preventUnload);
return () =>
{
window.removeEventListener("beforeunload", preventUnload);
};
}, []);
const changeOpenTool = (event: React.MouseEvent<HTMLElement>, newValue: string | null) =>
{
setOpenTool(newValue);
@ -180,6 +231,10 @@ function ScriptEditor({title, scriptId, contents, closeCallback, tableName, fiel
theme="github"
name="editor"
editorProps={{$blockScrolling: true}}
setOptions={{
enableBasicAutocompletion: true,
enableLiveAutocompletion: true,
}}
onChange={updateCode}
width="100%"
height="100%"