Merge branch 'master' into use-fhir-questionnaire

shared/src/constants.ts

@@ -4,10 +4,11 @@ export const baseURL =
         : (window as any).BASE_URL;
 export const juteURL =
     (window as any).JUTE_URL === '{{JUTE_URL}}'
-        ? 'http://localhost:8090/'
+        ? 'http://localhost:8099/'
         : (window as any).JUTE_URL;
 
 export const aiQuestionnaireBuilderUrl = 'https://builder.emr.beda.software';
 // export const aiQuestionnaireBuilderUrl = 'http://localhost:3002';
 export const fhirpathMappingUrl = 'https://fhirpathmapper.emr.beda.software';
 // export const fhirpathMappingUrl = 'http://localhost:8091';
+export const fhirMappingLanguageUrl = 'http://localhost:8084/matchboxv3/fhir';

vite.config.ts

@@ -10,7 +10,7 @@ const require = createRequire(import.meta.url);
 export const getBaseConfig = ({ plugins = [], build = {}, test = {} }) =>
     defineConfig(({ command }) => ({
         server: {
-            port: command === 'build' ? 5000 : 3000,
+            port: command === 'build' ? 5000 : 3001,
         },
         plugins: [
             viteCommonjs(),

web/package.json

@@ -9,6 +9,7 @@
         "@codemirror/legacy-modes": "^6.3.3",
         "@codemirror/state": "^6.2.1",
         "@codemirror/view": "^6.16.0",
+        "@monaco-editor/react": "^4.6.0",
         "@sentry/browser": "^6.19.7",
         "@sentry/react": "^6.19.7",
         "@sentry/tracing": "^6.19.7",
@@ -31,6 +32,7 @@
         "@types/react-toastify": "^4.1.0",
         "@types/yaml": "^1.9.7",
         "aidbox-react": "^1.4.0",
+        "allotment": "^1.20.2",
         "babel-loader": "8.1.0",
         "babel-plugin-import": "^1.13.3",
         "classnames": "^2.3.1",

web/src/components/Cell/Cell.module.scss

@@ -0,0 +1,33 @@
+@import 'src/styles/colors';
+
+.title {
+    display: flex;
+    line-height: 32px;
+    margin-bottom: 3px;
+}
+
+.container {
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+.evenContainer {
+    background-color: $base-light-color;
+}
+
+.oddContainer {
+    background-color: $base-surface-color;
+}
+
+.content {
+    flex: 1;
+    padding: 20px;
+    overflow-y: auto;
+}
+
+.boxHeader {
+    position: relative;
+}

web/src/components/Cell/index.tsx

@@ -0,0 +1,23 @@
+import classNames from 'classnames';
+
+import s from './Cell.module.scss';
+
+interface CellProps extends React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    even?: boolean;
+}
+
+export function Cell({ title, children, even }: CellProps) {
+    const isEven = even ?? false;
+
+    return (
+        <div className={classNames(s.container, isEven ? s.evenContainer : s.oddContainer)}>
+            <div className={s.content}>
+                <div className={s.boxHeader}>
+                    <h2 className={s.title}>{title}</h2>
+                </div>
+                {children}
+            </div>
+        </div>
+    );
+}

web/src/containers/Main/MappingEditor/MappingEditorEditor/index.tsx

@@ -0,0 +1,65 @@
+import classNames from 'classnames';
+import { WithId } from 'fhir-react';
+import { Button } from 'web/src/components/Button';
+import { ResourceCodeEditor } from 'web/src/components/ResourceCodeEditor';
+
+import { Mapping } from 'shared/src/contrib/aidbox';
+
+import { MappingEditorEditorProps } from '../interfaces';
+import s from '../MappingEditor.module.scss';
+
+export function MappingEditorEditor(props: MappingEditorEditorProps) {
+    const {
+        reload,
+        onChange,
+        updatedResource,
+        onSave,
+        setUpdatedResource,
+        mapping,
+        launchContext,
+        questionnaireResponseRD,
+        setEditorSelect,
+    } = props;
+
+    return (
+        <>
+            <ResourceCodeEditor<WithId<Mapping>>
+                reload={() => {
+                    reload();
+                    setUpdatedResource(undefined);
+                }}
+                resource={mapping}
+                onChange={(updatedMapping) => {
+                    setUpdatedResource(updatedMapping);
+                    onChange(updatedMapping);
+                }}
+                launchContext={launchContext}
+                questionnaireResponseRD={questionnaireResponseRD}
+            />
+            <div className={s.actions}>
+                <Button
+                    className={s.action}
+                    variant="secondary"
+                    onClick={() => {
+                        setEditorSelect();
+                    }}
+                >
+                    clear
+                </Button>
+                <Button
+                    className={classNames(s.action, {
+                        _active: !!updatedResource,
+                    })}
+                    onClick={() => {
+                        if (updatedResource) {
+                            onSave(updatedResource);
+                            setUpdatedResource(undefined);
+                        }
+                    }}
+                >
+                    save mapping
+                </Button>
+            </div>
+        </>
+    );
+}

web/src/containers/Main/MappingEditor/MappingEditorError/index.tsx

@@ -0,0 +1,31 @@
+import { Button } from 'web/src/components/Button';
+
+import { formatError } from 'fhir-react/lib/utils/error';
+
+import { MappingEditorErrorProps } from '../interfaces';
+import s from '../MappingEditor.module.scss';
+
+export function MappingEditorError(props: MappingEditorErrorProps) {
+    const { error, setEditorSelect, editorState } = props;
+
+    return editorState !== 'ready' ? (
+        <div>
+            {formatError(error)}
+            {error?.id === 'not-found' ? (
+                <div className={s.actions}>
+                    <Button
+                        className={s.action}
+                        variant="secondary"
+                        onClick={() => {
+                            setEditorSelect();
+                        }}
+                    >
+                        create new
+                    </Button>
+                </div>
+            ) : null}
+        </div>
+    ) : (
+        <div />
+    );
+}