@webitel/ui-datalist 1.0.1 → 1.0.3

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

@@ -28,4 +28,4 @@ const getLocalValue = async () => {
 getLocalValue();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/status-case/config.js

@@ -1,5 +1,5 @@
-import CaseStatusConditionsAPI from '../../../../../../../api/clients/caseStatusConditions/caseStatusConditions.js';
-import CaseStatusesApi from '../../../../../../../api/clients/caseStatuses/caseStatuses.js';
+import CaseStatusConditionsAPI from '@webitel/ui-sdk/api/clients/caseStatusConditions/caseStatusConditions';
+import CaseStatusesApi from '@webitel/ui-sdk/api/clients/caseStatuses/caseStatuses';
 
 export const caseStatusesSearchMethod = CaseStatusesApi.getLookup;
 export const caseStatusConditionsSearchMethod =

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

@@ -31,10 +31,10 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import { WtSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import WtSelect from '../../../../../../../components/wt-select/wt-select.vue';
 import {
   caseStatusConditionsSearchMethod,
   caseStatusesSearchMethod,
@@ -99,4 +99,4 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

@@ -34,4 +34,4 @@ const getLocalValue = async () => {
 getLocalValue();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

@@ -15,10 +15,10 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import { WtSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import WtSelect from '../../../../../../../components/wt-select/wt-select.vue';
 import { TagOptions } from '../../../enums/tag-options';
 
 const model = defineModel<string>();
@@ -49,4 +49,4 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

@@ -35,4 +35,4 @@ const tags = computed(() => {
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/talk-duration/talk-duration-filter-value-field.vue

@@ -16,4 +16,4 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

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

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

@@ -14,10 +14,10 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import { WtSelect } from '@webitel/ui-sdk/components';
 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[];
@@ -53,4 +53,4 @@ const handleInput = (value: ModelValue) => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

@@ -28,4 +28,4 @@ const getLocalValue = async () => {
 getLocalValue();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/total-duration/total-duration-filter-value-field.vue

@@ -16,4 +16,4 @@ const emit = defineEmits<{
 }>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

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

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

@@ -14,10 +14,10 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import { WtSelect } from '@webitel/ui-sdk/components';
 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[];
@@ -53,4 +53,4 @@ const handleInput = (value: ModelValue) => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

@@ -28,4 +28,4 @@ const getLocalValue = async () => {
 getLocalValue();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

@@ -8,11 +8,10 @@
 
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
+import variableSearchValidator from '@webitel/ui-sdk/validators/variableSearchValidator/variableSearchValidator';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import variableSearchValidator from '../../../../../../../validators/variableSearchValidator/variableSearchValidator.js';
-
 type ModelValue = string;
 
 const model = defineModel<ModelValue>();
@@ -47,4 +46,4 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/preview/dynamic-filter-preview.vue

@@ -21,8 +21,13 @@
               {{ t(`webitelUI.filters.${props.filter.name}`) }}
             </template>
 
-            <template>
-              <slot name="info" />
+            <template #default>
+              <slot name="info">
+                <component
+                  :is="FilterOptionToPreviewComponentMap[filter.name]"
+                  :value="filter.value"
+                />
+              </slot>
             </template>
           </dynamic-filter-preview-info>
         </template>
@@ -33,19 +38,27 @@
       <slot
         name="form"
         v-bind="slotScope"
-      />
+      >
+        <dynamic-filter-config-form
+          :filter="filter"
+          @cancel="() => slotScope.hide()"
+          @submit="(payload) => submitFilterChange(payload) && slotScope.hide()"
+        />
+      </slot>
     </template>
   </dynamic-filter-config-view>
 </template>
 
 <script lang="ts" setup>
+import { WtChip } from '@webitel/ui-sdk/components';
+import { WtIconBtn } from '@webitel/ui-sdk/components';
+import { WtTooltip } from '@webitel/ui-sdk/components';
 import { useI18n } from 'vue-i18n';
 
-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 type { FilterInitParams, IFilter } from '../../types/Filter';
+import DynamicFilterConfigForm from '../config/dynamic-filter-config-form.vue';
 import DynamicFilterConfigView from '../config/dynamic-filter-config-view.vue';
+import { FilterOptionToPreviewComponentMap } from '../filter-options';
 import DynamicFilterPreviewInfo from './dynamic-filter-preview-info.vue';
 
 interface Props {
@@ -58,12 +71,17 @@ const { t } = useI18n();
 const props = defineProps<Props>();
 
 const emit = defineEmits<{
+  'update:filter': [IFilter];
   'delete:filter': [IFilter];
 }>();
 
 const deleteFilter = () => {
   emit('delete:filter', props.filter);
 };
+
+const submitFilterChange = (filter: FilterInitParams) => {
+  emit('update:filter', filter);
+};
 </script>
 
 <style lang="scss" scoped>

package/src/filters/components/table-filters-panel.vue

@@ -1,87 +1,157 @@
 <template>
-  <section class="table-filters-panel">
-    <slot></slot>
-    <div class="table-filters-panel-filters">
-      <dynamic-filter-add-action>
-        <template #form>
-          <dynamic-filter-config-form
-            :options="unappliedFilters"
-            @submit="applyFilter"
-          >
-            <template
-              #value-input="{
-                filterName,
-                filterValue,
-                onValueChange,
-                onValueInvalidChange,
-              }"
-            >
-              <component
-                :is="getFilterValueComponent(filterName)"
-                :key="filterName"
-                :model-value="filterValue"
-                @update:model-value="onValueChange"
-                @undate:invalid="onValueInvalidChange"
-              />
-            </template>
-          </dynamic-filter-config-form>
-        </template>
-      </dynamic-filter-add-action>
+  <dynamic-filter-panel-wrapper>
+    <template #filters>
+      <!--        WTF? -  /* https://webitel.atlassian.net/browse/WTEL-6308?focusedCommentId=657415 */ -->
+      <!--TODO-->
+      <!--        <dynamic-filter-preview-->
+      <!--          v-if="!hasCreatedAtFromFilter"-->
+      <!--          :filter="defaultCreatedAtFromFilterDataPreview"-->
+      <!--          dummy-->
+      <!--        >-->
+      <!--          <template #info>-->
+      <!--            <component-->
+      <!--              :is="FilterOptionToPreviewComponentMap[FilterOption.CreatedAtFrom]"-->
+      <!--              :value="defaultCreatedAtFromFilterDataPreview.value"-->
+      <!--            />-->
+      <!--          </template>-->
+      <!--        </dynamic-filter-preview>-->
 
       <dynamic-filter-preview
         v-for="filter of appliedFilters"
         :key="filter.name"
         :filter="filter"
-        @delete:filter="deleteAppliedFilter($event.name)"
-      >
-        <template #form>
-          <dynamic-filter-config-form
-            :filter="filter"
-            @submit="updateAppliedFilter"
-          >
-            <template
-              #value-input="{
-                filterName,
-                filterValue,
-                onValueChange,
-                onValueInvalidChange,
-              }"
-            >
-              <component
-                :is="getFilterValueComponent(filterName)"
-                :key="filterName"
-                :model-value="filterValue"
-                @update:model-value="onValueChange"
-                @undate:invalid="onValueInvalidChange"
-              />
-            </template>
-          </dynamic-filter-config-form>
-        </template>
-      </dynamic-filter-preview>
-    </div>
-    <div class="table-filters-panel-actions"></div>
-  </section>
+        disable-click-away
+        @update:filter="emit('filter:update', $event)"
+        @delete:filter="emit('filter:delete', filter)"
+      />
+
+      <dynamic-filter-add-action
+        :show-label="!appliedFilters.length"
+        :filter-options="availableFilterOptions"
+        @add:filter="emit('filter:add', $event)"
+      />
+    </template>
+
+    <template #actions>
+      <apply-preset-action
+        :namespace="props.presetNamespace"
+        :use-presets-store="props.usePresetsStore"
+        @apply="emit('preset:apply', $event)"
+      />
+
+      <save-preset-action
+        v-if="enablePresets"
+        :namespace="props.presetNamespace"
+        :filters-manager="props.filtersManager"
+      />
+
+      <wt-icon-action
+        action="clear"
+        @click="emit('filter:reset-all')"
+      />
+
+      <wt-icon-action
+        action="close"
+        @click="emit('hide')"
+      />
+    </template>
+  </dynamic-filter-panel-wrapper>
 </template>
 
 <script lang="ts" setup>
-import DynamicFilterConfigForm from './config/dynamic-filter-config-form.vue';
+import { WtIconAction } from '@webitel/ui-sdk/components';
+import { Store } from 'pinia';
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import { ApplyPresetAction, SavePresetAction } from '../../filter-presets';
+import { FilterOption } from '../enums/FilterOption';
+import { FilterData, IFilter } from '../types/Filter';
+import { IFiltersManager } from '../types/FiltersManager';
 import DynamicFilterAddAction from './dynamic-filter-add-action.vue';
+import DynamicFilterPanelWrapper from './dynamic-filter-panel-wrapper.vue';
 import DynamicFilterPreview from './preview/dynamic-filter-preview.vue';
 
-interface Props {}
+type Props = {
+  /**
+   * @description
+   * available filter options to set
+   */
+  filterOptions: FilterOption[];
+  /**
+   * @description
+   * Looks like a anti-pattern, but save-preset.vue component needs filterManager
+   */
+  filtersManager: IFiltersManager;
+  /**
+   * @description
+   * QueryPreset "section" field
+   */
+  presetNamespace?: string;
+  /**
+   * @author @dlohvinov
+   *
+   * @description
+   * table store for operating with presets as dataList.
+   * Seems to me like a bad idea, because apply-preset should not store
+   * any data in a specific store – component state should be enough.
+   * However as for now, there's no composable implementing this logic,
+   * so store is used instead.
+   *
+   * TODO: https://github.com/webitel/webitel-ui-sdk/pull/551
+   */
+  usePresetsStore: Store;
+};
 
 const props = defineProps<Props>();
 
+/**
+ * @author @dlohvinov
+ *
+ * @description
+ * There are 2 reasons to use `add`/`update`/`delete` events
+ * instead of mutate `props.filtersManager` directly:
+ * 1. It's possible to add some custom logic on those event in parent component/store
+ * 2. filtersManager shouldn't be passed here, it seems to me like an anti-pattern
+ */
 const emit = defineEmits<{
-  'add:filter': [];
-  'update:filter': [];
-  'delete:filter': [];
-  'reset:filters': [];
+  'filter:add': [FilterData];
+  'filter:update': [FilterData];
+  'filter:delete': [IFilter];
+  'filter:reset-all': [];
+  /**
+   * string == filtersManager.toString() snapshot
+   */
+  'preset:apply': [string];
   hide: [];
 }>();
+
+const { t } = useI18n();
+
+const appliedFilters = computed(() => {
+  return props.filtersManager.getFiltersList({
+    include: props.filterOptions,
+  });
+});
+
+/**
+ * @description
+ * available filters to add, with appliedFilters excluded
+ */
+const availableFilterOptions = computed(() => {
+  return props.filterOptions
+    .filter((opt) => {
+      return appliedFilters.value.every((filter) => {
+        return filter.name !== opt;
+      });
+    })
+    .map((opt) => ({
+      name: t(`webitelUI.filters.${opt}`),
+      value: opt,
+    }));
+});
+
+const enablePresets = computed(() => !!props.presetNamespace);
 </script>
 
-<style lang="scss" scoped>
-.table-filters-panel {
-}
-</style>
+<style scoped></style>

package/src/filters/index.ts

@@ -1,5 +1,8 @@
 import { Filter } from './classes/Filter.ts';
 import { createFiltersManager } from './classes/FiltersManager';
+import DynamicFilterSearchComponent from './components/dynamic-filter-search.vue';
+import TableFiltersPanelComponent from './components/table-filters-panel.vue';
+import { FilterOption } from './enums/FilterOption';
 import type {
   FilterConfig,
   FilterInitParams,
@@ -13,7 +16,13 @@ import type {
   IFiltersManager,
 } from './types/FiltersManager.d.ts';
 
-export { createFiltersManager, Filter };
+export {
+  createFiltersManager,
+  DynamicFilterSearchComponent,
+  Filter,
+  FilterOption,
+  TableFiltersPanelComponent,
+};
 
 export type {
   FilterConfig,

package/src/filters/types/Filter.d.ts

@@ -44,3 +44,8 @@ export interface IFilter {
   label?: FilterLabel;
   set: (data: FilterData) => IFilter;
 }
+
+export interface FilterNameSelectRepresentation {
+  name: string;
+  value: FilterName;
+}

package/src/headers/createTableHeadersStore.ts

@@ -1,9 +1,9 @@
+import { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
+import { sortToQueryAdapter } from '@webitel/ui-sdk/scripts';
+import { SortSymbols } from '@webitel/ui-sdk/scripts/sortQueryAdapters';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 
-import { WtTableHeader } from '../../../../components/wt-table/types/WtTable';
-import { sortToQueryAdapter } from '../../../../scripts';
-import { SortSymbols } from '../../../../scripts/sortQueryAdapters';
 import { PersistedStorageType } from '../persist/PersistedStorage.types';
 import { usePersistedStorage } from '../persist/usePersistedStorage.ts';
 

package/src/types/tableStore.types.ts

@@ -1,6 +1,6 @@
+import { ApiModule } from '@webitel/ui-sdk/api/types/ApiModule.type.ts';
 import type { Ref } from 'vue';
 
-import { ApiModule } from '../../../../api/types/ApiModule.type.ts';
 import { IFiltersManager } from '../filters';
 
 export interface useTableStoreParams<Entity> {