From 4e8ab200aa1c15bf3b46c7c8cc38e666a45a995d Mon Sep 17 00:00:00 2001
From: "damian.przygodzki" <damian.przygodzki@jazzy.pro>
Date: Tue, 20 Jun 2017 15:15:58 +0200
Subject: [PATCH] #864 Sticky filters

---
 src/assets/css/inputs.css               | 11 ++++++++
 src/components/filters/Filters.js       | 13 +++++++--
 src/components/filters/FiltersStatic.js | 35 +++++++++++++++++++++++++
 3 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 src/components/filters/FiltersStatic.js

diff --git a/src/assets/css/inputs.css b/src/assets/css/inputs.css
index 8a7cffc42..2d672f903 100644
--- a/src/assets/css/inputs.css
+++ b/src/assets/css/inputs.css
@@ -237,6 +237,17 @@ button, .btn {
     padding-left: 1rem;
 }
 
+.btn-meta-disabled,
+.btn-meta-disabled:hover,
+.btn-meta-disabled:focus,
+.btn-meta-disabled:active {
+    background-color: $brand-dark-color;
+    color: $brand-font-color;
+    outline: none;
+    box-shadow:none;
+    border:0;
+}
+
 
 /*
 *  CUSTOM CHECKBOX
diff --git a/src/components/filters/Filters.js b/src/components/filters/Filters.js
index 6f4d21f4d..01a4c17d1 100644
--- a/src/components/filters/Filters.js
+++ b/src/components/filters/Filters.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import FiltersFrequent from './FiltersFrequent';
 import FiltersNotFrequent from './FiltersNotFrequent';
+import FiltersStatic from './FiltersStatic';
 
 class Filters extends Component {
     constructor(props) {
@@ -89,7 +90,9 @@ class Filters extends Component {
     sortFilters = (data) => {
         return {
             frequentFilters: data.filter(filter => filter.frequent),
-            notFrequentFilters: data.filter(filter => !filter.frequent)
+            notFrequentFilters: data.filter(filter =>
+                !filter.frequent && !filter.static),
+            staticFilters: data.filter(filter => filter.static)
         }
     }
 
@@ -116,7 +119,7 @@ class Filters extends Component {
     render() {
         const {filterData, windowType, viewId} = this.props;
         const {
-            frequentFilters, notFrequentFilters
+            frequentFilters, notFrequentFilters, staticFilters
         } = this.sortFilters(filterData);
         const {notValidFields, widgetShown, filter} = this.state;
         return (
@@ -151,6 +154,12 @@ class Filters extends Component {
                             dropdownToggled={this.dropdownToggled}
                         />
                     }
+                    {!!staticFilters.length &&
+                        <FiltersStatic
+                            data={staticFilters}
+                            clearFilters={this.clearFilters}
+                        />
+                    }
                 </div>
             </div>
         )
diff --git a/src/components/filters/FiltersStatic.js b/src/components/filters/FiltersStatic.js
new file mode 100644
index 000000000..69176296d
--- /dev/null
+++ b/src/components/filters/FiltersStatic.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react';
+
+class FiltersStatic extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        const {data, clearFilters} = this.props;
+        return (
+            <div className="filter-wrapper">
+                {data.map((item, index) => {
+                    return (
+                        <div className="filter-wrapper" key={index}>
+                            <button
+                                className={
+                                    'btn btn-meta-disabled ' +
+                                    'btn-distance btn-sm'
+                                }
+                                onClick={clearFilters}
+                            >
+                                <i
+                                    className="meta-icon-trash"
+                                />
+                                {item.caption}
+                            </button>
+                        </div>);
+                    })
+                }
+            </div>
+        );
+    }
+}
+
+export default FiltersStatic;