diff --git a/ui/src/app/admin/component/PropertySelector.js b/ui/src/app/admin/component/PropertySelector.js index 375b75747..9f219e403 100644 --- a/ui/src/app/admin/component/PropertySelector.js +++ b/ui/src/app/admin/component/PropertySelector.js @@ -1,11 +1,12 @@ import React, { Fragment, useCallback } from 'react'; -import { groupBy, orderBy } from 'lodash'; +import { groupBy, includes, orderBy } from 'lodash'; import { Highlighter, Menu, MenuItem, Token, Typeahead } from 'react-bootstrap-typeahead'; import Button from 'react-bootstrap/Button'; import { ToggleButton } from '../../form/component/ToggleButton'; export function PropertySelector ({ properties, options, onAddProperties }) { + const [selected, setSelected] = React.useState([]); const menu = useCallback((results, menuProps, state) => { let index = 0; @@ -14,17 +15,20 @@ export function PropertySelector ({ properties, options, onAddProperties }) { const items = Object.keys(grouped).sort().map((item, idx) => { index = index + 1; const used = grouped[item].filter((i) => properties.some((p) => p.propertyName === i.propertyName)); - if (used.length >= grouped[item].length) { + if (used.length >= grouped[item].length || includes(selected, item)) { return } + const cat = {category: item, propertyName: item, isCategory: true}; + const catSelected = selected.some(s => s.propertyName === item); return ( {index !== 0 && } + className="fw-bold" + disabled={catSelected}> {item} - Add all @@ -32,7 +36,7 @@ export function PropertySelector ({ properties, options, onAddProperties }) { if (!properties.some((p) => p.propertyName === i.propertyName)) { index = index + 1; const item = - + s.propertyName === i.propertyName)}> {`- ${i.propertyName}`} @@ -46,7 +50,7 @@ export function PropertySelector ({ properties, options, onAddProperties }) { }); return {items}; - }, [properties]); + }, [properties, selected]); const token = (option, { onRemove }, index) => ( { onAddProperties(s); setSelected([]); - } + }; return (