@webitel/ui-sdk 24.12.102 → 24.12.115

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

@@ -0,0 +1,43 @@
+<template>
+  <has-option-filter-value-field
+    :value="model"
+    :v="v$.model"
+    @update:model-value="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed, watch } from 'vue';
+
+import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
+
+const model = defineModel<string>();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+
+v$.value.$touch();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+</script>
+
+<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/has-transcription/has-transcription-filter-value-preview.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>{{ localeValue }}</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { BooleanOptions } from '../../enums/boolean-options';
+
+const props = defineProps<{
+  value: boolean;
+}>();
+const { t } = useI18n();
+
+const localeValue = computed(() => {
+  const match = BooleanOptions.find((el) => el.value === props.value);
+  return match ? t(match.locale) : '';
+});
+</script>
+
+<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/index.js

@@ -0,0 +1,87 @@
+import AgentFilter from './agent/agent-filter-value-field.vue';
+import AgentFilterPreview from './agent/agent-filter-value-preview.vue';
+import AmdResultFilter from './amd-result/amd-result-filter-value-field.vue';
+import AmdResultFilterPreview from './amd-result/amd-result-filter-value-preview.vue';
+import CauseFilter from './cause/cause-filter-value-field.vue';
+import CauseFilterPreview from './cause/cause-filter-value-preview.vue';
+import ContactFilter from './contact/contact-filter-value-field.vue';
+import ContactFilterPreview from './contact/contact-filter-value-preview.vue';
+import CreatedAtFromFilter from './created-at-from/created-at-from-filter-value-field.vue';
+import CreatedAtFromFilterPreview from './created-at-from/created-at-from-filter-value-preview.vue';
+import CreatedAtToFilter from './created-at-to/created-at-to-filter-value-field.vue';
+import CreatedAtToFilterPreview from './created-at-to/created-at-to-filter-value-preview.vue';
+import DirectionFilter from './direction/direction-filter-value-field.vue';
+import DirectionFilterPreview from './direction/direction-filter-value-preview.vue';
+import GatewayFilter from './gateway/gateway-filter-value-field.vue';
+import GatewayFilterPreview from './gateway/gateway-filter-value-preview.vue';
+import GranteeFilter from './grantee/grantee-filter-value-field.vue';
+import GranteeFilterPreview from './grantee/grantee-filter-value-preview.vue';
+import HasFileFilter from './has-file/has-file-filter-value-field.vue';
+import HasFileFilterPreview from './has-file/has-file-filter-value-preview.vue';
+import HasTranscriptionFilter from './has-transcription/has-transcription-filter-value-field.vue';
+import HasTranscriptionFilterPreview from './has-transcription/has-transcription-filter-value-preview.vue';
+import QueueFilter from './queue/queue-filter-value-field.vue';
+import QueueFilterPreview from './queue/queue-filter-value-preview.vue';
+import RatedFilter from './rated/rated-filter-value-field.vue';
+import RatedFilterPreview from './rated/rated-filter-value-preview.vue';
+import RatedByFilter from './rated-by/rated-by-filter-value-field.vue';
+import RatedByFilterPreview from './rated-by/rated-by-filter-value-preview.vue';
+import ScoreFilter from './score/score-from-to-filter-value-field.vue';
+import ScoreFilterPreview from './score/score-from-to-filter-value-preview.vue';
+import TagFilter from './tag/tag-filter-value-field.vue';
+import TagFilterPreview from './tag/tag-filter-value-preview.vue';
+import TalkDuration from './talk-duration/talk-duration-filter-value-field.vue';
+import TalkDurationPreview from './talk-duration/talk-duration-filter-value-preview.vue';
+import TeamFilter from './team/team-filter-value-field.vue';
+import TeamFilterPreview from './team/team-filter-value-preview.vue';
+import TotalDurationFilter from './total-duration/total-duration-filter-value-field.vue';
+import TotalDurationFilterPreview from './total-duration/total-duration-filter-value-preview.vue';
+import UserFilter from './user/user-filter-value-field.vue';
+import UserFilterPreview from './user/user-filter-value-preview.vue';
+import VariableFilter from './variable/variable-filter-value-field.vue';
+import VariableFilterPreview from './variable/variable-filter-value-preview.vue';
+
+export {
+  AgentFilter,
+  AgentFilterPreview,
+  AmdResultFilter,
+  AmdResultFilterPreview,
+  CauseFilter,
+  CauseFilterPreview,
+  ContactFilter,
+  ContactFilterPreview,
+  CreatedAtFromFilter,
+  CreatedAtFromFilterPreview,
+  CreatedAtToFilter,
+  CreatedAtToFilterPreview,
+  DirectionFilter,
+  DirectionFilterPreview,
+  GatewayFilter,
+  GatewayFilterPreview,
+  GranteeFilter,
+  GranteeFilterPreview,
+  HasFileFilter,
+  HasFileFilterPreview,
+  HasTranscriptionFilter,
+  HasTranscriptionFilterPreview,
+  QueueFilter,
+  QueueFilterPreview,
+  RatedByFilter,
+  RatedByFilterPreview,
+  RatedFilter,
+  RatedFilterPreview,
+  ScoreFilter,
+  ScoreFilterPreview,
+  TagFilter,
+  TagFilterPreview,
+  TalkDuration,
+  TalkDurationPreview,
+  TeamFilter,
+  TeamFilterPreview,
+  TotalDurationFilter,
+  TotalDurationFilterPreview,
+  UserFilter,
+  UserFilterPreview,
+  VariableFilter,
+  VariableFilterPreview,
+};

