@webitel/ui-sdk 24.12.102 → 24.12.115

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

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

package/src/modules/Filters/v2/filters/components/values/team/team-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/team/team-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/total-duration/total-duration-filter-value-field.vue

@@ -0,0 +1,19 @@
+<template>
+  <duration-filter-value-field
+    :value="model"
+    @update:model-value="model = $event"
+  />
+</template>
+
+<script lang="ts" setup>
+import DurationFilterValueField from '../_shared/durations/duration-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/total-duration/total-duration-filter-value-preview.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="total-duration-filter-value-preview">
+    <div v-if="props.value.from">
+      <p class="total-duration-filter-value-preview__title">
+        {{t('reusable.from')}}
+      </p>
+
+      <span>{{formatTime(props.value.from)}}</span>
+    </div>
+
+    <div v-if="props.value.to">
+      <p class="total-duration-filter-value-preview__title">
+        {{t('reusable.to')}}
+      </p>
+
+      <span>{{formatTime(props.value.to)}}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useI18n} from "vue-i18n";
+
+const props = defineProps<{
+  value: number[];
+}>();
+
+const { t } = useI18n();
+
+const formatTime = (value) => {
+  const minutes = Math.floor(value / 60);
+  const seconds = value % 60;
+
+  return `${t('webitelUI.timepicker.min')} ${minutes} ${t('webitelUI.timepicker.sec')} ${seconds}`;
+}
+</script>
+
+<style lang="scss" scoped>
+.duration-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,51 @@
+<template>
+  <wt-input
+    v-model="model"
+    :label="t('webitelUI.filters.filterValue')"
+    :v="v$.model"
+  />
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import variableSearchValidator from '../../../../../../../validators/variableSearchValidator/variableSearchValidator.js';
+
+type ModelValue = string;
+
+const model = defineModel<ModelValue>();
+if (!model.value) {
+  model.value = '';
+}
+
+const { t } = useI18n();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      required: variableSearchValidator(),
+    },
+  })),
+  { 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/variable/variable-filter-value-preview.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="variables-filter-value-preview">
+
+    <div>
+      <p class="variables-filter-value-preview__title">{{t('vocabulary.keys')}}:</p>
+      <span>{{variable[0]}}</span>
+    </div>
+
+    <div>
+      <p class="variables-filter-value-preview__title">{{t('vocabulary.values')}}:</p>
+      <span>{{variable[1]}}</span>
+    </div>
+
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {useI18n} from "vue-i18n";
+
+const props = defineProps<{
+  value: string;
+}>();
+
+const { t } = useI18n();
+
+const variable = props.value.split('=');
+</script>
+
+<style lang="scss" scoped>
+.variables-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

package/src/modules/Filters/v2/filters/types/Filter.d.ts

@@ -21,6 +21,11 @@ export interface FilterInitParams extends FilterData {
   name: FilterName;
 }
 
+export interface FilterEnumOption {
+  locale: string;
+  value: FilterValue;
+}
+
 export interface FilterConfig {
   /**
    * Perform simple type conversion on store/restore,

package/src/modules/Filters/v2/table/createTableStore.store.ts

@@ -32,7 +32,11 @@ export const createTableStore = <Entity extends { id: string; etag?: string }>(
 
     const headersStore = useHeadersStore();
     const { headers, shownHeaders, fields, sort } = storeToRefs(headersStore);
-    const { updateSort, updateShownHeaders, setupPersistence: setupHeadersPersistence } = headersStore;
+    const {
+      updateSort,
+      updateShownHeaders,
+      setupPersistence: setupHeadersPersistence,
+    } = headersStore;
 
     const filtersStore = useFiltersStore();
     const { filtersManager, isRestoring: isFiltersRestoring } =
@@ -50,6 +54,10 @@ export const createTableStore = <Entity extends { id: string; etag?: string }>(
     const error = ref(null);
     const isLoading = ref(false);
 
+    const updateSelected = (value: Entity[]) => {
+      selected.value = value;
+    };
+
     const loadDataList = async () => {
       isLoading.value = true;
       $patchPaginationStore({ next: false });
@@ -67,6 +75,7 @@ export const createTableStore = <Entity extends { id: string; etag?: string }>(
         const { items, next } = await apiModule.getList(params);
 
         dataList.value = items;
+        updateSelected([]);
         $patchPaginationStore({ next });
       } catch (err) {
         error.value = err;
@@ -163,6 +172,8 @@ export const createTableStore = <Entity extends { id: string; etag?: string }>(
       initialize,
 
       loadDataList,
+
+      updateSelected,
       patchItemProperty,
       deleteEls,
 

package/src/modules/Filters/v2/types/tableStore.types.ts

@@ -41,6 +41,7 @@ export interface TableStore<Entity> {
   // tableStore
   initialize: () => Promise<void>;
   loadDataList: (query?: object) => Promise<void>;
+  updateSelected: (selected: Entity[]) => void;
   patchItemProperty: (payload: PatchItemPropertyParams) => Promise<void>;
   deleteEls: (deleted: Entity[]) => Promise<void>;
 

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

@@ -1,4 +0,0 @@
-// import { UsersApi}
-
-export const searchMethod = UsersAPI.getLookup;
-export const localePath = ''; /* label locale goes here */

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

@@ -1,35 +0,0 @@
-<template>
-  <wt-select
-    :close-on-select="false"
-    :search-method="searchMethod"
-    :value="model"
-    multiple
-    use-value-from-options-by-prop="id"
-    @input="handleInput"
-  />
-</template>
-
-<script lang="ts" setup>
-import WtSelect from '@webitel/ui-sdk/src/components/wt-select/wt-select.vue';
-
-import { searchMethod } from './config';
-
-type ModelValue = number[];
-
-const model = defineModel<ModelValue>();
-
-// const props = defineProps({});
-//
-// const emit = defineEmits([]);
-
-const handleInput = (value: ModelValue) => {
-  model.value = value;
-};
-
-</script>
-
-<style lang="scss" scoped>
-.user-filter {
-
-}
-</style>

package/src/modules/Filters/v2/filters/components/values/users/user-filter-value-preview.vue

@@ -1,13 +0,0 @@
-
-<template>
-  <div class="">
-  </div>
-</template>
-
-<script setup lang="ts">
-import { searchMethod } from './config';
-</script>
-
-<style scoped lang="scss">
-
-</style>