@webitel/ui-sdk 24.10.48 → 24.10.49

package/src/composables/useCachedItemInstanceName/useCachedItemInstanceName.js

@@ -0,0 +1,33 @@
+import get from 'lodash/get.js';
+import { onMounted, ref, watch } from 'vue';
+
+export const useCachedItemInstanceName = (itemInstance, { namePath = 'name' } = {}) => {
+  const name = ref('');
+
+  const updateName = () => {
+    name.value = get(itemInstance.value, namePath);
+  };
+
+  watch(
+    () => itemInstance.value._dirty,
+    (value) => {
+      if (!value) updateName();
+    },
+  );
+
+  onMounted(() => {
+    // itemInstance._dirty isn't init as "false",
+    // so that we should set up first name representation in other way
+    const unwatch = watch(
+      () => itemInstance.value.name,
+      (name) => {
+        updateName();
+        if (name) unwatch();
+      },
+    );
+  });
+
+  return {
+    name,
+  };
+};

package/src/composables/useCard/useCardComponent.js

@@ -0,0 +1,88 @@
+import { computed, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import { useCachedItemInstanceName } from '../useCachedItemInstanceName/useCachedItemInstanceName.js';
+
+export const useCardComponent = (params) => {
+  const { id,
+    itemInstance,
+    invalid,
+
+    loadItem,
+    addItem,
+    updateItem,
+    setId,
+    resetState } = params;
+
+  const router = useRouter();
+  const route = useRoute();
+  const { t } = useI18n();
+
+  const { name: pathName } = useCachedItemInstanceName(itemInstance);
+
+  const isNew = computed(() => route.params.id === 'new');
+  const disabledSave = computed(() => {
+    return invalid?.value || !itemInstance.value._dirty;
+  });
+
+  const saveText = computed(() => {
+    return isNew.value || itemInstance.value._dirty ? t('objects.save') : t('objects.saved');
+  });
+
+  const redirectToEdit = () => {
+    return router.replace({
+      ...route,
+      params: { id },
+    });
+  };
+
+  const save = async () => {
+    if (disabledSave.value) return;
+
+    if (isNew.value) {
+      await addItem();
+    } else {
+      await updateItem();
+    }
+
+    if (id.value) {
+      await redirectToEdit();
+    }
+  };
+
+  async function initializeCard() {
+    try {
+      const { id } = route.params;
+      await setId(id);
+      await loadItem();
+    } catch (error) {
+      console.error(error);
+    }
+  }
+
+  function initialize(){
+    onMounted(() => {
+      initializeCard();
+    });
+
+    onUnmounted(() => {
+      resetState();
+    });
+  }
+
+
+  return {
+    id,
+    itemInstance,
+    isNew,
+    pathName,
+    disabledSave,
+    saveText,
+
+    save,
+    initialize,
+  }
+}
+
+

package/src/composables/useCard/useCardTabs.js

@@ -0,0 +1,28 @@
+import { computed } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+export const useCardTabs = (tabs) => {
+  const router = useRouter();
+  const route = useRoute();
+
+  const currentTab = computed(() => {
+    return tabs.find(({ pathName }) => route.name === pathName) || tabs[0];
+  });
+
+  function changeTab(tab) {
+    const { params, query, hash } = route;
+
+    return router.push({
+      name: tab.pathName,
+      params,
+      query,
+      hash,
+    });
+  }
+
+  return {
+    currentTab,
+
+    changeTab,
+  }
+}

package/src/composables/useClose/useClose.js

@@ -0,0 +1,13 @@
+import { useRouter } from 'vue-router';
+
+// eslint-disable-next-line import/prefer-default-export
+export const useClose = (name) => {
+  const router = useRouter();
+
+  function close() {
+    if (window.history.length === 1) window.close();
+    return router.push({ name });
+  }
+
+  return { close };
+};

package/src/composables/useValidate/useValidate.js

@@ -0,0 +1,10 @@
+import { useVuelidate } from '@vuelidate/core';
+
+export const useValidate = (schema, data) => {
+  const v$ = useVuelidate(schema, data, { $autoDirty: true });
+
+  return {
+    v$,
+    invalid: v$.$invalid,
+  };
+}

package/src/css/main.scss

@@ -1,5 +1,7 @@
 @import 'styleguide/styleguide';
 @import 'styleguide/display-helpers/display-helpers';
+@import 'pages/card-page';
+@import 'pages/table-page';
 
 @include wt-placeholder;
 
@@ -31,11 +33,6 @@ body {
   }
 }
 
