diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts index 0aa5b91745..7ed5067e05 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts @@ -17,8 +17,8 @@ export const useStyles = makeStyles()(theme => ({ fill: '#fff', }, accordion: { - border: `1px solid ${theme.palette.grey[300]}`, - borderRadius: '5px', + border: `1px solid ${theme.palette.grey[400]}`, + borderRadius: '8px', backgroundColor: '#fff', boxShadow: 'none', margin: 0, diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx index f269a3c171..c32fa68a75 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx @@ -64,29 +64,37 @@ export const RestrictiveLegalValues = ({ }; return ( - <> - - Select values from a predefined set - - - {filteredValues.map(match => ( - onChange(match.value)} - name={match.value} - color="primary" + 500)} + show={ + <> + + Select values from a predefined set + + + {filteredValues.map(match => ( + onChange(match.value)} + name={match.value} + color="primary" + /> + } /> - } - /> - ))} - {error}

} - /> - + ))} + {error}

} + /> + + } + /> ); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx index 158cd221af..f62dc67d3c 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx @@ -36,7 +36,15 @@ export const SingleLegalValue = ({ Add a single {type.toLowerCase()} value - + 500)} + show={ + + } + /> { - event.stopPropagation(); - onDelete(); - }); - return (
@@ -155,16 +147,7 @@ export const ConstraintAccordionEditHeader = ({

} /> -
- - - - - - - - -
+
); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx new file mode 100644 index 0000000000..202eafc065 --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender'; +import { IconButton, Tooltip } from '@mui/material'; +import { Delete, Edit } from '@mui/icons-material'; +import { useStyles } from '../ConstraintAccordion.styles'; + +interface ConstraintAccordionHeaderActionsProps { + onDelete?: () => void; + onEdit?: () => void; +} + +export const ConstraintAccordionHeaderActions = ({ + onEdit, + onDelete, +}: ConstraintAccordionHeaderActionsProps) => { + const { classes: styles } = useStyles(); + const onEditClick = + onEdit && + ((event: React.SyntheticEvent) => { + event.stopPropagation(); + onEdit(); + }); + + const onDeleteClick = + onDelete && + ((event: React.SyntheticEvent) => { + event.stopPropagation(); + onDelete(); + }); + + return ( +
+ ( + + + + + + )} + /> + ( + + + + + + )} + /> +
+ ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx index 69d682ea08..c0061cc650 100644 --- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx @@ -1,72 +1,10 @@ -import { Chip, IconButton, Tooltip, styled } from '@mui/material'; import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon'; -import { Delete, Edit } from '@mui/icons-material'; import { IConstraint } from 'interfaces/strategy'; import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles'; -import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; -import React, { useEffect, useRef, useState } from 'react'; -import { formatConstraintValue } from 'utils/formatConstraintValue'; -import { useLocationSettings } from 'hooks/useLocationSettings'; -import { ConstraintOperator } from 'component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator'; -import classnames from 'classnames'; -import { getTextWidth } from '../../utils'; -import { ReactComponent as NegatedIcon } from 'assets/icons/24_Negator.svg'; -import { ReactComponent as CaseSensitive } from 'assets/icons/24_Text format.svg'; -import { stringOperators } from 'constants/operators'; -import { oneOf } from 'utils/oneOf'; - -const StyledHeaderText = styled('span')(({ theme }) => ({ - display: '-webkit-box', - WebkitLineClamp: 3, - WebkitBoxOrient: 'vertical', - overflow: 'hidden', - maxWidth: '100px', - minWidth: '100px', - marginRight: '10px', - wordBreak: 'break-word', - fontSize: theme.fontSizes.smallBody, - [theme.breakpoints.down(710)]: { - textAlign: 'center', - padding: theme.spacing(1, 0), - marginRight: 'inherit', - maxWidth: 'inherit', - }, -})); - -const StyledValuesSpan = styled('span')(({ theme }) => ({ - display: '-webkit-box', - WebkitLineClamp: 2, - WebkitBoxOrient: 'vertical', - overflow: 'hidden', - wordBreak: 'break-word', - fontSize: theme.fontSizes.smallBody, - [theme.breakpoints.down(710)]: { - margin: theme.spacing(1, 0), - textAlign: 'center', - }, -})); - -const StyledSingleValueChip = styled(Chip)(({ theme }) => ({ - [theme.breakpoints.down(710)]: { - margin: theme.spacing(1, 0), - }, -})); - -const StyledIconWrapper = styled('div')<{ - marginRight?: string; - marginTop?: string; -}>(({ theme, marginRight, marginTop }) => ({ - backgroundColor: theme.palette.grey[200], - width: 28, - height: 47, - display: 'inline-flex', - justifyContent: 'center', - padding: '10px 0', - color: theme.palette.primary.main, - marginRight: marginRight ? marginRight : '0.75rem', - marginTop: marginTop ? marginTop : 0, -})); +import React from 'react'; +import { ConstraintAccordionViewHeaderInfo } from './ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo'; +import { ConstraintAccordionHeaderActions } from '../../ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions'; interface IConstraintAccordionViewHeaderProps { compact: boolean; @@ -88,161 +26,21 @@ export const ConstraintAccordionViewHeader = ({ expanded, }: IConstraintAccordionViewHeaderProps) => { const { classes: styles } = useStyles(); - const { locationSettings } = useLocationSettings(); - const [width, setWidth] = useState(0); - const [textWidth, setTextWidth] = useState(0); - const [expandable, setExpandable] = useState(false); - const elementRef = useRef(null); - - const onEditClick = - onEdit && - ((event: React.SyntheticEvent) => { - event.stopPropagation(); - onEdit(); - }); - - const onDeleteClick = - onDelete && - ((event: React.SyntheticEvent) => { - event.stopPropagation(); - onDelete(); - }); - - useEffect(() => { - if (elementRef && elementRef.current != null) { - setTextWidth( - Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines - ); - setWidth(elementRef.current.clientWidth); - } - }, []); - - useEffect(() => { - if (textWidth && width) { - setExpandable(textWidth > width); - allowExpand(textWidth > width); - } - }, [textWidth, width, allowExpand]); return (
-
- - - {constraint.contextName} - - -
- - - - - - } - /> -
- -
-
- - - - {' '} - - - } - /> - -
- } - elseShow={ -
- - - {' '} - - - } - /> -
- - {constraint?.values - ?.map(value => value) - .join(', ')} - - - {!expanded - ? `Expand to view all ( - ${constraint?.values?.length})` - : 'Collapse to view less'} -

