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

src/app.css

@@ -16,6 +16,12 @@ textarea {
     background: transparent; 
 }
 
+button {
+    background-color: transparent;
+    border: none;
+    border-radius: 0;
+}
+
 button, 
 button:active, 
 button:focus {

src/app.html

@@ -154,26 +154,49 @@
                     <!-- Фильтры для таблицы серверных ошибок -->
                     <div class="col-12 col-md-6 col-lg mb-3">
                         <label for="logs-filter-log-type" class="form-label">Тип записи</label>
-                        <input type="text" class="form-control" id="logs-filter-log-type" placeholder="Введите текст">
+                        <div class="LogsFilters__inputWrapper">
+                            <input type="text" class="form-control" id="logs-filter-log-type"
+                                placeholder="Введите текст">
+                            <button type="button" class="LogsFilters__clearButton">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
                     </div>
                     <div class="col-12 col-md-6 col-lg mb-3">
                         <label for="logs-filter-message" class="form-label">Сообщение</label>
-                        <input type="text" class="form-control" id="logs-filter-message" placeholder="Введите текст">
+                        <div class="LogsFilters__inputWrapper">
+                            <input type="text" class="form-control" id="logs-filter-message"
+                                placeholder="Введите текст">
+                            <button type="button" class="LogsFilters__clearButton">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
                     </div>
                     <div class="col-12 col-md-6 col-lg mb-3">
                         <label for="logs-filter-trace" class="form-label">Стек</label>
-                        <input type="text" class="form-control" id="logs-filter-trace" placeholder="Введите текст">
+                        <div class="LogsFilters__inputWrapper">
+                            <input type="text" class="form-control" id="logs-filter-trace" placeholder="Введите текст">
+                            <button type="button" class="LogsFilters__clearButton">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
                     </div>
                     <!-- Фильтры для таблицы клиентских запросов -->
                     <div class="col-12 col-md-6 col-lg mb-3">
                         <label for="logs-filter-request-type" class="form-label">Результат запроса</label>
-                        <input type="text" class="form-control" id="logs-filter-request-type"
+                        <div class="LogsFilters__inputWrapper">
-                            placeholder="Введите текст">
+                            <input type="text" class="form-control" id="logs-filter-request-type"
+                                placeholder="Введите текст">
+                            <button type="button" class="LogsFilters__clearButton">
+                                <i class="fas fa-times"></i>
+                            </button>
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="col-12 col-xl-2 d-flex align-items-end">
                 <button type="submit" class="btn btn-primary mb-3">Поиск</button>
+                <button type="button" class="btn btn-secondary mb-3 ml-2 LogsFilters__resetButton">Сбросить</button>
             </div>
         </form>
     </template>
@@ -237,21 +260,21 @@
                 </div>
                 <div class="Info__controls">
                     <button class="Button__edit">
-                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__edit bi bi-pencil" fill="currentColor"
+                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__edit bi bi-pencil"
-                        xmlns="http://www.w3.org/2000/svg">
+                            fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                        <path fill-rule="evenodd"
+                            <path fill-rule="evenodd"
-                            d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z" />
+                                d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z" />
-                        <path fill-rule="evenodd"
+                            <path fill-rule="evenodd"
-                            d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z" />
+                                d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z" />
                         </svg>
                     </button>
                     <button class="Button__delete">
-                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__delete bi bi-trash" fill="currentColor"
+                        <svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__delete bi bi-trash"
-                        xmlns="http://www.w3.org/2000/svg">
+                            fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-                        <path
+                            <path
-                            d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
+                                d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z" />
-                        <path fill-rule="evenodd"
+                            <path fill-rule="evenodd"
-                            d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
+                                d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4L4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z" />
                         </svg>
                     </button>
                 </div>

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);
+        });
     }
 }
 

src/consts.js

@@ -34,6 +34,7 @@ export const EVENTS = {
     ROUTE_CHANGE: 'routeChange',
     ROUTE_SEARCH_CHANGE: 'routeSearchChange',
     ROW_CLICK: 'rowClick',
+    ROW_DOUBLE_CLICK: 'rowDoubleClick',
 };
 
 export const FORM_TYPES = {