From c3eb66913ec76ab110515d87f532501b43c8006b Mon Sep 17 00:00:00 2001
From: Maksim Eltyshev <meltyshev@gmail.com>
Date: Wed, 17 Aug 2022 00:53:08 +0200
Subject: [PATCH] feat: Add search by users, members and labels

---
 .../BoardMembershipsStep.jsx                  | 58 +++++++++++++-----
 .../BoardMembershipsStep.module.scss          | 18 +++++-
 .../BoardMembershipsStep/Item.module.scss     |  1 +
 .../src/components/LabelsStep/LabelsStep.jsx  | 60 ++++++++++++++-----
 .../LabelsStep/LabelsStep.module.scss         | 20 +++++++
 .../Memberships/AddPopup/AddPopup.jsx         | 56 +++++++++++++----
 .../Memberships/AddPopup/AddPopup.module.scss | 22 +++++--
 .../Memberships/AddPopup/UserItem.module.scss |  1 +
 client/src/locales/en/core.js                 |  3 +
 client/src/locales/ru/core.js                 |  3 +
 10 files changed, 195 insertions(+), 47 deletions(-)

diff --git a/client/src/components/BoardMembershipsStep/BoardMembershipsStep.jsx b/client/src/components/BoardMembershipsStep/BoardMembershipsStep.jsx
index 86fa6948..af181d73 100755
--- a/client/src/components/BoardMembershipsStep/BoardMembershipsStep.jsx
+++ b/client/src/components/BoardMembershipsStep/BoardMembershipsStep.jsx
@@ -1,9 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Menu } from 'semantic-ui-react';
-import { Popup } from '../../lib/custom-ui';
+import { Input, Popup } from '../../lib/custom-ui';
 
+import { useField } from '../../hooks';
 import Item from './Item';
 
 import styles from './BoardMembershipsStep.module.scss';
