Fixed flicker in search

TIER · Aug 31, 2022 · 12b9d1e · 12b9d1e
1 parent 4b3f09b
commit 12b9d1e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 30 deletions.
diff --git 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
@@ -1,40 +1,50 @@
 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';
 
 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) => (
-            <Fragment key={item}>
-                {index !== 0 && <Menu.Divider />}
-                <Menu.Header>
-                    <MenuItem key={index}
-                        option={{category: item, propertyName: item, isCategory: true}}
-                        position={index}>
-                            {item} - Add all
-                    </MenuItem>
-                </Menu.Header>
-                {grouped[item].map((i) => {
-                    const item =
-                        <MenuItem key={index} option={i} position={index} disabled={ properties.some((p) => p.propertyName === i.propertyName) }>
-                            <Highlighter search={state.text}>
-                                {`- ${i.propertyName}`}
-                            </Highlighter>
-                        </MenuItem>;
-                    index += 1;
-                    return item;
-                })}
-            </Fragment>
-        ));
+        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 <Fragment></Fragment>
+            }
+            return (
+                <Fragment key={item}>
+                    {index !== 0 && <Menu.Divider />}
+                    <Menu.Header>
+                        <MenuItem key={index}
+                            option={{category: item, propertyName: item, isCategory: true}}
+                            position={index}
+                            className="fw-bold">
+                                {item} - Add all
+                        </MenuItem>
+                    </Menu.Header>
+                    {grouped[item].map((i) => {
+                        if (!properties.some((p) => p.propertyName === i.propertyName)) {
+                            index = index + 1;
+                            const item =
+                                <MenuItem key={index} option={i} position={index}>
+                                    <Highlighter search={state.text}>
+                                        {`- ${i.propertyName}`}
+                                    </Highlighter>
+                                </MenuItem>;
+                            return item;
+                        }
+                        return null;
+                    })}
+                </Fragment>
+            );
+        });
 
         return <Menu {...menuProps}>{items}</Menu>;
     }, [properties]);
@@ -66,14 +76,15 @@ export function PropertySelector ({ properties, options, onAddProperties }) {
                 <Typeahead
                     id='property-selector'
                     onChange={selected => 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 }) => (
                             <ToggleButton isOpen={isMenuShown} onClick={e => toggleMenu()}>
                                 <span className="sr-only">Options</span>