Skip to content

Commit 658a7f8

Browse files
arun-s-aotarun-s-aot
authored
Merge pull request #1118 from Ajay-aot/FWF-6040/allow-independent-reorder-for-personal-and-shared
FWF-6040[bugfix] - Allowed Independent Reorder and Hide for Personal and Shared Filters
2 parents 6c13b5d + 1ad71cb commit 658a7f8

File tree

3 files changed

+94
-51
lines changed

3 files changed

+94
-51
lines changed

‎forms-flow-components/src/components/CustomComponents/DragandDropSort.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,17 @@ interface DragAndDropFilterProps {
1919
onUpdate?: (updatedItems: FilterItem[]) => void;
2020
icon?: React.ReactNode;
2121
preventLastCheck?: boolean;
22+
heading?: string;
23+
subHeading?: string;
2224
}
2325

2426
export const DragandDropSort: React.FC<DragAndDropFilterProps> = ({
2527
items,
2628
onUpdate,
2729
icon,
2830
preventLastCheck = false,
31+
heading,
32+
subHeading,
2933
}) => {
3034
const containerRef = useRef<HTMLDivElement | null>(null);
3135
const listRef = useRef<HTMLUListElement | null>(null);
@@ -110,7 +114,9 @@ useEffect(() => {
110114

111115
return (
112116
<div className="drag-drop-list-container" ref={containerRef}>
113-
<ul ref={listRef}>
117+
{heading && <h5 className="filter-heading">{heading}</h5>}
118+
{subHeading && <p className="filter-sub-heading">{subHeading}</p>}
119+
<ul ref={listRef}>
114120
{filterItems?.map((item, index) => (
115121
<li key={item.id ?? `${item.name}-${index}`}
116122
className="draggable-item"

‎forms-flow-review/src/components/ReorderTaskFilterModal.tsx‎

Lines changed: 72 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -31,61 +31,70 @@ export const ReorderTaskFilterModal: React.FC<ReorderTaskFilterModalProps> =
3131
const { t } = useTranslation();
3232
const dispatch = useDispatch();
3333
const selectedFilter = useSelector((state: any) => state.task.selectedFilter);
34-
const [sortedFilterList, setSortedFilterList] = useState<any[]>([
35-
filtersList,
36-
]);
34+
35+
const [myFilterList, setMyFilterList] = useState<any[]>([]);
36+
const [sharedFilterList, setSharedFilterList] = useState<any[]>([]);
3737

3838
const darkColor = StyleServices.getCSSVariable("--secondary-dark");
3939
// need to update the filterList with only key of Id,name,isChcked ,sortOrder,Icon in order to pass to drag and drop
4040
const updateFilterList = useMemo(() => {
4141
return filtersList.map((item) => {
42-
// const createdByMe = userDetails.preferred_username === item.createdBy;
43-
// const isSharedToPublic = !item.roles?.length && !item.users?.length;
44-
// const isSharedToRoles = item.roles.length
45-
// const isShareToMe = item.roles?.some((role) =>
46-
// userDetails.groups?.includes(role)
47-
// );
48-
// let icon = null;
49-
// // icon for filters except private and All tasks
50-
// if (createdByMe&& (isSharedToPublic || isSharedToRoles)) {
51-
// icon = <SharedWithOthersIcon />;
52-
// } else if (isSharedToPublic || isShareToMe) {
53-
// icon = <SharedWithMeIcon />;
54-
// }
42+
const createdByMe = userDetails?.preferred_username === item?.createdBy;
43+
const isSharedToPublic = !item?.roles?.length && !item?.users?.length;
44+
const isSharedToRoles = item?.roles?.length;
45+
const isSharedToMe = item?.roles?.some((role) =>
46+
userDetails?.groups?.includes(role)
47+
);
48+
49+
let category = "my";
50+
if (createdByMe && (isSharedToPublic || isSharedToRoles)) {
51+
category = "my";
52+
} else if (isSharedToPublic || isSharedToMe) {
53+
category = "shared";
54+
}
55+
5556
return {
5657
id: item.id,
5758
name: item.name,
5859
isChecked: !item.hide,
5960
sortOrder: item.sortOrder,
60-
// icon: icon,
61+
category,
6162
};
6263
});
63-
}, [filtersList]);
64+
}, [filtersList, userDetails]);
6465

6566
// set the updated filterList to sortedfilterLis state ,to compare the updated filterList with the original filterList initially
6667
useEffect(() => {
67-
setSortedFilterList(updateFilterList);
68+
const myFilters = updateFilterList.filter(f => f.category === "my");
69+
const sharedFilters = updateFilterList.filter(f => f.category === "shared");
70+
setMyFilterList(myFilters);
71+
setSharedFilterList(sharedFilters);
6872
}, [updateFilterList]);
6973

70-
//callback function to update the filterList after drag and drop
71-
const onUpdateFilterOrder = (dragedFilterList) => {
72-
setSortedFilterList(dragedFilterList);
74+
const onUpdateMyFilters = (updatedList) => {
75+
setMyFilterList(updatedList);
76+
};
77+
78+
const onUpdateSharedFilters = (updatedList) => {
79+
setSharedFilterList(updatedList);
7380
};
7481

7582
const handleDiscardChanges = () => {
7683
onClose();
7784
};
7885
const handleSaveChanges = async () => {
79-
// saveFilterPreference payload only contains the id and sortOrder ,hide
80-
const updatedFiltersPreference = sortedFilterList.map(
81-
({ id, isChecked, sortOrder }) => ({
86+
// Combine lists for saving
87+
const combinedList = [...myFilterList, ...sharedFilterList];
88+
89+
const updatedFiltersPreference = combinedList.map(
90+
({ id, isChecked }, index) => ({
8291
filterId: id,
8392
hide: !isChecked,
84-
sortOrder,
93+
sortOrder: index, // Update sort order based on new position
8594
})
8695
);
87-
// check if the selected filter is hidden or not
88-
const selectedFilterHide = sortedFilterList.some(
96+
97+
const selectedFilterHide = combinedList.some(
8998
({ id, isChecked }) => id === selectedFilter.id && !isChecked
9099
);
91100

@@ -110,22 +119,23 @@ export const ReorderTaskFilterModal: React.FC<ReorderTaskFilterModalProps> =
110119
};
111120

112121
const isSaveBtnDisabled = useMemo(() => {
113-
const original = JSON.stringify(
114-
updateFilterList.map(({ id, isChecked, sortOrder }) => ({
115-
id,
116-
isChecked,
117-
sortOrder,
118-
}))
119-
);
120-
const current = JSON.stringify(
121-
sortedFilterList.map(({ id, isChecked, sortOrder }) => ({
122-
id,
123-
isChecked,
124-
sortOrder,
125-
}))
126-
);
127-
return original === current;
128-
}, [sortedFilterList, updateFilterList]);
122+
const myFiltersChecked = myFilterList.some(f => f.isChecked);
123+
const sharedFiltersChecked = sharedFilterList.some(f => f.isChecked);
124+
125+
if (!myFiltersChecked && !sharedFiltersChecked) {
126+
return true;
127+
}
128+
129+
const originalMy = updateFilterList.filter(f => f.category === "my");
130+
const originalShared = updateFilterList.filter(f => f.category === "shared");
131+
132+
const formatForCompare = (list) => list.map(({ id, isChecked }) => ({ id, isChecked }));
133+
134+
const myChanged = JSON.stringify(formatForCompare(originalMy)) !== JSON.stringify(formatForCompare(myFilterList));
135+
const sharedChanged = JSON.stringify(formatForCompare(originalShared)) !== JSON.stringify(formatForCompare(sharedFilterList));
136+
137+
return !myChanged && !sharedChanged;
138+
}, [myFilterList, sharedFilterList, updateFilterList]);
129139

130140
return (
131141
<Modal
@@ -148,12 +158,24 @@ export const ReorderTaskFilterModal: React.FC<ReorderTaskFilterModalProps> =
148158
</div>
149159
</Modal.Header>
150160
<Modal.Body>
151-
152-
<DragandDropSort
153-
items={updateFilterList}
154-
onUpdate={onUpdateFilterOrder}
155-
preventLastCheck={true}
156-
/>
161+
<div className="filter-section mb-3">
162+
<DragandDropSort
163+
items={myFilterList}
164+
onUpdate={onUpdateMyFilters}
165+
preventLastCheck={true}
166+
heading={t("Personal Filters")}
167+
subHeading={t("Only you can see these")}
168+
/>
169+
</div>
170+
<div className="filter-section">
171+
<DragandDropSort
172+
items={sharedFilterList}
173+
onUpdate={onUpdateSharedFilters}
174+
preventLastCheck={false}
175+
heading={t("Shared Filters")}
176+
subHeading={t("Both you and others can see these")}
177+
/>
178+
</div>
157179
</Modal.Body>
158180
<Modal.Footer>
159181
<V8CustomButton

‎forms-flow-theme/scss/v8-scss/_dragandrop.scss‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@ $gray-light: var(--gray-light);
33
$gray-x-light: var(--gray-x-light);
44
$animSpeed: 300ms;
55

6+
$heading-size: var(--font-size-m);
7+
$heading-weight: var(--font-weight-medium);
8+
$heading-color: var(--gray-darkest);
9+
$subheading-size: var(--font-size-s);
10+
$subheading-weight: var(--font-weight-regular);
11+
$subheading-color: var(--gray-medium-darker);
12+
613
.drag-drop-container{
714
@include large-modal-popover();
815
.modal-body{
@@ -84,4 +91,12 @@ $animSpeed: 300ms;
8491
align-items: center;
8592
}
8693
}
94+
95+
.filter-heading {
96+
@include font-style($heading-size, $heading-weight, $heading-color);
97+
}
98+
99+
.filter-sub-heading {
100+
@include font-style($subheading-size, $subheading-weight, $subheading-color);
101+
}
87102
}

0 commit comments

Comments
 (0)