@webitel/ui-sdk 24.12.121 → 24.12.122

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

@@ -1,11 +1,21 @@
+import ActualReactionTimeFilter from './actual-reaction-time/actual-reaction-time-filter-value-field.vue';
+import ActualReactionTimeFilterPreview from './actual-reaction-time/actual-reaction-time-filter-value-preview.vue';
+import ActualResolutionTimeFilter from './actual-resolution-time/actual-resolution-time-filter-value-field.vue';
+import ActualResolutionTimeFilterPreview from './actual-resolution-time/actual-resolution-time-filter-value-preview.vue';
 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 AssigneeFilter from './assignee/assignee-filter-value-field.vue';
+import AssigneeFilterPreview from './assignee/assignee-filter-value-preview.vue';
+import AuthorFilter from './author/author-filter-value-field.vue';
+import AuthorFilterPreview from './author/author-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 ContactGroupFilter from './contact-group/contact-group-filter-value-field.vue';
+import ContactGroupFilterPreview from './contact-group/contact-group-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';
@@ -16,22 +26,48 @@ 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 HasAttachmentFilter from './has-attachment/has-attachment-filter-value-field.vue';
+import HasAttachmentFilterPreview from './has-attachment/has-attachment-filter-value-preview.vue';
+import HasFileFilter from './has-file/has-file-filter-value-preview.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 ImpactedFilter from './impacted/impacted-filter-value-field.vue';
+import ImpactedFilterPreview from './impacted/impacted-filter-value-preview.vue';
+import PriorityCaseFilter from './priority-case/priority-case-filter-value-field.vue';
+import PriorityCaseFilterPreview from './priority-case/priority-case-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 RatingFromToFilter from './rating/rating-from-to-filter-value-field.vue';
+import RatingFromToFilterPreview from './rating/rating-from-to-filter-value-preview.vue';
+import ReactionTimeFilter from './reaction-time/reaction-time-filter-value-field.vue';
+import ReactionTimeFilterPreview from './reaction-time/reaction-time-filter-value-preview.vue';
+import CloseReasonGroupsCaseFilter from './close-reason-groups-case/close-reason-groups-case-filter-value-field.vue';
+import CloseReasonGroupsCaseFilterPreview from './close-reason-groups-case/close-reason-groups-case-filter-value-preview.vue';
+import ReporterFilter from './reporter/reporter-filter-value-field.vue';
+import ReporterFilterPreview from './reporter/reporter-filter-value-preview.vue';
+import ResolutionTimeFilter from './resolution-time/resolution-time-filter-value-field.vue';
+import ResolutionTimeFilterPreview from './resolution-time/resolution-time-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 ServiceCaseFilter from './service-case/service-case-filter-value-field.vue';
+// import ServiceCaseFilterPreview from './service-case/service-case-filter-value-preview.vue';
+import SlaFilter from './sla/sla-filter-value-field.vue';
+import SlaFilterPreview from './sla/sla-filter-value-preview.vue';
+import SourceCaseFilter from './source-case/source-case-filter-value-field.vue';
+import SourceCaseFilterPreview from './source-case/source-case-filter-value-preview.vue';
+import SlaConditionFilter from './sla-condition/sla-condition-filter-value-field.vue';
+import SlaConditionFilterPreview from './sla-condition/sla-condition-filter-value-preview.vue';
+import StatusCaseFilter from './status-case/status-case-filter-value-field.vue';
+import StatusCaseFilterPreview from './status-case/status-case-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 TalkDurationFilter from './talk-duration/talk-duration-filter-value-field.vue';
+import TalkDurationFilterPreview 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';
@@ -42,14 +78,24 @@ import VariableFilter from './variable/variable-filter-value-field.vue';
 import VariableFilterPreview from './variable/variable-filter-value-preview.vue';
 
 export {
+  ActualReactionTimeFilter,
+  ActualReactionTimeFilterPreview,
+  ActualResolutionTimeFilter,
+  ActualResolutionTimeFilterPreview,
   AgentFilter,
   AgentFilterPreview,
   AmdResultFilter,
   AmdResultFilterPreview,
+  AssigneeFilter,
+  AssigneeFilterPreview,
+  AuthorFilter,
+  AuthorFilterPreview,
   CauseFilter,
   CauseFilterPreview,
   ContactFilter,
   ContactFilterPreview,
+  ContactGroupFilter,
+  ContactGroupFilterPreview,
   CreatedAtFromFilter,
   CreatedAtFromFilterPreview,
   CreatedAtToFilter,
@@ -60,22 +106,48 @@ export {
   GatewayFilterPreview,
   GranteeFilter,
   GranteeFilterPreview,
+  HasAttachmentFilter,
+  HasAttachmentFilterPreview,
   HasFileFilter,
   HasFileFilterPreview,
   HasTranscriptionFilter,
   HasTranscriptionFilterPreview,
+  ImpactedFilter,
+  ImpactedFilterPreview,
+  PriorityCaseFilter,
+  PriorityCaseFilterPreview,
   QueueFilter,
   QueueFilterPreview,
   RatedByFilter,
   RatedByFilterPreview,
   RatedFilter,
   RatedFilterPreview,
+  RatingFromToFilter,
+  RatingFromToFilterPreview,
+  ReactionTimeFilter,
+  ReactionTimeFilterPreview,
+  CloseReasonGroupsCaseFilter,
+  CloseReasonGroupsCaseFilterPreview,
+  ReporterFilter,
+  ReporterFilterPreview,
+  ResolutionTimeFilter,
+  ResolutionTimeFilterPreview,
   ScoreFilter,
   ScoreFilterPreview,
+  // ServiceCaseFilter,
+  // ServiceCaseFilterPreview,
+  SlaFilter,
+  SlaFilterPreview,
+  SlaConditionFilter,
+  SlaConditionFilterPreview,
+  SourceCaseFilter,
+  SourceCaseFilterPreview,
+  StatusCaseFilter,
+  StatusCaseFilterPreview,
   TagFilter,
   TagFilterPreview,
-  TalkDuration,
-  TalkDurationPreview,
+  TalkDurationFilter,
+  TalkDurationFilterPreview,
   TeamFilter,
   TeamFilterPreview,
   TotalDurationFilter,

package/src/modules/Filters/v2/filters/components/values/priority-case/config.js

@@ -0,0 +1,5 @@
+import CasePrioritiesAPI
+  from '../../../../../../../api/clients/casePriorities/casePriorities.js';
+
+export const searchMethod = CasePrioritiesAPI.getLookup;
+export const localePath = '';

package/src/modules/Filters/v2/filters/components/values/priority-case/priority-case-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"
+    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/priority-case/priority-case-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

@@ -1,6 +1,6 @@
 <template>
   <has-option-filter-value-field
-    :value="model"
+    :model-value="model"
     :v="v$.model"
     @update:model-value="model = $event"
   />

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

@@ -0,0 +1,89 @@
+<template>
+  <div class="rating-from-to-filter-value-field">
+    <wt-input
+      v-if="model"
+      :label="`${t('webitelUI.filters.filterValueFrom')}:`"
+      :number-min="0"
+      :placeholder="t('webitelUI.filters.filterValue')"
+      :v="v$.model?.from"
+      :value="model.from"
+      type="number"
+      @input="handleInput('from', $event)"
+    />
+
+    <wt-input
+      v-if="model"
+      :label="`${t('reusable.to').toLowerCase()}:`"
+      :number-min="0"
+      :placeholder="t('webitelUI.filters.filterValue')"
+      :v="v$.model?.to"
+      :value="model.to"
+      type="number"
+      @input="handleInput('to', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf, maxValue } 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 emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+
+const { t } = useI18n();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      from: {
+        requiredIf: requiredIf(() => !model.value.to),
+        maxValue: maxValue((model?.value?.to && model.value.from > model.value.to) ? model.value.to : Infinity),
+      },
+      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>
+.rating-from-to-filter-value-field {
+  display: flex;
+  align-items: center;
+  grid-gap: var(--spacing-xs);
+}
+</style>

package/src/modules/Filters/v2/filters/components/values/rating/rating-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/reaction-time/reaction-time-filter-value-field.vue

@@ -0,0 +1,18 @@
+<template>
+  <date-time-filter-value-field
+    :model-value="model"
+    @update:model-value="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import DateTimeFilterValueField from '../_shared/date-time-filter/date-time-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/reaction-time/reaction-time-filter-value-preview.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="reaction-time-filter-value-preview">
+    <div v-if="props.value.from">
+      <p class="reaction-time-filter-value-preview__title">
+        {{t('reusable.from')}}
+      </p>
+
+      <span>{{convertTimestampToDate(props.value.from)}}</span>
+    </div>
+
+    <div v-if="props.value.to">
+      <p class="reaction-time-filter-value-preview__title">
+        {{t('reusable.to')}}
+      </p>
+
+      <span>{{convertTimestampToDate(props.value.to)}}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useI18n} from "vue-i18n";
+import { format } from "date-fns";
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const { t } = useI18n();
+
+function convertTimestampToDate(value) {
+  return format(new Date(value), 'dd.MM.yyyy HH:mm');
+}
+</script>
+
+<style lang="scss" scoped>
+.reaction-time-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

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

@@ -0,0 +1,4 @@
+import ContactsAPI from '../../../../../../../api/clients/сontacts/contacts.js';
+
+export const searchMethod = ContactsAPI.getLookup;
+export const localePath = '';

package/src/modules/Filters/v2/filters/components/values/reporter/reporter-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"
+    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/reporter/reporter-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/resolution-time/resolution-time-filter-value-field.vue

@@ -0,0 +1,18 @@
+<template>
+  <date-time-filter-value-field
+    :model-value="model"
+    @update:model-value="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import DateTimeFilterValueField from '../_shared/date-time-filter/date-time-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/resolution-time/resolution-time-filter-value-preview.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="resolution-time-filter-value-preview">
+    <div v-if="props.value.from">
+      <p class="resolution-time-filter-value-preview__title">
+        {{t('reusable.from')}}
+      </p>
+
+      <span>{{convertTimestampToDate(props.value.from)}}</span>
+    </div>
+
+    <div v-if="props.value.to">
+      <p class="resolution-time-filter-value-preview__title">
+        {{t('reusable.to')}}
+      </p>
+
+      <span>{{convertTimestampToDate(props.value.to)}}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useI18n} from "vue-i18n";
+import { format } from "date-fns";
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const { t } = useI18n();
+
+function convertTimestampToDate(value) {
+  return format(new Date(value), 'dd.MM.yyyy HH:mm');
+}
+</script>
+
+<style lang="scss" scoped>
+.resolution-time-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

package/src/modules/Filters/v2/filters/components/values/service-case/config.js

@@ -0,0 +1,6 @@
+import ServiceCatalogsAPI from '../../../../../../../api/clients/caseServiceCatalogs/service-catalogs.js';
+import ServicesAPI from '../../../../../../../api/clients/caseServices/services.js';
+
+export const servicesSearchMethod = ServicesAPI.getLookup;
+export const serviceCatalogsSearchMethod = ServiceCatalogsAPI.getLookup;
+export const localePath = '';