-//main {
-//  min-height: 100%;
-//  height: 100%;
-//}
-
 h1, h2, h3, h4, h5, h6, p {
   margin: 0;
   font-weight: normal;

package/src/css/pages/card-page.scss

@@ -0,0 +1,47 @@
+.opened-card {
+    &.wt-page-wrapper {
+      width: 100%;
+    }
+
+    &-header {
+      position: relative;
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      margin: var(--spacing-sm) 0;
+
+      &__title {
+        @extend %typo-heading-3;
+
+        + .hint {
+          top: -2px;
+        }
+      }
+    }
+
+    &-form {
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+    }
+    &-input-grid {
+      display: grid;
+      align-items: flex-start;
+      grid-template-columns: 1fr 1fr;
+      grid-auto-rows: minmax(auto, auto);
+      grid-column-gap: var(--spacing-sm);
+      grid-row-gap: var(--spacing-xs);
+
+      &--1-col {
+        grid-template-columns: 1fr;
+      }
+
+      &--w50 {
+        width: 50%;
+      }
+      &--w100{
+        width: 100%;
+      }
+    }
+}

package/src/css/pages/table-page.scss

@@ -0,0 +1,67 @@
+.table-page{
+
+  &.wt-page-wrapper {
+    width: 100%;
+    height: 100%;
+
+    &__main {
+      min-height: 0;
+
+      .wt-loader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+
+  .table-section {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    &__table-wrapper {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      flex: 1 1 100%;
+      width: 100%;
+      gap: var(--spacing-sm);
+      min-height: 0;
+
+      .wt-table__head {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+
+      .wt-pagination {
+        margin-top: auto;
+      }
+    }
+  }
+
+  .table-title {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    margin: var(--spacing-sm) 0;
+
+    &__title {
+      @extend %typo-heading-3;
+
+      + .hint {
+        top: -2px;
+      }
+    }
+
+    &__actions-wrap {
+      display: flex;
+      align-items: center;
+      gap: var(--table-actions-icon-gap);
+    }
+  }
+}

package/src/enums/ComponentSize/ComponentSize.enum.js

@@ -0,0 +1,13 @@
+const ComponentSize = Object.freeze({
+  XXXS: '3xs',
+  XXS: '2xs',
+  XS: 'xs',
+  SM: 'sm',
+  MD: 'md',
+  LG: 'lg',
+  XL: 'xl',
+  XXL: '2xl',
+  XXXL: '3xl',
+});
+
+export default ComponentSize;

package/src/enums/index.js

@@ -0,0 +1,39 @@
+import AbstractUserStatus
+  from './AbstractUserStatus/AbstractUserStatus.enum.js';
+import AgentStatus from './AgentStatus/AgentStatus.enum.js';
+import ChatGatewayProvider
+  from './ChatGatewayProvider/ChatGatewayProvider.enum.js';
+import ComponentSize from './ComponentSize/ComponentSize.enum.js';
+import IconAction from './IconAction/IconAction.enum.js';
+import QueueType from './QueueType/QueueType.enum.js';
+import TypesExportedSettings
+  from './TypesExportedSettings/TypesExportedSettings.enum.js';
+
+// Webitel Applications group
+import AdminSections from './WebitelApplications/AdminSections.enum.js';
+import AuditorSections from './WebitelApplications/AuditorSections.enum.js';
+import CrmConfigurationSections
+  from './WebitelApplications/CrmConfigurationSections.enum.js';
+import CrmSections from './WebitelApplications/CrmSections.enum.js';
+import SupervisorSections
+  from './WebitelApplications/SupervisorSections.enum.js';
+import WebitelApplications
+  from './WebitelApplications/WebitelApplications.enum.js';
+
+export {
+  AbstractUserStatus,
+  AgentStatus,
+  ChatGatewayProvider,
+  ComponentSize,
+  IconAction,
+  QueueType,
+  TypesExportedSettings,
+
+  // Webitel Applications group
+  AdminSections,
+  AuditorSections,
+  CrmSections,
+  CrmConfigurationSections,
+  SupervisorSections,
+  WebitelApplications,
+};

package/src/scripts/compareSize.js

@@ -0,0 +1,64 @@
+import ComponentSize from '../enums/ComponentSize/ComponentSize.enum.js';
+
+const numerics = Object.values(ComponentSize).reduce((nums, size, index) => {
+  return {
+    ...nums,
+    [size]: index,
+  };
+}, {});
+
+/**
+ * Compare two sizes, returning a number indicating the difference between them.
+ *
+ * @param s1
+ * @param s2
+ * @returns {number}
+ *
+ * @example
+ * compareSize(ComponentSize.XS, ComponentSize.MD); // true
+ * compareSize(ComponentSize.LG, ComponentSize.SM); // false
+ */
+export const compareSize = (s1, s2) => {
+  return numerics[s1] - numerics[s2];
+};
+
+/**
+ * Check if s1 is smaller than s2
+ * @param s1
+ * @param s2
+ * @returns {boolean}
+ */
+
+export const smallerThen = (s1, s2) => {
+  return compareSize(s1, s2) < 0;
+};
+
+/**
+ * Check if s1 is smaller or equal to s2
+ * @param s1
+ * @param s2
+ * @returns {boolean}
+ */
+export const smallerOrEqual = (s1, s2) => {
+  return compareSize(s1, s2) <= 0;
+};
+
+/**
+ * Check if s1 is greater than s2
+ * @param s1
+ * @param s2
+ * @returns {boolean}
+ */
+export const greaterThen = (s1, s2) => {
+  return compareSize(s1, s2) > 0;
+};
+
+/**
+ * Check if s1 is greater or equal to s2
+ * @param s1
+ * @param s2
+ * @returns {boolean}
+ */
+export const greaterOrEqual = (s1, s2) => {
+  return compareSize(s1, s2) >= 0;
+};

package/src/components/wt-icon-action/_internals/__tests__/WtAddIconAction.spec.js

@@ -1,9 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import WtAddIconAction from '../wt-add-icon-action.vue';
-
-describe('WtAddIconAction', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(WtAddIconAction);
-    expect(wrapper.exists()).toBe(true);
-  });
-});

package/src/components/wt-icon-action/_internals/__tests__/WtDeleteIconAction.spec.js

@@ -1,9 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import WtDeleteIconAction from '../wt-delete-icon-action.vue';
-
-describe('WtDeleteIconAction', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(WtDeleteIconAction);
-    expect(wrapper.exists()).toBe(true);
-  });
-});

