edb/bbs
8
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ Add basic pagination in log view

Browse Source
This commit is contained in:
Nikolai R Kristiansen committed 2022-02-05 22:23:24 +01:00
1 parent e240eda1cb
commit aead00a893
3 files changed
+84 -322
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/package-lock.json
Generated
+16 -319
View File
@@ -16,14 +16,14 @@
"graphql": "^16.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1"
"react-router-dom": "^6.2.1",
"use-url-search-params": "^2.5.1"
},
"devDependencies": {
"@graphql-codegen/cli": "^2.5.0",
"@graphql-codegen/typed-document-node": "^2.2.3",
"@graphql-codegen/typescript-operations": "^2.2.4",
"@graphql-typed-document-node/core": "^3.1.1",
"@honkhonk/vite-plugin-svgr": "^1.1.0",
"@types/bootstrap": "^5.1.9",
"@types/react": "^17.0.39",
"@types/react-dom": "^17.0.11",
@@ -1911,18 +1911,6 @@
"graphql": "^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
}
},
"node_modules/@honkhonk/vite-plugin-svgr": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@honkhonk/vite-plugin-svgr/-/vite-plugin-svgr-1.1.0.tgz",
"integrity": "sha512-Z/KR54UolyaNRlbRWnrXb3C+2Xtl6ilHvD3ceoqTVV69OswtjSGZDefHHNK+SQUSBbYQo0lJO2jLgip0QBxL1A==",
"dev": true,
"dependencies": {
"@svgr/core": "^5.5.0"
},
"peerDependencies": {
"vite": "^2.5.0"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz",
@@ -2462,198 +2450,6 @@
"@sinonjs/commons": "^1.7.0"
}
},
"node_modules/@svgr/babel-plugin-add-jsx-attribute": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
"integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz",
"integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz",
"integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz",
"integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-svg-dynamic-title": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz",
"integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-svg-em-dimensions": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz",
"integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-transform-react-native-svg": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz",
"integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-plugin-transform-svg-component": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz",
"integrity": "sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/babel-preset": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.5.0.tgz",
"integrity": "sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==",
"dev": true,
"dependencies": {
"@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
"@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
"@svgr/babel-plugin-remove-jsx-empty-expression": "^5.0.1",
"@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1",
"@svgr/babel-plugin-svg-dynamic-title": "^5.4.0",
"@svgr/babel-plugin-svg-em-dimensions": "^5.4.0",
"@svgr/babel-plugin-transform-react-native-svg": "^5.4.0",
"@svgr/babel-plugin-transform-svg-component": "^5.5.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/core": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.5.0.tgz",
"integrity": "sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==",
"dev": true,
"dependencies": {
"@svgr/plugin-jsx": "^5.5.0",
"camelcase": "^6.2.0",
"cosmiconfig": "^7.0.0"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/core/node_modules/camelcase": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
"dev": true,
"engines": {
"node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@svgr/hast-util-to-babel-ast": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz",
"integrity": "sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==",
"dev": true,
"dependencies": {
"@babel/types": "^7.12.6"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@svgr/plugin-jsx": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz",
"integrity": "sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==",
"dev": true,
"dependencies": {
"@babel/core": "^7.12.3",
"@svgr/babel-preset": "^5.5.0",
"@svgr/hast-util-to-babel-ast": "^5.5.0",
"svg-parser": "^2.0.2"
},
"engines": {
"node": ">=10"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/@szmarczak/http-timer": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -11676,6 +11472,14 @@
"node": ">=4"
}
},
"node_modules/use-url-search-params": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/use-url-search-params/-/use-url-search-params-2.5.1.tgz",
"integrity": "sha512-tzFTatO7b1VJx9rcP1utVU152PAPt5J4uVLCMteOUZFGBe+u8CzFVs3T74yrpZ/bOJLGjRbv46GBrjHq94XlTg==",
"peerDependencies": {
"react": "*"
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -13705,15 +13509,6 @@
"integrity": "sha512-NQ17ii0rK1b34VZonlmT2QMJFI70m0TRwbknO/ihlbatXyaktDhN/98vBiUU6kNBPljqGqyIrl2T4nY2RpFANg==",
"requires": {}
},
"@honkhonk/vite-plugin-svgr": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@honkhonk/vite-plugin-svgr/-/vite-plugin-svgr-1.1.0.tgz",
"integrity": "sha512-Z/KR54UolyaNRlbRWnrXb3C+2Xtl6ilHvD3ceoqTVV69OswtjSGZDefHHNK+SQUSBbYQo0lJO2jLgip0QBxL1A==",
"dev": true,
"requires": {
"@svgr/core": "^5.5.0"
}
},
"@humanwhocodes/config-array": {
"version": "0.9.3",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.3.tgz",
@@ -14138,110 +13933,6 @@
"@sinonjs/commons": "^1.7.0"
}
},
"@svgr/babel-plugin-add-jsx-attribute": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz",
"integrity": "sha512-ZFf2gs/8/6B8PnSofI0inYXr2SDNTDScPXhN7k5EqD4aZ3gi6u+rbmZHVB8IM3wDyx8ntKACZbtXSm7oZGRqVg==",
"dev": true
},
"@svgr/babel-plugin-remove-jsx-attribute": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz",
"integrity": "sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==",
"dev": true
},
"@svgr/babel-plugin-remove-jsx-empty-expression": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz",
"integrity": "sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==",
"dev": true
},
"@svgr/babel-plugin-replace-jsx-attribute-value": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz",
"integrity": "sha512-PoiE6ZD2Eiy5mK+fjHqwGOS+IXX0wq/YDtNyIgOrc6ejFnxN4b13pRpiIPbtPwHEc+NT2KCjteAcq33/F1Y9KQ==",
"dev": true
},
"@svgr/babel-plugin-svg-dynamic-title": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz",
"integrity": "sha512-zSOZH8PdZOpuG1ZVx/cLVePB2ibo3WPpqo7gFIjLV9a0QsuQAzJiwwqmuEdTaW2pegyBE17Uu15mOgOcgabQZg==",
"dev": true
},
"@svgr/babel-plugin-svg-em-dimensions": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz",
"integrity": "sha512-cPzDbDA5oT/sPXDCUYoVXEmm3VIoAWAPT6mSPTJNbQaBNUuEKVKyGH93oDY4e42PYHRW67N5alJx/eEol20abw==",
"dev": true
},
"@svgr/babel-plugin-transform-react-native-svg": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz",
"integrity": "sha512-3eYP/SaopZ41GHwXma7Rmxcv9uRslRDTY1estspeB1w1ueZWd/tPlMfEOoccYpEMZU3jD4OU7YitnXcF5hLW2Q==",
"dev": true
},
"@svgr/babel-plugin-transform-svg-component": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz",
"integrity": "sha512-q4jSH1UUvbrsOtlo/tKcgSeiCHRSBdXoIoqX1pgcKK/aU3JD27wmMKwGtpB8qRYUYoyXvfGxUVKchLuR5pB3rQ==",
"dev": true
},
"@svgr/babel-preset": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-5.5.0.tgz",
"integrity": "sha512-4FiXBjvQ+z2j7yASeGPEi8VD/5rrGQk4Xrq3EdJmoZgz/tpqChpo5hgXDvmEauwtvOc52q8ghhZK4Oy7qph4ig==",
"dev": true,
"requires": {
"@svgr/babel-plugin-add-jsx-attribute": "^5.4.0",
"@svgr/babel-plugin-remove-jsx-attribute": "^5.4.0",
"@svgr/babel-plugin-remove-jsx-empty-expression": "^5.0.1",
"@svgr/babel-plugin-replace-jsx-attribute-value": "^5.0.1",
"@svgr/babel-plugin-svg-dynamic-title": "^5.4.0",
"@svgr/babel-plugin-svg-em-dimensions": "^5.4.0",
"@svgr/babel-plugin-transform-react-native-svg": "^5.4.0",
"@svgr/babel-plugin-transform-svg-component": "^5.5.0"
}
},
"@svgr/core": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@svgr/core/-/core-5.5.0.tgz",
"integrity": "sha512-q52VOcsJPvV3jO1wkPtzTuKlvX7Y3xIcWRpCMtBF3MrteZJtBfQw/+u0B1BHy5ColpQc1/YVTrPEtSYIMNZlrQ==",
"dev": true,
"requires": {
"@svgr/plugin-jsx": "^5.5.0",
"camelcase": "^6.2.0",
"cosmiconfig": "^7.0.0"
},
"dependencies": {
"camelcase": {
"version": "6.3.0",
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
"integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
"dev": true
}
}
},
"@svgr/hast-util-to-babel-ast": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz",
"integrity": "sha512-cAaR/CAiZRB8GP32N+1jocovUtvlj0+e65TB50/6Lcime+EA49m/8l+P2ko+XPJ4dw3xaPS3jOL4F2X4KWxoeQ==",
"dev": true,
"requires": {
"@babel/types": "^7.12.6"
}
},
"@svgr/plugin-jsx": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz",
"integrity": "sha512-V/wVh33j12hGh05IDg8GpIUXbjAPnTdPTKuP4VNLggnwaHMPNQNae2pRnyTAILWCQdz5GyMqtO488g7CKM8CBA==",
"dev": true,
"requires": {
"@babel/core": "^7.12.3",
"@svgr/babel-preset": "^5.5.0",
"@svgr/hast-util-to-babel-ast": "^5.5.0",
"svg-parser": "^2.0.2"
}
},
"@szmarczak/http-timer": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/@szmarczak/http-timer/-/http-timer-1.1.2.tgz",
@@ -21068,6 +20759,12 @@
"prepend-http": "^2.0.0"
}
},
"use-url-search-params": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/use-url-search-params/-/use-url-search-params-2.5.1.tgz",
"integrity": "sha512-tzFTatO7b1VJx9rcP1utVU152PAPt5J4uVLCMteOUZFGBe+u8CzFVs3T74yrpZ/bOJLGjRbv46GBrjHq94XlTg==",
"requires": {}
},
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
frontend/package.json
+2 -1
View File
@@ -23,7 +23,8 @@
"graphql": "^16.3.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1"
"react-router-dom": "^6.2.1",
"use-url-search-params": "^2.5.1"
},
"devDependencies": {
"@graphql-codegen/cli": "^2.5.0",
frontend/src/features/log/Log.tsx
+66 -2
View File
@@ -1,17 +1,33 @@
import { useQuery } from "@apollo/client";
import clsx from "clsx";
import { parseISO, format } from "date-fns";
import React from "react";
import { useUrlSearchParams } from "use-url-search-params";
import { Order, OrderLine, OrderListDocument, Transaction, TransactionListDocument } from "../../types";
import styles from "./Log.module.css";
const formatTime = (isoDateTime: string): string => format(parseISO(isoDateTime), "yyyy-MM-dd HH:mm");
const PAGE_SIZE = 10;
export const Log = () => {
const { data: ordersData, loading: ordersLoading } = useQuery(OrderListDocument);
const { data: transactionsData, loading: transactionsLoading } = useQuery(TransactionListDocument);
const types = {
orderOffset: Number,
transactionOffset: Number,
};
const [params, setParams] = useUrlSearchParams({}, types);
const { data: ordersData, loading: ordersLoading } = useQuery(OrderListDocument, {
variables: { offset: params.orderOffset },
});
const { data: transactionsData, loading: transactionsLoading } = useQuery(TransactionListDocument, {
variables: { offset: params.transactionOffset },
});
const loading = ordersLoading || transactionsLoading;
const orderOffset = params.orderOffset || 0;
const transactionOffset = params.transactionOffset || 0;
if (loading) return <div>Loading...</div>;
const { orderList: orders } = ordersData;
@@ -47,6 +63,30 @@ export const Log = () => {
))}
</tbody>
</table>
<nav aria-label="Order pagination">
<ul className="pagination">
<li className={clsx("page-item", { disabled: orderOffset <= 0 })}>
<a
className="page-link"
onClick={() => {
setParams({ orderOffset: orderOffset - PAGE_SIZE });
}}
>
Previous
</a>
</li>
<li className="page-item">
<a
className="page-link"
onClick={() => {
setParams({ orderOffset: orderOffset + PAGE_SIZE });
}}
>
Next
</a>
</li>
</ul>
</nav>
</div>
<div>
<h2>Transaksjoner</h2>
@@ -70,6 +110,30 @@ export const Log = () => {
))}
</tbody>
</table>
<nav aria-label="Transaction pagination">
<ul className="pagination">
<li className={clsx("page-item", { disabled: transactionOffset <= 0 })}>
<a
className="page-link"
onClick={() => {
setParams({ transactionOffset: transactionOffset - PAGE_SIZE });
}}
>
Previous
</a>
</li>
<li className="page-item">
<a
className="page-link"
onClick={() => {
setParams({ transactionOffset: transactionOffset + PAGE_SIZE });
}}
>
Next
</a>
</li>
</ul>
</nav>
</div>
</div>
);