Fixes, added basic editor

TIER · May 5, 2021 · bacc242 · bacc242
1 parent b88532b
commit bacc242
Show file tree

Hide file tree

Showing 13 changed files with 345 additions and 231 deletions.
diff --git a/ui/src/app/form/component/CustomFieldTemplate.js b/ui/src/app/form/component/CustomFieldTemplate.js
@@ -0,0 +1,52 @@
+import React from "react";
+
+import Form from "react-bootstrap/Form";
+import ListGroup from "react-bootstrap/ListGroup";
+
+import {Translate} from '../../i18n/components/translate';
+
+export function CustomFieldTemplate ({
+    id,
+    children,
+    displayLabel,
+    rawErrors = [],
+    rawHelp,
+    rawDescription,
+    ...props
+}) {
+
+    console.log(props);
+    return (
+        <>{!props.hidden ? <Form.Group>
+            {children}
+            {displayLabel && rawDescription ? (
+                <Form.Text className={rawErrors.length > 0 ? "text-danger" : "text-muted"}>
+                    <Translate value={rawDescription} />
+                </Form.Text>
+            ) : null}
+            {rawErrors.length > 0 && (
+                <ListGroup as="ul">
+                    {rawErrors.map((error) => {
+                        return (
+                            <ListGroup.Item as="li" key={error} className="border-0 m-0 p-0">
+                                <small className="m-0 text-danger">
+                                    {error}
+                                </small>
+                            </ListGroup.Item>
+                        );
+                    })}
+                </ListGroup>
+            )}
+            {rawHelp && (
+                <Form.Text
+                    className={rawErrors.length > 0 ? "text-danger" : "text-muted"}
+                    id={id}>
+                    <Translate value={rawHelp} />
+                </Form.Text>
+            )}
+        </Form.Group>
+        : <></>}</>
+    );
+};
+
+export default CustomFieldTemplate;
diff --git a/ui/src/app/form/component/index.js b/ui/src/app/form/component/index.js
@@ -0,0 +1,3 @@
+export const fields = {
+    // SchemaField: CustomSchemaField
+};
diff --git a/ui/src/app/i18n/hooks.js b/ui/src/app/i18n/hooks.js
@@ -1,6 +1,17 @@
 import { useContext } from 'react';
 import { I18nContext } from './context/I18n.provider';
 
+export function translate(value, interpolated) {
+    return Object.entries(interpolated).reduce((current, interpolate) => {
+        let reg = new RegExp(`{\\s*${interpolate[0]}\\s*}`, 'gm');
+        return current.replace(reg, interpolate[1]);
+    }, value);
+}
+
+export function getMessage(value, messages) {
+    return messages.hasOwnProperty(value) ? messages[value] : (Object.keys(messages).length ? value : '');
+}
+
 export function useCurrentLanguage () {
 
 }
@@ -11,13 +22,10 @@ export function useCurrentLocale () {
 
 export function useTranslation (value, interpolated = {}) {
     const messages = useContext(I18nContext);
-    let val = messages.hasOwnProperty(value) ? messages[value] : (Object.keys(messages).length ? value : '');
+    const val = getMessage(value, messages);
     return useInterpolatedTranslation(val, interpolated);
 }
 
 export function useInterpolatedTranslation(value, interpolated) {
-    return Object.entries(interpolated).reduce((current, interpolate) => {
-        let reg = new RegExp(`{\\s*${interpolate[0]}\\s*}`, 'gm');
-        return current.replace(reg, interpolate[1]);
-    }, value);
-}
+    return translate(value, interpolated);
+}
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
@@ -6,16 +6,16 @@ import { faArrowCircleDown, faArrowCircleUp, faChevronUp, faEdit, faTrash } from
 import { Translate } from '../../../../i18n/components/translate';
 import { Link } from 'react-router-dom';
 import { getDefinition } from '../../../domain/index';
-import { useMetadataSchema } from '../../../hooks/api';
 import { MetadataConfiguration } from '../../../component/MetadataConfiguration';
 import { useMetadataConfiguration } from '../../../hooks/configuration';
