From ff5ce10e17fff76ac5c1193bba4dec79c31f6b1b Mon Sep 17 00:00:00 2001 From: rishighan Date: Thu, 27 Oct 2022 23:06:40 -0700 Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Library=20page=20table=20paginat?= =?UTF-8?q?ion?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/client/assets/scss/App.scss | 16 +- src/client/components/Dashboard/PullList.tsx | 2 +- src/client/components/Library/Library.tsx | 320 ++++++++++++------ .../components/Library/LibraryContainer.tsx | 101 +++--- src/client/components/Library/SearchBar.tsx | 4 +- .../components/shared/MetadataPanel.tsx | 11 +- src/client/components/shared/T2Table.tsx | 33 +- src/client/reducers/fileops.reducer.ts | 2 +- 8 files changed, 309 insertions(+), 180 deletions(-) diff --git a/src/client/assets/scss/App.scss b/src/client/assets/scss/App.scss index 4d71949..2713a11 100644 --- a/src/client/assets/scss/App.scss +++ b/src/client/assets/scss/App.scss @@ -411,10 +411,18 @@ pre { } // Library .sticky { - position: sticky; - top: 57px; - z-index: 2; background: #fffffc; + position: sticky; + top: 107px; + z-index: 5; + + .title { + background: #fffffc; + position: relative; + top: -56px; + z-index: 99999; + padding-top: 20px; + } } .library { @@ -423,7 +431,7 @@ pre { width: 100%; thead { position: sticky; - top: 146px; + top: 176px; z-index: 1; background: #fffffc; min-height: 130px; diff --git a/src/client/components/Dashboard/PullList.tsx b/src/client/components/Dashboard/PullList.tsx index 4030c48..e18cb2c 100644 --- a/src/client/components/Dashboard/PullList.tsx +++ b/src/client/components/Dashboard/PullList.tsx @@ -20,7 +20,7 @@ export const PullList = ({ issues }: PullListProps): ReactElement => { useEffect(() => { dispatch( getWeeklyPullList({ - startDate: "2022-9-9", + startDate: "2022-10-9", pageSize: "15", currentPage: "1", }), diff --git a/src/client/components/Library/Library.tsx b/src/client/components/Library/Library.tsx index bb5cce5..fcea57a 100644 --- a/src/client/components/Library/Library.tsx +++ b/src/client/components/Library/Library.tsx @@ -1,22 +1,169 @@ -import React, { useMemo, ReactElement, useCallback } from "react"; +import React, { useMemo, ReactElement, useCallback, useEffect } from "react"; import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; -import T2Table from "../shared/T2Table"; import { isEmpty, isNil, isUndefined } from "lodash"; import MetadataPanel from "../shared/MetadataPanel"; import SearchBar from "./SearchBar"; -import { useDispatch } from "react-redux"; +import { useDispatch, useSelector } from "react-redux"; import { searchIssue } from "../../actions/fileops.actions"; import ellipsize from "ellipsize"; -interface IComicBookLibraryProps { - data: { - searchResults: any; - }; -} -export const Library = (data: IComicBookLibraryProps): ReactElement => { - const { searchResults } = data.data; +import { + ColumnDef, + flexRender, + getCoreRowModel, + getFilteredRowModel, + useReactTable, + PaginationState, +} from "@tanstack/react-table"; + + +export const Library = (): ReactElement => { + const searchResults = useSelector( + (state: RootState) => state.fileOps.libraryComics, + ); + const searchError = useSelector( + (state: RootState) => state.fileOps.librarySearchError, + ); + const dispatch = useDispatch(); + useEffect(() => { + dispatch( + searchIssue( + { + query: {}, + }, + { + pagination: { + size: 25, + from: 0, + }, + type: "all", + trigger: "libraryPage" + }, + ), + ); + }, []); + + const T2Table = (tableOptions): ReactElement => { + const { columns, totalPages, rowClickHandler } = + tableOptions; + + + // pagination methods + const goToNextPage = useCallback((pageIndex, pageSize) => { + dispatch( + searchIssue( + { + query: {}, + }, + { + pagination: { + size: pageSize, + from: pageSize * pageIndex + 1, + }, + type: "all", + trigger: "libraryPage", + }, + ), + ); + }, []); + + + const goToPreviousPage = useCallback((pageIndex, pageSize) => { + let from = 0; + if (pageIndex === 2) { + from = (pageIndex - 1) * pageSize + 2 - 27; + } else { + from = (pageIndex - 1) * pageSize + 2 - 26; + } + dispatch( + searchIssue( + { + query: {}, + }, + { + pagination: { + size: pageSize, + from, + }, + type: "all", + trigger: "libraryPage" + }, + ), + ); + }, []); + + const table = useReactTable({ + data: searchResults.hits.hits, + columns, + manualPagination: true, + getCoreRowModel: getCoreRowModel(), + + getFilteredRowModel: getFilteredRowModel(), + pageCount: totalPages, + // getPaginationRowModel: getPaginationRowModel(), + + debugTable: true, + }); + + return ( + <> + + + {table.getHeaderGroups().map((headerGroup, idx) => ( + + {headerGroup.headers.map((header, idx) => ( + + ))} + + ))} + + + + {table.getRowModel().rows.map((row, idx) => { + return ( + rowClickHandler(row)} + > + {row.getVisibleCells().map(cell => ( + + ))} + + ); + })} + +
+ {header.isPlaceholder + ? null + : flexRender( + header.column.columnDef.header, + header.getContext() + )} +
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
+ + {/* pagination control */} + + + + ); + }; // programatically navigate to comic detail const navigate = useNavigate(); @@ -65,124 +212,81 @@ export const Library = (data: IComicBookLibraryProps): ReactElement => { const WantedStatus = ({ value }) => { return !value ? Wanted : null; }; - const columns = [ - { - header: "Comic Metadata", - footer: 1, - columns: [ - { - header: "File Details", - id: "fileDetails", - minWidth: 400, - accessorKey: "_source", - cell: info => { - return ; - }, + const columns = [ + { + header: "Comic Metadata", + footer: 1, + columns: [ + { + header: "File Details", + id: "fileDetails", + minWidth: 400, + accessorKey: "_source", + cell: info => { + return ; }, - { - header: "ComicInfo.xml", - accessorKey: "_source.sourcedMetadata.comicInfo", - align: "center", - minWidth: 250, - cell: info => - !isEmpty(info.getValue()) ? ( - - ) : ( - No ComicInfo.xml - ), + }, + { + header: "ComicInfo.xml", + accessorKey: "_source.sourcedMetadata.comicInfo", + align: "center", + minWidth: 250, + cell: info => + !isEmpty(info.getValue()) ? ( + + ) : ( + No ComicInfo.xml + ), + }, + ], + }, + { + header: "Additional Metadata", + columns: [ + { + header: "Publisher", + accessorKey: + "_source.sourcedMetadata.comicvine.volumeInformation", + cell: info => { + return ( + !isNil(info.getValue()) && ( +
+ {info.getValue().publisher.name} +
+ ) + ); }, - ], - }, - { - header: "Additional Metadata", - columns: [ - { - header: "Publisher", - accessorKey: - "_source.sourcedMetadata.comicvine.volumeInformation", - cell: info => { - return ( - !isNil(info.getValue()) && ( -
- { info.getValue().publisher.name } -
- ) - ); - }, - }, - { - header: "Something", - accessorKey: "_source.acquisition.source.wanted", - cell: info => { - !isUndefined(info.getValue()) ? + }, + { + header: "Something", + accessorKey: "_source.acquisition.source.wanted", + cell: info => { + !isUndefined(info.getValue()) ? : "Nothing"; - }, }, - ], - } - ] + }, + ], + } + ] // ImportStatus.propTypes = { // value: PropTypes.bool.isRequired, // }; - const dispatch = useDispatch(); - const goToNextPage = useCallback((pageIndex, pageSize) => { - dispatch( - searchIssue( - { - query: {}, - }, - { - pagination: { - size: pageSize, - from: pageSize * pageIndex + 1, - }, - type: "all", - }, - ), - ); - }, []); - const goToPreviousPage = useCallback((pageIndex, pageSize) => { - let from = 0; - if (pageIndex === 2) { - from = (pageIndex - 1) * pageSize + 2 - 27; - } else { - from = (pageIndex - 1) * pageSize + 2 - 26; - } - dispatch( - searchIssue( - { - query: {}, - }, - { - pagination: { - size: pageSize, - from, - }, - type: "all", - }, - ), - ); - }, []); return (
-