package/src/modules/Filters/v2/filters/components/values/queue/config.js

@@ -0,0 +1,4 @@
+import QueuesAPI from '../../../../../../../api/clients/queues/queues.js';
+
+export const searchMethod = QueuesAPI.getLookup;
+export const localePath = '';

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

@@ -0,0 +1,56 @@
+<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>

package/src/modules/Filters/v2/filters/components/values/queue/queue-filter-value-preview.vue

@@ -0,0 +1,32 @@
+<template>
+  <ul
+    v-if="localValue">
+    <li
+      v-for="({ name }, index) of localValue"
+      :key="index"
+    >
+      {{ name }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { searchMethod } from './config.js';
+import {ref} from 'vue';
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const localValue = ref([]);
+
+const getLocalValue = async () => {
+  const { items } = await searchMethod({id: props.value});
+  localValue.value = items;
+};
+
+getLocalValue();
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -0,0 +1,43 @@
+<template>
+  <has-option-filter-value-field
+    :value="model"
+    :v="v$.model"
+    @update:model-value="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed, watch } from 'vue';
+
+import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
+
+const model = defineModel<string>();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+
+v$.value.$touch();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+</script>
+
+<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/rated/rated-filter-value-preview.vue

@@ -0,0 +1,22 @@
+<template>
+  <div>{{ localeValue }}</div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { BooleanOptions } from '../../enums/boolean-options';
+
+const props = defineProps<{
+  value: boolean;
+}>();
+const { t } = useI18n();
+
+const localeValue = computed(() => {
+  const match = BooleanOptions.find((el) => el.value === props.value);
+  return match ? t(match.locale) : '';
+});
+</script>
+
+<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/rated-by/config.js

@@ -0,0 +1,4 @@
+import UsersAPI from '../../../../../../../api/clients/users/users.js';
+
+export const searchMethod = UsersAPI.getLookup;
+export const localePath = '';

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

@@ -0,0 +1,56 @@
+<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>

package/src/modules/Filters/v2/filters/components/values/rated-by/rated-by-filter-value-preview.vue

@@ -0,0 +1,32 @@
+<template>
+  <ul
+    v-if="localValue">
+    <li
+      v-for="({ name }, index) of localValue"
+      :key="index"
+    >
+      {{ name }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { searchMethod } from './config.js';
+import {ref} from 'vue';
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const localValue = ref([]);
+
+const getLocalValue = async () => {
+  const { items } = await searchMethod({id: props.value});
+  localValue.value = items;
+};
+
+getLocalValue();
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/modules/Filters/v2/filters/components/values/score/score-from-to-filter-value-field.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="score-from-to-filter-value-field">
+    <wt-input
+      v-if="model"
+      :value="model.from"
+      :number-max="props.numberMax"
+      :number-min="0"
+      :v="v$.model?.from"
+      :label="`${t('webitelUI.filters.filterValueFrom')}:`"
+      :placeholder="t('webitelUI.filters.filterValue')"
+      class="score-from-to-filter-value-field__input"
+      name="score-from-to-filter-value-field-from"
+      type="number"
+      @input="handleInput('from', $event)"
+    />
+
+    <wt-input
+      v-if="model"
+      :value="model.to"
+      :number-max="props.numberMax"
+      :number-min="0"
+      :v="v$.model?.to"
+      :label="`${t('reusable.to').toLowerCase()}:`"
+      :placeholder="t('webitelUI.filters.filterValue')"
+      class="score-from-to-filter-value-field__input"
+      name="score-from-to-filter-value-field-to"
+      type="number"
+      @input="handleInput('to', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from '@vuelidate/validators';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+type ModelValue = {
+  from: number;
+  to: number;
+};
+const model = defineModel<ModelValue>();
+if (!model.value) {
+  model.value = {
+    from: null,
+    to: null,
+  };
+}
+
+const props = withDefaults(
+  defineProps<{
+    numberMax: number;
+  }>(),
+  {
+    numberMax: 100,
+  },
+);
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+
+const { t } = useI18n();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      from: { requiredIf: requiredIf(() => !model.value.to) },
+      to: { requiredIf: requiredIf(() => !model.value.from) },
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+const handleInput = (key: keyof ModelValue, value: number) => {
+  const newValue = { ...model.value };
+  newValue[key] = value;
+  model.value = newValue;
+};
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+</script>
+
+<style lang="scss" scoped>
+.score-from-to-filter-value-field {
+  display: flex;
+  align-items: center;
+  grid-gap: var(--spacing-xs);
+}
+</style>

package/src/modules/Filters/v2/filters/components/values/score/score-from-to-filter-value-preview.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="score-from-to-filter-value-preview">
+    <div v-if="props.value.from">
+      <p class="score-from-to-filter-value-preview__title">
+        {{t('reusable.from')}}
+      </p>
+
+      <span>{{props.value.from}}</span>
+    </div>
+
+    <div v-if="props.value.to">
+      <p class="score-from-to-filter-value-preview__title">
+        {{t('reusable.to')}}
+      </p>
+
+      <span>{{props.value.to}}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useI18n} from "vue-i18n";
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const { t } = useI18n();
+</script>
+
+<style lang="scss" scoped>
+.score-from-to-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

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

