Merge 4f8f4327fd into 2c84316fe0

client/src/components/Board/ListAdd.jsx

@@ -10,6 +10,7 @@ import styles from './ListAdd.module.scss';
 
 const DEFAULT_DATA = {
   name: '',
+  isCollapsed: false,
 };
 
 const ListAdd = React.memo(({ onCreate, onClose }) => {

client/src/components/BoardActions/BoardActions.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import { useTranslation } from 'react-i18next';
+import classNames from 'classnames';
 import Filters from './Filters';
 import Memberships from '../Memberships';
 import BoardMembershipPermissionsSelectStep from '../BoardMembershipPermissionsSelectStep';
@@ -9,6 +11,7 @@ import styles from './BoardActions.module.scss';
 
 const BoardActions = React.memo(
   ({
+    cardCount,
     memberships,
     labels,
     filterUsers,
@@ -28,9 +31,14 @@ const BoardActions = React.memo(
     onLabelMove,
     onLabelDelete,
   }) => {
+    const [t] = useTranslation();
+
     return (
       <div className={styles.wrapper}>
         <div className={styles.actions}>
+          <div className={classNames(styles.cardsCount, styles.action)}>
+            {cardCount} {[cardCount !== 1 ? t('common.cards') : t('common.card')]}
+          </div>
           <div className={styles.action}>
             <Memberships
               items={memberships}
@@ -67,6 +75,7 @@ const BoardActions = React.memo(
 
 BoardActions.propTypes = {
   /* eslint-disable react/forbid-prop-types */
+  cardCount: PropTypes.number.isRequired,
   memberships: PropTypes.array.isRequired,
   labels: PropTypes.array.isRequired,
   filterUsers: PropTypes.array.isRequired,

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

@@ -1,4 +1,9 @@
 :global(#app) {
+  .cardsCount {
+    color: #798d99;
+    font-size: 12px;
+  }
+
   .action {
     flex: 0 0 auto;
     margin-right: 20px;

client/src/components/List/List.jsx

@@ -16,14 +16,23 @@ 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, canEdit, onUpdate, onDelete, onCardCreate }) => {
+  // eslint-disable-next-line prettier/prettier
+  ({ id, index, name, isPersisted, isCollapsed, cardIds, isFiltered, filteredCardIds, canEdit, onUpdate, onDelete, onCardCreate }) => {
     const [t] = useTranslation();
     const [isAddCardOpened, setIsAddCardOpened] = useState(false);
 
     const nameEdit = useRef(null);
     const listWrapper = useRef(null);
 
-    const handleHeaderClick = useCallback(() => {
+    const handleToggleCollapseClick = useCallback(() => {
+      if (isPersisted && canEdit) {
+        onUpdate({
+          isCollapsed: !isCollapsed,
+        });
+      }
+    }, [isPersisted, canEdit, onUpdate, isCollapsed]);
+
+    const handleHeaderNameClick = useCallback(() => {
       if (isPersisted && canEdit) {
         nameEdit.current.open();
       }
@@ -58,7 +67,7 @@ const List = React.memo(
       if (isAddCardOpened) {
         listWrapper.current.scrollTop = listWrapper.current.scrollHeight;
       }
-    }, [cardIds, isAddCardOpened]);
+    }, [filteredCardIds, isAddCardOpened]);
 
     const ActionsPopup = usePopup(ActionsStep);
 
@@ -72,7 +81,7 @@ const List = React.memo(
           // eslint-disable-next-line react/jsx-props-no-spreading
           <div {...droppableProps} ref={innerRef}>
             <div className={styles.cards}>
-              {cardIds.map((cardId, cardIndex) => (
+              {filteredCardIds.map((cardId, cardIndex) => (
                 <CardContainer key={cardId} id={cardId} index={cardIndex} />
               ))}
               {placeholder}
@@ -89,6 +98,55 @@ const List = React.memo(
       </Droppable>
     );
 
+    const cardsCountText = () => {
+      return (
+        [
+          isFiltered
+            ? `${filteredCardIds.length} ${t('common.of')} ${cardIds.length} `
+            : `${cardIds.length} `,
+        ] + [cardIds.length !== 1 ? t('common.cards') : t('common.card')]
+      );
+    };
+
+    if (isCollapsed) {
+      return (
+        <Draggable
+          draggableId={`list:${id}`}
+          index={index}
+          isDragDisabled={!isPersisted || !canEdit}
+        >
+          {({ innerRef, draggableProps, dragHandleProps }) => (
+            <div
+              {...draggableProps} // eslint-disable-line react/jsx-props-no-spreading
+              data-drag-scroller
+              ref={innerRef}
+              className={styles.innerWrapperCollapsed}
+            >
+              <div className={styles.outerWrapper}>
+                <div
+                  {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
+                  className={styles.headerCollapsed}
+                >
+                  {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+                                         jsx-a11y/no-static-element-interactions */}
+                  <div
+                    className={classNames(
+                      styles.headerCollapseButtonCollapsed,
+                      canEdit && styles.headerEditable,
+                    )}
+                    onClick={handleToggleCollapseClick}
+                  >
+                    <Icon fitted name="triangle down" />
+                  </div>
+                  <div className={styles.headerNameCollapsed}>{name}</div>
+                  <div className={styles.headerCardsCountCollapsed}>{cardsCountText()}</div>
+                </div>
+              </div>
+            </div>
+          )}
+        </Draggable>
+      );
+    }
     return (
       <Draggable draggableId={`list:${id}`} index={index} isDragDisabled={!isPersisted || !canEdit}>
         {({ innerRef, draggableProps, dragHandleProps }) => (
@@ -99,15 +157,30 @@ const List = React.memo(
             className={styles.innerWrapper}
           >
             <div className={styles.outerWrapper}>
-              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
-                                           jsx-a11y/no-static-element-interactions */}
               <div
                 {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
-                className={classNames(styles.header, canEdit && styles.headerEditable)}
-                onClick={handleHeaderClick}
+                className={styles.header}
               >
+                {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+                                           jsx-a11y/no-static-element-interactions */}
+                <div
+                  className={classNames(
+                    styles.headerCollapseButton,
+                    canEdit && styles.headerEditable,
+                  )}
+                  onClick={handleToggleCollapseClick}
+                >
+                  <Icon fitted name="triangle right" />
+                </div>
                 <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
-                  <div className={styles.headerName}>{name}</div>
+                  {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+                                           jsx-a11y/no-static-element-interactions */}
+                  <div
+                    className={classNames(styles.headerName, canEdit && styles.headerEditable)}
+                    onClick={handleHeaderNameClick}
+                  >
+                    {name}
+                  </div>
                 </NameEdit>
                 {isPersisted && canEdit && (
                   <ActionsPopup
@@ -120,6 +193,7 @@ const List = React.memo(
                     </Button>
                   </ActionsPopup>
                 )}
+                <div className={styles.headerCardsCount}>{cardsCountText()}</div>
               </div>
               <div
                 ref={listWrapper}
@@ -139,7 +213,7 @@ const List = React.memo(
                 >
                   <PlusMathIcon className={styles.addCardButtonIcon} />
                   <span className={styles.addCardButtonText}>
-                    {cardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
+                    {filteredCardIds.length > 0 ? t('action.addAnotherCard') : t('action.addCard')}
                   </span>
                 </button>
               )}
@@ -155,8 +229,11 @@ List.propTypes = {
   id: PropTypes.string.isRequired,
   index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
+  isCollapsed: PropTypes.bool.isRequired,
   isPersisted: PropTypes.bool.isRequired,
   cardIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  isFiltered: PropTypes.bool.isRequired,
+  filteredCardIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   canEdit: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,

client/src/components/List/List.module.scss

@@ -74,7 +74,7 @@
 
   .header {
     outline: none;
-    padding: 6px 36px 4px 8px;
+    padding: 4px 36px 4px 10px;
     position: relative;
 
     &:hover .target {
@@ -82,6 +82,15 @@
     }
   }
 
+  .headerCollapsed {
+    outline: none;
+    height: calc(100vh - 182px);
+
+    &:hover .target {
+      opacity: 1;
+    }
+  }
+
   .headerEditable {
     cursor: pointer;
   }
@@ -109,12 +118,53 @@
     color: #17394d;
     font-weight: bold;
     line-height: 20px;
-    max-height: 256px;
+    max-height: 82px;
     outline: none;
     overflow: hidden;
     overflow-wrap: break-word;
-    padding: 4px 8px;
     word-break: break-word;
+    display: -webkit-box;
+    -webkit-line-clamp: 4;
+    -webkit-box-orient: vertical;
+  }
+
+  .headerNameCollapsed {
+    color: #17394d;
+    font-weight: bold;
+    outline: none;
+    overflow: hidden;
+    writing-mode: vertical-rl;
+    padding: 0px 5px 10px 5px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-height: 85%;
+  }
+
+  .headerCollapseButton {
+    width: 10px;
+    height: 30px;
+    padding: 2px 0px 0px 2px;
+    position: absolute;
+    left: 2px;
+    top: 2px;
+  }
+
+  .headerCollapseButtonCollapsed {
+    height: 30px;
+    text-align: center;
+  }
+
+  .headerCardsCount {
+    color: #798d99;
+    font-size: 12px;
+  }
+
+  .headerCardsCountCollapsed {
+    color: #798d99;
+    font-size: 12px;
+    max-height: 10%;
+    writing-mode: vertical-rl;
+    padding: 0px 5px 10px 5px;
   }
 
   .innerWrapper {
@@ -122,6 +172,11 @@
     width: 272px;
   }
 
+  .innerWrapperCollapsed {
+    margin-right: 8px;
+    width: 30px;
+  }
+
   .outerWrapper {
     background: #dfe3e6;
     border-radius: 3px;

client/src/containers/BoardActionsContainer.js

@@ -7,6 +7,9 @@ import { BoardMembershipRoles } from '../constants/Enums';
 import BoardActions from '../components/BoardActions';
 
 const mapStateToProps = (state) => {
+  const listIds = selectors.selectListIdsForCurrentBoard(state);
+  const listCardsCount = listIds.map((list) => selectors.selectCardIdsByListId(state, list).length);
+  const cardCount = listCardsCount.reduce((sum, count) => sum + count, 0);
   const allUsers = selectors.selectUsers(state);
   const isCurrentUserManager = selectors.selectIsCurrentUserManagerForCurrentProject(state);
   const memberships = selectors.selectMembershipsForCurrentBoard(state);
@@ -19,6 +22,7 @@ const mapStateToProps = (state) => {
     !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
 
   return {
+    cardCount,
     memberships,
     labels,
     filterUsers,

client/src/containers/ListContainer.js

@@ -9,10 +9,14 @@ import List from '../components/List';
 const makeMapStateToProps = () => {
   const selectListById = selectors.makeSelectListById();
   const selectCardIdsByListId = selectors.makeSelectCardIdsByListId();
+  const selectIsFilteredByListId = selectors.makeSelectIsFilteredByListId();
+  const selectFilteredCardIdsByListId = selectors.makeSelectFilteredCardIdsByListId();
 
   return (state, { id, index }) => {
-    const { name, isPersisted } = selectListById(state, id);
+    const { name, isPersisted, isCollapsed } = selectListById(state, id);
     const cardIds = selectCardIdsByListId(state, id);
+    const isFiltered = selectIsFilteredByListId(state, id);
+    const filteredCardIds = selectFilteredCardIdsByListId(state, id);
     const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
 
     const isCurrentUserEditor =
@@ -22,8 +26,11 @@ const makeMapStateToProps = () => {
       id,
       index,
       name,
+      isCollapsed,
       isPersisted,
       cardIds,
+      isFiltered,
+      filteredCardIds,
       canEdit: isCurrentUserEditor,
     };
   };

client/src/locales/en/core.js

@@ -162,6 +162,9 @@ export default {
       version: 'Version',
       viewer: 'Viewer',
       writeComment: 'Write a comment...',
+      card: 'card',
+      cards: 'cards',
+      of: 'of',
     },
 
     action: {

client/src/models/List.js

@@ -10,6 +10,7 @@ export default class extends BaseModel {
     id: attr(),
     position: attr(),
     name: attr(),
+    isCollapsed: attr(),
     boardId: fk({
       to: 'Board',
       as: 'board',
@@ -84,6 +85,16 @@ export default class extends BaseModel {
     return this.cards.orderBy('position');
   }
 
+  getOrderedCardsModelArray() {
+    return this.getOrderedCardsQuerySet().toModelArray();
+  }
+
+  getIsFiltered() {
+    const filterUserIds = this.board.filterUsers.toRefArray().map((user) => user.id);
+    const filterLabelIds = this.board.filterLabels.toRefArray().map((label) => label.id);
+    return filterUserIds.length > 0 || filterLabelIds.length > 0;
+  }
+
   getFilteredOrderedCardsModelArray() {
     let cardModels = this.getOrderedCardsQuerySet().toModelArray();
 
@@ -93,7 +104,6 @@ export default class extends BaseModel {
     if (filterUserIds.length > 0) {
       cardModels = cardModels.filter((cardModel) => {
         const users = cardModel.users.toRefArray();
-
         return users.some((user) => filterUserIds.includes(user.id));
       });
     }
@@ -101,7 +111,6 @@ export default class extends BaseModel {
     if (filterLabelIds.length > 0) {
       cardModels = cardModels.filter((cardModel) => {
         const labels = cardModel.labels.toRefArray();
-
         return labels.some((label) => filterLabelIds.includes(label.id));
       });
     }

client/src/selectors/core.js

@@ -91,6 +91,7 @@ export const selectNextCardPosition = createSelector(
       return listModel;
     }
 
+    // eslint-disable-next-line prettier/prettier
     return nextPosition(listModel.getFilteredOrderedCardsModelArray(), index, excludedId);
   },
 );

client/src/selectors/lists.js

@@ -34,15 +34,53 @@ export const makeSelectCardIdsByListId = () =>
         return listModel;
       }
 
-      return listModel.getFilteredOrderedCardsModelArray().map((cardModel) => cardModel.id);
+      return listModel.getOrderedCardsModelArray().map((cardModel) => cardModel.id);
     },
   );
 
 export const selectCardIdsByListId = makeSelectCardIdsByListId();
 
+export const makeSelectIsFilteredByListId = () =>
+  createSelector(
+    orm,
+    (_, id) => id,
+    ({ List }, id) => {
+      const listModel = List.withId(id);
+
+      if (!listModel) {
+        return listModel;
+      }
+
+      return listModel.getIsFiltered();
+    },
+  );
+
+export const selectIsFilteredByListId = makeSelectIsFilteredByListId();
+
+export const makeSelectFilteredCardIdsByListId = () =>
+  createSelector(
+    orm,
+    (_, id) => id,
+    ({ List }, id) => {
+      const listModel = List.withId(id);
+
+      if (!listModel) {
+        return listModel;
+      }
+
+      return listModel.getFilteredOrderedCardsModelArray().map((cardModel) => cardModel.id);
+    },
+  );
+
+export const selectFilteredCardIdsByListId = makeSelectFilteredCardIdsByListId();
+
 export default {
   makeSelectListById,
   selectListById,
   makeSelectCardIdsByListId,
   selectCardIdsByListId,
+  makeSelectIsFilteredByListId,
+  selectIsFilteredByListId,
+  makeSelectFilteredCardIdsByListId,
+  selectFilteredCardIdsByListId,
 };

server/api/controllers/lists/create.js

@@ -22,6 +22,10 @@ module.exports = {
       type: 'string',
       required: true,
     },
+    isCollapsed: {
+      type: 'boolean',
+      required: true,
+    },
   },
 
   exits: {
@@ -53,7 +57,7 @@ module.exports = {
       throw Errors.NOT_ENOUGH_RIGHTS;
     }
 
-    const values = _.pick(inputs, ['position', 'name']);
+    const values = _.pick(inputs, ['position', 'name', 'isCollapsed']);
 
     const list = await sails.helpers.lists.createOne.with({
       values: {

server/api/controllers/lists/update.js

@@ -21,6 +21,9 @@ module.exports = {
       type: 'string',
       isNotEmptyString: true,
     },
+    isCollapsed: {
+      type: 'boolean',
+    },
   },
 
   exits: {
@@ -52,7 +55,7 @@ module.exports = {
       throw Errors.NOT_ENOUGH_RIGHTS;
     }
 
-    const values = _.pick(inputs, ['position', 'name']);
+    const values = _.pick(inputs, ['position', 'name', 'isCollapsed']);
 
     list = await sails.helpers.lists.updateOne.with({
       values,

server/api/models/List.js

@@ -19,6 +19,11 @@ module.exports = {
       type: 'string',
       required: true,
     },
+    isCollapsed: {
+      type: 'boolean',
+      required: true,
+      columnName: 'is_collapsed',
+    },
 
     //  ╔═╗╔╦╗╔╗ ╔═╗╔╦╗╔═╗
     //  ║╣ ║║║╠╩╗║╣  ║║╚═╗

server/db/migrations/20230112022500_add_list_isCollapsed.js

@@ -0,0 +1,9 @@
+module.exports.up = (knex) =>
+  knex.schema.alterTable('list', (table) => {
+    table.boolean('is_collapsed').notNullable().defaultTo(false);
+  });
+
+module.exports.down = (knex) =>
+  knex.schema.alterTable('list', (table) => {
+    table.dropColumn('is_collapsed');
+  });