Added filter list

TIER · May 19, 2021 · f4b7741 · f4b7741
1 parent dbca74b
commit f4b7741
Show file tree

Hide file tree

Showing 11 changed files with 85 additions and 42 deletions.
diff --git a/ui/src/app/dashboard/component/Ordered.js b/ui/src/app/dashboard/component/Ordered.js
@@ -67,11 +67,15 @@ export function Ordered({ path = '/MetadataResolversPositionOrder', entities, ch
         if (response.ok) {
             const ids = prop ? o.hasOwnProperty(prop) ? o[prop] : o : o;
             setOrder(ids);
-            setFirstId(first(ids));
-            setLastId(last(ids));
         }
     }
 
+    React.useEffect(() => {
+        const oIds = ordered.map(o => o.resourceId);
+        setFirstId(first(oIds));
+        setLastId(last(oIds));
+    }, [ordered])
+
     /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => loadOrder(),[]);
 

diff --git a/ui/src/app/form/component/fields/FilterTargetField.js b/ui/src/app/form/component/fields/FilterTargetField.js
@@ -132,7 +132,7 @@ const FilterTargetField = ({
                             </Dropdown.Toggle>
                             <Dropdown.Menu>
                                 {typeOptions.map((option) => (
-                                    <Dropdown.Item as="button" onClick={() => selectType(option)} key={option.value}>
+                                    <Dropdown.Item as="button" onClick={() => selectType(option)} key={option.value} type="button">
                                         <Translate value={option.label}>{option.label}</Translate>
                                     </Dropdown.Item>
                                 ))}
@@ -224,6 +224,7 @@ const FilterTargetField = ({
                             {targetType === 'ENTITY' &&
                                 <div className="ml-2">
                                     <button className="btn btn-success"
+                                        type="button"
                                         disabled={!term}
                                         onClick={() => onSelectValue(term)}>
                                         <Translate value="action.add-entity-id">Add Entity ID</Translate>&nbsp;&nbsp;

diff --git a/ui/src/app/metadata/Filter.js b/ui/src/app/metadata/Filter.js
@@ -1,5 +1,8 @@
 import React from 'react';
 import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
+import { MetadataFilterList } from './editor/MetadataFilterList';
+import MetadataSchema from './hoc/MetadataSchema';
+import MetadataSelector from './hoc/MetadataSelector';
 import { NewFilter } from './new/NewFilter';
 import { EditFilter } from './view/EditFilter';
 
@@ -9,6 +12,15 @@ export function Filter() {
 
     return (
         <Switch>
+            <Route path={`${path}/list`} render={() =>
+                <MetadataSelector type="provider">
+                    {(entity) =>
+                        <MetadataSchema type={entity['@type']}>
+                            <MetadataFilterList />
+                        </MetadataSchema>
+                    }
+                </MetadataSelector>
+            } />
             <Route path={`${path}/new/:section`} render={() =>
                 <NewFilter />
             } />

diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterEditorList.js
@@ -1,23 +1,19 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import Check from 'react-bootstrap/FormCheck';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faArrowCircleDown, faArrowCircleUp } from '@fortawesome/free-solid-svg-icons';
+import { faArrowCircleDown, faArrowCircleUp, faEdit, faTrash } from '@fortawesome/free-solid-svg-icons';
 
 import { Ordered } from '../../../../dashboard/component/Ordered';
 import { Translate } from '../../../../i18n/components/translate';
-import { MetadataFiltersContext } from './MetadataFilters';
 
-export function MetadataFilterEditorList ({provider}) {
-    const filters = React.useContext(MetadataFiltersContext);
+export function MetadataFilterEditorList ({provider, filters, onDelete, onUpdate, loading}) {
 
-    const onToggleEnabled = () => {}
-    const removeFilter = () => {}
-
-    const disabled = false;
+    const disabled = loading;
 
     return (
-        <Ordered path={`/MetadataSources/${provider.resourceId}/FiltersPositionOrder` } entities={filters}>
+        <Ordered path={`/MetadataResolvers/${provider.resourceId}/FiltersPositionOrder` } entities={filters}>
             {(ordered, first, last, onOrderUp, onOrderDown) =>
                 <table className="filter-list table table-striped table-hover">
                     <thead className="">
@@ -33,7 +29,7 @@ export function MetadataFilterEditorList ({provider}) {
                     </thead>
                     <tbody>
                         {ordered.map((filter, i) =>
-                            <tr>
+                            <tr key={i}>
                                 <td className="td-sm">
                                     <div className="d-flex justify-content-center">
                                         <button className="btn btn-link" onClick={() => onOrderUp(filter.resourceId)} disabled={first === filter.resourceId}>
@@ -51,30 +47,24 @@ export function MetadataFilterEditorList ({provider}) {
                                 <td className="td-lg">{filter['@type']}</td>
                                 <td className="td-sm">
                                     <div className="d-flex justify-content-center">
-                                        <div className="custom-control custom-switch">
-                                            <input type="checkbox"
-                                                className="custom-control-input"
-                                                disabled="disabled"
-                                                id="'customSwitch' + i"
-                                                value="filter.filterEnabled"
-                                                checked="filter.filterEnabled"
-                                                onChange={() => onToggleEnabled(filter)} />
-                                            <label className="custom-control-label" htmlFor={`customSwitch-${i}`}>
-                                                <span className="sr-only">Toggle this switch element</span>
-                                            </label>
-                                        </div>
+                                        <Check type="switch"
+                                            id={`customSwitch${i}`}
+                                            label={<span className="sr-only">Toggle this switch element</span>}
+                                            checked={filter.filterEnabled}
+                                            disabled={loading}
+                                            onChange={() => onUpdate({ ...filter, filterEnabled: !filter.filterEnabled })} />
                                         {filter.disabled && <i className="fa fa-spinner fa-pulse fa-lg fa-fw"></i>}
                                     </div>
                                 </td>
                                 <td className="td-sm">
-                                    <Link className={`btn btn-link ${disabled ? 'disabled' : ''}`} to={`filter/${filter.resourceId}/edit`}>
-                                        <i className="fa fa-edit fa-lg sr-hidden text-info"></i>
+                                    <Link className={`btn btn-link ${disabled ? 'disabled' : ''}`} to={`${filter.resourceId}/edit/common`}>
+                                        <FontAwesomeIcon icon={faEdit} size="lg" className="text-info" />
                                         <span className="sr-only"><Translate value="action.edit">Edit</Translate></span>
                                     </Link>
                                 </td>
                                 <td className="td-sm">
-                                    <button className="btn btn-link" onClick={() => removeFilter(filter.resourceId)}>
-                                        <i className="fa fa-trash fa-lg sr-hidden text-danger"></i>
+                                    <button className="btn btn-link" disabled={loading} onClick={() => onDelete(filter.resourceId)}>
+                                        <FontAwesomeIcon icon={faTrash} size="lg" className="text-danger" />
                                         <span className="sr-only"><Translate value="action.edit">Delete</Translate></span>
                                     </button>
                                 </td>

diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilters.js b/ui/src/app/metadata/domain/filter/component/MetadataFilters.js
@@ -1,23 +1,40 @@
 import React from 'react';
-import { useMetadataEntities } from '../../../hooks/api';
+import { useMetadataFilters } from '../../../hooks/api';
 
 export const MetadataFiltersContext = React.createContext();
 
 export function MetadataFilters ({ providerId, types = [], filters, children }) {
 
-    const { get, response } = useMetadataEntities('provider', {
+    const { put, del, get, response, loading } = useMetadataFilters(providerId, {
         cachePolicy: 'no-cache'
     });
 
     const [filterData, setFilterData] = React.useState([]);
 
     async function loadFilters(id) {
-        const list = await get(`/${id}/Filters`);
+        const list = await get(``);
         if (response.ok) {
             setFilterData(list.filter(f => types.length > 1 ? types.indexOf(f['@type']) > -1 : true));
         }
     }
 
+    async function updateFilter(filter) {
+        await put(`/${filter.resourceId}`, filter);
+        if (response.ok) {
+            loadFilters(providerId);
+        }
+    }
+
+    async function deleteFilter(filterId) {
+        await del(`/${filterId}`);
+        if (response.ok) {
+            loadFilters();
+        }
+    }
+
+    const onDelete = (id) => deleteFilter(id);
+    const onUpdate = (f) => updateFilter(f);
+
     /*eslint-disable react-hooks/exhaustive-deps*/
     React.useEffect(() => {
         if (!filters) {
@@ -29,6 +46,6 @@ export function MetadataFilters ({ providerId, types = [], filters, children })
 
 
     return (
-        <MetadataFiltersContext.Provider value={filterData}>{children}</MetadataFiltersContext.Provider>
+        <MetadataFiltersContext.Provider value={filterData}>{children(filterData, onUpdate, onDelete, loading)}</MetadataFiltersContext.Provider>
     );
 }
diff --git a/ui/src/app/metadata/domain/provider/utility/providerFilterProcessor.js b/ui/src/app/metadata/domain/provider/utility/providerFilterProcessor.js
@@ -1,5 +1,4 @@
 export const metadataFilterProcessor = (schema) => {
-    console.log(schema);
     if (!schema) {
         return null;
     }

diff --git a/ui/src/app/metadata/editor/MetadataEditor.js b/ui/src/app/metadata/editor/MetadataEditor.js
@@ -12,9 +12,13 @@ import { MetadataEditorForm } from './MetadataEditorForm';
 import { MetadataEditorNav } from './MetadataEditorNav';
 import { useMetadataEntities, useMetadataEntity } from '../hooks/api';
 import { MetadataObjectContext } from '../hoc/MetadataSelector';
+import { NavLink } from 'react-router-dom';
+import { useTranslator } from '../../i18n/hooks';
 
 export function MetadataEditor () {
 
+    const translator = useTranslator();
+
     const { type, id, section } = useParams();
 
     const { put, response, saving } = useMetadataEntity(type, {}, []);
@@ -89,6 +93,12 @@ export function MetadataEditor () {
                                 base={`/metadata/${type}/${id}/edit`}
                                 format='dropdown'
                                 errors={errors}>
+                                <NavLink className="dropdown-item"
+                                    to="../filter/list"
+                                    aria-label={translator('label.filter-list')}
+                                    role="button">
+                                    <Translate value="label.filter-list"></Translate>
+                                </NavLink>
                             </MetadataEditorNav>
                         </div>
                         <div className="col-6 col-lg-3 order-2 text-right">
@@ -125,6 +135,12 @@ export function MetadataEditor () {
                                 base={`/metadata/${type}/${id}/edit`}
                                 format='tabs'
                                 errors={errors}>
+                                <NavLink className="nav-link"
+                                    to="../filter/list"
+                                    aria-label={translator('label.filter-list')}
+                                    role="button">
+                                    <Translate value="label.filter-list"></Translate>
+                                </NavLink>
                             </MetadataEditorNav>
                         </div>
                         <div className="col-lg-9">

diff --git a/ui/src/app/metadata/editor/MetadataEditorNav.js b/ui/src/app/metadata/editor/MetadataEditorNav.js
@@ -1,17 +1,17 @@
-import { faBars, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
+import { faBars } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import Dropdown from 'react-bootstrap/Dropdown';
 
 import Translate from '../../i18n/components/translate';
-import { usePagesWithErrors } from '../hoc/MetadataFormContext';
+// import { usePagesWithErrors } from '../hoc/MetadataFormContext';
 
 export function MetadataEditorNav ({ definition, current, base, children, format = 'tabs', onNavigate }) {
 
     const [routes, setRoutes] = React.useState([]);
     const [active, setActive] = React.useState(null);
 
-    const errors = usePagesWithErrors(definition);
+    // const errors = usePagesWithErrors(definition);
 
     React.useEffect(() => {
         setRoutes(definition ? definition.steps.map(step => ({ path: step.id, label: step.label })) : [])
@@ -59,9 +59,9 @@ export function MetadataEditorNav ({ definition, current, base, children, format
                             onClick={() => onNavigate(route.path)}
                             aria-label={route.label}>
                             <Translate value={route.label}></Translate>
-                            { errors.indexOf(route.path) > -1 &&
+                            { /*errors.indexOf(route.path) > -1 &&
                                 <FontAwesomeIcon className={`ml-2 ${route.path === current ? '' : 'text-danger'}`} icon={ faExclamationTriangle } />
-                            }
+                            */}
                         </button>
                     )}
                 </nav>

diff --git a/ui/src/app/metadata/hoc/MetadataSelector.js b/ui/src/app/metadata/hoc/MetadataSelector.js
@@ -6,11 +6,15 @@ export const MetadataTypeContext = React.createContext();
 export const MetadataObjectContext = React.createContext();
 
 /*eslint-disable react-hooks/exhaustive-deps*/
-export function MetadataSelector ({ children }) {
+export function MetadataSelector({ children, ...props }) {
 
     let { type, id } = useParams();
     const location = useLocation();
 
+    if (!type) {
+        type = props.type;
+    }
+
     React.useEffect(() => {
         if (location.state?.refresh) {
             loadMetadata(id);

diff --git a/ui/src/app/metadata/view/MetadataOptions.js b/ui/src/app/metadata/view/MetadataOptions.js
@@ -99,7 +99,7 @@ export function MetadataOptions () {
                                 </div>
                             </div>
                             <MetadataFilters providerId={metadata.resourceId} types={MetadataFilterTypes}>
-                                <MetadataFilterConfigurationList provider={metadata} />
+                                {(filters) => <MetadataFilterConfigurationList provider={metadata} filters={filters} />}
                             </MetadataFilters>
                         </>
                     }

diff --git a/ui/src/app/metadata/view/MetadataVersion.js b/ui/src/app/metadata/view/MetadataVersion.js
@@ -94,7 +94,7 @@ export function MetadataVersion() {
                                             </div>
                                         </div>
                                         <MetadataFilters providerId={metadata.resourceId} types={MetadataFilterTypes} filters={metadata.metadataFilters}>
-                                            <MetadataFilterConfigurationList provider={metadata} editable={false} />
+                                            {(filters) => <MetadataFilterConfigurationList provider={metadata} filters={filters} editable={false} />}
                                         </MetadataFilters>
                                     </>
                                 }