@itfin/components 1.3.86 → 1.3.88

package/src/components/filter/FilterFacetsList.vue

@@ -0,0 +1,206 @@
+<template>
+  <div>
+    <div class="px-1">
+      <div v-if="title" class="fw-bold mb-1">{{title}}</div>
+
+      <itf-text-field small v-model="query" class="mb-2" :placeholder="$t('components.filter.search')" clearable />
+
+      <div v-if="mappedValues.length" class="d-flex justify-content-between small mb-2">
+        <a v-if="isSelectedAll" href="" @click.stop.prevent="onSelectAll(false)">{{$t('components.filter.deselectAll')}}</a>
+        <a v-else href="" @click.stop.prevent="onSelectAll(true)">{{$t('components.filter.selectAll')}}</a>
+
+        <span class="text-muted" v-if="!isHasSelected" href="" @click.stop.prevent="onShowSelected(true)">{{$t('components.filter.showSelected')}}</span>
+        <a v-else-if="!isShowSelected" href="" @click.stop.prevent="onShowSelected(true)">{{$t('components.filter.showSelected')}}</a>
+        <a v-else href="" @click.stop.prevent="onShowSelected(false)">{{$t('components.filter.showSelected')}}</a>
+      </div>
+      <div v-else>
+        <div class="text-muted text-center py-4">{{ $t('components.filter.noResults') }}</div>
+      </div>
+    </div>
+    <div v-for="(val, n) of mappedValues" :key="n" class="facet-item" :class="{'active': val.isSelected}" @click="onFilterClick(val)">
+      <span class="facet-name text-dark d-flex align-items-center">
+        <itf-checkbox ungrouped :value="val.isSelected" class="m-0" />
+        <div class="w-100 text-truncate">{{ val.label }}</div>
+      </span>
+      <span class="facet-stat text-muted">
+        {{ val.count }}
+        <span class="facet-bar"><span :style="{'--bar-width': `${getPercent(val)}%`}" class="facet-bar-progress" /></span>
+      </span>
+    </div>
+
+    <itf-button class="mt-1" v-if="hasMore" small block @click="toggleMore">
+      <span v-if="showMore">{{ $t('components.filter.hideMore', { count: visibleList.length }) }}</span>
+      <span v-else>{{ $t('components.filter.showMore', { count: visibleList.length }) }}</span>
+    </itf-button>
+  </div>
+</template>
+<style lang="scss" scoped>
+.facet-item {
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: justify;
+  justify-content: space-between;
+  position: relative;
+  box-sizing: border-box;
+  height: 1.75rem;
+  width: 100%;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 400;
+  white-space: normal;
+  user-select: none;
+  border-radius: 0.25rem;
+  border-width: 1px;
+  border-style: solid;
+  border-color: transparent;
+  border-image: initial;
+  transition: none 0s ease 0s;
+  margin: 1px 0;
+  &.active {
+    background-color: rgba(var(--bs-primary-rgb), 25%);
+
+    .facet-bar-progress {
+      background-color: rgba(var(--bs-primary-rgb), 75%);
+    }
+  }
+  &:hover, &:focus, &.active {
+    border-color: var(--bs-primary);
+  }
+  .facet-name {
+    text-align: left;
+    white-space: nowrap;
+
+    .itf-checkbox {
+      min-height: auto;
+    }
+  }
+  .facet-stat {
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+    margin-left: 0.25rem;
+  }
+  .facet-bar {
+    display: inline-block;
+    margin-left: 0.5rem;
+    width: 60px;
+  }
+  .facet-bar-progress {
+    display: block;
+    width: var(--bar-width);
+    min-width: 5px;
+    height: 10px;
+    background-color: rgb(197, 205, 223);
+    transition: width 0.3s ease 0s;
+  }
+}
+</style>
+<script>
+import { Vue, Prop, Model, Component } from 'vue-property-decorator';
+import itfTextField from '../text-field/TextField.vue';
+import itfButton from '../button/Button';
+import itfCheckbox from '../checkbox/Checkbox.vue';
+
+export default @Component({
+  name: 'FilterFacetsList',
+  components: {
+    itfCheckbox,
+    itfButton,
+    itfTextField
+  }
+})
+class FilterFacetsList extends Vue {
+  @Model('input') value;
+  @Prop() items;
+  @Prop() item;
+  @Prop() total;
+  @Prop({ type: Number, default: 5 }) limit;
+  @Prop(Boolean) multiple;
+  @Prop(Boolean) showAll;
+  @Prop(String) title;
+
+  query = '';
+  showMore = false;
+  isShowSelected = false;
+
+  toggleMore() {
+    this.showMore = !this.showMore;
+  }
+
+  get hasMore() {
+    if (this.showAll) {
+      return false;
+    }
+    return this.visibleList.length > this.limit;
+  }
+
+  get visibleList() {
+    let list = this.items.map(val => {
+      const isSelected = this.multiple
+        ? Array.isArray(this.value) && this.value.map(String).includes(`${val.value}`)
+        : `${this.value}` === `${val.value}`;
+
+      return { ...val, isSelected };
+    });
+    if (this.query) {
+      list = list.filter((val) => val.label.toLowerCase().includes(this.query.toLowerCase()));
+    }
+    if (this.isShowSelected) {
+      return list.filter((val) => val.isSelected);
+    }
+    return list;
+  }
+
+  get mappedValues() {
+    const list = this.visibleList;
+    if (!this.showMore && !this.showAll) {
+      return list.slice(0, this.limit);
+    }
+    return list;
+  }
+
+  getPercent(item) {
+    return this.total ? Math.round((item.count / this.total) * 100) : 0;
+  }
+
+  onFilterClick(val) {
+    const value = `${val.value}`;
+    if (!this.multiple) {
+      return this.$emit('input', `${this.value}` === value ? null : value);
+    }
+    const newVal = [...Array.isArray(this.value) ? [...this.value] : []].map((s) => s.toString());
+    if (newVal.includes(value)) {
+      newVal.splice(newVal.indexOf(value), 1);
+    } else {
+      newVal.push(value);
+    }
+    this.$emit('input', newVal);
+  }
+
+  get isSelectedAll() {
+    return this.mappedValues.every(o => o.isSelected);
+  }
+
+  onSelectAll(isSelect = false) {
+    if (isSelect) {
+      this.$emit('input', this.visibleList.map((val) => `${val.value}`));
+    } else {
+      this.$emit('input', []);
+    }
+    this.isShowSelected = false;
+  }
+
+  get isHasSelected() {
+    return this.value && this.value.length > 0 && !this.query; // тільки коли не пошук
+  }
+
+  onShowSelected(isShow = false) {
+    this.isShowSelected = isShow;
+  }
+}
+</script>

