Project managers, board members, auto-update after reconnection, refactoring

client/src/components/BoardKanban/BoardKanban.jsx

@@ -8,7 +8,6 @@ import DroppableTypes from '../../constants/DroppableTypes';
 import ListContainer from '../../containers/ListContainer';
 import CardModalContainer from '../../containers/CardModalContainer';
 import ListAdd from './ListAdd';
-import Filter from './Filter';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
 
 import styles from './BoardKanban.module.scss';
@@ -16,36 +15,19 @@ import styles from './BoardKanban.module.scss';
 const parseDndId = (dndId) => dndId.split(':')[1];
 
 const BoardKanban = React.memo(
-  ({
-    listIds,
-    filterUsers,
-    filterLabels,
-    allProjectMemberships,
-    allLabels,
-    isCardModalOpened,
-    onListCreate,
-    onListMove,
-    onCardMove,
-    onUserToFilterAdd,
-    onUserFromFilterRemove,
-    onLabelToFilterAdd,
-    onLabelFromFilterRemove,
-    onLabelCreate,
-    onLabelUpdate,
-    onLabelDelete,
-  }) => {
+  ({ listIds, isCardModalOpened, canEdit, onListCreate, onListMove, onCardMove }) => {
     const [t] = useTranslation();
-    const [isAddListOpened, setIsAddListOpened] = useState(false);
+    const [isListAddOpened, setIsListAddOpened] = useState(false);
 
     const wrapper = useRef(null);
     const prevPosition = useRef(null);
 
     const handleAddListClick = useCallback(() => {
-      setIsAddListOpened(true);
+      setIsListAddOpened(true);
     }, []);
 
     const handleAddListClose = useCallback(() => {
-      setIsAddListOpened(false);
+      setIsListAddOpened(false);
     }, []);
 
     const handleDragStart = useCallback(() => {
@@ -119,10 +101,10 @@ const BoardKanban = React.memo(
     }, []);
 
     useEffect(() => {
-      if (isAddListOpened) {
+      if (isListAddOpened) {
         window.scroll(document.body.scrollWidth, 0);
       }
-    }, [listIds, isAddListOpened]);
+    }, [listIds, isListAddOpened]);
 
     useEffect(() => {
       window.addEventListener('mouseup', handleWindowMouseUp);
@@ -138,19 +120,6 @@ const BoardKanban = React.memo(
       <>
         {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         <div ref={wrapper} className={styles.wrapper} onMouseDown={handleMouseDown}>
-          <Filter
-            users={filterUsers}
-            labels={filterLabels}
-            allProjectMemberships={allProjectMemberships}
-            allLabels={allLabels}
-            onUserAdd={onUserToFilterAdd}
-            onUserRemove={onUserFromFilterRemove}
-            onLabelAdd={onLabelToFilterAdd}
-            onLabelRemove={onLabelFromFilterRemove}
-            onLabelCreate={onLabelCreate}
-            onLabelUpdate={onLabelUpdate}
-            onLabelDelete={onLabelDelete}
-          />
           <div>
             <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
               <Droppable droppableId="board" type={DroppableTypes.LIST} direction="horizontal">
@@ -165,26 +134,26 @@ const BoardKanban = React.memo(
                       <ListContainer key={listId} id={listId} index={index} />
                     ))}
                     {placeholder}
-                    <div data-drag-scroller className={styles.list}>
-                      {isAddListOpened ? (
-                        <ListAdd
-                          isOpened={isAddListOpened}
-                          onCreate={onListCreate}
-                          onClose={handleAddListClose}
-                        />
-                      ) : (
-                        <button
-                          type="button"
-                          className={styles.addListButton}
-                          onClick={handleAddListClick}
-                        >
-                          <PlusMathIcon className={styles.addListButtonIcon} />
-                          <span className={styles.addListButtonText}>
-                            {listIds.length > 0 ? t('action.addAnotherList') : t('action.addList')}
-                          </span>
-                        </button>
-                      )}
-                    </div>
+                    {canEdit && (
+                      <div data-drag-scroller className={styles.list}>
+                        {isListAddOpened ? (
+                          <ListAdd onCreate={onListCreate} onClose={handleAddListClose} />
+                        ) : (
+                          <button
+                            type="button"
+                            className={styles.addListButton}
+                            onClick={handleAddListClick}
+                          >
+                            <PlusMathIcon className={styles.addListButtonIcon} />
+                            <span className={styles.addListButtonText}>
+                              {listIds.length > 0
+                                ? t('action.addAnotherList')
+                                : t('action.addList')}
+                            </span>
+                          </button>
+                        )}
+                      </div>
+                    )}
                   </div>
                 )}
               </Droppable>
@@ -198,24 +167,12 @@ const BoardKanban = React.memo(
 );
 
 BoardKanban.propTypes = {
-  /* eslint-disable react/forbid-prop-types */
-  listIds: PropTypes.array.isRequired,
-  filterUsers: PropTypes.array.isRequired,
-  filterLabels: PropTypes.array.isRequired,
-  allProjectMemberships: PropTypes.array.isRequired,
-  allLabels: PropTypes.array.isRequired,
-  /* eslint-enable react/forbid-prop-types */
+  listIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   isCardModalOpened: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   onListCreate: PropTypes.func.isRequired,
   onListMove: PropTypes.func.isRequired,
   onCardMove: PropTypes.func.isRequired,
-  onUserToFilterAdd: PropTypes.func.isRequired,
-  onUserFromFilterRemove: PropTypes.func.isRequired,
-  onLabelToFilterAdd: PropTypes.func.isRequired,
-  onLabelFromFilterRemove: PropTypes.func.isRequired,
-  onLabelCreate: PropTypes.func.isRequired,
-  onLabelUpdate: PropTypes.func.isRequired,
-  onLabelDelete: PropTypes.func.isRequired,
 };
 
 export default BoardKanban;

client/src/components/BoardKanban/BoardKanban.module.scss

@@ -38,7 +38,7 @@
   }
 
   .list {
-    margin: 0 20px 0 4px;
+    margin-right: 20px;
     width: 272px;
   }
 
@@ -48,6 +48,16 @@
     min-width: 100%;
   }
 
+  .panel {
+    align-items: center;
+    display: flex;
+    margin-bottom: 20px;
+  }
+
+  .panelItem {
+    margin-right: 20px;
+  }
+
   .wrapper {
     margin: 0 20px;
   }

client/src/components/BoardKanban/Filter.jsx

@@ -1,120 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-
-import User from '../User';
-import Label from '../Label';
-import ProjectMembershipsPopup from '../ProjectMembershipsPopup';
-import LabelsPopup from '../LabelsPopup';
-
-import styles from './Filter.module.scss';
-
-const Filter = React.memo(
-  ({
-    users,
-    labels,
-    allProjectMemberships,
-    allLabels,
-    onUserAdd,
-    onUserRemove,
-    onLabelAdd,
-    onLabelRemove,
-    onLabelCreate,
-    onLabelUpdate,
-    onLabelDelete,
-  }) => {
-    const [t] = useTranslation();
-
-    const handleRemoveUserClick = useCallback(
-      (id) => {
-        onUserRemove(id);
-      },
-      [onUserRemove],
-    );
-
-    const handleRemoveLabelClick = useCallback(
-      (id) => {
-        onLabelRemove(id);
-      },
-      [onLabelRemove],
-    );
-
-    return (
-      <div className={styles.filters}>
-        <span className={styles.filter}>
-          <ProjectMembershipsPopup
-            items={allProjectMemberships}
-            currentUserIds={users.map((user) => user.id)}
-            title={t('common.filterByMembers', {
-              context: 'title',
-            })}
-            onUserSelect={onUserAdd}
-            onUserDeselect={onUserRemove}
-          >
-            <button type="button" className={styles.filterButton}>
-              <span className={styles.filterTitle}>{`${t('common.members')}:`}</span>
-              {users.length === 0 && <span className={styles.filterLabel}>{t('common.all')}</span>}
-            </button>
-          </ProjectMembershipsPopup>
-          {users.map((user) => (
-            <span key={user.id} className={styles.filterItem}>
-              <User
-                name={user.name}
-                avatarUrl={user.avatarUrl}
-                size="tiny"
-                onClick={() => handleRemoveUserClick(user.id)}
-              />
-            </span>
-          ))}
-        </span>
-        <span className={styles.filter}>
-          <LabelsPopup
-            items={allLabels}
-            currentIds={labels.map((label) => label.id)}
-            title={t('common.filterByLabels', {
-              context: 'title',
-            })}
-            onSelect={onLabelAdd}
-            onDeselect={onLabelRemove}
-            onCreate={onLabelCreate}
-            onUpdate={onLabelUpdate}
-            onDelete={onLabelDelete}
-          >
-            <button type="button" className={styles.filterButton}>
-              <span className={styles.filterTitle}>{`${t('common.labels')}:`}</span>
-              {labels.length === 0 && <span className={styles.filterLabel}>{t('common.all')}</span>}
-            </button>
-          </LabelsPopup>
-          {labels.map((label) => (
-            <span key={label.id} className={styles.filterItem}>
-              <Label
-                name={label.name}
-                color={label.color}
-                size="small"
-                onClick={() => handleRemoveLabelClick(label.id)}
-              />
-            </span>
-          ))}
-        </span>
-      </div>
-    );
-  },
-);
-
-Filter.propTypes = {
-  /* eslint-disable react/forbid-prop-types */
-  users: PropTypes.array.isRequired,
-  labels: PropTypes.array.isRequired,
-  allProjectMemberships: PropTypes.array.isRequired,
-  allLabels: PropTypes.array.isRequired,
-  /* eslint-enable react/forbid-prop-types */
-  onUserAdd: PropTypes.func.isRequired,
-  onUserRemove: PropTypes.func.isRequired,
-  onLabelAdd: PropTypes.func.isRequired,
-  onLabelRemove: PropTypes.func.isRequired,
-  onLabelCreate: PropTypes.func.isRequired,
-  onLabelUpdate: PropTypes.func.isRequired,
-  onLabelDelete: PropTypes.func.isRequired,
-};
-
-export default Filter;

client/src/components/BoardKanban/Filter.module.scss

@@ -1,53 +0,0 @@
-:global(#app) {
-  .filter {
-    display: inline-block;
-    line-height: 0;
-    margin-right: 16px;
-  }
-
-  .filterButton {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    display: inline-block;
-    outline: none;
-    padding: 0;
-  }
-
-  .filterItem {
-    display: inline-block;
-    font-size: 0;
-    line-height: 0;
-    margin-right: 4px;
-    max-width: 190px;
-    vertical-align: top;
-  }
-
-  .filterLabel {
-    background: rgba(0, 0, 0, 0.24);
-    border-radius: 3px;
-    color: #fff;
-    display: inline-block;
-    font-size: 12px;
-    line-height: 20px;
-    padding: 2px 8px;
-
-    &:hover {
-      background: rgba(0, 0, 0, 0.32);
-    }
-  }
-
-  .filterTitle {
-    border-radius: 3px;
-    color: #fff;
-    display: inline-block;
-    font-size: 12px;
-    line-height: 20px;
-    padding: 2px 12px;
-  }
-
-  .filters {
-    line-height: 0;
-    margin-bottom: 12px;
-  }
-}