@webitel/ui-datalist 1.0.0 → 1.0.2

package/src/filters/enums/amd-result-options.ts

@@ -0,0 +1,38 @@
+import { FilterInitParams } from '../types/Filter';
+
+/**
+ * AMD Result to filter
+ * @enum
+ * @readonly
+ */
+
+export const AmdResultOptions: Array<FilterInitParams> = [
+  {
+    name: 'NOTSURE',
+    value: 'NOTSURE',
+  },
+  {
+    name: 'HUMAN',
+    value: 'HUMAN',
+  },
+  {
+    name: 'MACHINE',
+    value: 'MACHINE',
+  },
+  {
+    name: 'CANCEL',
+    value: 'CANCEL',
+  },
+  {
+    name: 'SILENCE',
+    value: 'SILENCE',
+  },
+  {
+    name: 'VOICEMAIL',
+    value: 'VOICEMAIL',
+  },
+  {
+    name: 'RINGING',
+    value: 'RINGING',
+  },
+] as const;

package/src/filters/enums/boolean-options.ts

@@ -0,0 +1,16 @@
+/*
+values are strings instead of booleans because restoration from url query
+returns string for any type of value [DEV-3924]
+ */
+import { FilterEnumOption } from '../types/Filter';
+
+export const BooleanOptions: Array<FilterEnumOption> = [
+  {
+    locale: 'vocabulary.yes',
+    value: 'true',
+  },
+  {
+    locale: 'vocabulary.no',
+    value: 'false',
+  },
+] as const;

package/src/filters/enums/direction-options.ts

@@ -0,0 +1,20 @@
+import { CallDirection } from 'webitel-sdk';
+
+export type CallDirectionType =
+  (typeof CallDirection)[keyof typeof CallDirection];
+
+export type DirectionOption = {
+  locale: [string, number];
+  value: CallDirectionType;
+};
+
+export const DirectionOptions: readonly DirectionOption[] = [
+  {
+    locale: [`calls.direction.${CallDirection.Inbound}`, 2],
+    value: CallDirection.Inbound,
+  },
+  {
+    locale: [`calls.direction.${CallDirection.Outbound}`, 2],
+    value: CallDirection.Outbound,
+  },
+] as const;

package/src/filters/enums/hangup-cause-options.ts

