@webitel/ui-sdk 25.4.54 → 25.4.56

package/src/modules/Filters/v2/filters/classes/FiltersManager.ts

@@ -1,189 +0,0 @@
-import { isEmpty } from '../../../../../scripts';
-import {
-  filterLabelToSnapshotKey,
-  filterNameFromSnapshotKey,
-  filterValuePropFromSnapshotKey,
-  filterValueToSnapshotKey,
-} from '../scripts/utils.ts';
-import type {
-  FilterConfig,
-  FilterData,
-  FilterInitParams,
-  FilterLabel,
-  FilterName,
-  FilterValue,
-  IFilter,
-} from '../types/Filter';
-import { FiltersManagerConfig, IFiltersManager } from '../types/FiltersManager';
-import { Filter } from './Filter.ts';
-
-class FiltersManager implements IFiltersManager {
-  filters = new Map<FilterName, IFilter>();
-
-  constructor(private config?: FiltersManagerConfig) {}
-
-  hasFilter(name: FilterName): boolean {
-    return this.filters.has(name);
-  }
-
-  getFilter(name: FilterName): IFilter {
-    return this.filters.get(name);
-  }
-
-  addFilter(
-    filterInitParams: FilterInitParams,
-    payload?: object,
-    config?: FilterConfig,
-  ): IFilter {
-    const filter = new Filter(filterInitParams, payload, config || this.config);
-    this.filters.set(filterInitParams.name, filter);
-    return filter;
-  }
-
-  updateFilter({
-    name,
-    value,
-    label,
-  }: {
-    name: FilterName;
-    value?: FilterValue;
-    label?: FilterLabel;
-  }): IFilter {
-    const filter = this.filters.get(name);
-    filter.set({ value, label });
-    return filter;
-  }
-
-  deleteFilter(name: FilterName): IFilter {
-    const filter = this.filters.get(name);
-    this.filters.delete(name);
-    return filter;
-  }
-
-  getAllValues(): { [name: FilterName]: FilterValue } {
-    const filters = [...this.filters.values()].reduce((acc, filter) => {
-      acc[filter.name] = filter.value;
-      return acc;
-    }, {});
-
-    return filters;
-  }
-
-  toString(): string {
-    const filtersData = [...this.filters.values()].reduce(
-      (acc, { name, label, value }) => {
-        if (isEmpty(value) && value == null) return acc;
-
-        acc[filterValueToSnapshotKey(name)] = value;
-
-        if (label) {
-          acc[filterLabelToSnapshotKey(name)] = label;
-        }
-
-        return acc;
-      },
-      {},
-    );
-
-    return JSON.stringify(filtersData);
-  }
-
-  fromString(snapshotStr: string): void {
-    const snapshot = JSON.parse(snapshotStr);
-
-    /*
-    first, make transition object from snapshot,
-    because filter should bw always added with value
-     */
-    const filtersData: { FilterName: FilterData } = Object.entries(
-      snapshot,
-    ).reduce(
-      (filtersAcc, [snapshotKey, snapshotValue]) => {
-        const name = filterNameFromSnapshotKey(snapshotKey);
-        const valueProp = filterValuePropFromSnapshotKey(snapshotKey);
-
-        if (filtersAcc[name]) {
-          filtersAcc[name][valueProp] = snapshotValue;
-        } else {
-          filtersAcc[name] = {
-            [valueProp]: snapshotValue,
-          };
-        }
-
-        return filtersAcc;
-      },
-      {} as { FilterName: FilterData },
-    );
-
-    Object.entries(filtersData).forEach(([name, filterData]) => {
-      this.addFilter({ ...filterData, name });
-    });
-  }
-
-  getAllKeys(): FilterName[] {
-    return [...this.filters.keys()];
-  }
-
-  getFiltersList({
-    include,
-    exclude,
-  }: {
-    include?: FilterName[];
-    exclude?: FilterName[];
-  } = {}): IFilter[] {
-    const useInclude = !isEmpty(include);
-    const useExclude = !isEmpty(exclude) && !useInclude;
-
-    if (!useInclude && !useExclude) {
-      return [...this.filters.values()];
-    }
-
-    return [...this.filters.values()].filter(({ name }) => {
-      if (useInclude) {
-        return include.includes(name);
-      } else if (useExclude) {
-        return !exclude.includes(name);
-      }
-
-      return true;
-    });
-  }
-
-  reset({
-    include,
-    exclude,
-  }: {
-    include?: FilterName[];
-    exclude?: FilterName[];
-  } = {}): void {
-    const useInclude = !isEmpty(include);
-    const useExclude = !isEmpty(exclude) && !useInclude;
-
-    if (!useInclude && !useExclude) {
-      this.filters.clear();
-      return;
-    }
-
-    if (useInclude) {
-      include.forEach((name) => {
-        this.filters.delete(name);
-      });
-      return;
-    }
-
-    if (useExclude) {
-      this.filters.forEach((_, filterName) => {
-        if (!exclude.includes(filterName)) {
-          this.filters.delete(filterName);
-        }
-      });
-      return;
-    }
-  }
-}
-
-export const createFiltersManager = (
-  config?: FiltersManagerConfig,
-): IFiltersManager => {
-  return new FiltersManager(config);
-};

