+ client: modify added filters

client/src/components/Filters/Form.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Field, reduxForm } from 'redux-form';
+import { Trans, withNamespaces } from 'react-i18next';
+import flow from 'lodash/flow';
+
+import { renderInputField, required, isValidUrl } from '../../helpers/form';
+
+const Form = (props) => {
+    const {
+        t,
+        closeModal,
+        handleSubmit,
+        processingAddFilter,
+        processingConfigFilter,
+    } = props;
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="modal-body">
+                <div className="form__group">
+                    <Field
+                        id="name"
+                        name="name"
+                        type="text"
+                        component={renderInputField}
+                        className="form-control"
+                        placeholder={t('enter_name_hint')}
+                        validate={[required]}
+                    />
+                </div>
+                <div className="form__group">
+                    <Field
+                        id="url"
+                        name="url"
+                        type="text"
+                        component={renderInputField}
+                        className="form-control"
+                        placeholder={t('enter_url_hint')}
+                        validate={[required, isValidUrl]}
+                    />
+                </div>
+                <div className="form__description">
+                    <Trans>enter_valid_filter_url</Trans>
+                </div>
+            </div>
+            <div className="modal-footer">
+                <button
+                    type="button"
+                    className="btn btn-secondary"
+                    onClick={closeModal}
+                >
+                    <Trans>cancel_btn</Trans>
+                </button>
+                <button
+                    type="submit"
+                    className="btn btn-success"
+                    disabled={processingAddFilter || processingConfigFilter}
+                >
+                    <Trans>save_btn</Trans>
+                </button>
+            </div>
+        </form>
+    );
+};
+
+Form.propTypes = {
+    t: PropTypes.func.isRequired,
+    closeModal: PropTypes.func.isRequired,
+    handleSubmit: PropTypes.func.isRequired,
+    processingAddFilter: PropTypes.bool.isRequired,
+    processingConfigFilter: PropTypes.bool.isRequired,
+};
+
+export default flow([
+    withNamespaces(),
+    reduxForm({
+        form: 'filterForm',
+    }),
+])(Form);

client/src/components/Filters/Modal.js

@@ -1,52 +1,28 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactModal from 'react-modal';
-import classnames from 'classnames';
 import { Trans, withNamespaces } from 'react-i18next';
-import { R_URL_REQUIRES_PROTOCOL } from '../../helpers/constants';
+
+import { MODAL_TYPE } from '../../helpers/constants';
+import Form from './Form';
 import '../ui/Modal.css';
 
 ReactModal.setAppElement('#root');
 