+import useFetch from 'use-http';
 
 export function MetadataFilterConfigurationListItem ({ filter, isLast, isFirst, onOrderUp, onOrderDown, editable, onRemove, index }) {
     const [open, setOpen] = React.useState(false);
 
     const definition = React.useMemo(() => getDefinition(filter['@type'], ), [filter]);
 
-    const { get, response } = useMetadataSchema();
+    const { get, response } = useFetch('');
 
     const [schema, setSchema] = React.useState();
 

diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterVersionListItem.js
@@ -3,8 +3,8 @@ import { faCheckSquare, faSquare } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { MetadataConfiguration } from '../../../component/MetadataConfiguration';
 import { getDefinition } from '../../../domain/index';
-import { useMetadataSchema } from '../../../hooks/api';
 import { useMetadataConfiguration } from '../../../hooks/configuration';
+import useFetch from 'use-http';
 
 export function MetadataFilterVersionListItem ({ filters, width, selected, index, comparing, limited, onSelect }) {
 
@@ -13,7 +13,7 @@ export function MetadataFilterVersionListItem ({ filters, width, selected, index
 
     const definition = React.useMemo(() => getDefinition(type), [type]);
 
-    const { get, response } = useMetadataSchema();
+    const { get, response } = useFetch(``);
 
     const [schema, setSchema] = React.useState();
 

diff --git a/ui/src/app/metadata/domain/source/SourceDefinition.js b/ui/src/app/metadata/domain/source/SourceDefinition.js
@@ -115,6 +115,11 @@ export const SourceBase = {
             }
         };
         return validators;
+    },
+    uiSchema: {
+        mdui: {
+            'ui:widget': 'hidden'
+        }
     }
 }
 

diff --git a/ui/src/app/metadata/editor/MetadataEditor.js b/ui/src/app/metadata/editor/MetadataEditor.js
@@ -34,10 +34,6 @@ export function MetadataEditor () {
         console.log('cancel!');
     };
 
-    React.useEffect(() => {
-        console.log(current)
-    }, [current]);
-
     return (
         <div className="container-fluid p-3">
             <section className="section" aria-label={`Edit metadata ${type} - ${metadata.serviceProviderName || metadata.name}`} tabIndex="0">
@@ -96,7 +92,7 @@ export function MetadataEditor () {
                             </MetadataEditorNav>
                         </div>
                         <div className="col-lg-6">
-                            <MetadataEditorForm metadata={metadata} schema={schema} />
+                            <MetadataEditorForm metadata={metadata} definition={definition} schema={schema} current={section} />
                         </div>
                     </div>
                 </div>

diff --git a/ui/src/app/metadata/editor/MetadataEditorForm.js b/ui/src/app/metadata/editor/MetadataEditorForm.js
@@ -2,13 +2,27 @@ import React from 'react';
 
 import Form from '@rjsf/bootstrap-4';
 
-export function MetadataEditorForm ({ metadata, definition, schema }) {
+import { fields } from '../../form/component';
+import { CustomFieldTemplate } from '../../form/component/CustomFieldTemplate';
+import { useUiSchema } from '../hooks/schema';
 
+export function MetadataEditorForm ({ metadata, definition, schema, current }) {
 
+    const uiSchema = useUiSchema(definition, schema, current);
+
+    const [data, setData] = React.useState(metadata);
+
+    React.useEffect(() => setData(metadata), [metadata]);
 
     return (
         <>
-            <Form model={metadata} schema={schema}></Form>
+            <Form formData={data}
+                onChange={ ({ formData }) => setData(formData) }
+                schema={schema}
+                uiSchema={uiSchema}
+                FieldTemplate={CustomFieldTemplate}
+                fields={ fields }></Form>
+            <pre>{JSON.stringify(data, null, 4)}</pre>
         </>
     );
 }
diff --git a/ui/src/app/metadata/editor/MetadataEditorNav.js b/ui/src/app/metadata/editor/MetadataEditorNav.js
@@ -17,15 +17,13 @@ export function MetadataEditorNav ({ definition, current, base, children, format
 
     React.useEffect(() => {
         setActive(definition ? definition.steps.find(s => s.id === current)?.label : null);
-
-        console.log(definition.steps, current);
     }, [current, definition]);
 
     return (
         <React.Fragment>
             {format === 'dropdown' ?
                 <Dropdown>
-                    <Dropdown.Toggle caret>
+                    <Dropdown.Toggle caret="true">
                         <FontAwesomeIcon icon={faBars} />&nbsp;
                         <Translate value={active} />
                     </Dropdown.Toggle>

diff --git a/ui/src/app/metadata/hoc/MetadataSchema.js b/ui/src/app/metadata/hoc/MetadataSchema.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useParams } from 'react-router';
-import { useMetadataSchema } from '../hooks/api';
 import { getDefinition } from '../domain/index';
+import useFetch from 'use-http';
 
 export const MetadataSchemaContext = React.createContext();
 export const MetadataDefinitionContext = React.createContext();
@@ -14,7 +14,7 @@ export function MetadataSchema({ entity, children }) {
         type === 'source' ? type : entity['@type']
     ), [type, entity]);
 
-    const { get, response } = useMetadataSchema();
+    const { get, response } = useFetch(``, {}, []);
 
     const [schema, setSchema] = React.useState();
 

diff --git a/ui/src/app/metadata/hooks/api.js b/ui/src/app/metadata/hooks/api.js
@@ -53,10 +53,6 @@ export function useMetadataProviderOrder() {
     return useFetch(`${API_BASE_PATH}/MetadataResolversPositionOrder`);
 }
 
-export function useMetadataSchema() {
-    return useFetch(``);
-}
-
 export function useMetadataHistory(type, id, opts = {}, i) {
 
     return useFetch(`${API_BASE_PATH}${getMetadataPath(type)}/${id}/Versions`, opts, i);