foris 6.4.0 → 6.5.0

package/common/ActionButtonWithModal/ActionButtonWithModal.js

@@ -0,0 +1,135 @@
+/*
+ * 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, { useState, useEffect } from "react";
+
+import PropTypes from "prop-types";
+
+import { useAPIPost } from "../../api/hooks";
+import { API_STATE } from "../../api/utils";
+import Button from "../../bootstrap/Button";
+import {
+    Modal,
+    ModalHeader,
+    ModalBody,
+    ModalFooter,
+} from "../../bootstrap/Modal";
+import { useAlert } from "../../context/alertContext/AlertContext";
+
+ActionButtonWithModal.propTypes = {
+    /** Component that triggers the action. */
+    actionTrigger: PropTypes.elementType.isRequired,
+    /** URL to send the action to. */
+    actionUrl: PropTypes.string.isRequired,
+    /** Title of the modal. */
+    modalTitle: PropTypes.string.isRequired,
+    /** Message of the modal. */
+    modalMessage: PropTypes.string.isRequired,
+    /** Text of the action button in the modal. */
+    modalActionText: PropTypes.string,
+    /** Props for the action button in the modal. */
+    modalActionProps: PropTypes.object,
+    /** Message to display on successful action. */
+    successMessage: PropTypes.string,
+    /** Message to display on failed action. */
+    errorMessage: PropTypes.string,
+};
+
+function ActionButtonWithModal({
+    actionTrigger: ActionTriggerComponent,
+    actionUrl,
+    modalTitle,
+    modalMessage,
+    modalActionText,
+    modalActionProps,
+    successMessage,
+    errorMessage,
+}) {
+    const [triggered, setTriggered] = useState(false);
+    const [modalShown, setModalShown] = useState(false);
+    const [triggerActionStatus, triggerAction] = useAPIPost(actionUrl);
+
+    const [setAlert] = useAlert();
+    useEffect(() => {
+        if (triggerActionStatus.state === API_STATE.SUCCESS) {
+            setAlert(
+                successMessage || _("Action successful."),
+                API_STATE.SUCCESS
+            );
+        }
+        if (triggerActionStatus.state === API_STATE.ERROR) {
+            setAlert(errorMessage || _("Action failed."));
+        }
+    }, [triggerActionStatus, setAlert, successMessage, errorMessage]);
+
+    const actionHandler = () => {
+        setTriggered(true);
+        triggerAction();
+        setModalShown(false);
+    };
+
+    return (
+        <>
+            <ActionModal
+                shown={modalShown}
+                setShown={setModalShown}
+                onAction={actionHandler}
+                title={modalTitle}
+                message={modalMessage}
+                actionText={modalActionText}
+                actionProps={modalActionProps}
+            />
+            <ActionTriggerComponent
+                loading={triggered}
+                disabled={triggered}
+                onClick={() => setModalShown(true)}
+            />
+        </>
+    );
+}
+
+ActionModal.propTypes = {
+    shown: PropTypes.bool.isRequired,
+    setShown: PropTypes.func.isRequired,
+    onAction: PropTypes.func.isRequired,
+    title: PropTypes.string.isRequired,
+    message: PropTypes.string.isRequired,
+    actionText: PropTypes.string,
+    actionProps: PropTypes.object,
+};
+
+function ActionModal({
+    shown,
+    setShown,
+    onAction,
+    title,
+    message,
+    actionText,
+    actionProps,
+}) {
+    return (
+        <Modal shown={shown} setShown={setShown}>
+            <ModalHeader setShown={setShown} title={title} />
+            <ModalBody>
+                <p className="mb-0">{message}</p>
+            </ModalBody>
+            <ModalFooter>
+                <Button
+                    className="btn-secondary"
+                    onClick={() => setShown(false)}
+                >
+                    {_("Cancel")}
+                </Button>
+                <Button onClick={onAction} {...actionProps}>
+                    {actionText || _("Confirm")}
+                </Button>
+            </ModalFooter>
+        </Modal>
+    );
+}
+
+export default ActionButtonWithModal;

