@itfin/components 1.4.9 → 1.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.4.9",
+  "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

@@ -44,9 +44,10 @@
         <itf-segmented-control
           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">
@@ -76,6 +77,7 @@
           class="permanent-checkboxes"
           :state-name="stateName"
           id-property="id"
+          :sort-as-string="sortAsString"
           :rows="items"
           :schema="tableSchema"
           :sorting="sorting"
@@ -115,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';
@@ -145,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;
@@ -156,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;
@@ -165,7 +164,9 @@ class itfView extends Vue {
   @Prop(Boolean) kanbanViewEnabled;
   @Prop(Boolean) calendarViewEnabled;
   @Prop({ type: Boolean, default: true }) tableViewEnabled;
+  @Prop(Boolean) sortAsString;
   @Prop(Boolean) oldFormat;
+  @Prop({type: Function, default: null }) onSplitSlectedIds  // якщо потрібно розділяти вибрані рядки в таблиці на дві групи
 
   page = 1;
   total = 0;
@@ -178,12 +179,15 @@ class itfView extends Vue {
   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() {
@@ -204,7 +208,6 @@ class itfView extends Vue {
   }
 
   get tableSchema() {
-    // return this.tableColumns || this.schema;
     if (this.tableColumns) {
       return {
         properties: this.tableColumns
@@ -217,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() {
@@ -293,6 +295,7 @@ class itfView extends Vue {
 
   updatePage (val) {
     this.page = val;
+    this.selectedIds = [];
     this.setPanelPayload({ page: val });
     this.loadData();
   }
@@ -300,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();
   }