@itfin/components 1.4.9 → 1.4.11

package/package.json

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

@@ -80,7 +80,7 @@
 </style>
 <script>
 import { DateTime } from 'luxon';
-import { Vue, Model, Prop, Component } from 'vue-property-decorator';
+import { Vue, Watch, Model, Prop, Component } from 'vue-property-decorator';
 import tooltip from '../../directives/tooltip';
 import itfIcon from '../icon/Icon';
 import itfButton from '../button/Button';
@@ -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);
@@ -135,6 +137,12 @@ class FilterPanel extends Vue {
     return `filter-panel-${this.stateName}-filters`;
   }
 
+  @Watch('staticFilters', { deep: true })
+  onStaticFiltersUpdate() {
+    this.filters = this.staticFilters ?? [];
+    this.loadFiltersValue();
+  }
+
   async mounted() {
     if (this.stateName) {
       const item = localStorage.getItem(this.localstorageKey);
@@ -173,7 +181,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 +213,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 +244,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/modal/DeleteConfirmModal.vue

@@ -34,7 +34,7 @@
             :class="confirmClass"
             @click="onConfirm"
           >
-            <span v-html="$t('components.popover.yesDelete')"></span>
+            <span v-html="deleteCaption"></span>
           </button>
         </div>
       </div>
@@ -59,8 +59,8 @@ class itfDeleteConfirmModal extends Vue {
   @Prop(Boolean) loading;
   @Prop({ type: Boolean, default: false }) disabled;
   @Prop({ type: String, default: 'text-danger' }) confirmClass;
-  @Prop({ type: String, default () { return this.$t('noKeepIt'); } }) cancelCaption;
-  @Prop({ type: String, default () { return this.$t('yesDelete'); } }) deleteCaption;
+  @Prop({ type: String, default () { return this.$t('components.noKeepIt'); } }) cancelCaption;
+  @Prop({ type: String, default () { return this.$t('components.yesDelete'); } }) deleteCaption;
 
   isModalShown = false;
 

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">
@@ -62,38 +63,41 @@
     <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"
-          :rows="items"
-          :schema="tableSchema"
-          :sorting="sorting"
-          :active="activeIds"
-          :show-actions="showActions"
-          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 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"
+            :schema="tableSchema"
+            :sorting="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>
-    </div>
     </slot>
 
     <itf-pagination
@@ -115,7 +119,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 +149,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 +157,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;
@@ -164,8 +165,12 @@ class itfView extends Vue {
   @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  // якщо потрібно розділяти вибрані рядки в таблиці на дві групи
 
   page = 1;
   total = 0;
@@ -178,12 +183,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 +212,6 @@ class itfView extends Vue {
   }
 
   get tableSchema() {
-    // return this.tableColumns || this.schema;
     if (this.tableColumns) {
       return {
         properties: this.tableColumns
@@ -217,13 +224,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 +299,7 @@ class itfView extends Vue {
 
   updatePage (val) {
     this.page = val;
+    this.selectedIds = [];
     this.setPanelPayload({ page: val });
     this.loadData();
   }
@@ -300,32 +307,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();
   }