fix: pipeline list filtering

AdamNowotny · Aug 24, 2024 · eb07dbf · eb07dbf
1 parent 2e896ff
commit eb07dbf
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/src/components/filterQuery/filterQuery.tsx b/src/components/filterQuery/filterQuery.tsx
@@ -3,20 +3,27 @@ import './filterQuery.css';
 
 export default ({ onUpdate }: { onUpdate: (string) => void }) => {
     const [query, setQuery] = useState('');
-    const handleKeyUp = e => {
-        const value = e.key === 'Escape' ? '' : e.target.value;
+    const handleKeyDown = e => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            setQuery('');
+        }
+    };
+    const handleChange = e => {
+        const value = e.target.value;
         setQuery(value);
         onUpdate(value);
     };
 
     return (
         <div className="filter-query">
             <input
-                defaultValue={query}
+                value={query}
                 className="search-query form-control"
                 type="text"
                 placeholder="Search..."
-                onKeyUp={handleKeyUp}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
             />
             {query && (
                 <i

diff --git a/src/components/pipelineList/pipelineList.tsx b/src/components/pipelineList/pipelineList.tsx
@@ -18,17 +18,15 @@ const GroupPanel = ({
 }) => {
     // selected
     // checkAll
-    // filter
     // highlight
     // TODO: save
-    const totalCount = items.length;
-    const visibleCount = items.length;
     const filterFunc = (item: CIPipeline) => {
         return filter ? item.name.toLowerCase().includes(filter.toLowerCase()) : true;
     };
-    const handleCheck = e => {
-        console.log('handleCheck', e);
+    const handleCheck = (id: string, checked: boolean) => {
+        console.log('handleCheck', id, checked);
     };
+    const filteredItems = items.filter(filterFunc);
     return (
         <Panel>
             <Panel.Heading>
@@ -38,19 +36,21 @@ const GroupPanel = ({
                     className="filter-count badge"
                     title="Visible / All projects in group"
                 >
-                    {filter && <span>{visibleCount} /</span>}
-                    {totalCount}
+                    {filter && <span>{filteredItems.length} /</span>}
+                    {items.length}
                 </span>
             </Panel.Heading>
             <Panel.Body>
-                {items.filter(filterFunc).map((pipeline, index) => {
+                {filteredItems.map(pipeline => {
                     const isSelected = selectedItems.includes(pipeline.id);
                     return (
                         <label key={pipeline.id} className="checkbox">
                             <input
                                 type="checkbox"
                                 defaultChecked={isSelected}
-                                onChange={handleCheck}
+                                onChange={e => {
+                                    handleCheck(pipeline.id, e.target.checked);
+                                }}
                             />
                             <span
                                 className={`project-name ${