@webitel/ui-datalist 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "lint:fix": "eslint --fix ./src && prettier --write --check ./src",

package/src/filters/classes/FiltersManager.ts

@@ -55,7 +55,7 @@ class FiltersManager implements IFiltersManager {
     return filter;
   }
 
-  deleteFilter({ name }: IFilter): IFilter {
+  deleteFilter({ name }: { name: FilterName }): IFilter {
     const filter = this.filters.get(name);
     this.filters.delete(name);
     return filter;

package/src/filters/components/search-bar/dynamic-filter-search.vue

@@ -0,0 +1,123 @@
+<template>
+  <wt-search-bar
+    :placeholder="t('reusable.search')"
+    :search-mode="searchMode"
+    :search-mode-options="searchModeOptions"
+    :value="localSearchValue"
+    @input="localSearchValue = $event"
+    @search="handleSearch"
+    @update:search-mode="updateSearchMode"
+  />
+</template>
+
+<script lang="ts" setup>
+import { WtSearchBar } from '@webitel/ui-sdk/components';
+import {computed, type Ref, ref,watch} from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import {FilterInitParams, FilterName} from "../../types/Filter";
+import {IFiltersManager} from "../../types/FiltersManager";
+import type { DynamicFilterSearchSearchModeOption } from './types/DynamicFilterSearch';
+
+/**
+ * @description
+ * default search name is used when there are no search modes
+ */
+const defaultSearchName = 'search';
+
+const props = defineProps<{
+  filtersManager: IFiltersManager;
+  searchModeOptions?: DynamicFilterSearchSearchModeOption[];
+  isFiltersRestoring?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'filter:add': [FilterInitParams];
+  'filter:update': [FilterInitParams];
+  'filter:delete': [{ name: FilterName }];
+}>();
+
+const { t } = useI18n();
+
+const searchMode: Ref<FilterName> = ref();
+const localSearchValue = ref('');
+
+const hasFilter = (filterName = searchMode.value) => {
+  return props.filtersManager.filters.has(filterName);
+};
+const addFilter = (filterInitParams: FilterInitParams) => {
+  return emit('filter:add', filterInitParams);
+};
+const updateFilter = (filterInitParams: FilterInitParams) => {
+  return emit('filter:update', filterInitParams);
+};
+const deleteFilter = ({ name }: { name: FilterName }) => {
+  return emit('filter:delete', { name });
+};
+
+const hasSearchModes = computed(() => {
+  return props.searchModeOptions && props.searchModeOptions.length > 0;
+});
+
+if (hasSearchModes.value) {
+  searchMode.value = props.searchModeOptions[0].value;
+}
+
+const currentSearchName = computed(() => {
+  if (hasSearchModes.value) {
+    return searchMode.value;
+  }
+
+  return defaultSearchName;
+});
+
+const handleSearch = (value = localSearchValue.value) => {
+  if (hasFilter(currentSearchName.value)) {
+    updateFilter({
+      name: currentSearchName.value,
+      value,
+    });
+  } else {
+    addFilter({
+      name: currentSearchName.value,
+      value,
+    });
+  }
+};
+
+const updateSearchMode = (nextSearchMode: DynamicFilterSearchSearchModeOption) => {
+  if (hasFilter(currentSearchName.value)) {
+    deleteFilter({
+      name: currentSearchName.value,
+    });
+  }
+  searchMode.value = nextSearchMode.value;
+  localSearchValue.value = '';
+};
+
+/**
+ * @description
+ * Restoring search value after filters were restored
+ */
+watch(() => props.isFiltersRestoring,
+  (next) => {
+    if (next) return;
+
+    let searchModes = [defaultSearchName];
+    if (hasSearchModes.value) {
+      searchModes = props.searchModeOptions?.map((option) => option.value);
+    }
+
+    for (const mode of searchModes) {
+      if (hasFilter(mode)) {
+        searchMode.value = mode;
+        localSearchValue.value = props.filtersManager.filters.get(mode).value;
+
+        break;
+      }
+    }
+  },
+);
+</script>
+
+<style scoped></style>

package/src/filters/components/search-bar/types/DynamicFilterSearch.d.ts

@@ -0,0 +1,5 @@
+import { WtSearchBarSearchModeOption } from '../../../../../../../src/components/wt-search-bar/types/WtSearchBar';
+import { FilterName } from '../../../types/Filter';
+
+export type DynamicFilterSearchSearchModeOption =
+  WtSearchBarSearchModeOption<FilterName>;

package/src/filters/index.ts

@@ -1,6 +1,6 @@
 import { Filter } from './classes/Filter.ts';
 import { createFiltersManager } from './classes/FiltersManager';
-import DynamicFilterSearchComponent from './components/dynamic-filter-search.vue';
+import DynamicFilterSearchComponent from './components/search-bar/dynamic-filter-search.vue';
 import TableFiltersPanelComponent from './components/table-filters-panel.vue';
 import { FilterOption } from './enums/FilterOption';
 import type {

package/src/filters/components/dynamic-filter-search.vue

@@ -1,60 +0,0 @@
-<template>
-  <wt-search-bar
-    :placeholder="t('reusable.search')"
-    :search-mode="props.searchMode"
-    :search-mode-options="searchModeOptions"
-    :value="model"
-    @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 { WtSearchBar } from '@webitel/ui-sdk/components';
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-type ModelValue = string;
-const model = defineModel<ModelValue>();
-
-const props = defineProps<{
-  searchMode: string;
-  searchModeOptions: Record<string, string>;
-  showTextSearchIcon?: boolean;
-}>();
-
-const emit = defineEmits<{
-  'update:search-mode': [string];
-  'handle-search': [string];
-}>();
-
-const { t } = useI18n();
-
-const onSearchModeChange = (value: string) => {
-  emit('update:search-mode', value);
-  model.value = '';
-};
-
-const handleSearch = () => {
-  emit('handle-search', model.value);
-};
-
-const searchModeOptions = computed(() =>
-  Object.values(props.searchModeOptions).map((mode) => {
-    return {
-      value: mode,
-      text: t(`filters.search.${mode}`),
-    };
-  }),
-);
-</script>
-
-<style scoped></style>