Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PSP-9630: Historical File on Header - ability to hide Historical File Numbers when headers is expanded #4593

Merged
merged 7 commits into from
Jan 14, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 31 additions & 3 deletions source/frontend/src/components/common/ExpandableTextList.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Fragment, ReactElement, useState } from 'react';
import { Fragment, ReactElement, useEffect, useState } from 'react';

import { exists } from '@/utils/utils';

@@ -10,6 +10,7 @@ export interface IExpandableTextListProps<T> {
keyFunction: (item: T, index: number) => string;
delimiter?: ReactElement | string;
maxCollapsedLength?: number;
maxExpandedLength?: number;
className?: string;
moreText?: string;
hideText?: string;
@@ -25,12 +26,39 @@ export function ExpandableTextList<T>({
renderFunction,
delimiter,
maxCollapsedLength,
maxExpandedLength,
moreText,
hideText,
}: IExpandableTextListProps<T>) {
const [isExpanded, setIsExpanded] = useState(false);
const displayedItemsLength = !isExpanded ? maxCollapsedLength ?? items.length : items.length;
const [displayedItemsLength, setDisplayedItemsLength] = useState(
!isExpanded ? maxCollapsedLength ?? items.length : maxExpandedLength ?? items.length,
);
const displayedItems = items.slice(0, displayedItemsLength);

const updateDisplayedItemsLength = () => {
if (maxExpandedLength !== undefined && displayedItemsLength < items.length) {
const remainingItems = items.length - displayedItemsLength;
if (remainingItems >= maxExpandedLength) {
setDisplayedItemsLength(displayedItemsLength + maxExpandedLength);
} else {
setDisplayedItemsLength(displayedItemsLength + remainingItems);
}
} else {
setIsExpanded(prevState => !prevState);
}
};

useEffect(() => {
setDisplayedItemsLength(!isExpanded ? maxCollapsedLength ?? items.length : items.length);
}, [isExpanded, items.length, maxCollapsedLength]);

useEffect(() => {
if (displayedItemsLength === items.length) {
setIsExpanded(true);
}
}, [displayedItemsLength, items.length]);

return (
<Fragment>
{displayedItems.map((item: T, index: number) => (
@@ -40,7 +68,7 @@ export function ExpandableTextList<T>({
</span>
))}
{exists(maxCollapsedLength) && maxCollapsedLength < items.length && (
<LinkButton data-testid="expand" onClick={() => setIsExpanded(collapse => !collapse)}>
<LinkButton data-testid="expand" onClick={() => updateDisplayedItemsLength()}>
{isExpanded
? hideText ?? 'hide'
: `[+${items.length - displayedItemsLength} ${moreText ?? 'more...'}]`}
Original file line number Diff line number Diff line change
@@ -77,7 +77,7 @@ export const MotiInventoryHeader: React.FunctionComponent<IMotiInventoryHeaderPr
const hasLocation = exists(longitude) && exists(latitude);

return (
<>
<HeaderMaxWidthHeight>
<LoadingBackdrop show={isLoading} parentScreen={true} />
<Row className="no-gutters">
<Col xs="7">
@@ -134,7 +134,7 @@ export const MotiInventoryHeader: React.FunctionComponent<IMotiInventoryHeaderPr
</Col>
</Row>
<StyledDivider />
</>
</HeaderMaxWidthHeight>
);
};

@@ -145,6 +145,12 @@ const StyledDivider = styled.div`
border-bottom-width: 0.1rem;
`;

const HeaderMaxWidthHeight = styled.div`
overflow-y: auto;
overflow-x: hidden;
max-height: 50rem;
`;

export const PropertyStyleStatus = styled(InlineFlexDiv)`
text-transform: uppercase;
color: ${props => props.theme.css.textWarningColor};
Original file line number Diff line number Diff line change
@@ -6,12 +6,12 @@ exports[`MotiInventoryHeader component > renders as expected 1`] = `
class="Toastify"
/>
<div />
.c0 {
.c1 {
font-weight: bold;
white-space: nowrap;
}
.c1 {
.c2 {
height: 100%;
display: -webkit-box;
display: -webkit-flex;
@@ -22,118 +22,128 @@ exports[`MotiInventoryHeader component > renders as expected 1`] = `
flex-direction: column;
}
.c3 {
margin-top: 0.5rem;
border-bottom-style: solid;
border-bottom-color: grey;
border-bottom-width: 0.1rem;
}
.c0 {
overflow-y: auto;
overflow-x: hidden;
max-height: 50rem;
}
<div
class="no-gutters row"
class="c0"
>
<div
class="col-7"
class="no-gutters row"
>
<div
class="justify-content-start row"
class="col-7"
>
<div
class="pr-0 text-left col-3"
class="justify-content-start row"
>
<label
class="c0"
<div
class="pr-0 text-left col-3"
>
PID #:
</label>
</div>
<div
class="pl-1 text-left col-auto"
/>
<div
class="pr-0 text-left col-auto"
>
<label
class="c0"
<label
class="c1"
>
PID #:
</label>
</div>
<div
class="pl-1 text-left col-auto"
/>
<div
class="pr-0 text-left col-auto"
>
PIN #:
</label>
</div>
<div
class="pl-1 text-left col-auto"
>
<span
class="pl-2"
<label
class="c1"
>
PIN #:
</label>
</div>
<div
class="pl-1 text-left col-auto"
>
-
</span>
<span
class="pl-2"
>
-
</span>
</div>
</div>
</div>
<div
class="row"
>
<div
class="pr-0 text-left col-3"
class="row"
>
<label
class="c0"
<div
class="pr-0 text-left col-3"
>
Civic Address:
</label>
</div>
<div
class="pl-1 text-left col-9"
>
-
<label
class="c1"
>
Civic Address:
</label>
</div>
<div
class="pl-1 text-left col-9"
>
-
</div>
</div>
</div>
<div
class="row"
>
<div
class="pr-0 text-left col-3"
class="row"
>
<label
class="c0"
<div
class="pr-0 text-left col-3"
>
Plan #:
</label>
<label
class="c1"
>
Plan #:
</label>
</div>
<div
class="pl-1 text-left col-9"
/>
</div>
<div
class="pl-1 text-left col-9"
/>
</div>
</div>
<div
class="text-right col"
>
<div
class="c1"
class="text-right col"
>
<div
class="justify-content-end row"
class="c2"
>
<div
class="pr-0 text-left col-auto"
class="justify-content-end row"
>
<label
class="c0"
<div
class="pr-0 text-left col-auto"
>
Land parcel type:
</label>
<label
class="c1"
>
Land parcel type:
</label>
</div>
<div
class="pl-1 text-left col-auto"
/>
</div>
<div
class="pl-1 text-left col-auto"
/>
</div>
</div>
<div
class="d-flex p-0 align-items-center justify-content-end col-auto"
/>
</div>
<div
class="d-flex p-0 align-items-center justify-content-end col-auto"
class="c3"
/>
</div>
.c0 {
margin-top: 0.5rem;
border-bottom-style: solid;
border-bottom-color: grey;
border-bottom-width: 0.1rem;
}
<div
class="c0"
/>
</DocumentFragment>
`;
Original file line number Diff line number Diff line change
@@ -76,6 +76,7 @@ export const HistoricalNumberFieldView: React.FC<IHistoricalNumbersViewProps> =
renderFunction={p => <>{p.historicalFileNumber}</>}
delimiter={'; '}
maxCollapsedLength={3}
maxExpandedLength={10}
className="d-flex flex-wrap"
/>
</GroupWrapper>