feat: Filter cards by keyword with advanced capabilities (#713)

Closes #706

client/src/components/BoardActions/BoardActions.jsx

@@ -13,6 +13,7 @@ const BoardActions = React.memo(
     labels,
     filterUsers,
     filterLabels,
+    filterText,
     allUsers,
     canEdit,
     canEditMemberships,
@@ -27,6 +28,7 @@ const BoardActions = React.memo(
     onLabelUpdate,
     onLabelMove,
     onLabelDelete,
+    onTextFilterUpdate,
   }) => {
     return (
       <div className={styles.wrapper}>
@@ -46,6 +48,7 @@ const BoardActions = React.memo(
             <Filters
               users={filterUsers}
               labels={filterLabels}
+              filterText={filterText}
               allBoardMemberships={memberships}
               allLabels={labels}
               canEdit={canEdit}
@@ -57,6 +60,7 @@ const BoardActions = React.memo(
               onLabelUpdate={onLabelUpdate}
               onLabelMove={onLabelMove}
               onLabelDelete={onLabelDelete}
+              onTextFilterUpdate={onTextFilterUpdate}
             />
           </div>
         </div>
@@ -71,6 +75,7 @@ BoardActions.propTypes = {
   labels: PropTypes.array.isRequired,
   filterUsers: PropTypes.array.isRequired,
   filterLabels: PropTypes.array.isRequired,
+  filterText: PropTypes.string.isRequired,
   allUsers: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   canEdit: PropTypes.bool.isRequired,
@@ -86,6 +91,7 @@ BoardActions.propTypes = {
   onLabelUpdate: PropTypes.func.isRequired,
   onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
+  onTextFilterUpdate: PropTypes.func.isRequired,
 };
 
 export default BoardActions;

client/src/components/BoardActions/Filters.jsx

@@ -1,7 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import { Icon } from 'semantic-ui-react';
 import { usePopup } from '../../lib/popup';
+import { Input } from '../../lib/custom-ui';
 
 import User from '../User';
 import Label from '../Label';
@@ -14,6 +17,7 @@ const Filters = React.memo(
   ({
     users,
     labels,
+    filterText,
     allBoardMemberships,
     allLabels,
     canEdit,
@@ -25,8 +29,17 @@ const Filters = React.memo(
     onLabelUpdate,
     onLabelMove,
     onLabelDelete,
+    onTextFilterUpdate,
   }) => {
     const [t] = useTranslation();
+    const [isSearchFocused, setIsSearchFocused] = useState(false);
+
+    const searchFieldRef = useRef(null);
+
+    const cancelSearch = useCallback(() => {
+      onTextFilterUpdate('');
+      searchFieldRef.current.blur();
+    }, [onTextFilterUpdate]);
 
     const handleRemoveUserClick = useCallback(
       (id) => {
@@ -42,9 +55,39 @@ const Filters = React.memo(
       [onLabelRemove],
     );
 
+    const handleSearchChange = useCallback(
+      (_, { value }) => {
+        onTextFilterUpdate(value);
+      },
+      [onTextFilterUpdate],
+    );
+
+    const handleSearchFocus = useCallback(() => {
+      setIsSearchFocused(true);
+    }, []);
+
+    const handleSearchKeyDown = useCallback(
+      (event) => {
+        if (event.key === 'Escape') {
+          cancelSearch();
+        }
+      },
+      [cancelSearch],
+    );
+
+    const handleSearchBlur = useCallback(() => {
+      setIsSearchFocused(false);
+    }, []);
+
+    const handleCancelSearchClick = useCallback(() => {
+      cancelSearch();
+    }, [cancelSearch]);
+
     const BoardMembershipsPopup = usePopup(BoardMembershipsStep);
     const LabelsPopup = usePopup(LabelsStep);
 
+    const isSearchActive = filterText || isSearchFocused;
+
     return (
       <>
         <span className={styles.filter}>
@@ -100,6 +143,25 @@ const Filters = React.memo(
             </span>
           ))}
         </span>
+        <span className={styles.filter}>
+          <Input
+            ref={searchFieldRef}
+            value={filterText}
+            placeholder={t('common.searchCards')}
+            icon={
+              isSearchActive ? (
+                <Icon link name="cancel" onClick={handleCancelSearchClick} />
+              ) : (
+                'search'
+              )
+            }
+            className={classNames(styles.search, !isSearchActive && styles.searchInactive)}
+            onFocus={handleSearchFocus}
+            onKeyDown={handleSearchKeyDown}
+            onChange={handleSearchChange}
+            onBlur={handleSearchBlur}
+          />
+        </span>
       </>
     );
   },
@@ -109,6 +171,7 @@ Filters.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   users: PropTypes.array.isRequired,
   labels: PropTypes.array.isRequired,
+  filterText: PropTypes.string.isRequired,
   allBoardMemberships: PropTypes.array.isRequired,
   allLabels: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
@@ -121,6 +184,7 @@ Filters.propTypes = {
   onLabelUpdate: PropTypes.func.isRequired,
   onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
+  onTextFilterUpdate: PropTypes.func.isRequired,
 };
 
 export default Filters;

client/src/components/BoardActions/Filters.module.scss

@@ -43,4 +43,32 @@
     line-height: 20px;
     padding: 2px 12px;
   }
+
+  .search {
+    height: 30px;
+    margin: 0 12px;
+    transition: width 0.2s ease;
+    width: 280px;
+
+    input {
+      font-size: 13px;
+    }
+  }
+
+  .searchInactive {
+    color: #fff;
+    height: 24px;
+    width: 220px;
+
+    input {
+      background: rgba(0, 0, 0, 0.24);
+      border: none;
+      color: #fff !important;
+      font-size: 12px;
+
+      &::placeholder {
+        color: #fff;
+      }
+    }
+  }
 }