package/common/ActionButtonWithModal/ActionButtonWithModal.md

@@ -0,0 +1,39 @@
+RebootButton component is a button that opens a modal dialog to confirm the
+reboot of the device.
+
+## Usage
+
+```jsx
+import React, { useEffect, createContext } from "react";
+
+import Button from "../../bootstrap/Button";
+import { AlertContextProvider } from "../../context/alertContext/AlertContext";
+import ActionButtonWithModal from "./ActionButtonWithModal";
+
+window.AlertContext = React.createContext();
+
+const RebootButtonExample = () => {
+    const ActionButton = (props) => {
+        return <Button {...props}>Action</Button>;
+    };
+
+    return (
+        <AlertContextProvider>
+            <div id="modal-container" />
+            <div id="alert-container" />
+            <ActionButtonWithModal
+                actionTrigger={ActionButton}
+                actionUrl="/reforis/api/action"
+                modalTitle="Warning!"
+                modalMessage="Are you sure you want to perform this action?"
+                modalActionText="Confirm action"
+                modalActionProps={{ className: "btn-danger" }}
+                successMessage="Action request succeeded."
+                errorMessage="Action request failed."
+            />
+        </AlertContextProvider>
+    );
+};
+
+<RebootButtonExample />;
+```

package/common/RichTable/RichTable.js

