@webitel/ui-datalist 1.0.73 → 1.0.75

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.73",
+  "version": "1.0.75",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && ( npm run lint:fix || true) && (npm run build:types || true) && npm run utils:publish",

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

@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import { WtSearchBar } from '@webitel/ui-sdk/components';
-import { computed, type Ref, ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import { FilterInitParams, FilterName } from '../../classes/Filter';
@@ -28,10 +28,13 @@ const props = defineProps<{
    * default search name is used when there are no search modes
    */
   singleSearchName?: string;
+  searchMode?: string;
 }>();
 
 const defaultSearchName = props.singleSearchName || 'search';
 
+const searchMode = defineModel<string>('searchMode');
+
 const emit = defineEmits<{
   'filter:add': [FilterInitParams];
   'filter:update': [FilterInitParams];
@@ -40,7 +43,6 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-const searchMode: Ref<FilterName> = ref();
 const localSearchValue = ref('');
 
 const hasFilter = (filterName = searchMode.value) => {
@@ -56,13 +58,14 @@ const deleteFilter = ({ name }: { name: FilterName }) => {
   return emit('filter:delete', { name });
 };
 
+const restoreLocalSearchValue = (searchMode: string) => {
+  return localSearchValue.value = props.filtersManager.filters.get(searchMode)?.value;
+}
+
 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) {
@@ -109,10 +112,26 @@ const updateSearchMode = (
       name: currentSearchName.value,
     });
   }
-  searchMode.value = nextSearchMode.value;
   localSearchValue.value = '';
+  searchMode.value = nextSearchMode.value;
 };
 
+const initialize = () => {
+  if(hasSearchModes.value) {
+    if(!searchMode.value) {
+      searchMode.value = props.searchModeOptions[0].value;
+    }
+    restoreLocalSearchValue(searchMode.value);
+  }
+}
+/**
+ * @description
+ * Initializing search mode (if there are search modes)
+ * and localSearchValue at teh first load
+ */
+
+initialize();
+
 /**
  * @description
  * Restoring search value after filters were restored
@@ -124,19 +143,19 @@ watch(
 
     let searchModes = [defaultSearchName];
     if (hasSearchModes.value) {
-      searchModes = props.searchModeOptions?.map((option) => option.value);
+      searchMode.value = props.searchModeOptions?.map((option) => option.value)[0] || '';
     }
 
     for (const mode of searchModes) {
       if (hasFilter(mode)) {
         searchMode.value = mode;
-        localSearchValue.value = props.filtersManager.filters.get(mode).value;
-
+        restoreLocalSearchValue(mode);
         break;
       }
     }
   },
 );
+
 </script>
 
 <style scoped></style>

package/src/modules/filters/createTableFiltersStore.ts

@@ -9,7 +9,7 @@ import {
   FiltersManagerConfig,
 } from './classes/FiltersManager';
 
-export const tableFiltersStoreBody = (config?: {
+export const tableFiltersStoreBody = (namespace, config?: {
   filtersManagerConfig: FiltersManagerConfig;
 }) => {
   const filtersManager = reactive(
@@ -19,6 +19,12 @@ export const tableFiltersStoreBody = (config?: {
   /* for watchers in filter components */
   const isRestoring = ref(false);
 
