Add page selector

VoidCat/spa/src/Admin/FileList.js

@@ -8,16 +8,19 @@ import "./FileList.css";
 import {AdminApi} from "../Api";
 import {logout} from "../LoginState";
 import {PagedSortBy, PageSortOrder} from "../Const";
+import {PageSelector} from "../PageSelector";
 
 export function FileList(props) {
     const auth = useSelector((state) => state.login.jwt);
     const dispatch = useDispatch();
-    const [files, setFiles] = useState([]);
+    const [files, setFiles] = useState();
+    const [page, setPage] = useState(0);
+    const pageSize = 10;
 
     async function loadFileList() {
         let pageReq = {
-            page: 0,
-            pageSize: 20,
+            page: page,
+            pageSize,
             sortBy: PagedSortBy.Date,
             sortOrder: PageSortOrder.Dsc
         };
@@ -34,9 +37,10 @@ export function FileList(props) {
         if (window.confirm(`Are you sure you want to delete: ${id}?`)) {
             let req = await AdminApi.deleteFile(auth, id);
             if (req.ok) {
-                setFiles([
-                    ...files.filter(a => a.id !== id)
-                ]);
+                setFiles({
+                    ...files,
+                    results: files.results.filter(a => a.id !== id)
+                });
             } else {
                 alert("Failed to delete file!");
             }
@@ -64,7 +68,7 @@ export function FileList(props) {
 
     useEffect(() => {
         loadFileList()
-    }, []);
+    }, [page]);
 
     return (
         <table className="file-list">
@@ -79,7 +83,13 @@ export function FileList(props) {
             </tr>
             </thead>
             <tbody>
-            {files?.map(a => renderItem(a))}
+            {files ? files.results.map(a => renderItem(a)) : null}
+            </tbody>
+            <tbody>
+            <tr>
+                <td colSpan={999}>{files ?
+                    <PageSelector onSelectPage={(x) => setPage(x)} page={page} total={files.totalResults} pageSize={pageSize}/> : null}</td>
+            </tr>
             </tbody>
         </table>
     );

VoidCat/spa/src/PageSelector.css

@@ -0,0 +1,27 @@
+.page-buttons {
+    display: grid;
+    grid-auto-flow: column;
+    width: min-content;
+}
+
+.page-buttons > div {
+    padding: 5px 8px;
+    border: 1px solid;
+    user-select: none;
+    cursor: pointer;
+}
+
+.page-buttons > div:first-child {
+    border-top-left-radius: 3px;
+    border-bottom-left-radius: 3px;
+}
+
+.page-buttons > div:last-child {
+    border-top-right-radius: 3px;
+    border-bottom-right-radius: 3px;
+}
+
+.page-buttons > small {
+    line-height: 32px;
+    margin-left: 10px;
+}

VoidCat/spa/src/PageSelector.js

@@ -0,0 +1,31 @@
+import "./PageSelector.css";
+
+export function PageSelector(props) {
+    const total = props.total;
+    const pageSize = props.pageSize;
+    const page = props.page;
+    const onSelectPage = props.onSelectPage;
+    const options = {
+        showPages: 2,
+        ...(props.options || {})
+    };
+
+    let totalPages = Math.floor(total / pageSize);
+    let first = Math.max(0, page - options.showPages);
+    let firstDiff = page - first;
+    let last = Math.min(totalPages, page + options.showPages + options.showPages - firstDiff);
+
+    let buttons = [];
+    for (let x = first; x <= last; x++) {
+        buttons.push(<div onClick={(e) => onSelectPage(x)} key={x}>{x+1}</div>);
+    }
+
+    return (
+        <div className="page-buttons">
+            <div onClick={() => onSelectPage(0)}>&lt;&lt;</div>
+            {buttons}
+            <div onClick={() => onSelectPage(totalPages)}>&gt;&gt;</div>
+            <small>Total: {total}</small>
+        </div>
+    );
+}