@webitel/ui-sdk 24.10.49 → 24.10.51

package/src/modules/TableComponentModule/composables/useTableEmpty.js

@@ -0,0 +1,183 @@
+import deepmerge from 'deepmerge';
+import { computed, inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useStore } from 'vuex';
+import { isEmpty } from '../../../scripts/index.js';
+import EmptyTableDark from '../_internals/assets/empty-table-dark.svg';
+import EmptyTableLight from '../_internals/assets/empty-table-light.svg';
+
+export const useTableEmpty = ({ dataList, filters, error, isLoading }, overrides = {}) => {
+  const store = useStore();
+  const { t } = useI18n();
+
+  // use computed, so that at locale change, texts will be updated too
+  const defaults = computed(() => ({
+    image: {
+      filters: {
+        dark: EmptyTableDark,
+        light: EmptyTableLight,
+      },
+      error: {
+        dark: EmptyTableDark,
+        light: EmptyTableLight,
+      },
+      empty: {
+        dark: EmptyTableDark,
+        light: EmptyTableLight,
+      },
+    },
+    headline: {
+      filters: t(''),
+      error: t(''),
+      empty: t(''),
+    },
+    title: {
+      filters: t(''),
+      error: t(''),
+      empty: t(''),
+    },
+    text: {
+      filters: t('web'),
+      error: t(''),
+      empty: t(''),
+    },
+    primaryActionText: {
+      filters: t(''),
+      error: t(''),
+      empty: t(''),
+    },
+    secondaryActionText: {
+      filters: t(''),
+      error: t(''),
+      empty: t(''),
+    },
+  }));
+
+  const merged = computed(() => deepmerge(defaults, overrides));
+
+  let darkMode = computed(() => false);
+
+  try {
+    darkMode = inject('darkMode');
+  } catch {
+    try {
+      darkMode = computed(() => store.getters['appearance/DARK_MODE']);
+    } catch {
+      console.warn('"darkMode" value not found, using "false" as default');
+    }
+  }
+
+  const EmptyCause = Object.freeze({
+    ERROR: 'error',
+    FILTERS: 'filters',
+    EMPTY: 'empty',
+  });
+
+  const emptyState = computed(() => {
+    return !isLoading.value && !error.value && !!dataList.value.length;
+  });
+
+  const emptyCause = computed(() => {
+    if (!emptyState.value) return null;
+
+    if (error.value) return EmptyCause.ERROR;
+    if (filters.value) {
+      const uncheckedFilters = ['page', 'size', 'sort', 'fields'];
+      const filtersApplied = Object.entries(filters.value).some(
+        ([filterValue, filterName]) =>
+          !isEmpty(filterValue) && !uncheckedFilters.includes(filterName),
+      );
+      if (filtersApplied) return EmptyCause.FILTERS;
+    }
+
+    return EmptyCause.EMPTY;
+  });
+
+  const image = computed(() => {
+    switch (emptyCause.value) {
+      case EmptyCause.ERROR:
+        return darkMode.value ? merged.value.image.error.dark : merged.value.image.error.light;
+      case EmptyCause.FILTERS:
+        return darkMode.value ? merged.value.image.filters.dark : merged.value.image.filters.light;
+      case EmptyCause.EMPTY:
+        return darkMode.value ? merged.value.image.empty.dark : merged.value.image.empty.light;
+      default:
+        return null;
+    }
+  });
+  const headline = computed(() => {
+    switch (emptyCause.value) {
+      case EmptyCause.ERROR:
+        return merged.value.headline.error;
+      case EmptyCause.FILTERS:
+        return merged.value.headline.filters;
+      case EmptyCause.EMPTY:
+        return merged.value.headline.empty;
+      default:
+        return null;
+    }
+  });
+
+  const title = computed(() => {
+    switch (emptyCause.value) {
+      case EmptyCause.ERROR:
+        return merged.value.title.error;
+      case EmptyCause.FILTERS:
+        return merged.value.title.filters;
+      case EmptyCause.EMPTY:
+        return merged.value.title.empty;
+      default:
+        return null;
+    }
+  });
+
+  const text = computed(() => {
+    switch (emptyCause.value) {
+      case EmptyCause.ERROR:
+        return merged.value.text.error;
+      case EmptyCause.FILTERS:
+        return merged.value.text.filters;
+      case EmptyCause.EMPTY:
+        return merged.value.text.empty;
+      default:
+        return null;
+    }
+  });
+
+  const primaryActionText = computed(() => {
+    switch (emptyCause.value) {
+      case EmptyCause.ERROR:
+        return merged.value.primaryActionText.error;
+      case EmptyCause.FILTERS:
+        return merged.value.primaryActionText.filters;
+      case EmptyCause.EMPTY:
+        return merged.value.primaryActionText.empty;
+      default:
+        return null;
+    }
+  });
+
+  const secondaryActionText = computed(() => {
+    switch (emptyCause.value) {
+      case EmptyCause.ERROR:
+        return merged.value.secondaryActionText.error;
+      case EmptyCause.FILTERS:
+        return merged.value.secondaryActionText.filters;
+      case EmptyCause.EMPTY:
+        return merged.value.secondaryActionText.empty;
+      default:
+        return null;
+    }
+  });
+
+  return {
+    showEmpty: emptyState,
+
+    image,
+    headline,
+    title,
+    text,
+    primaryActionText,
+    secondaryActionText,
+  };
+};