Library

+

Library

{/* Search bar */} - {!isUndefined(searchResults) && ( + {!isUndefined(searchResults.hits) && (
{/* pagination controls */} diff --git a/src/client/components/Library/LibraryContainer.tsx b/src/client/components/Library/LibraryContainer.tsx index 07bb2c5..7769ab0 100644 --- a/src/client/components/Library/LibraryContainer.tsx +++ b/src/client/components/Library/LibraryContainer.tsx @@ -5,59 +5,58 @@ import { searchIssue } from "../../actions/fileops.actions"; import { Library } from "./Library"; const LibraryContainer = (): ReactElement => { - const dispatch = useDispatch(); - useEffect(() => { - dispatch( - searchIssue( - { - query: {}, - }, - { - pagination: { - size: 25, - from: 0, - }, - type: "all", - trigger: "libraryPage" - }, - ), - ); - }, []); + // const dispatch = useDispatch(); + // useEffect(() => { + // dispatch( + // searchIssue( + // { + // query: {}, + // }, + // { + // pagination: { + // size: 25, + // from: 0, + // }, + // type: "all", + // trigger: "libraryPage" + // }, + // ), + // ); + // }, []); - const searchResults = useSelector( - (state: RootState) => state.fileOps.libraryComics, - ); - const searchError = useSelector( - (state: RootState) => state.fileOps.librarySearchError, - ); + // const searchResults = useSelector( + // (state: RootState) => state.fileOps.libraryComics, + // ); + // const searchError = useSelector( + // (state: RootState) => state.fileOps.librarySearchError, + // ); - return !isEmpty(searchResults) ? ( - - ) : ( -
-
-
-
-
-
- No comics were found in the library, Elasticsearch reports no - indices. Try importing a few comics into the library and come - back. -
-
- 
-              {!isUndefined(searchError.data) &&
-                JSON.stringify(
-                  searchError.data.meta.body.error.root_cause,
-                  null,
-                  4,
-                )}
-
-
-
-
-
- ); + return ( + ) + // : ( + //
+ //
+ //
+ //
+ //
+ //
+ // No comics were found in the library, and Elasticsearch doesn't have any + // indices. Try resetting the library from Settings > Flush DB & Temporary Folders and then import your library again. + //
+ //
+ // 
+  //             {!isUndefined(searchError.data) &&
+  //               JSON.stringify(
+  //                 searchError.data.meta.body.error.root_cause,
+  //                 null,
+  //                 4,
+  //               )}
+  //
+ //
+ //
+ //
+ //
+ // ); }; export default LibraryContainer; diff --git a/src/client/components/Library/SearchBar.tsx b/src/client/components/Library/SearchBar.tsx index 2afb71b..0e3d277 100644 --- a/src/client/components/Library/SearchBar.tsx +++ b/src/client/components/Library/SearchBar.tsx @@ -26,14 +26,14 @@ export const SearchBar = (): ReactElement => { ); }, []); return ( -
+
(
-
+
{({ input, meta }) => { return ( diff --git a/src/client/components/shared/MetadataPanel.tsx b/src/client/components/shared/MetadataPanel.tsx index bc542cb..7eee18a 100644 --- a/src/client/components/shared/MetadataPanel.tsx +++ b/src/client/components/shared/MetadataPanel.tsx @@ -77,14 +77,9 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => {
)}
- +
-
-
- Path - {rawFileDetails.containedIn} -
-
+ ), @@ -218,7 +213,7 @@ export const MetadataPanel = (props: IMetadatPanelProps): ReactElement => { orientation={"vertical"} hasDetails={false} imageStyle={props.imageStyle} - // cardContainerStyle={{ maxWidth: 200 }} + // cardContainerStyle={{ maxWidth: 200 }} />
{metadataPanel.content()}
diff --git a/src/client/components/shared/T2Table.tsx b/src/client/components/shared/T2Table.tsx index f7d24d5..9b30746 100644 --- a/src/client/components/shared/T2Table.tsx +++ b/src/client/components/shared/T2Table.tsx @@ -4,22 +4,39 @@ import { ColumnDef, flexRender, getCoreRowModel, + getFilteredRowModel, useReactTable, + PaginationState, } from "@tanstack/react-table"; export const T2Table = (tableOptions): ReactElement => { - const { rowData, columns, paginationHandlers, totalPages, rowClickHandler } = + const { rowData, columns, paginationHandlers: { nextPage, previousPage }, totalPages, rowClickHandler } = tableOptions; - const [isPageSizeDropdownCollapsed, collapsePageSizeDropdown] = - useState(false); - const togglePageSizeDropdown = () => - collapsePageSizeDropdown(!isPageSizeDropdownCollapsed); + const table = useReactTable({ data: rowData, columns, + manualPagination: true, getCoreRowModel: getCoreRowModel(), + getFilteredRowModel: getFilteredRowModel(), + pageCount: totalPages, + // getPaginationRowModel: getPaginationRowModel(), }); + const [{ pageIndex, pageSize }, setPagination] = + React.useState({ + pageIndex: 0, + pageSize: 10, + }) + + const pagination = React.useMemo( + () => ({ + pageIndex, + pageSize, + }), + [pageIndex, pageSize] + ) + return ( <> @@ -62,6 +79,12 @@ export const T2Table = (tableOptions): ReactElement => {
{/* pagination control */} + ); diff --git a/src/client/reducers/fileops.reducer.ts b/src/client/reducers/fileops.reducer.ts index 0cc0619..c379ba5 100644 --- a/src/client/reducers/fileops.reducer.ts +++ b/src/client/reducers/fileops.reducer.ts @@ -188,6 +188,7 @@ function fileOpsReducer(state = initialState, action) { } case SS_SEARCH_RESULTS_FETCHED: { + console.log(action.data); return { ...state, libraryComics: action.data, @@ -196,7 +197,6 @@ function fileOpsReducer(state = initialState, action) { } case SS_SEARCH_RESULTS_FETCHED_SPECIAL: { const foo = []; - console.log(action.data.hits) if (!isUndefined(action.data.hits)) { map(action.data.hits.hits, ({ _source }) => { foo.push(_source);