@itfin/components 1.4.27 → 1.4.30

package/src/components/panels/index.ts

@@ -0,0 +1,43 @@
+const PanelsSettings = {
+  pathType: 'path', // 'hash' | 'path'
+  rootPanelList: null, // This will be set to the root panel list when the app is initialized
+};
+
+export function getPanelsSettings() {
+  return PanelsSettings;
+}
+
+export function getRootPanelList() {
+  return PanelsSettings.rootPanelList;
+}
+
+export function isPathType() {
+  return PanelsSettings.pathType === 'path';
+}
+
+export function setPanelsPathType(settings: any) {
+  PanelsSettings.pathType = settings.pathType ?? 'path';
+}
+
+export function setRootPanelList(rootPanelList: any) {
+  PanelsSettings.rootPanelList = rootPanelList;
+}
+
+export function emitGlobalEvent(eventName: string, data: any) {
+  const event = new CustomEvent(`panel:${eventName}`, { detail: data });
+  window.dispatchEvent(event);
+}
+
+export function onGlobalEvent(eventName: string|string[], callback: (event: CustomEvent) => void) {
+  const eventNames = Array.isArray(eventName) ? eventName : [eventName];
+  for (const name of eventNames) {
+    window.addEventListener(`panel:${name}`, callback);
+  }
+}
+
+export function offGlobalEvent(eventName: string|string[], callback: (event: CustomEvent) => void) {
+  const eventNames = Array.isArray(eventName) ? eventName : [eventName];
+  for (const name of eventNames) {
+    window.removeEventListener(`panel:${name}`, callback);
+  }
+}

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)"
       @set-table-schema="setTableSchema"
     >
       <template #after-filter-btn>
@@ -213,7 +214,7 @@ class itfView extends Vue {
 
   getDownloadLinks() {
     const state = this.$refs.table ? this.$refs.table.getTableState() : null;
-    const filter = this.filter;
+    const filter = { ...this.filter };
     const sorting = this.sorting;
     const filterableColumnsNames = (state?.columns ?? []).filter(column => column.visible).map(column => column.property);
 
@@ -297,7 +298,7 @@ class itfView extends Vue {
     this.$emit('load', this.filter);
     this.loadingData = true;
     await this.$try(async () => {
-      let filter = this.filter;
+      let filter = { ...this.filter };
       if (this.oldFormat) {
         filter = Object.keys(filter).reduce((acc, key) => {
           acc[`filter[${key}]`] = filter[key];
@@ -370,7 +371,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;
             }
           });
@@ -380,10 +383,14 @@ class itfView extends Vue {
     }
   }
 
-  onFilterSet(filter) {
-    this.page = 1;
-    this.selectedIds = [];
-    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();
   }