@webitel/ui-sdk 24.12.135 → 24.12.136

package/package.json

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

package/src/modules/Filters/v2/filters/components/values/_shared/composables/useFromToSecToPreviewTime.ts

@@ -0,0 +1,41 @@
+import {computed} from "vue";
+import {useI18n} from "vue-i18n";
+
+export const useFromToSecToPreviewTime = (value: {
+    from?: number | string | null,
+    to?: number | string | null,
+}) => {
+    const { t } = useI18n();
+
+    const format = (secsVal: number) => {
+        const minutes = Math.floor(secsVal / 60);
+        const seconds = secsVal % 60;
+
+        return `${t('webitelUI.timepicker.min')} ${minutes} ${t('webitelUI.timepicker.sec')} ${seconds}`;
+    };
+
+    const from = computed(() => {
+        const numValue = Number(value.from);
+
+        if (!numValue && numValue !== 0) {
+            return '';
+        }
+
+        return format(numValue);
+    });
+
+    const to = computed(() => {
+        const numValue = Number(value.to);
+
+        if (!numValue && numValue !== 0) {
+            return '';
+        }
+
+        return format(numValue);
+    });
+
+    return {
+        from,
+        to
+    };
+};

package/src/modules/Filters/v2/filters/components/values/talk-duration/TalkDurationFilter.d.ts

@@ -0,0 +1,4 @@
+export type TalkDurationFilterModelValue = {
+    from: number;
+    to: number;
+};

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

@@ -7,13 +7,9 @@
 
 <script lang="ts" setup>
 import DurationFilterValueField from '../_shared/durations/duration-filter-value-field.vue';
+import type {TalkDurationFilterModelValue} from "./TalkDurationFilter.d.ts";
 
-type ModelValue = {
-  from: number;
-  to: number;
-};
-
-const model = defineModel<ModelValue>();
+const model = defineModel<TalkDurationFilterModelValue>();
 </script>
 
 <style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/talk-duration/talk-duration-filter-value-preview.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="talk-duration-filter-value-preview">
-    <div v-if="props.value.from">
+    <div v-if="from">
       <p class="talk-duration-filter-value-preview__title">
         {{t('reusable.from')}}
       </p>
 
-      <span>{{formatTime(props.value.from)}}</span>
+      <span>{{ from }}</span>
     </div>
 
-    <div v-if="props.value.to">
+    <div v-if="to">
       <p class="talk-duration-filter-value-preview__title">
         {{t('reusable.to')}}
       </p>
 
-      <span>{{formatTime(props.value.to)}}</span>
+      <span>{{ to }}</span>
     </div>
   </div>
 </template>
@@ -21,18 +21,19 @@
 <script lang="ts" setup>
 import {useI18n} from "vue-i18n";
 
+import {useFromToSecToPreviewTime} from "../_shared/composables/useFromToSecToPreviewTime";
+import type {TalkDurationFilterModelValue} from "./TalkDurationFilter.d.ts";
+
 const props = defineProps<{
-  value: number[];
+  value: TalkDurationFilterModelValue;
 }>();
 
 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}`;
-}
+const {
+  from,
+  to,
+} = useFromToSecToPreviewTime(props.value);
 </script>
 
 <style lang="scss" scoped>

package/src/modules/Filters/v2/filters/components/values/total-duration/TotalDurationFilter.d.ts

@@ -0,0 +1,4 @@
+export type TotalDurationFilterModelValue = {
+    from: number;
+    to: number;
+};

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

@@ -7,13 +7,10 @@
 
 <script lang="ts" setup>
 import DurationFilterValueField from '../_shared/durations/duration-filter-value-field.vue';
+import type {TotalDurationFilterModelValue} from "./TotalDurationFilter";
 
-type ModelValue = {
-  from: number;
-  to: number;
-};
 
-const model = defineModel<ModelValue>();
+const model = defineModel<TotalDurationFilterModelValue>();
 </script>
 
 <style lang="scss" scoped></style>

package/src/modules/Filters/v2/filters/components/values/total-duration/total-duration-filter-value-preview.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="total-duration-filter-value-preview">
-    <div v-if="props.value.from">
+    <div v-if="from">
       <p class="total-duration-filter-value-preview__title">
         {{t('reusable.from')}}
       </p>
 
-      <span>{{formatTime(props.value.from)}}</span>
+      <span>{{ from }}</span>
     </div>
 
-    <div v-if="props.value.to">
+    <div v-if="to">
       <p class="total-duration-filter-value-preview__title">
         {{t('reusable.to')}}
       </p>
 
-      <span>{{formatTime(props.value.to)}}</span>
+      <span>{{ to }}</span>
     </div>
   </div>
 </template>
@@ -21,18 +21,19 @@
 <script lang="ts" setup>
 import {useI18n} from "vue-i18n";
 
+import {useFromToSecToPreviewTime} from "../_shared/composables/useFromToSecToPreviewTime";
+import type {TalkDurationFilterModelValue} from "../talk-duration/TalkDurationFilter";
+
 const props = defineProps<{
-  value: number[];
+  value: TalkDurationFilterModelValue;
 }>();
 
 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}`;
-}
+const {
+  from,
+  to,
+} = useFromToSecToPreviewTime(props.value);
 </script>
 
 <style lang="scss" scoped>