@itfin/components 1.4.40 → 1.5.1

package/src/components/table/table2.scss

@@ -7,10 +7,10 @@
   --itf-table-alt-bg: #F9FAFB;
   --itf-table-alt-selected-bg: #eff1f3;
   --itf-table-header-bg: #f5f7f8;
-  --itf-table-header-color: #575b63;
+  --itf-table-header-color: #7A818EA5;
   --itf-table-mirror-bg: #F2F4F7;
   --itf-table-border-color: transparent; //var(--itf-table-header-bg);
-  --itf-table-header-border-color: #8E97A533;
+  --itf-table-header-border-color: #7A818E33;
   --itf-table-border-base-color: var(--itf-table-header-bg); // кольори границь таблиці без внутрішніх рядків
   --itf-table-border-base-width: 2px;
   --itf-table-hover-header-bg: #dfe5ef;
@@ -23,8 +23,6 @@
   --itf-table-summary-text: var(--bs-tertiary-color);
   --itf-table-table-border-radius: 1rem;
   --itf-table-header-height: 2.25rem;
-  --itf-table-divider-bg: #F7F8FA;
-  --itf-table-divider-border: rgba(238, 238, 238, 1);
 
   --group-title-height: 40px;
   --table-row-height: none;
@@ -45,9 +43,6 @@ body[data-theme="dark"] {
   --itf-table-selected-bg: #011534;
   --itf-table-active-bg: #022e72;
   --itf-table-summary-text: #82909d80;
-  --itf-table-border-base-color: var(--itf-table-header-bg);
-  --itf-table-divider-bg: #0f0f0f;
-  --itf-table-divider-border: rgb(100, 100, 100, .1);
 }
 .itf-table2 {
   font-size: var(--itf-table-content-font-size, var(--itf-table-font-size));
@@ -65,7 +60,7 @@ body[data-theme="dark"] {
     height: 100%;
   }
   .scroller {
-    //margin-bottom: .5rem;
+    margin-bottom: 12px;
   }
   .scrollable-x {
     overflow-x: scroll;
@@ -102,18 +97,34 @@ body[data-theme="dark"] {
     position: sticky;
     top: 0;
     bottom: 0;
-    right: -5px;
+    right: -.5rem;
     z-index: 8;
-    padding-right: 5px;
-    padding-left: 5px;
     display: flex;
     align-items: center;
+
+    @media (max-width: 768px) {
+      position: relative;
+      opacity: 1;
+    }
   }
   .on-hover {
     opacity: 0;
+    width: 0;
+    padding: 4px .5rem;
+    overflow: hidden;
     pointer-events: none;
+    position: absolute;
+    right: 0;
+    background: linear-gradient(90deg, transparent 0, var(--itf-table2-row-bg) 10px);
+
+    @media (max-width: 768px) {
+      width: max-content;
+      opacity: 1;
+      position: relative;
+    }
   }
   .table-row-template:hover .on-hover {
+    width: max-content;
     opacity: 1;
     pointer-events: all;
   }
@@ -229,6 +240,9 @@ body[data-theme="dark"] {
       &:not(.draggable-container--is-dragging):hover .table-view-header-value {
         z-index: 39;
       }
+      &:not(.draggable-container--is-dragging):hover .sticky {
+        z-index: 40;
+      }
       &:after {
         content: "";
         position: absolute;
@@ -437,14 +451,20 @@ body[data-theme="dark"] {
     .indicator {
       border-left: var(--itf-table-border-base-width) solid var(--itf-table2-border-color);
     }
+
+    &.disabled {
+      .table-view-item-value {
+        opacity: 0.5;
+      }
+    }
   }
 
   &__row-divider {
-    background-color: var(--itf-table-divider-bg);
+    background-color: #F7F8FA;
     height: 5px;
     padding: 0;
-    border-top: 1px solid var(--itf-table-divider-border);
-    border-bottom: 1px solid var(--itf-table-divider-border);
+    border-top: 1px solid rgba(238, 238, 238, 1);
+    border-bottom: 1px solid rgba(238, 238, 238, 1);
   }
   //&:hover, &.permanent-editable-border {
   //  .table-view-item-value.editable {
@@ -457,7 +477,6 @@ body[data-theme="dark"] {
     position: relative;
     z-index: 2;
     width: 100%;
-    display: flex;
     height: 100%;
     background: var(--itf-table2-row-bg)
   }

package/src/components/text-field/MoneyField.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="itf-money-field ph-no-capture" :class="{'currency-arrow': !currencyDisabled, 'currency-select': currencySelect}">
-    <div :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
+    <div class="h-100" :class="{'input-group h-100': noCurrencySign}" :style="`--itf-money-field-padding-left: ${noCurrencySign ? 1 : selectedCurrencySymbol.length * 0.6 + 1}rem`">
       <span class="itf-money-field__prepend" v-if="!noCurrencySign">{{ selectedCurrencySymbol }}</span>
       <i-mask-component
         ref="input"
@@ -9,6 +9,7 @@
         :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }"
         @input="setValue"
         :value="maskedValue"
+        :placeholder="placeholder"
         :unmask="false"
         :disabled="disabled"
       />
@@ -100,6 +101,7 @@ class itfMoneyField extends Vue {
   @Inject({ default: null }) itemLabel;
 
   @Model('input', { default: '' }) value;
+  @Prop({ default: '' }) placeholder;
   @Prop({ type: Object, default: null }) currency;
   @Prop({ type: Boolean, default: false }) noCurrencySign;
   @Prop({ type: Boolean, default: false }) disabled;
@@ -145,7 +147,7 @@ class itfMoneyField extends Vue {
   }
 
   onCurrencyChanged(e) {
-    const currency = this.currenciesList.find((c) => c[this.itemKey] === parseInt(e.target.value));
+    const currency = this.currenciesList.find((c) => `${c[this.itemKey]}` === `${e.target.value}`);
     this.$emit('update:currency', currency)
   }
 
@@ -154,11 +156,11 @@ class itfMoneyField extends Vue {
   }
 
   get selectedCurrencySymbol() {
-    return this.selectedCurrency ? this.selectedCurrency[this.symbolKey] : '#';
+    return this.selectedCurrency ? this.selectedCurrency[this.symbolKey] : '';
   }
 
   get selectedCurrencyCode() {
-    return this.selectedCurrency ? this.selectedCurrency[this.codeKey] : '###';
+    return this.selectedCurrency ? this.selectedCurrency[this.codeKey] : '';
   }
 
   get currencyId() {
@@ -173,6 +175,10 @@ class itfMoneyField extends Vue {
   }
 
   setValue (val) {
+    if (val === '') {
+      this.$emit('input', '');
+      return;
+    }
     if (!isNumeric(val) || (val || '').toString().match(/\..*0$/)) { // що не видаляло останній нуль вкінці
       return;
     }

package/src/components/text-field/TextField.vue

@@ -1,17 +1,18 @@
 <template>
 
-  <div class="itf-text-field input-group" :class="{ 'with-addon addon-start': prependIcon, 'with-addon addon-end': clearable }">
+  <div class="itf-text-field input-group form-control p-0" :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess() }">
     <slot name="addon">
-      <div class="addon" v-if="prependIcon">
-        <itf-icon :name="prependIcon"/>
+      <div class="input-group-text prepend text-muted" v-if="prependIcon">
+        <itf-icon :size="small ? 18 : 20" :name="prependIcon"/>
       </div>
     </slot>
 
     <input
+      :name="`text-field-${_uid}`"
       ref="input"
       autocomplete="off"
       :placeholder="placeholder"
-      :class="{ 'is-invalid': isInvalid(), 'is-valid': isSuccess(), 'form-control-sm': small }"
+      :class="{ 'form-control-sm': small }"
       class="itf-text-field__input form-control"
       :type="type"
       :value="value"
@@ -24,12 +25,16 @@
       @blur="$emit('blur', $event)"
       @focus="$emit('focus', $event)"
       @change="$emit('change', $event.target.value)"
+      :maxlength="maxlength"
       :min="min"
       :max="max"
       :step="step"
     />
+    <div class="input-group-text append text-muted" v-if="postfix">
+      {{ postfix }}
+    </div>
 
-    <div class="addon-end" v-if="clearable && value">
+    <template v-if="clearable && value">
       <slot name="clear">
         <itf-button
           icon
@@ -39,7 +44,7 @@
           <itf-icon name="close" />
         </itf-button>
       </slot>
-    </div>
+    </template>
   </div>
 
 </template>
@@ -64,10 +69,14 @@ class itfTextField extends Vue {
   @Prop() step;
   @Prop() min;
   @Prop() max;
+  @Prop() maxlength;
+  @Prop() postfix;
   @Prop(Boolean) clearable;
   @Prop(Boolean) disabled;
   @Prop(Boolean) readonly;
   @Prop(Boolean) small;
+  @Prop({ type: Boolean, default: undefined }) invalid;
+  @Prop({ type: Boolean, default: undefined }) valid;
   @Prop({ type: String, default: 'text' }) type;
   @Prop({ type: [Number, String], default: 0 }) delayInput;
 
@@ -78,11 +87,11 @@ class itfTextField extends Vue {
   }
 
   isInvalid() {
-    return this.itemLabel && this.itemLabel.isHasError();
+    return typeof this.invalid !== 'undefined' ? this.invalid : (this.itemLabel && this.itemLabel.isHasError());
   }
 
   isSuccess() {
-    return this.itemLabel && this.itemLabel.isHasSuccess();
+    return typeof this.valid !== 'undefined' ? this.valid : (this.itemLabel && this.itemLabel.isHasSuccess());
   }
 
   insertTextToCurrentPosition(text) {

package/src/components/tree/TreeEditor.vue

@@ -25,10 +25,11 @@
           @keyup.enter="(e)=>{$emit('click',{event:e,ele:e.target,node,knode})}"
           @click="(e)=>{$emit('click',{event:e,ele:e.target,node,knode})}"
         >
-          <div v-if="node.level >= toggleStartLevel" class="itf-tree-editor_node_toggle ps-2">
+          <div v-if="node.level >= toggleStartLevel" class="itf-tree-editor_node_toggle">
             <itf-button
-              v-if="autoToggleTree && node.level >= toggleStartLevel && node.Children && node.Children.length > 0"
+              v-if="autoToggleTree && node.level >= toggleStartLevel && node[itemChildren] && node[itemChildren].length > 0"
               small
+              icon
               @click.stop="toggleNode($event, node, knode)"
             >
               <itf-icon v-if="isNodeToggled(node)" name="plus" size="24" />

package/src/components/view/View.vue

@@ -4,25 +4,26 @@
     <itf-filter-panel
       :search-placeholder="searchPlaceholder"
       search
-      show-filter
+      :visible="!noFilters"
+      :filters-only="filtersOnly"
+      ref="filters"
+      :mini="panel.isMultiple()"
       class="py-2 px-3"
-      :static-filters="filters"
       :endpoint="filtersEndpoint"
       :panel="panel"
       v-model="filter"
       @loaded="onFilterSet($event, true)"
       @change="onFilterSet($event, false)"
-      @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">
+        <itf-dropdown v-if="$refs.table && schema" shadow append-to-context :button-options="{ default: true, icon: true }" class="h-100" autoclose="outside">
           <template #button>
-            <itf-icon new name="table-config" />
+            <itf-icon new name="table-view" />
           </template>
           <div class="dropdown-header">
             {{ $t('components.table.columns') }}
           </div>
-          <a v-for="(property, n) of tableSchema.properties" :key="n" href="" @click.stop.prevent="$refs.table.toggleVisibility(property.property)" class="dropdown-item justify-content-between d-flex gap-3">
+          <a v-for="(property, n) of schema.properties" :key="n" href="" @click.stop.prevent="$refs.table.toggleVisibility(property.property)" class="dropdown-item justify-content-between d-flex gap-3">
             <div class="d-flex align-items-center gap-1">
               <itf-icon v-if="property.icon" :size="24" new :name="property.icon" />
               {{getTitle(property.title)}}
@@ -41,101 +42,64 @@
             </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>
-
-        <itf-segmented-control
-          v-if="tabs.length > 1"
-          class="small"
-          v-model="currentTab"
-          item-key="value"
-          :items="tabs"
-        >
-          <template #item="{ item }">
-            <div class="d-flex align-items-center">
-              <itf-icon class="text-muted" new :name="item.icon" />
-              {{item.text}}
-            </div>
-          </template>
-        </itf-segmented-control>
       </template>
     </itf-filter-panel>
 
-    <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 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"
+          divider-property="hasDivider"
+          subrows-property="children"
+          :state-name="stateName"
+          id-property="id"
+          :rows="preparedItems"
+          :schema="schema"
+          :sorting="sorting"
+          :active="activeIds"
+          :show-actions="showActions"
+          :expanded-ids.sync="expandedIds"
+          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 || {}"/>
+          </template>
+          <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
+            <slot :name="name" v-bind="slotData || {}"/>
+          </template>
+        </itf-table>
       </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">
-      <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"
-            :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 || {}"/>
-            </template>
-            <template v-for="(_, name) in $scopedSlots" #[name]="slotData">
-              <slot :name="name" v-bind="slotData || {}"/>
-            </template>
-          </itf-table>
-        </div>
-      </div>
-    </slot>
 
     <itf-pagination
       class="my-2 px-3"
-      v-if="showPagination"
       show-size
       :size="size"
-      :items="items"
+      :items="preparedItems"
       :pages="countPages"
       :value="page"
       @input="updatePage($event)"
       @per-page="updateSizePerPage($event)"
     >
       <template #center>
-        <slot name="pagination-center" :totals="totals" />
+        <slot name="pagination-center" />
       </template>
     </itf-pagination>
   </div>
 
 </template>
 <script>
-import {Vue, ModelSync, Component, Prop, Inject, PropSync, Watch} from 'vue-property-decorator';
+import { Vue, ModelSync, Component, Prop, Inject } from 'vue-property-decorator';
 import loading from '../../directives/loading';
 import itfTable from '../table/Table2.vue';
 import itfFilterPanel from '../filter/FilterPanel.vue';
@@ -143,16 +107,11 @@ import itfPagination from '../pagination/Pagination2.vue';
 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,
+    itfDropdown, itfIcon,
     itfPagination,
     itfFilterPanel,
     itfTableBody,
@@ -167,32 +126,24 @@ class itfView extends Vue {
   @ModelSync('value', 'input') selectedIds;
 
   @Prop({ type: Boolean }) loading;
+  @Prop({ type: Boolean }) filtersOnly;
+  @Prop({ type: Boolean }) noFilters;
   @Prop({ type: Array }) filters;
-  @Prop({ type: Object }) schema;
+  @Prop({ type: Object, required: true }) schema;
+  // @Prop({ default: 20 }) size;
+  // @Prop({ default: 1 }) page;
   @Prop(String) defaultSorting;
   @Prop(String) endpoint;
   @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;
   @Prop({ type: String, default: 'checkbox' }) indicatorType;
-  @Prop({ type: String, default: 'list' }) tab;
   @Prop({ type: String, default () { return this.$t('components.table.search'); } }) searchPlaceholder;
   @Prop() panel;
+  @Prop() hardFilter; // встановлює жорсткий фільтр, наприклад, треба завжди показувати лише по контрагенту
   @Prop(Boolean) showActions;
-  @Prop({ type: Boolean, default: true }) showPagination;
-  @Prop(Boolean) listViewEnabled;
-  @Prop(Boolean) kanbanViewEnabled;
-  @Prop(Boolean) calendarViewEnabled;
-  @Prop(Boolean) noSelectAll;
-  @Prop({ type: Boolean, default: true }) tableViewEnabled;
-  @Prop(Boolean) sortAsString;
-  @Prop(Boolean) oldFormat;
-  @Prop({ default: 45 }) indicatorWidth;
-  @Prop({type: Function, default: null }) onSplitSlectedIds  // якщо потрібно розділяти вибрані рядки в таблиці на дві групи
+  @Prop({ type: Array, default: () => [] }) disabledIds;
 
   page = 1;
   total = 0;
@@ -202,74 +153,11 @@ class itfView extends Vue {
   filter = {};
   loadingData = false;
   activeIds = [];
-  tableColumns = null;
-  totals = null;
-
-  @Watch('selectedIds', { deep: true, immediate: true })
-  updateSelectedIds() {
-    if(this.onSplitSlectedIds && this.items.length && this.selectedIds.length) {
-      this.onSplitSlectedIds(this.selectedIds, this.items);
-    }
-  }
-
-  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;
-  }
+  expandedIds = [];
 
-  set currentTab(val) {
-    this.$emit('update:tab', val);
-    this.setPanelPayload({ tab: val });
-  }
-
-  get tabs() {
-    const views = [];
-    if (this.listViewEnabled) {
-      views.push({ value: 'list', text: this.$t('list'), icon: 'list-view' });
-    }
-    if (this.kanbanViewEnabled) {
-      views.push({ value: 'board', text: this.$t('board'), icon: 'kanban-view' });
-    }
-    if (this.calendarViewEnabled) {
-      views.push({ value: 'calendar', text: this.$t('calendar'), icon: 'calendar-view' });
-    }
-    if (this.tableViewEnabled) {
-      views.push({ value: 'table', text: this.$t('table'), icon: 'table-view' });
-    }
-    return views;
-  }
-
-  get tableSchema() {
-    if (this.tableColumns) {
-      return {
-        properties: this.tableColumns
-      }
-    } else if (this.schema) {
-      return this.schema
-    } else {
-      return {}
-    }
+  get preparedItems() {
+    const disabledIdsSet = new Set(this.disabledIds);
+    return this.items.map(item => ({ ...item, isDisabled: disabledIdsSet.has(item.id) }));
   }
 
   created() {
@@ -291,42 +179,39 @@ class itfView extends Vue {
     }
   }
 
-  async loadData() {
+  async loadData(reloadFilters = false) {
     if (!this.endpoint) {
       return;
     }
+    if (reloadFilters) {
+      this.loadFilters();
+    }
     this.$emit('load', this.filter);
     this.loadingData = true;
     await this.$try(async () => {
-      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, {
+      const res = await this.$axios.$get(this.endpoint, {
+        preventRaceCondition: true,
         params: {
-          ...filter,
+          ...Object.assign(this.filter ?? {}, this.hardFilter ?? {}),
           page: this.page,
           size: this.size,
           sort: this.sorting
         }
       });
-      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.totals = data[this.totalsKey];
-        this.page = data.meta.page;
-        this.total = data.meta.total;
-        this.size = data.meta.size;
+      this.selectedIds = [];
+      this.items = res[this.itemsKey];
+      this.page = res.meta.page;
+      this.total = res.meta.total;
+      this.size = res.meta.size;
+      if (res.columns) {
+        this.$emit('columns-loaded', res.columns);
       }
+
+      this.$emit('update:items', this.items);
+      this.loadingData = false;
+    }, () => {
+      this.loadingData = false;
     });
-    this.loadingData = false;
     this.$emit('loaded', this.filter);
   }
 
@@ -349,16 +234,14 @@ class itfView extends Vue {
 
   updatePage (val) {
     this.page = val;
-    this.selectedIds = [];
-    this.setPanelPayload({ page: val });
+    this.setPanelPayload({ page: val === 1 ? null : val });
     this.loadData();
   }
 
   updateSizePerPage (val) {
     this.page = 1;
     this.size = val;
-    this.selectedIds = [];
-    this.setPanelPayload({ page: 1, size: val });
+    this.setPanelPayload({ page: null, size: val });
     this.loadData();
     localStorage.setItem('sizePerPage', val);
   }
@@ -394,20 +277,10 @@ class itfView extends Vue {
     this.loadData();
   }
 
-  setTableSchema(tableSchema) {
-    this.tableColumns = tableSchema;
-  }
-
-  getSorting() {
-    return this.sorting;
-  }
-
-  getFilter() {
-    return this.filter;
-  }
-
-  getTableState() {
-    return this.$refs.table ? this.$refs.table.getTableState() : null;
+  loadFilters() {
+    if (this.filtersEndpoint) {
+      this.$refs.filters?.loadData();
+    }
   }
 }
 </script>