@webitel/ui-sdk 24.12.101 → 24.12.115

package/src/modules/Filters/v2/filters/components/config/dynamic-filter-config-form.vue

@@ -5,8 +5,10 @@
       :label="t('webitelUI.filters.filterName')"
       :options="options"
       :value="filterName"
-      use-value-from-options-by-prop="id"
-      @input="filterName = $event"
+      :clearable="false"
+      track-by="value"
+      use-value-from-options-by-prop="value"
+      @input="onFilterNameUpdate($event)"
     />
 
     <slot
@@ -22,7 +24,7 @@
 
     <dynamic-filter-config-form-label
       :value="filterLabel"
-      @update:value="onLabelValueUpdate"
+      @update:model-value="onLabelValueUpdate"
       @update:invalid="(v) => (invalid = v)"
     />
 
@@ -51,13 +53,9 @@ import deepcopy from 'deep-copy';
 import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import WtButton from '../../../../../../../components/wt-button/wt-button.vue';
-import WtSelect from '../../../../../../../components/wt-select/wt-select.vue';
-import type {
-  FilterInitParams,
-  FilterName,
-  IFilter,
-} from '../../../types/Filter';
+import WtButton from '../../../../../../components/wt-button/wt-button.vue';
+import WtSelect from '../../../../../../components/wt-select/wt-select.vue';
+import type { FilterInitParams, FilterName, IFilter } from '../../types/Filter';
 import DynamicFilterConfigFormLabel from './dynamic-filter-config-form-label.vue';
 
 interface FilterNameSelectRepresentation {
@@ -100,6 +98,11 @@ const onLabelValueUpdate = (val: string) => {
   touchedLabel.value = true;
 };
 
+const onFilterNameUpdate = (val: string) => {
+  filterName.value = val;
+  filterValue.value = null;
+};
+
 const submit = () => {
   emit('submit', {
     name: filterName.value,

package/src/modules/Filters/v2/filters/components/dynamic-filter-add-action.vue

@@ -9,8 +9,13 @@
       </div>
     </template>
 
-    <template #content>
-      <slot name="form"> filter form should be here</slot>
+    <template #content="slotScope">
+      <slot
+        name="form"
+        v-bind="slotScope"
+      >
+        filter form should be here
+      </slot>
     </template>
   </dynamic-filter-config-view>
 </template>
@@ -31,12 +36,16 @@ const { t } = useI18n();
 </script>
 
 <style lang="scss" scoped>
-.dynamic-filter-add-action-wrapper {
+.dynamic-filter-add-action {
   display: flex;
-  align-items: center;
-  justify-content: center;
-  width: fit-content;
-  cursor: pointer;
-  gap: var(--spacing-2xs);
+
+  &-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+    cursor: pointer;
+    gap: var(--spacing-2xs);
+  }
 }
 </style>

package/src/modules/Filters/v2/filters/components/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/modules/Filters/v2/filters/components/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.js';
+
+export const BooleanOptions: Array<FilterEnumOption> = [
+  {
+    locale: 'vocabulary.yes',
+    value: true,
+  },
+  {
+    locale: 'vocabulary.no',
+    value: false,
+  },
+] as const;

package/src/modules/Filters/v2/filters/components/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/modules/Filters/v2/filters/components/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/modules/Filters/v2/filters/components/enums/tag-options.ts

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

package/src/modules/Filters/v2/filters/components/preview/dynamic-filter-preview-info.vue

@@ -1,38 +1,19 @@
 <template>
   <section class="dynamic-filter-preview-info">
-    <header class="dynamic-filter-preview-info-header">
-      {{ props.name }}
+    <header class="dynamic-filter-preview-info__header">
+      <slot name="header"/>
     </header>
 
     <wt-divider />
 
-    <!--    TODO: how to visually represent id/value types? -->
-    <ul v-if="isArrayValue">
-      <li
-        v-for="(el, index) of value"
-        :key="index"
-      >
-        {{ el }}
-      </li>
-    </ul>
+    <div class="dynamic-filter-preview-info__body">
+      <slot name="default" />
+    </div>
 
-    <article v-else>
-      {{ props.value }}
-    </article>
   </section>
 </template>
 
 <script lang="ts" setup>
-import type { FilterName, FilterValue } from '../../types/Filter';
-
-interface Props {
-  name: FilterName;
-  value: FilterValue;
-}
-
-const props = defineProps<Props>();
-
-const isArrayValue = Array.isArray(props.value);
 </script>
 
 <style lang="scss" scoped>
@@ -40,9 +21,15 @@ const isArrayValue = Array.isArray(props.value);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xs);
-}
 
-.dynamic-filter-preview-info-header {
-  @extend %typo-subtitle-1;
+  &__header {
+    @extend %typo-subtitle-1;
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-xs);
+  }
 }
 </style>

package/src/modules/Filters/v2/filters/components/preview/dynamic-filter-preview.vue

@@ -4,7 +4,7 @@
       <wt-tooltip :disabled="configFormVisible">
         <template #activator>
           <wt-chip color="primary">
-            {{ props.filter.label || props.filter.name }}
+            {{ props.filter.label || t(`webitelUI.filters.${props.filter.name}`) }}
             <wt-icon-btn
               icon="close--filled"
               size="sm"
@@ -14,10 +14,16 @@
         </template>
 
         <template #default>
-          <dynamic-filter-preview-info
-            :name="props.filter.name"
-            :value="props.filter.value"
-          />
+          <dynamic-filter-preview-info>
+            <template #header>
+              {{ t(`webitelUI.filters.${props.filter.name}`) }}
+            </template>
+
+            <template>
+              <slot name="info" />
+            </template>
+          </dynamic-filter-preview-info>
+
         </template>
       </wt-tooltip>
     </template>
@@ -34,12 +40,15 @@ import WtIconBtn from '../../../../../../components/wt-icon-btn/wt-icon-btn.vue'
 import WtTooltip from '../../../../../../components/wt-tooltip/wt-tooltip.vue';
 import type { IFilter } from '../../types/Filter';
 import DynamicFilterConfigView from '../config/dynamic-filter-config-view.vue';
-import DynamicFilterPreviewInfo from './dynamic-filter-preview-info.vue';
+import DynamicFilterPreviewInfo from "./dynamic-filter-preview-info.vue";
+import {useI18n} from "vue-i18n";
 
 interface Props {
   filter: IFilter;
 }
 
+const { t } = useI18n();
+
 const props = defineProps<Props>();
 
 const emit = defineEmits<{

package/src/modules/Filters/v2/filters/components/values/_shared/durations/duration-filter-value-field.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="duration-filter">
+    <wt-timepicker
+      v-if="model"
+      :label="t('reusable.from')"
+      :value="model.from"
+      format="mm:ss"
+      @input="handleInput('from', $event)"
+    />
+    <wt-timepicker
+      v-if="model"
+      :label="t('reusable.to')"
+      :value="model.to"
+      format="mm:ss"
+      @input="handleInput('to', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useI18n} from "vue-i18n";
+
+const {t} = useI18n();
+
+type ModelValue = {
+  from: number;
+  to: number;
+};
+
+const model = defineModel<ModelValue>();
+
+if (!model.value) {
+  model.value = {
+    from: 0,
+    to: 0,
+  };
+}
+
+const handleInput = (key: keyof ModelValue, value: number) => {
+  const newValue = { ...model.value };
+  newValue[key] = value;
+  model.value = newValue;
+};
+</script>
+
+<style lang="scss" scoped>
+//.duration-filter {}
+</style>

package/src/modules/Filters/v2/filters/components/values/_shared/has-options/has-option-filter-value-field.vue

@@ -0,0 +1,29 @@
+<template>
+  <wt-select
+    v-bind="attrs"
+    :clearable="false"
+    :options="BooleanOptions"
+    :value="model"
+    :label="t('webitelUI.filters.filterValue')"
+    class="has-option-filter-value-field"
+    track-by="value"
+    use-value-from-options-by-prop="value"
+    @input="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useAttrs } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import WtSelect from '../../../../../../../../components/wt-select/wt-select.vue';
+import { BooleanOptions } from '../../../enums/boolean-options';
+
+const model = defineModel<string>();
+
+const attrs = useAttrs();
+
+const { t } = useI18n();
+</script>
+
+<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/agent/agent-filter-value-field.vue

@@ -0,0 +1,57 @@
+<template>
+  <wt-select
+    :close-on-select="false"
+    :label="t('webitelUI.filters.filterValue')"
+    :search-method="searchMethod"
+    :value="model"
+    :v="v$.model"
+    multiple
+    use-value-from-options-by-prop="id"
+    @input="handleInput"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import WtSelect from '../../../../../../../components/wt-select/wt-select.vue';
+import { searchMethod } from './config.js';
+
+type ModelValue = number[];
+
+const model = defineModel<ModelValue>();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+
+const { t } = useI18n();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+
+const handleInput = (value: ModelValue) => {
+  model.value = value;
+};
+</script>
+
+<style lang="scss" scoped></style>