1
0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2024-12-26 00:21:36 +01:00

Merge branch 'add-tanstack-and-richtable-component' into 'dev'

Add RichTable component

See merge request turris/reforis/foris-js!253
This commit is contained in:
Aleksandr Gumroian 2024-11-07 21:19:09 +01:00
commit 065a45dfcc
7 changed files with 353 additions and 4 deletions

51
package-lock.json generated
View File

@ -13,6 +13,7 @@
"@fortawesome/free-regular-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.2",
"@tanstack/react-table": "^8.20.5",
"axios": "^1.7.2",
"immutability-helper": "^3.1.1",
"moment": "^2.30.1",
@ -3583,6 +3584,39 @@
"@sinonjs/commons": "^3.0.0"
}
},
"node_modules/@tanstack/react-table": {
"version": "8.20.5",
"resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz",
"integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
"license": "MIT",
"dependencies": {
"@tanstack/table-core": "8.20.5"
},
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/@tanstack/table-core": {
"version": "8.20.5",
"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
"integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==",
"license": "MIT",
"engines": {
"node": ">=12"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
}
},
"node_modules/@testing-library/dom": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-5.6.1.tgz",
@ -15493,7 +15527,6 @@
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",
"integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==",
"dev": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
@ -16247,7 +16280,6 @@
"version": "0.15.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
"integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
"dev": true,
"dependencies": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
@ -21102,6 +21134,19 @@
"@sinonjs/commons": "^3.0.0"
}
},
"@tanstack/react-table": {
"version": "8.20.5",
"resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.20.5.tgz",
"integrity": "sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==",
"requires": {
"@tanstack/table-core": "8.20.5"
}
},
"@tanstack/table-core": {
"version": "8.20.5",
"resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.20.5.tgz",
"integrity": "sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg=="
},
"@testing-library/dom": {
"version": "5.6.1",
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-5.6.1.tgz",
@ -30083,7 +30128,6 @@
"version": "16.9.0",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.9.0.tgz",
"integrity": "sha512-YFT2rxO9hM70ewk9jq0y6sQk8cL02xm4+IzYBz75CQGlClQQ1Bxq0nhHF6OtSbit+AIahujJgb/CPRibFkMNJQ==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
@ -30648,7 +30692,6 @@
"version": "0.15.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.15.0.tgz",
"integrity": "sha512-xAefmSfN6jqAa7Kuq7LIJY0bwAPG3xlCj0HMEBQk1lxYiDKZscY2xJ5U/61ZTrYbmNQbXa+gc7czPkVo11tnCg==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"

View File

@ -18,6 +18,7 @@
"@fortawesome/free-regular-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.2",
"@tanstack/react-table": "^8.20.5",
"axios": "^1.7.2",
"immutability-helper": "^3.1.1",
"moment": "^2.30.1",

View File

@ -0,0 +1,70 @@
/*
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React, { useMemo, useState } from "react";
import {
flexRender,
getCoreRowModel,
getSortedRowModel,
getPaginationRowModel,
useReactTable,
} from "@tanstack/react-table";
import RichTableBody from "./RichTableBody";
import RichTableHeader from "./RichTableHeader";
import RichTablePagination from "./RichTablePagination";
const fallbackData = [];
const RichTable = ({
columns,
data,
withPagination,
pageSize = 5,
pageIndex = 0,
}) => {
const tableColumns = useMemo(() => columns, []);
const [tableData, _] = useState(data ?? fallbackData);
const [sorting, setSorting] = useState([]);
const [pagination, setPagination] = useState({
pageIndex,
pageSize,
});
const table = useReactTable({
data: tableData,
columns: tableColumns,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
getPaginationRowModel: getPaginationRowModel(),
onPaginationChange: setPagination,
onSortingChange: setSorting,
state: {
sorting,
pagination,
},
});
return (
<div className="table-responsive">
<table className="table table-hover text-nowrap">
<RichTableHeader table={table} flexRender={flexRender} />
<RichTableBody table={table} flexRender={flexRender} />
</table>
{withPagination && (
<RichTablePagination
table={table}
tablePageSize={pageSize}
allRows={tableData.length}
/>
)}
</div>
);
};
export default RichTable;

View File

@ -0,0 +1,39 @@
/*
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
const RichTableBody = ({ table, flexRender }) => {
return (
<tbody>
{table.getRowModel().rows.map((row) => {
return (
<tr key={row.id} className="align-middle">
{row.getVisibleCells().map((cell) => {
return (
<td
key={cell.id}
{...(cell.column.columnDef.className && {
className:
cell.column.columnDef.className,
})}
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
);
})}
</tr>
);
})}
</tbody>
);
};
export default RichTableBody;

View File

@ -0,0 +1,86 @@
/*
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faSquareCaretUp,
faSquareCaretDown,
} from "@fortawesome/free-solid-svg-icons";
const RichTableHeader = ({ table, flexRender }) => {
const getThTitle = (header) =>
header.column.getCanSort()
? header.column.getNextSortingOrder() === "asc"
? _("Sort ascending")
: header.column.getNextSortingOrder() === "desc"
? _("Sort descending")
: _("Clear sort")
: undefined;
return (
<thead className="thead-light">
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id} role="row">
{headerGroup.headers.map((header) => (
<th
key={header.id}
colSpan={header.colSpan}
{...(header.column.columnDef.headerClassName && {
className:
header.column.columnDef.headerClassName,
})}
>
{header.isPlaceholder ||
header.column.columnDef.headerIsHidden ? (
<div className="d-none" aria-hidden="true">
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</div>
) : (
<button
className={`btn btn-link text-decoration-none text-reset fw-bold p-0 d-flex align-items-center
${
header.column.getCanSort()
? "d-flex align-items-center"
: ""
}
`}
onClick={header.column.getToggleSortingHandler()}
title={getThTitle(header)}
>
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
{{
asc: (
<FontAwesomeIcon
icon={faSquareCaretUp}
className="ms-1 text-primary"
/>
),
desc: (
<FontAwesomeIcon
icon={faSquareCaretDown}
className="ms-1 text-primary"
/>
),
}[header.column.getIsSorted()] ?? null}
</button>
)}
</th>
))}
</tr>
))}
</thead>
);
};
export default RichTableHeader;

View File

@ -0,0 +1,109 @@
/*
* Copyright (C) 2019-2024 CZ.NIC z.s.p.o. (https://www.nic.cz/)
*
* This is free software, licensed under the GNU General Public License v3.
* See /LICENSE for more information.
*/
import React, { useMemo } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
faAngleLeft,
faAnglesLeft,
faAngleRight,
faAnglesRight,
} from "@fortawesome/free-solid-svg-icons";
const RichTablePagination = ({ table, tablePageSize, allRows }) => {
const { pagination } = table.getState();
const prevPagBtnDisabled = !table.getCanPreviousPage();
const nextPagBtnDisabled = !table.getCanNextPage();
const pageSizes = useMemo(() => {
return [tablePageSize ?? 5, 10, 25].filter(
(value, index, self) => self.indexOf(value) === index
);
}, [tablePageSize]);
const renderPaginationButton = (icon, ariaLabel, onClick, disabled) => (
<li
className={`page-item ${disabled ? "disabled" : ""}`}
style={{ cursor: disabled ? "not-allowed" : "pointer" }}
>
<button
className="page-link"
aria-label={ariaLabel}
onClick={onClick}
disabled={disabled}
>
<FontAwesomeIcon icon={icon} />
</button>
</li>
);
return (
<nav
aria-label={_("Pagination navigation bar")}
className="d-flex gap-2 justify-content-start align-items-center mx-2 mb-1 text-nowrap"
>
<ul className="pagination pagination-sm mb-0">
{renderPaginationButton(
faAnglesLeft,
_("First page"),
() => table.firstPage(),
prevPagBtnDisabled
)}
{renderPaginationButton(
faAngleLeft,
_("Previous page"),
() => table.previousPage(),
prevPagBtnDisabled
)}
{renderPaginationButton(
faAngleRight,
_("Next page"),
() => table.nextPage(),
nextPagBtnDisabled
)}
{renderPaginationButton(
faAnglesRight,
_("Last page"),
() => table.lastPage(),
nextPagBtnDisabled
)}
</ul>
<span>
{_("Page")}&nbsp;
<span className="fw-bold">
{pagination.pageIndex + 1}
&nbsp;{_("of")}&nbsp;
{table.getPageCount().toLocaleString()}
</span>
</span>
<div
className="vr mx-1 align-self-center"
style={{ height: "1.5rem" }}
/>
<span>{_("Rows per page:")}</span>
<select
className="form-select form-select-sm w-auto"
aria-label={_("Select rows per page")}
value={pagination.pageSize}
onChange={(e) => {
table.setPageSize(Number(e.target.value));
}}
>
{pageSizes.map((pageSize) => (
<option key={pageSize} value={pageSize}>
{pageSize}
</option>
))}
<option key={allRows} value={allRows}>
{_("All")}
</option>
</select>
</nav>
);
};
export default RichTablePagination;

View File

@ -43,6 +43,7 @@ export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
export { default as RebootButton } from "./common/RebootButton";
export { default as WiFiSettings } from "./common/WiFiSettings/WiFiSettings";
export { default as ResetWiFiSettings } from "./common/WiFiSettings/ResetWiFiSettings";
export { default as RichTable } from "./common/RichTable/RichTable";
// Form
export { default as ForisForm } from "./form/components/ForisForm";
export {