@webitel/ui-datalist 1.0.82 → 1.0.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.82",
+  "version": "1.0.83",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "make-all": "npm version patch --git-tag-version false && ( npm run lint:fix || true) && (npm run build:types || true) && npm run utils:publish",

package/src/modules/filters/modules/filterConfig/components/agent-status/agent-status-filter-value-field.vue

@@ -0,0 +1,68 @@
+<template>
+  <wt-select
+    :label="labelValue"
+    :options="options"
+    :value="model"
+    :v="!disableValidation && v$.model"
+    track-by="value"
+    multiple
+    option-label="label"
+    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 { WtSelect } from '@webitel/ui-sdk/components';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { useAgentStatusOptions } from '../../composables/useAgentStatusOptions';
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+
+const model = defineModel<string>();
+const { t } = useI18n();
+
+const props = defineProps<{
+  filterConfig?: WtSysTypeFilterConfig,
+  disableValidation?: boolean;
+}>();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+
+v$.value.$touch();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+
+const labelValue = computed(() =>
+  t(`webitelUI.filters.${props?.filterConfig?.showFilterName ?
+    props?.filterConfig.name : 'filterValue'}`));
+
+const { options } = useAgentStatusOptions();
+
+onMounted(() => {
+  if (!props?.disableValidation) v$.value.$touch();
+});
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/agent-status/agent-status-filter-value-preview.vue