+  const searchMode = ref('');
+
+  const updateSearchMode = (newSearch: string) => {
+    searchMode.value = newSearch;
+  };
+
   /*
    wrapping filtersManager methods to extend their functionality
    if it will be needed in future
@@ -60,12 +66,28 @@ export const tableFiltersStoreBody = (config?: {
       },
     });
 
-    return restoreFilters();
+    const { restore: restoreSearchMode } = usePersistedStorage({
+      name: 'searchMode',
+      value: searchMode,
+      storages: [PersistedStorageType.LocalStorage],
+      storagePath: namespace,
+
+      onStore: async (save, { name }) => {
+        return save({ name, value: searchMode.value });
+      },
+      onRestore: async (restore, name) => {
+        const value = await restore(name);
+        if (value) searchMode.value = value as string;
+      },
+    });
+
+    return Promise.all([restoreFilters(), restoreSearchMode()]);
   };
 
   return {
     filtersManager,
     isRestoring,
+    searchMode,
 
     filtersList,
 
@@ -74,6 +96,8 @@ export const tableFiltersStoreBody = (config?: {
     updateFilter,
     deleteFilter,
 
+    updateSearchMode,
+
     setupPersistence,
   };
 };
@@ -86,7 +110,7 @@ export const createTableFiltersStore = <Entity>(
 ) => {
   const id = `${namespace}/filters`;
   return createDatalistStore({
-    storeBody: tableFiltersStoreBody,
+    storeBody: () => tableFiltersStoreBody(namespace, config),
     config,
     namespace: id,
   });

package/src/modules/table/createTableStore.store.ts

@@ -56,7 +56,7 @@ export const tableStoreBody = <Entity extends { id: string; etag?: string }>(
   } = headersStore;
 
   const filtersStore = useFiltersStore();
-  const { filtersManager, isRestoring: isFiltersRestoring } = makeThisToRefs<
+  const { filtersManager, isRestoring: isFiltersRestoring, searchMode } = makeThisToRefs<
     typeof filtersStore
   >(filtersStore, storeType);
   const {
@@ -65,6 +65,7 @@ export const tableStoreBody = <Entity extends { id: string; etag?: string }>(
     updateFilter,
     deleteFilter,
     setupPersistence: setupFiltersPersistence,
+    updateSearchMode,
   } = filtersStore;
 
   /**
@@ -72,7 +73,7 @@ export const tableStoreBody = <Entity extends { id: string; etag?: string }>(
    * @description
    * This flag is used to check if the store is set up.
    * It is used to prevent multiple setup calls.
-   * 
+   *
    * @link
    * https://webitel.atlassian.net/browse/WTEL-7495
    */