package/src/components/wt-icon-action/_internals/__tests__/WtDownloadIconAction.spec.js

@@ -1,9 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import WtDownloadIconAction from '../wt-download-icon-action.vue';
-
-describe('WtDownloadIconAction', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(WtDownloadIconAction);
-    expect(wrapper.exists()).toBe(true);
-  });
-});

package/src/components/wt-icon-action/_internals/__tests__/WtEditIconAction.spec.js

@@ -1,9 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import WtEditIconAction from '../wt-edit-icon-action.vue';
-
-describe('WtEditIconAction', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(WtEditIconAction);
-    expect(wrapper.exists()).toBe(true);
-  });
-});

package/src/components/wt-icon-action/_internals/__tests__/WtHistoryIconAction.spec.js

@@ -1,9 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import WtHistoryIconAction from '../wt-history-icon-action.vue';
-
-describe('WtHistoryIconAction', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(WtHistoryIconAction);
-    expect(wrapper.exists()).toBe(true);
-  });
-});

package/src/components/wt-icon-action/_internals/__tests__/WtRefreshIconAction.spec.js

@@ -1,9 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import WtRefreshIconAction from '../wt-refresh-icon-action.vue';
-
-describe('WtRefreshIconAction', () => {
-  it('renders a component', () => {
-    const wrapper = shallowMount(WtRefreshIconAction);
-    expect(wrapper.exists()).toBe(true);
-  });
-});

