diff --git a/src/app.css b/src/app.css
index 1e8c2a7..b76de2d 100644
--- a/src/app.css
+++ b/src/app.css
@@ -16,6 +16,12 @@ textarea {
background: transparent;
}
+button {
+ background-color: transparent;
+ border: none;
+ border-radius: 0;
+}
+
button,
button:active,
button:focus {
diff --git a/src/app.html b/src/app.html
index e3727fd..f7786c3 100644
--- a/src/app.html
+++ b/src/app.html
@@ -154,26 +154,49 @@
+
@@ -237,21 +260,21 @@
diff --git a/src/components/logs-filters/LogsFilters.css b/src/components/logs-filters/LogsFilters.css
new file mode 100644
index 0000000..8e18eca
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/logs-filters/LogsFilters.js b/src/components/logs-filters/LogsFilters.js
index 652a2eb..550a4aa 100644
--- a/src/components/logs-filters/LogsFilters.js
+++ b/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,
};
}
diff --git a/src/components/logs-page/LogsPage.js b/src/components/logs-page/LogsPage.js
index 360e8d8..b243644 100644
--- a/src/components/logs-page/LogsPage.js
+++ b/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);
});
diff --git a/src/components/table/Table.js b/src/components/table/Table.js
index 521edca..822cf7e 100644
--- a/src/components/table/Table.js
+++ b/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,
diff --git a/src/components/table/TableRowWrapper.js b/src/components/table/TableRowWrapper.js
index f803ecc..3cb115f 100644
--- a/src/components/table/TableRowWrapper.js
+++ b/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);
+ });
}
}
diff --git a/src/consts.js b/src/consts.js
index efa852f..b0a2125 100644
--- a/src/consts.js
+++ b/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 = {