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

2021-06-24 01:05:22 +05:00
parent d6cb1f6683
commit b39119ace4
478 changed files with 21226 additions and 19495 deletions
--- a/client/src/components/List/ActionsPopup.jsx
+++ b/client/src/components/List/ActionsPopup.jsx
@@ -65,13 +65,11 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) =>
              context: 'title',
            })}
          </Menu.Item>
-          {onDelete && (
-            <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
-              {t('action.deleteList', {
-                context: 'title',
-              })}
-            </Menu.Item>
-          )}
+          <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+            {t('action.deleteList', {
+              context: 'title',
+            })}
+          </Menu.Item>
        </Menu>
      </Popup.Content>
    </>
@@ -81,12 +79,8 @@ const ActionsStep = React.memo(({ onNameEdit, onCardAdd, onDelete, onClose }) =>
 ActionsStep.propTypes = {
  onNameEdit: PropTypes.func.isRequired,
  onCardAdd: PropTypes.func.isRequired,
-  onDelete: PropTypes.func,
+  onDelete: PropTypes.func.isRequired,
  onClose: PropTypes.func.isRequired,
 };

-ActionsStep.defaultProps = {
-  onDelete: undefined,
-};
-
 export default withPopup(ActionsStep);
--- a/client/src/components/List/List.jsx
+++ b/client/src/components/List/List.jsx
@@ -15,7 +15,7 @@ import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-ic
 import styles from './List.module.scss';

 const List = React.memo(
-  ({ id, index, name, isPersisted, cardIds, onUpdate, onDelete, onCardCreate }) => {
+  ({ id, index, name, isPersisted, cardIds, canEdit, onUpdate, onDelete, onCardCreate }) => {
    const [t] = useTranslation();
    const [isAddCardOpened, setIsAddCardOpened] = useState(false);

@@ -23,10 +23,10 @@ const List = React.memo(
    const listWrapper = useRef(null);

    const handleHeaderClick = useCallback(() => {
-      if (isPersisted) {
+      if (isPersisted && canEdit) {
        nameEdit.current.open();
      }
-    }, [isPersisted]);
+    }, [isPersisted, canEdit]);

    const handleNameUpdate = useCallback(
      (newName) => {
@@ -73,11 +73,13 @@ const List = React.memo(
                <CardContainer key={cardId} id={cardId} index={cardIndex} />
              ))}
              {placeholder}
-              <CardAdd
-                isOpened={isAddCardOpened}
-                onCreate={onCardCreate}
-                onClose={handleAddCardClose}
-              />
+              {canEdit && (
+                <CardAdd
+                  isOpened={isAddCardOpened}
+                  onCreate={onCardCreate}
+                  onClose={handleAddCardClose}
+                />
+              )}
            </div>
          </div>
        )}
@@ -85,51 +87,64 @@ const List = React.memo(
    );

    return (
-      <Draggable draggableId={`list:${id}`} index={index} isDragDisabled={!isPersisted}>
+      <Draggable draggableId={`list:${id}`} index={index} isDragDisabled={!isPersisted || !canEdit}>
        {({ innerRef, draggableProps, dragHandleProps }) => (
-          // eslint-disable-next-line react/jsx-props-no-spreading
-          <div {...draggableProps} data-drag-scroller ref={innerRef} className={styles.wrapper}>
+          <div
+            {...draggableProps} // eslint-disable-line react/jsx-props-no-spreading
+            data-drag-scroller
+            ref={innerRef}
+            className={styles.innerWrapper}
+          >
            {/* eslint-disable jsx-a11y/click-events-have-key-events,
                               jsx-a11y/no-static-element-interactions,
                               react/jsx-props-no-spreading */}
-            <div {...dragHandleProps} className={styles.header} onClick={handleHeaderClick}>
-              {/* eslint-enable jsx-a11y/click-events-have-key-events,
+            <div className={styles.outerWrapper}>
+              <div
+                {...dragHandleProps}
+                className={classNames(styles.header, canEdit && styles.headerEditable)}
+                onClick={handleHeaderClick}
+              >
+                {/* eslint-enable jsx-a11y/click-events-have-key-events,
                                jsx-a11y/no-static-element-interactions,
                                react/jsx-props-no-spreading */}
-              <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
-                <div className={styles.headerName}>{name}</div>
-              </NameEdit>
-              {isPersisted && (
-                <ActionsPopup
-                  onNameEdit={handleNameEdit}
-                  onCardAdd={handleCardAdd}
-                  onDelete={onDelete}
+                <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
+                  <div className={styles.headerName}>{name}</div>
+                </NameEdit>
+                {isPersisted && canEdit && (
+                  <ActionsPopup
+                    onNameEdit={handleNameEdit}
+                    onCardAdd={handleCardAdd}
+                    onDelete={onDelete}
+                  >
+                    <Button className={classNames(styles.headerButton, styles.target)}>
+                      <Icon fitted name="pencil" size="small" />
+                    </Button>
+                  </ActionsPopup>
+                )}
+              </div>
+              <div
+                ref={listWrapper}
+                className={classNames(
+                  styles.cardsInnerWrapper,
+                  (isAddCardOpened || !canEdit) && styles.cardsInnerWrapperFull,
+                )}
+              >
+                <div className={styles.cardsOuterWrapper}>{cardsNode}</div>
+              </div>
+              {!isAddCardOpened && canEdit && (
+                <button
+                  type="button"
+                  disabled={!isPersisted}
+                  className={classNames(styles.addCardButton)}
+                  onClick={handleAddCardClick}
                >
-                  <Button className={classNames(styles.headerButton, styles.target)}>
-                    <Icon fitted name="pencil" size="small" />
-                  </Button>
-                </ActionsPopup>
+                  <PlusMathIcon className={styles.addCardButtonIcon} />
+                  <span className={styles.addCardButtonText}>
+                    {cardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
+                  </span>
+                </button>
              )}
            </div>
-            <div
-              ref={listWrapper}
-              className={classNames(styles.listWrapper, isAddCardOpened && styles.listWrapperFull)}
-            >
-              <div className={styles.list}>{cardsNode}</div>
-            </div>
-            {!isAddCardOpened && (
-              <button
-                type="button"
-                disabled={!isPersisted}
-                className={styles.addCardButton}
-                onClick={handleAddCardClick}
-              >
-                <PlusMathIcon className={styles.addCardButtonIcon} />
-                <span className={styles.addCardButtonText}>
-                  {cardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
-                </span>
-              </button>
-            )}
          </div>
        )}
      </Draggable>
@@ -143,13 +158,10 @@ List.propTypes = {
  name: PropTypes.string.isRequired,
  isPersisted: PropTypes.bool.isRequired,
  cardIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  canEdit: PropTypes.bool.isRequired,
  onUpdate: PropTypes.func.isRequired,
-  onDelete: PropTypes.func,
+  onDelete: PropTypes.func.isRequired,
  onCardCreate: PropTypes.func.isRequired,
 };

-List.defaultProps = {
-  onDelete: undefined,
-};
-
 export default List;
--- a/client/src/components/List/List.module.scss
+++ b/client/src/components/List/List.module.scss
@@ -2,7 +2,6 @@
  .addCardButton {
    background: #dfe3e6;
    border: none;
-    border-radius: 0 0 3px 3px;
    color: #6b808c;
    cursor: pointer;
    display: block;
@@ -37,76 +36,11 @@
  }

  .cards {
-    flex: 1 1 auto;
    min-height: 1px;
  }

-  .header {
-    background: #dfe3e6;
-    border-radius: 3px 3px 0 0;
-    box-sizing: none;
-    flex: 0 0 auto;
-    margin-bottom: 0;
-    outline: none;
-    padding: 6px 36px 4px 8px;
-    position: relative;
-
-    &:hover .target {
-      opacity: 1;
-    }
-  }
-
-  .headerButton {
-    background: none;
-    box-shadow: none;
-    color: #798d99;
-    line-height: 32px;
-    margin: 0;
-    opacity: 0;
-    padding: 0;
-    position: absolute;
-    right: 2px;
-    top: 2px;
-    width: 32px;
-
-    &:hover {
-      background: rgba(9, 30, 66, 0.13);
-      color: #516b7a;
-    }
-  }
-
-  .headerName {
-    background: transparent;
-    border-color: transparent;
-    border-radius: 3px;
-    color: #17394d;
-    font-weight: bold;
-    line-height: 20px;
-    margin: 0;
-    max-height: 256px;
-    outline: none;
-    overflow: hidden;
-    overflow-wrap: break-word;
-    padding: 4px 8px;
-    resize: none;
-    width: 100%;
-    word-break: break-word;
-  }
-
-  .list {
-    background: #dfe3e6;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    padding: 0 8px;
-    position: relative;
-    white-space: normal;
-    width: 272px;
-  }
-
-  .listWrapper {
-    background: #dfe3e6;
-    max-height: calc(100vh - 300px);
+  .cardsInnerWrapper {
+    max-height: calc(100vh - 268px);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
@@ -129,16 +63,69 @@
    }
  }

-  .listWrapperFull {
-    max-height: calc(100vh - 264px);
+  .cardsInnerWrapperFull {
+    max-height: calc(100vh - 232px);
  }

-  .wrapper {
-    border-radius: 3px;
-    flex: 0 0 auto;
-    margin: 0 4px;
-    overflow: hidden;
-    vertical-align: top;
+  .cardsOuterWrapper {
+    padding: 0 8px;
+    white-space: normal;
    width: 272px;
  }
+
+  .header {
+    outline: none;
+    padding: 6px 36px 4px 8px;
+    position: relative;
+
+    &:hover .target {
+      opacity: 1;
+    }
+  }
+
+  .headerEditable {
+    cursor: pointer;
+  }
+
+  .headerButton {
+    background: none;
+    box-shadow: none;
+    color: #798d99;
+    line-height: 32px;
+    margin: 0;
+    opacity: 0;
+    padding: 0;
+    position: absolute;
+    right: 2px;
+    top: 2px;
+    width: 32px;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.13);
+      color: #516b7a;
+    }
+  }
+
+  .headerName {
+    color: #17394d;
+    font-weight: bold;
+    line-height: 20px;
+    max-height: 256px;
+    outline: none;
+    overflow: hidden;
+    overflow-wrap: break-word;
+    padding: 4px 8px;
+    word-break: break-word;
+  }
+
+  .innerWrapper {
+    margin-right: 8px;
+    width: 272px;
+  }
+
+  .outerWrapper {
+    background: #dfe3e6;
+    border-radius: 3px;
+    overflow: hidden;
+  }
 }