- } - /> -
-
- } - /> -
-
- ( - - - - - - )} - /> - ( - - - - - - )} - /> -
+ + ); }; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx new file mode 100644 index 0000000000..3e2fc4e282 --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeaderInfo/ConstraintAccordionViewHeaderInfo.tsx @@ -0,0 +1,65 @@ +import { styled, Tooltip } from '@mui/material'; +import { ConstraintViewHeaderOperator } from '../ConstraintViewHeaderOperator/ConstraintViewHeaderOperator'; +import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; +import { ContraintAccordionViewHeaderSingleValue } from '../ContraintAccordionViewHeaderSingleValue/ContraintAccordionViewHeaderSingleValue'; +import { ConstraintAccordionViewHeaderMultipleValues } from '../ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues'; +import React from 'react'; +import { IConstraint } from '../../../../../../interfaces/strategy'; +import { useStyles } from '../../../ConstraintAccordion.styles'; + +const StyledHeaderText = styled('span')(({ theme }) => ({ + display: '-webkit-box', + WebkitLineClamp: 3, + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + maxWidth: '100px', + minWidth: '100px', + marginRight: '10px', + wordBreak: 'break-word', + fontSize: theme.fontSizes.smallBody, + [theme.breakpoints.down(710)]: { + textAlign: 'center', + padding: theme.spacing(1, 0), + marginRight: 'inherit', + maxWidth: 'inherit', + }, +})); + +interface ConstraintAccordionViewHeaderMetaInfoProps { + constraint: IConstraint; + singleValue: boolean; + expanded: boolean; + allowExpand: (shouldExpand: boolean) => void; +} + +export const ConstraintAccordionViewHeaderInfo = ({ + constraint, + singleValue, + allowExpand, + expanded, +}: ConstraintAccordionViewHeaderMetaInfoProps) => { + const { classes: styles } = useStyles(); + return ( +
+ + {constraint.contextName} + + + + } + elseShow={ + + } + /> +
+ ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx new file mode 100644 index 0000000000..98022eddeb --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintViewHeaderOperator/ConstraintViewHeaderOperator.tsx @@ -0,0 +1,36 @@ +import { IConstraint } from '../../../../../../interfaces/strategy'; +import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; +import { Tooltip } from '@mui/material'; +import { ReactComponent as NegatedIcon } from '../../../../../../assets/icons/24_Negator.svg'; +import { ConstraintOperator } from '../../../ConstraintOperator/ConstraintOperator'; +import React from 'react'; +import { useStyles } from '../../../ConstraintAccordion.styles'; +import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper'; + +interface ConstraintViewHeaderOperatorProps { + constraint: IConstraint; +} + +export const ConstraintViewHeaderOperator = ({ + constraint, +}: ConstraintViewHeaderOperatorProps) => { + const { classes: styles } = useStyles(); + + return ( +
+ + + + + + } + /> +
+ +
+
+ ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx new file mode 100644 index 0000000000..606c6c099d --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderMultipleValues/ConstraintAccordionViewHeaderMultipleValues.tsx @@ -0,0 +1,102 @@ +import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; +import { oneOf } from '../../../../../../utils/oneOf'; +import { stringOperators } from '../../../../../../constants/operators'; +import { styled, Tooltip } from '@mui/material'; +import { ReactComponent as CaseSensitive } from '../../../../../../assets/icons/24_Text format.svg'; +import React, { useEffect, useRef, useState } from 'react'; +import classnames from 'classnames'; +import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper'; +import { IConstraint } from '../../../../../../interfaces/strategy'; +import { useStyles } from '../../../ConstraintAccordion.styles'; +import { getTextWidth } from '../../../helpers'; + +const StyledValuesSpan = styled('span')(({ theme }) => ({ + display: '-webkit-box', + WebkitLineClamp: 2, + WebkitBoxOrient: 'vertical', + overflow: 'hidden', + wordBreak: 'break-word', + fontSize: theme.fontSizes.smallBody, + [theme.breakpoints.down(710)]: { + margin: theme.spacing(1, 0), + textAlign: 'center', + }, +})); + +interface ConstraintSingleValueProps { + constraint: IConstraint; + expanded: boolean; + allowExpand: (shouldExpand: boolean) => void; +} + +export const ConstraintAccordionViewHeaderMultipleValues = ({ + constraint, + expanded, + allowExpand, +}: ConstraintSingleValueProps) => { + const { classes: styles } = useStyles(); + + const elementRef = useRef(null); + + const [width, setWidth] = useState(0); + const [textWidth, setTextWidth] = useState(0); + const [expandable, setExpandable] = useState(false); + + useEffect(() => { + if (elementRef && elementRef.current != null) { + setTextWidth( + Math.round(getTextWidth(elementRef.current.innerText) / 2) // 2 lines + ); + setWidth(elementRef.current.clientWidth); + } + }, []); + + useEffect(() => { + if (textWidth && width) { + setExpandable(textWidth > width); + } + }, [textWidth, width]); + + useEffect(() => { + allowExpand(expandable); + }, [expandable, allowExpand]); + + return ( +
+ + + {' '} + + + } + /> +
+ + {constraint?.values?.map(value => value).join(', ')} + + + {!expanded + ? `Expand to view all ( + ${constraint?.values?.length})` + : 'Collapse to view less'} +