@@ -0,0 +1,35 @@
+<template>
+  <ul>
+    <li
+      v-for="({ label }, index) of arrayValues"
+      :key="index"
+    >
+      {{ label }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { useAgentStatusOptions } from '../../composables/useAgentStatusOptions';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const { options } = useAgentStatusOptions();
+
+const arrayLabels = computed(() =>
+  options.value.reduce((acc, { value, label }) => {
+    acc[value] = label;
+    return acc;
+  }, {})
+);
+
+const arrayValues = computed(() =>
+  props.value.map((v) => arrayLabels.value[v] || v)
+);
+
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/auditor/auditor-filter-value-field.vue

@@ -0,0 +1,69 @@
+<template>
+  <wt-select
+    :close-on-select="false"
+    :label="labelValue"
+    :search-method="props.filterConfig.searchRecords"
+    :value="model"
+    :v="!disableValidation && 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 { WtSelect } from '@webitel/ui-sdk/components';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+
+type ModelValue = number[];
+
+const props = defineProps<{
+  filterConfig: WtSysTypeFilterConfig;
+  disableValidation?: boolean;
+}>();
+
+const model = defineModel<ModelValue>();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+const { t } = useI18n();
+
+const labelValue = computed(() =>
+  t(`webitelUI.filters.${props?.filterConfig?.showFilterName ?
+    props?.filterConfig.name : 'filterValue'}`))
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+onMounted(() => {
+  if (!props?.disableValidation) v$.value.$touch();
+});
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+
+const handleInput = (value: ModelValue) => {
+  model.value = value;
+};
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/auditor/auditor-filter-value-preview.vue

@@ -0,0 +1,15 @@
+<template>
+  <lookup-filter-value-preview v-bind="props" />
+</template>
+
+<script lang="ts" setup>
+import type { EngineQueue } from 'webitel-sdk';
+
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
+
+const props = defineProps<{
+  value: EngineQueue[];
+}>();
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/auditor/index.ts

@@ -0,0 +1,21 @@
+import { UsersAPI } from '@webitel/api-services/api';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+import { FilterOption } from '../../enums/FilterOption';
+import AuditorFilterValueField from './auditor-filter-value-field.vue';
+import AuditorFilterValuePreview from './auditor-filter-value-preview.vue';
+
+class AuditorFilterConfig extends WtSysTypeFilterConfig {
+  readonly name = FilterOption.Auditor;
+  valueInputComponent = AuditorFilterValueField;
+  valuePreviewComponent = AuditorFilterValuePreview;
+
+  searchRecords(
+    params: object
+  ): Promise<{ items: unknown[]; next?: boolean }> {
+    return UsersAPI.getLookup(params);
+  }
+}
+
+export const createAuditorFilterConfig = (params) =>
+  new AuditorFilterConfig(params);

package/src/modules/filters/modules/filterConfig/components/index.ts

@@ -111,10 +111,38 @@ import VariableFilter from './variable/variable-filter-value-field.vue';
 import VariableFilterPreview from './variable/variable-filter-value-preview.vue';
 import { createTeamFilterConfig } from './team';
 import { createQueueFilterConfig } from './queue';
+import AgentStatusFilter from './agent-status/agent-status-filter-value-field.vue';
+import AgentStatusFilterPreview from './agent-status/agent-status-filter-value-preview.vue';
+import SkillFilter from './skill/skill-filter-value-field.vue';
+import SkillFilterPreview from './skill/skill-filter-value-preview.vue';
+import { createSkillFilterConfig } from './skill';
+import SupervisorFilter from './supervisor/supervisor-filter-value-field.vue';
+import SupervisorFilterPreview from './supervisor/supervisor-filter-value-preview.vue';
+import { createSupervisorFilterConfig } from './supervisor';
+import AuditorFilter from './auditor/auditor-filter-value-field.vue';
+import AuditorFilterPreview from './auditor/auditor-filter-value-preview.vue';
+import { createAuditorFilterConfig } from './auditor';
+import RegionFilter from './region/region-filter-value-field.vue';
+import RegionFilterPreview from './region/region-filter-value-preview.vue';
+import { createRegionFilterConfig } from './region';
+import UtilizationProgressFilter from './utilization-progress/utilization-progress-filter-value-field.vue';
+import UtilizationProgressFilterPreview from './utilization-progress/utilization-progress-filter-value-preview.vue';
 
 export {
   AgentFilter,
   AgentFilterPreview,
+  SkillFilter,
+  SkillFilterPreview,
+  SupervisorFilter,
+  SupervisorFilterPreview,
+  AuditorFilter,
+  AuditorFilterPreview,
+  RegionFilter,
+  RegionFilterPreview,
+  AgentStatusFilter,
+  AgentStatusFilterPreview,
+  UtilizationProgressFilter,
+  UtilizationProgressFilterPreview,
   AmdResultFilter,
   AmdResultFilterPreview,
   CallDirectionFilterValueField,
@@ -203,6 +231,12 @@ export const FilterOptionToValueComponentMap: Record<
   Component
 > = {
   [FilterOption.Agent]: AgentFilter,
+  [FilterOption.AgentStatus]: AgentStatusFilter,
+  [FilterOption.UtilizationProgress]: UtilizationProgressFilter,
+  [FilterOption.Skill]: SkillFilter,
+  [FilterOption.Region]: RegionFilter,
+  [FilterOption.Auditor]: AuditorFilter,
+  [FilterOption.Supervisor]: SupervisorFilter,
   [FilterOption.AmdResult]: AmdResultFilter,
   [FilterOption.Contact]: ContactFilter,
   [FilterOption.CallDirection]: CallDirectionFilterValueField,
@@ -250,6 +284,12 @@ export const FilterOptionToPreviewComponentMap: Record<
 > = {
   [FilterOption.CreatedAt]: DateTimeOptionsFilterValuePreview,
   [FilterOption.Agent]: AgentFilterPreview,
+  [FilterOption.Region]: RegionFilterPreview,
+  [FilterOption.UtilizationProgress]: UtilizationProgressFilterPreview,
+  [FilterOption.Auditor]: AuditorFilterPreview,
+  [FilterOption.Supervisor]: SupervisorFilterPreview,
+  [FilterOption.Skill]: SkillFilterPreview,
+  [FilterOption.AgentStatus]: AgentStatusFilterPreview,
   [FilterOption.AmdResult]: AmdResultFilterPreview,
   [FilterOption.Contact]: ContactFilterPreview,
   [FilterOption.CallDirection]: CallDirectionFilterValuePreview,
@@ -336,4 +376,8 @@ export const FilterOptionToFilterConfigCreatorMap = {
   [FilterOption.ContactGroup]: createContactGroupFilterConfig,
   [FilterOption.Team]: createTeamFilterConfig,
   [FilterOption.Queue]: createQueueFilterConfig,
+  [FilterOption.Skill]: createSkillFilterConfig,
+  [FilterOption.Supervisor]: createSupervisorFilterConfig,
+  [FilterOption.Auditor]: createAuditorFilterConfig,
+  [FilterOption.Region]: createRegionFilterConfig,
 };

package/src/modules/filters/modules/filterConfig/components/queue-period/queue-period-filter-value-field.vue

@@ -5,6 +5,7 @@
     :value="model"
     :v="!disableValidation && v$.model"
     track-by="value"
+    multiple
     option-label="label"
     use-value-from-options-by-prop="value"
     @input="model = $event"

package/src/modules/filters/modules/filterConfig/components/queue-type/queue-type-filter-value-field.vue

@@ -6,6 +6,7 @@
     :v="!disableValidation && v$.model"
     track-by="value"
     option-label="label"
+    multiple
     use-value-from-options-by-prop="value"
     @input="model = $event"
   />

package/src/modules/filters/modules/filterConfig/components/region/index.ts

@@ -0,0 +1,20 @@
+import { RegionsAPI } from '@webitel/api-services/api';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+import { FilterOption } from '../../enums/FilterOption';
+import RegionFilterValueField from './region-filter-value-field.vue';
+import RegionFilterValuePreview from './region-filter-value-preview.vue';
+
+class RegionFilterConfig extends WtSysTypeFilterConfig {
+  readonly name = FilterOption.Region;
+  valueInputComponent = RegionFilterValueField;
+  valuePreviewComponent = RegionFilterValuePreview;
+  searchRecords(
+    params: object
+  ): Promise<{ items: unknown[]; next?: boolean }> {
+    return RegionsAPI.getLookup(params);
+  }
+}
+
+export const createRegionFilterConfig = (params) =>
+  new RegionFilterConfig(params);

package/src/modules/filters/modules/filterConfig/components/region/region-filter-value-field.vue

@@ -0,0 +1,69 @@
+<template>
+  <wt-select
+    :close-on-select="false"
+    :label="labelValue"
+    :search-method="props.filterConfig.searchRecords"
+    :value="model"
+    :v="!disableValidation && 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 { WtSelect } from '@webitel/ui-sdk/components';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+
+type ModelValue = number[];
+
+const props = defineProps<{
+  filterConfig: WtSysTypeFilterConfig;
+  disableValidation?: boolean;
+}>();
+
+const model = defineModel<ModelValue>();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+const { t } = useI18n();
+
+const labelValue = computed(() =>
+  t(`webitelUI.filters.${props?.filterConfig?.showFilterName ?
+    props?.filterConfig.name : 'filterValue'}`))
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+onMounted(() => {
+  if (!props?.disableValidation) v$.value.$touch();
+});
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+
+const handleInput = (value: ModelValue) => {
+  model.value = value;
+};
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/region/region-filter-value-preview.vue

@@ -0,0 +1,15 @@
+<template>
+  <lookup-filter-value-preview v-bind="props" />
+</template>
+
+<script lang="ts" setup>
+import type { EngineQueue } from 'webitel-sdk';
+
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
+
+const props = defineProps<{
+  value: EngineQueue[];
+}>();
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/skill/index.ts

@@ -0,0 +1,21 @@
+import { SkillsAPI } from '@webitel/api-services/api';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+import { FilterOption } from '../../enums/FilterOption';
+import SkillFilterValueField from './skill-filter-value-field.vue';
+import SkillFilterValuePreview from './skill-filter-value-preview.vue';
+
+class SkillFilterConfig extends WtSysTypeFilterConfig {
+  readonly name = FilterOption.Skill;
+  valueInputComponent = SkillFilterValueField;
+  valuePreviewComponent = SkillFilterValuePreview;
+
+  searchRecords(
+    params: object
+  ): Promise<{ items: unknown[]; next?: boolean }> {
+    return SkillsAPI.getLookup(params);
+  }
+}
+
+export const createSkillFilterConfig = (params) =>
+  new SkillFilterConfig(params);

package/src/modules/filters/modules/filterConfig/components/skill/skill-filter-value-field.vue

@@ -0,0 +1,69 @@
+<template>
+  <wt-select
+    :close-on-select="false"
+    :label="labelValue"
+    :search-method="props.filterConfig.searchRecords"
+    :value="model"
+    :v="!disableValidation && 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 { WtSelect } from '@webitel/ui-sdk/components';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+
+type ModelValue = number[];
+
+const props = defineProps<{
+  filterConfig: WtSysTypeFilterConfig;
+  disableValidation?: boolean;
+}>();
+
+const model = defineModel<ModelValue>();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+const { t } = useI18n();
+
+const labelValue = computed(() =>
+  t(`webitelUI.filters.${props?.filterConfig?.showFilterName ?
+    props?.filterConfig.name : 'filterValue'}`))
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+onMounted(() => {
+  if (!props?.disableValidation) v$.value.$touch();
+});
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+
+const handleInput = (value: ModelValue) => {
+  model.value = value;
+};
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/skill/skill-filter-value-preview.vue

@@ -0,0 +1,15 @@
+<template>
+  <lookup-filter-value-preview v-bind="props" />
+</template>
+
+<script lang="ts" setup>
+import type { EngineQueue } from 'webitel-sdk';
+
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
+
+const props = defineProps<{
+  value: EngineQueue[];
+}>();
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/supervisor/index.ts

@@ -0,0 +1,21 @@
+import { AgentsAPI } from '@webitel/api-services/api';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+import { FilterOption } from '../../enums/FilterOption';
+import SupervisorFilterValueField from './supervisor-filter-value-field.vue';
+import SupervisorFilterValuePreview from './supervisor-filter-value-preview.vue';
+
+class SupervisorFilterConfig extends WtSysTypeFilterConfig {
+  readonly name = FilterOption.Supervisor;
+  valueInputComponent = SupervisorFilterValueField;
+  valuePreviewComponent = SupervisorFilterValuePreview;
+
+  searchRecords(
+    params: object
+  ): Promise<{ items: unknown[]; next?: boolean }> {
+    return AgentsAPI.getSupervisorOptions(params);
+  }
+}
+
+export const createSupervisorFilterConfig = (params) =>
+  new SupervisorFilterConfig(params);

package/src/modules/filters/modules/filterConfig/components/supervisor/supervisor-filter-value-field.vue

@@ -0,0 +1,69 @@
+<template>
+  <wt-select
+    :close-on-select="false"
+    :label="labelValue"
+    :search-method="props.filterConfig.searchRecords"
+    :value="model"
+    :v="!disableValidation && 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 { WtSelect } from '@webitel/ui-sdk/components';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
+
+type ModelValue = number[];
+
+const props = defineProps<{
+  filterConfig: WtSysTypeFilterConfig;
+  disableValidation?: boolean;
+}>();
+
+const model = defineModel<ModelValue>();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+const { t } = useI18n();
+
+const labelValue = computed(() =>
+  t(`webitelUI.filters.${props?.filterConfig?.showFilterName ?
+    props?.filterConfig.name : 'filterValue'}`))
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required,
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+onMounted(() => {
+  if (!props?.disableValidation) v$.value.$touch();
+});
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+
+const handleInput = (value: ModelValue) => {
+  model.value = value;
+};
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/supervisor/supervisor-filter-value-preview.vue

@@ -0,0 +1,15 @@
+<template>
+  <lookup-filter-value-preview v-bind="props" />
+</template>
+
+<script lang="ts" setup>
+import type { EngineQueue } from 'webitel-sdk';
+
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
+
+const props = defineProps<{
+  value: EngineQueue[];
+}>();
+</script>
+
+<style scoped></style>