package/src/components/filter/FilterPanel.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="d-flex gap-2 align-items-center flex-wrap">
+    <template v-if="search">
+      <itf-text-field
+        style="width: 200px"
+        small
+        :placeholder="$t('components.filter.search')"
+        prepend---icon="search"
+        :delay-input="250"
+        clearable
+        :value="filterValue.query"
+        @input="(e) => onFilterChange({ type: 'text', name: 'query' }, { value: e })"
+      />
+    </template>
+    <filter-badge
+      v-for="(facet, n) in filters"
+      :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 v-if="loading">
+      <span class="itf-spinner"></span>
+      {{$t('loading')}}
+    </div>
+  </div>
+</template>
+<style lang="scss">
+</style>
+<script>
+import { DateTime } from 'luxon';
+import { Vue, Model, Prop, Component } from 'vue-property-decorator';
+import tooltip from '../../directives/tooltip';
+import itfIcon from '../icon/Icon';
+import itfButton from '../button/Button';
+import itfDropdown from '../dropdown/Dropdown.vue';
+import itfTextField from '../text-field/TextField.vue';
+import { formatDateonly, formatMoney, formatRangeDates } from '../../helpers/formatters';
+import FilterBadge from './FilterBadge.vue';
+
+export default @Component({
+  components: {
+    itfIcon,
+    itfButton,
+    itfDropdown,
+    itfTextField,
+    FilterBadge
+  },
+  directives: {
+    tooltip
+  },
+  filters: {
+    formatMoney,
+    formatDateonly
+  }
+})
+class FilterPanel extends Vue {
+  @Model('input') value;
+  @Prop({ type: String }) endpoint;
+  @Prop() panel;
+  @Prop(Boolean) search;
+
+  filter = {};
+  filterValue = {};
+  filters = [];
+  loading = false;
+
+  async mounted() {
+    this.loading = true;
+    await this.$try(async () => {
+      const { filters } = await this.$axios.$get(this.endpoint);
+      this.filters = filters;
+      this.loadFiltersValue();
+    });
+    this.loading = false;
+    this.panel.on('panels.changed', () => this.loadFiltersValue());
+  }
+
+  loadFiltersValue() {
+    const payload = this.panel ? this.panel.getPayload() : {};
+    const filter = {};
+    const filterValue = {};
+    for (const item of this.filters) {
+      filter[item.name] = payload[item.name] ? this.formatValue(item, { value: payload[item.name] }) : { isDefault: true, ...item.options.defaultValue };
+      if (item.type === 'period') {
+        filterValue.from = payload.from;
+        filterValue.to = payload.to;
+      } else {
+        filterValue[item.name] = payload[item.name];
+      }
+    }
+    if (this.search) {
+      filterValue.query = payload.query;
+    }
+    this.filter = filter;
+    this.filterValue = filterValue;
+    this.$emit('input', this.filterValue);
+  }
+
+  onFilterChange(facet, value) {
+    this.filter[facet.name] = this.formatValue(facet, value);
+    if (facet.type === 'period') {
+      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 {
+      this.filterValue[facet.name] = this.filter[facet.name].isDefault ? undefined : value.value;
+    }
+    if (this.panel) {
+      const payload = this.panel.getPayload();
+      this.panel.setPayload({ ...payload, ...this.filterValue });
+    }
+    this.$emit('input', this.filterValue);
+  }
+
+  get daysList() {
+    return [// { title: 'Today', date: () => [DateTime.local(), DateTime.local()] },
+      { title: this.$t('components.thisWeek'), date: () => [DateTime.local().startOf('week'), DateTime.local().endOf('week')] },
+      { title: this.$t('components.lastWeek'), date: () => [DateTime.local().minus({ week: 1 }).startOf('week'), DateTime.local().minus({ week: 1 }).endOf('week')] },
+      { title: this.$t('components.thisMonth'), date: () => [DateTime.local().startOf('month'), DateTime.local().endOf('month')] },
+      { title: this.$t('components.lastMonth'), date: () => [DateTime.local().minus({ months: 1 }).startOf('month'), DateTime.local().minus({ months: 1 }).endOf('month')] },
+      { title: this.$t('components.thisQuarter'), date: () => [DateTime.local().startOf('quarter'), DateTime.local().endOf('quarter')] },
+      { title: this.$t('components.lastQuarter'), date: () => [DateTime.local().minus({ quarter: 1 }).startOf('quarter'), DateTime.local().minus({ quarter: 1 }).endOf('quarter')] },
+      { title: this.$t('components.thisYear'), date: () => [DateTime.local().startOf('year'), DateTime.local().endOf('year')] },
+      { title: this.$t('components.lastYear'), date: () => [DateTime.local().minus({ year: 1 }).startOf('year'), DateTime.local().minus({ year: 1 }).endOf('year')] },
+    ];
+  }
+
+  formatValue(facet, value) {
+    if (facet.type === 'period') {
+      if (value.value) {
+        let from = DateTime.fromISO(value.value[0]);
+        let to = DateTime.fromISO(value.value[1]);
+        if (!from.isValid || !to.isValid) {
+          from = DateTime.fromISO(facet.options.defaultValue.value[0]);
+          to = DateTime.fromISO(facet.options.defaultValue.value[1]);
+        }
+        const namedItem = this.daysList.find(item => {
+          const [start, end] = item.date();
+          return start.equals(from.startOf('day')) && end.equals(to.endOf('day'));
+        });
+        if (namedItem) {
+          value.label = namedItem.title;
+        } else {
+          value.label = formatRangeDates(from, to);
+        }
+      }
+      if (facet.options.defaultValue?.value) {
+        value.isDefault = facet.options.defaultValue ? value.value[0] === facet.options.defaultValue.value[0] && value.value[1] === facet.options.defaultValue.value[1] : false;
+      } else {
+        value.isDefault = !value.value;
+      }
+    } else if (facet.type === 'date') {
+      const date = DateTime.fromISO(value.value);
+      value.label = formatDateonly(date.isValid ? value.value : facet.options.defaultValue.value, 'dd MMM yyyy');
+      value.isDefault = facet.options.defaultValue ? value.value === facet.options.defaultValue.value : false;
+    } else if (facet.type === 'facets-list') {
+      const firstItem = facet.options.items.find(item => item.value === (Array.isArray(value.value) ? value.value[0] : value.value));
+      value.label = firstItem ? firstItem.label : facet.options.defaultValue.label;
+      if (value.value && value.value.length > 1) {
+        value.label = `${value.label} та ще ${value.value.length - 1}`;
+      }
+      value.isDefault = facet.options.defaultValue ? JSON.stringify(value.value) === JSON.stringify(facet.options.defaultValue.value) : false;
+    } else if (facet.type === 'amount') {
+      if (typeof value.value[0] !== 'number' || typeof value.value[1] !== 'number') {
+        value.value = [facet.options.min, facet.options.max];
+      }
+      value.isDefault = facet.options.defaultValue ? JSON.stringify(value.value) === JSON.stringify(facet.options.defaultValue.value) : false;
+      value.label = value.isDefault ? facet.options.defaultValue.label : `${formatMoney(value.value[0], null, 0)} - ${formatMoney(value.value[1], null, 0)}`;
+    } else if (facet.type === 'list') {
+      const item = facet.options.items.find(item => item.value === value.value);
+      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.isDefault = !value.value;
+    }
+    return value;
+  }
+}
+</script>

package/src/components/panels/PanelList.vue

@@ -79,6 +79,10 @@
   </div>
 </template>
 <style lang="scss">
+@import "bootstrap/scss/_functions.scss";
+@import "bootstrap/scss/_variables.scss";
+@import "bootstrap/scss/mixins/_breakpoints.scss";
+
 .b-panel-list-container {
   width: 100%;
   height: 100%;
@@ -87,15 +91,18 @@
 }
 .b-panel-list {
   align-items: stretch;
-//background: var(--bs-body-bg);
+  //background: var(--bs-body-bg);
   bottom: 0;
-  display: flex;
   height: 100%;
   left: 0;
   overflow-x: auto;
   position: absolute;
   right: 0;
   top: 0;
+
+  @include media-breakpoint-up(md) {
+    display: flex;
+  }
 }
 
 $an-time: .1s;
@@ -213,6 +220,7 @@ export default class PanelList extends Vue {
     newStack[index].isCollapsed = false;
     this.panelsStack = newStack;
     this.ensureOnlyTwoOpenPanels(panel.id);
+    this.setPanelHash();
   }
 
   ensureOnlyTwoOpenPanels(keepOpenId: number) {
@@ -244,7 +252,7 @@ export default class PanelList extends Vue {
     this.panelsStack = newStack;
   }
 
-  internalOpenPanel(type: string, payload: any = {}, openIndex?: number) {
+  internalOpenPanel(type: string, payload: any = {}, openIndex?: number, noEvents = false) {
     if (!this.panels[type]) {
       return;
     }
@@ -315,13 +323,15 @@ export default class PanelList extends Vue {
           newPanel.payload = value;
           newPanel.title = this.panels[type].caption(this.$t.bind(this), value);
           newPanel.icon = this.panels[type].icon ? this.panels[type].icon(this.$t.bind(this), payload) : null,
-          this.setPanelHash()
+            this.setPanelHash()
         }
         newStack.push(newPanel);
         this.panelsStack = newStack;
         this.ensureOnlyTwoOpenPanels(newPanel.id);
         this.emitEvent('panel.open', newPanel);
-        this.emitEvent('panels.changed', this.panelsStack);
+        if (!noEvents) {
+          this.emitEvent('panels.changed', this.panelsStack);
+        }
         return res(newPanel);
       })
     });