@@ -0,0 +1,265 @@
+import { FilterInitParams } from '../types/Filter';
+
+/**
+ * Hangup causes to filter
+ * @enum
+ * @readonly
+ */
+export const HangupCauseOptions: Array<FilterInitParams> = [
+  {
+    name: 'UNSPECIFIED',
+    value: 'UNSPECIFIED',
+  },
+  {
+    name: 'UNALLOCATED_NUMBER',
+    value: 'UNALLOCATED_NUMBER',
+  },
+  {
+    name: 'NO_ROUTE_TRANSIT_NET',
+    value: 'NO_ROUTE_TRANSIT_NET',
+  },
+  {
+    name: 'NO_ROUTE_DESTINATION',
+    value: 'NO_ROUTE_DESTINATION',
+  },
+  {
+    name: 'CHANNEL_UNACCEPTABLE',
+    value: 'CHANNEL_UNACCEPTABLE',
+  },
+  {
+    name: 'CALL_AWARDED_DELIVERED',
+    value: 'CALL_AWARDED_DELIVERED',
+  },
+  {
+    name: 'NORMAL_CLEARING',
+    value: 'NORMAL_CLEARING',
+  },
+  {
+    name: 'USER_BUSY',
+    value: 'USER_BUSY',
+  },
+  {
+    name: 'NO_USER_RESPONSE',
+    value: 'NO_USER_RESPONSE',
+  },
+  {
+    name: 'NO_ANSWER',
+    value: 'NO_ANSWER',
+  },
+  {
+    name: 'SUBSCRIBER_ABSENT',
+    value: 'SUBSCRIBER_ABSENT',
+  },
+  {
+    name: 'CALL_REJECTED',
+    value: 'CALL_REJECTED',
+  },
+  {
+    name: 'NUMBER_CHANGED',
+    value: 'NUMBER_CHANGED',
+  },
+  {
+    name: 'REDIRECTION_TO_NEW_DESTINATION',
+    value: 'REDIRECTION_TO_NEW_DESTINATION',
+  },
+  {
+    name: 'EXCHANGE_ROUTING_ERROR',
+    value: 'EXCHANGE_ROUTING_ERROR',
+  },
+  {
+    name: 'DESTINATION_OUT_OF_ORDER',
+    value: 'DESTINATION_OUT_OF_ORDER',
+  },
+  {
+    name: 'INVALID_NUMBER_FORMAT',
+    value: 'INVALID_NUMBER_FORMAT',
+  },
+  {
+    name: 'FACILITY_REJECTED',
+    value: 'FACILITY_REJECTED',
+  },
+  {
+    name: 'RESPONSE_TO_STATUS_ENQUIRY',
+    value: 'RESPONSE_TO_STATUS_ENQUIRY',
+  },
+  {
+    name: 'NORMAL_UNSPECIFIED',
+    value: 'NORMAL_UNSPECIFIED',
+  },
+  {
+    name: 'NORMAL_CIRCUIT_CONGESTION',
+    value: 'NORMAL_CIRCUIT_CONGESTION',
+  },
+  {
+    name: 'NETWORK_OUT_OF_ORDER',
+    value: 'NETWORK_OUT_OF_ORDER',
+  },
+  {
+    name: 'NORMAL_TEMPORARY_FAILURE',
+    value: 'NORMAL_TEMPORARY_FAILURE',
+  },
+  {
+    name: 'SWITCH_CONGESTION',
+    value: 'SWITCH_CONGESTION',
+  },
+  {
+    name: 'ACCESS_INFO_DISCARDED',
+    value: 'ACCESS_INFO_DISCARDED',
+  },
+  {
+    name: 'REQUESTED_CHAN_UNAVAIL',
+    value: 'REQUESTED_CHAN_UNAVAIL',
+  },
+  {
+    name: 'PRE_EMPTED',
+    value: 'PRE_EMPTED',
+  },
+  {
+    name: 'FACILITY_NOT_SUBSCRIBED',
+    value: 'FACILITY_NOT_SUBSCRIBED',
+  },
+  {
+    name: 'OUTGOING_CALL_BARRED',
+    value: 'OUTGOING_CALL_BARRED',
+  },
+  {
+    name: 'INCOMING_CALL_BARRED',
+    value: 'INCOMING_CALL_BARRED',
+  },
+  {
+    name: 'BEARERCAPABILITY_NOTAUTH',
+    value: 'BEARERCAPABILITY_NOTAUTH',
+  },
+  {
+    name: 'BEARERCAPABILITY_NOTAVAIL',
+    value: 'BEARERCAPABILITY_NOTAVAIL',
+  },
+  {
+    name: 'SERVICE_UNAVAILABLE',
+    value: 'SERVICE_UNAVAILABLE',
+  },
+  {
+    name: 'BEARERCAPABILITY_NOTIMPL',
+    value: 'BEARERCAPABILITY_NOTIMPL',
+  },
+  {
+    name: 'CHAN_NOT_IMPLEMENTED',
+    value: 'CHAN_NOT_IMPLEMENTED',
+  },
+  {
+    name: 'FACILITY_NOT_IMPLEMENTED',
+    value: 'FACILITY_NOT_IMPLEMENTED',
+  },
+  {
+    name: 'SERVICE_NOT_IMPLEMENTED',
+    value: 'SERVICE_NOT_IMPLEMENTED',
+  },
+  {
+    name: 'INVALID_CALL_REFERENCE',
+    value: 'INVALID_CALL_REFERENCE',
+  },
+  {
+    name: 'INCOMPATIBLE_DESTINATION',
+    value: 'INCOMPATIBLE_DESTINATION',
+  },
+  {
+    name: 'INVALID_MSG_UNSPECIFIED',
+    value: 'INVALID_MSG_UNSPECIFIED',
+  },
+  {
+    name: 'MANDATORY_IE_MISSING',
+    value: 'MANDATORY_IE_MISSING',
+  },
+  {
+    name: 'MESSAGE_TYPE_NONEXIST',
+    value: 'MESSAGE_TYPE_NONEXIST',
+  },
+  {
+    name: 'WRONG_MESSAGE',
+    value: 'WRONG_MESSAGE',
+  },
+  {
+    name: 'IE_NONEXIST',
+    value: 'IE_NONEXIST',
+  },
+  {
+    name: 'INVALID_IE_CONTENTS',
+    value: 'INVALID_IE_CONTENTS',
+  },
+  {
+    name: 'WRONG_CALL_STATE',
+    value: 'WRONG_CALL_STATE',
+  },
+  {
+    name: 'RECOVERY_ON_TIMER_EXPIRE',
+    value: 'RECOVERY_ON_TIMER_EXPIRE',
+  },
+  {
+    name: 'MANDATORY_IE_LENGTH_ERROR',
+    value: 'MANDATORY_IE_LENGTH_ERROR',
+  },
+  {
+    name: 'PROTOCOL_ERROR',
+    value: 'PROTOCOL_ERROR',
+  },
+  {
+    name: 'INTERWORKING',
+    value: 'INTERWORKING',
+  },
+  {
+    name: 'ORIGINATOR_CANCEL',
+    value: 'ORIGINATOR_CANCEL',
+  },
+  {
+    name: 'CRASH',
+    value: 'CRASH',
+  },
+  {
+    name: 'SYSTEM_SHUTDOWN',
+    value: 'SYSTEM_SHUTDOWN',
+  },
+  {
+    name: 'LOSE_RACE',
+    value: 'LOSE_RACE',
+  },
+  {
+    name: 'MANAGER_REQUEST',
+    value: 'MANAGER_REQUEST',
+  },
+  {
+    name: 'BLIND_TRANSFER',
+    value: 'BLIND_TRANSFER',
+  },
+  {
+    name: 'ATTENDED_TRANSFER',
+    value: 'ATTENDED_TRANSFER',
+  },
+  {
+    name: 'ALLOTTED_TIMEOUT',
+    value: 'ALLOTTED_TIMEOUT',
+  },
+  {
+    name: 'USER_CHALLENGE',
+    value: 'USER_CHALLENGE',
+  },
+  {
+    name: 'MEDIA_TIMEOUT',
+    value: 'MEDIA_TIMEOUT',
+  },
+  {
+    name: 'PICKED_OFF',
+    value: 'PICKED_OFF',
+  },
+  {
+    name: 'USER_NOT_REGISTERED',
+    value: 'USER_NOT_REGISTERED',
+  },
+  {
+    name: 'PROGRESS_TIMEOUT',
+    value: 'PROGRESS_TIMEOUT',
+  },
+  {
+    name: 'GATEWAY_DOWN',
+    value: 'GATEWAY_DOWN',
+  },
+] as const;

