@itfin/components 1.4.14 → 1.4.16

package/package.json

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

package/src/components/view/View.vue

@@ -2,16 +2,16 @@
 
   <div v-loading="loading || loadingData" class="flex-grow-1 w-100 d-flex flex-column">
     <itf-filter-panel
-        :search-placeholder="searchPlaceholder"
-        :search="currentTab !== 'list'"
-        :show-filter="currentTab !== 'list'"
-        class="py-2 px-3"
-        :static-filters="filters"
-        :endpoint="filtersEndpoint"
-        :panel="panel"
-        v-model="filter"
-        @input="onFilterSet"
-        @set-table-schema="setTableSchema"
+      :search-placeholder="searchPlaceholder"
+      :search="currentTab !== 'list'"
+      :show-filter="currentTab !== 'list'"
+      class="py-2 px-3"
+      :static-filters="filters"
+      :endpoint="filtersEndpoint"
+      :panel="panel"
+      v-model="filter"
+      @input="onFilterSet"
+      @set-table-schema="setTableSchema"
     >
       <template #after-filter-btn>
         <itf-dropdown v-if="$refs.table && tableSchema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
@@ -41,13 +41,15 @@
           </a>
         </itf-dropdown>
 
+        <slot name="before-tabs"></slot>
+
         <itf-segmented-control
-            v-if="tabs.length > 1"
-            class="small"
-            :value="currentTab"
-            item-key="value"
-            :items="tabs"
-            @input="updateTabs"
+          v-if="tabs.length > 1"
+          class="small"
+          :value="currentTab"
+          item-key="value"
+          :items="tabs"
+          @input="updateTabs"
         >
           <template #item="{ item }">
             <div class="d-flex align-items-center">
@@ -66,28 +68,29 @@
       <div class="flex-grow-1 px-3 d-flex flex-column">
         <div class="position-relative flex-grow-1">
           <itf-table
-              ref="table"
-              style="--shadow-area-width: 0px;"
-              absolute
-              striped
-              clickable
-              column-sorting
-              column-resizing
-              :indicator-type="indicatorType"
-              class="permanent-checkboxes"
-              :state-name="stateName"
-              id-property="id"
-              :sort-as-string="sortAsString"
-              :rows="items"
-              :schema="tableSchema"
-              :sorting="sorting"
-              :active="activeIds"
-              :no-select-all="noSelectAll"
-              :show-actions="showActions"
-              :indicator-width="indicatorWidth"
-              v-model="selectedIds"
-              @row-click="$emit('open', $event)"
-              @update:sorting="updateSorting($event)"
+            ref="table"
+            style="--shadow-area-width: 0px;"
+            absolute
+            striped
+            clickable
+            column-sorting
+            column-resizing
+            :indicator-type="indicatorType"
+            class="permanent-checkboxes"
+            :state-name="stateName"
+            id-property="id"
+            :sort-as-string="sortAsString"
+            :rows="items"
+            :group-by="groupBy"
+            :schema="tableSchema"
+            :sorting.sync="sorting"
+            :active="activeIds"
+            :no-select-all="noSelectAll"
+            :show-actions="showActions"
+            :indicator-width="indicatorWidth"
+            v-model="selectedIds"
+            @row-click="$emit('open', $event)"
+            @update:sorting="updateSorting($event)"
           >
             <template v-for="(_, name) in $slots" #[name]="slotData">
               <slot :name="name" v-bind="slotData || {}"/>
@@ -101,18 +104,18 @@
     </slot>
 
     <itf-pagination
-        class="my-2 px-3"
-        v-if="showPagination"
-        show-size
-        :size="size"
-        :items="items"
-        :pages="countPages"
-        :value="page"
-        @input="updatePage($event)"
-        @per-page="updateSizePerPage($event)"
+      class="my-2 px-3"
+      v-if="showPagination"
+      show-size
+      :size="size"
+      :items="items"
+      :pages="countPages"
+      :value="page"
+      @input="updatePage($event)"
+      @per-page="updateSizePerPage($event)"
     >
       <template #center>
-        <slot name="pagination-center" />
+        <slot name="pagination-center" :totals="totals" />
       </template>
     </itf-pagination>
   </div>
@@ -133,7 +136,8 @@ export default @Component({
   name: 'itfView',
   components: {
     itfSegmentedControl,
-    itfDropdown, itfIcon,
+    itfDropdown,
+    itfIcon,
     itfPagination,
     itfFilterPanel,
     itfTableBody,
@@ -153,7 +157,10 @@ 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;
   @Prop({ type: String, default: 'checkbox' }) indicatorType;
@@ -182,6 +189,7 @@ class itfView extends Vue {
   activeIds = [];
   tableColumns = undefined;
   _currentTab = null;
+  totals = null;
 
   @Watch('selectedIds', { deep: true, immediate: true })
   updateSelectedIds() {
@@ -246,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;
@@ -275,6 +298,7 @@ class itfView extends Vue {
         this.size = Number(headers['x-size'] ?? 20);
       } else {
         this.items = data[this.itemsKey];
+        this.totals = data[this.totalsKey];
         this.page = data.meta.page;
         this.total = data.meta.total;
         this.size = data.meta.size;