vigdorov/storage-service-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Nikolay
2020-07-30 22:49:43 +03:00
committed by GitHub
parent 6a87a97c85
commit cf045379d8
8 changed files with 102 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app.css
View File

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

57
src/app.html
View File

@ -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"
placeholder="Введите текст">
<div class="LogsFilters__inputWrapper">
<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"
xmlns="http://www.w3.org/2000/svg">
<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" />
<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" />
<svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__edit bi bi-pencil"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<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" />
<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" />
</svg>
</button>
<button class="Button__delete">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__delete bi bi-trash" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<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" />
<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" />
<svg width="1em" height="1em" viewBox="0 0 16 16" class="Icon__delete bi bi-trash"
fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<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" />
<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" />
</svg>
</button>
</div>

29
src/components/logs-filters/LogsFilters.css Normal file
View File

@ -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;
}

19
src/components/logs-filters/LogsFilters.js
View File

@ -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,
};
}

2
src/components/logs-page/LogsPage.js
View File

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

3
src/components/table/Table.js
View File

@ -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,

4
src/components/table/TableRowWrapper.js
View File

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

1
src/consts.js
View File

@ -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 = {