компонент для фильтрации записей рееста

README.md

@@ -63,6 +63,7 @@
 * [changeLocaleListener.js - скрипт для работы с локалью](constructor/scripts/changeLocaleListener.js)
 * [Канбан доска](constructor/components/Канбан-доска)
 * [представление реестра, с поиском, фильтрацией и кучей дополнительных функций + выгрузка записей в excel](constructor/components/записи%20реестра)
+* [Фильтр записей реестра](constructor/components/фильтр)
 * [Список работ](constructor/components/Список работ)
 
 

constructor/components/фильтр/фильтр.css

+.filter-window {
+  display: none;
+}
+
+.filter-window:before {
+  content: '';
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  overflow: hidden;
+}
+
+.filter-close {
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  width: 25px;
+  height: 25px;
+  cursor: pointer;
+  user-select: none;
+  transition: 0.3s ease-out 0s;
+}
+
+.filter-close:hover {
+  transform: rotate(90deg);
+}
+
+.filter-close:hover svg > line {
+  stroke: #f0506e;
+}
+
+.filter-content {
+  position: fixed;
+  left: 0;
+  top: 0;
+  max-width: 900px;
+  width: 50%;
+  height: 100%;
+  overflow: hidden;
+  background: #fff;
+  z-index: 1000;
+}
+
+.filter-header {
+  color: #666;
+  width: calc(100% - 80px);
+  height: 50px;
+  padding: 10px 20px;
+  border-bottom: 1px solid #e5e5e5;
+  user-select: none;
+  margin-bottom: 20px;
+}
+
+.filter-header h4 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.filter-body {
+  width: 100%;
+  height: calc(100% - 150px);
+  overflow: hidden;
+  border-bottom: 1px solid #e5e5e5;
+  padding: 0 20px;
+}
+
+.filter-buttons {
+  margin: 20px 0;
+}
+
+.lock {
+  overflow: hidden;
+}
+
+#rd-params-block {
+  height: 100%;
+  overflow: auto;
+}
+
+#rd-table-params td {
+  padding: 10px 2px;
+  vertical-align: middle;
+}
+
+#rd-table-params a.uk-form-icon:hover {
+  color: #1e87f0;
+}
+
+#rd-table-params .uk-form-label {
+  max-width: fit-content;
+  max-width: -moz-fit-content;
+  max-width: -webkit-fit-content;
+}
+
+.filter-content input.uk-input[disabled] {
+  color: #1e87f0;
+  background: #fff;
+  cursor: text;
+}
+
+.filter-content select.uk-select:not([multiple]) {
+  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgNyA0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAuMzc1IDAuODc1TDMuNSA0TDYuNjI1IDAuODc1SDAuMzc1WiIgZmlsbD0iIzIxOTZGMyIvPgo8L3N2Zz4K") no-repeat 98%/100% !important;
+  background-size: 12px 12px !important;
+  color: #222 !important;
+  cursor: pointer;
+  padding: 0 35px 0 10px !important;
+}
+
+.filter_button {
+  user-select: none;
+  cursor: pointer;
+  margin: auto;
+  font-size: 32px;
+  transition: 0.3s;
+}
+
+.filter_button:hover {
+  color: var(--blue);
+  transform: scale(1.3);
+}
+
+.filter_button._filter {
+  color: red;
+}
+
+@media screen and (max-width:1160px) {
+  .filter-content {
+    max-width: 100% !important;
+    width: 100% !important;
+  }
+}

constructor/components/фильтр/фильтр.html

+<div class="filter-window">
+  <div class="filter-content">
+
+    <div class="filter-close">
+      <svg width="25" height="25" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="close-large"><line fill="none" stroke="#666" stroke-width="1.4" x1="1" y1="1" x2="19" y2="19"></line><line fill="none" stroke="#666" stroke-width="1.4" x1="19" y1="1" x2="1" y2="19"></line></svg>
+    </div>
+
+    <div class="filter-header"><h4>Расширенный поиск</h4></div>
+
+    <div class="filter-body">
+
+      <div id="rd-params-block">
+        <div class="uk-grid-small uk-grid uk-margin-bottom uk-margin-top" uk-grid>
+          <div style="width: calc(100% - 60px);">
+            <select class="uk-select" id="rd-form-param-list"></select>
+          </div>
+        </div>
+
+        <label class="uk-form-label" for="rd-table-params">Условия:</label>
+        <div class="uk-form-controls rd-table-params-container">
+          <table id="rd-table-params" class="uk-table uk-table-justify uk-table-divider">
+            <tbody></tbody>
+          </table>
+        </div>
+      </div>
+
+    </div>
+
+    <div class="filter-buttons uk-flex uk-flex-middle uk-flex-center uk-width-1-1">
+      <button id="btn-filter" class="uk-button uk-button-primary">Фильтровать</button>
+      <button id="btn-filter-drop" class="uk-button uk-button-default uk-margin-small-left">Сбросить</button>
+    </div>
+
+  </div>
+</div>