@webitel/ui-datalist 1.0.0 → 1.0.1

package/src/filters/components/filter-options/actual-resolution-time/actual-resolution-time-filter-value-preview.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="actual-resolution-time-filter-value-preview">
+    <div v-if="props.value.from">
+      <p class="actual-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="actual-resolution-time-filter-value-preview__title">
+        {{ t('reusable.to') }}
+      </p>
+
+      <span>{{ convertTimestampToDate(props.value.to) }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { format } from 'date-fns';
+import { useI18n } from 'vue-i18n';
+
+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>
+@use '@webitel/styleguide/typography' as *;
+
+.actual-resolution-time-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

package/src/filters/components/filter-options/agent/agent-filter-value-field.vue

@@ -0,0 +1,58 @@
+<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/filters/components/filter-options/agent/agent-filter-value-preview.vue

@@ -0,0 +1,31 @@
+<template>
+  <ul v-if="localValue">
+    <li
+      v-for="({ name }, index) of localValue"
+      :key="index"
+    >
+      {{ name }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { searchMethod } from './config.js';
+
+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/filters/components/filter-options/agent/config.js

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

package/src/filters/components/filter-options/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/filters/components/filter-options/amd-result/amd-result-filter-value-preview.vue

@@ -0,0 +1,18 @@
+<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/filters/components/filter-options/assignee/assignee-filter-value-field.vue

@@ -0,0 +1,74 @@
+<template>
+  <wt-select
+    :close-on-select="false"
+    :label="t('webitelUI.filters.filterValue')"
+    :search-method="searchMethod"
+    :v="v$.model.list"
+    :value="model?.list"
+    multiple
+    track-by="id"
+    use-value-from-options-by-prop="id"
+    @input="model.list = $event"
+  />
+  <wt-checkbox
+    :label="t('reusable.showUnassigned')"
+    :selected="model?.unassigned"
+    :v="v$.model.unassigned"
+    @change="model.unassigned = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { requiredIf } from '@vuelidate/validators';
+import { computed, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import WtCheckbox from '../../../../../../../components/wt-checkbox/wt-checkbox.vue';
+import WtSelect from '../../../../../../../components/wt-select/wt-select.vue';
+import { searchMethod } from './config.js';
+
+type ModelValue = {
+  list: string[];
+  unassigned: boolean;
+};
+
+const model = defineModel<ModelValue>();
+
+const emit = defineEmits<{
+  'update:invalid': [boolean];
+}>();
+const { t } = useI18n();
+
+const initModel = () => {
+  if (!model.value) {
+    model.value = {
+      list: [],
+      unassigned: false,
+    };
+  }
+};
+onMounted(() => initModel());
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      list: { required: requiredIf(() => !model.value.unassigned) },
+      unassigned: { required: requiredIf(() => !model.value.list.length) },
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+</script>
+
+<style lang="scss" scoped></style>

package/src/filters/components/filter-options/assignee/assignee-filter-value-preview.vue

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

package/src/filters/components/filter-options/assignee/config.js

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

package/src/filters/components/filter-options/author/author-filter-value-field.vue

@@ -0,0 +1,56 @@
+<template>
+  <wt-select
+    :close-on-select="false"
+    :label="t('webitelUI.filters.filterValue')"
+    :search-method="searchMethod"
+    :v="v$.model"
+    :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/filters/components/filter-options/author/author-filter-value-preview.vue

@@ -0,0 +1,31 @@
+<template>
+  <ul v-if="localValue">
+    <li
+      v-for="({ name }, index) of localValue"
+      :key="index"
+    >
+      {{ name }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { searchMethod } from './config.js';
+
+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/filters/components/filter-options/author/config.js

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

package/src/filters/components/filter-options/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/filters/components/filter-options/cause/cause-filter-value-preview.vue

@@ -0,0 +1,18 @@
+<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/filters/components/filter-options/close-reason-groups-case/close-reason-groups-case-filter-value-field.vue

@@ -0,0 +1,102 @@
+<template>
+  <div>
+    <wt-select
+      :clearable="false"
+      :label="t('cases.reason')"
+      :search-method="caseCloseReasonsGroupsSearchMethod"
+      :v="v$.model.selection"
+      :value="model?.selection"
+      track-by="id"
+      use-value-from-options-by-prop="id"
+      @input="updateSelected"
+    />
+
+    <wt-select
+      v-if="model?.selection"
+      :key="model.selection"
+      :clearable="false"
+      :disabled="!model.selection"
+      :label="t('webitelUI.filters.filterValue')"
+      :search-method="getConditionList"
+      :v="v$.model.conditions"
+      :value="model.conditions"
+      multiple
+      track-by="id"
+      use-value-from-options-by-prop="id"
+      @input="model.conditions = $event"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed, onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import WtSelect from '../../../../../../../components/wt-select/wt-select.vue';
+import {
+  caseCloseReasonsGroupsSearchMethod,
+  caseCloseReasonsSearchMethod,
+} from './config.js';
+
+type ModelValue = {
+  selection: string;
+  conditions: string;
+};
+const model = defineModel<ModelValue>();
+const { t } = useI18n();
+
+const updateSelected = (value) => {
+  model.value.selection = value;
+  model.value.conditions = '';
+};
+
+const getConditionList = (params) => {
+  return caseCloseReasonsSearchMethod({
+    parentId: model.value.selection,
+    ...params,
+  });
+};
+
+const initModel = () => {
+  if (!model.value) {
+    model.value = {
+      selection: '',
+      conditions: '',
+    };
+  }
+};
+onMounted(() => initModel());
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      selection: {
+        required,
+      },
+      conditions: {
+        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/filters/components/filter-options/close-reason-groups-case/close-reason-groups-case-filter-value-preview.vue

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

package/src/filters/components/filter-options/close-reason-groups-case/config.js

@@ -0,0 +1,7 @@
+import CaseCloseReasonGroupsAPI from '../../../../../../../api/clients/caseCloseReasonGroups/caseCloseReasonGroups.js';
+import CaseCloseReasonsAPI from '../../../../../../../api/clients/caseCloseReasons/caseCloseReasons.js';
+
+export const caseCloseReasonsGroupsSearchMethod =
+  CaseCloseReasonGroupsAPI.getLookup;
+export const caseCloseReasonsSearchMethod = CaseCloseReasonsAPI.getLookup;
+export const localePath = '';

package/src/filters/components/filter-options/contact/config.js

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