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.

Sign up for GitHub

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

Jump to bottom

Psp 6898 correct document list view paging, use built in table paging. #3475

Merged
merged 1 commit into from
Sep 15, 2023
Merged

Psp 6898 correct document list view paging, use built in table paging. #3475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
15 changes: 0 additions & 15 deletions source/frontend/src/features/documents/list/DocumentListContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,6 @@ const DocumentListContainer: React.FunctionComponent<

const [documentResults, setDocumentResults] = useState<DocumentRow[]>([]);

const [pageProps, setPageProps] = useState<{ pageIndex?: number; pageSize: number }>({
pageIndex: 0,
pageSize: 10,
});

const {
retrieveDocumentRelationship,
retrieveDocumentRelationshipLoading,
Expand Down Expand Up @@ -78,14 +73,6 @@ const DocumentListContainer: React.FunctionComponent<
retrieveDocuments();
}, [retrieveDocuments]);

const currentPageIndex = pageProps.pageIndex;
const onPageChange = useCallback(
({ pageIndex, pageSize }: { pageIndex?: number; pageSize: number }) => {
setPageProps({ pageIndex: pageIndex ?? currentPageIndex, pageSize });
},
[currentPageIndex],
);

return (
<DocumentListView
parentId={props.parentId}
Expand All @@ -96,8 +83,6 @@ const DocumentListContainer: React.FunctionComponent<
onDelete={onDelete}
onSuccess={onSuccess}
disableAdd={props.disableAdd}
onPageChange={onPageChange}
pageProps={pageProps}
title={props.title}
/>
);
Expand Down
13 changes: 0 additions & 13 deletions source/frontend/src/features/documents/list/DocumentListView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ const storeState = {
};

const deleteMock = jest.fn().mockResolvedValue(true);
const onPageChange = jest.fn();