package/src/modules/Filters/v2/filters/components/config/dynamic-filter-config-form-label.vue

@@ -1,50 +0,0 @@
-<template>
-  <wt-input
-    :value="model"
-    :label="t('webitelUI.filters.filterLabel')"
-    :v="v$.model"
-    @input="model = $event"
-  />
-</template>
-
-<script setup lang="ts">
-import { useVuelidate } from '@vuelidate/core';
-import { maxLength } from '@vuelidate/validators';
-import { computed, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import WtInput from '../../../../../../components/wt-input/wt-input.vue';
-
-const MAX_STRING_LENGTH = 50;
-
-const model = defineModel<string>();
-
-interface Emits {
-  'update:invalid': [boolean];
-}
-const emit = defineEmits<Emits>();
-
-const { t } = useI18n();
-
-const v$ = useVuelidate(
-  computed(() => ({
-    model: {
-      // maybe make maxLength value by props
-      maxLength: maxLength(MAX_STRING_LENGTH),
-    },
-  })),
-  { model },
-  { $autoDirty: true },
-);
-v$.value.$touch();
-
-watch(
-  () => v$.value.$invalid,
-  (invalid) => {
-    emit('update:invalid', invalid);
-  },
-  { immediate: true },
-);
-</script>
-
-<style scoped lang="scss"></style>

package/src/modules/Filters/v2/filters/components/config/dynamic-filter-config-form.vue

@@ -1,140 +0,0 @@
-<template>
-  <form class="dynamic-filter-config-form">
-    <wt-select
-      :clearable="false"
-      :disabled="editMode"
-      :label="t('webitelUI.filters.filterName')"
-      :options="options"
-      :value="filterName"
-      track-by="value"
-      use-value-from-options-by-prop="value"
-      @input="onFilterNameUpdate($event)"
-    />
-
-    <slot
-      name="value-input"
-      v-bind="{
-        filterName,
-        filterValue,
-        inputLabel: t('webitelUI.filters.filterValue'),
-        onValueChange: (v) => (filterValue = v),
-        onValueInvalidChange: (v) => (invalid = v),
-      }"
-    />
-
-    <dynamic-filter-config-form-label
-      :value="filterLabel"
-      @update:model-value="onLabelValueUpdate"
-      @update:invalid="(v) => (invalid = v)"
-    />
-
-    <footer class="dynamic-filter-config-form-footer">
-      <wt-button
-        :disabled="invalid"
-        wide
-        @click="submit"
-      >
-        {{ t('reusable.save') }}
-      </wt-button>
-
-      <wt-button
-        color="secondary"
-        wide
-        @click="emit('cancel')"
-      >
-        {{ t('reusable.cancel') }}
-      </wt-button>
-    </footer>
-  </form>
-</template>
-
-<script lang="ts" setup>
-import deepcopy from 'deep-copy';
-import { ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import WtButton from '../../../../../../components/wt-button/wt-button.vue';
-import WtSelect from '../../../../../../components/wt-select/wt-select.vue';
-import type { FilterInitParams, FilterName, IFilter } from '../../types/Filter';
-import DynamicFilterConfigFormLabel from './dynamic-filter-config-form-label.vue';
-
-interface FilterNameSelectRepresentation {
-  name: string;
-  value: FilterName;
-}
-
-interface AddModeProps {
-  options: Array<FilterNameSelectRepresentation>;
-}
-
-interface EditModeProps {
-  filter: IFilter;
-}
-
-type Props = AddModeProps | EditModeProps;
-
-const props = defineProps<Props>();
-
-const emit = defineEmits<{
-  submit: [FilterInitParams];
-  cancel: [];
-}>();
-
-const { t } = useI18n();
-
-const filterName = ref();
-const filterLabel = ref('');
-const filterValue = ref();
-
-const editMode = !!props.filter;
-
-const invalid = ref(false);
-
-const onLabelValueUpdate = (val: string) => {
-  filterLabel.value = val;
-};
-
-const onFilterNameUpdate = (val: string) => {
-  filterName.value = val;
-  filterValue.value = null;
-  invalid.value = false;
-};
-
-const submit = () => {
-  emit('submit', {
-    name: filterName.value,
-    label: filterLabel.value,
-    value: filterValue.value,
-  });
-};
-
-if (props.filter) {
-  watch(
-    props.filter,
-    () => {
-      filterName.value = props.filter.name;
-      filterValue.value = deepcopy(props.filter.value);
-      filterLabel.value = props.filter.label;
-    },
-    { immediate: true },
-  );
-}
-</script>
-
-<style lang="scss" scoped>
-$form-width: 380px;
-
-.dynamic-filter-config-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-xs);
-  box-sizing: border-box;
-  padding: var(--spacing-xs) 0;
-  width: $form-width;
-}
-
-.dynamic-filter-config-form-footer {
-  display: flex;
-  gap: var(--spacing-xs);
-}
-</style>

