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

client/src/components/CardModal/Tasks/Item.jsx

@@ -8,14 +8,14 @@ import ActionsPopup from './ActionsPopup';
 
 import styles from './Item.module.scss';
 
-const Item = React.memo(({ name, isCompleted, isPersisted, onUpdate, onDelete }) => {
+const Item = React.memo(({ name, isCompleted, isPersisted, canEdit, onUpdate, onDelete }) => {
   const nameEdit = useRef(null);
 
   const handleClick = useCallback(() => {
-    if (isPersisted) {
+    if (isPersisted && canEdit) {
       nameEdit.current.open();
     }
-  }, [isPersisted]);
+  }, [isPersisted, canEdit]);
 
   const handleNameUpdate = useCallback(
     (newName) => {
@@ -41,23 +41,26 @@ const Item = React.memo(({ name, isCompleted, isPersisted, onUpdate, onDelete })
       <span className={styles.checkboxWrapper}>
         <Checkbox
           checked={isCompleted}
-          disabled={!isPersisted}
+          disabled={!isPersisted || !canEdit}
           className={styles.checkbox}
           onChange={handleToggleChange}
         />
       </span>
       <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
-        <div className={styles.content}>
+        <div className={classNames(canEdit && styles.contentHoverable)}>
           {/* eslint-disable jsx-a11y/click-events-have-key-events,
                              jsx-a11y/no-static-element-interactions */}
-          <span className={styles.text} onClick={handleClick}>
+          <span
+            className={classNames(styles.text, canEdit && styles.textEditable)}
+            onClick={handleClick}
+          >
             {/* eslint-enable jsx-a11y/click-events-have-key-events,
                               jsx-a11y/no-static-element-interactions */}
             <span className={classNames(styles.task, isCompleted && styles.taskCompleted)}>
               {name}
             </span>
           </span>
-          {isPersisted && (
+          {isPersisted && canEdit && (
             <ActionsPopup onNameEdit={handleNameEdit} onDelete={onDelete}>
               <Button className={classNames(styles.button, styles.target)}>
                 <Icon fitted name="pencil" size="small" />
@@ -74,6 +77,7 @@ Item.propTypes = {
   name: PropTypes.string.isRequired,
   isCompleted: PropTypes.bool.isRequired,
   isPersisted: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
 };

client/src/components/CardModal/Tasks/Item.module.scss

@@ -30,7 +30,7 @@
     height: 32px;
   }
 
-  .content:hover {
+  .contentHoverable:hover {
     background: rgba(9, 30, 66, 0.04);
 
     .target {
@@ -55,7 +55,6 @@
     background: transparent;
     border-radius: 3px;
     color: #17394d;
-    cursor: pointer;
     display: inline-block;
     font-size: 15px;
     line-height: 1.5;
@@ -64,6 +63,10 @@
     width: 100%;
   }
 
+  .textEditable {
+    cursor: pointer;
+  }
+
   .wrapper {
     border-radius: 3px;
     margin-left: -40px;

client/src/components/CardModal/Tasks/Tasks.jsx

@@ -8,7 +8,7 @@ import Add from './Add';
 
 import styles from './Tasks.module.scss';
 
-const Tasks = React.memo(({ items, onCreate, onUpdate, onDelete }) => {
+const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onDelete }) => {
   const [t] = useTranslation();
 
   const handleUpdate = useCallback(
@@ -45,23 +45,27 @@ const Tasks = React.memo(({ items, onCreate, onUpdate, onDelete }) => {
           name={item.name}
           isCompleted={item.isCompleted}
           isPersisted={item.isPersisted}
+          canEdit={canEdit}
           onUpdate={(data) => handleUpdate(item.id, data)}
           onDelete={() => handleDelete(item.id)}
         />
       ))}
-      <Add onCreate={onCreate}>
-        <button type="button" className={styles.taskButton}>
-          <span className={styles.taskButtonText}>
-            {items.length > 0 ? t('action.addAnotherTask') : t('action.addTask')}
-          </span>
-        </button>
-      </Add>
+      {canEdit && (
+        <Add onCreate={onCreate}>
+          <button type="button" className={styles.taskButton}>
+            <span className={styles.taskButtonText}>
+              {items.length > 0 ? t('action.addAnotherTask') : t('action.addTask')}
+            </span>
+          </button>
+        </Add>
+      )}
     </>
   );
 });
 
 Tasks.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  canEdit: PropTypes.bool.isRequired,
   onCreate: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,