@webitel/ui-datalist 1.0.0 → 1.0.2

package/Readme.md

@@ -0,0 +1,19 @@
+# @webitel/ui-datalist
+
+This package contains necessary tools for building datalists in Webitel frontend projects.
+
+This package contains:
+
+* table tools (store, components, etc)
+* table filters (store, components, etc)
+
+## Versions
+
+### 1.0.x
+
+#### Contents:
+
+* separate table, pagination, headers, filters pinia stores
+* filtersManager, filter components
+* vue-based persistence tools for this storages data
+* TS types for all the above

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "lint:fix": "eslint --fix ./src && prettier --write --check ./src",
@@ -27,6 +27,8 @@
     }
   },
   "files": [
+    "src/*",
+    "Readme.md",
     "CHANGELOG.md"
   ],
   "peerDependencies": {

package/src/filter-presets/api/PresetQuery.api.ts

@@ -0,0 +1,122 @@
+import {
+  getDefaultGetListResponse,
+  getDefaultGetParams,
+  getDefaultInstance,
+  getDefaultOpenAPIConfig,
+} from '@webitel/ui-sdk/src/api/defaults/index';
+import applyTransform, {
+  camelToSnake,
+  merge,
+  notify,
+  skipIf,
+  snakeToCamel,
+  starToSearch,
+} from '@webitel/ui-sdk/src/api/transformers/index';
+import {
+  EngineCreatePresetQueryRequest,
+  EnginePresetQuery,
+  PresetQueryServiceApiFactory,
+} from 'webitel-sdk';
+
+const instance = getDefaultInstance();
+const configuration = getDefaultOpenAPIConfig();
+
+const service = PresetQueryServiceApiFactory(configuration, '', instance);
+
+type GetPresetListRequestConfig = {
+  transformers: {
+    useStarToSearch?: boolean;
+  };
+};
+
+const getPresetList = async (params, config: GetPresetListRequestConfig) => {
+  const useStarToSearch = config?.transformers?.useStarToSearch ?? true;
+
+  const { page, size, search, sort, fields, presetNamespace, id } =
+    applyTransform(params, [
+      merge(getDefaultGetParams()),
+      (params) => (useStarToSearch ? starToSearch('search')(params) : params),
+    ]);
+
+  try {
+    const response = await service.searchPresetQuery(
+      page,
+      size,
+      search,
+      sort || '-created_at',
+      fields || ['id', 'name', 'preset', 'description'],
+      id,
+    );
+    const { items, next } = applyTransform(response.data, [
+      snakeToCamel(),
+      merge(getDefaultGetListResponse()),
+    ]);
+    return {
+      items: applyTransform(items, [
+        (items) =>
+          items.filter(({ preset }) => preset.namespace === presetNamespace),
+      ]),
+      next,
+    };
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const addPreset = async ({
+  preset,
+  namespace,
+}: {
+  preset: EngineCreatePresetQueryRequest;
+  namespace: string;
+}): Promise<EnginePresetQuery> => {
+  const item = applyTransform(preset, [
+    camelToSnake(),
+    (item) => {
+      item.preset.namespace = namespace;
+      return item;
+    },
+  ]);
+  try {
+    const response = await service.createPresetQuery(item);
+    return applyTransform(response.data, [snakeToCamel()]);
+  } catch (err) {
+    throw applyTransform(err, [skipIf(notify, (err) => err.status === 409)]);
+  }
+};
+
+const updatePreset = async ({ item: itemInstance, id, namespace }) => {
+  const item = applyTransform(itemInstance, [
+    camelToSnake(),
+    (item) => {
+      item.preset.namespace = namespace;
+      return item;
+    },
+  ]);
+  try {
+    const response = await service.updatePresetQuery(id, item);
+    return applyTransform(response.data, [snakeToCamel()]);
+  } catch (err) {
+    throw applyTransform(err, [skipIf(notify, (err) => err.status === 409)]);
+  }
+};
+
+const deletePreset = async ({ id }) => {
+  try {
+    const response = await service.deletePresetQuery(id);
+    return applyTransform(response.data, []);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const PresetQueryAPI = {
+  getList: getPresetList,
+  add: addPreset,
+  update: updatePreset,
+  delete: deletePreset,
+};
+
+export { addPreset, deletePreset, getPresetList, updatePreset };
+
+export default PresetQueryAPI;

package/src/filter-presets/components/_shared/input-fields/preset-description-field.vue

@@ -0,0 +1,32 @@
+<template>
+  <div v-if="props.previewMode && model">
+    <wt-label>
+      {{ t('vocabulary.description') }}
+    </wt-label>
+    <p>
+      {{ model }}
+    </p>
+  </div>
+
+  <wt-textarea
+    v-if="!props.previewMode"
+    :value="model"
+    :label="t('vocabulary.description')"
+    @input="model = $event"
+  />
+</template>
+
+<script setup lang="ts">
+import { WtLabel, WtTextarea } from '@webitel/ui-sdk/src/components/index';
+import { useI18n } from 'vue-i18n';
+
+const model = defineModel<string>();
+
+const props = defineProps<{
+  previewMode?: boolean;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<style scoped lang="scss"></style>

package/src/filter-presets/components/_shared/input-fields/preset-name-field.vue

@@ -0,0 +1,28 @@
+<template>
+  <wt-input
+    v-model="model"
+    :v="props.v"
+    :label="t('reusable.name')"
+    required
+  />
+</template>
+
+<script setup lang="ts">
+import { Validation } from '@vuelidate/core';
+import { WtInput } from '@webitel/ui-sdk/src/components/index';
+import { useI18n } from 'vue-i18n';
+
+type ModelValue = string;
+
+const model = defineModel<ModelValue>();
+
+type Props = {
+  v: Validation;
+};
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+</script>
+
+<style scoped lang="scss"></style>

package/src/filter-presets/components/_shared/preset-filters-preview.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="save-preset-filters-preview">
+    <wt-label>
+      {{ t('webitelUI.filters.filterName') }}
+    </wt-label>
+    <dynamic-filter-panel-wrapper size="sm">
+      <template #filters>
+        <dynamic-filter-preview
+          v-for="filter of props.filters"
+          :key="filter.name"
+          :filter="filter"
+          dummy
+        >
+          <template #info>
+            <component
+              :is="FilterOptionToPreviewComponentMap[filter.name]"
+              :value="filter.value"
+            >
+            </component>
+          </template>
+        </dynamic-filter-preview>
+      </template>
+    </dynamic-filter-panel-wrapper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { WtLabel } from '@webitel/ui-sdk/src/components/index';
+import { useI18n } from 'vue-i18n';
+
+import type { IFilter } from '../../../filters';
+import DynamicFilterPanelWrapper from '../../../filters/components/dynamic-filter-panel-wrapper.vue';
+import { FilterOptionToPreviewComponentMap } from '../../../filters/components/filter-options';
+import DynamicFilterPreview from '../../../filters/components/preview/dynamic-filter-preview.vue';
+
+type Props = {
+  filters: IFilter[];
+};
+
+const props = defineProps<Props>();
+
+const { t } = useI18n();
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -0,0 +1,234 @@
+<template>
+  <div class="apply-preset-action">
+    <wt-icon-action
+      :action="IconAction.APPLY_PRESET"
+      @click="showPresetsList = true"
+    />
+    <wt-popup
+      :shown="showPresetsList"
+      size="md"
+      @close="showPresetsList = false"
+    >
+      <template #title>
+        {{
+          `${t('vocabulary.apply')} ${t('webitelUI.filters.presets.preset').toLowerCase()}`
+        }}
+      </template>
+
+      <template #main>
+        <section class="apply-preset-main-content">
+          <wt-search-bar
+            :value="search"
+            @search="search = $event"
+          />
+
+          <wt-empty
+            v-show="showEmpty"
+            :image="imageEmpty"
+            :text="textEmpty"
+          />
+
+          <section class="available-presets-list">
+            <preset-preview
+              v-for="preset of dataList"
+              :key="preset.id"
+              collapsed
+              :is-selected="preset === selectedPreset"
+              :preset="preset"
+              @preset:select="selectedPreset = preset"
+              @preset:update="updatePreset"
+              @preset:delete="() => deletePreset(preset)"
+            />
+          </section>
+          <!--            TODO: infinite scroll -->
+          <!--          <wt-intersection-observer-->
+          <!--            :loading="isLoading"-->
+          <!--            :next="false"-->
+          <!--            @next="updatePage(page + 1)"-->
+          <!--          />-->
+        </section>
+      </template>
+
+      <template #actions>
+        <wt-button
+          :disabled="!selectedPreset"
+          @click="applySelectedPreset"
+        >
+          {{ t('vocabulary.apply') }}
+        </wt-button>
+        <wt-button
+          color="secondary"
+          @click="showPresetsList = false"
+        >
+          {{ t('reusable.cancel') }}
+        </wt-button>
+      </template>
+    </wt-popup>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  WtButton,
+  WtEmpty,
+  WtIconAction,
+  WtPopup,
+  WtSearchBar,
+} from '@webitel/ui-sdk/src/components/index';
+import { IconAction } from '@webitel/ui-sdk/src/enums';
+import { useTableEmpty } from '@webitel/ui-sdk/src/TableComponentModule/composables/useTableEmpty';
+import { type StoreDefinition, storeToRefs } from 'pinia';
+import { computed, inject, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { EnginePresetQuery } from 'webitel-sdk';
+
+import PresetQueryAPI from '../../api/PresetQuery.api.ts';
+import PresetPreview from './preset-preview.vue';
+
+const props = defineProps<{
+  /**
+   * presets "section" namespace
+   */
+  namespace: string;
+  usePresetsStore: StoreDefinition;
+}>();
+
+const emit = defineEmits<{
+  apply: [string];
+}>();
+
+const eventBus = inject('$eventBus');
+
+const { t } = useI18n();
+
+const showPresetsList = ref(false);
+
+const presetsStore = props.usePresetsStore();
+const { dataList, error, isLoading, filtersManager } =
+  storeToRefs(presetsStore);
+
+const { loadDataList, initialize, updateSize, deleteEls } = presetsStore;
+
+updateSize(1000);
+filtersManager.value.addFilter({
+  name: 'presetNamespace',
+  value: props.namespace,
+});
+
+const search = computed({
+  get: () => {
+    return filtersManager.value.getFilter('search')?.value || '';
+  },
+  set: (value) => {
+    filtersManager.value.addFilter({ name: 'search', value });
+  },
+});
+
+const {
+  showEmpty,
+  image: imageEmpty,
+  text: textEmpty,
+} = useTableEmpty({
+  dataList,
+  isLoading,
+  error,
+  filters: computed(() => {
+    return {
+      search: search.value,
+    };
+  }),
+});
+
+watch(
+  showPresetsList,
+  () => {
+    initialize();
+
+    watch(showPresetsList, (value) => {
+      if (value) {
+        search.value = '';
+        /* search.value reset causes re-fetch as filter change, so
+      loadDataList() is commented.
+      TODO: implement ability to set filters "silently" and refactor this code */
+        // loadDataList();
+      }
+    });
+  },
+  { once: true },
+);
+
+const selectedPreset = ref();
+
+const applySelectedPreset = () => {
+  const filtersSnapshot =
+    selectedPreset.value.preset['filtersManager.toString'];
+  emit('apply', filtersSnapshot);
+
+  selectedPreset.value = null;
+  showPresetsList.value = false;
+};
+
+const updatePreset = async ({ preset, onSuccess, onFailure }) => {
+  try {
+    await PresetQueryAPI.update({
+      item: { ...preset },
+      id: preset.id,
+      namespace: preset.namespace,
+    });
+    eventBus.$emit('notification', {
+      type: 'success',
+      text: t('systemNotifications.success.update', {
+        entity: t('webitelUI.filters.presets.preset'),
+      }),
+    });
+    onSuccess();
+    return loadDataList();
+  } catch (err) {
+    onFailure(err);
+    throw err;
+  }
+};
+
+const deletePreset = async (preset: EnginePresetQuery) => {
+  await deleteEls([preset]);
+  eventBus.$emit('notification', {
+    type: 'success',
+    text: t('systemNotifications.success.delete', {
+      entity: t('webitelUI.filters.presets.preset'),
+    }),
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+@use '@webitel/styleguide/scroll' as *;
+
+.apply-preset-action .wt-popup {
+  :deep(.wt-popup__popup) {
+    height: 480px;
+  }
+}
+
+.apply-preset-main-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  height: 100%;
+
+  .wt-empty {
+    flex-grow: 1;
+    max-width: 100%;
+  }
+}
+
+.available-presets-list {
+  @extend %wt-scrollbar;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  max-height: 400px;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+}
+</style>

package/src/filter-presets/components/apply-preset/preset-preview.vue

@@ -0,0 +1,210 @@
+<template>
+  <article class="preset-preview">
+    <wt-expansion-panel
+      :collapsed="collapsed"
+      @closed="clearEdit"
+    >
+      <template #title>
+        <header class="preset-preview-title-wrapper">
+          <!--
+                    this <div> is used only for @click.stop to be set, so that expansion panel toggle won't trigger.
+                    it would be great to use @click.stop to wt-ratio,
+                    but with @vue/compat build and direct input it won't be working like that :(
+        -->
+          <div @click.stop>
+            <wt-radio
+              :selected="isSelected"
+              :value="true"
+              @input="emit('preset:select', preset)"
+            />
+          </div>
+          <p
+            :title="preset.name"
+            class="preset-preview-name"
+          >
+            {{ preset.name }}
+          </p>
+        </header>
+      </template>
+      <template #actions="{ open }">
+        <wt-icon-action
+          v-if="!editMode"
+          action="edit"
+          @click.stop="startEdit({ open })"
+        />
+
+        <wt-icon-action
+          v-if="editMode"
+          action="delete"
+          @click.stop="emit('preset:delete', preset)"
+        />
+
+        <wt-icon-action
+          v-if="editMode"
+          :disabled="v$.$invalid"
+          action="save"
+          @click.stop="submitEdit"
+        />
+
+        <wt-icon-action
+          v-if="editMode"
+          action="cancel"
+          @click.stop="clearEdit"
+        />
+      </template>
+      <template #default>
+        <div class="preset-preview-content">
+          <preset-name-field
+            v-if="editMode"
+            v-model:model-value="editDraft.name"
+            :v="v$.name"
+            @update:model-value="nameAlreadyExistsError = false"
+          />
+
+          <preset-filters-preview :filters="presetFilters" />
+
+          <preset-description-field
+            v-model:model-value="editDraft.description"
+            :preview-mode="!editMode"
+          />
+        </div>
+      </template>
+    </wt-expansion-panel>
+  </article>
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import {
+  WtExpansionPanel,
+  WtIconAction,
+  WtRadio,
+} from '@webitel/ui-sdk/src/components/index';
+import { createFiltersManager } from '@webitel/ui-sdk/src/filters/index';
+import { AxiosError } from 'axios';
+import { computed, ref } from 'vue';
+import { EnginePresetQuery } from 'webitel-sdk';
+
+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';
+
+type Props = {
+  preset: EnginePresetQuery;
+  isSelected: boolean;
+  collapsed: boolean;
+};
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<{
+  'preset:select': [EnginePresetQuery];
+  'preset:update': [
+    {
+      preset: EnginePresetQuery;
+      onSuccess: () => void;
+      onFailure: (err: AxiosError) => void;
+    },
+  ];
+  'preset:delete': [EnginePresetQuery];
+}>();
+
+const presetFilters = computed(() => {
+  const snapshot = props.preset?.preset?.['filtersManager.toString'];
+  if (!snapshot) return [];
+
+  const filtersManager = createFiltersManager();
+  filtersManager.fromString(snapshot);
+
+  return filtersManager.getFiltersList();
+});
+
+const editMode = ref(false);
+
+/**
+ *  updating request in progress flag
+ *  */
+const editing = ref(false);
+
+const nameAlreadyExistsError = ref(false);
+
+const editDraft = ref({
+  name: '',
+  description: '',
+});
+
+const fillDraft = () => {
+  editDraft.value = {
+    name: props.preset.name,
+    description: props.preset.description,
+  };
+};
+
+fillDraft();
+
+const v$ = useVuelidate(
+  computed(() => {
+    return {
+      name: {
+        required,
+        nameAlreadyInUse: () => !nameAlreadyExistsError.value,
+      },
+    };
+  }),
+  editDraft,
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+const startEdit = ({ open: openExpansion }) => {
+  openExpansion();
+  editMode.value = true;
+};
+
+const clearEdit = () => {
+  editing.value = false;
+  editMode.value = false;
+};
+
+const submitEdit = () => {
+  const preset: EnginePresetQuery = {
+    ...props.preset,
+    ...editDraft.value,
+  };
+  const onFailure = (err: AxiosError) => {
+    if (err.status === 409) {
+      nameAlreadyExistsError.value = true;
+    }
+    editing.value = false;
+  };
+
+  emit('preset:update', {
+    preset,
+    onSuccess: clearEdit,
+    onFailure,
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.preset-preview-title-wrapper {
+  display: flex;
+  gap: var(--spacing-xs);
+  min-width: 0;
+}
+
+.preset-preview-name {
+  flex: 1 1 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.preset-preview-content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs);
+}
+</style>