From 7cdac9ca9f87bb97939df351ffde30ce4ccaffbd Mon Sep 17 00:00:00 2001 From: RAR Date: Thu, 12 Jan 2023 22:19:17 +0100 Subject: [PATCH] feat: Added column collapsing with card counts support --- client/src/components/Board/ListAdd.jsx | 1 + client/src/components/List/List.jsx | 79 +++++++++++++++++-- client/src/components/List/List.module.scss | 61 ++++++++++++-- client/src/containers/ListContainer.js | 3 +- client/src/models/List.js | 1 + server/api/controllers/lists/create.js | 6 +- server/api/controllers/lists/update.js | 5 +- server/api/models/List.js | 5 ++ .../20230112022500_add_list_isCollapsed.js | 9 +++ 9 files changed, 152 insertions(+), 18 deletions(-) create mode 100644 server/db/migrations/20230112022500_add_list_isCollapsed.js diff --git a/client/src/components/Board/ListAdd.jsx b/client/src/components/Board/ListAdd.jsx index 7fc1e49f..7160b7d3 100755 --- a/client/src/components/Board/ListAdd.jsx +++ b/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 }) => { diff --git a/client/src/components/List/List.jsx b/client/src/components/List/List.jsx index 5396f1be..6d16ef6c 100755 --- a/client/src/components/List/List.jsx +++ b/client/src/components/List/List.jsx @@ -16,14 +16,22 @@ import styles from './List.module.scss'; const List = React.memo( // eslint-disable-next-line prettier/prettier - ({ id, index, name, isPersisted, isFiltered, cardIds, cardIdsFull, canEdit, onUpdate, onDelete, onCardCreate }) => { + ({ id, index, name, isPersisted, isCollapsed, isFiltered, cardIds, cardIdsFull, 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(); } @@ -97,6 +105,45 @@ const List = React.memo( ); }; + if (isCollapsed) { + return ( + + {({ innerRef, draggableProps, dragHandleProps }) => ( +
+
+
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, + jsx-a11y/no-static-element-interactions */} +
+ +
+
{name}
+
{cardsCountText()}
+
+
+
+ )} + + ); + } return ( {({ innerRef, draggableProps, dragHandleProps }) => ( @@ -107,15 +154,30 @@ const List = React.memo( className={styles.innerWrapper} >
- {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, - jsx-a11y/no-static-element-interactions */}
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, + jsx-a11y/no-static-element-interactions */} +
+ +
-
{name}
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, + jsx-a11y/no-static-element-interactions */} +
+ {name} +
{isPersisted && canEdit && ( )} -
{cardsCountText()}
+
{cardsCountText()}
{ const selectCardIdsByListId = selectors.makeSelectCardIdsByListId(); return (state, { id, index }) => { - const { name, isPersisted } = selectListById(state, id); + const { name, isPersisted, isCollapsed } = selectListById(state, id); const { cardIds, cardIdsFull, isFiltered } = selectCardIdsByListId(state, id); const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state); @@ -22,6 +22,7 @@ const makeMapStateToProps = () => { id, index, name, + isCollapsed, isPersisted, isFiltered, cardIds, diff --git a/client/src/models/List.js b/client/src/models/List.js index 0e7e45e8..6f61416e 100755 --- a/client/src/models/List.js +++ b/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', diff --git a/server/api/controllers/lists/create.js b/server/api/controllers/lists/create.js index 9383f5be..49a9bce3 100755 --- a/server/api/controllers/lists/create.js +++ b/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: { diff --git a/server/api/controllers/lists/update.js b/server/api/controllers/lists/update.js index 2cb34e25..b6e1493c 100755 --- a/server/api/controllers/lists/update.js +++ b/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, diff --git a/server/api/models/List.js b/server/api/models/List.js index ce785b03..e2ee0ec4 100755 --- a/server/api/models/List.js +++ b/server/api/models/List.js @@ -19,6 +19,11 @@ module.exports = { type: 'string', required: true, }, + isCollapsed: { + type: 'boolean', + required: true, + columnName: 'is_collapsed', + }, // ╔═╗╔╦╗╔╗ ╔═╗╔╦╗╔═╗ // ║╣ ║║║╠╩╗║╣ ║║╚═╗ diff --git a/server/db/migrations/20230112022500_add_list_isCollapsed.js b/server/db/migrations/20230112022500_add_list_isCollapsed.js new file mode 100644 index 00000000..00b0a255 --- /dev/null +++ b/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'); + });