@@ -240,6 +241,7 @@ export const tableStoreBody = <Entity extends { id: string; etag?: string }>(
     shownHeaders,
     fields,
     sort,
+    searchMode,
 
     filtersManager,
     isFiltersRestoring,
@@ -254,6 +256,8 @@ export const tableStoreBody = <Entity extends { id: string; etag?: string }>(
     patchItemProperty,
     deleteEls,
 
+    updateSearchMode,
+
     updatePage,
     updateSize,
 

package/types/modules/filter-presets/stores/createFilterPresetsStore.d.ts

@@ -14,6 +14,7 @@ export declare const filterPresetsStoreBody: (namespace?: string) => {
     shownHeaders: import("vue").ComputedRef<any>;
     fields: import("vue").ComputedRef<any>;
     sort: import("vue").ComputedRef<string>;
+    searchMode: import("vue").Ref<string, string>;
     filtersManager: import("vue").Ref<{
         filters: Map<string, {
             name: import("../../filters").FilterName;
@@ -85,6 +86,7 @@ export declare const filterPresetsStoreBody: (namespace?: string) => {
     updateSelected: (value: EnginePresetQuery[]) => void;
     patchItemProperty: ({ index, path, value, }: import("../../types/tableStore.types").PatchItemPropertyParams) => Promise<void>;
     deleteEls: (_els: EnginePresetQuery[]) => Promise<void>;
+    updateSearchMode: (newSearch: string) => void;
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
     updateSort: (column: any) => void;
@@ -110,6 +112,7 @@ export declare const createFilterPresetsStore: (namespace: string) => () => {
     shownHeaders: import("vue").ComputedRef<any>;
     fields: import("vue").ComputedRef<any>;
     sort: import("vue").ComputedRef<string>;
+    searchMode: import("vue").Ref<string, string>;
     filtersManager: import("vue").Ref<{
         filters: Map<string, {
             name: import("../../filters").FilterName;
@@ -181,6 +184,7 @@ export declare const createFilterPresetsStore: (namespace: string) => () => {
     updateSelected: (value: EnginePresetQuery[]) => void;
     patchItemProperty: ({ index, path, value, }: import("../../types/tableStore.types").PatchItemPropertyParams) => Promise<void>;
     deleteEls: (_els: EnginePresetQuery[]) => Promise<void>;
+    updateSearchMode: (newSearch: string) => void;
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
     updateSort: (column: any) => void;

package/types/modules/filters/components/search-bar/dynamic-filter-search.vue.d.ts

@@ -10,18 +10,24 @@ type __VLS_Props = {
      * default search name is used when there are no search modes
      */
     singleSearchName?: string;
+    searchMode?: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & {
+    'searchMode'?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "filter:add": (args_0: FilterInitParams) => any;
     "filter:update": (args_0: FilterInitParams) => any;
     "filter:delete": (args_0: {
         name: FilterName;
     }) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "update:searchMode": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onFilter:add"?: (args_0: FilterInitParams) => any;
     "onFilter:update"?: (args_0: FilterInitParams) => any;
     "onFilter:delete"?: (args_0: {
         name: FilterName;
     }) => any;
+    "onUpdate:searchMode"?: (value: string) => any;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/types/modules/filters/createTableFiltersStore.d.ts

@@ -1,6 +1,6 @@
 import { useTableStoreConfig } from '../types/tableStore.types';
 import { FiltersManagerConfig } from './classes/FiltersManager';
-export declare const tableFiltersStoreBody: (config?: {
+export declare const tableFiltersStoreBody: (namespace: any, config?: {
     filtersManagerConfig: FiltersManagerConfig;
 }) => {
     filtersManager: {
@@ -35,12 +35,14 @@ export declare const tableFiltersStoreBody: (config?: {
         }) => import(".").IFilter[];
     };
     isRestoring: import("vue").Ref<boolean, boolean>;
+    searchMode: import("vue").Ref<string, string>;
     filtersList: import("vue").ComputedRef<import(".").IFilter[]>;
     hasFilter: any;
     addFilter: any;
     updateFilter: any;
     deleteFilter: any;
-    setupPersistence: () => Promise<void>;
+    updateSearchMode: (newSearch: string) => void;
+    setupPersistence: () => Promise<[void, void]>;
 };
 export declare const createTableFiltersStore: <Entity>(namespace: string, config: useTableStoreConfig<Entity> & {
     filtersManagerConfig?: FiltersManagerConfig;
@@ -77,10 +79,12 @@ export declare const createTableFiltersStore: <Entity>(namespace: string, config
         }) => import(".").IFilter[];
     };
     isRestoring: import("vue").Ref<boolean, boolean>;
+    searchMode: import("vue").Ref<string, string>;
     filtersList: import("vue").ComputedRef<import(".").IFilter[]>;
     hasFilter: any;
     addFilter: any;
     updateFilter: any;
     deleteFilter: any;
-    setupPersistence: () => Promise<void>;
+    updateSearchMode: (newSearch: string) => void;
+    setupPersistence: () => Promise<[void, void]>;
 }>;

package/types/modules/table/createTableStore.store.d.ts

@@ -16,6 +16,7 @@ export declare const tableStoreBody: <Entity extends {
     shownHeaders: import("vue").ComputedRef<any>;
     fields: import("vue").ComputedRef<any>;
     sort: import("vue").ComputedRef<string>;
+    searchMode: Ref<string, string>;
     filtersManager: Ref<{
         filters: Map<string, {
             name: import("../filters").FilterName;
@@ -87,6 +88,7 @@ export declare const tableStoreBody: <Entity extends {
     updateSelected: (value: Entity[]) => void;
     patchItemProperty: ({ index, path, value, }: PatchItemPropertyParams) => Promise<void>;
     deleteEls: (_els: Entity[]) => Promise<void>;
+    updateSearchMode: (newSearch: string) => void;
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
     updateSort: (column: any) => void;
@@ -112,6 +114,7 @@ export declare const createTableStore: <Entity extends {
     shownHeaders: import("vue").ComputedRef<any>;
     fields: import("vue").ComputedRef<any>;
     sort: import("vue").ComputedRef<string>;
+    searchMode: Ref<string, string>;
     filtersManager: Ref<{
         filters: Map<string, {
             name: import("../filters").FilterName;
@@ -183,6 +186,7 @@ export declare const createTableStore: <Entity extends {
     updateSelected: (value: Entity[]) => void;
     patchItemProperty: ({ index, path, value, }: PatchItemPropertyParams) => Promise<void>;
     deleteEls: (_els: Entity[]) => Promise<void>;
+    updateSearchMode: (newSearch: string) => void;
     updatePage: (newPage: number) => void;
     updateSize: (newSize: number) => void;
     updateSort: (column: any) => void;