@itfin/components 1.3.86 → 1.3.87

package/src/components/filter/FilterItem.vue

@@ -1,423 +0,0 @@
-<template>
-  <div>
-    <template v-if="type === 'string'">
-      <itf-text-field
-        delay-input="300"
-        :prepend-icon="prependIcon"
-        :clearable="filterClearable"
-        :placeholder="filter.label"
-        :value="plainValue"
-        @input="updateValue(filter.id, $event)"
-      />
-    </template>
-    <template v-if="type === 'range'">
-      <div class="row">
-        <div class="col">
-          <itf-text-field
-            delay-input="300"
-            clearable
-            :placeholder="`${filter.label} (${$t('from')})`"
-            :value="value[filter.fields[0]]"
-            @input="updateValue(filter.fields[0], $event)"
-          />
-        </div>
-        <div class="col">
-          <itf-text-field
-            delay-input="300"
-            clearable
-            :placeholder="`(${$t('to')})`"
-            :value="value[filter.fields[1]]"
-            @input="updateValue(filter.fields[1], $event)"
-          />
-        </div>
-      </div>
-    </template>
-    <template v-else-if="type === 'list'">
-      <itf-select
-        :options="filter.items"
-        :clearable="filterClearable"
-        :reduce="(item) => item.value"
-        :get-option-label="(item) => item.title"
-        :selectable="(filter.selectable || (() => true))"
-        :value="plainValue"
-        :placeholder="filter.label"
-        :disabled="filter.disable"
-        @input="updateValue(filter.id, $event)"
-      >
-        <template #option="{ option }">
-          <div>
-            <span v-if="option.icon">{{ option.icon }}</span>
-            {{ option.title }}
-          </div>
-        </template>
-        <template #selected-option="{ option }">
-          <div>
-            <span v-if="option.icon">{{ option.icon }}</span>
-            {{ option.title }}
-          </div>
-        </template>
-      </itf-select>
-    </template>
-    <template v-else-if="type === 'tree'">
-      <itf-select
-        multiple
-        :clearable="filterClearable"
-        :placeholder="filter.label"
-        :value="plainValue"
-        :options="filter.items"
-        :reduce="(item) => item.id"
-        :selectable="(item) => !(item.type && item.type === 'group')"
-        @input="updateValue(filter.id, $event)"
-      >
-        <template #selected-option="{ option }">
-          <div v-if="option && option.label" class="d-flex align-items-center">
-            <div>
-              {{ option.label }}
-            </div>
-          </div>
-        </template>
-        <template #option="{ option }">
-          <div v-if="option" class="d-flex align-items-start">
-            <div :style="{ 'padding-left': `${option.type && option.type === 'group' ? 0 : 20}px` }">
-              {{ option.label }}
-            </div>
-          </div>
-        </template>
-      </itf-select>
-    </template>
-    <template v-else-if="type === 'project' && hasProjectsAccess">
-      <project-selector
-        :placeholder="filter.label"
-        :rules="[]"
-        :clearable="filterClearable"
-        :value="{ Id: plainValue }"
-        @input="updateValue(filter.id, $event && $event.Id)"
-      />
-    </template>
-    <template v-else-if="type === 'cashflowLine'">
-      <cashflow-line-selector
-        class="mb-3"
-        :value="{ Id: plainValue }"
-        :rules="[]"
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        @input="updateValue(filter.id, $event && $event.Id)"
-      />
-    </template>
-    <template v-else-if="(type === 'client' || type === 'counterparty') && isAllowClients">
-      <client-selector
-        :type="type === 'counterparty' ? 'vendors' : null"
-        :placeholder="filter.label"
-        :rules="[]"
-        :clearable="filterClearable"
-        :value="{ Id: plainValue }"
-        @input="updateValue(filter.id, $event && $event.Id)"
-      />
-    </template>
-    <template v-else-if="(type === 'counterparty2') && isAllowClients">
-      <counterparty-selector
-        :placeholder="filter.label"
-        :rules="[]"
-        :clearable="filterClearable"
-        :value="{ Id: plainValue }"
-        @input="updateValue(filter.id, $event && $event.Id)"
-      />
-    </template>
-    <template v-else-if="type === 'employee' && isCanSeeEmployees">
-      <employee-selector
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        :value="{ Id: plainValue }"
-        @input="updateValue(filter.id, $event && $event.Id)"
-      />
-    </template>
-    <template v-else-if="type === 'businessUnit'">
-      <business-unit-selector
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        :value="{ Id: plainValue }"
-        @input="updateValue(filter.id, $event && $event.Id)"
-      />
-    </template>
-    <template v-else-if="type === 'currency'">
-      <currency-selector
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        :value="{ Id: plainValue }"
-        @input="updateValue(filter.id, $event && $event.Id)"
-      />
-    </template>
-    <template v-else-if="type === 'office'">
-      <office-selector
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        :value="{ Id: plainValue }"
-        @input="updateValue(filter.id, $event && $event.Id)"
-      />
-    </template>
-    <template v-else-if="type === 'account'">
-      <account-selector
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        :value="{ Id: plainValue }"
-        @input="updateValue(filter.id, $event && $event.Id)"
-      />
-    </template>
-    <template v-else-if="type === 'vacancy'">
-      <vacancy-selector
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        :value="{ Id: plainValue }"
-        @input="updateValue(filter.id, $event && $event.Id)"
-      />
-    </template>
-    <template v-else-if="type === 'country'">
-      <country-selector
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        :value="plainValue ? { Name: plainValue } : null"
-        @input="updateValue(filter.id, $event && $event.Name)"
-      />
-    </template>
-    <template v-else-if="type === 'profile' && isProfileAvailable">
-      <profile-selector
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        :value="{ Id: plainValue }"
-        @input="updateValue(filter.id, $event && $event.Id)"
-      />
-    </template>
-    <template v-else-if="type === 'skills'">
-      <other-skills-selector
-        :taggable="false"
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        :value="plainValue"
-        @input="updateValue(filter.id, $event)"
-      />
-    </template>
-    <template v-else-if="type === 'label'">
-      <itf-select
-        :loading="loadingLabels"
-        :value="plainValue"
-        :placeholder="filter.label"
-        :options="prepareLabels"
-        multiple
-        :reduce="(item) => item.Id"
-        :get-option-label="(item) => item.LabelText"
-        @input="updateValue(filter.id, $event)"
-      >
-        <div v-if="filter.conditions" slot="list-header" class="px-2 pb-2">
-          <itf-segmented-control
-            class="text-uppercase segmented-control"
-            :value="value[filter.conditions] || 'and'"
-            :items="[{Id: 'and', Name: $t('and')}, {Id: 'or', Name: $t('or')}, {Id: 'not', Name: $t('not')}]"
-            @input="updateValue(filter.conditions, $event)"
-          />
-        </div>
-      </itf-select>
-    </template>
-    <template v-else-if="type === 'button'">
-      <itf-button block secondary :to="{ name: filter.to }">
-        {{ filter.label }}
-      </itf-button>
-    </template>
-    <template v-else-if="type === 'switch'">
-      <itf-checkbox
-        switch
-        :label="filter.label"
-        :value="plainValue"
-        @input="updateValue(filter.id, $event)"
-      />
-    </template>
-    <template v-else-if="type === 'date'">
-      <itf-date-range-picker
-        placement="bottom-end"
-        :value="dateRangeValue"
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        :disabled="filter.disable"
-        value-format="yyyy-MM-dd"
-        @input="updateDateValue($event, filter.fields)"
-      />
-    </template>
-    <template v-else-if="type === 'team'">
-      <team-selector
-        :clearable="filterClearable"
-        :value="{ Id: plainValue }"
-        @input="updateValue(filter.id, ($event && $event.Id) || null)"
-      />
-    </template>
-    <div v-else-if="type === 'dates'" class="d-flex gap-1">
-      <div>
-        <itf-date-picker
-          placement="bottom-end"
-          :value="dateRangeValue[0]"
-          :placeholder="`${filter.label} (From)`"
-          :clearable="filterClearable"
-          value-format="yyyy-MM-dd"
-          @input="updateDateValue([$event, dateRangeValue[1]], filter.fields)"
-        />
-      </div>
-      <div>
-        <itf-date-picker
-          placement="bottom-end"
-          :value="dateRangeValue[1]"
-          :placeholder="`${filter.label} (To)`"
-          :clearable="filterClearable"
-          value-format="yyyy-MM-dd"
-          @input="updateDateValue([dateRangeValue[0], $event], filter.fields)"
-        />
-      </div>
-    </div>
-    <template v-else-if="type === 'date-period'">
-      <itf-period-picker
-        placement="bottom-end"
-        :value="dateRangeValue"
-        value-format="yyyy-MM-dd"
-        :placeholder="filter.label"
-        :clearable="filterClearable"
-        @input="updateDateValue($event, filter.fields)"
-      />
-    </template>
-  </div>
-</template>
-<style lang="scss" scoped>
-  .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
-    z-index: 3 !important;
-  }
-  </style>
-<script>
-import { Component, Model, Prop, Vue } from 'vue-property-decorator';
-import itfButton from '@itfin/components/src/components/button/Button';
-import itfTextField from '@itfin/components/src/components/text-field/TextField';
-import itfSelect from '@itfin/components/src/components/select/Select';
-import itfDateRangePicker from '@itfin/components/src/components/datepicker/DateRangePicker';
-import itfDatePicker from '@itfin/components/src/components/datepicker/DatePicker';
-import itfPeriodPicker from '@itfin/components/src/components/datepicker/PeriodPicker';
-import itfCheckbox from '@itfin/components/src/components/checkbox/Checkbox';
-import itfSegmentedControl from '@itfin/components/src/components/segmented-control/SegmentedControl';
-import ProfileSelector from '~/components/Common/Selectors/ProfileSelector';
-import ClientSelector from '~/components/Common/Selectors/ClientSelector';
-import CurrencySelector from '~/components/Common/Selectors/CurrencySelector.vue';
-import BusinessUnitSelector from '~/components/Common/Selectors/BusinessUnitSelector.vue';
-import ProjectSelector from '~/components/Common/Selectors/ProjectSelector';
-import EmployeeSelector from '~/components/Common/Selectors/EmployeeSelector';
-import CounterpartySelector from '~/components/Common/Selectors/CounterpartySelector.vue';
-import OfficeSelector from '~/components/Common/Selectors/OfficeSelector';
-import OtherSkillsSelector from '~/components/Skills/OtherSkillsSelector';
-import AccountSelector from '~/components/Common/Selectors/AccountSelector';
-import VacancySelector from '~/components/Common/Selectors/VacancySelector';
-import CountrySelector from '~/components/Common/Selectors/CountrySelector.vue';
-import TeamSelector from '~/components/Common/Selectors/TeamSelector.vue';
-import CashflowLineSelector from '~/components/Common/Selectors/CashflowLineSelector.vue';
-
-import {
-  CLIENTS_VIEW_CLIENTS,
-  CLIENTS_VIEW_OWN_CLIENTS,
-  EMPLOYEES_LIST,
-  PROFILES_CAN_CHANGE_PROFILES,
-  PROFILES_SEE_PROFILES,
-  PROJECTS_LIST
-} from '~/scopes';
-
-export default @Component({
-  name: 'FilterItem',
-  components: {
-    BusinessUnitSelector,
-    CurrencySelector,
-    itfButton,
-    itfSelect,
-    itfCheckbox,
-    itfTextField,
-    itfSegmentedControl,
-    itfDatePicker,
-    itfDateRangePicker,
-    itfPeriodPicker,
-    ProjectSelector,
-    ProfileSelector,
-    ClientSelector,
-    OfficeSelector,
-    EmployeeSelector,
-    AccountSelector,
-    VacancySelector,
-    OtherSkillsSelector,
-    CountrySelector,
-    TeamSelector,
-    CounterpartySelector,
-    CashflowLineSelector,
-  }
-})
-class FilterItem extends Vue {
-  @Model('input') value;
-  @Prop(String) type;
-  @Prop() filter;
-  @Prop() labels;
-  @Prop() loadingLabels;
-  @Prop() prependIcon;
-
-  get isCanSeeEmployees () {
-    return this.$scope(EMPLOYEES_LIST);
-  }
-
-  get isProfileAvailable () {
-    return this.$scope(PROFILES_CAN_CHANGE_PROFILES, PROFILES_SEE_PROFILES);
-  }
-
-  get isAllowClients () {
-    return this.$scope(CLIENTS_VIEW_CLIENTS, CLIENTS_VIEW_OWN_CLIENTS);
-  }
-
-  get hasProjectsAccess() {
-    return this.$scope(PROJECTS_LIST);
-  }
-
-  get plainValue () {
-    return this.value[this.filter.id];
-  }
-
-  get dateRangeValue () {
-    return this.isCustomFilter
-      ? [
-        this.value[this.filter.id] && this.value[this.filter.id].from,
-        this.value[this.filter.id] && this.value[this.filter.id].to
-      ]
-      : [
-        this.value[(this.filter.fields || {})[0] || 'from'],
-        this.value[(this.filter.fields || {})[1] || 'to']
-      ];
-  }
-
-  get prepareLabels () {
-    return this.labels.map(label => ({ ...label, Color: `#${label.Color}` }));
-  }
-
-  get filterClearable () {
-    return typeof this.filter.clearable !== 'undefined' ? this.filter.clearable : true;
-  }
-
-  get isCustomFilter () {
-    return this.filter.id.toLowerCase().includes('customfield_');
-  }
-
-  updateValue (key, value, fields = {}) {
-    const filter = { ...this.value };
-    filter[key] = value;
-    this.$emit('input', filter);
-  }
-
-  updateDateValue (value, fields = {}) {
-    const filter = { ...this.value };
-
-    if (this.isCustomFilter) {
-      const key = this.filter.id;
-      filter[key] = value[0] && value[1] ? { from: value[0], to: value[1] } : null;
-    } else {
-      filter[fields[0] || 'from'] = value[0];
-      filter[fields[1] || 'to'] = value[1];
-    }
-
-    this.$emit('input', filter);
-  }
-}
-</script>

package/src/components/filter/constants.js

@@ -1,20 +0,0 @@
-
-
-export function getOperatorsByType(type) {
-  const operations = [
-    {
-      type: 'string',
-      operators: [
-        { id: 'eq', title: 'equal', sign: '=' },
-        { id: 'notEq', title: 'not equal', sign: '≠' },
-        { id: 'contains', title: 'contains', sign: '∋' },
-        { id: 'noContains', title: 'not contains', sign: '∌' },
-        { id: 'startsWith', title: 'starts with', sign: 'A…' },
-        { id: 'endsWith', title: 'ends with', sign: '…Z' },
-        // { id: 'exists', title: 'exists', sign: '∃' }
-      ]
-    }
-  ];
-
-  return operations.find((operation) => operation.type === type).operators;
-}