diff --git a/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters.tsx b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters.tsx new file mode 100644 index 0000000000..cea643ae07 --- /dev/null +++ b/frontend/src/component/changeRequest/ChangeRequests/ChangeRequestFilters.tsx @@ -0,0 +1,127 @@ +// todo (globalChangeRequestList): update this implementation +import { Box, Chip, styled } from '@mui/material'; +import type { FC } from 'react'; +import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser'; +import type { FilterItemParamHolder } from 'component/filter/Filters/Filters'; + +const StyledChip = styled(Chip, { + shouldForwardProp: (prop) => prop !== 'isActive', +})<{ + isActive?: boolean; +}>(({ theme, isActive = false }) => ({ + borderRadius: `${theme.shape.borderRadius}px`, + padding: theme.spacing(0.5), + fontSize: theme.typography.body2.fontSize, + height: 'auto', + ...(isActive && { + backgroundColor: theme.palette.secondary.light, + fontWeight: 'bold', + borderColor: theme.palette.primary.main, + color: theme.palette.primary.main, + }), + ':focus-visible': { + outline: `1px solid ${theme.palette.primary.main}`, + borderColor: theme.palette.primary.main, + }, +})); + +interface IChangeRequestFiltersProps { + tableState: { + createdBy?: FilterItemParamHolder; + requestedApproverId?: FilterItemParamHolder; + }; + setTableState: ( + newState: Partial<{ + createdBy?: FilterItemParamHolder; + requestedApproverId?: FilterItemParamHolder; + }>, + ) => void; +} + +const Wrapper = styled(Box)(({ theme }) => ({ + display: 'flex', + justifyContent: 'flex-start', + padding: theme.spacing(1.5, 3, 0, 3), + minHeight: theme.spacing(7), + gap: theme.spacing(2), +})); + +const StyledContainer = styled(Box)(({ theme }) => ({ + display: 'flex', + alignItems: 'center', + flexWrap: 'wrap', + gap: theme.spacing(1), +})); + +const filterOptions = [ + { + label: 'Created', + key: 'createdBy' as const, + description: 'Show change requests you created', + }, + { + label: 'Approval Requested', + key: 'requestedApproverId' as const, + description: 'Show change requests requesting your approval', + }, +]; + +export const ChangeRequestFilters: FC = ({ + tableState, + setTableState, +}) => { + const { user } = useAuthUser(); + + if (!user) return null; + + return ( + + + {filterOptions.map(({ label, key, description }) => { + const isActive = !!tableState[key]?.values?.includes( + user.id.toString(), + ); + + const handleClick = () => { + if (isActive) { + // Remove active filter (no filter active) + setTableState({ + createdBy: null, + requestedApproverId: null, + }); + } else { + // Activate this filter and deactivate the other (radio button behavior) + setTableState({ + createdBy: + key === 'createdBy' + ? { + operator: 'IS', + values: [user.id.toString()], + } + : null, + requestedApproverId: + key === 'requestedApproverId' + ? { + operator: 'IS', + values: [user.id.toString()], + } + : null, + }); + } + }; + + return ( + + ); + })} + + + ); +};