From 8508e7c756e7bc9e1f162c1511c32511e50cb983 Mon Sep 17 00:00:00 2001 From: Ysrbolles Date: Tue, 26 Nov 2024 13:54:55 +0100 Subject: [PATCH 1/4] feat(partners): add RESET_ALL_BUSINESS_FIELDS action and update MenuList UI --- .../Partners/BusinessFieldFilter.tsx | 251 ++++++++++++------ src/helpers/partnersReducer.ts | 13 +- src/theme/overrides/MenuList.ts | 2 +- 3 files changed, 180 insertions(+), 86 deletions(-) diff --git a/src/components/Partners/BusinessFieldFilter.tsx b/src/components/Partners/BusinessFieldFilter.tsx index 3b8b598d..5a474101 100644 --- a/src/components/Partners/BusinessFieldFilter.tsx +++ b/src/components/Partners/BusinessFieldFilter.tsx @@ -1,11 +1,11 @@ -import { mdiCheckCircle } from '@mdi/js' +import { mdiCloseCircleOutline } from '@mdi/js' import Icon from '@mdi/react' -import { Divider, Typography } from '@mui/material' +import { Box, Checkbox, Divider, Typography } from '@mui/material' import ListItemText from '@mui/material/ListItemText' import MenuItem from '@mui/material/MenuItem' import Select from '@mui/material/Select' -import React from 'react' -import { ActionType, StatePartnersType, partnersActions } from '../../helpers/partnersReducer' +import React, { useState } from 'react' +import { ActionType, partnersActions, StatePartnersType } from '../../helpers/partnersReducer' interface BusinessFieldFilterProps { state: StatePartnersType @@ -16,116 +16,199 @@ const BusinessFieldFilter: React.FC = ({ state, dispatchPartnersActions, }) => { + const [selectedFields, setSelectedFields] = useState([]) + + // Toggle individual field const handleFieldToggle = (selectedField: string) => { + const newSelectedFields = selectedFields.includes(selectedField) + ? selectedFields.filter(field => field !== selectedField) + : [...selectedFields, selectedField] + + setSelectedFields(newSelectedFields) + dispatchPartnersActions({ type: partnersActions.UPDATE_BUSINESS_FIELD, payload: selectedField, }) } + // Toggle entire category (select/deselect all fields in category) const handleCategoryToggle = (category: string) => { + // Find all fields in the category + const categoryFields = + state.businessField.find(group => group.category === category)?.fields || [] + + // Check if all fields in the category are already selected + const allFieldsInCategorySelected = categoryFields.every(field => + selectedFields.includes(field.fullName), + ) + + // Update the `selectedFields` state: + // - If all are selected, remove them + // - Otherwise, add the ones not already selected + const updatedSelectedFields = allFieldsInCategorySelected + ? selectedFields.filter(field => !categoryFields.map(f => f.fullName).includes(field)) + : [ + ...selectedFields, + ...categoryFields + .filter(field => !selectedFields.includes(field.fullName)) // Avoid duplicates + .map(field => field.fullName), + ] + + setSelectedFields(updatedSelectedFields) dispatchPartnersActions({ type: partnersActions.TOGGLE_CATEGORY, payload: category, }) } + const resetAllFields = () => { + setSelectedFields([]) // Clear selected fields from the state + dispatchPartnersActions({ + type: partnersActions.RESET_ALL_BUSINESS_FIELDS, + }) + } + return ( - {}} // No-op since we're handling state manually + sx={{ + flex: '1 1 220px', + padding: '0', + borderRadius: '12px', + paddingRight: '0px !important', + maxWidth: { xs: '100%', sm: '50%', md: '220px' }, + overflow: 'hidden', + '.MuiSelect-select ': { + boxSizing: 'border-box', + padding: '10px 10px 10px 10px', + borderRadius: '12px', + display: 'flex', + alignItems: 'center', + border: theme => `solid 1px ${theme.palette.card.border}`, + }, + '& .MuiPopover-paper ul': { + paddingRight: 'unset !important', + width: '100% !important', + }, + '.MuiOutlinedInput-notchedOutline': { + border: 'none !important', + }, + }} + renderValue={() => ( + + {selectedFields.length > 0 + ? `Business fields (${selectedFields.length})` + : 'Business fields'} - , - - ...group.fields.map((field, fieldIndex) => ( + )} + MenuProps={{ + PaperProps: { + style: { + maxHeight: '400px', + overflow: 'auto', + }, + }, + }} + > + {state?.businessField?.map((group, groupIndex) => [ handleFieldToggle(field.fullName)} + key={`category-${groupIndex}`} + onClick={() => handleCategoryToggle(group.category)} // Toggle category + sx={{ + backgroundColor: theme => + theme.palette.mode === 'dark' + ? theme.palette.grey[900] + : theme.palette.grey[100], + py: 1, + }} > - {field.name} + {group.category} } /> - {field.active && } - - )), + field.active)} // All fields active + indeterminate={ + group.fields.some(field => field.active) && // Some fields active + !group.fields.every(field => field.active) // Not all fields active + } + sx={{ + color: theme => theme.palette.secondary.main, + '&.Mui-checked': { + color: theme => theme.palette.secondary.main, + }, + '&.MuiCheckbox-indeterminate': { + color: theme => theme.palette.secondary.main, // Optional: Customize color for indeterminate state + }, + }} + /> + , + + ...group.fields.map((field, fieldIndex) => ( + handleFieldToggle(field.fullName)} // Toggle individual field + > + + {field.name} + + } + /> + theme.palette.secondary.main, + '&.Mui-checked': { + color: theme => theme.palette.secondary.main, + }, + }} + /> + + )), - groupIndex < state.businessField.length - 1 ? ( - - ) : null, - ])} - + groupIndex < state.businessField.length - 1 ? ( + + ) : null, + ])} + + {selectedFields.length > 0 && ( + + )} + ) } diff --git a/src/helpers/partnersReducer.ts b/src/helpers/partnersReducer.ts index cd873077..2b499d59 100644 --- a/src/helpers/partnersReducer.ts +++ b/src/helpers/partnersReducer.ts @@ -31,6 +31,7 @@ export enum partnersActions { 'TOGGLE_VALIDATORS', 'TOGGLE_ON_MESSENGER', 'UPDATE_BUSINESS_FIELDS_FROM_API', + 'RESET_ALL_BUSINESS_FIELDS', } export interface ActionType { @@ -120,7 +121,17 @@ export const partnersReducer = ( ...state, businessField: action.payload, } - + case partnersActions.RESET_ALL_BUSINESS_FIELDS: + return { + ...state, + businessField: state.businessField.map(group => ({ + ...group, + fields: group.fields.map(field => ({ + ...field, + active: false, + })), + })), + } default: return state } diff --git a/src/theme/overrides/MenuList.ts b/src/theme/overrides/MenuList.ts index 0a6fa520..1c6ab0a9 100644 --- a/src/theme/overrides/MenuList.ts +++ b/src/theme/overrides/MenuList.ts @@ -13,7 +13,7 @@ export default function MenuList(theme: Theme) { maxWidth: '350px', '& .MuiMenuItem-root': { whiteSpace: 'normal', - padding: '.8rem', + padding: '0.625rem', '&.Mui-selected': { backgroundColor: `${theme.palette.action.selected} !important`, }, From fb73080de3462c06b9f1815a0f9748862bbf55bd Mon Sep 17 00:00:00 2001 From: Ysrbolles Date: Tue, 26 Nov 2024 14:29:37 +0100 Subject: [PATCH 2/4] fix(partners): update query filters to use $or and adjust MenuList padding --- src/components/Partners/BusinessFieldFilter.tsx | 3 +++ src/redux/services/partners.ts | 4 ++-- src/theme/overrides/MenuList.ts | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Partners/BusinessFieldFilter.tsx b/src/components/Partners/BusinessFieldFilter.tsx index 5a474101..5b47c7f0 100644 --- a/src/components/Partners/BusinessFieldFilter.tsx +++ b/src/components/Partners/BusinessFieldFilter.tsx @@ -106,6 +106,9 @@ const BusinessFieldFilter: React.FC = ({ '.MuiOutlinedInput-notchedOutline': { border: 'none !important', }, + 'root-MuiCheckbox-root': { + padding: 0, + }, }} renderValue={() => ( diff --git a/src/redux/services/partners.ts b/src/redux/services/partners.ts index d51f1397..628ada60 100644 --- a/src/redux/services/partners.ts +++ b/src/redux/services/partners.ts @@ -239,7 +239,7 @@ export const partnersApi = createApi({ .map(field => field.fullName) if (filterWith?.length > 0) { filterWith.forEach((element, index) => { - query += `&filters[$and][${index}][business_fields][BusinessField][$eq]=${element}` + query += `&filters[$or][${index}][business_fields][BusinessField][$eq]=${element}` }) } } @@ -510,7 +510,7 @@ export const partnersApi = createApi({ .map(field => field.fullName) if (filterWith?.length > 0) { filterWith.forEach((element, index) => { - query += `&filters[$and][${index}][business_fields][BusinessField][$eq]=${element}` + query += `&filters[$or][${index}][business_fields][BusinessField][$eq]=${element}` }) } } diff --git a/src/theme/overrides/MenuList.ts b/src/theme/overrides/MenuList.ts index 1c6ab0a9..0b4c6346 100644 --- a/src/theme/overrides/MenuList.ts +++ b/src/theme/overrides/MenuList.ts @@ -13,7 +13,7 @@ export default function MenuList(theme: Theme) { maxWidth: '350px', '& .MuiMenuItem-root': { whiteSpace: 'normal', - padding: '0.625rem', + padding: '0.8rem', '&.Mui-selected': { backgroundColor: `${theme.palette.action.selected} !important`, }, From bc04d6364672fc9e0460eefc6076b95218134c75 Mon Sep 17 00:00:00 2001 From: Ysrbolles Date: Tue, 26 Nov 2024 15:36:18 +0100 Subject: [PATCH 3/4] fix(partners): refine BusinessFieldFilter styles --- .../Partners/BusinessFieldFilter.tsx | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/src/components/Partners/BusinessFieldFilter.tsx b/src/components/Partners/BusinessFieldFilter.tsx index 5b47c7f0..eec9e7d7 100644 --- a/src/components/Partners/BusinessFieldFilter.tsx +++ b/src/components/Partners/BusinessFieldFilter.tsx @@ -1,6 +1,6 @@ import { mdiCloseCircleOutline } from '@mdi/js' import Icon from '@mdi/react' -import { Box, Checkbox, Divider, Typography } from '@mui/material' +import { Box, Checkbox, Typography } from '@mui/material' import ListItemText from '@mui/material/ListItemText' import MenuItem from '@mui/material/MenuItem' import Select from '@mui/material/Select' @@ -106,9 +106,6 @@ const BusinessFieldFilter: React.FC = ({ '.MuiOutlinedInput-notchedOutline': { border: 'none !important', }, - 'root-MuiCheckbox-root': { - padding: 0, - }, }} renderValue={() => ( @@ -132,9 +129,7 @@ const BusinessFieldFilter: React.FC = ({ onClick={() => handleCategoryToggle(group.category)} // Toggle category sx={{ backgroundColor: theme => - theme.palette.mode === 'dark' - ? theme.palette.grey[900] - : theme.palette.grey[100], + theme.palette.mode === 'dark' ? '#0f182a' : theme.palette.grey[100], py: 1, }} > @@ -157,12 +152,14 @@ const BusinessFieldFilter: React.FC = ({ !group.fields.every(field => field.active) // Not all fields active } sx={{ - color: theme => theme.palette.secondary.main, + padding: '0', + color: theme => + theme.palette.mode === 'dark' ? '#475569' : '#64748B', '&.Mui-checked': { color: theme => theme.palette.secondary.main, }, '&.MuiCheckbox-indeterminate': { - color: theme => theme.palette.secondary.main, // Optional: Customize color for indeterminate state + color: theme => theme.palette.secondary.main, }, }} /> @@ -189,7 +186,9 @@ const BusinessFieldFilter: React.FC = ({ theme.palette.secondary.main, + padding: '0', + color: theme => + theme.palette.mode === 'dark' ? '#475569' : '#64748B', '&.Mui-checked': { color: theme => theme.palette.secondary.main, }, @@ -197,16 +196,12 @@ const BusinessFieldFilter: React.FC = ({ /> )), - - groupIndex < state.businessField.length - 1 ? ( - - ) : null, ])} {selectedFields.length > 0 && ( From 22659b3d062d1f972db1d79c0542bb92c3b2845e Mon Sep 17 00:00:00 2001 From: Ysrbolles Date: Tue, 26 Nov 2024 15:38:24 +0100 Subject: [PATCH 4/4] fix(MenuList): adjust padding for menu items --- src/theme/overrides/MenuList.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/overrides/MenuList.ts b/src/theme/overrides/MenuList.ts index 0b4c6346..0a6fa520 100644 --- a/src/theme/overrides/MenuList.ts +++ b/src/theme/overrides/MenuList.ts @@ -13,7 +13,7 @@ export default function MenuList(theme: Theme) { maxWidth: '350px', '& .MuiMenuItem-root': { whiteSpace: 'normal', - padding: '0.8rem', + padding: '.8rem', '&.Mui-selected': { backgroundColor: `${theme.palette.action.selected} !important`, },