✨ add no member/label option in filters

juliendemoutiez · juliendemoutiez · commit bcc8f927b3e6 · 2025-11-13T15:27:23.000+01:00
diff --git a/client/src/components/BoardActions/BoardActions.jsx b/client/src/components/BoardActions/BoardActions.jsx
@@ -13,8 +13,10 @@ const BoardActions = React.memo(
     filterText,
     allUsers,
     filterUsers,
+    includeCardsWithoutMembers,
     boardLabels,
     filterLabels,
+    includeCardsWithoutLabels,
     boardMemberships,
     isCurrentUserMember,
     canEdit,
@@ -100,7 +102,9 @@ const BoardActions = React.memo(
               filterText={filterText}
               boardLabels={boardLabels}
               filterLabels={filterLabels}
+              includeCardsWithoutLabels={includeCardsWithoutLabels}
               filterUsers={filterUsers}
+              includeCardsWithoutMembers={includeCardsWithoutMembers}
               boardMemberships={boardMemberships}
               canEdit={canEdit}
               onTextFilterUpdate={onTextFilterUpdate}
@@ -204,8 +208,10 @@ BoardActions.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   allUsers: PropTypes.array.isRequired,
   filterUsers: PropTypes.array.isRequired,
+  includeCardsWithoutMembers: PropTypes.bool.isRequired,
   boardLabels: PropTypes.array.isRequired,
   filterLabels: PropTypes.array.isRequired,
+  includeCardsWithoutLabels: PropTypes.bool.isRequired,
   boardMemberships: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   canEdit: PropTypes.bool.isRequired,
diff --git a/client/src/components/BoardActions/Filters/Filters.jsx b/client/src/components/BoardActions/Filters/Filters.jsx
@@ -18,7 +18,9 @@ const Filters = React.memo(
     filterText,
     boardLabels,
     filterLabels,
+    includeCardsWithoutLabels,
     filterUsers,
+    includeCardsWithoutMembers,
     boardMemberships,
     canEdit,
     onTextFilterUpdate,
@@ -61,6 +63,8 @@ const Filters = React.memo(
           <BoardMembershipsPopover
             items={boardMemberships}
             currentUserIds={filterUsers.map((user) => user.id)}
+            displayNoMemberOption
+            includeCardsWithoutMembers={includeCardsWithoutMembers}
             title="common.filterByMembers"
             onUserSelect={onUserAdd}
             onUserDeselect={onUserRemove}
@@ -76,11 +80,16 @@ const Filters = React.memo(
                 filterUsers.length > 0 && styles.membersButtonFilled,
               )}
             >
-              {filterUsers.length === 0 && <span className={styles.filterTitle}>Membres</span>}
+              {filterUsers.length === 0 && !includeCardsWithoutMembers && (
+                <span className={styles.filterTitle}>Membres</span>
+              )}
+              {includeCardsWithoutMembers && (
+                <div className={styles.noMember}>
+                  <Icon name="person_off" type="outlined" aria-hidden="true" size="small" />
+                </div>
+              )}
               {filterUsers.map((user) => (
-                <span key={user.id} className={styles.filterItem}>
-                  <User name={user.name} avatarUrl={user.avatarUrl} size="small" />
-                </span>
+                <User key={user.id} name={user.name} avatarUrl={user.avatarUrl} size="small" />
               ))}
             </Button>
           </BoardMembershipsPopover>
@@ -89,6 +98,8 @@ const Filters = React.memo(
           <LabelsPopover
             items={boardLabels}
             currentIds={filterLabels.map((label) => label.id)}
+            displayNoLabelOption
+            includeCardsWithoutLabels={includeCardsWithoutLabels}
             title="common.filterByLabels"
             canEdit={canEdit}
             onSelect={onLabelAdd}
@@ -109,11 +120,16 @@ const Filters = React.memo(
                 filterLabels.length > 0 && styles.labelsButtonFilled,
               )}
             >
-              {filterLabels.length === 0 && <span className={styles.filterTitle}>Etiquettes</span>}
+              {filterLabels.length === 0 && !includeCardsWithoutLabels && (
+                <span className={styles.filterTitle}>Etiquettes</span>
+              )}
+              {includeCardsWithoutLabels && (
+                <div className={styles.noLabel}>
+                  <Icon name="label_off" type="outlined" aria-hidden="true" size="small" />
+                </div>
+              )}
               {filterLabels.map((label) => (
-                <span key={label.id} className={styles.filterItem}>
-                  <Label name={label.name} color={label.color} size="small" />
-                </span>
+                <Label key={label.id} name={label.name} color={label.color} size="small" />
               ))}
             </Button>
           </LabelsPopover>
@@ -128,7 +144,9 @@ Filters.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   boardLabels: PropTypes.array.isRequired,
   filterLabels: PropTypes.array.isRequired,
+  includeCardsWithoutLabels: PropTypes.bool.isRequired,
   filterUsers: PropTypes.array.isRequired,
+  includeCardsWithoutMembers: PropTypes.bool.isRequired,
   boardMemberships: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   canEdit: PropTypes.bool.isRequired,
diff --git a/client/src/components/BoardActions/Filters/Filters.module.scss b/client/src/components/BoardActions/Filters/Filters.module.scss
@@ -24,4 +24,14 @@
     }
   }
 
+  .noMember, .noLabel {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    border: 1px solid var(--c--theme--colors--greyscale-800);
+    border-radius: 100%;
+  }
+
 }