package/src/filters/enums/tag-options.ts

@@ -0,0 +1,8 @@
+import { FilterEnumOption } from '../types/Filter';
+
+export const TagOptions: Array<FilterEnumOption> = [
+  {
+    locale: 'filters.tag.options.vm',
+    value: 'vm',
+  },
+] as const;

package/src/filters/index.ts

@@ -0,0 +1,27 @@
+import { Filter } from './classes/Filter.ts';
+import { createFiltersManager } from './classes/FiltersManager';
+import type {
+  FilterConfig,
+  FilterInitParams,
+  FilterLabel,
+  FilterName,
+  FilterValue,
+  IFilter,
+} from './types/Filter.d.ts';
+import type {
+  FiltersManagerConfig,
+  IFiltersManager,
+} from './types/FiltersManager.d.ts';
+
+export { createFiltersManager, Filter };
+
+export type {
+  FilterConfig,
+  FilterInitParams,
+  FilterLabel,
+  FilterName,
+  FiltersManagerConfig,
+  FilterValue,
+  IFilter,
+  IFiltersManager,
+};

package/src/filters/scripts/utils.ts

@@ -0,0 +1,31 @@
+import type { FilterName } from '../types/Filter';
+
+export const filterLabelToSnapshotKey = (name: FilterName): string =>
+  `${name}_lbl`;
+
+export const filterValueToSnapshotKey = (name: FilterName): string =>
+  `${name}_val`;
+
+const filterLabelFromSnapshotKey = (snapshotKey: string): FilterName =>
+  snapshotKey.replace('_lbl', '');
+
+const filterValueFromSnapshotKey = (snapshotKey: string): FilterName =>
+  snapshotKey.replace('_val', '');
+
+const isLabelSnapshotKey = (snapshotKey: string): boolean =>
+  snapshotKey.includes('_lbl');
+
+const isValueSnapshotKey = (snapshotKey: string): boolean =>
+  snapshotKey.includes('_val');
+
+export const filterNameFromSnapshotKey = (snapshotKey: string): FilterName => {
+  if (isLabelSnapshotKey(snapshotKey))
+    return filterLabelFromSnapshotKey(snapshotKey);
+  if (isValueSnapshotKey(snapshotKey))
+    return filterValueFromSnapshotKey(snapshotKey);
+};
+
+export const filterValuePropFromSnapshotKey = (snapshotKey: string): string => {
+  if (isLabelSnapshotKey(snapshotKey)) return 'label';
+  if (isValueSnapshotKey(snapshotKey)) return 'value';
+};

