+ client: handle static leases form

2019-05-28 15:07:46 +03:00
parent a8384c004e
commit 6f2503a09f
13 changed files with 510 additions and 245 deletions
--- a/client/src/components/Settings/Dhcp/StaticLeases/index.js
+++ b/client/src/components/Settings/Dhcp/StaticLeases/index.js
@@ -0,0 +1,111 @@
+import React, { Component, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import ReactTable from 'react-table';
+import { Trans, withNamespaces } from 'react-i18next';
+
+import Modal from './Modal';
+
+class StaticLeases extends Component {
+    cellWrap = ({ value }) => (
+        <div className="logs__row logs__row--overflow">
+            <span className="logs__text" title={value}>
+                {value}
+            </span>
+        </div>
+    );
+
+    handleSubmit = (data) => {
+        this.props.addStaticLease(data);
+    }
+
+    handleDelete = (ip, mac, hostname) => {
+        // eslint-disable-next-line no-alert
+        if (window.confirm(this.props.t('delete_confirm', { key: hostname }))) {
+            this.props.removeStaticLease({ ip, mac, hostname });
+        }
+    }
+
+    render() {
+        const {
+            isModalOpen,
+            toggleLeaseModal,
+            processingAdding,
+            processingDeleting,
+            staticLeases,
+            t,
+        } = this.props;
+        return (
+            <Fragment>
+                <ReactTable
+                    data={staticLeases || []}
+                    columns={[
+                        {
+                            Header: 'MAC',
+                            accessor: 'mac',
+                            Cell: this.cellWrap,
+                        },
+                        {
+                            Header: 'IP',
+                            accessor: 'ip',
+                            Cell: this.cellWrap,
+                        },
+                        {
+                            Header: <Trans>dhcp_table_hostname</Trans>,
+                            accessor: 'hostname',
+                            Cell: this.cellWrap,
+                        },
+                        {
+                            Header: <Trans>actions_table_header</Trans>,
+                            accessor: 'actions',
+                            maxWidth: 150,
+                            Cell: (row) => {
+                                const { ip, mac, hostname } = row.original;
+
+                                return (
+                                    <div className="logs__row logs__row--center">
+                                        <button
+                                            type="button"
+                                            className="btn btn-icon btn-outline-secondary btn-sm"
+                                            title={t('delete_table_action')}
+                                            disabled={processingDeleting}
+                                            onClick={() =>
+                                                this.handleDelete(ip, mac, hostname)
+                                            }
+                                        >
+                                            <svg className="icons">
+                                                <use xlinkHref="#delete" />
+                                            </svg>
+                                        </button>
+                                    </div>
+                                );
+                            },
+                        },
+                    ]}
+                    showPagination={false}
+                    noDataText={t('dhcp_static_leases_not_found')}
+                    className="-striped -highlight card-table-overflow"
+                    minRows={6}
+                />
+                <Modal
+                    isModalOpen={isModalOpen}
+                    toggleLeaseModal={toggleLeaseModal}
+                    handleSubmit={this.handleSubmit}
+                    processingAdding={processingAdding}
+                />
+            </Fragment>
+        );
+    }
+}
+
+StaticLeases.propTypes = {
+    staticLeases: PropTypes.array.isRequired,
+    isModalOpen: PropTypes.bool.isRequired,
+    toggleLeaseModal: PropTypes.func.isRequired,
+    removeStaticLease: PropTypes.func.isRequired,
+    addStaticLease: PropTypes.func.isRequired,
+    processingAdding: PropTypes.bool.isRequired,
+    processingDeleting: PropTypes.bool.isRequired,
+    t: PropTypes.func.isRequired,
+};
+
+export default withNamespaces()(StaticLeases);