HM-95. Доработки по Журналу, добавлена очистка фильтров и открытие по модалки по даблклику (#38)

src/components/logs-filters/LogsFilters.css

@@ -0,0 +1,29 @@
+@keyframes SmoothAppearance {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+.LogsFilters__inputWrapper {
+    position: relative;
+}
+
+.LogsFilters__clearButton {
+    position: absolute;
+    right: 8px;
+    top: 0;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+}
+
+.LogsFilters__inputWrapper:hover .LogsFilters__clearButton {
+    opacity: 1;
+    animation-name: SmoothAppearance;
+    animation-duration: 250ms;
+}

src/components/logs-filters/LogsFilters.js

@@ -2,14 +2,27 @@ import Component from '../component/index';
 import routeService from '../../services/RouteService';
 import {createElement} from '../../utils/elementUtils';
 import {LOG_TYPE, LOG_LABELS} from '../../consts';
+import './LogsFilters.css';
 
 class LogsFilters extends Component {
     constructor (parentNode) {
         super('#logs-filters', parentNode);
         this.initFilter();
 
+        this.resetButton = this.mainNode.querySelector('.LogsFilters__resetButton');
+
         this.addEventListener(this.mainNode, 'submit', this.submit);
         this.addEventListener(this.typeInput, 'change', this.changeType);
+        this.addEventListener(this.resetButton, 'click', this.clearFilter);
+    }
+
+    clearFilter = () => {
+        this.serverInputs.concat(this.clientInputs).forEach(({input}) => {
+            input.value = '';
+        });
+        routeService.pushQuery({
+            tableType: this.typeInput.value,
+        }, true);
     }
 
     changeType = () => {
@@ -47,10 +60,14 @@ class LogsFilters extends Component {
 
     initInput = ({name, id}) => {
         const input = this.mainNode.querySelector(`#${id}`);
+        const clearButton = input.parentNode.querySelector('.LogsFilters__clearButton');
+        this.addEventListener(clearButton, 'click', () => {
+            input.value = '';
+        });
         return {
             name,
             input,
-            parentNode: input.parentNode,
+            parentNode: input.parentNode.parentNode,
         };
     }
 

src/components/logs-page/LogsPage.js

@@ -130,7 +130,7 @@ class LogsPage extends Component {
 
             this.table.render(rows);
 
-            this.addSubscribe(this.table, EVENTS.ROW_CLICK, (_, row) => {
+            this.addSubscribe(this.table, EVENTS.ROW_DOUBLE_CLICK, (_, row) => {
                 const findedRow = preparedRows.find((item) => item._id === row._id);
                 this.openRowForView(tableType, findedRow);
             });

src/components/table/Table.js

@@ -80,6 +80,9 @@ class Table extends Component {
             this.addSubscribe(tr, EVENTS.ROW_CLICK, (event) => {
                 this.next(EVENTS.ROW_CLICK, event, row);
             });
+            this.addSubscribe(tr, EVENTS.ROW_DOUBLE_CLICK, (event) => {
+                this.next(EVENTS.ROW_DOUBLE_CLICK, event, row);
+            });
             const rowComponent = this.renderRow(tr.mainNode, this.cols, row);
             return {
                 tr,

src/components/table/TableRowWrapper.js

@@ -8,6 +8,10 @@ class TableRowWrapper extends Component {
         this.addEventListener(this.mainNode, 'click', () => {
             this.next(EVENTS.ROW_CLICK);
         });
+
+        this.addEventListener(this.mainNode, 'dblclick', () => {
+            this.next(EVENTS.ROW_DOUBLE_CLICK);
+        });
     }
 }