package/src/components/wt-icon-action/_internals/wt-add-icon-action.vue

@@ -1,27 +0,0 @@
-<template>
-  <wt-tooltip>
-    <template #activator>
-      <wt-icon-btn
-        :disabled="disabled"
-        icon="plus"
-        @click="emit('click')"
-      />
-    </template>
-    {{ $t('webitelUI.iconAction.addActionHint') }}
-  </wt-tooltip>
-</template>
-
-<script setup>
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['click']);
-</script>
-
-<style scoped>
-
-</style>

package/src/components/wt-icon-action/_internals/wt-delete-icon-action.vue

@@ -1,27 +0,0 @@
-<template>
-  <wt-tooltip>
-    <template #activator>
-      <wt-icon-btn
-        :disabled="disabled"
-        icon="bucket"
-        @click="emit('click')"
-      />
-    </template>
-    {{ $t('webitelUI.iconAction.deleteActionHint') }}
-  </wt-tooltip>
-</template>
-
-<script setup>
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['click']);
-</script>
-
-<style scoped>
-
-</style>

package/src/components/wt-icon-action/_internals/wt-download-icon-action.vue

@@ -1,27 +0,0 @@
-<template>
-  <wt-tooltip>
-    <template #activator>
-      <wt-icon-btn
-        :disabled="disabled"
-        icon="download"
-        @click="emit('click')"
-      />
-    </template>
-    {{ $t('webitelUI.iconAction.downloadActionHint') }}
-  </wt-tooltip>
-</template>
-
-<script setup>
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['click']);
-</script>
-
-<style scoped>
-
-</style>

package/src/components/wt-icon-action/_internals/wt-edit-icon-action.vue

@@ -1,27 +0,0 @@
-<template>
-  <wt-tooltip>
-    <template #activator>
-      <wt-icon-btn
-        :disabled="disabled"
-        icon="edit"
-        @click="emit('click')"
-      />
-    </template>
-    {{ $t('webitelUI.iconAction.editActionHint') }}
-  </wt-tooltip>
-</template>
-
-<script setup>
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['click']);
-</script>
-
-<style scoped>
-
-</style>

package/src/components/wt-icon-action/_internals/wt-history-icon-action.vue

@@ -1,27 +0,0 @@
-<template>
-  <wt-tooltip>
-    <template #activator>
-      <wt-icon-btn
-        :disabled="disabled"
-        icon="history"
-        @click="emit('click')"
-      />
-    </template>
-    {{ $t('webitelUI.iconAction.historyActionHint') }}
-  </wt-tooltip>
-</template>
-
-<script setup>
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['click']);
-</script>
-
-<style scoped>
-
-</style>

package/src/components/wt-icon-action/_internals/wt-refresh-icon-action.vue

@@ -1,27 +0,0 @@
-<template>
-  <wt-tooltip>
-    <template #activator>
-      <wt-icon-btn
-        :disabled="disabled"
-        icon="refresh"
-        @click="emit('click')"
-      />
-    </template>
-    {{ $t('reusable.refresh') }}
-  </wt-tooltip>
-</template>
-
-<script setup>
-const props = defineProps({
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
-
-const emit = defineEmits(['click']);
-</script>
-
-<style scoped>
-
-</style>