From c343ecfe8a30e94948922262978260f24fbf9038 Mon Sep 17 00:00:00 2001 From: DvoraShechter1 Date: Mon, 28 Oct 2024 11:28:49 +0200 Subject: [PATCH 1/6] basic refine Signed-off-by: DvoraShechter1 --- .../MultiselectFilterControl.tsx | 107 +++++++++++++----- 1 file changed, 81 insertions(+), 26 deletions(-) diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx index 2d7ec17954..20c462b71a 100644 --- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx +++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx @@ -229,6 +229,14 @@ export const MultiselectFilterControl = ({ const withGroupPrefix = (group: string) => group === category.title ? group : `${category.title}/${group}`; + const groups = Array.from( + new Set( + filteredOptions + .filter((item) => item && item.groupLabel) + .map((item) => item.groupLabel) + ) + ); + return ( <> { @@ -250,35 +258,82 @@ export const MultiselectFilterControl = ({ onSelect={(_, selection) => onSelect(selection as string)} isOpen={isFilterDropdownOpen} > - - {filteredOptions.map( - ({ groupLabel, label, value, optionProps = {} }, index) => ( + {groups && groups.length > 0 && ( + + {groups.map((groupLabel) => ( + + + {groupLabel} + + + {filteredOptions + .filter((option) => option.groupLabel === groupLabel) + .map(({ label, value, optionProps = {} }, index) => ( + + {label ?? value} + + ))} + + ))} + + {filteredOptions.length === 0 && ( + + {`No results found for "${inputValue}"`} + + )} + + )} + {(!groups || groups.length == 0) && ( + + {filteredOptions.map( + ({ groupLabel, label, value, optionProps = {} }, index) => ( + + {!!groupLabel && }{" "} + {label ?? value} + + ) + )} + {filteredOptions.length === 0 && ( - {!!groupLabel && }{" "} - {label ?? value} + {`No results found for "${inputValue}"`} - ) - )} - {filteredOptions.length === 0 && ( - - {`No results found for "${inputValue}"`} - - )} - + )} + + )} } From bb4ffc01960090ca845cb04b8cb7eebfe4f9aebb Mon Sep 17 00:00:00 2001 From: DvoraShechter1 Date: Mon, 28 Oct 2024 16:10:01 +0200 Subject: [PATCH 2/6] Refinement complete. Code requires cleanup Signed-off-by: DvoraShechter1 --- .../MultiselectFilterControl.tsx | 136 +++++++++++++----- 1 file changed, 100 insertions(+), 36 deletions(-) diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx index 20c462b71a..0fb957001a 100644 --- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx +++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx @@ -14,6 +14,7 @@ import { ToolbarChip, ToolbarFilter, } from "@patternfly/react-core"; +import { CaretDownIcon, CaretRightIcon } from "@patternfly/react-icons"; import { IFilterControlProps } from "./FilterControl"; import { FilterSelectOptionProps, @@ -237,6 +238,19 @@ export const MultiselectFilterControl = ({ ) ); + const [openGroups, setOpenGroups] = React.useState([]); + + const toggleGroup = (groupLabel: string) => { + console.log("Toggled group:", groupLabel); // הוסף שורת לוג + + setOpenGroups( + (prev) => + prev.includes(groupLabel) + ? prev.filter((label) => label !== groupLabel) // סגור את הקבוצה + : [...prev, groupLabel] // פתח את הקבוצה + ); + }; + return ( <> { @@ -259,48 +273,98 @@ export const MultiselectFilterControl = ({ isOpen={isFilterDropdownOpen} > {groups && groups.length > 0 && ( + // + // {groups.map((groupLabel) => ( + // + // + // {groupLabel} + // + + // {filteredOptions + // .filter((option) => option.groupLabel === groupLabel) + // .map(({ label, value, optionProps = {} }, index) => ( + // + // {label ?? value} + // + // ))} + // + // ))} + + // {filteredOptions.length === 0 && ( + // + // {`No results found for "${inputValue}"`} + // + // )} + // + {groups.map((groupLabel) => ( - { + // event.stopPropagation(); // לעצור את הורשת האירוע + console.log("Clicked group:", groupLabel); // בדוק אם זה מדפיס את שם הקבוצה + toggleGroup(groupLabel!); + }} // הוסף לחיצה > - {groupLabel} - - - {filteredOptions - .filter((option) => option.groupLabel === groupLabel) - .map(({ label, value, optionProps = {} }, index) => ( - - {label ?? value} - - ))} + { + // event.stopPropagation(); // לעצור את הורשת האירוע + console.log("Clicked group:", groupLabel); // בדוק אם זה מדפיס את שם הקבוצה + // toggleGroup(groupLabel!); + }} // הוסף לחיצה + > + {openGroups.includes(groupLabel!) ? ( + + ) : ( + + )} + {groupLabel} + + + {openGroups.includes(groupLabel!) && + filteredOptions + .filter((option) => option.groupLabel === groupLabel) + .map(({ label, value, optionProps = {} }, index) => ( + + {label ?? value} + + ))} ))} - - {filteredOptions.length === 0 && ( - - {`No results found for "${inputValue}"`} - - )} )} {(!groups || groups.length == 0) && ( From 13fa25d24d9d50b953dc4993d7312f8a9f5d820f Mon Sep 17 00:00:00 2001 From: DvoraShechter1 Date: Mon, 28 Oct 2024 11:28:49 +0200 Subject: [PATCH 3/6] basic refine Signed-off-by: DvoraShechter1 --- .../MultiselectFilterControl.tsx | 107 +++++++++++++----- 1 file changed, 81 insertions(+), 26 deletions(-) diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx index 2d7ec17954..20c462b71a 100644 --- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx +++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx @@ -229,6 +229,14 @@ export const MultiselectFilterControl = ({ const withGroupPrefix = (group: string) => group === category.title ? group : `${category.title}/${group}`; + const groups = Array.from( + new Set( + filteredOptions + .filter((item) => item && item.groupLabel) + .map((item) => item.groupLabel) + ) + ); + return ( <> { @@ -250,35 +258,82 @@ export const MultiselectFilterControl = ({ onSelect={(_, selection) => onSelect(selection as string)} isOpen={isFilterDropdownOpen} > - - {filteredOptions.map( - ({ groupLabel, label, value, optionProps = {} }, index) => ( + {groups && groups.length > 0 && ( + + {groups.map((groupLabel) => ( + + + {groupLabel} + + + {filteredOptions + .filter((option) => option.groupLabel === groupLabel) + .map(({ label, value, optionProps = {} }, index) => ( + + {label ?? value} + + ))} + + ))} + + {filteredOptions.length === 0 && ( + + {`No results found for "${inputValue}"`} + + )} + + )} + {(!groups || groups.length == 0) && ( + + {filteredOptions.map( + ({ groupLabel, label, value, optionProps = {} }, index) => ( + + {!!groupLabel && }{" "} + {label ?? value} + + ) + )} + {filteredOptions.length === 0 && ( - {!!groupLabel && }{" "} - {label ?? value} + {`No results found for "${inputValue}"`} - ) - )} - {filteredOptions.length === 0 && ( - - {`No results found for "${inputValue}"`} - - )} - + )} + + )} } From 6114462bd2fba7db021f8b8266e3b91883231345 Mon Sep 17 00:00:00 2001 From: DvoraShechter1 Date: Mon, 28 Oct 2024 16:10:01 +0200 Subject: [PATCH 4/6] Refinement complete. Code requires cleanup Signed-off-by: DvoraShechter1 --- .../MultiselectFilterControl.tsx | 136 +++++++++++++----- 1 file changed, 100 insertions(+), 36 deletions(-) diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx index 20c462b71a..0fb957001a 100644 --- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx +++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx @@ -14,6 +14,7 @@ import { ToolbarChip, ToolbarFilter, } from "@patternfly/react-core"; +import { CaretDownIcon, CaretRightIcon } from "@patternfly/react-icons"; import { IFilterControlProps } from "./FilterControl"; import { FilterSelectOptionProps, @@ -237,6 +238,19 @@ export const MultiselectFilterControl = ({ ) ); + const [openGroups, setOpenGroups] = React.useState([]); + + const toggleGroup = (groupLabel: string) => { + console.log("Toggled group:", groupLabel); // הוסף שורת לוג + + setOpenGroups( + (prev) => + prev.includes(groupLabel) + ? prev.filter((label) => label !== groupLabel) // סגור את הקבוצה + : [...prev, groupLabel] // פתח את הקבוצה + ); + }; + return ( <> { @@ -259,48 +273,98 @@ export const MultiselectFilterControl = ({ isOpen={isFilterDropdownOpen} > {groups && groups.length > 0 && ( + // + // {groups.map((groupLabel) => ( + // + // + // {groupLabel} + // + + // {filteredOptions + // .filter((option) => option.groupLabel === groupLabel) + // .map(({ label, value, optionProps = {} }, index) => ( + // + // {label ?? value} + // + // ))} + // + // ))} + + // {filteredOptions.length === 0 && ( + // + // {`No results found for "${inputValue}"`} + // + // )} + // + {groups.map((groupLabel) => ( - { + // event.stopPropagation(); // לעצור את הורשת האירוע + console.log("Clicked group:", groupLabel); // בדוק אם זה מדפיס את שם הקבוצה + toggleGroup(groupLabel!); + }} // הוסף לחיצה > - {groupLabel} - - - {filteredOptions - .filter((option) => option.groupLabel === groupLabel) - .map(({ label, value, optionProps = {} }, index) => ( - - {label ?? value} - - ))} + { + // event.stopPropagation(); // לעצור את הורשת האירוע + console.log("Clicked group:", groupLabel); // בדוק אם זה מדפיס את שם הקבוצה + // toggleGroup(groupLabel!); + }} // הוסף לחיצה + > + {openGroups.includes(groupLabel!) ? ( + + ) : ( + + )} + {groupLabel} + + + {openGroups.includes(groupLabel!) && + filteredOptions + .filter((option) => option.groupLabel === groupLabel) + .map(({ label, value, optionProps = {} }, index) => ( + + {label ?? value} + + ))} ))} - - {filteredOptions.length === 0 && ( - - {`No results found for "${inputValue}"`} - - )} )} {(!groups || groups.length == 0) && ( From aca07320c8fccf1497aaa5a48c4328e18cd3562d Mon Sep 17 00:00:00 2001 From: sarinailinger Date: Wed, 30 Oct 2024 11:05:35 +0200 Subject: [PATCH 5/6] The arrangement of the code Signed-off-by: sarinailinger --- .../MultiselectFilterControl.tsx | 67 +++---------------- 1 file changed, 9 insertions(+), 58 deletions(-) diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx index 0fb957001a..e4858266e2 100644 --- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx +++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx @@ -241,13 +241,12 @@ export const MultiselectFilterControl = ({ const [openGroups, setOpenGroups] = React.useState([]); const toggleGroup = (groupLabel: string) => { - console.log("Toggled group:", groupLabel); // הוסף שורת לוג + console.log("Toggled group:", groupLabel); - setOpenGroups( - (prev) => - prev.includes(groupLabel) - ? prev.filter((label) => label !== groupLabel) // סגור את הקבוצה - : [...prev, groupLabel] // פתח את הקבוצה + setOpenGroups((prev) => + prev.includes(groupLabel) + ? prev.filter((label) => label !== groupLabel) + : [...prev, groupLabel] ); }; @@ -273,69 +272,21 @@ export const MultiselectFilterControl = ({ isOpen={isFilterDropdownOpen} > {groups && groups.length > 0 && ( - // - // {groups.map((groupLabel) => ( - // - // - // {groupLabel} - // - - // {filteredOptions - // .filter((option) => option.groupLabel === groupLabel) - // .map(({ label, value, optionProps = {} }, index) => ( - // - // {label ?? value} - // - // ))} - // - // ))} - - // {filteredOptions.length === 0 && ( - // - // {`No results found for "${inputValue}"`} - // - // )} - // - {groups.map((groupLabel) => (
{ - // event.stopPropagation(); // לעצור את הורשת האירוע - console.log("Clicked group:", groupLabel); // בדוק אם זה מדפיס את שם הקבוצה + console.log("Clicked group:", groupLabel); toggleGroup(groupLabel!); - }} // הוסף לחיצה + }} > { - // event.stopPropagation(); // לעצור את הורשת האירוע - console.log("Clicked group:", groupLabel); // בדוק אם זה מדפיס את שם הקבוצה - // toggleGroup(groupLabel!); - }} // הוסף לחיצה + console.log("Clicked group:", groupLabel); + }} > {openGroups.includes(groupLabel!) ? ( From 3c72675afceda4bcc32e1b1f3bac26dc6e1bc864 Mon Sep 17 00:00:00 2001 From: sarinailinger Date: Wed, 30 Oct 2024 12:07:20 +0200 Subject: [PATCH 6/6] delete the logs Signed-off-by: sarinailinger --- .../components/FilterToolbar/MultiselectFilterControl.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx index e4858266e2..ecd482669e 100644 --- a/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx +++ b/client/src/app/components/FilterToolbar/MultiselectFilterControl.tsx @@ -241,8 +241,6 @@ export const MultiselectFilterControl = ({ const [openGroups, setOpenGroups] = React.useState([]); const toggleGroup = (groupLabel: string) => { - console.log("Toggled group:", groupLabel); - setOpenGroups((prev) => prev.includes(groupLabel) ? prev.filter((label) => label !== groupLabel) @@ -277,16 +275,13 @@ export const MultiselectFilterControl = ({
{ - console.log("Clicked group:", groupLabel); toggleGroup(groupLabel!); }} > { - console.log("Clicked group:", groupLabel); - }} + onClick={(event) => {}} > {openGroups.includes(groupLabel!) ? (