package/src/modules/Filters/v2/filters/components/config/dynamic-filter-config-view.vue

@@ -1,40 +0,0 @@
-<template>
-  <div class="dynamic-filter-config-view">
-    <wt-tooltip
-      :triggers="['click']"
-      :disabled="props.disabled"
-      :disable-click-away="props.disableClickAway"
-    >
-      <template #activator="slotScope">
-        <slot
-          name="activator"
-          v-bind="slotScope"
-        />
-      </template>
-      <template #default="slotScope">
-        <slot
-          name="content"
-          v-bind="slotScope"
-        />
-      </template>
-    </wt-tooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-/**
- * this component should only be used for config view representation: tooltip/popup/etc,
- * and their styling
- */
-
-import WtTooltip from '../../../../../../components/wt-tooltip/wt-tooltip.vue';
-
-interface Props {
-  disabled?: boolean;
-  disableClickAway?: boolean;
-}
-
-const props = defineProps<Props>();
-</script>
-
-<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/dynamic-filter-add-action.vue

@@ -1,54 +0,0 @@
-<template>
-  <dynamic-filter-config-view
-    disable-click-away
-    class="dynamic-filter-add-action"
-  >
-    <template #activator>
-      <div class="dynamic-filter-add-action-wrapper">
-        <p v-if="props.showLabel">
-          {{ t('webitelUI.filters.addFilter') }}
-        </p>
-        <wt-icon-action action="add-filter" />
-      </div>
-    </template>
-
-    <template #content="slotScope">
-      <slot
-        name="form"
-        v-bind="slotScope"
-      >
-        filter form should be here
-      </slot>
-    </template>
-  </dynamic-filter-config-view>
-</template>
-
-<script lang="ts" setup>
-import { useI18n } from 'vue-i18n';
-
-import WtIconAction from '../../../../../components/wt-icon-action/wt-icon-action.vue';
-import DynamicFilterConfigView from './config/dynamic-filter-config-view.vue';
-
-interface Props {
-  showLabel?: boolean;
-}
-
-const props = defineProps<Props>();
-
-const { t } = useI18n();
-</script>
-
-<style lang="scss" scoped>
-.dynamic-filter-add-action {
-  display: flex;
-
-  &-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: var(--spacing-2xs);
-    cursor: pointer;
-    width: fit-content;
-  }
-}
-</style>

package/src/modules/Filters/v2/filters/components/dynamic-filter-panel-wrapper.vue

@@ -1,57 +0,0 @@
-<template>
-  <div
-    class="dynamic-filter-panel-wrapper"
-    :class="`dynamic-filter-panel-wrapper--${props.size}`"
-  >
-    <div class="dynamic-filter-panel-wrapper__filters">
-      <slot name="filters" />
-    </div>
-
-    <div class="dynamic-filter-panel-wrapper__actions">
-      <slot name="actions" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ComponentSize } from '../../../../../enums';
-
-const props = withDefaults(
-  defineProps<{
-    size?: ComponentSize;
-  }>(),
-  {
-    size: ComponentSize.MD,
-  },
-);
-</script>
-
-<style lang="scss" scoped>
-.dynamic-filter-panel-wrapper {
-  display: grid;
-  grid-gap: var(--spacing-sm);
-  grid-template-columns: 1fr auto;
-  align-items: center;
-}
-
-.dynamic-filter-panel-wrapper__filters {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  grid-gap: var(--spacing-sm);
-}
-
-.dynamic-filter-panel-wrapper__actions {
-  display: flex;
-  grid-gap: var(--spacing-sm);
-}
-
-.dynamic-filter-panel-wrapper {
-  &--sm {
-    .dynamic-filter-panel-wrapper__filters,
-    .dynamic-filter-panel-wrapper__actions {
-      grid-gap: var(--spacing-xs);
-    }
-  }
-}
-</style>

