@itfin/components 2.0.8 → 2.0.9

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/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: 'До',