Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-18 20:59:44 +02:00
Code Issues Releases Activity

feat: Add search by users, members and labels

Browse source
This commit is contained in:
Maksim Eltyshev 2022-08-17 00:53:08 +02:00
parent 45d2eede58
commit c3eb66913e
10 changed files with 195 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

36
client/src/components/BoardMembershipsStep/BoardMembershipsStep.jsx
View file

@ -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,12 +42,25 @@ const BoardMembershipsStep = React.memo(
[onUserDeselect],
);
useEffect(() => {
searchField.current.focus();
}, []);
return (
<>
<Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
<Popup.Content>
<Input
fluid
ref={searchField}
value={searchValue}
placeholder={t('common.searchMembers')}
icon="search"
onChange={handleSearchFieldChange}
/>
{filteredItems.length > 0 && (
<Menu secondary vertical className={styles.menu}>
{items.map((item) => (
{filteredItems.map((item) => (
<Item
key={item.id}
isPersisted={item.isPersisted}
@ -42,6 +71,7 @@ const BoardMembershipsStep = React.memo(
/>
))}
</Menu>
)}
</Popup.Content>
</>
);

18
client/src/components/BoardMembershipsStep/BoardMembershipsStep.module.scss
View file

@ -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;
}
}
}

1
client/src/components/BoardMembershipsStep/Item.module.scss
View file

@ -2,6 +2,7 @@
.menuItem {
display: block;
margin: 0;
overflow: hidden;
padding: 4px;
}

38
client/src/components/LabelsStep/LabelsStep.jsx
View file

@ -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,7 +111,17 @@ const LabelsStep = React.memo(
<>
<Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
<Popup.Content>
{items.map((item) => (
<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}
@ -105,6 +133,8 @@ const LabelsStep = React.memo(
onEdit={() => handleEdit(item.id)}
/>
))}
</div>
)}
<Button
fluid
content={t('action.createNewLabel')}

20
client/src/components/LabelsStep/LabelsStep.module.scss
View file

@ -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;
}
}
}

38
client/src/components/Memberships/AddPopup/AddPopup.jsx
View file

@ -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,8 +50,17 @@ const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose })
})}
</Popup.Header>
<Popup.Content>
<div className={styles.menu}>
{users.map((user) => (
<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}
@ -41,6 +70,7 @@ const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose })
/>
))}
</div>
)}
</Popup.Content>
</>
);

22
client/src/components/Memberships/AddPopup/AddPopup.module.scss
View file

@ -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;
}
}
}

1
client/src/components/Memberships/AddPopup/UserItem.module.scss
View file

@ -6,6 +6,7 @@
display: block;
margin: 0;
outline: 0;
overflow: hidden;
padding: 4px;
text-align: left;
width: 100%;

3
client/src/locales/en/core.js
View file

@ -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',

3
client/src/locales/ru/core.js
View file

@ -116,6 +116,9 @@ export default {
projectActions: 'Действия с проектом',
projectNotFound: 'Проект не найден',
removeMember: 'Удаление участника',
searchLabels: 'Поиск меток...',
searchMembers: 'Поиск участников...',
searchUsers: 'Поиск пользователей...',
seconds: 'Секунды',
selectBoard: 'Выберите доску',
selectList: 'Выберите список',