@itfin/components 1.4.7 → 1.4.9

package/package.json

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

package/src/components/filter/FilterPanel.vue

@@ -27,18 +27,21 @@
         <slot name="after-filter-btn"></slot>
       </div>
     </div>
-    <div v-if="showFilters && showFilter" class="d-flex gap-2 flex-nowrap filters-row">
-      <filter-badge
-        v-for="(facet, n) in visibleFilters"
-        :key="n"
-        v-model="filter[facet.name]"
-        :is-default="filter[facet.name].isDefault"
-        :text="filter[facet.name].label"
-        :type="facet.type"
-        :icon="facet.icon"
-        :options="facet.options"
-        @change="onFilterChange(facet, $event)"
-      />
+    <div class="d-flex align-items-center justify-content-between w-100">
+      <div v-if="showFilters && showFilter" class="d-flex gap-2 flex-nowrap filters-row">
+        <filter-badge
+          v-for="(facet, n) in visibleFilters"
+          :key="n"
+          v-model="filter[facet.name]"
+          :is-default="filter[facet.name].isDefault"
+          :text="filter[facet.name].label"
+          :type="facet.type"
+          :icon="facet.icon"
+          :options="facet.options"
+          @change="onFilterChange(facet, $event)"
+        />
+      </div>
+      <slot name="after-filters"></slot>
     </div>
     <div v-if="loading">
       <span class="itf-spinner"></span>
@@ -292,7 +295,7 @@ class FilterPanel extends Vue {
       value.isDefault = facet.options.defaultValue ? JSON.stringify(value.value) === JSON.stringify(facet.options.defaultValue.value) : false;
       value.label = item ? item.label : facet.options.defaultValue.label;
     } else if (facet.type === 'text') {
-      value.value = value.value.length ? value.value : undefined;
+      value.value = value.value.length ? value.value : (facet.options?.defaultValue ?? undefined);
       value.isDefault = !value.value;
     }
     value.hidden = facet.options?.hidden ?? false;

package/src/components/view/View.vue

@@ -6,6 +6,7 @@
       :search="currentTab !== 'list'"
       :show-filter="currentTab !== 'list'"
       class="py-2 px-3"
+      :static-filters="filters"
       :endpoint="filtersEndpoint"
       :panel="panel"
       v-model="filter"
@@ -41,7 +42,7 @@
         </itf-dropdown>
 
         <itf-segmented-control
-          v-if="tabs.length"
+          v-if="tabs.length > 1"
           class="small"
           v-model="currentTab"
           item-key="value"
@@ -71,7 +72,7 @@
           clickable
           column-sorting
           column-resizing
-          indicator-type="checkbox"
+          :indicator-type="indicatorType"
           class="permanent-checkboxes"
           :state-name="stateName"
           id-property="id"
@@ -154,6 +155,7 @@ class itfView extends Vue {
   @Prop(String) itemsKey;
   @Prop(String) panelKey;
   @Prop(String) stateName;
+  @Prop({ type: String, default: 'checkbox' }) indicatorType;
   @Prop({ type: String, default: 'table' }) tab;
   @Prop({ type: String, default () { return this.$t('components.table.search'); } }) searchPlaceholder;
   @Prop() panel;
@@ -162,7 +164,8 @@ class itfView extends Vue {
   @Prop(Boolean) listViewEnabled;
   @Prop(Boolean) kanbanViewEnabled;
   @Prop(Boolean) calendarViewEnabled;
-  @Prop(Boolean) tableViewEnabled;
+  @Prop({ type: Boolean, default: true }) tableViewEnabled;
+  @Prop(Boolean) oldFormat;
 
   page = 1;
   total = 0;
@@ -172,7 +175,7 @@ class itfView extends Vue {
   filter = {};
   loadingData = false;
   activeIds = [];
-  tableColumns = [];
+  tableColumns = undefined;
   _currentTab = null;
 
   get currentTab() {
@@ -240,19 +243,32 @@ class itfView extends Vue {
     this.$emit('load', this.filter);
     this.loadingData = true;
     await this.$try(async () => {
-      console.info('filter', this.filter)
-      const res = await this.$axios.$get(this.endpoint, {
+      let filter = this.filter;
+      if (this.oldFormat) {
+        filter = Object.keys(filter).reduce((acc, key) => {
+          acc[`filter[${key}]`] = filter[key];
+          return acc;
+        }, {})
+      }
+      const { data, headers } = await this.$axios.get(this.endpoint, {
         params: {
-          ...this.filter,
+          ...filter,
           page: this.page,
           size: this.size,
           sort: this.sorting
         }
       });
-      this.items = res[this.itemsKey];
-      this.page = res.meta.page;
-      this.total = res.meta.total;
-      this.size = res.meta.size;
+      if (this.oldFormat) {
+        this.items = data;
+        this.page = Number(headers['x-page'] ?? 1);
+        this.total = Number(headers['x-count'] ?? 0);
+        this.size = Number(headers['x-size'] ?? 20);
+      } else {
+        this.items = data[this.itemsKey];
+        this.page = data.meta.page;
+        this.total = data.meta.total;
+        this.size = data.meta.size;
+      }
     });
     this.loadingData = false;
     this.$emit('loaded', this.filter);