@webitel/ui-datalist 1.0.0 → 1.0.2

package/src/filter-presets/components/save-preset/overwrite-preset-popup.vue

@@ -0,0 +1,64 @@
+<template>
+  <wt-popup
+    size="md"
+    @close="emit('close')"
+  >
+    <template #title>
+      {{
+        `${t('reusable.save')} ${t('webitelUI.filters.presets.preset').toLowerCase()}`
+      }}
+    </template>
+    <template #main>
+      <p class="overwrite-preset-popup-text">
+        {{ t('webitelUI.filters.presets.overwritePresetTitle') }}
+      </p>
+      <p class="overwrite-preset-popup-text">
+        {{ t('webitelUI.filters.presets.overwritePresetText') }}
+      </p>
+    </template>
+    <template #actions>
+      <wt-button
+        color="error"
+        :loading="isSaving"
+        @click="confirm"
+      >
+        {{ t('reusable.replace') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="emit('cancel')"
+        >{{ t('reusable.cancel') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup lang="ts">
+import { WtPopup } from '@webitel/ui-sdk/src/components/index';
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { SubmitConfig } from './save-preset-popup.vue';
+
+const emit = defineEmits<{
+  confirm: [SubmitConfig];
+  cancel: [];
+  close: [];
+}>();
+
+const { t } = useI18n();
+
+const isSaving = ref(false);
+
+const confirm = () => {
+  emit('confirm', {
+    onCompleted: () => (isSaving.value = false),
+  });
+};
+</script>
+
+<style scoped lang="scss">
+.overwrite-preset-popup-text {
+  text-align: center;
+}
+</style>

package/src/filter-presets/components/save-preset/save-preset-action.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="save-preset-action">
+    <wt-icon-action
+      :action="IconAction.SAVE_PRESET"
+      :disabled="disableAction"
+      @click="showSaveForm = true"
+    />
+
+    <save-preset-popup
+      v-if="
+        showSaveForm /* v-if is used to re-mount component on each open/close so that each time component data re-inits*/
+      "
+      v-show="
+        !presetToOverwriteWith /* on 'overwrite preset' popup hide this popup, but don't reset it*/
+      "
+      :shown="true /* coz visibility is controlled by v-if*/"
+      :filters-manager="props.filtersManager"
+      :namespace="namespace"
+      @submit="handlePresetSubmit"
+      @close="showSaveForm = false"
+    />
+
+    <overwrite-preset-popup
+      v-if="presetToOverwriteWith"
+      @confirm="handlePresetOverwriteConfirmation"
+      @cancel="presetToOverwriteWith = null"
+      @close="presetToOverwriteWith = null"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { WtIconAction } from '@webitel/ui-sdk/src/components/index';
+import { IconAction } from '@webitel/ui-sdk/src/enums';
+import { computed, inject, type Ref, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { EnginePresetQuery } from 'webitel-sdk';
+
+import { IFiltersManager } from '../../../filters/index';
+import {
+  addPreset,
+  getPresetList,
+  updatePreset,
+} from '../../api/PresetQuery.api.ts';
+import OverwritePresetPopup from './overwrite-preset-popup.vue';
+import SavePresetPopup, { SubmitConfig } from './save-preset-popup.vue';
+
+const props = defineProps<{
+  /**
+   * presets "section" namespace
+   */
+  namespace: string;
+  filtersManager: IFiltersManager;
+}>();
+
+const eventBus = inject('$eventBus');
+
+const { t } = useI18n();
+
+/**
+ * disable "save" btn if there's nothing to save
+ * */
+const disableAction = computed(() => {
+  return !props.filtersManager.getAllKeys().length;
+});
+
+/**
+ * visibility flag
+ * */
+const showSaveForm = ref(false);
+
+/**
+ * if preset with the same name already exists, this will be suggested to set to that preset
+ */
+const presetToOverwriteWith: Ref<EnginePresetQuery | null> = ref(null);
+
+const handlePresetSubmit = async (
+  preset: EnginePresetQuery,
+  { onCompleted }: SubmitConfig,
+) => {
+  try {
+    await addPreset({ preset, namespace: props.namespace });
+
+    eventBus.$emit('notification', {
+      type: 'success',
+      text: t('systemNotifications.success.create', {
+        entity: t('webitelUI.filters.presets.preset'),
+      }),
+    });
+
+    showSaveForm.value = false;
+  } catch (err) {
+    if (err?.status === 409) {
+      presetToOverwriteWith.value = preset;
+    }
+    throw err;
+  } finally {
+    if (onCompleted) onCompleted();
+  }
+};
+
+const handlePresetOverwriteConfirmation = async ({
+  onCompleted,
+}: SubmitConfig) => {
+  try {
+    const { items } = await getPresetList(
+      {
+        search: presetToOverwriteWith.value.name,
+        presetNamespace: props.namespace,
+      },
+      {
+        transformers: { useStarToSearch: false },
+      },
+    );
+    const { id: existingPresetId } = items[0];
+    await updatePreset({
+      id: existingPresetId,
+      item: {
+        ...presetToOverwriteWith.value,
+      },
+      namespace: props.namespace,
+    });
+
+    eventBus.$emit('notification', {
+      type: 'success',
+      text: t('systemNotifications.success.update', {
+        entity: t('webitelUI.filters.presets.preset'),
+      }),
+    });
+
+    presetToOverwriteWith.value = null;
+    showSaveForm.value = false;
+  } finally {
+    if (onCompleted) onCompleted();
+  }
+};
+</script>
+
+<style lang="scss" scoped></style>

package/src/filter-presets/components/save-preset/save-preset-popup.vue

@@ -0,0 +1,136 @@
+<template>
+  <wt-popup
+    size="md"
+    @close="emit('close')"
+  >
+    <template #title>
+      {{
+        `${t('reusable.save')} ${t('webitelUI.filters.presets.preset').toLowerCase()}`
+      }}
+    </template>
+
+    <template #main>
+      <form
+        class="save-preset-form"
+        @submit.prevent="() => !v$.$invalid && save"
+      >
+        <preset-name-field
+          v-model:model-value="presetForm.name"
+          :v="v$.name"
+        />
+
+        <preset-description-field
+          v-model:model-value="presetForm.description"
+        />
+      </form>
+
+      <preset-filters-preview :filters="appliedFilters" />
+    </template>
+
+    <template #actions>
+      <wt-button
+        :disabled="v$.$invalid"
+        :loading="isSaving"
+        @click="save"
+      >
+        {{ t('reusable.save') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="emit('close')"
+      >
+        {{ t('reusable.cancel') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { WtPopup } from '@webitel/ui-sdk/src/components/index';
+import { computed, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { EnginePresetQuery } from 'webitel-sdk';
+
+import type { IFiltersManager } from '../../../index';
+import PresetDescriptionField from '../_shared/input-fields/preset-description-field.vue';
+import PresetNameField from '../_shared/input-fields/preset-name-field.vue';
+import PresetFiltersPreview from '../_shared/preset-filters-preview.vue';
+
+export type SubmitConfig = {
+  onSuccess?: () => void;
+  onFailure?: (err: Error) => void;
+  onCompleted?: () => void;
+};
+
+const props = defineProps<{
+  filtersManager: IFiltersManager;
+}>();
+
+const emit = defineEmits<{
+  submit: [EnginePresetQuery, SubmitConfig?];
+  close: [];
+}>();
+
+const { t } = useI18n();
+
+const isSaving = ref(false);
+
+const presetForm = reactive({
+  name: '',
+  description: '',
+});
+
+const v$ = useVuelidate(
+  computed(() => {
+    return {
+      name: {
+        required,
+      },
+    };
+  }),
+  presetForm,
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+const appliedFilters = computed(() => {
+  return props.filtersManager.getFiltersList();
+});
+
+const save = () => {
+  isSaving.value = true;
+
+  const preset: EnginePresetQuery = {
+    ...presetForm,
+    preset: {
+      'filtersManager.toString': props.filtersManager.toString(),
+    },
+  };
+
+  emit('submit', preset, {
+    onCompleted: () => {
+      isSaving.value = false;
+    },
+  });
+};
+</script>
+
+<style scoped lang="scss">
+@use '@webitel/styleguide/scroll' as *;
+
+.save-preset-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+  margin-bottom: var(--spacing-sm);
+}
+
+.save-preset-filters-preview-wrapper {
+  @extend %wt-scrollbar;
+  margin-top: var(--spacing-sm);
+  max-height: 140px;
+  overflow-y: auto;
+}
+</style>

package/src/filter-presets/index.ts

@@ -0,0 +1,5 @@
+import ApplyPresetAction from './components/apply-preset/apply-preset-action.vue';
+import SavePresetAction from './components/save-preset/save-preset-action.vue';
+import { createFilterPresetsStore } from './stores/createFilterPresetsStore.ts';
+
+export { ApplyPresetAction, createFilterPresetsStore, SavePresetAction };

package/src/filter-presets/stores/createFilterPresetsStore.ts

@@ -0,0 +1,17 @@
+import { EnginePresetQuery } from 'webitel-sdk';
+
+import { createTableStore } from '../../table/createTableStore.store.ts';
+import PresetQueryAPI from '../api/PresetQuery.api.ts';
+import { headers } from './headers/headers.ts';
+
+export const createFilterPresetsStore = (namespace = 'presets') => {
+  const presetsNamespace = namespace.endsWith('presets')
+    ? namespace
+    : `${namespace}/presets`;
+
+  return createTableStore<EnginePresetQuery>(presetsNamespace, {
+    apiModule: PresetQueryAPI,
+    headers,
+    disablePersistence: true,
+  });
+};

package/src/filter-presets/stores/headers/headers.ts

@@ -0,0 +1,24 @@
+import { WtTableHeader } from 'src/components/wt-table/types/WtTable.d.ts';
+
+export const headers: WtTableHeader[] = [
+  {
+    value: 'id',
+    field: 'id',
+    show: true,
+  },
+  {
+    value: 'name',
+    field: 'name',
+    show: true,
+  },
+  {
+    value: 'preset',
+    field: 'preset',
+    show: true,
+  },
+  {
+    value: 'description',
+    field: 'description',
+    show: true,
+  },
+];

package/src/filters/classes/Filter.ts

@@ -0,0 +1,30 @@
+import type {
+  FilterConfig,
+  FilterInitParams,
+  FilterLabel,
+  FilterName,
+  FilterValue,
+  IFilter,
+} from '../types/Filter';
+
+export class Filter implements IFilter {
+  readonly name: FilterName;
+  label: FilterLabel;
+  value: FilterValue;
+
+  constructor(
+    { name, value, label }: FilterInitParams,
+    public payload: object | undefined,
+    public config: FilterConfig,
+  ) {
+    this.name = name;
+    this.value = value;
+    this.label = label;
+  }
+
+  set({ value, label }: { value?: FilterValue; label?: FilterLabel }): IFilter {
+    this.value = value;
+    this.label = label;
+    return this;
+  }
+}

package/src/filters/classes/FilterStorage.ts

@@ -0,0 +1,34 @@
+import { FilterValue } from '../types/Filter';
+import type { FilterStorageOptions } from './FilterStorageOptions';
+
+export class BrowserFilterStorage implements FilterStorageOptions {
+  constructor(private prefix: string) {}
+
+  get(name: string): FilterValue {
+    const value = localStorage.getItem(`filters:${this.prefix}:${name}`);
+    return value ? JSON.parse(value) : undefined;
+  }
+
+  set(name: string, value: FilterValue): void {
+    localStorage.setItem(
+      `filters:${this.prefix}:${name}`,
+      JSON.stringify(value),
+    );
+  }
+}
+
+export class QueryFilterStorage implements FilterStorageOptions {
+  constructor(private prefix: string) {}
+
+  get(name: string): FilterValue {
+    const url = new URL(window.location.href);
+    const value = url.searchParams.get(`${this.prefix}:${name}`);
+    return value ? JSON.parse(value) : undefined;
+  }
+
+  set(name: string, value: FilterValue): void {
+    const url = new URL(window.location.href);
+    url.searchParams.set(`${this.prefix}:${name}`, JSON.stringify(value));
+    window.history.pushState({}, '', url.toString());
+  }
+}

package/src/filters/classes/FilterStorageOptions.d.ts

@@ -0,0 +1,6 @@
+import { FilterValue } from '../types/Filter';
+
+export interface FilterStorageOptions {
+  get: (name: string) => FilterValue;
+  set: (name: string, value: FilterValue) => void;
+}

package/src/filters/classes/FiltersManager.ts

@@ -0,0 +1,190 @@
+import { isEmpty } from '@webitel/ui-sdk/src/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/filters/components/config/dynamic-filter-config-form-label.vue

@@ -0,0 +1,49 @@
+<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 WtInput from '@webitel/ui-sdk/src/components/wt-input/wt-input.vue';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+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>