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

client/src/components/BoardActions/BoardActions.jsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Filters from './Filters';
+import Memberships from '../Memberships';
+
+import styles from './BoardActions.module.scss';
+
+const BoardActions = React.memo(
+  ({
+    memberships,
+    labels,
+    filterUsers,
+    filterLabels,
+    allUsers,
+    canEditMemberships,
+    onMembershipCreate,
+    onMembershipDelete,
+    onUserToFilterAdd,
+    onUserFromFilterRemove,
+    onLabelToFilterAdd,
+    onLabelFromFilterRemove,
+    onLabelCreate,
+    onLabelUpdate,
+    onLabelDelete,
+  }) => {
+    return (
+      <div className={styles.actions}>
+        <div className={styles.action}>
+          <Memberships
+            items={memberships}
+            allUsers={allUsers}
+            canEdit={canEditMemberships}
+            onCreate={onMembershipCreate}
+            onDelete={onMembershipDelete}
+          />
+        </div>
+        <div className={styles.action}>
+          <Filters
+            users={filterUsers}
+            labels={filterLabels}
+            allBoardMemberships={memberships}
+            allLabels={labels}
+            onUserAdd={onUserToFilterAdd}
+            onUserRemove={onUserFromFilterRemove}
+            onLabelAdd={onLabelToFilterAdd}
+            onLabelRemove={onLabelFromFilterRemove}
+            onLabelCreate={onLabelCreate}
+            onLabelUpdate={onLabelUpdate}
+            onLabelDelete={onLabelDelete}
+          />
+        </div>
+      </div>
+    );
+  },
+);
+
+BoardActions.propTypes = {
+  /* eslint-disable react/forbid-prop-types */
+  memberships: PropTypes.array.isRequired,
+  labels: PropTypes.array.isRequired,
+  filterUsers: PropTypes.array.isRequired,
+  filterLabels: PropTypes.array.isRequired,
+  allUsers: PropTypes.array.isRequired,
+  /* eslint-enable react/forbid-prop-types */
+  canEditMemberships: PropTypes.bool.isRequired,
+  onMembershipCreate: PropTypes.func.isRequired,
+  onMembershipDelete: 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 BoardActions;

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

@@ -0,0 +1,11 @@
+:global(#app) {
+  .action {
+    margin-right: 20px;
+  }
+
+  .actions {
+    align-items: center;
+    display: flex;
+    margin: 20px 20px;
+  }
+}

client/src/components/BoardActions/Filters.jsx

@@ -0,0 +1,120 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+import User from '../User';
+import Label from '../Label';
+import BoardMembershipsPopup from '../BoardMembershipsPopup';
+import LabelsPopup from '../LabelsPopup';
+
+import styles from './Filters.module.scss';
+
+const Filters = React.memo(
+  ({
+    users,
+    labels,
+    allBoardMemberships,
+    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 (
+      <>
+        <span className={styles.filter}>
+          <BoardMembershipsPopup
+            items={allBoardMemberships}
+            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>
+          </BoardMembershipsPopup>
+          {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>
+      </>
+    );
+  },
+);
+
+Filters.propTypes = {
+  /* eslint-disable react/forbid-prop-types */
+  users: PropTypes.array.isRequired,
+  labels: PropTypes.array.isRequired,
+  allBoardMemberships: 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 Filters;

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

@@ -0,0 +1,46 @@
+:global(#app) {
+  .filter {
+    margin-right: 10px;
+  }
+
+  .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;
+  }
+}

client/src/components/BoardActions/index.js

@@ -0,0 +1,3 @@
+import BoardActions from './BoardActions';
+
+export default BoardActions;