diff --git a/ui/src/app/admin/component/ConfigurationForm.js b/ui/src/app/admin/component/ConfigurationForm.js index 87a8739dc..cc13aa791 100644 --- a/ui/src/app/admin/component/ConfigurationForm.js +++ b/ui/src/app/admin/component/ConfigurationForm.js @@ -29,8 +29,11 @@ export function ConfigurationForm({ configuration = {}, loading, onSave, onCance const properties = useProperties(); const addProperties = (props) => { + const parsed = props.reduce((coll, prop, idx) => { if (prop.isCategory) { + console.log(properties.filter(p => p.category === prop.category)) + return [...coll, ...properties.filter(p => p.category === prop.category)]; } else { return [...coll, prop]; diff --git a/ui/src/app/admin/component/PropertySelector.js b/ui/src/app/admin/component/PropertySelector.js index 976e0d220..f0016e42e 100644 --- a/ui/src/app/admin/component/PropertySelector.js +++ b/ui/src/app/admin/component/PropertySelector.js @@ -1,5 +1,5 @@ import React, { Fragment, useCallback } from 'react'; -import { groupBy } from 'lodash'; +import { groupBy, orderBy } from 'lodash'; import { Highlighter, Menu, MenuItem, Token, Typeahead } from 'react-bootstrap-typeahead'; import Button from 'react-bootstrap/Button'; @@ -7,34 +7,44 @@ import { ToggleButton } from '../../form/component/ToggleButton'; export function PropertySelector ({ properties, options, onAddProperties }) { - // React.useEffect(() => console.log(properties), [properties]); - const menu = useCallback((results, menuProps, state) => { let index = 0; - const mapped = results.map(p => !p.category || p.category === '?' ? { ...p, category: 'Misc' } : p); - const grouped = groupBy(mapped, 'category'); - const items = Object.keys(grouped).sort().map((item) => ( - - {index !== 0 && } - - - {item} - Add all - - - {grouped[item].map((i) => { - const item = - p.propertyName === i.propertyName) }> - - {`- ${i.propertyName}`} - - ; - index += 1; - return item; - })} - - )); + const mapped = results.map((p, idx) => !p.category || p.category === '?' ? { ...p, category: 'Misc' } : p); + const ordered = orderBy(mapped, 'category'); + const grouped = groupBy(ordered, 'category'); + const items = Object.keys(grouped).sort().map((item) => { + index = index + 1; + const used = grouped[item].filter((i) => properties.some((p) => p.propertyName === i.propertyName)); + if (used.length >= grouped[item].length) { + return + } + return ( + + {index !== 0 && } + + + {item} - Add all + + + {grouped[item].map((i) => { + if (!properties.some((p) => p.propertyName === i.propertyName)) { + index = index + 1; + const item = + + + {`- ${i.propertyName}`} + + ; + return item; + } + return null; + })} + + ); + }); return {items}; }, [properties]); @@ -66,14 +76,15 @@ export function PropertySelector ({ properties, options, onAddProperties }) { select(selected)} - options={[...options]} + options={options} selected={selected} labelKey={option => `${option.propertyName}`} filterBy={['propertyName', 'category', 'displayType']} renderMenu={ menu } + paginate={false} multiple={ true } - renderToken={ token } - > + maxResults={options.length} + renderToken={ token }> {({ isMenuShown, toggleMenu }) => ( toggleMenu()}> Options