Open Bonapara opened 3 months ago
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:
Update RecordBoardColumn
Component:
// 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>
);
};
Update State Management:
// 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,
});
Modify Drag-and-Drop Logic:
// 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.
/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
hello @Bonapara! I interested in this issue. Can I assign it?
Sure @uniqueeest, thanks for contributing!
Hi @uniqueeest is everything ok for you? Thanks for contributing!
Hi @uniqueeest, I'm unassigning you. Ping me if you still want to tackle this one!
@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 .
Do you still want it alongside the other issues @Faisal-imtiyaz123? Thanks for contributing!
Yes. would love to.
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
@FelixMalfait Sorry but I didn't understand what needs to be fixed now. Could you please elaborate a bit more.
@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
@FelixMalfait I am sorry for asking again but I don't understand what exactly are we trying to achieve here.
@Faisal-imtiyaz123 no problem. See in video below how filters are not being applied:
https://github.com/user-attachments/assets/b296438a-557a-458e-b46b-fd3088b2103e
@FelixMalfait I don't think it is apt to have Stage
in Filter DropDown
in Table View
.
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.
https://github.com/twentyhq/twenty/assets/19412894/27d08422-a4dd-422c-a733-456ea7d24134
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