@webitel/ui-datalist 1.0.5 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "lint:fix": "eslint --fix ./src && prettier --write --check ./src",
@@ -29,12 +29,13 @@
   "peerDependencies": {
     "vue": "^3.5",
     "axios": "^1",
-    "pinia": "^3.x"
+    "pinia": "^3.x",
+    "date-fns": "^4"
   },
   "dependencies": {
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
-    "@webitel/ui-sdk": "^25.4.48"
+    "@webitel/ui-sdk": "^25.4.55"
   },
   "devDependencies": {
     "vue-tsc": "^2.2.8",

package/src/filter-presets/components/_shared/preset-filters-preview.vue

@@ -9,16 +9,8 @@
           v-for="filter of props.filters"
           :key="filter.name"
           :filter="filter"
-          dummy
-        >
-          <template #info>
-            <component
-              :is="FilterOptionToPreviewComponentMap[filter.name]"
-              :value="filter.value"
-            >
-            </component>
-          </template>
-        </dynamic-filter-preview>
+          readonly
+        />
       </template>
     </dynamic-filter-panel-wrapper>
   </div>
@@ -30,7 +22,6 @@ import { useI18n } from 'vue-i18n';
 
 import type { IFilter } from '../../../filters';
 import DynamicFilterPanelWrapper from '../../../filters/components/dynamic-filter-panel-wrapper.vue';
-import { FilterOptionToPreviewComponentMap } from '../../../filters/components/filter-options';
 import DynamicFilterPreview from '../../../filters/components/preview/dynamic-filter-preview.vue';
 
 type Props = {

package/src/filter-presets/components/apply-preset/apply-preset-action.vue

@@ -91,6 +91,11 @@ const props = defineProps<{
    */
   namespace: string;
   usePresetsStore: Store;
+  /**
+   * @description
+   * Is needed for preset to exclude filter values, not related to filters panel
+   */
+  filterOptions: FilterOption[];
 }>();
 
 const emit = defineEmits<{

package/src/filter-presets/components/save-preset/save-preset-action.vue

@@ -14,7 +14,7 @@
         !presetToOverwriteWith /* on 'overwrite preset' popup hide this popup, but don't reset it*/
       "
       :shown="true /* coz visibility is controlled by v-if*/"
-      :filters-manager="props.filtersManager"
+      :filters-manager="localFiltersManager"
       :namespace="namespace"
       @submit="handlePresetSubmit"
       @close="showSaveForm = false"
@@ -32,11 +32,15 @@
 <script lang="ts" setup>
 import { WtIconAction } from '@webitel/ui-sdk/components';
 import { IconAction } from '@webitel/ui-sdk/enums';
-import { computed, inject, type Ref, ref } from 'vue';
+import { computed, inject, reactive, type Ref, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
-import { IFiltersManager } from '../../../filters';
+import {
+  createFiltersManager,
+  FilterOption,
+  IFiltersManager,
+} from '../../../filters';
 import {
   addPreset,
   getPresetList,
@@ -47,21 +51,44 @@ import SavePresetPopup, { SubmitConfig } from './save-preset-popup.vue';
 
 const props = defineProps<{
   /**
+   * @description
    * presets "section" namespace
    */
   namespace: string;
+  /**
+   * @author @dlohvinov
+   * serves as a source for local filters manager
+   */
   filtersManager: IFiltersManager;
+  /**
+   * @description
+   * Is needed for preset to exclude filter values, not related to filters panel
+   */
+  filterOptions: FilterOption[];
 }>();
 
 const eventBus = inject('$eventBus');
 
+const localFiltersManager = reactive(createFiltersManager());
+
+watch(
+  props.filtersManager,
+  () => {
+    localFiltersManager.reset();
+    localFiltersManager.fromString(
+      props.filtersManager.toString({ include: props.filterOptions }),
+    );
+  },
+  { immediate: true },
+);
+
 const { t } = useI18n();
 
 /**
  * disable "save" btn if there's nothing to save
  * */
 const disableAction = computed(() => {
-  return !props.filtersManager.getAllKeys().length;
+  return !localFiltersManager.getAllKeys().length;
 });
 
 /**

package/src/filter-presets/components/save-preset/save-preset-popup.vue

@@ -53,7 +53,7 @@ import { computed, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
-import type { IFiltersManager } from '../../../index';
+import type { IFiltersManager } from '../../../filters';
 import PresetDescriptionField from '../_shared/input-fields/preset-description-field.vue';
 import PresetNameField from '../_shared/input-fields/preset-name-field.vue';
 import PresetFiltersPreview from '../_shared/preset-filters-preview.vue';
@@ -65,6 +65,10 @@ export type SubmitConfig = {
 };
 
 const props = defineProps<{
+  /**
+   * @description
+   * is needed here for `.toString()`
+   */
   filtersManager: IFiltersManager;
 }>();
 

package/src/filters/classes/FiltersManager.ts

@@ -55,7 +55,7 @@ class FiltersManager implements IFiltersManager {
     return filter;
   }
 
-  deleteFilter({ name }: IFilter): IFilter {
+  deleteFilter({ name }: { name: FilterName }): IFilter {
     const filter = this.filters.get(name);
     this.filters.delete(name);
     return filter;
@@ -70,8 +70,14 @@ class FiltersManager implements IFiltersManager {
     return filters;
   }
 
-  toString(): string {
-    const filtersData = [...this.filters.values()].reduce(
+  toString({
+    include,
+    exclude,
+  }: {
+    include?: FilterName[];
+    exclude?: FilterName[];
+  } = {}): string {
+    const filtersData = this.getFiltersList({ include, exclude }).reduce(
       (acc, { name, label, value }) => {
         if (isEmpty(value) && value == null) return acc;
 

package/src/filters/components/dynamic-filter-add-action.vue

@@ -21,8 +21,7 @@
           :options="props.filterOptions"
           @cancel="() => tooltipSlotScope.hide()"
           @submit="
-            (payload) =>
-              submitFilterChange(payload, { hide: tooltipSlotScope.hide })
+            (payload) => submit(payload, { hide: tooltipSlotScope.hide })
           "
         />
       </slot>
@@ -54,7 +53,7 @@ const emit = defineEmits<{
   'add:filter': [FilterInitParams];
 }>();
 
-const submitFilterChange = (payload: FilterInitParams, { hide }) => {
+const submit = (payload: FilterInitParams, { hide }) => {
   emit('add:filter', payload);
   hide();
 };

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

@@ -0,0 +1,21 @@
+<template>
+  <ul v-if="value">
+    <li
+      v-for="({ name, id }, index) of value"
+      :key="id || index"
+    >
+      {{ name }}
+    </li>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  /**
+   * would be great to use a type for this
+   * */
+  value: Record<string, unknown>[];
+}>();
+</script>
+
+<style scoped></style>

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

@@ -1,31 +1,15 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { EngineAgent } from 'webitel-sdk';
 
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  value: EngineAgent[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ id: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>

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

@@ -1,4 +1,3 @@
 import AgentsAPI from '@webitel/ui-sdk/api/clients/agents/agents';
 
 export const searchMethod = AgentsAPI.getLookup;
-export const localePath = '';

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

@@ -1,31 +1,15 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { WebitelContactsContact } from 'webitel-sdk';
 
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  value: WebitelContactsContact[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ id: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>

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

@@ -0,0 +1,97 @@
+<template>
+  <div class="created-at-filter-value-field">
+    <wt-radio
+      v-for="value of radioOpts"
+      :key="value"
+      v-model="selectedRadioValue"
+      :label="t(`webitelUI.filters.datetime.${value}`)"
+      :value="value"
+      @input="handleRadioChange"
+    />
+    <wt-datepicker
+      v-if="showDatepickers"
+      :value="model.from"
+      :label="t('reusable.from')"
+      mode="datetime"
+      @input="changeAbsoluteValue($event, 'from')"
+    />
+    <wt-datepicker
+      v-if="showDatepickers"
+      :value="model.to"
+      :label="t('reusable.to')"
+      mode="datetime"
+      @input="changeAbsoluteValue($event, 'to')"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { WtRadio } from '@webitel/ui-sdk/components';
+import { RelativeDatetimeValue } from '@webitel/ui-sdk/enums';
+import { endOfToday, startOfToday } from 'date-fns';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const model = defineModel<
+  RelativeDatetimeValue | { from: number; to: number }
+>();
+
+const { t } = useI18n();
+
+const radioOpts = [
+  RelativeDatetimeValue.Today,
+  RelativeDatetimeValue.ThisWeek,
+  RelativeDatetimeValue.ThisMonth,
+  RelativeDatetimeValue.Custom,
+];
+
+const selectedRadioValue = ref();
+
+const initialize = () => {
+  if (!model.value) {
+    /* initialize */
+    selectedRadioValue.value = radioOpts[0];
+    model.value = selectedRadioValue.value;
+  } else if (typeof model.value === 'string') {
+    /* RelativeDatetimeValue */
+    selectedRadioValue.value = model.value;
+  } else {
+    /* { from, to } */
+    selectedRadioValue.value = RelativeDatetimeValue.Custom;
+  }
+};
+
+initialize();
+
+const showDatepickers = computed(() => {
+  return selectedRadioValue.value === RelativeDatetimeValue.Custom;
+});
+
+const handleRadioChange = (value: RelativeDatetimeValue) => {
+  if (value === RelativeDatetimeValue.Custom) {
+    model.value = {
+      from: startOfToday().getTime(),
+      to: endOfToday().getTime(),
+    };
+  } else {
+    model.value = value;
+  }
+};
+
+const changeAbsoluteValue = (value: number, prop: 'from' | 'to') => {
+  const newModelValue = {
+    ...(model.value as { from: number; to: number }),
+    [prop]: value,
+  };
+
+  model.value = newModelValue;
+};
+</script>
+
+<style scoped>
+.created-at-filter-value-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+</style>

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

@@ -0,0 +1,64 @@
+<template>
+  <div class="created-at-filter-value-preview">
+    <p v-if="isRelativeValue">
+      {{ t(`webitelUI.filters.datetime.${props.value}`) }}
+    </p>
+
+    <template v-else>
+      <div>
+        <p class="created-at-filter-value-preview__title">
+          {{ t('reusable.from') }}
+        </p>
+
+        <span>{{ from }}</span>
+      </div>
+
+      <div>
+        <p class="created-at-filter-value-preview__title">
+          {{ t('reusable.to') }}
+        </p>
+
+        <span>{{ to }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { RelativeDatetimeValue } from '@webitel/ui-sdk/enums';
+import { isRelativeDatetimeValue } from '@webitel/ui-sdk/scripts';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const props = defineProps<{
+  value: { from: number; to: number } | RelativeDatetimeValue;
+}>();
+
+const { t } = useI18n();
+
+const isRelativeValue = computed(() => {
+  return isRelativeDatetimeValue(props.value);
+});
+
+const from = computed(() => {
+  return isRelativeDatetimeValue.value
+    ? false
+    : new Date(props.value.from).toLocaleString();
+});
+
+const to = computed(() => {
+  return isRelativeDatetimeValue.value
+    ? false
+    : new Date(props.value.to).toLocaleString();
+});
+</script>
+
+<style lang="scss" scoped>
+@use '@webitel/styleguide/typography' as *;
+
+.duration-filter-value-preview {
+  &__title {
+    @extend %typo-subtitle-1;
+  }
+}
+</style>

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

@@ -1,31 +1,16 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  /**
+   * would be great to use generated type for this
+   * */
+  value: Record<string, unknown>[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ id: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>

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

@@ -1,31 +1,16 @@
 <template>
-  <ul v-if="localValue">
-    <li
-      v-for="({ name }, index) of localValue"
-      :key="index"
-    >
-      {{ name }}
-    </li>
-  </ul>
+  <lookup-filter-value-preview v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue';
-
-import { searchMethod } from './config.js';
+import LookupFilterValuePreview from '../_shared/lookup-filter-preview/lookup-filter-value-preview.vue';
 
 const props = defineProps<{
-  value: number[];
+  /**
+   * would be great to use generated type for this
+   * */
+  value: Record<string, unknown>[];
 }>();
-
-const localValue = ref([]);
-
-const getLocalValue = async () => {
-  const { items } = await searchMethod({ ids: props.value });
-  localValue.value = items;
-};
-
-getLocalValue();
 </script>
 
 <style scoped></style>