@itfin/components 1.4.15 → 1.4.16

package/package.json

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

package/src/components/view/View.vue

@@ -41,6 +41,8 @@
           </a>
         </itf-dropdown>
 
+        <slot name="before-tabs"></slot>
+
         <itf-segmented-control
           v-if="tabs.length > 1"
           class="small"
@@ -79,8 +81,9 @@
             id-property="id"
             :sort-as-string="sortAsString"
             :rows="items"
+            :group-by="groupBy"
             :schema="tableSchema"
-            :sorting="sorting"
+            :sorting.sync="sorting"
             :active="activeIds"
             :no-select-all="noSelectAll"
             :show-actions="showActions"
@@ -133,7 +136,8 @@ export default @Component({
   name: 'itfView',
   components: {
     itfSegmentedControl,
-    itfDropdown, itfIcon,
+    itfDropdown,
+    itfIcon,
     itfPagination,
     itfFilterPanel,
     itfTableBody,
@@ -153,7 +157,9 @@ class itfView extends Vue {
   @Prop(String) defaultSorting;
   @Prop(String) endpoint;
   @Prop(String) filtersEndpoint;
+  @Prop(String) downloadEndpoint;
   @Prop(String) itemsKey;
+  @Prop({ type: String, default: null }) groupBy;
   @Prop({ type: String, default: 'totals' }) totalsKey;
   @Prop(String) panelKey;
   @Prop(String) stateName;
@@ -248,6 +254,21 @@ class itfView extends Vue {
     }
   }
 
+  get stateKey() {
+    return this.stateName ? `itf-table-${this.stateName}` : null;
+  }
+
+  onDownloadTable() {
+    const state = this.stateName ? JSON.parse(localStorage.getItem(this.stateKey) || 'null') : null;
+
+    const filterableColumnsNames = state?.columns?.filter(column => column.visible).map(column => column.property) || [];
+
+    const filterWithValue = Object.fromEntries(Object.entries(this.filter).filter(([_, value]) => value));
+    const queryParams = new URLSearchParams(filterWithValue).toString();
+    const path = `${this.downloadEndpoint}?${queryParams}&page=${this.page}&size=${this.size}&sort=${this.sorting}&columns=${filterableColumnsNames.join(',')}`;
+    window.open(path, '_blank');
+  }
+
   async loadData() {
     if (!this.endpoint) {
       return;