-const initialState = {
-    url: '',
-    name: '',
-    isUrlValid: false,
-};
-
 class Modal extends Component {
-    state = initialState;
-
-    isUrlValid = url => R_URL_REQUIRES_PROTOCOL.test(url);
-
-    handleUrlChange = async (e) => {
-        const { value: url } = e.currentTarget;
-        this.setState(...this.state, { url, isUrlValid: this.isUrlValid(url) });
-    };
-
-    handleNameChange = (e) => {
-        const { value: name } = e.currentTarget;
-        this.setState({ ...this.state, name });
-    };
-
     closeModal = () => {
         this.props.toggleModal();
-        this.setState({ ...this.state, ...initialState });
     };
 
     render() {
-        const { isOpen, processingAddFilter } = this.props;
-        const { isUrlValid, url, name } = this.state;
-        const inputUrlClass = classnames({
-            'form-control mb-2': true,
-            'is-invalid': url.length > 0 && !isUrlValid,
-            'is-valid': url.length > 0 && isUrlValid,
-        });
-        const inputNameClass = classnames({
-            'form-control mb-2': true,
-            'is-valid': name.length > 0,
-        });
-        const isValidForSubmit = url.length > 0 && isUrlValid && name.length > 0;
+        const {
+            isOpen,
+            processingAddFilter,
+            processingConfigFilter,
+            handleSubmit,
+            modalType,
+            currentFilterData,
+        } = this.props;
 
         return (
             <ReactModal
@@ -58,46 +34,23 @@ class Modal extends Component {
                 <div className="modal-content">
                     <div className="modal-header">
                         <h4 className="modal-title">
-                            <Trans>new_filter_btn</Trans>
+                            {modalType === MODAL_TYPE.EDIT ? (
+                                <Trans>edit_filter_title</Trans>
+                            ) : (
+                                <Trans>new_filter_btn</Trans>
+                            )}
                         </h4>
                         <button type="button" className="close" onClick={this.closeModal}>
                             <span className="sr-only">Close</span>
                         </button>
                     </div>
-                    <div className="modal-body">
-                        <input
-                            type="text"
-                            className={inputNameClass}
-                            placeholder={this.props.t('enter_name_hint')}
-                            onChange={this.handleNameChange}
-                        />
-                        <input
-                            type="text"
-                            className={inputUrlClass}
-                            placeholder={this.props.t('enter_url_hint')}
-                            onChange={this.handleUrlChange}
-                        />
-                        <div className="description">
-                            <Trans>enter_valid_filter_url</Trans>
-                        </div>
-                    </div>
-                    <div className="modal-footer">
-                        <button
-                            type="button"
-                            className="btn btn-secondary"
-                            onClick={this.closeModal}
-                        >
-                            <Trans>cancel_btn</Trans>
-                        </button>
-                        <button
-                            type="button"
-                            className="btn btn-success"
-                            onClick={() => this.props.addFilter(url, name)}
-                            disabled={!isValidForSubmit || processingAddFilter}
-                        >
-                            <Trans>add_filter_btn</Trans>
-                        </button>
-                    </div>
+                    <Form
+                        initialValues={{ ...currentFilterData }}
+                        onSubmit={handleSubmit}
+                        processingAddFilter={processingAddFilter}
+                        processingConfigFilter={processingConfigFilter}
+                        closeModal={this.closeModal}
+                    />
                 </div>
             </ReactModal>
         );
@@ -110,6 +63,10 @@ Modal.propTypes = {
     addFilter: PropTypes.func.isRequired,
     isFilterAdded: PropTypes.bool.isRequired,
     processingAddFilter: PropTypes.bool.isRequired,
+    processingConfigFilter: PropTypes.bool.isRequired,
+    handleSubmit: PropTypes.func.isRequired,
+    modalType: PropTypes.string.isRequired,
+    currentFilterData: PropTypes.object.isRequired,
     t: PropTypes.func.isRequired,
 };
 

client/src/components/Filters/index.js

@@ -9,6 +9,8 @@ import CellWrap from '../ui/CellWrap';
 import UserRules from './UserRules';
 import Modal from './Modal';
 
+import { MODAL_TYPE } from '../../helpers/constants';
+
 class Filters extends Component {
     componentDidMount() {
         this.props.getFilteringStatus();
@@ -22,15 +24,29 @@ class Filters extends Component {
         this.props.setRules(this.props.filtering.userRules);
     };
 
+    handleSubmit = (values) => {
+        const { name, url } = values;
+        const { filtering } = this.props;
+
+        if (filtering.modalType === MODAL_TYPE.EDIT) {
+            const data = { ...values };
+            this.props.editFilter(filtering.modalFilterUrl, data);
+        } else {
+            this.props.addFilter(url, name);
+        }
+    }
+
     renderCheckbox = ({ original }) => {
         const { processingConfigFilter } = this.props.filtering;
-        const { url, enabled } = original;
+        const { url, name, enabled } = original;
+        const data = { name, url, enabled: !enabled };
+
         return (
             <label className="checkbox">
                 <input
                     type="checkbox"
                     className="checkbox__input"
-                    onChange={() => this.props.toggleFilterStatus(url, enabled)}
+                    onChange={() => this.props.toggleFilterStatus(url, data)}
                     checked={enabled}
                     disabled={processingConfigFilter}
                 />
@@ -46,6 +62,17 @@ class Filters extends Component {
         }
     };
 
+    getFilter = (url, filters) => {
+        const filter = filters.find(item => url === item.url);
+
+        if (filter) {
+            const { enabled, name, url } = filter;
+            return { enabled, name, url };
+        }
+
+        return { name: '', url: '' };
+    };
+
     columns = [
         {
             Header: <Trans>enabled_table_header</Trans>,
@@ -94,21 +121,43 @@ class Filters extends Component {
         {
             Header: <Trans>actions_table_header</Trans>,
             accessor: 'url',
-            Cell: ({ value }) => (
-                <button
-                    type="button"
-                    className="btn btn-icon btn-outline-secondary btn-sm"
-                    onClick={() => this.handleDelete(value)}
-                    title={this.props.t('delete_table_action')}
-                >
-                    <svg className="icons">
-                        <use xlinkHref="#delete" />
-                    </svg>
-                </button>
-            ),
             className: 'text-center',
-            width: 80,
+            width: 100,
             sortable: false,
+            Cell: (row) => {
+                const { value } = row;
+                const { t, toggleFilteringModal } = this.props;
+
+                return (
+                    <div className="logs__row logs__row--center">
+                        <button
+                            type="button"
+                            className="btn btn-icon btn-outline-primary btn-sm mr-2"
+                            title={t('edit_table_action')}
+                            onClick={() =>
+                                toggleFilteringModal({
+                                    type: MODAL_TYPE.EDIT,
+                                    url: value,
+                                })
+                            }
+                        >
+                            <svg className="icons">
+                                <use xlinkHref="#edit" />
+                            </svg>
+                        </button>
+                        <button
+                            type="button"
+                            className="btn btn-icon btn-outline-secondary btn-sm"
+                            onClick={() => this.handleDelete(value)}
+                            title={this.props.t('delete_table_action')}
+                        >
+                            <svg className="icons">
+                                <use xlinkHref="#delete" />
+                            </svg>
+                        </button>
+                    </div>
+                );
+            },
         },
     ];
 
@@ -124,9 +173,14 @@ class Filters extends Component {
             processingRefreshFilters,
             processingRemoveFilter,
             processingAddFilter,
+            processingConfigFilter,
             processingFilters,
+            modalType,
+            modalFilterUrl,
         } = filtering;
 
+        const currentFilterData = this.getFilter(modalFilterUrl, filters);
+
         return (
             <Fragment>
                 <PageTitle title={t('filters')} />
@@ -161,7 +215,9 @@ class Filters extends Component {
                                     <button
                                         className="btn btn-success btn-standard mr-2"
                                         type="submit"
-                                        onClick={toggleFilteringModal}
+                                        onClick={() =>
+                                            toggleFilteringModal({ type: MODAL_TYPE.ADD })
+                                        }
                                     >
                                         <Trans>add_filter_btn</Trans>
                                     </button>
@@ -191,6 +247,10 @@ class Filters extends Component {
                     addFilter={addFilter}
                     isFilterAdded={isFilterAdded}
                     processingAddFilter={processingAddFilter}
+                    processingConfigFilter={processingConfigFilter}
+                    handleSubmit={this.handleSubmit}
+                    modalType={modalType}
+                    currentFilterData={currentFilterData}
                 />
             </Fragment>
         );
@@ -210,6 +270,7 @@ Filters.propTypes = {
         processingRefreshFilters: PropTypes.bool.isRequired,
         processingConfigFilter: PropTypes.bool.isRequired,
         processingRemoveFilter: PropTypes.bool.isRequired,
+        modalType: PropTypes.string.isRequired,
     }),
     removeFilter: PropTypes.func.isRequired,
     toggleFilterStatus: PropTypes.func.isRequired,
@@ -217,6 +278,7 @@ Filters.propTypes = {
     toggleFilteringModal: PropTypes.func.isRequired,
     handleRulesChange: PropTypes.func.isRequired,
     refreshFilters: PropTypes.func.isRequired,
+    editFilter: PropTypes.func.isRequired,
     t: PropTypes.func.isRequired,
 };