@itfin/components 1.4.8 → 1.4.10

package/package.json

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

package/src/assets/scss/components/select/_dropdown-toggle.scss

@@ -42,6 +42,7 @@ $border-radius: $vs-border-radius;
   margin-right: -9px;
   align-items: center;
   padding: 1px 0 0;
+  min-width: 33px;
 
   .itf-button {
     margin: -0.25rem 0;

package/src/components/filter/FilterBadge.vue

@@ -29,6 +29,14 @@
           @input="onFilterChange({ value: $event })"
         />
       </template>
+      <template v-else-if="type === 'period-selector'">
+        <itf-period-picker
+          style="margin: -.5rem"
+          :value="value.value"
+          value-format="yyyy-MM-dd"
+          @input="onFilterChange({ value: $event })"
+        />
+      </template>
       <template v-else-if="type === 'date'">
         <itf-date-picker-inline
           style="margin: -.5rem"
@@ -146,6 +154,7 @@ import itfButton from '../button/Button';
 import itfDropdown from '../dropdown/Dropdown.vue';
 import itfDatePickerInline from '../datepicker/DatePickerInline.vue';
 import itfDateRangePickerInline from '../datepicker/DateRangePickerInline.vue';
+import itfPeriodPicker from '../datepicker/PeriodPicker.vue'
 import itfTextField from '../text-field/TextField.vue';
 import FilterFacetsList from './FilterFacetsList';
 import FilterAmountRange from './FilterAmountRange.vue';
@@ -157,6 +166,7 @@ export default @Component({
     itfDropdown,
     itfDatePickerInline,
     itfDateRangePickerInline,
+    itfPeriodPicker,
     itfTextField,
     FilterFacetsList,
     FilterAmountRange

package/src/components/filter/FilterPanel.vue

@@ -120,6 +120,8 @@ class FilterPanel extends Vue {
   loading = false;
   showFilters = true;
 
+  periodFilters = ['period', 'period-selector'];
+
   get visibleFilters() {
     if (this.mini) {
       return sortBy(this.filters, (f) => this.filter[f.name].isDefault).filter(f => !f.options?.hidden).slice(0, 2);
@@ -173,7 +175,7 @@ class FilterPanel extends Vue {
     const filterValue = {};
     if (this.filters) {
       for (const item of this.filters) {
-        if (item.type === 'period') {
+        if (this.periodFilters.includes(item.type)) {
           filter[item.name] = payload.from ? this.formatValue(item, { value: [payload.from, payload.to] }) : { isDefault: true, ...item.options.defaultValue };
           filterValue.from = payload.from;
           filterValue.to = payload.to;
@@ -205,7 +207,7 @@ class FilterPanel extends Vue {
 
   onFilterChange(facet, value) {
     this.filter[facet.name] = this.formatValue(facet, value);
-    if (facet.type === 'period') {
+    if (this.periodFilters.includes(facet.type)) {
       this.filterValue.from = this.filter[facet.name].isDefault ? undefined : value.value[0];
       this.filterValue.to = this.filter[facet.name].isDefault ? undefined : value.value[1];
     } else {
@@ -236,7 +238,7 @@ class FilterPanel extends Vue {
   }
 
   formatValue(facet, value) {
-    if (facet.type === 'period') {
+    if (this.periodFilters.includes(facet.type)) {
       if (value.value) {
         let from = DateTime.fromFormat(value.value[0], 'yyyy-MM-dd');
         let to = DateTime.fromFormat(value.value[1], 'yyyy-MM-dd');

package/src/components/table/Table2.vue

@@ -249,7 +249,8 @@ class itfTable2 extends Vue {
   @Watch('selectedIds')
   onSelectedIdsUpdate(selectedIds) {
     this.state.selectedIds = selectedIds;
-    this.saveTableState();
+    // метод saveTableState не зберігає selectedIds в localStorage, не впевнений що він тут треба
+    // this.saveTableState();
   }
 
   onColumnsUpdate(columns) {

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,11 +42,12 @@
         </itf-dropdown>
 
         <itf-segmented-control
-          v-if="tabs.length"
+          v-if="tabs.length > 1"
           class="small"
-          v-model="currentTab"
+          :value="currentTab"
           item-key="value"
           :items="tabs"
+          @input="updateTabs"
         >
           <template #item="{ item }">
             <div class="d-flex align-items-center">
@@ -75,6 +77,7 @@
           class="permanent-checkboxes"
           :state-name="stateName"
           id-property="id"
+          :sort-as-string="sortAsString"
           :rows="items"
           :schema="tableSchema"
           :sorting="sorting"
@@ -114,7 +117,7 @@
 
 </template>
 <script>
-import { Vue, ModelSync, Component, Prop, Inject } from 'vue-property-decorator';
+import {Vue, ModelSync, Component, Prop, Inject, PropSync, Watch} from 'vue-property-decorator';
 import loading from '../../directives/loading';
 import itfTable from '../table/Table2.vue';
 import itfFilterPanel from '../filter/FilterPanel.vue';
@@ -144,10 +147,7 @@ class itfView extends Vue {
 
   @Prop({ type: Boolean }) loading;
   @Prop({ type: Array }) filters;
-  // @Prop({ type: Object, required: true }) schema;
   @Prop({ type: Object }) schema;
-  // @Prop({ default: 20 }) size;
-  // @Prop({ default: 1 }) page;
   @Prop(String) defaultSorting;
   @Prop(String) endpoint;
   @Prop(String) filtersEndpoint;
@@ -155,7 +155,7 @@ class itfView extends Vue {
   @Prop(String) panelKey;
   @Prop(String) stateName;
   @Prop({ type: String, default: 'checkbox' }) indicatorType;
-  @Prop({ type: String, default: 'table' }) tab;
+  @Prop({ type: String, default: 'list' }) tab;
   @Prop({ type: String, default () { return this.$t('components.table.search'); } }) searchPlaceholder;
   @Prop() panel;
   @Prop(Boolean) showActions;
@@ -163,7 +163,10 @@ class itfView extends Vue {
   @Prop(Boolean) listViewEnabled;
   @Prop(Boolean) kanbanViewEnabled;
   @Prop(Boolean) calendarViewEnabled;
-  @Prop(Boolean) tableViewEnabled;
+  @Prop({ type: Boolean, default: true }) tableViewEnabled;
+  @Prop(Boolean) sortAsString;
+  @Prop(Boolean) oldFormat;
+  @Prop({type: Function, default: null }) onSplitSlectedIds  // якщо потрібно розділяти вибрані рядки в таблиці на дві групи
 
   page = 1;
   total = 0;
@@ -173,15 +176,18 @@ class itfView extends Vue {
   filter = {};
   loadingData = false;
   activeIds = [];
-  tableColumns = [];
+  tableColumns = undefined;
   _currentTab = null;
 
-  get currentTab() {
-    return this.tab;
+  @Watch('selectedIds', { deep: true, immediate: true })
+  updateSelectedIds() {
+    if(this.onSplitSlectedIds && this.items.length && this.selectedIds.length) {
+      this.onSplitSlectedIds(this.selectedIds, this.items);
+    }
   }
 
-  set currentTab(val) {
-    this.$emit('update:tab', val);
+  get currentTab() {
+    return this.tab;
   }
 
   get tabs() {
@@ -202,7 +208,6 @@ class itfView extends Vue {
   }
 
   get tableSchema() {
-    // return this.tableColumns || this.schema;
     if (this.tableColumns) {
       return {
         properties: this.tableColumns
@@ -215,13 +220,12 @@ class itfView extends Vue {
   }
 
   created() {
-    // const defaultSize = localStorage.getItem('sizePerPage') ?? 20;
-    //
-    // const { page, size, sorting } = this.panel.getPayload() ?? {};
-    // this.page = page ?? 1;
-    // this.size = size ?? defaultSize;
-    // this.sorting = sorting ?? this.defaultSorting;
-    this.sorting = this.defaultSorting;
+    const defaultSize = localStorage.getItem('sizePerPage') ?? 20;
+
+    const { page, size, sorting } = this.panel.getPayload() ?? {};
+    this.page = page ?? 1;
+    this.size = size ?? defaultSize;
+    this.sorting = sorting ?? this.defaultSorting;
   }
 
   mounted() {
@@ -241,19 +245,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);
@@ -278,6 +295,7 @@ class itfView extends Vue {
 
   updatePage (val) {
     this.page = val;
+    this.selectedIds = [];
     this.setPanelPayload({ page: val });
     this.loadData();
   }
@@ -285,32 +303,38 @@ class itfView extends Vue {
   updateSizePerPage (val) {
     this.page = 1;
     this.size = val;
+    this.selectedIds = [];
     this.setPanelPayload({ page: 1, size: val });
     this.loadData();
     localStorage.setItem('sizePerPage', val);
   }
 
+  updateTabs(val) {
+    this.setPanelPayload({ tab: val });
+  }
+
   setPanelPayload(payload) {
-    // this.panel.setPayload(assignWithoutUndefined(this.panel.getPayload(), payload));
-    //
-    // function assignWithoutUndefined(...sources) {
-    //   const target = {};
-    //   sources.forEach(source => {
-    //     if (source && typeof source === 'object') {
-    //       Object.entries(source).forEach(([key, value]) => {
-    //         if (value !== undefined) {
-    //           target[key] = value;
-    //         }
-    //       });
-    //     }
-    //   });
-    //   return target;
-    // }
+    this.panel.setPayload(assignWithoutUndefined(this.panel.getPayload(), payload));
+
+    function assignWithoutUndefined(...sources) {
+      const target = {};
+      sources.forEach(source => {
+        if (source && typeof source === 'object') {
+          Object.entries(source).forEach(([key, value]) => {
+            if (value !== undefined) {
+              target[key] = value;
+            }
+          });
+        }
+      });
+      return target;
+    }
   }
 
   onFilterSet(filter) {
     this.page = 1;
-    // this.setPanelPayload({ ...filter, page: 1 });
+    this.selectedIds = [];
+    this.setPanelPayload({ ...filter, page: 1 });
     this.loadData();
   }