diff --git a/client/src/containers/BoardActionsContainer.js b/client/src/containers/BoardActionsContainer.js
@@ -15,6 +15,9 @@ const mapStateToProps = (state) => {
   const filterLabels = selectors.selectFilterLabelsForCurrentBoard(state);
   const allUsers = selectors.selectUsers(state);
   const filterUsers = selectors.selectFilterUsersForCurrentBoard(state);
+  const includeCardsWithoutMembers =
+    selectors.selectIncludeCardsWithoutMembersForCurrentBoard(state);
+  const includeCardsWithoutLabels = selectors.selectIncludeCardsWithoutLabelsForCurrentBoard(state);
   const boardMemberships = selectors.selectMembershipsForCurrentBoard(state);
 
   const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
@@ -30,8 +33,10 @@ const mapStateToProps = (state) => {
     filterText,
     allUsers,
     filterUsers,
+    includeCardsWithoutMembers,
     boardLabels,
     filterLabels,
+    includeCardsWithoutLabels,
     boardMemberships,
     canEdit: isCurrentUserEditor || isCurrentUserOwner,
     isCurrentUserMember,
diff --git a/client/src/models/Board.js b/client/src/models/Board.js
@@ -30,6 +30,12 @@ export default class extends BaseModel {
     }),
     filterUsers: many('User', 'filterBoards'),
     filterLabels: many('Label', 'filterBoards'),
+    includeCardsWithoutMembers: attr({
+      getDefault: () => false,
+    }),
+    includeCardsWithoutLabels: attr({
+      getDefault: () => false,
+    }),
     filterText: attr({
       getDefault: () => '',
     }),
@@ -97,11 +103,19 @@ export default class extends BaseModel {
 
         break;
       case ActionTypes.USER_TO_BOARD_FILTER_ADD:
-        Board.withId(payload.boardId).filterUsers.add(payload.id);
+        if (payload.id === null) {
+          Board.withId(payload.boardId).update({ includeCardsWithoutMembers: true });
+        } else {
+          Board.withId(payload.boardId).filterUsers.add(payload.id);
+        }
 
         break;
       case ActionTypes.USER_FROM_BOARD_FILTER_REMOVE:
-        Board.withId(payload.boardId).filterUsers.remove(payload.id);
+        if (payload.id === null) {
+          Board.withId(payload.boardId).update({ includeCardsWithoutMembers: false });
+        } else {
+          Board.withId(payload.boardId).filterUsers.remove(payload.id);
+        }
 
         break;
       case ActionTypes.PROJECT_CREATE_HANDLE:
@@ -170,11 +184,19 @@ export default class extends BaseModel {
         // Initial action only contains boardId and targetProjectId
         break;
       case ActionTypes.LABEL_TO_BOARD_FILTER_ADD:
-        Board.withId(payload.boardId).filterLabels.add(payload.id);
+        if (payload.id === null) {
+          Board.withId(payload.boardId).update({ includeCardsWithoutLabels: true });
+        } else {
+          Board.withId(payload.boardId).filterLabels.add(payload.id);
+        }
 
         break;
       case ActionTypes.LABEL_FROM_BOARD_FILTER_REMOVE:
-        Board.withId(payload.boardId).filterLabels.remove(payload.id);
+        if (payload.id === null) {
+          Board.withId(payload.boardId).update({ includeCardsWithoutLabels: false });
+        } else {
+          Board.withId(payload.boardId).filterLabels.remove(payload.id);
+        }
 
         break;
       case ActionTypes.TEXT_FILTER_IN_CURRENT_BOARD: {
diff --git a/client/src/models/List.js b/client/src/models/List.js
@@ -135,20 +135,33 @@ export default class extends BaseModel {
 
     const filterUserIds = this.board.filterUsers.toRefArray().map((user) => user.id);
     const filterLabelIds = this.board.filterLabels.toRefArray().map((label) => label.id);
+    const { includeCardsWithoutMembers } = this.board;
 
-    if (filterUserIds.length > 0) {
+    if (filterUserIds.length > 0 || includeCardsWithoutMembers) {
       cardModels = cardModels.filter((cardModel) => {
         const users = cardModel.users.toRefArray();
+        const hasNoMembers = users.length === 0;
+        const hasMatchingMember = filterUserIds.some((userId) =>
+          users.some((user) => user.id === userId),
+        );
 
-        return filterUserIds.some((userId) => users.some((user) => user.id === userId));
+        // Show cards that have no members OR cards that have matching members
+        return (includeCardsWithoutMembers && hasNoMembers) || hasMatchingMember;
       });
     }
 
-    if (filterLabelIds.length > 0) {
+    const { includeCardsWithoutLabels } = this.board;
+
+    if (filterLabelIds.length > 0 || includeCardsWithoutLabels) {
       cardModels = cardModels.filter((cardModel) => {
         const labels = cardModel.labels.toRefArray();
+        const hasNoLabels = labels.length === 0;
+        const hasMatchingLabel = filterLabelIds.some((labelId) =>
+          labels.some((label) => label.id === labelId),
+        );
 
-        return filterLabelIds.some((labelId) => labels.some((label) => label.id === labelId));
+        // Show cards that have no labels OR cards that have matching labels
+        return (includeCardsWithoutLabels && hasNoLabels) || hasMatchingLabel;
       });
     }
 
diff --git a/client/src/selectors/boards.js b/client/src/selectors/boards.js
@@ -282,6 +282,42 @@ export const selectFilterUsersForCurrentBoard = createSelector(
   },
 );
 
+export const selectIncludeCardsWithoutMembersForCurrentBoard = createSelector(
+  orm,
+  (state) => selectPath(state).boardId,
+  ({ Board }, id) => {
+    if (!id) {
+      return false;
+    }
+
+    const boardModel = Board.withId(id);
+
+    if (!boardModel) {
+      return false;
+    }
+
+    return boardModel.includeCardsWithoutMembers || false;
+  },
+);
+
+export const selectIncludeCardsWithoutLabelsForCurrentBoard = createSelector(
+  orm,
+  (state) => selectPath(state).boardId,
+  ({ Board }, id) => {
+    if (!id) {
+      return false;
+    }
+
+    const boardModel = Board.withId(id);
+
+    if (!boardModel) {
+      return false;
+    }
+
+    return boardModel.includeCardsWithoutLabels || false;
+  },
+);
+
 export const selectFilterLabelsForCurrentBoard = createSelector(
   orm,
   (state) => selectPath(state).boardId,
@@ -340,4 +376,6 @@ export default {
   selectFilterLabelsForCurrentBoard,
   selectFilterTextForCurrentBoard,
   selectIsBoardWithIdExists,
+  selectIncludeCardsWithoutMembersForCurrentBoard,
+  selectIncludeCardsWithoutLabelsForCurrentBoard,
 };
diff --git a/client/src/steps/BoardMembershipsStep/BoardMembershipsStep.jsx b/client/src/steps/BoardMembershipsStep/BoardMembershipsStep.jsx
@@ -11,7 +11,16 @@ import User from '../../ui/User';
 import styles from './BoardMembershipsStep.module.scss';
 
 const BoardMembershipsStep = React.memo(
-  ({ items, currentUserIds, title, onUserSelect, onUserDeselect, onBack }) => {
+  ({
+    items,
+    currentUserIds,
+    displayNoMemberOption,
+    includeCardsWithoutMembers,
+    title,
+    onUserSelect,
+    onUserDeselect,
+    onBack,
+  }) => {
     const [t] = useTranslation();
     const [search, handleSearchChange] = useField('');
     const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);
@@ -63,6 +72,28 @@ const BoardMembershipsStep = React.memo(
           />
         </div>
         <div className={styles.filterList}>
+          {displayNoMemberOption && (
+            <div className={styles.filterItem}>
+              <Checkbox
+                checked={includeCardsWithoutMembers}
+                onChange={() => {
+                  if (includeCardsWithoutMembers) {
+                    handleUserDeselect(null);
+                  } else {
+                    handleUserSelect(null);
+                  }
+                }}
+                label={
+                  <div className={styles.filterLabel}>
+                    <div className={styles.userAvatar}>
+                      <Icon name="person_off" type="outlined" aria-hidden="true" />
+                    </div>
+                    <span className={styles.userName}>Aucun membre</span>
+                  </div>
+                }
+              />
+            </div>
+          )}
           {filteredItems.map((membership) => (
             <div className={styles.filterItem} key={membership.user.id}>
               <Checkbox
@@ -100,7 +131,9 @@ BoardMembershipsStep.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   items: PropTypes.array.isRequired,
   currentUserIds: PropTypes.array.isRequired,
+  displayNoMemberOption: PropTypes.bool.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  includeCardsWithoutMembers: PropTypes.bool.isRequired,
   title: PropTypes.string,
   onUserSelect: PropTypes.func.isRequired,
   onUserDeselect: PropTypes.func.isRequired,
diff --git a/client/src/steps/BoardMembershipsStep/BoardMembershipsStep.module.scss b/client/src/steps/BoardMembershipsStep/BoardMembershipsStep.module.scss
@@ -59,6 +59,9 @@
 
     .userAvatar {
       flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
 
     span {
diff --git a/client/src/steps/LabelsStep/LabelsStep.jsx b/client/src/steps/LabelsStep/LabelsStep.jsx
diff --git a/client/src/steps/LabelsStep/LabelsStep.module.scss b/client/src/steps/LabelsStep/LabelsStep.module.scss

Original file line number	Diff line number	Diff line change
`@@ -24,4 +24,14 @@`
`24`	`24`	`}`
`25`	`25`	`}`
`26`	`26`
	`27`	`+ .noMember, .noLabel {`
	`28`	`+ display: flex;`
	`29`	`+ align-items: center;`
	`30`	`+ justify-content: center;`
	`31`	`+ width: 24px;`
	`32`	`+ height: 24px;`
	`33`	`+ border: 1px solid var(--c--theme--colors--greyscale-800);`
	`34`	`+ border-radius: 100%;`
	`35`	`+ }`
	`36`	`+`
`27`	`37`	`}`
Original file line number	Diff line number	Diff line change
`@@ -59,6 +59,9 @@`
`59`	`59`
`60`	`60`	`.userAvatar {`
`61`	`61`	`flex-shrink: 0;`
	`62`	`+ display: flex;`
	`63`	`+ align-items: center;`
	`64`	`+ justify-content: center;`
`62`	`65`	`}`
`63`	`66`
`64`	`67`	`span {`