Kanban Card Disappears When Moved to Filtered Stage

[Bonapara]

Current Behavior

When a filter is applied to certain stages in Kanban views, dragging a card to one of these filtered stages causes the card to disappear.

Screen.Recording.2024-05-17.at.15.12.37.1.mov

Desired Behavior

Enhance visibility of which columns (stages) have filters applied by adding a Filter applied label on a full-height, sticky card that remains visible when scrolling.

The drag-and-drop to these columns should still be available

Figma

https://www.figma.com/design/xt8O9mFeLl46C5InWwoMrN/Twenty?node-id=31193-42391&t=bcKzeniOHKNgwiqg-11

[greptile-apps]

Disclaimer: This comment was automatically generated with AI. It can give some useful hints as to where to look for, but sometimes it can also give very inaccurate answers so takes this with a pinch of salt :).

To address the issue where Kanban cards disappear when moved to filtered stages, follow these steps:

1. Update RecordBoardColumn Component:

   • Add a label to indicate when a filter is applied to a column.
   • Ensure the label is full-height and sticky.

   // Path: /packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx
   import styled from '@emotion/styled';
   
   const FilterLabel = styled.div`
     position: sticky;
     top: 0;
     height: 100%;
     background: rgba(255, 255, 255, 0.8);
     z-index: 1;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     color: #ff0000;
   `;
   
   const RecordBoardColumn = ({ columnId }) => {
     const isFiltered = useRecoilValue(columnFilterState(columnId));
   
     return (
       <ColumnContainer>
         {isFiltered && <FilterLabel>Filter applied</FilterLabel>}
         {/* existing column rendering logic */}
       </ColumnContainer>
     );
   };

2. Update State Management:

   • Ensure the state for column filters is correctly managed and accessible.

   // Path: /packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useRecordBoardStates.ts
   import { atomFamily } from 'recoil';
   
   export const columnFilterState = atomFamily({
     key: 'columnFilterState',
     default: false,
   });

3. Modify Drag-and-Drop Logic:

   • Ensure that moving cards to filtered columns updates the state correctly and does not cause cards to disappear.

   // Path: /packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
   const onDragEnd: OnDragEndResponder = useRecoilCallback(
     ({ snapshot }) =>
       (result) => {
         if (!result.destination) return;
   
         const draggedRecordId = result.draggableId;
         const destinationColumnId = result.destination.droppableId;
         const isFiltered = snapshot.getLoadable(columnFilterState(destinationColumnId)).getValue();
   
         if (isFiltered) {
           // Handle logic for filtered columns
           // Ensure the card is visible and state is updated correctly
         }
   
         // existing drag-and-drop logic
       },
     [columnFilterState],
   );

These changes should enhance the visibility of filtered columns and ensure cards do not disappear when moved.

References

/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
/packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexBoardContainerEffect.tsx
/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
/packages/twenty-front/src/modules/object-record/record-board/hooks/internal/useSetRecordBoardRecordIds.ts
/packages/twenty-front/src/modules/object-record/record-index/options/hooks/useRecordIndexOptionsForBoard.ts
/packages/twenty-front/src/modules/object-record/record-table/states/selectors/hiddenTableColumnsSelectorScopeMap.ts
/packages/twenty-front/src/modules/object-record/record-table/states/selectors/visibleTableColumnsSelectorScopeMap.ts

Ask Greptile

[uniqueeest]

hello @Bonapara! I interested in this issue. Can I assign it?

[Bonapara]

Sure @uniqueeest, thanks for contributing!

[Bonapara]

Hi @uniqueeest is everything ok for you? Thanks for contributing!

[Bonapara]

Hi @uniqueeest, I'm unassigning you. Ping me if you still want to tackle this one!

[Faisal-imtiyaz123]

@Bonapara On the last issue assigned to me, I need the server to be working, but somehow I have facing Internal-Server-Error while querying the db. So Can I work on this frontend issue till I resolve the problem .

[Bonapara]

Do you still want it alongside the other issues @Faisal-imtiyaz123? Thanks for contributing!

[Faisal-imtiyaz123]

Yes. would love to.

[FelixMalfait]

So I don't think this issue is the same anymore.
What happened is we refactored the kanban board and do 1 query per column now (stage = X1, stage = X2, ... stage = Xn)
So now if you set a filter stage != X1 it gets overwritten and isn't applied at all anymore.
We would probably need to fix this as part of this issue

[Faisal-imtiyaz123]

@FelixMalfait Sorry but I didn't understand what needs to be fixed now. Could you please elaborate a bit more.

[FelixMalfait]

@Faisal-imtiyaz123 if you try adding a filter like "stage != Won" you'll see it doesn't even work anymore, because of a recent refactoring. That needs to be fixed

[Faisal-imtiyaz123]

@FelixMalfait I am sorry for asking again but I don't understand what exactly are we trying to achieve here.

[FelixMalfait]

@Faisal-imtiyaz123 no problem. See in video below how filters are not being applied:

Screen.Recording.2024-08-12.at.16.25.19.mov

[Faisal-imtiyaz123]

@FelixMalfait I don't think it is apt to have Stage in Filter DropDown in Table View.