@@ -11,6 +12,21 @@ import styles from './BoardMembershipsStep.module.scss';
 const BoardMembershipsStep = React.memo(
   ({ items, currentUserIds, title, onUserSelect, onUserDeselect, onBack }) => {
     const [t] = useTranslation();
+    const [searchValue, handleSearchFieldChange] = useField('');
+    const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+
+    const filteredItems = useMemo(
+      () =>
+        items.filter(
+          ({ user }) =>
+            user.email.includes(search) ||
+            user.name.toLowerCase().includes(search) ||
+            (user.username && user.username.includes(search)),
+        ),
+      [items, search],
+    );
+
+    const searchField = useRef(null);
 
     const handleUserSelect = useCallback(
       (id) => {
@@ -26,22 +42,36 @@ const BoardMembershipsStep = React.memo(
       [onUserDeselect],
     );
 
+    useEffect(() => {
+      searchField.current.focus();
+    }, []);
+
     return (
       <>
         <Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
         <Popup.Content>
-          <Menu secondary vertical className={styles.menu}>
-            {items.map((item) => (
-              <Item
-                key={item.id}
-                isPersisted={item.isPersisted}
-                isActive={currentUserIds.includes(item.user.id)}
-                user={item.user}
-                onUserSelect={() => handleUserSelect(item.user.id)}
-                onUserDeselect={() => handleUserDeselect(item.user.id)}
-              />
-            ))}
-          </Menu>
+          <Input
+            fluid
+            ref={searchField}
+            value={searchValue}
+            placeholder={t('common.searchMembers')}
+            icon="search"
+            onChange={handleSearchFieldChange}
+          />
+          {filteredItems.length > 0 && (
+            <Menu secondary vertical className={styles.menu}>
+              {filteredItems.map((item) => (
+                <Item
+                  key={item.id}
+                  isPersisted={item.isPersisted}
+                  isActive={currentUserIds.includes(item.user.id)}
+                  user={item.user}
+                  onUserSelect={() => handleUserSelect(item.user.id)}
+                  onUserDeselect={() => handleUserDeselect(item.user.id)}
+                />
+              ))}
+            </Menu>
+          )}
         </Popup.Content>
       </>
     );
diff --git a/client/src/components/BoardMembershipsStep/BoardMembershipsStep.module.scss b/client/src/components/BoardMembershipsStep/BoardMembershipsStep.module.scss
index 3b0b7dd1..5617c6f8 100644
--- a/client/src/components/BoardMembershipsStep/BoardMembershipsStep.module.scss
+++ b/client/src/components/BoardMembershipsStep/BoardMembershipsStep.module.scss
@@ -1,6 +1,22 @@
 :global(#app) {
   .menu {
-    margin: -7px auto -5px;
+    margin: 8px auto 0;
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
     width: 100%;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
   }
 }
diff --git a/client/src/components/BoardMembershipsStep/Item.module.scss b/client/src/components/BoardMembershipsStep/Item.module.scss
index d59f4110..adb6e345 100644
--- a/client/src/components/BoardMembershipsStep/Item.module.scss
+++ b/client/src/components/BoardMembershipsStep/Item.module.scss
@@ -2,6 +2,7 @@
   .menuItem {
     display: block;
     margin: 0;
+    overflow: hidden;
     padding: 4px;
   }
 
diff --git a/client/src/components/LabelsStep/LabelsStep.jsx b/client/src/components/LabelsStep/LabelsStep.jsx
index 693c7742..ad39e3c9 100755
--- a/client/src/components/LabelsStep/LabelsStep.jsx
+++ b/client/src/components/LabelsStep/LabelsStep.jsx
@@ -1,11 +1,11 @@
 import pick from 'lodash/pick';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
-import { Popup } from '../../lib/custom-ui';
+import { Input, Popup } from '../../lib/custom-ui';
 
-import { useSteps } from '../../hooks';
+import { useField, useSteps } from '../../hooks';
 import AddStep from './AddStep';
 import EditStep from './EditStep';
 import Item from './Item';
@@ -21,6 +21,20 @@ const LabelsStep = React.memo(
   ({ items, currentIds, title, onSelect, onDeselect, onCreate, onUpdate, onDelete, onBack }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
+    const [searchValue, handleSearchFieldChange] = useField('');
+    const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+
+    const filteredItems = useMemo(
+      () =>
+        items.filter(
+          (label) =>
+            (label.name && label.name.toLowerCase().includes(search)) ||
+            label.color.includes(search),
+        ),
+      [items, search],
+    );
+
+    const searchField = useRef(null);
 
     const handleAddClick = useCallback(() => {
       openStep(StepTypes.ADD);
@@ -63,6 +77,10 @@ const LabelsStep = React.memo(
       [onDelete],
     );
 
+    useEffect(() => {
+      searchField.current.focus();
+    }, []);
+
     if (step) {
       switch (step.type) {
         case StepTypes.ADD:
@@ -93,18 +111,30 @@ const LabelsStep = React.memo(
       <>
         <Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
         <Popup.Content>
-          {items.map((item) => (
-            <Item
-              key={item.id}
-              name={item.name}
-              color={item.color}
-              isPersisted={item.isPersisted}
-              isActive={currentIds.includes(item.id)}
-              onSelect={() => handleSelect(item.id)}
-              onDeselect={() => handleDeselect(item.id)}
-              onEdit={() => handleEdit(item.id)}
-            />
-          ))}
+          <Input
+            fluid
+            ref={searchField}
+            value={searchValue}
+            placeholder={t('common.searchLabels')}
+            icon="search"
+            onChange={handleSearchFieldChange}
+          />
+          {filteredItems.length > 0 && (
+            <div className={styles.items}>
+              {filteredItems.map((item) => (
+                <Item
+                  key={item.id}
+                  name={item.name}
+                  color={item.color}
+                  isPersisted={item.isPersisted}
+                  isActive={currentIds.includes(item.id)}
+                  onSelect={() => handleSelect(item.id)}
+                  onDeselect={() => handleDeselect(item.id)}
+                  onEdit={() => handleEdit(item.id)}
+                />
+              ))}
+            </div>
+          )}
           <Button
             fluid
             content={t('action.createNewLabel')}
diff --git a/client/src/components/LabelsStep/LabelsStep.module.scss b/client/src/components/LabelsStep/LabelsStep.module.scss
index 0fadc31c..6e75287c 100644
--- a/client/src/components/LabelsStep/LabelsStep.module.scss
+++ b/client/src/components/LabelsStep/LabelsStep.module.scss
@@ -14,4 +14,24 @@
       background: #e9e9e9;
     }
   }
+
+  .items {
+    margin-top: 8px;
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
+  }
 }
diff --git a/client/src/components/Memberships/AddPopup/AddPopup.jsx b/client/src/components/Memberships/AddPopup/AddPopup.jsx
index e4f40882..207c452e 100755
--- a/client/src/components/Memberships/AddPopup/AddPopup.jsx
+++ b/client/src/components/Memberships/AddPopup/AddPopup.jsx
@@ -1,15 +1,31 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { withPopup } from '../../../lib/popup';
-import { Popup } from '../../../lib/custom-ui';
+import { Input, Popup } from '../../../lib/custom-ui';
 
+import { useField } from '../../../hooks';
 import UserItem from './UserItem';
 
 import styles from './AddPopup.module.scss';
 
 const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose }) => {
   const [t] = useTranslation();
+  const [searchValue, handleSearchFieldChange] = useField('');
+  const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+
+  const filteredUsers = useMemo(
+    () =>
+      users.filter(
+        (user) =>
+          user.email.includes(search) ||
+          user.name.toLowerCase().includes(search) ||
+          (user.username && user.username.includes(search)),
+      ),
+    [users, search],
+  );
+
+  const searchField = useRef(null);
 
   const handleUserSelect = useCallback(
     (id) => {
@@ -22,6 +38,10 @@ const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose })
     [onCreate, onClose],
   );
 
+  useEffect(() => {
+    searchField.current.focus();
+  }, []);
+
   return (
     <>
       <Popup.Header>
@@ -30,17 +50,27 @@ const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose })
         })}
       </Popup.Header>
       <Popup.Content>
-        <div className={styles.menu}>
-          {users.map((user) => (
-            <UserItem
-              key={user.id}
-              name={user.name}
-              avatarUrl={user.avatarUrl}
-              isActive={currentUserIds.includes(user.id)}
-              onSelect={() => handleUserSelect(user.id)}
-            />
-          ))}
-        </div>
+        <Input
+          fluid
+          ref={searchField}
+          value={searchValue}
+          placeholder={t('common.searchUsers')}
+          icon="search"
+          onChange={handleSearchFieldChange}
+        />
+        {filteredUsers.length > 0 && (
+          <div className={styles.users}>
+            {filteredUsers.map((user) => (
+              <UserItem
+                key={user.id}
+                name={user.name}
+                avatarUrl={user.avatarUrl}
+                isActive={currentUserIds.includes(user.id)}
+                onSelect={() => handleUserSelect(user.id)}
+              />
+            ))}
+          </div>
+        )}
       </Popup.Content>
     </>
   );
diff --git a/client/src/components/Memberships/AddPopup/AddPopup.module.scss b/client/src/components/Memberships/AddPopup/AddPopup.module.scss
index 957cf084..2dda3892 100644
--- a/client/src/components/Memberships/AddPopup/AddPopup.module.scss
+++ b/client/src/components/Memberships/AddPopup/AddPopup.module.scss
@@ -1,7 +1,21 @@
 :global(#app) {
-  .menu {
-    border: none;
-    margin: -7px auto -5px;
-    width: 100%;
+  .users {
+    margin-top: 8px;
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
   }
 }
diff --git a/client/src/components/Memberships/AddPopup/UserItem.module.scss b/client/src/components/Memberships/AddPopup/UserItem.module.scss
index 53bb44d7..e3151bf5 100644
--- a/client/src/components/Memberships/AddPopup/UserItem.module.scss
+++ b/client/src/components/Memberships/AddPopup/UserItem.module.scss
@@ -6,6 +6,7 @@
     display: block;
     margin: 0;
     outline: 0;
+    overflow: hidden;
     padding: 4px;
     text-align: left;
     width: 100%;
diff --git a/client/src/locales/en/core.js b/client/src/locales/en/core.js
index a32ffcae..e282de6d 100644
--- a/client/src/locales/en/core.js
+++ b/client/src/locales/en/core.js
@@ -121,6 +121,9 @@ export default {
       projectNotFound_title: 'Project Not Found',
       removeManager_title: 'Remove Manager',
       removeMember_title: 'Remove Member',
+      searchLabels: 'Search labels...',
+      searchMembers: 'Search members...',
+      searchUsers: 'Search users...',
       seconds: 'Seconds',
       selectBoard: 'Select board',
       selectList: 'Select list',
diff --git a/client/src/locales/ru/core.js b/client/src/locales/ru/core.js
index 39c69fdb..bdca8ba2 100644
--- a/client/src/locales/ru/core.js
+++ b/client/src/locales/ru/core.js
@@ -116,6 +116,9 @@ export default {
       projectActions: 'Действия с проектом',
       projectNotFound: 'Проект не найден',
       removeMember: 'Удаление участника',
+      searchLabels: 'Поиск меток...',
+      searchMembers: 'Поиск участников...',
+      searchUsers: 'Поиск пользователей...',
       seconds: 'Секунды',
       selectBoard: 'Выберите доску',
       selectList: 'Выберите список',