package/src/filters/types/Filter.d.ts

@@ -0,0 +1,46 @@
+export type FilterName = string;
+export type FilterLabel = string;
+export type FilterValue =
+  | object
+  | []
+  | string
+  | number
+  | boolean
+  | undefined
+  | null;
+
+/**
+ * represents user-input data, that should be (re)stored
+ */
+export interface FilterData {
+  value: FilterValue;
+  label?: FilterLabel;
+}
+
+export interface FilterInitParams extends FilterData {
+  name: FilterName;
+}
+
+export interface FilterEnumOption {
+  locale: string;
+  value: FilterValue;
+}
+
+export interface FilterConfig {
+  /**
+   * Perform simple type conversion on store/restore,
+   * without need to provide custom store/restore functions
+   */
+  storableType?: string;
+  /**
+   * list of persistence storages that should be used for this filter
+   */
+  storage?: string[];
+}
+
+export interface IFilter {
+  name: FilterName;
+  value: FilterValue;
+  label?: FilterLabel;
+  set: (data: FilterData) => IFilter;
+}

package/src/filters/types/FiltersManager.d.ts

@@ -0,0 +1,76 @@
+import type {
+  FilterConfig,
+  FilterInitParams,
+  FilterLabel,
+  FilterName,
+  FilterValue,
+  IFilter,
+} from './Filter.types.ts';
+
+export interface IFiltersManager {
+  filters: Map<FilterName, IFilter>;
+
+  hasFilter: (name: FilterName) => boolean;
+  getFilter: (name: FilterName) => IFilter;
+  addFilter: (
+    params: FilterInitParams,
+    payload?: object,
+    config?: FilterConfig,
+  ) => IFilter;
+  updateFilter: ({
+    name,
+  }: {
+    name: FilterName;
+    value?: FilterValue;
+    label?: FilterLabel;
+  }) => IFilter;
+  deleteFilter: (name: FilterName) => IFilter;
+
+  /**
+   * Converts filters data to String, that can be stored
+   */
+  toString: () => string;
+
+  /**
+   * Restores filters from string
+   */
+  fromString: (snapshotStr: string) => void;
+
+  /**
+   * deletes filters
+   * If include/exclude are not provided, all filters will be deleted
+   */
+  reset: ({
+    include,
+    exclude,
+  }?: {
+    include?: FilterName[];
+    exclude?: FilterName[];
+  }) => void;
+
+  /**
+   * @returns Array<FilterName>
+   */
+  getAllKeys: () => FilterName[];
+
+  /**
+   * @returns { FilterName: FilterValue }
+   */
+
+  getAllValues: () => { [name: FilterName]: FilterValue };
+  /**
+   * @returns Array<IFilter>
+   * @param include
+   * @param exclude
+   */
+
+  getFiltersList: ({
+    include,
+    exclude,
+  }?: {
+    include?: FilterName[];
+    exclude?: FilterName[];
+  }) => IFilter[];
+}
+
+export type FiltersManagerConfig = FilterConfig;

