Add search pane on frontend

4 files changed, 208 insertions, 96 deletions

diff --git a/frontend/src/components/filters/ExitSearchFilter.js b/frontend/src/components/filters/ExitSearchFilter.js
new file mode 100644
index 0000000..cfee298
--- /dev/null
+++ b/frontend/src/components/filters/ExitSearchFilter.js
@@ -0,0 +1,52 @@
+/*
+ * This file is part of caronte (https://github.com/eciavatta/caronte).
+ * Copyright (c) 2020 Emiliano Ciavatta.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, {Component} from 'react';
+import {withRouter} from "react-router-dom";
+import CheckField from "../fields/CheckField";
+import dispatcher from "../../dispatcher";
+
+class ExitSearchFilter extends Component {
+
+    state = {};
+
+    componentDidMount() {
+        let params = new URLSearchParams(this.props.location.search);
+        this.setState({performedSearch: params.get("performed_search")});
+
+        dispatcher.register("connections_filters", payload => {
+            if (this.state.performedSearch !== payload["performed_search"]) {
+                this.setState({performedSearch: payload["performed_search"]});
+            }
+        });
+    }
+
+    render() {
+        return (
+            <>
+                {this.state.performedSearch &&
+                <div className="filter" style={{"width": `${this.props.width}px`}}>
+                    <CheckField checked={true} name="exit_search" onChange={() =>
+                        dispatcher.dispatch("connections_filters", {"performed_search": null})} small/>
+                </div>}
+            </>
+        );
+    }
+
+}
+
+export default withRouter(ExitSearchFilter);
diff --git a/frontend/src/components/filters/FiltersDispatcher.js b/frontend/src/components/filters/FiltersDispatcher.js
new file mode 100644
index 0000000..3769055
--- /dev/null
+++ b/frontend/src/components/filters/FiltersDispatcher.js
@@ -0,0 +1,57 @@
+/*
+ * This file is part of caronte (https://github.com/eciavatta/caronte).
+ * Copyright (c) 2020 Emiliano Ciavatta.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React, {Component} from 'react';
+import {withRouter} from "react-router-dom";
+import {Redirect} from "react-router";
+import dispatcher from "../../dispatcher";
+
+class FiltersDispatcher extends Component {
+
+    state = {};
+
+    componentDidMount() {
+        let params = new URLSearchParams(this.props.location.search);
+        this.setState({params});
+
+        dispatcher.register("connections_filters", payload => {
+            const params = this.state.params;
+
+            Object.entries(payload).forEach(([key, value]) => {
+                if (value == null) {
+                    params.delete(key);
+                } else {
+                    params.set(key, value);
+                }
+            });
+
+            this.needRedirect = true;
+            this.setState({params});
+        });
+    }
+
+    render() {
+        if (this.needRedirect) {
+            this.needRedirect = false;
+            return <Redirect push to={`${this.props.location.pathname}?${this.state.params}`}/>;
+        }
+
+        return null;
+    }
+}
+
+export default withRouter(FiltersDispatcher);
diff --git a/frontend/src/components/filters/RulesConnectionsFilter.js b/frontend/src/components/filters/RulesConnectionsFilter.js
index 48affb0..fc0ad4d 100644
--- a/frontend/src/components/filters/RulesConnectionsFilter.js
+++ b/frontend/src/components/filters/RulesConnectionsFilter.js
@@ -89,7 +89,7 @@ class RulesConnectionsFilter extends Component {
 
         return (
             <div className={classNames("filter", "d-inline-block", {"filter-active" : this.state.filterActive === "true"})}>
-                <div className="filter-booleanq">
+                <div className="filter-rules">
                     <ReactTags tags={this.state.activeRules} suggestions={this.state.rules}
                         onDelete={this.onDelete.bind(this)} onAddition={this.onAddition.bind(this)}
                                minQueryLength={0} placeholderText="rule_name"
diff --git a/frontend/src/components/filters/RulesConnectionsFilter.scss b/frontend/src/components/filters/RulesConnectionsFilter.scss
index 71efd0d..0bb4952 100644
--- a/frontend/src/components/filters/RulesConnectionsFilter.scss
+++ b/frontend/src/components/filters/RulesConnectionsFilter.scss
@@ -1,118 +1,121 @@
 @import "../../colors";
 
-.react-tags {
-  font-size: 12px;
-  position: relative;
-  z-index: 10;
-  padding: 0 6px;
-  cursor: text;
-  border-radius: 4px;
-  background-color: $color-primary-2;
-}
-
-.react-tags.is-focused {
-  border-color: #b1b1b1;
-}
+.filter-rules {
+  .react-tags {
+    font-size: 12px;
+    position: relative;
+    z-index: 10;
+    padding: 0 6px;
+    cursor: text;
+    border-radius: 4px;
+    background-color: $color-primary-2;
+  }
 
-.react-tags__selected {
-  display: inline;
-}
+  .react-tags.is-focused {
+    border-color: #b1b1b1;
+  }
 
-.react-tags__selected-tag {
-  font-size: 11px;
-  display: inline-block;
-  margin: 0 6px 6px 0;
-  padding: 2px 4px;
-  color: $color-primary-3;
-  border: none;
-  border-radius: 2px;
-  background: $color-primary-4;
-}
+  .react-tags__selected {
+    display: inline;
+  }
 
-.react-tags__selected-tag::after {
-  margin-left: 8px;
-  content: "\2715";
-  color: $color-primary-3;
-}
+  .react-tags__selected-tag {
+    font-size: 11px;
+    display: inline-block;
+    margin: 0 6px 6px 0;
+    padding: 2px 4px;
+    color: $color-primary-3;
+    border: none;
+    border-radius: 2px;
+    background: $color-primary-4;
+  }
 
-.react-tags__selected-tag:hover,
-.react-tags__selected-tag:focus {
-  border-color: #b1b1b1;
-}
+  .react-tags__selected-tag::after {
+    margin-left: 8px;
+    content: "\2715";
+    color: $color-primary-3;
+  }
 
-.react-tags__search {
-  display: inline-block;
-  max-width: 100%;
-  padding: 7px 10px;
-}
+  .react-tags__selected-tag:hover,
+  .react-tags__selected-tag:focus {
+    border-color: #b1b1b1;
+  }
 
-@media screen and (min-width: 30em) {
   .react-tags__search {
-    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    padding: 7px 10px;
   }
-}
 
-.react-tags__search-input {
-  font-size: inherit;
-  line-height: inherit;
-  max-width: 100%;
-  margin: 0;
-  padding: 0;
-  color: $color-primary-4;
-  border: 0;
-  outline: none;
-  background-color: $color-primary-2;
-}
+  @media screen and (min-width: 30em) {
+    .react-tags__search {
+      position: relative;
+    }
+  }
 
-.react-tags__search-input::-ms-clear {
-  display: none;
-}
+  .react-tags__search-input {
+    font-size: inherit;
+    line-height: inherit;
+    max-width: 100%;
+    margin: 0;
+    padding: 0;
+    color: $color-primary-4;
+    border: 0;
+    outline: none;
+    background-color: $color-primary-2;
+  }
 
-.react-tags__suggestions {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  width: 100%;
-}
+  .react-tags__search-input::-ms-clear {
+    display: none;
+  }
 
-@media screen and (min-width: 30em) {
   .react-tags__suggestions {
-    width: 240px;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
   }
-}
 
-.react-tags__suggestions ul {
-  font-size: 12px;
-  margin: 4px -1px;
-  padding: 0;
-  list-style: none;
-  color: $color-primary-1;
-  border-radius: 2px;
-  background: $color-primary-4;
-}
+  @media screen and (min-width: 30em) {
+    .react-tags__suggestions {
+      width: 240px;
+    }
+  }
 
-.react-tags__suggestions li {
-  padding: 3px 5px;
-  border-bottom: 1px solid #ddd;
-}
+  .react-tags__suggestions ul {
+    font-size: 12px;
+    margin: 4px -1px;
+    padding: 0;
+    list-style: none;
+    color: $color-primary-1;
+    border-radius: 2px;
+    background: $color-primary-4;
+  }
 
-.react-tags__suggestions li mark {
-  font-weight: 600;
-  text-decoration: underline;
-  background: none;
-}
+  .react-tags__suggestions li {
+    padding: 3px 5px;
+    border-bottom: 1px solid #ddd;
+  }
 
-.react-tags__suggestions li:hover {
-  cursor: pointer;
-  color: $color-primary-4;
-  background: $color-primary-0;
-}
+  .react-tags__suggestions li mark {
+    font-weight: 600;
+    text-decoration: underline;
+    background: none;
+  }
 
-.react-tags__suggestions li.is-active {
-  background: #b7cfe0;
-}
+  .react-tags__suggestions li:hover {
+    cursor: pointer;
+    color: $color-primary-4;
+    background: $color-primary-0;
+  }
+
+  .react-tags__suggestions li.is-active {
+    background: #b7cfe0;
+  }
+
+  .react-tags__suggestions li.is-disabled {
+    cursor: auto;
+    opacity: 0.5;
+  }
 
-.react-tags__suggestions li.is-disabled {
-  cursor: auto;
-  opacity: 0.5;
 }