@itfin/components 2.0.31 → 2.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "2.0.31",
+  "version": "2.0.33",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/filter/FilterPanel.vue

@@ -253,10 +253,12 @@ class FilterPanel extends Vue {
         params: payload
       });
       this.filters = filters;
+      this.loading = false;
       this.$emit('set-table-schema', tableSchema);
       this.loadFiltersValue();
+    }, () => {
+      this.loading = false;
     });
-    this.loading = false;
   }
 
   toggleFilters() {
@@ -291,6 +293,7 @@ class FilterPanel extends Vue {
       this.filter = filter;
       this.filterValue = filterValue;
       this.$emit('input', this.filterValue);
+      this.$emit('loaded', this.filterValue);
       this.initObserver();
     }
   }
@@ -327,6 +330,7 @@ class FilterPanel extends Vue {
       this.panel.setPayload({ ...payload, ...this.filterValue });
     }
     this.$emit('input', this.filterValue);
+    this.$emit('change', this.filterValue);
   }
 
   get daysList() {

package/src/components/panels/PanelList.vue

@@ -338,7 +338,7 @@ export default class PanelList extends Vue {
         newPanel.expand = () => this.expandPanel(newPanel);
         newPanel.getTitle = () => newPanel.title;
         newPanel.getIcon = () => newPanel.icon;
-        newPanel.setTitle = (title: string) => { newPanel.title = title; };
+        newPanel.setTitle = (title: string) => { newPanel.title = title; this.updateTitle() };
         newPanel.setIcon = (icon: string) => { newPanel.icon = icon; };
         newPanel.on = (eventName, func: (event: string, ...args: any[]) => any) => {
           if (!newPanel.__events[eventName]) {
@@ -380,9 +380,15 @@ export default class PanelList extends Vue {
     });
   }
 
+  updateTitle() {
+    const titles = this.panelsStack.map(p => p.getTitle()).filter(Boolean).reverse();
+    this.$root.$options.head.titleChunk = titles.join(' / ');
+    this.$meta().refresh();
+  }
+
   async openPanel(type: string, payload: any, openIndex?: number) {
     await this.internalOpenPanel(type, payload, openIndex);
-    this.setPanelHash()
+    this.setPanelHash();
   }
 
   emitEvent(event: string, ...args: any[]) {
@@ -464,6 +470,7 @@ export default class PanelList extends Vue {
     } else {
       this.$router.push({ hash });
     }
+    this.updateTitle();
   }
 
   async parsePanelHash() {
@@ -490,6 +497,7 @@ export default class PanelList extends Vue {
       }
       this.panelsStack = newStack;
       this.emitEvent('panels.changed', this.panelsStack);
+      this.updateTitle();
     }
   }
 

package/src/components/panels/helpers.ts

@@ -7,11 +7,14 @@ export interface IPanel {
   isCollapsed?: boolean;
 }
 
+const COLLAPSE_SYMBOL = '~'
+const PARAMS_SYMBOL = ';'
+
 export function stackToHash(stack: IPanel[]) {
   const hash = stack.map(panel => {
     let json = JSON5.stringify(panel.payload || {});
     json = json.substring(1, json.length - 1); // Remove the outer {}
-    return `${panel.type}${panel.isCollapsed ? '!' : ''}${json ? '=' : ''}${json}`;
+    return `${panel.type}${panel.isCollapsed ? COLLAPSE_SYMBOL : ''}${json ? PARAMS_SYMBOL : ''}${json}`;
   }).join(isPathType() ? '/' : '&');
   return isPathType() ? `/${hash}` : `#${hash}`;
 }
@@ -23,11 +26,11 @@ export function hashToStack(hash: string|undefined): IPanel[] {
     const str = hash.replace(isPathType() ? /^\// : /^#/, '');
 
     stack = str.split(isPathType() ? '/' : '&').map(item => {
-      if (!item.includes('=')) {
-        return { type: item.replace('!', ''), isCollapsed: item.includes('!'), payload: {} };
+      if (!item.includes(PARAMS_SYMBOL)) {
+        return { type: item.replace(COLLAPSE_SYMBOL, ''), isCollapsed: item.includes(COLLAPSE_SYMBOL), payload: {} };
       }
-      const [type, payload] = item.split('=');
-      const isCollapsed = type.includes('!');
+      const [type, payload] = item.split(PARAMS_SYMBOL);
+      const isCollapsed = type.includes(COLLAPSE_SYMBOL);
       let payloadObj:any = {};
       try {
         let json = decodeURIComponent(payload);
@@ -43,7 +46,7 @@ export function hashToStack(hash: string|undefined): IPanel[] {
         console.warn(`Error parsing payload for type ${type}:`, payload, e);
       }
       return {
-        type: type.replace('!', ''),
+        type: type.replace(COLLAPSE_SYMBOL, ''),
         isCollapsed,
         payload: payloadObj
       };

package/src/components/view/View.vue

@@ -10,7 +10,8 @@
       :endpoint="filtersEndpoint"
       :panel="panel"
       v-model="filter"
-      @input="onFilterSet"
+      @loaded="onFilterSet($event, true)"
+      @change="onFilterSet($event, false)"
     >
       <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">
@@ -186,8 +187,10 @@ class itfView extends Vue {
       this.total = res.meta.total;
       this.size = res.meta.size;
       this.$emit('update:items', this.items);
+      this.loadingData = false;
+    }, () => {
+      this.loadingData = false;
     });
-    this.loadingData = false;
     this.$emit('loaded', this.filter);
   }
 
@@ -210,14 +213,14 @@ class itfView extends Vue {
 
   updatePage (val) {
     this.page = val;
-    this.setPanelPayload({ page: val });
+    this.setPanelPayload({ page: val === 1 ? null : val });
     this.loadData();
   }
 
   updateSizePerPage (val) {
     this.page = 1;
     this.size = val;
-    this.setPanelPayload({ page: 1, size: val });
+    this.setPanelPayload({ page: null, size: val });
     this.loadData();
     localStorage.setItem('sizePerPage', val);
   }
@@ -230,7 +233,9 @@ class itfView extends Vue {
       sources.forEach(source => {
         if (source && typeof source === 'object') {
           Object.entries(source).forEach(([key, value]) => {
-            if (value !== undefined) {
+            if (key === 'page' && value === null) {
+              delete target[key];
+            } else if (value !== undefined) {
               target[key] = value;
             }
           });
@@ -240,9 +245,14 @@ class itfView extends Vue {
     }
   }
 
-  onFilterSet(filter) {
-    this.page = 1;
-    this.setPanelPayload({ ...filter, page: 1 });
+  onFilterSet(filter, keepPage = false) {
+    if (keepPage) {
+      // при завантаженні сторінки не потрібно скидувати сторінку
+      this.setPanelPayload({ ...filter });
+    } else {
+      this.page = 1;
+      this.setPanelPayload({ ...filter, page: null });
+    }
     this.loadData();
   }