@webitel/ui-sdk 24.12.94 → 24.12.95

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-sdk",
-  "version": "24.12.94",
+  "version": "24.12.95",
   "private": false,
   "scripts": {
     "dev": "vite",

package/src/locale/en/en.js

@@ -296,6 +296,7 @@ export default {
     macValidator: 'Should look like MAC',
     minValue: 'Value should be not less than',
     maxValue: 'Value should be not much than',
+    maxLength: 'The length should not be greater than',
     sameAs: 'Incorrect password',
     requiredArrayValue: 'Array should not be empty',
     minLength: 'Quantity of characters should not be less than',

package/src/locale/ru/ru.js

@@ -293,6 +293,7 @@ export default {
     macValidator: 'Необходимо ввести MAC-адрес',
     minValue: 'Значение должно быть не меньше',
     maxValue: 'Значение должно быть не больше',
+    maxLength: 'Длина не должна быть больше, чем',
     sameAs: 'Неверный пароль',
     requiredArrayValue: 'Поле не должно быть пустым',
     minLength: 'Количество символов не должно быть меньше, чем',

package/src/locale/ua/ua.js

@@ -293,6 +293,7 @@ export default {
     macValidator: 'Необхідно ввести MAC-адрес',
     minValue: 'Значення повинно бути не менше',
     maxValue: 'Значення повинно бути не більше',
+    maxLength: 'Довжина не повинна бути більшою, ніж',
     sameAs: 'Неправильний пароль',
     requiredArrayValue: 'Поле не повинно бути пустим',
     minLength: 'Кількість символів повинна бути не меншою, ніж',

package/src/mixins/validationMixin/useValidation.js

@@ -39,6 +39,8 @@ export function useValidation({
         validationText = `${t('validation.minValue')} ${v.value.minValue.$params.min}`;
       else if (v.value.maxValue?.$invalid)
         validationText = `${t('validation.maxValue')} ${v.value.maxValue.$params.max}`;
+      else if (v.value.maxLength?.$invalid)
+        validationText = `${t('validation.maxLength')} ${v.value.maxLength.$params.max}`;
       else if (v.value.sipAccountValidator?.$invalid)
         validationText = t('validation.sipAccountValidator');
       else if (v.value.minLength?.$invalid)

package/src/modules/Filters/v2/filters/components/config/dynamic-filter-config-form-label.vue

@@ -0,0 +1,50 @@
+<template>
+  <wt-input
+    :value="model"
+    :label="t('webitelUI.filters.filterLabel')"
+    :v="v$"
+    @input="model = $event"
+  />
+</template>
+
+<script setup lang="ts">
+import { useVuelidate } from '@vuelidate/core';
+import { maxLength } from '@vuelidate/validators';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import WtInput from '../../../../../../../components/wt-input/wt-input.vue';
+
+const MAX_STRING_LENGTH = 50;
+
+const model = defineModel<string>();
+
+interface Emits {
+  'update:invalid': [boolean];
+}
+const emit = defineEmits<Emits>();
+
+const { t } = useI18n();
+
+const v$ = useVuelidate(
+  computed(() => ({
+    model: {
+      // maybe make maxLength value by props
+      maxLength: maxLength(MAX_STRING_LENGTH),
+    },
+  })),
+  { model },
+  { $autoDirty: true },
+);
+v$.value.$touch();
+
+watch(
+  () => v$.value.$invalid,
+  (invalid) => {
+    emit('update:invalid', invalid);
+  },
+  { immediate: true },
+);
+</script>
+
+<style scoped lang="scss"></style>

package/src/modules/Filters/v2/filters/components/{dynamic/config → config}/dynamic-filter-config-form.vue

@@ -8,6 +8,7 @@
       use-value-from-options-by-prop="id"
       @input="filterName = $event"
     />
+
     <slot
       name="value-input"
       v-bind="{
@@ -18,11 +19,13 @@
         onValueInvalidChange: (v) => (invalid = v),
       }"
     />
-    <wt-input
-      v-model="filterLabel"
-      :label="t('webitelUI.filters.filterLabel')"
-      @input="touchedLabel = true"
+
+    <dynamic-filter-config-form-label
+      :value="filterLabel"
+      @update:value="onLabelValueUpdate"
+      @update:invalid="(v) => (invalid = v)"
     />
+
     <footer class="dynamic-filter-config-form-footer">
       <wt-button
         :disabled="invalid"
@@ -31,6 +34,7 @@
       >
         {{ t('reusable.save') }}
       </wt-button>
+
       <wt-button
         color="secondary"
         wide
@@ -48,13 +52,13 @@ import { ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import WtButton from '../../../../../../../components/wt-button/wt-button.vue';
-import WtInput from '../../../../../../../components/wt-input/wt-input.vue';
 import WtSelect from '../../../../../../../components/wt-select/wt-select.vue';
 import type {
   FilterInitParams,
   FilterName,
   IFilter,
 } from '../../../types/Filter';
+import DynamicFilterConfigFormLabel from './dynamic-filter-config-form-label.vue';
 
 interface FilterNameSelectRepresentation {
   name: string;
@@ -91,6 +95,11 @@ const editMode = !!props.filter;
 
 const invalid = ref(false);
 
+const onLabelValueUpdate = (val: string) => {
+  filterLabel.value = val;
+  touchedLabel.value = true;
+};
+
 const submit = () => {
   emit('submit', {
     name: filterName.value,

package/src/modules/Filters/v2/filters/components/{dynamic/config → config}/dynamic-filter-config-view.vue

@@ -23,7 +23,7 @@
  * and their styling
  */
 
-import WtTooltip from '../../../../../../../components/wt-tooltip/wt-tooltip.vue';
+import WtTooltip from '../../../../../../components/wt-tooltip/wt-tooltip.vue';
 </script>
 
 <style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/{dynamic/dynamic-filter-add-action.vue → dynamic-filter-add-action.vue}

@@ -5,7 +5,7 @@
         <p v-if="props.showLabel">
           {{ t('webitelUI.filters.addFilter') }}
         </p>
-        <wt-icon-btn icon="add-filter" />
+        <wt-icon-action action="add" />
       </div>
     </template>
 
@@ -18,6 +18,7 @@
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
 
+import WtIconAction from '../../../../../components/wt-icon-action/wt-icon-action.vue';
 import DynamicFilterConfigView from './config/dynamic-filter-config-view.vue';
 
 interface Props {

package/src/modules/Filters/v2/filters/components/{dynamic/preview → preview}/dynamic-filter-preview-info.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { FilterName, FilterValue } from '../../../types/Filter';
+import type { FilterName, FilterValue } from '../../types/Filter';
 
 interface Props {
   name: FilterName;

package/src/modules/Filters/v2/filters/components/{dynamic/preview → preview}/dynamic-filter-preview.vue

@@ -29,10 +29,10 @@
 </template>
 
 <script lang="ts" setup>
-import WtChip from '../../../../../../../components/wt-chip/wt-chip.vue';
-import WtIconBtn from '../../../../../../../components/wt-icon-btn/wt-icon-btn.vue';
-import WtTooltip from '../../../../../../../components/wt-tooltip/wt-tooltip.vue';
-import type { IFilter } from '../../../types/Filter';
+import WtChip from '../../../../../../components/wt-chip/wt-chip.vue';
+import WtIconBtn from '../../../../../../components/wt-icon-btn/wt-icon-btn.vue';
+import WtTooltip from '../../../../../../components/wt-tooltip/wt-tooltip.vue';
+import type { IFilter } from '../../types/Filter';
 import DynamicFilterConfigView from '../config/dynamic-filter-config-view.vue';
 import DynamicFilterPreviewInfo from './dynamic-filter-preview-info.vue';
 

package/src/modules/Filters/v2/filters/components/table-filters-panel.vue

@@ -64,9 +64,9 @@
 </template>
 
 <script lang="ts" setup>
-import DynamicFilterConfigForm from './dynamic/config/dynamic-filter-config-form.vue';
-import DynamicFilterAddAction from './dynamic/dynamic-filter-add-action.vue';
-import DynamicFilterPreview from './dynamic/preview/dynamic-filter-preview.vue';
+import DynamicFilterConfigForm from './config/dynamic-filter-config-form.vue';
+import DynamicFilterAddAction from './dynamic-filter-add-action.vue';
+import DynamicFilterPreview from './preview/dynamic-filter-preview.vue';
 
 interface Props {}
 

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

@@ -0,0 +1,4 @@
+// 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

@@ -0,0 +1,35 @@
+<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

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

package/src/modules/Filters/v2/filters/components/static/search-filter.vue

@@ -1,14 +0,0 @@
-<template>
-  <div class="search-filter"></div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps({});
-
-const emit = defineEmits([]);
-</script>
-
-<style scoped lang="scss">
-.search-filter {
-}
-</style>