package/src/scripts/index.js

@@ -0,0 +1,67 @@
+import convertDuration from './convertDuration.js';
+import debounce from './debounce.js';
+import eventBus from './eventBus.js';
+import isEmpty from './isEmpty.js';
+import prettifyFileSize from './prettifyFileSize.js';
+import prettifyTime from './prettifyTime.js';
+import preventHiddenPageCallsDecorator
+  from './preventHiddenPageCallsDecorator.js';
+import saveAsJSON from './saveAsJSON.js';
+import {
+  sortToQueryAdapter,
+  queryToSortAdapter,
+} from './sortQueryAdapters.js';
+import updateObject from './updateObject.js';
+import {
+  compareSize,
+  smallerOrEqual as sizeSmallerOrEqual,
+  greaterOrEqual as sizeGreaterOrEqual,
+  smallerThen as sizeSmallerThen,
+  greaterThen as sizeGreaterThen,
+} from './compareSize.js';
+import {
+  camelToSnake,
+  camelToKebab,
+  snakeToCamel,
+  snakeToKebab,
+  kebabToCamel,
+  kebabToSnake,
+  objSnakeToCamel,
+  objCamelToSnake,
+  objCamelToKebab,
+} from 'caseConverters.js';
+
+
+export {
+  // sortQueryAdapters.js
+  sortToQueryAdapter,
+  queryToSortAdapter,
+
+  updateObject,
+  preventHiddenPageCallsDecorator,
+  saveAsJSON,
+  prettifyTime,
+  prettifyFileSize,
+  debounce,
+  eventBus,
+  isEmpty,
+  convertDuration,
+
+  // compareSize.js
+  compareSize,
+  sizeSmallerOrEqual,
+  sizeGreaterOrEqual,
+  sizeSmallerThen,
+  sizeGreaterThen,
+
+  // caseConverters.js
+  camelToSnake,
+  camelToKebab,
+  snakeToCamel,
+  snakeToKebab,
+  kebabToCamel,
+  kebabToSnake,
+  objSnakeToCamel,
+  objCamelToSnake,
+  objCamelToKebab,
+};

package/src/store/new/modules/tableStoreModule/tableStoreModule.js

@@ -1,5 +1,4 @@
 import FilterEvent from '../../../../modules/Filters/enums/FilterEvent.enum.js';
-import isEmpty from '../../../../scripts/isEmpty.js';
 import {
   queryToSortAdapter,
   sortToQueryAdapter,
@@ -31,33 +30,6 @@ const getters = {
     return [...new Set([...getters.REQUIRED_FIELDS, ...fields])];
   },
 
-  EMPTY_STATE: (state, getters) => {
-    if (state.isLoading) {
-      return { value: false };
-    }
-
-    if (state.error) {
-      return { value: true, cause: 'error' };
-    }
-
-    if (!state.dataList.length) {
-      const filters = getters.FILTERS();
-      const uncheckedFilters = ['page', 'size', 'sort', 'fields'];
-      const filtersApplied = Object.entries(filters).some(
-        ([filterValue, filterName]) =>
-          !isEmpty(filterValue) && !uncheckedFilters.includes(filterName),
-      );
-
-      if (filtersApplied) {
-        return { value: true, cause: 'filters' };
-      }
-
-      return { value: true, cause: 'empty' };
-    }
-
-    return { value: false };
-  },
-
   GET_LIST_PARAMS: (state, getters) => (overrides) => {
     const filters = getters.FILTERS();
     const fields = getters.FIELDS;

package/src/modules/TableComponent/composables/useTableEmpty.js

@@ -1,20 +0,0 @@
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-
-export const useTableEmpty = (emptyState) => {
-  const { t } = useI18n();
-
-  const media = computed(() => {});
-  const headline = computed(() => {});
-  const title = computed(() => {});
-  const text = computed(() => {});
-  const actionText = computed(() => {});
-
-  return {
-    media,
-    headline,
-    title,
-    text,
-    actionText,
-  };
-};