const mockDocumentRowResponse = () =>
mockDocumentsResponse().map(x => (x?.document ? DocumentRow.fromApi(x) : new DocumentRow()));
Expand Down Expand Up @@ -61,8 +60,6 @@ describe('Document List View', () => {
}
onDelete={renderOptions?.onDelete || deleteMock}
onSuccess={renderOptions?.onSuccess || noop}
onPageChange={renderOptions?.onPageChange ?? onPageChange}
pageProps={renderOptions?.pageProps ?? { pageSize: 10, pageIndex: 0 }}
/>,
{
...renderOptions,
Expand Down Expand Up @@ -103,8 +100,6 @@ describe('Document List View', () => {
onDelete: deleteMock,
onSuccess: noop,
claims: [Claims.DOCUMENT_ADD, Claims.DOCUMENT_DELETE, Claims.DOCUMENT_VIEW],
onPageChange,
pageProps: { pageSize: 10, pageIndex: 0 },
});
await act(async () => expect(getByTestId('document-type')).toBeInTheDocument());
});
Expand All @@ -119,8 +114,6 @@ describe('Document List View', () => {
onDelete: deleteMock,
onSuccess: noop,
claims: [Claims.DOCUMENT_ADD, Claims.DOCUMENT_DELETE, Claims.DOCUMENT_VIEW],
onPageChange,
pageProps: { pageSize: 10, pageIndex: 0 },
});
await act(async () => expect(getByTestId('document-filename')).toBeInTheDocument());
});
Expand All @@ -135,8 +128,6 @@ describe('Document List View', () => {
onDelete: deleteMock,
onSuccess: noop,
claims: [Claims.DOCUMENT_ADD, Claims.DOCUMENT_DELETE, Claims.DOCUMENT_VIEW],
onPageChange,
pageProps: { pageSize: 10, pageIndex: 0 },
});
await act(async () => expect(getByText('Add a Document')).toBeInTheDocument());
});
Expand All @@ -154,8 +145,6 @@ describe('Document List View', () => {
onDelete: deleteMock,
onSuccess: noop,
claims: [Claims.DOCUMENT_ADD, Claims.DOCUMENT_DELETE, Claims.DOCUMENT_VIEW],
onPageChange,
pageProps: { pageSize: 10, pageIndex: 0 },
});
const downloadButtonTooltip = await queryByTestId('document-download-button');
await act(async () => expect(downloadButtonTooltip).toBeNull());
Expand All @@ -173,8 +162,6 @@ describe('Document List View', () => {
onDelete: deleteMock,
onSuccess: noop,
claims: [Claims.DOCUMENT_ADD, Claims.DOCUMENT_DELETE, Claims.DOCUMENT_VIEW],
onPageChange,
pageProps: { pageSize: 10, pageIndex: 0 },
});
const deleteButtonTooltip = await findAllByTestId('document-delete-button');
act(() => userEvent.click(deleteButtonTooltip[0]));
Expand Down
14 changes: 1 addition & 13 deletions source/frontend/src/features/documents/list/DocumentListView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,7 @@ export interface IDocumentListViewProps {
addButtonText?: string;
onDelete: (relationship: Api_DocumentRelationship) => Promise<boolean | undefined>;
onSuccess: () => void;
onPageChange: (props: { pageIndex?: number; pageSize: number }) => void;
disableAdd?: boolean;
pageProps: { pageIndex?: number; pageSize: number };
title?: string;
}
/**
Expand All @@ -39,15 +37,7 @@ export interface IDocumentListViewProps {
export const DocumentListView: React.FunctionComponent<
React.PropsWithChildren<IDocumentListViewProps>
> = (props: IDocumentListViewProps) => {
const {
documentResults,
isLoading,
defaultFilters,
hideFilters,
onPageChange,
pageProps,
title,
} = props;
const { documentResults, isLoading, defaultFilters, hideFilters, title } = props;

const [showDeleteConfirmModal, setShowDeleteConfirmModal] = useState<boolean>(false);

Expand Down Expand Up @@ -197,8 +187,6 @@ export const DocumentListView: React.FunctionComponent<
setSort={setSort}
onViewDetails={handleViewDetails}
onDelete={handleDeleteClick}
onPageChange={onPageChange}
pageProps={pageProps}
/>
</Section>
<DocumentDetailModal
Expand Down
2 changes: 0 additions & 2 deletions source/frontend/src/features/documents/list/DocumentResults/DocumentResults.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ const setup = (renderOptions: RenderOptions & Partial<IDocumentResultProps> = {
setSort={setSort}
onViewDetails={noop}
onDelete={noop}
onPageChange={noop}
pageProps={{ pageSize: 10, pageIndex: 0 }}
/>,
{
...rest,
Expand Down
17 changes: 4 additions & 13 deletions source/frontend/src/features/documents/list/DocumentResults/DocumentResults.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { Table } from '@/components/Table';
import { TableSort } from '@/components/Table/TableSort';
import { DocumentRow } from '@/features/documents/ComposedDocument';
import { Api_Document, Api_DocumentRelationship } from '@/models/api/Document';
import { getPage } from '@/utils';

import { getDocumentColumns } from './DocumentResultsColumns';

Expand All @@ -15,13 +14,11 @@ export interface IDocumentResultProps {
setSort: (value: TableSort<Api_Document>) => void;
onViewDetails: (values: Api_DocumentRelationship) => void;
onDelete: (values: Api_DocumentRelationship) => void;
onPageChange: (props: { pageIndex?: number; pageSize: number }) => void;
pageProps: { pageIndex?: number; pageSize: number };
}

export const DocumentResults: React.FunctionComponent<
React.PropsWithChildren<IDocumentResultProps>
> = ({ results, setSort, sort, onViewDetails, onDelete, pageProps, ...rest }) => {
> = ({ results, setSort, sort, onViewDetails, onDelete, ...rest }) => {
const columns = useMemo(
() => getDocumentColumns({ onViewDetails, onDelete }),
[onViewDetails, onDelete],
Expand All @@ -31,19 +28,13 @@ export const DocumentResults: React.FunctionComponent<
<Table<DocumentRow>
name="documentsTable"
manualSortBy={false}
manualPagination
onPageSizeChange={size => {
rest.onPageChange({ pageSize: size });
}}
onRequestData={rest.onPageChange}
totalItems={results.length}
columns={columns}
externalSort={{ sort, setSort }}
data={getPage(pageProps.pageIndex ?? 0, pageProps.pageSize, results) ?? []}
data={results ?? []}
noRowsMessage="No matching Documents found"
pageCount={Math.ceil(results.length / pageProps.pageSize)}
pageSize={pageProps.pageSize}
pageIndex={pageProps.pageIndex}
pageSize={1}
manualPagination={false}
{...rest}
></Table>
);
Expand Down
116 changes: 19 additions & 97 deletions ...d/src/features/documents/list/DocumentResults/__snapshots__/DocumentResults.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,97 +347,6 @@ exports[`Document Results Table matches snapshot 1`] = `
</div>
</div>
</div>
<div
class="tr-wrapper"
>
<div
class="tr"
role="row"
style="display: flex; flex: 1 0 auto; min-width: 150px;"
>
<div
class="td"
role="cell"
style="box-sizing: border-box; flex: 100 0 auto; min-width: 30px; width: 100px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
MOTIPLAN
</div>
<div
class="td"
role="cell"
style="box-sizing: border-box; flex: 100 0 auto; min-width: 30px; width: 100px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
<span
data-testid="document-view-filename-text"
>
moti_plan.txt
</span>
</div>
<div
class="td"
role="cell"
style="box-sizing: border-box; flex: 100 0 auto; min-width: 30px; width: 100px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
<div
class="no-gutters row"
>
<div
class="col"
>
Sep 8, 2022
</div>
<div
class="col-auto"
>
<span
class=""
>
<span
class="tooltip-icon"
data-testid="tooltip-icon-initiator-tooltip"
id="initiator-tooltip"
>
<svg
fill="currentColor"
height="15"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 512 512"
width="15"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z"
/>
</svg>
</span>
</span>
</div>
</div>
</div>
<div
class="td"
role="cell"
style="box-sizing: border-box; flex: 100 0 auto; min-width: 30px; width: 100px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
Amended
</div>
<div
class="td"
role="cell"
style="box-sizing: border-box; flex: 90 0 auto; min-width: 30px; width: 90px; justify-content: left; text-align: left; flex-wrap: wrap; align-items: center; display: flex;"
title=""
>
<div
class="c3 no-gutters row"
/>
</div>
</div>
</div>
</div>
</div>
.c0 {
Expand All @@ -451,7 +360,7 @@ exports[`Document Results Table matches snapshot 1`] = `
class="align-self-center col-auto"
>
<span>
1 - 2 of 2
1 - 1 of 2
</span>
</div>
<div
Expand Down Expand Up @@ -479,7 +388,7 @@ exports[`Document Results Table matches snapshot 1`] = `
disabled=""
style="width: 50px; margin-left: 10px; margin-right: 10px; background-color: white;"
type="number"
value="10"
value="1"
/>
<span
class="c0"
Expand Down Expand Up @@ -564,15 +473,28 @@ exports[`Document Results Table matches snapshot 1`] = `
</a>
</li>
<li
class="page-item disabled"
class="page-item"
>
<a
aria-disabled="true"
aria-label="Page 2"
class="page-link"
rel="next"
role="button"
tabindex="0"
>
2
</a>
</li>
<li
class="page-item"
>
<a
aria-disabled="false"
aria-label="Next page"
class="page-link "
class="page-link"
rel="next"
role="button"
tabindex="-1"
tabindex="0"
>
&gt;
</a>
Expand Down
Loading
Loading