Added filter list to configuration page

TIER · Apr 29, 2021 · b407d4f · b407d4f
1 parent 6f3ec2f
commit b407d4f
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 72 deletions.
diff --git a/ui/src/app/dashboard/component/Ordered.js b/ui/src/app/dashboard/component/Ordered.js
@@ -20,7 +20,7 @@ export const mergeOrderFn = (entities, order) => {
     return ordered;
 };
 
-export function Ordered ({path = '/MetadataResolvers', entities, children}) {
+export function Ordered({ path = '/MetadataResolversPositionOrder', entities, children, prop = null}) {
 
     const orderEntities = (orderById, list) => {
         setOrdered(mergeOrderFn(list, orderById));
@@ -37,9 +37,11 @@ export function Ordered ({path = '/MetadataResolvers', entities, children}) {
     const [lastId, setLastId] = React.useState(null);
 
     async function changeOrder(resourceIds) {
-        await post(path, {
-            resourceIds
-        });
+        await post(path, prop ? {
+            [prop]: resourceIds
+        } : [
+            ...resourceIds
+        ]);
         if (response.ok) {
             loadOrder();
         }
@@ -60,7 +62,7 @@ export function Ordered ({path = '/MetadataResolvers', entities, children}) {
     async function loadOrder () {
         const o = await get(path);
         if (response.ok) {
-            const ids = o.resourceIds;
+            const ids = prop ? o.hasOwnProperty(prop) ? o[prop] : o : o;
             setOrder(ids);
             setFirstId(first(ids));
             setLastId(last(ids));

diff --git a/ui/src/app/dashboard/container/ProvidersTab.js b/ui/src/app/dashboard/container/ProvidersTab.js
@@ -17,7 +17,7 @@ export function ProvidersTab () {
     const { get, response } = useMetadataEntities('provider');
 
     async function loadProviders() {
-        const providers = await get('/')
+        const providers = await get('')
         if (response.ok) {
             setProviders(providers);
         }
@@ -39,7 +39,7 @@ export function ProvidersTab () {
                         </span>
                     </div>
                     <div className="p-3">
-                        <Ordered entities={providers}>
+                        <Ordered entities={providers} prop="resourceIds">
                             {(ordered, first, last, onOrderUp, onOrderDown) =>
                             <Search entities={ordered} searchable={searchProps}>
                                 {(searched) => <ProviderList

diff --git a/ui/src/app/metadata/component/MetadataOptions.js b/ui/src/app/metadata/component/MetadataOptions.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { faArrowDown, faHistory, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faArrowUp, faChevronUp, faCog, faHistory, faPlus, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link, useHistory, useParams } from 'react-router-dom';
 
@@ -10,7 +10,7 @@ import Translate from '../../i18n/components/translate';
 import { MetadataObjectContext } from '../hoc/MetadataSelector';
 import { MetadataHeader } from './MetadataHeader';
 import { MetadataConfiguration } from './MetadataConfiguration';
-
+import { MetadataDefinitionContext, MetadataSchemaContext } from '../hoc/MetadataSchema';
 
 import { useMetadataConfiguration } from '../hooks/configuration';
 import { MetadataViewToggle } from './MetadataViewToggle';
@@ -22,11 +22,13 @@ import { MetadataFilterTypes } from '../domain/filter';
 export function MetadataOptions () {
 
     const metadata = React.useContext(MetadataObjectContext);
+    const definition = React.useContext(MetadataDefinitionContext);
+    const schema = React.useContext(MetadataSchemaContext);
     const history = useHistory();
 
     const { type, id } = useParams();
 
-    const configuration = useMetadataConfiguration([metadata]);
+    const configuration = useMetadataConfiguration([metadata], schema, definition);
 
     const onScrollTo = (element, offset = 0) => {
         scroller.scrollTo(element, {
@@ -85,7 +87,7 @@ export function MetadataOptions () {
                                 <div className="actions px-2">
                                     <Link className="btn btn-link edit-link change-view"
                                         to={`/metadata/provider/${id}/filter/new`}>
-                                        <i className="fa fa-gear"></i>&nbsp;
+                                        <FontAwesomeIcon icon={faPlus} />&nbsp;
                                         <Translate value="action.add-filter">Add Filter</Translate>
                                     </Link>
                                 </div>
@@ -97,7 +99,7 @@ export function MetadataOptions () {
                     }
                 </div>
                 <button className="btn btn-link" onClick={ () => onScrollTo('header', -60) }>
-                    <i className="fa fa-chevron-up sr-hidden"></i>&nbsp;
+                    <FontAwesomeIcon icon={faArrowUp} className="sr-hidden" />&nbsp;
                     <Translate value="action.back-to-top">Back to Top</Translate>
                 </button>
             </div>

diff --git a/ui/src/app/metadata/component/properties/FilterTargetProperty.js b/ui/src/app/metadata/component/properties/FilterTargetProperty.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { ArrayProperty } from './ArrayProperty';
+import { PrimitiveProperty } from './PrimitiveProperty';
+
+export function FilterTargetProperty ({ property, columns, onPreview }) {
+    return (
+        <>
+            {property.properties.map((prop, idx) =>
+                <React.Fragment key={idx}>
+                    { prop.type === 'array' ?
+                    <ArrayProperty property={prop} columns={columns} onPreview={onPreview} />
+                    :
+                    <PrimitiveProperty property={prop} columns={columns} />
+                    }
+                </React.Fragment>
+            )}
+        </>
+    );
+}
diff --git a/ui/src/app/metadata/component/properties/ObjectProperty.js b/ui/src/app/metadata/component/properties/ObjectProperty.js
@@ -3,16 +3,27 @@ import React from 'react';
 import { PrimitiveProperty } from './PrimitiveProperty';
 import { ArrayProperty } from './ArrayProperty';
 import Translate from '../../../i18n/components/translate';
+import { FilterTargetProperty } from './FilterTargetProperty';
 
 export function ObjectProperty ({ property, columns, onPreview }) {
     const getProperty = (prop, idx) => {
         switch(prop.type) {
             case 'array':
                 return <ArrayProperty key={ `p-${idx}` } property={prop} columns={columns} />
             case 'object':
+                if (prop.widget && prop.widget.id && prop.widget.id === 'filter-target') {
+                    console.log(prop);
+                }
                 return <React.Fragment key={`p-${idx}`}>
-                    {prop.name && <h5 className="border-bottom py-2 mb-0 mt-3"><Translate value={ prop.name } /></h5>}
-                    <ObjectProperty property={prop} columns={columns} onPreview={ onPreview } />
+                    {prop.widget && prop.widget.id && prop.widget.id === 'filter-target' ?
+                        <FilterTargetProperty property={prop} columns={columns} onPreview={onPreview} />
+                    :
+                        <React.Fragment>
+                            {prop.name && <h5 className="border-bottom py-2 mb-0 mt-3"><Translate value={prop.name} /></h5>}
+                            <ObjectProperty property={prop} columns={columns} onPreview={onPreview} />
+                        </React.Fragment>
+                    }
+
                 </React.Fragment>
             default:
                 return <PrimitiveProperty key={ `p-${idx}`} property={ prop } columns={columns} />
@@ -25,21 +36,3 @@ export function ObjectProperty ({ property, columns, onPreview }) {
         </div>
     );
 }
-
-/*
-<array-property *ngSwitchCase="'array'" [property]="prop" [columns]="columns"></array-property>
-<ng-container *ngSwitchCase="'object'">
-    <ng-container *ngIf="!prop.widget || !prop.widget.id || prop.widget.id !=='filter-target'">
-        <h5 className="border-bottom py-2 mb-0 mt-3" *ngIf="prop.name">{{ prop.name | translate }}</h5>
-        <object-property [property]="prop" [columns]="columns"></object-property>
-    </ng-container>
-
-</ng-container>
-<primitive-property *ngSwitchDefault [property]="prop" [columns]="columns"></primitive-property>
-
-<filter-target-property *ngIf="prop.widget && prop.widget.id && prop.widget.id ==='filter-target'"
-    [property]="prop"
-    [parent]="property"
-    [columns]="columns"
-    (preview)="preview.emit($event)">
-</filter-target-property>*/
diff --git a/ui/src/app/metadata/domain/filter/NameIdFilterDefinition.js b/ui/src/app/metadata/domain/filter/NameIdFilterDefinition.js
@@ -70,7 +70,7 @@ export const NameIDFilterEditor = {
         {
             id: 'options',
             label: 'label.options',
-            index: 1,
+            index: 2,
             initialValues: [],
             fields: [
                 'removeExistingFormats',

diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
@@ -1,12 +1,35 @@
 import React from 'react';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowCircleDown, faArrowCircleUp } from '@fortawesome/free-solid-svg-icons';
+import { faArrowCircleDown, faArrowCircleUp, faChevronUp, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
 
 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';
 
 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 [schema, setSchema] = React.useState();
+
+    async function loadSchema(d) {
+        const source = await get(`/${d.schema}`)
+        if (response.ok) {
+            setSchema(source);
+        }
+    }
+
+    /*eslint-disable react-hooks/exhaustive-deps*/
+    React.useEffect(() => { loadSchema(definition) }, [definition]);
+
+    const configuration = useMetadataConfiguration([filter], schema, definition);
 
     return (<>
         <div className="d-flex justify-content-start align-items-center">
@@ -31,37 +54,31 @@ export function MetadataFilterConfigurationListItem ({ filter, isLast, isFirst,
                 </span>
             </span>
         </div>
-
-    </>);
-}
-
-/*
-
-<div *ngIf="open">
-    <hr className="my-2" />
-    <div className="d-flex justify-content-end mb-2" *ngIf="editable">
-        <div className="d-flex justify-content-between">
-            <a className="btn btn-link"
-                [routerLink]="['../../', 'filter', filter.resourceId, 'edit']">
-                <i className="fa fa-edit sr-hidden"></i>&nbsp;
-                <Translate value="action.edit">Edit</Translate>
-            </a>
-            <button className="btn btn-link"
-                (click)="onRemove.emit(filter.resourceId)">
-                <i className="fa fa-trash sr-hidden"></i>&nbsp;
-                <Translate value="action.delete">Delete</Translate>
+        {open &&
+        <div>
+            <hr className="my-2" />
+            {editable &&
+            <div className="d-flex justify-content-end mb-2">
+                <div className="d-flex justify-content-between">
+                    <Link className="btn btn-link"
+                        to={`filter/${filter.resourceId}/edit`}>
+                        <FontAwesomeIcon icon={faEdit} className="sr-hidden" />&nbsp;
+                        <Translate value="action.edit">Edit</Translate>
+                    </Link>
+                    <button className="btn btn-link"
+                        onClick={() => onRemove(filter.resourceId)}>
+                        <FontAwesomeIcon icon={faTrash} className="sr-hidden" />&nbsp;
+                        <Translate value="action.delete">Delete</Translate>
+                    </button>
+                </div>
+            </div>
+            }
+            {configuration && <MetadataConfiguration configuration={ configuration }/> }
+            <button className="btn btn-link btn-sm" onClick={() => setOpen(!open)}>
+                <FontAwesomeIcon icon={faChevronUp} />&nbsp;
+                <Translate value="action.close">Close</Translate>
             </button>
         </div>
-    </div>
-    <metadata-configuration
-        [numbered]="false"
-        [configuration]="configuration"
-        [entity]="filter"
-        [definition]="definition"
-        (preview)="onPreview($event)"></metadata-configuration>
-    <button className="btn btn-link btn-sm" (click)="open = !open">
-        <i className="fa fa-chevron-up sr-hidden"></i>&nbsp;
-        <Translate value="action.close">Close</Translate>
-    </button>
-</div>
-*/
+        }
+    </>);
+}
diff --git a/ui/src/app/metadata/hooks/configuration.js b/ui/src/app/metadata/hooks/configuration.js
@@ -1,11 +1,10 @@
-import React from 'react';
-
-import { MetadataDefinitionContext, MetadataSchemaContext } from '../hoc/MetadataSchema';
 import { getConfigurationSections } from './schema';
 
-export function useMetadataConfiguration(models) {
-    const definition = React.useContext(MetadataDefinitionContext);
-    const schema = React.useContext(MetadataSchemaContext);
+export function useMetadataConfiguration(models, schema, definition) {
+
+    if (!models || !schema || !definition) {
+        return {};
+    }
 
     const processed = definition.schemaPreprocessor ?
         definition.schemaPreprocessor(schema) : schema;