package/src/modules/Filters/v2/filters/components/dynamic-filter-search.vue

@@ -1,80 +0,0 @@
-<template>
-  <wt-search-bar
-    :placeholder="t('reusable.search')"
-    :search-mode="currentSearchMode"
-    :search-mode-options="props.searchModeOptions"
-    :hint="currentSearchMode?.hint"
-    :value="model"
-    :v="validationExists && v$"
-    @input="model = $event"
-    @search="handleSearch"
-    @update:search-mode="onSearchModeChange($event.value)"
-  >
-    <template
-      v-if="props.showTextSearchIcon"
-      #search-icon
-    >
-      <wt-icon icon="stt-search" />
-    </template>
-  </wt-search-bar>
-</template>
-
-<script lang="ts" setup>
-import { useVuelidate } from '@vuelidate/core';
-import {computed} from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import WtSearchBar from '../../../../../components/wt-search-bar/wt-search-bar.vue';
-import {FilterSearch} from '../index';
-
-type ModelValue = string;
-const model = defineModel<ModelValue>();
-
-type SearchModeOptions = FilterSearch[]
-
-const props = defineProps<{
-  searchMode: string;
-  searchModeOptions: SearchModeOptions;
-  showTextSearchIcon?: boolean;
-}>();
-
-const emit = defineEmits<{
-  'update:search-mode': [string];
-  'handle-search': [string];
-}>();
-
-const { t } = useI18n();
-
-const currentSearchMode = computed(() =>
-  props.searchModeOptions.find(({ value }) => value === props.searchMode),
-);
-
-const validationExists = computed(() => props.searchModeOptions.find((el) => el.v))
-
-const v$ =
-  validationExists.value &&
-  useVuelidate(
-    computed(() => {
-      return {
-        model: {
-          ...(currentSearchMode.value?.v || {}),
-        },
-      };
-    }),
-    { model },
-    { $autoDirty: true },
-  );
-
-if (v$) v$.value.$touch();
-
-const onSearchModeChange = (value: string) => {
-  emit('update:search-mode', value);
-  model.value = '';
-};
-
-const handleSearch = () => {
-  emit('handle-search', model.value);
-};
-</script>
-
-<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/filter-options/_shared/composables/booleanFilterToolkit.ts

@@ -1,39 +0,0 @@
-import { useVuelidate } from '@vuelidate/core';
-import { computed, ModelRef, type Reactive, type Ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-import { BooleanFilterModelValue } from '../types/BooleanFilter';
-
-export const usePrettifyBooleanValuePreview = (
-  value: Reactive<boolean>,
-): { localeValue: Ref<string> } => {
-  const { t } = useI18n();
-
-  const localeValue = computed(() => {
-    return value ? t('vocabulary.yes') : t('vocabulary.no');
-  });
-
-  return { localeValue };
-};
-
-export const useBooleanFilterValueValidation = <
-  T extends BooleanFilterModelValue,
->(
-  model: ModelRef<T>,
-) => {
-  const v$ = useVuelidate(
-    computed(() => ({
-      model: {
-        required: (v: T) => !(!v && v !== false),
-      },
-    })),
-    { model },
-    { $autoDirty: true },
-  );
-
-  v$.value.$touch();
-
-  return {
-    v$,
-  };
-};

package/src/modules/Filters/v2/filters/components/filter-options/_shared/composables/useFromToSecToPreviewTime.ts

@@ -1,41 +0,0 @@
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-export const useFromToSecToPreviewTime = (value: {
-  from?: number | string | null;
-  to?: number | string | null;
-}) => {
-  const { t } = useI18n();
-
-  const format = (secsVal: number) => {
-    const minutes = Math.floor(secsVal / 60);
-    const seconds = secsVal % 60;
-
-    return `${t('webitelUI.timepicker.min')} ${minutes} ${t('webitelUI.timepicker.sec')} ${seconds}`;
-  };
-
-  const from = computed(() => {
-    const numValue = Number(value.from);
-
-    if (!numValue && numValue !== 0) {
-      return '';
-    }
-
-    return format(numValue);
-  });
-
-  const to = computed(() => {
-    const numValue = Number(value.to);
-
-    if (!numValue && numValue !== 0) {
-      return '';
-    }
-
-    return format(numValue);
-  });
-
-  return {
-    from,
-    to,
-  };
-};