From 4f45b9978e620ef59bdd0110750580ad9d6c1373 Mon Sep 17 00:00:00 2001 From: IRBorisov <8611739+IRBorisov@users.noreply.github.com> Date: Sat, 29 Jul 2023 03:31:21 +0300 Subject: [PATCH] Implement RSExpr check UI --- .../frontend/src/components/Common/Loader.tsx | 4 +- .../frontend/src/components/Common/Modal.tsx | 9 +- .../frontend/src/hooks/useCheckExpression.ts | 7 +- rsconcept/frontend/src/index.css | 2 +- .../src/pages/RSFormPage/DlgCloneRSForm.tsx | 7 +- .../src/pages/RSFormPage/DlgCreateCst.tsx | 6 +- .../src/pages/RSFormPage/DlgShowAST.tsx | 30 +++++ .../src/pages/RSFormPage/DlgUploadRSForm.tsx | 7 +- .../pages/RSFormPage/EditorConstituenta.tsx | 14 +- .../src/pages/RSFormPage/EditorItems.tsx | 5 +- .../pages/RSFormPage/EditorRSExpression.tsx | 43 ++++--- .../frontend/src/pages/RSFormPage/RSTabs.tsx | 34 ++--- .../RSFormPage/elements/ParsingResult.tsx | 45 +++++-- .../pages/RSFormPage/elements/StatusBar.tsx | 4 +- .../elements/ViewSideConstituents.tsx | 2 +- .../pages/RSFormPage/elements/textEditing.ts | 1 + rsconcept/frontend/src/utils/backendAPI.ts | 10 +- rsconcept/frontend/src/utils/enums.ts | 120 ++++++++++-------- rsconcept/frontend/src/utils/models.ts | 40 +++--- rsconcept/frontend/src/utils/staticUI.ts | 108 +++++++++++++++- 20 files changed, 336 insertions(+), 162 deletions(-) create mode 100644 rsconcept/frontend/src/pages/RSFormPage/DlgShowAST.tsx diff --git a/rsconcept/frontend/src/components/Common/Loader.tsx b/rsconcept/frontend/src/components/Common/Loader.tsx index e43c1c0b..5c6d319e 100644 --- a/rsconcept/frontend/src/components/Common/Loader.tsx +++ b/rsconcept/frontend/src/components/Common/Loader.tsx @@ -2,8 +2,8 @@ import { ThreeDots } from 'react-loader-spinner'; export function Loader() { return ( -
- +
+
); } diff --git a/rsconcept/frontend/src/components/Common/Modal.tsx b/rsconcept/frontend/src/components/Common/Modal.tsx index af612b09..6d3df25c 100644 --- a/rsconcept/frontend/src/components/Common/Modal.tsx +++ b/rsconcept/frontend/src/components/Common/Modal.tsx @@ -7,23 +7,18 @@ import Button from './Button'; interface ModalProps { title?: string submitText?: string - show: boolean - canSubmit: boolean + canSubmit?: boolean hideWindow: () => void onSubmit: () => void onCancel?: () => void children: React.ReactNode } -function Modal({ title, show, hideWindow, onSubmit, onCancel, canSubmit, children, submitText = 'Продолжить' }: ModalProps) { +function Modal({ title, hideWindow, onSubmit, onCancel, canSubmit, children, submitText = 'Продолжить' }: ModalProps) { const ref = useRef(null); useClickedOutside({ ref, callback: hideWindow }); useEscapeKey(hideWindow); - if (!show) { - return null; - } - const handleCancel = () => { hideWindow(); if (onCancel) onCancel(); diff --git a/rsconcept/frontend/src/hooks/useCheckExpression.ts b/rsconcept/frontend/src/hooks/useCheckExpression.ts index 69e1c126..82f524b7 100644 --- a/rsconcept/frontend/src/hooks/useCheckExpression.ts +++ b/rsconcept/frontend/src/hooks/useCheckExpression.ts @@ -2,18 +2,17 @@ import { useCallback, useState } from 'react' import { type ErrorInfo } from '../components/BackendError'; import { DataCallback, postCheckExpression } from '../utils/backendAPI'; -import { ExpressionParse, type IRSForm } from '../utils/models'; +import { IExpressionParse, type IRSForm } from '../utils/models'; function useCheckExpression({ schema }: { schema?: IRSForm }) { const [loading, setLoading] = useState(false); const [error, setError] = useState(undefined); - const [parseData, setParseData] = useState(undefined); + const [parseData, setParseData] = useState(undefined); const resetParse = useCallback(() => { setParseData(undefined); }, []); - function checkExpression(expression: string, onSuccess?: DataCallback) { + function checkExpression(expression: string, onSuccess?: DataCallback) { setError(undefined); - setParseData(undefined); postCheckExpression(String(schema?.id), { data: { expression: expression }, showError: true, diff --git a/rsconcept/frontend/src/index.css b/rsconcept/frontend/src/index.css index 030b7489..b979485e 100644 --- a/rsconcept/frontend/src/index.css +++ b/rsconcept/frontend/src/index.css @@ -77,7 +77,7 @@ } .text-red { - @apply text-red-400 dark:text-red-600 + @apply text-red-600 dark:text-red-400 } .text-green { diff --git a/rsconcept/frontend/src/pages/RSFormPage/DlgCloneRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/DlgCloneRSForm.tsx index aa80f1a6..65d6fd31 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/DlgCloneRSForm.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/DlgCloneRSForm.tsx @@ -11,11 +11,10 @@ import { IRSFormCreateData } from '../../utils/models'; import { getCloneTitle } from '../../utils/staticUI'; interface DlgCloneRSFormProps { - show: boolean hideWindow: () => void } -function DlgCloneRSForm({ show, hideWindow }: DlgCloneRSFormProps) { +function DlgCloneRSForm({ hideWindow }: DlgCloneRSFormProps) { const navigate = useNavigate(); const [title, setTitle] = useState(''); const [alias, setAlias] = useState(''); @@ -34,7 +33,6 @@ function DlgCloneRSForm({ show, hideWindow }: DlgCloneRSFormProps) { }, [schema, schema?.title, schema?.alias, schema?.comment, schema?.is_common]); const handleSubmit = () => { - hideWindow(); const data: IRSFormCreateData = { title: title, alias: alias, @@ -50,7 +48,6 @@ function DlgCloneRSForm({ show, hideWindow }: DlgCloneRSFormProps) { return ( { setCommon(event.target.checked); }} /> - ) + ); } export default DlgCloneRSForm; diff --git a/rsconcept/frontend/src/pages/RSFormPage/DlgCreateCst.tsx b/rsconcept/frontend/src/pages/RSFormPage/DlgCreateCst.tsx index 7164b33c..4b71002c 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/DlgCreateCst.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/DlgCreateCst.tsx @@ -6,13 +6,12 @@ import { type CstType } from '../../utils/models'; import { CstTypeSelector, getCstTypeLabel } from '../../utils/staticUI'; interface DlgCreateCstProps { - show: boolean hideWindow: () => void defaultType?: CstType onCreate: (type: CstType) => void } -function DlgCreateCst({ show, hideWindow, defaultType, onCreate }: DlgCreateCstProps) { +function DlgCreateCst({ hideWindow, defaultType, onCreate }: DlgCreateCstProps) { const [validated, setValidated] = useState(false); const [selectedType, setSelectedType] = useState(undefined); @@ -32,7 +31,6 @@ function DlgCreateCst({ show, hideWindow, defaultType, onCreate }: DlgCreateCstP return ( { setSelectedType(data?.value); }} /> - ) + ); } export default DlgCreateCst; diff --git a/rsconcept/frontend/src/pages/RSFormPage/DlgShowAST.tsx b/rsconcept/frontend/src/pages/RSFormPage/DlgShowAST.tsx new file mode 100644 index 00000000..07912daf --- /dev/null +++ b/rsconcept/frontend/src/pages/RSFormPage/DlgShowAST.tsx @@ -0,0 +1,30 @@ +import Modal from '../../components/Common/Modal'; +import PrettyJson from '../../components/Common/PrettyJSON'; +import { SyntaxTree } from '../../utils/models'; + +interface DlgShowASTProps { + hideWindow: () => void + syntaxTree: SyntaxTree +} + +function DlgShowAST({ hideWindow, syntaxTree }: DlgShowASTProps) { + const handleSubmit = () => { + // Do nothing + }; + + return ( + +
+ +
+
+ ); +} + +export default DlgShowAST; diff --git a/rsconcept/frontend/src/pages/RSFormPage/DlgUploadRSForm.tsx b/rsconcept/frontend/src/pages/RSFormPage/DlgUploadRSForm.tsx index 01ce252f..227716b2 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/DlgUploadRSForm.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/DlgUploadRSForm.tsx @@ -8,17 +8,15 @@ import { useRSForm } from '../../context/RSFormContext'; import { IRSFormUploadData } from '../../utils/models'; interface DlgUploadRSFormProps { - show: boolean hideWindow: () => void } -function DlgUploadRSForm({ show, hideWindow }: DlgUploadRSFormProps) { +function DlgUploadRSForm({ hideWindow }: DlgUploadRSFormProps) { const { upload } = useRSForm(); const [loadMetadata, setLoadMetadata] = useState(false); const [file, setFile] = useState() const handleSubmit = () => { - hideWindow(); if (!file) { return; } @@ -41,7 +39,6 @@ function DlgUploadRSForm({ show, hideWindow }: DlgUploadRSFormProps) { return (
- ) + ); } export default DlgUploadRSForm; diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx index 8351afa7..857ee281 100644 --- a/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx +++ b/rsconcept/frontend/src/pages/RSFormPage/EditorConstituenta.tsx @@ -7,14 +7,18 @@ import SubmitButton from '../../components/Common/SubmitButton'; import TextArea from '../../components/Common/TextArea'; import { DumpBinIcon, SaveIcon, SmallPlusIcon } from '../../components/Icons'; import { useRSForm } from '../../context/RSFormContext'; -import { type CstType, EditMode, type ICstCreateData, ICstUpdateData } from '../../utils/models'; +import { type CstType, EditMode, type ICstCreateData, ICstUpdateData, SyntaxTree } from '../../utils/models'; import { createAliasFor, getCstTypeLabel } from '../../utils/staticUI'; import DlgCreateCst from './DlgCreateCst'; import EditorRSExpression from './EditorRSExpression'; import ViewSideConstituents from './elements/ViewSideConstituents'; import { RSTabsList } from './RSTabs'; -function EditorConstituenta() { +interface EditorConstituentaProps { + onShowAST: (ast: SyntaxTree) => void +} + +function EditorConstituenta({onShowAST}: EditorConstituentaProps) { const navigate = useNavigate(); const { activeCst, activeID, schema, setActiveID, processing, isEditable, @@ -132,12 +136,11 @@ function EditorConstituenta() { return (
- { setShowCstModal(false); }} onCreate={handleAddNew} defaultType={activeCst?.cstType as CstType} - /> + />}