@webitel/ui-sdk 25.4.64 → 25.4.66

package/package.json

@@ -1,25 +1,26 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "25.4.64",
+  "version": "25.4.66",
   "private": false,
   "scripts": {
     "dev": "npm run docs:dev",
     "build": "vite build",
     "test:unit": "vitest",
-    "publish-lib": "npm run build && npm publish --access public",
+    "build:types": "vue-tsc -p ./tsconfig.build.json",
+    "publish-lib": "npm run build && (npm run build:types || true) && npm publish --access public",
     "docs:dev": "vitepress dev docs --port 8080",
     "docs:build": "vitepress build docs",
     "lint:fix": "eslint --fix ./src && prettier --write --check ./src",
     "lint:fix-staged": "npx lint-staged",
     "lint:package": "publint",
     "orval": "orval",
-    "tsc": "tsc -p tsconfig.json",
     "utils:link": "npm link",
     "utils:update-node": "nvm install --lts && nvm alias default node",
     "utils:i": "npm install"
   },
   "main": "./dist/ui-sdk.js",
   "type": "module",
+  "types": "./dist/types",
   "exports": {
     ".": "./dist/ui-sdk.js",
     "./store": "./src/store/new/index",

package/src/api/clients/index.js

@@ -25,6 +25,8 @@ import skills from './skills/skills.js';
 import slas from './slas/slas.js';
 import teams from './teams/teams.js';
 import users from './users/users.js';
+import sysTypes from './wtTypes/sysTypes/sysTypes';
+import typeExtensions from './wtTypes/typeExtensions/typeExtensions';
 import { contactChatMessagesHistory, contacts } from './сontacts/index.js';
 
 export {
@@ -55,6 +57,8 @@ export {
   roles,
   skills,
   slas,
+  sysTypes,
   teams,
+  typeExtensions,
   users,
 };

package/src/api/clients/wtTypes/_shared/utils/sortDynamicFields.ts

@@ -0,0 +1,21 @@
+import deepCopy from 'deep-copy';
+import { WebitelProtoDataStruct } from 'webitel-sdk';
+
+export const sortDynamicFields = (
+  item: WebitelProtoDataStruct,
+): WebitelProtoDataStruct => {
+  const unSortableFields = item.fields.filter((field) => !field.position);
+
+  const sortableFields = deepCopy(item.fields)
+    .filter((field) => field.position)
+    .sort((a, b) => {
+      return a.position - b.position;
+    });
+
+  const fields = [...unSortableFields, ...sortableFields];
+
+  return {
+    ...item,
+    fields,
+  };
+};

package/src/api/clients/wtTypes/sysTypes/sysTypes.ts

@@ -0,0 +1,58 @@
+import {
+  getDefaultGetListResponse,
+  getDefaultGetParams,
+  getDefaultInstance,
+} from '../../../defaults';
+import applyTransform, {
+  camelToSnake,
+  generateUrl,
+  merge,
+  notify,
+  sanitize,
+} from '../../../transformers';
+
+const instance = getDefaultInstance();
+
+const getSysTypeRecordsList = async ({ path, display, primary, ...params }) => {
+  const fieldsToSend = ['page', 'size', 'q', 'sort', 'fields', 'id'];
+
+  const url = applyTransform(params, [
+    merge(getDefaultGetParams()),
+    (params) => ({ ...params, q: params.search }),
+    sanitize(fieldsToSend),
+    camelToSnake(),
+    generateUrl(path),
+  ]);
+  try {
+    const response = await instance.get(url);
+    const { data, items, next } = applyTransform(response.data, [
+      merge(getDefaultGetListResponse()),
+    ]);
+
+    return {
+      // Some endpoints return data, some return items so we need to check for both of them
+      items:
+        applyTransform(data || items, [
+          // transformItemsForSelect({ display, primary }),
+        ]) ?? [],
+      next,
+    };
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const getSysTypeRecordsLookup = (params) =>
+  getSysTypeRecordsList({
+    ...params,
+    fields: params.fields || ['id', 'name'],
+  });
+
+const SysTypesApi = {
+  getList: getSysTypeRecordsList,
+  getLookup: getSysTypeRecordsLookup,
+};
+
+export { getSysTypeRecordsList, getSysTypeRecordsLookup };
+
+export default SysTypesApi;

package/src/api/clients/wtTypes/typeExtensions/typeExtensions.ts

@@ -0,0 +1,122 @@
+import { ExtensionsApiFactory, WebitelProtoDataStruct } from 'webitel-sdk';
+
+import { getDefaultInstance, getDefaultOpenAPIConfig } from '../../../defaults';
+import applyTransform, {
+  camelToSnake,
+  notify,
+  sanitize,
+  snakeToCamel,
+} from '../../../transformers';
+import { sortDynamicFields } from '../_shared/utils/sortDynamicFields';
+
+const instance = getDefaultInstance();
+const configuration = getDefaultOpenAPIConfig();
+
+const typeExtensionsService = ExtensionsApiFactory(configuration, '', instance);
+
+const fieldsToSend = ['fields', 'repo', 'path'];
+
+const generateIdsFromRepos = (item: WebitelProtoDataStruct) => ({
+  ...item,
+  id: item.repo,
+});
+
+const getTypeExtension = async ({ itemId: typeRepo }) => {
+  const createPositionGenerator = () => {
+    let position = 1;
+    return (item) => (item.readonly ? null : position++);
+  };
+  const getPosition = createPositionGenerator();
+
+  const itemResponseHandler = (item) => ({
+    ...item,
+    fields: item.fields.map((field) => ({
+      ...field,
+      position: getPosition(field),
+    })),
+  });
+
+  try {
+    const response = await typeExtensionsService.locateType(typeRepo);
+
+    return applyTransform(response.data, [
+      snakeToCamel(),
+      generateIdsFromRepos,
+      itemResponseHandler,
+    ]);
+  } catch {
+    return {
+      id: typeRepo,
+      fields: [],
+      isNew: true,
+    };
+  }
+};
+
+const addTypeExtension = async ({ itemInstance, itemId: typeRepo }) => {
+  const item = applyTransform(itemInstance, [
+    sortDynamicFields,
+    camelToSnake(),
+    sanitize(fieldsToSend),
+  ]);
+  try {
+    const response = await typeExtensionsService.createType(typeRepo, item);
+    return applyTransform(response.data, [
+      snakeToCamel(),
+      generateIdsFromRepos,
+    ]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const deleteTypeExtension = async ({ itemId: typeRepo }) => {
+  try {
+    await typeExtensionsService.deleteType(typeRepo);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const updateTypeExtension = async ({ itemInstance, itemId: typeRepo }) => {
+  if (!itemInstance.fields.length && itemInstance.isNew) {
+    return itemInstance;
+  } else if (itemInstance.isNew) {
+    return addTypeExtension({ itemInstance, itemId: typeRepo });
+  }
+
+  if (!itemInstance.fields.length && !itemInstance.isNew) {
+    return deleteTypeExtension({ itemId: typeRepo });
+  }
+
+  const item = applyTransform(itemInstance, [
+    sortDynamicFields,
+    camelToSnake(),
+    sanitize(fieldsToSend),
+  ]);
+  try {
+    const response = await typeExtensionsService.updateType(typeRepo, item);
+    return applyTransform(response.data, [
+      snakeToCamel(),
+      generateIdsFromRepos,
+    ]);
+  } catch (err) {
+    throw applyTransform(err, [notify]);
+  }
+};
+
+const WtTypeExtensionApi = {
+  getList: getTypeExtension,
+  add: addTypeExtension,
+  update: updateTypeExtension,
+  delete: deleteTypeExtension,
+};
+
+export {
+  addTypeExtension,
+  deleteTypeExtension,
+  getTypeExtension,
+  updateTypeExtension,
+};
+
+export default WtTypeExtensionApi;

package/src/assets/icons/sprite/index.js

@@ -180,6 +180,7 @@ import stopSign from './stop-sign.svg';
 import stt from './stt.svg';
 import sttDownload from './stt-download.svg';
 import sttSearch from './stt-search.svg';
+import table from './table.svg';
 import telegramBot from './telegram-bot.svg';
 import tick from './tick.svg';
 import treeCollapse from './tree-collapse.svg';
@@ -330,6 +331,7 @@ export default objCamelToKebab({
   numpad,
   pause,
   play,
+  table,
   treeExpand,
   prompter,
   queueMember,

package/src/assets/icons/sprite/table.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 2H22V22H2V2ZM20 6V4H16V6H20ZM14 8H10V20H14V8ZM10 6H14V4H10V6ZM8 4V6H4V4H8ZM8 8H4V20H8V8ZM20 8H16V20H20V8Z" />
+</svg>

package/src/components/index.js

@@ -1,6 +1,7 @@
 import WtNavigationMenu from './on-demand/wt-navigation-menu/components/wt-navigation-menu.vue';
 import WtSelectionPopup from './on-demand/wt-selection-popup/wt-selection-popup.vue';
 import WtStartPage from './on-demand/wt-start-page/components/wt-start-page.vue';
+import WtTypeExtensionValueInput from './on-demand/wt-type-extension-value-input/wt-type-extension-value-input.vue';
 import WtReplaceTransition from './transitions/cases/wt-replace-transition.vue';
 import WtActionBar from './wt-action-bar/wt-action-bar.vue';
 import WtAppHeader from './wt-app-header/wt-app-header.vue';
@@ -210,6 +211,7 @@ export {
   WtTooltip,
   WtTree,
   WtTreeTable,
+  WtTypeExtensionValueInput,
 };
 
 export default Components;

package/src/components/on-demand/wt-type-extension-value-input/wt-type-extension-value-input.vue

@@ -0,0 +1,158 @@
+<template>
+  <wt-input
+    v-if="field.kind === FieldType.Text"
+    v-bind="sharedChildrenProps"
+    :value="value"
+    @input="setValue"
+  />
+  <wt-input
+    v-else-if="field.kind === FieldType.Number"
+    v-bind="sharedChildrenProps"
+    :value="value"
+    type="number"
+    @input="setValue"
+  />
+  <wt-switcher
+    v-else-if="field.kind === FieldType.Boolean"
+    v-bind="sharedChildrenProps"
+    :value="value"
+    @change="setValue"
+  />
+  <slot
+    v-else-if="field.kind === FieldType.Select"
+    :name="FieldType.Select"
+    :default-props="{
+        ...sharedChildrenProps,
+        ...selectProps,
+        value,
+      }"
+  >
+  <wt-select
+    v-bind="sharedChildrenProps"
+    :value="value"
+    :search-method="loadLookupList(field.lookup)"
+    track-by="id"
+    clearable
+    @input="selectElement"
+  />
+  </slot>
+  <slot
+    v-else-if="field.kind === FieldType.Multiselect"
+    :name="FieldType.Multiselect"
+    :default-props="{
+      ...sharedChildrenProps,
+      ...multiselectProps,
+      value,
+    }"
+  >
+    <wt-select
+      v-bind="{ ...sharedChildrenProps, ...multiselectProps }"
+      :value="value"
+      @input="selectElements"
+    />
+  </slot>
+  <wt-datepicker
+    v-else-if="field.kind === FieldType.Calendar"
+    v-bind="sharedChildrenProps"
+    :value="value * DatetimeConversionModifier"
+    mode="datetime"
+    @input="setValue(+$event / DatetimeConversionModifier)"
+  />
+</template>
+
+<script lang="ts" setup>
+import { WtDatepicker, WtInput,WtSelect, WtSwitcher } from '@webitel/ui-sdk/components';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { WebitelProtoDataField } from 'webitel-sdk';
+
+import { getSysTypeRecordsLookup } from "../../../api/clients/wtTypes/sysTypes/sysTypes";
+import { WtTypeExtensionFieldKind as FieldType } from '../../../enums';
+
+// TODO: move to api file, mb? 🤔
+//  Number for convert time from seconds to milliseconds, when send to backend and display on frontend
+const DatetimeConversionModifier = 1000;
+
+const model = defineModel<unknown>();
+
+const props = defineProps<{
+  field: WebitelProtoDataField;
+  required?: boolean;
+  /**
+   * TODO: implement validation
+   */
+  v?: object;
+}>();
+
+const { t } = useI18n();
+
+const label = computed(() => {
+  return t(props.field?.name || 'vocabulary.labels');
+});
+
+const isRequired = computed(() => {
+  return props.required || props.field.required;
+});
+
+const value = computed(() => {
+  return model.value;
+});
+
+const sharedChildrenProps = computed(() => ({
+  label: label.value,
+  required: isRequired.value,
+  v: props.v,
+}));
+
+/**
+ * @author @dlohvinov
+ *
+ * props as computed is needed to pass it either
+ * to slot and to default in-slot component
+ */
+const selectProps = computed(() => ({
+  clearable: true,
+  trackBy: 'id',
+  searchMethod: () => loadLookupList(props.field.lookup),
+}));
+
+const multiselectProps = computed(() => ({
+  ...selectProps.value,
+  multiple: true,
+}));
+
+const setValue = (value) => {
+  model.value = value;
+};
+
+const loadLookupList = ({ path, display, primary }) => {
+  return (params) => {
+    return getSysTypeRecordsLookup({
+      ...params,
+      path,
+      display,
+      primary,
+    });
+  };
+};
+
+const selectElement = (value) => {
+  if (Object.values(value).length === 0) {
+    return setValue(null);
+  }
+
+  setValue({
+    id: value.id,
+    name: value.name,
+  });
+};
+
+const selectElements = (value) => {
+  setValue(
+    value.map((item) => ({
+      id: item.id,
+      name: item.name,
+    })),
+  );
+};
+</script>

package/src/enums/WtTypeExtensionFieldKind/WtTypeExtensionFieldKind.ts

@@ -0,0 +1,16 @@
+/**
+ * @name FieldType
+ * @description Enumerates (ONLY!) the types of field type.
+ */
+
+export const WtTypeExtensionFieldKind = {
+  Text: 'string',
+  Number: 'int32',
+  Select: 'lookup',
+  Multiselect: 'list',
+  Calendar: 'datetime',
+  Boolean: 'bool',
+} as const;
+
+export type ExtensionFieldType =
+  (typeof WtTypeExtensionFieldKind)[keyof typeof WtTypeExtensionFieldKind];

package/src/enums/index.js

@@ -14,6 +14,7 @@ import { SupervisorSections } from './WebitelApplications/SupervisorSections';
 import WebitelApplications from './WebitelApplications/WebitelApplications.enum.js';
 import { WtApplication } from './WebitelApplications/WtApplication';
 import { WtObject } from './WtObject/WtObject';
+import { WtTypeExtensionFieldKind } from './WtTypeExtensionFieldKind/WtTypeExtensionFieldKind';
 
 export {
   AbstractUserStatus,
@@ -32,4 +33,5 @@ export {
   WebitelApplications,
   WtApplication,
   WtObject,
+  WtTypeExtensionFieldKind,
 };

package/src/enums/index.ts

@@ -14,6 +14,7 @@ import { SupervisorSections } from './WebitelApplications/SupervisorSections';
 import WebitelApplications from './WebitelApplications/WebitelApplications.enum.js';
 import { WtApplication } from './WebitelApplications/WtApplication';
 import { WtObject } from './WtObject/WtObject';
+import { WtTypeExtensionFieldKind } from './WtTypeExtensionFieldKind/WtTypeExtensionFieldKind';
 
 export {
   AbstractUserStatus,
@@ -32,4 +33,5 @@ export {
   WebitelApplications,
   WtApplication,
   WtObject,
+  WtTypeExtensionFieldKind,
 };