@webitel/ui-datalist 1.0.0 → 1.0.1

package/src/filters/components/filter-options/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/filters/components/filter-options/rated-by/rated-by-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/rating/rating-from-to-filter-value-field.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="rating-from-to-filter-value-field">
+    <wt-input
+      v-if="model"
+      :label="`${t('reusable.from')}:`"
+      :number-min="0"
+      :placeholder="t('webitelUI.filters.filterValue')"
+      :v="v$.model?.from"
+      :value="model.from"
+      class="rating-from-to-filter-value-field__input"
+      type="number"
+      @input="handleInput('from', $event)"
+    />
+
+    <wt-input
+      v-if="model"
+      :label="`${t('reusable.to')}:`"
+      :number-min="0"
+      :placeholder="t('webitelUI.filters.filterValue')"
+      :v="v$.model?.to"
+      :value="model.to"
+      class="rating-from-to-filter-value-field__input"
+      type="number"
+      @input="handleInput('to', $event)"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { maxValue, requiredIf } from '@vuelidate/validators';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { WtInput } from '../../../../../../../components';
+
+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: {
+        required: requiredIf(() => !model.value.to),
+        maxValue: maxValue(
+          model?.value?.to && model.value.from > model.value.to
+            ? model.value.to
+            : Infinity,
+        ),
+      },
+      to: {
+        required: 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);
+
+  &__input {
+    flex: 1;
+  }
+}
+</style>

package/src/filters/components/filter-options/rating/rating-from-to-filter-value-preview.vue

@@ -0,0 +1,39 @@
+<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>
+@use '@webitel/styleguide/typography' as *;
+
+.score-from-to-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

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

@@ -0,0 +1,44 @@
+<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 { 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 *;
+
+.reaction-time-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

package/src/filters/components/filter-options/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/filters/components/filter-options/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"
+    :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/reporter/reporter-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/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/filters/components/filter-options/resolution-time/resolution-time-filter-value-preview.vue

@@ -0,0 +1,44 @@
+<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 { 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 *;
+
+.resolution-time-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

package/src/filters/components/filter-options/score/score-from-to-filter-value-field.vue

@@ -0,0 +1,100 @@
+<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('reusable.from')}:`"
+      :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')}:`"
+      :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: { required: requiredIf(() => !model.value.to) },
+      to: { required: 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: grid;
+  grid-template-columns: repeat(2, 1fr);
+  align-items: center;
+  grid-gap: var(--spacing-xs);
+}
+</style>

package/src/filters/components/filter-options/score/score-from-to-filter-value-preview.vue

@@ -0,0 +1,39 @@
+<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>
+@use '@webitel/styleguide/typography' as *;
+
+.score-from-to-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

package/src/filters/components/filter-options/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 searchMethod = ServiceCatalogsAPI.getList;
+export const servicesSearchMethod = ServicesAPI.getList;
+export const localePath = '';

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

@@ -0,0 +1,82 @@
+<template>
+  <wt-tree
+    :model-value="model"
+    :data="catalogData"
+    item-data="id"
+    item-label="name"
+    children-prop="service"
+    class="service-case-filter-value-field"
+    multiple
+    @update:model-value="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import deepCopy from 'deep-copy';
+import { onMounted, ref } from 'vue';
+
+import WtTree from '../../../../../../../components/wt-tree/wt-tree.vue';
+import { searchMethod } from './config.js';
+
+type ModelValue = string[];
+const model = defineModel<ModelValue>({
+  default: [],
+});
+
+const catalogData = ref([]);
+
+const loadCatalogs = async () => {
+  const { items } = await searchMethod({
+    size: -1, // To get all catalogs with services we need to pass size -1
+    fields: ['id', 'name', 'closeReasonGroup', 'status', 'service'],
+    hasSubservices: true,
+  });
+
+  catalogData.value = deepCopy(items);
+};
+
+if (!model.value) {
+  model.value = [];
+}
+
+onMounted(loadCatalogs);
+</script>
+
+<style lang="scss">
+$form-width: 800px;
+
+.service-case-filter-value-field {
+  grid-area: value;
+  background: transparent;
+  height: 100%;
+  max-height: 350px;
+  overflow-y: auto;
+}
+
+.dynamic-filter-config-form {
+  &:has(.service-case-filter-value-field) {
+    display: grid;
+    grid-template-rows: 64px 1fr auto;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-areas:
+      'column label'
+      'value value'
+      'footer footer';
+    width: $form-width;
+    height: 500px;
+
+    .wt-select {
+      grid-area: column;
+      height: fit-content;
+    }
+
+    .wt-input {
+      grid-area: label;
+    }
+
+    .dynamic-filter-config-form-footer {
+      grid-area: footer;
+    }
+  }
+}
+</style>