@webitel/ui-sdk 24.6.0 → 24.6.2

package/src/modules/TableStoreModule/store/TableStoreModule.js

@@ -1,48 +1,39 @@
+import set from 'lodash/set';
 import {
   queryToSortAdapter,
-  SortSymbols,
   sortToQueryAdapter,
 } from '../../../scripts/sortQueryAdapters';
 import BaseStoreModule from '../../../store/BaseStoreModules/BaseStoreModule';
+import FilterEvent from '../../Filters/enums/FilterEvent.enum';
 
 export default class TableStoreModule extends BaseStoreModule {
   state = {
     headers: [],
     dataList: [],
+    selected: [],
     error: {},
     isLoading: false,
     isNextPage: false,
   };
 
   getters = {
-    PARENT_ID: () => null,
+    PARENT_ID: () => null, // override me
 
-    GET_FILTERS: (state, getters) => getters['filters/GET_FILTERS'],
+    // FIXME: maybe move to filters module?
+    FILTERS: (state, getters) => getters['filters/GET_FILTERS'],
 
-    // required fields to send as "fields" param with GET_LIST
-    REQUIRED_FIELDS: () => ['id'],
+    FIELDS: (state) => {
+      const fields = state.headers.reduce((fields, { show, field }) => {
+        if (show) return [...fields, field];
+        return fields;
+      }, []);
 
-    FIELDS: (state, getters) => {
-      const filtersFields = getters.GET_FILTERS.filters;
-
-      const defaultFields = state.headers.filter((header) => header.show)
-      .map((header) => header.field);
-
-      const getFieldsByFieldValues = (values) => {
-        values.map((passedValue) => state.headers.find(({ value }) => passedValue
-          === value).field);
-      };
-
-      return [
-        ...new Set(filtersFields
-          ? getFieldsByFieldValues(filtersFields)
-          : defaultFields),
-      ].concat(getters.REQUIRED_FIELDS);
+      return [...new Set(['id', ...fields])];
     },
 
     // main GET_LIST params collector
-    GET_LIST_PARAMS: (state, getters) => (overrideFilters) => {
-      const filters = getters.GET_FILTERS;
+    GET_LIST_PARAMS: (state, getters) => (overrides) => {
+      const filters = getters.FILTERS;
       const fields = getters.FIELDS;
       const parentId = getters.PARENT_ID;
 
@@ -50,96 +41,126 @@ export default class TableStoreModule extends BaseStoreModule {
         parentId,
         ...filters,
         fields,
-        ...overrideFilters,
+        ...overrides,
       };
     },
   };
 
   actions = {
+    // FIXME: maybe move to filters module?
+    SET_FILTER: (
+      context,
+      payload,
+    ) => context.dispatch('filters/SET_FILTER', payload),
+
+    // FIXME: maybe move to filters module?
+    ON_FILTER_EVENT: async (context, { event, payload }) => {
+      switch (event) {
+        case FilterEvent.RESTORED:
+          return context.dispatch('HANDLE_FILTERS_RESTORE', payload);
+        case FilterEvent.FILTER_SET:
+          return context.dispatch('HANDLE_FILTER_SET', payload);
+        default:
+          throw new Error(`Unknown filter event: ${event}`);
+      }
+    },
+
+    // FIXME: maybe move to filters module?
+    HANDLE_FILTERS_RESTORE: (context) => {
+      return context.dispatch('LOAD_DATA_LIST');
+    },
+
+    // FIXME: maybe move to filters module?
+    HANDLE_FILTER_SET: async (context, payload) => {
+      if (payload.name === 'fields') {
+        await context.dispatch('HANDLE_FIELDS_CHANGE', payload);
+      } else if (payload.name === 'sort') {
+        await context.dispatch('HANDLE_SORT_CHANGE', payload);
+      }
+
+      if (context.getters.FILTERS.page && payload.value !== 'page') {
+        await context.dispatch('SET_FILTER', {
+          name: 'page',
+          value: 1,
+          silent: true,
+        });
+      }
+
+      return context.dispatch('LOAD_DATA_LIST');
+    },
+
+    // FIXME: maybe move to filters module?
+    HANDLE_FIELDS_CHANGE: (context, payload) => {
+      const headers = context.state.headers.map((header) => ({
+        ...header,
+        show: payload.value.includes(header.value),
+      }));
+
+      context.commit('SET', { path: 'headers', value: headers });
+    },
+
+    // FIXME: maybe move to filters module?
+    HANDLE_SORT_CHANGE: (context, payload) => {
+      const nextSort = queryToSortAdapter(payload.value.slice(0, 1));
+      const field = nextSort ? payload.value.slice(1) : payload.value;
+
+      const headers = context.state.headers.map(({
+                                                   sort: currentSort,
+                                                   ...header
+                                                 }) => {
+        const sort = field === header.field ? nextSort : currentSort;
+        return { ...header, sort };
+      });
+
+      context.commit('SET', { path: 'headers', value: headers });
+    },
+
     LOAD_DATA_LIST: async (context, query) => {
-      /*
-  https://my.webitel.com/browse/WTEL-3560
-  preventively disable isNext to handle case when user is clicking
-   "next" faster than actual request is made
- */
-      context.commit('SET_IS_NEXT', false);
+      context.commit('SET', { path: 'isLoading', value: true });
+      context.commit('SET', { path: 'isNextPage', value: false }); // [WTEL-3560]
 
       const params = context.getters.GET_LIST_PARAMS(query);
       try {
-        context.commit('SET_LOADING', true);
         let {
           items = [],
           next = false,
         } = await context.dispatch('api/GET_LIST', { context, params });
 
-        /* [https://my.webitel.com/browse/WTEL-3793]
-        * When deleting the last item from list,
-        * if there are other items on the previous page, you need to go back */
-        if (!items.length && params.page > 1) {
-          return context.dispatch('filters/SET_FILTER', {
-            filter: 'page',
-            value: params.page - 1,
-          });
-        }
-
-        /* we should set _isSelected property to all items in tables cause their checkbox selection
-        * is based on this property. Previously, this prop was set it api consumers, but now
-        * admin-specific were replaced by webitel-sdk consumers and i supposed it will be
-        * weird to set this property in each api file through defaultListObject */
-        items = items.map((item) => ({ ...item, _isSelected: false }));
-        context.commit('SET_DATA_LIST', items);
-        context.commit('SET_IS_NEXT', next);
+        context.commit('SET', { path: 'dataList', value: items });
+        context.commit('SET', { path: 'isNextPage', value: next });
       } catch (err) {
-        context.commit('SET_ERROR', err);
+        context.commit('SET', { path: 'error', value: err });
+        throw err;
       } finally {
-        context.commit('SET_LOADING', false);
+        context.commit('SET', { path: 'isLoading', value: false });
       }
     },
-    SET_HEADERS: (context, headers) => context.commit('SET_HEADERS', headers),
-    RESTORE_FIELDS_FROM_FILTER: (context, { value }) => {
-      const headers = context.state.headers.map((header) => ({
-        ...header,
-        show: value.includes(header.value),
-      }));
-      return context.dispatch('SET_HEADERS', headers);
-    },
-    SORT: async (context, { header, nextSortOrder }) => {
+
+    // FIXME: maybe move to filters module?
+    SORT: (context, { header, nextSortOrder }) => {
       const sort = nextSortOrder
         ? `${sortToQueryAdapter(nextSortOrder)}${header.field}`
         : nextSortOrder;
-      await context.dispatch('filters/SET_FILTER', {
-        filter: 'sort',
+      return context.dispatch('SET_FILTER', {
+        name: 'sort',
         value: sort,
       });
-      await context.dispatch('UPDATE_HEADER_SORT', { header, nextSortOrder });
-    },
-    RESTORE_SORT_FROM_FILTER: (context, { value }) => {
-      const sort = queryToSortAdapter(value.slice(0, 1));
-      const field = sort ? value.slice(1) : value;
-      return context.dispatch('UPDATE_HEADER_SORT', {
-        header: { field },
-        nextSortOrder: sort,
-      });
-    },
-    UPDATE_HEADER_SORT: (context, { header, nextSortOrder }) => {
-      const headers = context.state.headers.map((oldHeader) => {
-        const sortFieldValue = oldHeader?.sort;
-        return {
-          ...oldHeader,
-          sort: oldHeader.field === header.field
-            ? nextSortOrder
-            : sortFieldValue,
-        };
-      });
-      context.commit('SET_HEADERS', headers);
     },
+
     PATCH_ITEM_PROPERTY: async (context, {
-      item, index, prop, value,
+      item: _item, index, prop, value,
     }) => {
-      await context.commit('PATCH_ITEM_PROPERTY', { index, prop, value });
-      const id = item?.id || context.state.dataList[index].id;
-      const { etag } = item;
+      const item = _item || context.state.dataList[index];
+
+      const { id, etag } = item;
+
+      context.commit('SET', {
+        path: `dataList[${index}].${prop}`,
+        value,
+      });
+
       const changes = { [prop]: value };
+
       try {
         await context.dispatch('api/PATCH_ITEM', {
           context,
@@ -147,14 +168,12 @@ export default class TableStoreModule extends BaseStoreModule {
           etag,
           changes,
         });
-        context.commit('PATCH_ITEM_PROPERTY', {
-          item, index, prop, value,
-        });
       } catch (err) {
         await context.dispatch('LOAD_DATA_LIST');
         throw err;
       }
     },
+
     DELETE: async (context, deleted) => {
       let action = 'DELETE_SINGLE';
       if (Array.isArray(deleted)) {
@@ -167,8 +186,17 @@ export default class TableStoreModule extends BaseStoreModule {
         throw err;
       } finally {
         await context.dispatch('LOAD_DATA_LIST');
+
+        /* if no items on current page after DELETE, move to prev page [WTEL-3793] */
+        if (!context.items.length && context.getters.FILTERS.page > 1) {
+          await context.dispatch('SET_FILTER', {
+            name: 'page',
+            value: context.getters.FILTERS.page - 1,
+          });
+        }
       }
     },
+
     DELETE_SINGLE: async (context, { id, etag }) => {
       try {
         await context.dispatch('api/DELETE_ITEM', { context, id, etag });
@@ -176,30 +204,20 @@ export default class TableStoreModule extends BaseStoreModule {
         throw err;
       }
     },
+
     DELETE_BULK: async (
       context,
       deleted,
     ) => Promise.allSettled(deleted.map((item) => context.dispatch('DELETE_SINGLE', item))),
+
+    SET_SELECTED: (context, selected) => {
+      context.commit('SET', { path: 'selected', value: selected });
+    },
   };
 
   mutations = {
-    SET_DATA_LIST: (state, items) => {
-      state.dataList = items;
-    },
-    SET_IS_NEXT: (state, next) => {
-      state.isNextPage = next;
-    },
-    SET_HEADERS: (state, headers) => {
-      state.headers = headers;
-    },
-    PATCH_ITEM_PROPERTY: (state, { index, prop, value }) => {
-      state.dataList[index][prop] = value;
-    },
-    SET_LOADING: (state, value) => {
-      state.isLoading = value;
-    },
-    SET_ERROR: (state, value) => {
-      state.error = value;
+    SET: (state, { path, value }) => {
+      return set(state, path, value);
     },
   };
 

package/src/modules/TableStoreModule/store/__tests__/TableStoreModule.spec.js

@@ -0,0 +1,241 @@
+import { createStore } from 'vuex';
+import { SortSymbols } from '../../../../scripts/sortQueryAdapters';
+import FilterEvent from '../../../Filters/enums/FilterEvent.enum';
+import FiltersStoreModule from '../../../Filters/store/FiltersStoreModule';
+import TableStoreModule from '../TableStoreModule';
+
+describe('TableStoreModule', () => {
+  it('correctly computes FIELDS getter', () => {
+    const headers = [
+      { show: true, field: 'id' },
+      { show: false, field: 'name' },
+      { show: true, field: 'age' },
+    ];
+
+    const state = { headers };
+
+    expect(new TableStoreModule({}).getters.FIELDS(state))
+    .toEqual(['id', 'age']);
+  });
+});
+
+describe('TableStoreModule integration with FiltersStoreModule', () => {
+  it('filters restore event triggers LOAD_DATA_LIST', async () => {
+    const filters = new FiltersStoreModule()
+    .addFilter({
+      name: 'vi',
+      value: 23,
+      defaultValue: 23,
+      get: ['value'],
+      set: ['value'],
+      restore: () => 'vivi',
+    })
+    .getModule();
+
+    const table = new TableStoreModule({})
+    .getModule({
+      modules: { filters },
+    });
+
+    const mock = vi.fn();
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
+    .mockImplementationOnce(mock);
+
+    const store = createStore({
+      modules: { table },
+    });
+
+    await store.dispatch('table/filters/SUBSCRIBE', {
+      event: FilterEvent.RESTORED,
+      callback: (payload) => store.dispatch('table/ON_FILTER_EVENT', payload),
+    });
+
+    await store.dispatch('table/filters/RESTORE_FILTERS');
+
+    expect(mock).toHaveBeenCalledTimes(1);
+
+    await store.dispatch('table/filters/FLUSH_SUBSCRIBERS');
+  });
+
+  it('FILTER_SET event triggers LOAD_DATA_LIST', async () => {
+    const filters = new FiltersStoreModule()
+    .addFilter({
+      name: 'vi',
+      value: 23,
+      defaultValue: 23,
+      get: ['value'],
+      set: ['value'],
+      restore: () => {},
+    })
+    .getModule();
+
+    const table = new TableStoreModule({})
+    .getModule({
+      modules: { filters },
+    });
+
+    const mock = vi.fn();
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
+    .mockImplementationOnce(mock);
+
+    const store = createStore({
+      modules: { table },
+    });
+
+    await store.dispatch('table/filters/SUBSCRIBE', {
+      event: FilterEvent.FILTER_SET,
+      callback: (payload) => store.dispatch('table/ON_FILTER_EVENT', payload),
+    });
+
+    await store.dispatch('table/filters/SET_FILTER', {
+      name: 'vi',
+      value: 24,
+    });
+
+    expect(store.getters['table/filters/GET_FILTER']('vi')).toBe(24);
+
+    expect(mock).toHaveBeenCalledTimes(1);
+
+    await store.dispatch('table/filters/FLUSH_SUBSCRIBERS');
+  });
+
+  it('FILTER_SET with not-page filter name resets page filter', async () => {
+    const filters = new FiltersStoreModule()
+    .addFilter([
+      {
+        name: 'vi',
+        value: 23,
+        defaultValue: 23,
+        get: ['value'],
+        set: ['value'],
+        restore: () => {},
+      },
+      {
+        name: 'page',
+        value: 12,
+        defaultValue: 12,
+        get: ['value'],
+        set: ['value'],
+        restore: () => {},
+      },
+    ])
+    .getModule();
+
+    const table = new TableStoreModule({})
+    .getModule({
+      modules: { filters },
+    });
+
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
+    .mockImplementationOnce(vi.fn());
+
+    const store = createStore({
+      modules: { table },
+    });
+
+    await store.dispatch('table/filters/SUBSCRIBE', {
+      event: FilterEvent.FILTER_SET,
+      callback: (payload) => store.dispatch('table/ON_FILTER_EVENT', payload),
+    });
+
+    expect(store.getters['table/filters/GET_FILTER']('page')).toBe(12);
+
+    await store.dispatch('table/filters/SET_FILTER', {
+      name: 'vi',
+      value: 24,
+    });
+
+    expect(store.getters['table/filters/GET_FILTER']('page')).toBe(1);
+
+    await store.dispatch('table/filters/FLUSH_SUBSCRIBERS');
+  });
+
+  it('SORT changes both headers and sort filter', async () => {
+    const filters = new FiltersStoreModule()
+    .addFilter({
+      name: 'sort',
+      value: '',
+      get: ['value'],
+      set: ['value'],
+      restore: () => {},
+    })
+    .getModule();
+
+    const headers = [
+      { value: 'id', field: 'sort_me', sort: SortSymbols.NONE },
+    ];
+
+    const table = new TableStoreModule({ headers })
+    .getModule({
+      modules: { filters },
+    });
+
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
+    .mockImplementationOnce(vi.fn());
+
+    const store = createStore({
+      modules: { table },
+    });
+
+    await store.dispatch('table/filters/SUBSCRIBE', {
+      event: FilterEvent.FILTER_SET,
+      callback: (payload) => store.dispatch('table/ON_FILTER_EVENT', payload),
+    });
+
+    await store.dispatch('table/SORT', {
+      header: headers[0],
+      nextSortOrder: SortSymbols.ASC,
+    });
+
+    expect(store.getters['table/filters/GET_FILTER']('sort')).toBe('+sort_me');
+
+    expect(store.state.table.headers[0].sort).toBe(SortSymbols.ASC);
+
+    await store.dispatch('table/filters/FLUSH_SUBSCRIBERS');
+  });
+
+  it('fields filter change changes headers', async () => {
+    const filters = new FiltersStoreModule()
+    .addFilter({
+      name: 'fields',
+      value: [],
+      get: ['value'],
+      set: ['value'],
+      restore: () => {},
+    })
+    .getModule();
+
+    const headers = [
+      { value: 'surname', field: 'included', show: false },
+      { value: 'name', field: 'excluded', show: true },
+    ];
+
+    const table = new TableStoreModule({ headers })
+    .getModule({
+      modules: { filters },
+    });
+
+    vi.spyOn(table.actions, 'LOAD_DATA_LIST')
+    .mockImplementationOnce(vi.fn());
+
+    const store = createStore({
+      modules: { table },
+    });
+
+    await store.dispatch('table/filters/SUBSCRIBE', {
+      event: FilterEvent.FILTER_SET,
+      callback: (payload) => store.dispatch('table/ON_FILTER_EVENT', payload),
+    });
+
+    await store.dispatch('table/filters/SET_FILTER', {
+      name: 'fields',
+      value: ['surname'],
+    });
+
+    expect(store.getters['table/filters/GET_FILTER']('fields')).toEqual(['surname']);
+
+    expect(store.getters['table/FIELDS']).toEqual(['id', 'included']);
+
+    await store.dispatch('table/filters/FLUSH_SUBSCRIBERS');
+  });
+});

package/src/modules/Filters/restores/filterFieldsRestore.js

@@ -1,9 +0,0 @@
-const restore = (localStorageKey) => ({ query }) => {
-  if (!query) {
-    const value = localStorage.getItem(localStorageKey);
-    return value ? value.split(',') : null;
-  }
-  return query;
-};
-
-export default restore;

package/src/modules/Filters/restores/readme.md

@@ -1 +0,0 @@
-"restore" functions for filters