@@ -365,6 +375,7 @@ export default class PanelList extends Vue {
       p.isCollapsed = p !== panel;
     }
     this.panelsStack = newStack;
+    this.setPanelHash();
   }
 
   getPanels(type) {
@@ -377,7 +388,7 @@ export default class PanelList extends Vue {
 
   getLink(stack: IPanel[]) {
     return stack.map(panel => {
-      return `${panel.type}=${JSON.stringify(panel.payload || {})}`;
+      return `${panel.type}${panel.isCollapsed ? '' : '!'}=${JSON.stringify(panel.payload || {})}`;
     }).join('&');
   }
 
@@ -387,19 +398,33 @@ export default class PanelList extends Vue {
   }
 
   async parsePanelHash() {
-    const hash = this.$route.hash;
+    const {hash} = location;
     if (hash) {
       const panels = hash.slice(1).split('&').map(item => {
         const [type, payload] = item.split('=');
+        const isCollapsed = !item.includes('!');
         return {
-          type,
+          type: type.replace('!', ''),
+          isCollapsed,
           payload: JSON.parse(decodeURIComponent(payload))
         };
       });
       const newStack = [];
-      for (const panel of panels) {
-        const resPanel = await this.internalOpenPanel(panel.type, panel.payload);
-        newStack.push(resPanel);
+      for (const panelIndex in panels) {
+        const panel = panels[panelIndex];
+        if (this.panelsStack[panelIndex] && this.panelsStack[panelIndex].type === panel.type) {
+          // reuse panel
+          this.panelsStack[panelIndex].payload = panel.payload;
+          this.panelsStack[panelIndex].isCollapsed = panel.isCollapsed;
+          newStack.push(this.panelsStack[panelIndex]);
+        } else {
+          const resPanel = await this.internalOpenPanel(panel.type, panel.payload, undefined, true);
+          if (resPanel) {
+            resPanel.isCollapsed = panel.isCollapsed;
+            resPanel.isAnimate = false;
+            newStack.push(resPanel);
+          }
+        }
       }
       this.panelsStack = newStack;
       this.emitEvent('panels.changed', this.panelsStack);