package/src/headers/createTableHeadersStore.ts

@@ -0,0 +1,140 @@
+import { WtTableHeader } from '@webitel/ui-sdk/src/components/wt-table/types/WtTable';
+import { sortToQueryAdapter } from '@webitel/ui-sdk/src/scripts';
+import { SortSymbols } from '@webitel/ui-sdk/src/scripts/sortQueryAdapters';
+import { defineStore } from 'pinia';
+import { computed, ref } from 'vue';
+
+import { PersistedStorageType } from '../persist/PersistedStorage.types';
+import { usePersistedStorage } from '../persist/usePersistedStorage.ts';
+
+export const createTableHeadersStore = (
+  namespace: string,
+  { headers: rawHeaders },
+) => {
+  const id = `${namespace}/headers`;
+
+  return defineStore(id, () => {
+    const headers = ref(rawHeaders);
+
+    const shownHeaders = computed(() => {
+      return headers.value.filter((header) => header.show);
+    });
+
+    const fields = computed(() => {
+      return shownHeaders.value.map((header) => header.field);
+    });
+
+    const sort = computed(() => {
+      const encodeSortQuery = ({ column, order }) =>
+        `${sortToQueryAdapter(order)}${column.field}`;
+
+      const sortedCol = headers.value.find((header) => header.sort);
+
+      return sortedCol
+        ? encodeSortQuery({ column: sortedCol, order: sortedCol.sort })
+        : null;
+    });
+
+    const $reset = () => {
+      headers.value = rawHeaders;
+    };
+
+    const updateShownHeaders = (value) => {
+      headers.value = value;
+    };
+
+    const updateFields = (fields: string[]) => {
+      const newHeaders = headers.value.map((header: WtTableHeader) => {
+        return {
+          ...header,
+          show: fields.includes(header.field),
+        };
+      });
+      updateShownHeaders(newHeaders);
+    };
+
+    const updateSort = (column) => {
+      const getNextSortOrder = (sort) => {
+        switch (sort) {
+          case SortSymbols.NONE:
+            return SortSymbols.ASC;
+          case SortSymbols.ASC:
+            return SortSymbols.DESC;
+          case SortSymbols.DESC:
+            return SortSymbols.NONE;
+          default:
+            return SortSymbols.ASC;
+        }
+      };
+
+      const changeHeadersSort = ({ headers, sortedHeader, order }) => {
+        return headers.map((header) => {
+          if (header.sort === undefined) return header;
+
+          // reset all headers by default
+          let newSort = null;
+
+          if (header.field === sortedHeader.field) {
+            newSort = order;
+          }
+
+          return {
+            ...header,
+            sort: newSort,
+          };
+        });
+      };
+
+      const order = getNextSortOrder(column.sort);
+
+      const newHeaders = changeHeadersSort({
+        headers: headers.value,
+        sortedHeader: column,
+        order,
+      });
+
+      headers.value = newHeaders;
+    };
+    const setupPersistence = async () => {
+      const { restore: restoreFields } = usePersistedStorage({
+        name: 'fields',
+        value: fields,
+        storages: [
+          PersistedStorageType.LocalStorage,
+          PersistedStorageType.Route,
+        ],
+        storagePath: id,
+        onStore: (save, { name }) => {
+          const value = fields.value.join(',');
+          return save({ name, value });
+        },
+        onRestore: async (restore, name) => {
+          const value = (await restore(name)) as string;
+          if (value) {
+            return updateFields(value.split(','));
+          }
+        },
+      });
+
+      const { restore: restoreSort } = usePersistedStorage({
+        name: 'sort',
+        value: sort,
+      });
+
+      return Promise.allSettled([restoreFields(), restoreSort()]);
+    };
+
+    return {
+      headers,
+      shownHeaders,
+      fields,
+      sort,
+
+      updateShownHeaders,
+      updateSort,
+
+      setupPersistence,
+      $reset,
+    };
+  });
+};

package/src/index.ts

@@ -0,0 +1,3 @@
+import { createTableStore } from './table/createTableStore.store';
+
+export { createTableStore };