@@ -0,0 +1,52 @@
+<template>
+  <wt-select
+    :clearable="false"
+    :label="t('webitelUI.filters.filterValue')"
+    :options="TagOptions"
+    :value="model"
+    :v="v$.model"
+    multiple
+    track-by="value"
+    use-value-from-options-by-prop="value"
+    @input="model = $event"
+  />
+</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 { TagOptions } from '../../enums/tag-options';
+
+const model = defineModel<string>();
+const { t } = useI18n();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+
+v$.value.$touch();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+</script>
+
+<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/tag/tag-filter-value-preview.vue

@@ -0,0 +1,18 @@
+<template>
+  <ul>
+    <li
+      v-for="(tag, index) of value"
+      :key="index"
+    >
+      {{ tag }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  value: number[];
+}>();
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,19 @@
+<template>
+  <duration-filter-value-field
+    :value="model"
+    @update:model-value="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import DurationFilterValueField from '../_shared/durations/duration-filter-value-field.vue';
+
+type ModelValue = {
+  from: number;
+  to: number;
+};
+
+const model = defineModel<ModelValue>();
+</script>
+
+<style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/talk-duration/talk-duration-filter-value-preview.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="talk-duration-filter-value-preview">
+    <div v-if="props.value.from">
+      <p class="talk-duration-filter-value-preview__title">
+        {{t('reusable.from')}}
+      </p>
+
+      <span>{{formatTime(props.value.from)}}</span>
+    </div>
+
+    <div v-if="props.value.to">
+      <p class="talk-duration-filter-value-preview__title">
+        {{t('reusable.to')}}
+      </p>
+
+      <span>{{formatTime(props.value.to)}}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useI18n} from "vue-i18n";
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const { t } = useI18n();
+
+const formatTime = (value) => {
+  const minutes = Math.floor(value / 60);
+  const seconds = value % 60;
+
+  return `${t('webitelUI.timepicker.min')} ${minutes} ${t('webitelUI.timepicker.sec')} ${seconds}`;
+}
+</script>
+
+<style lang="scss" scoped>
+.duration-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>