+ } + /> +
+
+ ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ContraintAccordionViewHeaderSingleValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ContraintAccordionViewHeaderSingleValue.tsx new file mode 100644 index 0000000000..00818af583 --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ContraintAccordionViewHeaderSingleValue/ContraintAccordionViewHeaderSingleValue.tsx @@ -0,0 +1,49 @@ +import { ConditionallyRender } from '../../../../ConditionallyRender/ConditionallyRender'; +import { oneOf } from '../../../../../../utils/oneOf'; +import { stringOperators } from '../../../../../../constants/operators'; +import { Chip, styled, Tooltip } from '@mui/material'; +import { ReactComponent as CaseSensitive } from '../../../../../../assets/icons/24_Text format.svg'; +import { formatConstraintValue } from '../../../../../../utils/formatConstraintValue'; +import React from 'react'; +import { useStyles } from '../../../ConstraintAccordion.styles'; +import { StyledIconWrapper } from '../StyledIconWrapper/StyledIconWrapper'; +import { IConstraint } from '../../../../../../interfaces/strategy'; +import { useLocationSettings } from '../../../../../../hooks/useLocationSettings'; + +const StyledSingleValueChip = styled(Chip)(({ theme }) => ({ + [theme.breakpoints.down(710)]: { + margin: theme.spacing(1, 0), + }, +})); + +interface ConstraintSingleValueProps { + constraint: IConstraint; +} + +export const ContraintAccordionViewHeaderSingleValue = ({ + constraint, +}: ConstraintSingleValueProps) => { + const { locationSettings } = useLocationSettings(); + const { classes: styles } = useStyles(); + + return ( +
+ + + {' '} + + + } + /> + +
+ ); +}; diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx new file mode 100644 index 0000000000..0d84e094fb --- /dev/null +++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper/StyledIconWrapper.tsx @@ -0,0 +1,16 @@ +import { styled } from '@mui/material'; + +export const StyledIconWrapper = styled('div')<{ + marginRight?: string; + marginTop?: string; +}>(({ theme, marginRight, marginTop }) => ({ + backgroundColor: theme.palette.grey[200], + width: 28, + height: 47, + display: 'inline-flex', + justifyContent: 'center', + padding: '10px 0', + color: theme.palette.primary.main, + marginRight: marginRight ? marginRight : '0.75rem', + marginTop: marginTop ? marginTop : 0, +})); diff --git a/frontend/src/component/common/ConstraintAccordion/utils.ts b/frontend/src/component/common/ConstraintAccordion/helpers.ts similarity index 100% rename from frontend/src/component/common/ConstraintAccordion/utils.ts rename to frontend/src/component/common/ConstraintAccordion/helpers.ts