@@ -0,0 +1,84 @@
+/*
+ * 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 PropTypes from "prop-types";
+
+import RichTableBody from "./RichTableBody";
+import RichTableHeader from "./RichTableHeader";
+import RichTablePagination from "./RichTablePagination";
+
+const fallbackData = [];
+
+RichTable.propTypes = {
+    /** Columns to be displayed in the table */
+    columns: PropTypes.array.isRequired,
+    /** Data to be displayed in the table */
+    data: PropTypes.array.isRequired,
+    /** Whether to display pagination */
+    withPagination: PropTypes.bool,
+    /** Number of rows per page */
+    pageSize: PropTypes.number,
+    /** Index of the current page */
+    pageIndex: PropTypes.number,
+};
+
+function RichTable({
+    columns,
+    data,
+    withPagination,
+    pageSize = 5,
+    pageIndex = 0,
+}) {
+    const tableColumns = useMemo(() => columns, [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;

package/common/RichTable/RichTable.md

@@ -0,0 +1,135 @@
+### Description
+
+Rich Table is a table component based on
+[Tanstack React Table](https://tanstack.com/table/). It adds some features to
+the table component, such as:
+
+-   **Pagination**: The table can be paginated.
+-   **Sorting**: The table can be sorted by columns.
+-   **Row Expansion**: The table rows can be expanded. (To be implemented)
+
+### Example
+
+```js
+import RichTable from "./RichTable";
+
+const columns = [
+    {
+        header: "Name",
+        accessorKey: "name",
+    },
+    {
+        header: "Surname",
+        accessorKey: "surname",
+    },
+    {
+        header: "Age",
+        accessorKey: "age",
+    },
+    {
+        header: "Phone",
+        accessorKey: "phone",
+    },
+];
+
+const data = [
+    {
+        name: "John",
+        surname: "Coltrane",
+        age: 30,
+        phone: "123456789",
+    },
+    {
+        name: "Jane",
+        surname: "Doe",
+        age: 25,
+        phone: "987654321",
+    },
+    {
+        name: "Alice",
+        surname: "Smith",
+        age: 35,
+        phone: "123456789",
+    },
+    {
+        name: "Bob",
+        surname: "Smith",
+        age: 40,
+        phone: "987654321",
+    },
+    {
+        name: "Charlie",
+        surname: "Brown",
+        age: 45,
+        phone: "123456789",
+    },
+    {
+        name: "Daisy",
+        surname: "Brown",
+        age: 50,
+        phone: "987654321",
+    },
+    {
+        name: "Eve",
+        surname: "Johnson",
+        age: 55,
+        phone: "123456789",
+    },
+    {
+        name: "Frank",
+        surname: "Johnson",
+        age: 60,
+        phone: "987654321",
+    },
+    {
+        name: "Grace",
+        surname: "Williams",
+        age: 65,
+        phone: "123456789",
+    },
+    {
+        name: "Henry",
+        surname: "Williams",
+        age: 70,
+        phone: "987654321",
+    },
+    {
+        name: "Ivy",
+        surname: "Brown",
+        age: 75,
+        phone: "123456789",
+    },
+    {
+        name: "Jack",
+        surname: "Brown",
+        age: 80,
+        phone: "987654321",
+    },
+    {
+        name: "Kelly",
+        surname: "Johnson",
+        age: 85,
+        phone: "123456789",
+    },
+    {
+        name: "Liam",
+        surname: "Johnson",
+        age: 90,
+        phone: "987654321",
+    },
+    {
+        name: "Mia",
+        surname: "Williams",
+        age: 95,
+        phone: "123456789",
+    },
+    {
+        name: "Nathan",
+        surname: "Williams",
+        age: 100,
+        phone: "987654321",
+    },
+];
+
+<RichTable columns={columns} data={data} withPagination />;
+```

package/common/RichTable/RichTableBody.js

@@ -0,0 +1,48 @@
+/*
+ * 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 propTypes from "prop-types";
+
+RichTableBody.propTypes = {
+    table: propTypes.shape({
+        getRowModel: propTypes.func.isRequired,
+    }).isRequired,
+    flexRender: propTypes.func.isRequired,
+};
+
+function 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;

package/common/RichTable/RichTableHeader.js

@@ -0,0 +1,96 @@
+/*
+ * 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 {
+    faSquareCaretUp,
+    faSquareCaretDown,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import propTypes from "prop-types";
+
+RichTableHeader.propTypes = {
+    table: propTypes.shape({
+        getHeaderGroups: propTypes.func.isRequired,
+    }).isRequired,
+    flexRender: propTypes.func.isRequired,
+};
+
+function RichTableHeader({ table, flexRender }) {
+    const getThTitle = (header) => {
+        if (!header.column.getCanSort()) return undefined;
+
+        const nextSortingOrder = header.column.getNextSortingOrder();
+        if (nextSortingOrder === "asc") return _("Sort ascending");
+        if (nextSortingOrder === "desc") return _("Sort descending");
+        return _("Clear sort");
+    };
+
+    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
+                                    type="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;

package/common/RichTable/RichTablePagination.js

@@ -0,0 +1,128 @@
+/*
+ * 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 {
+    faAngleLeft,
+    faAnglesLeft,
+    faAngleRight,
+    faAnglesRight,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import propTypes from "prop-types";
+
+RichTablePagination.propTypes = {
+    table: propTypes.shape({
+        getState: propTypes.func.isRequired,
+        getCanPreviousPage: propTypes.func.isRequired,
+        getCanNextPage: propTypes.func.isRequired,
+        firstPage: propTypes.func.isRequired,
+        previousPage: propTypes.func.isRequired,
+        nextPage: propTypes.func.isRequired,
+        lastPage: propTypes.func.isRequired,
+        setPageSize: propTypes.func.isRequired,
+        getPageCount: propTypes.func.isRequired,
+    }).isRequired,
+    tablePageSize: propTypes.number,
+    allRows: propTypes.number,
+};
+
+function 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
+                type="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;

package/index.js

@@ -40,9 +40,10 @@ export { Spinner, SpinnerElement } from "./bootstrap/Spinner";
 export { Modal, ModalBody, ModalFooter, ModalHeader } from "./bootstrap/Modal";
 
 // Common
-export { default as RebootButton } from "./common/RebootButton";
+export { default as ActionButtonWithModal } from "./common/ActionButtonWithModal/ActionButtonWithModal";
 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 {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "foris",
-    "version": "6.4.0",
+    "version": "6.5.0",
     "description": "Foris JS library is a set of components and utils for reForis application and plugins.",
     "author": "CZ.NIC, z.s.p.o.",
     "repository": {
@@ -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",