@itfin/components 1.4.18 → 1.4.20

package/package.json

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

package/src/components/filter/FilterPanel.vue

@@ -17,13 +17,13 @@
         </div>
       </slot>
       <div class="d-flex gap-2">
-        <itf-button v-if="showFilter" default icon class="position-relative" @click="toggleFilters" :class="{'active': showFilters}">
+        <!--itf-button v-if="showFilter" default icon class="position-relative" @click="toggleFilters" :class="{'active': showFilters}">
           <itf-icon new name="filter" />
           <span v-if="activeFiltersCount" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
             {{activeFiltersCount}}
             <span class="visually-hidden">active filters</span>
           </span>
-        </itf-button>
+        </itf-button-->
         <slot name="after-filter-btn"></slot>
       </div>
     </div>

package/src/components/view/View.vue

@@ -3,8 +3,8 @@
   <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'"
+      search
+      show-filter
       class="py-2 px-3"
       :static-filters="filters"
       :endpoint="filtersEndpoint"
@@ -40,6 +40,15 @@
             </div>
           </a>
         </itf-dropdown>
+        <itf-dropdown v-if="downloadEndpoint" shadow append-to-context :button-options="{ default: true, small: true }" class="h-100" autoclose="outside">
+          <template #button>
+            <itf-icon name="download"/>
+            {{ $t('export') }}
+          </template>
+          <a v-for="(item, n) in getDownloadLinks()" target="_blank" :key="n" :href="item.link" class="dropdown-item">
+            {{item.title}}
+          </a>
+        </itf-dropdown>
 
         <slot name="before-tabs"></slot>
 
@@ -60,7 +69,11 @@
       </template>
     </itf-filter-panel>
 
-    <slot v-if="currentTab === 'list'" name="list-view"></slot>
+    <div v-if="currentTab === 'list'" class="position-relative flex-grow-1">
+      <div class="position-absolute" style="top: 0; left: 0; right: 0; bottom: 0;     overflow: auto;">
+      <slot name="list-view" :items="items" :loading="loading"></slot>
+      </div>
+    </div>
     <slot v-else-if="currentTab === 'board'" name="kanban-view"></slot>
     <slot v-else-if="currentTab === 'calendar'" name="calendar-view"></slot>
     <slot v-else name="table-view">
@@ -130,10 +143,12 @@ import itfTableBody from "../table/TableBody.vue";
 import itfIcon from "../icon/Icon.vue";
 import itfDropdown from "../dropdown/Dropdown.vue";
 import itfSegmentedControl from '../segmented-control/SegmentedControl.vue';
+import itfButton from '@itfin/components/src/components/button/Button.vue';
 
 export default @Component({
   name: 'itfView',
   components: {
+    itfButton,
     itfSegmentedControl,
     itfDropdown,
     itfIcon,
@@ -158,6 +173,7 @@ class itfView extends Vue {
   @Prop(String) filtersEndpoint;
   @Prop(String) itemsKey;
   @Prop({ type: String, default: null }) groupBy;
+  @Prop({ type: String, default: null }) downloadEndpoint; // префікс апі для завантаження
   @Prop({ type: String, default: 'totals' }) totalsKey;
   @Prop(String) panelKey;
   @Prop(String) stateName;
@@ -185,7 +201,7 @@ class itfView extends Vue {
   filter = {};
   loadingData = false;
   activeIds = [];
-  tableColumns = [];
+  tableColumns = null;
   totals = null;
 
   @Watch('selectedIds', { deep: true, immediate: true })
@@ -195,6 +211,28 @@ class itfView extends Vue {
     }
   }
 
+  getDownloadLinks() {
+    const state = this.$refs.table ? this.$refs.table.getTableState() : null;
+    const filter = this.filter;
+    const sorting = this.sorting;
+    const filterableColumnsNames = (state?.columns ?? []).filter(column => column.visible).map(column => column.property);
+
+    const filterWithValue = Object.fromEntries(Object.entries(filter).filter(([_, value]) => typeof value !== 'undefined'));
+    const params = {
+      ...filterWithValue,
+      sort: sorting
+    };
+    if (filterableColumnsNames.length) {
+      params.columns = filterableColumnsNames.join(',')
+    }
+    const xlsQueryParams = new URLSearchParams({ ...params, format: 'xlsx' }).toString();
+    const csvQueryParams = new URLSearchParams({ ...params, format: 'csv' }).toString();
+    return [
+      { title: 'Excel (xlsx)', link: `${this.downloadEndpoint}?${xlsQueryParams}` },
+      { title: 'Plain text (csv)', link: `${this.downloadEndpoint}?${csvQueryParams}` },
+    ];
+  }
+
   get currentTab() {
     return this.tab;
   }
@@ -362,7 +400,7 @@ class itfView extends Vue {
   }
 
   getTableState() {
-    return this.$refs.table.getTableState();
+    return this.$refs.table ? this.$refs.table.getTableState() : null;
   }
 }
 </script>