@itfin/components 2.0.7 → 2.0.9

package/src/components/table/table2.scss

@@ -13,7 +13,7 @@
   --itf-table-header-border-color: #8E97A533;
   --itf-table-border-base-color: var(--itf-table-header-bg); // кольори границь таблиці без внутрішніх рядків
   --itf-table-border-base-width: 2px;
-  --itf-table-hover-header-bg: #1A4A971A;
+  --itf-table-hover-header-bg: #dfe5ef;
   --itf-table-hover-bg: #e9edf5;
   --itf-table-bg: var(--bs-body-bg);
   --itf-table-min-width: 45px;
@@ -211,8 +211,8 @@ body[data-theme="dark"] {
       background: var(--itf-table-bg);
       min-height: var(--itf-table-header-height);
 
-      &:not(.draggable-container--is-dragging) .table-view-header-value {
-        z-index: 9;
+      &:not(.draggable-container--is-dragging):hover .table-view-header-value {
+        z-index: 39;
       }
       &:after {
         content: "";
@@ -258,9 +258,11 @@ body[data-theme="dark"] {
         border-left: var(--itf-table-border-base-width) solid var(--itf-table-border-base-color);
         left: var(--shadow-area-width);
         width: var(--indicator-area-width);
+        min-width: 1rem;
 
         &.sticky {
-            border-top-left-radius: var(--itf-table-table-border-radius);
+          border-top-left-radius: var(--itf-table-table-border-radius);
+          z-index: 13;
         }
       }
       &.sticky {
@@ -422,6 +424,13 @@ body[data-theme="dark"] {
     }
   }
 
+  &__row-divider {
+    background-color: #F7F8FA;
+    height: 5px;
+    padding: 0;
+    border-top: 1px solid rgba(238, 238, 238, 1);
+    border-bottom: 1px solid rgba(238, 238, 238, 1);
+  }
   //&:hover, &.permanent-editable-border {
   //  .table-view-item-value.editable {
   //    .form-control {

package/src/components/tree/TreeEditor.vue

@@ -457,11 +457,10 @@ export default {
 
         let newItems = this.moveItem(this.itemsTrans, nkFrom, nkTo, modeDir, modeInsert);
         if (this.flat) {
-          newItems = flattenTree(newItems).map(node => {
-            node.parentId = node.parentNode ? node.parentNode.id : null;
+          newItems = flattenTree(newItems, 4, 0, null, [], this.itemChildren).map(node => {
+            node.parentId = node.parentNode ? node.parentNode[this.itemKey] : null;
             return node;
           });
-          console.info(2, newItems);
         }
         this.$emit('update:items', newItems);
       });

package/src/components/view/View.vue

@@ -2,12 +2,13 @@
 
   <div v-loading="loading || loadingData" class="flex-grow-1 w-100 d-flex flex-column">
     <itf-filter-panel
-      search-placeholder="Search by text"
+      :search-placeholder="searchPlaceholder"
       search
       class="py-2 px-3"
       :endpoint="filtersEndpoint"
+      :panel="panel"
       v-model="filter"
-      @input="loadData"
+      @input="onFilterSet"
     >
       <template #after-filter-btn>
         <itf-dropdown v-if="$refs.table && schema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
@@ -122,6 +123,8 @@ class itfView extends Vue {
   @Prop(String) filtersEndpoint;
   @Prop(String) itemsKey;
   @Prop(String) panelKey;
+  @Prop({ type: String, default () { return this.$t('components.table.search'); } }) searchPlaceholder;
+  @Prop() panel;
 
   page = 1;
   total = 0;
@@ -134,7 +137,12 @@ class itfView extends Vue {
   selectedIds = [];
 
   created() {
-    this.sorting = this.defaultSorting;
+    const defaultSize = localStorage.getItem('sizePerPage') ?? 20;
+
+    const { page, size, sorting } = this.panel.getPayload() ?? {};
+    this.page = page ?? 1;
+    this.size = size ?? defaultSize;
+    this.sorting = sorting ?? this.defaultSorting;
   }
 
   mounted() {
@@ -154,6 +162,7 @@ class itfView extends Vue {
     this.$emit('load', this.filter);
     this.loadingData = true;
     await this.$try(async () => {
+      console.info('filter', this.filter)
       const res = await this.$axios.$get(this.endpoint, {
         params: {
           ...this.filter,
@@ -179,21 +188,50 @@ class itfView extends Vue {
   }
 
   get countPages() {
-    return Math.ceil(this.total / this.size);
+    return Math.ceil(this.total / this.size) ?? 1;
   }
 
   updateSorting (val) {
     this.sorting = val;
+    this.setPanelPayload({ sorting: val });
     this.loadData();
   }
 
   updatePage (val) {
     this.page = val;
+    this.setPanelPayload({ page: val });
     this.loadData();
   }
 
   updateSizePerPage (val) {
+    this.page = 1;
     this.size = val;
+    this.setPanelPayload({ page: 1, size: val });
+    this.loadData();
+    localStorage.setItem('sizePerPage', val);
+  }
+
+  setPanelPayload(payload) {
+    this.panel.setPayload(assignWithoutUndefined(this.panel.getPayload(), payload));
+
+    function assignWithoutUndefined(...sources) {
+      const target = {};
+      sources.forEach(source => {
+        if (source && typeof source === 'object') {
+          Object.entries(source).forEach(([key, value]) => {
+            if (value !== undefined) {
+              target[key] = value;
+            }
+          });
+        }
+      });
+      return target;
+    }
+  }
+
+  onFilterSet(filter) {
+    this.page = 1;
+    this.setPanelPayload({ ...filter, page: 1 });
     this.loadData();
   }
 }

package/src/helpers/tree.js

@@ -6,7 +6,7 @@ function flattenTree (items, spaces = 4, level = 0, parentNode = null, path = []
     parentNode,
     level,
     levelPrefix: String.fromCharCode(0xA0).repeat(level * spaces)
-  }, ...flattenTree(val[childrenKey] || [], spaces, level + 1, val, [...path, childrenKey, index])), []);
+  }, ...flattenTree(val[childrenKey] || [], spaces, level + 1, val, [...path, childrenKey, index], childrenKey)), []);
 }
 
 export
@@ -14,9 +14,9 @@ function buildTree (items, idKey = 'id', parentKey = 'parentId', childrenKey = '
 
   const buildNode = (items, id, parent) => items
     .filter(item => item[parentKey] === parent)
-    .map(item => ({ ...item, [childrenKey]: buildNode(items, item[idKey], item[idKey]) }));
+    .map(item => ({ ...item, [childrenKey]: buildNode(items, item[idKey], item[idKey], childrenKey) }));
 
-  return buildNode(items, null, null);
+  return buildNode(items, null, null, childrenKey);
 }
 
 export

package/src/locales/en.js

@@ -127,6 +127,7 @@ module.exports = {
     moveLeft: 'Move left',
     columns: 'Columns',
     resetTableSettings: 'Reset table settings',
+    search: 'Search',
   },
   pagination: {
     itemsPerPage: 'Items per page',

package/src/locales/uk.js

@@ -132,6 +132,7 @@ module.exports = {
     moveLeft: 'Посунути вліво',
     columns: 'Колонки',
     resetTableSettings: 'Скинути налаштування таблиці',
+    search: 'Пошук',
   },
   filter: {
     search: 'Пошук',
@@ -142,6 +143,8 @@ module.exports = {
     noResults: 'Немає результатів',
     showMore: 'показати всі ({count})',
     hideMore: 'сховати',
+    exact: 'Точне значення',
+    range: 'Діапазон',
     filterBy: 'Фільтрувати за',
     from: 'Від',
     to: 'До',