@webitel/ui-sdk 24.12.102 → 24.12.115

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

@@ -0,0 +1,52 @@
+<template>
+  <wt-select
+    :clearable="false"
+    :label="t('webitelUI.filters.filterValue')"
+    :options="AmdResultOptions"
+    :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 { AmdResultOptions } from '../../enums/amd-result-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/amd-result/amd-result-filter-value-preview.vue

@@ -0,0 +1,20 @@
+<template>
+  <ul>
+    <li
+      v-for="(result, index) of props.value"
+      :key="index"
+    >
+      {{ result }}
+    </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/cause/cause-filter-value-field.vue

@@ -0,0 +1,52 @@
+<template>
+  <wt-select
+    :clearable="false"
+    :label="t('webitelUI.filters.filterValue')"
+    :options="HangupCauseOptions"
+    :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 { HangupCauseOptions } from '../../enums/hangup-cause-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/cause/cause-filter-value-preview.vue

@@ -0,0 +1,19 @@
+<template>
+  <ul>
+    <li
+      v-for="(hangupCause, index) of props.value"
+      :key="index"
+    >
+      {{ hangupCause }}
+    </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/contact/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/contact/contact-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/contact/contact-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/created-at-from/created-at-from-filter-value-field.vue

@@ -0,0 +1,23 @@
+<template>
+  <wt-datepicker
+    v-if="model"
+    :value="model"
+    :label="`${t('webitelUI.filters.createdAtFrom')}:`"
+    @input="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import { startOfToday } from 'date-fns';
+import { useI18n } from 'vue-i18n';
+
+const model = defineModel<number>();
+
+const { t } = useI18n();
+
+if (!model.value) {
+  model.value = startOfToday().getTime();
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,15 @@
+<template>
+  <div>{{date}}</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const date = ref(new Date(+props.value).toLocaleDateString());
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,23 @@
+<template>
+  <wt-datepicker
+    v-if="model"
+    :label="`${t('webitelUI.filters.createdAtTo')}:`"
+    :value="model"
+    @input="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import { endOfToday } from 'date-fns';
+import { useI18n } from 'vue-i18n';
+
+const model = defineModel<number>();
+
+const { t } = useI18n();
+
+if (!model.value) {
+  model.value = endOfToday().getTime();
+}
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,15 @@
+<template>
+  <div>{{date}}</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const date = ref(new Date(+props.value).toLocaleDateString());
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,51 @@
+<template>
+  <wt-select
+    :clearable="false"
+    :label="t('webitelUI.filters.filterValue')"
+    :options="DirectionOptions"
+    :value="model"
+    :v="v$.model"
+    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 { DirectionOptions } from '../../enums/direction-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/direction/direction-filter-value-preview.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    {{ t(`calls.direction.${value}`) }}
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from "vue-i18n";
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const { t } = useI18n();
+</script>
+
+<style lang="scss" scoped></style>

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

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

package/src/modules/Filters/v2/filters/components/values/gateway/gateway-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/gateway/gateway-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/grantee/config.js

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

package/src/modules/Filters/v2/filters/components/values/grantee/grantee-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/grantee/grantee-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({ids: props.value});
+  localValue.value = items;
+};
+
+getLocalValue();
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/modules/Filters/v2/filters/components/values/has-file/has-file-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-file/has-file-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>