@webitel/ui-datalist 1.0.1 → 1.0.3

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@webitel/ui-datalist",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Toolkit for building data lists in webitel ui system",
   "scripts": {
     "lint:fix": "eslint --fix ./src && prettier --write --check ./src",
     "lint:fix-staged": "npx lint-staged",
     "lint:package": "publint",
     "utils:i": "npm i",
+    "utils:link": "npm link",
     "utils:publish": "npm publish --access public"
   },
   "type": "module",
@@ -16,15 +17,9 @@
     "../../"
   ],
   "exports": {
-    ".": {
-      "import": "./src/index.ts"
-    },
-    "./filters": {
-      "import": "./src/filters/index.ts"
-    },
-    "./presets": {
-      "import": "./src/filter-presets/index.ts"
-    }
+    ".": "./src/index.ts",
+    "./filters": "./src/filters/index.ts",
+    "./presets": "./src/filter-presets/index.ts"
   },
   "files": [
     "src/*",

package/src/filter-presets/api/PresetQuery.api.ts

@@ -1,15 +1,9 @@
-import {
-  EngineCreatePresetQueryRequest,
-  EnginePresetQuery,
-  PresetQueryServiceApiFactory,
-} from 'webitel-sdk';
-
 import {
   getDefaultGetListResponse,
   getDefaultGetParams,
   getDefaultInstance,
   getDefaultOpenAPIConfig,
-} from '../../../../../api/defaults/index';
+} from '@webitel/ui-sdk/api/defaults/index';
 import applyTransform, {
   camelToSnake,
   merge,
@@ -17,7 +11,12 @@ import applyTransform, {
   skipIf,
   snakeToCamel,
   starToSearch,
-} from '../../../../../api/transformers/index';
+} from '@webitel/ui-sdk/api/transformers/index';
+import {
+  EngineCreatePresetQueryRequest,
+  EnginePresetQuery,
+  PresetQueryServiceApiFactory,
+} from 'webitel-sdk';
 
 const instance = getDefaultInstance();
 const configuration = getDefaultOpenAPIConfig();

package/src/filter-presets/components/_shared/input-fields/preset-description-field.vue

@@ -17,10 +17,9 @@
 </template>
 
 <script setup lang="ts">
+import { WtLabel, WtTextarea } from '@webitel/ui-sdk/components';
 import { useI18n } from 'vue-i18n';
 
-import { WtLabel,WtTextarea } from '../../../../../../../components/index';
-
 const model = defineModel<string>();
 
 const props = defineProps<{
@@ -30,4 +29,4 @@ const props = defineProps<{
 const { t } = useI18n();
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped></style>

package/src/filter-presets/components/_shared/input-fields/preset-name-field.vue

@@ -9,10 +9,9 @@
 
 <script setup lang="ts">
 import { Validation } from '@vuelidate/core';
+import { WtInput } from '@webitel/ui-sdk/components';
 import { useI18n } from 'vue-i18n';
 
-import { WtInput } from '../../../../../../../components/index';
-
 type ModelValue = string;
 
 const model = defineModel<ModelValue>();
@@ -26,4 +25,4 @@ const props = defineProps<Props>();
 const { t } = useI18n();
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped></style>

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

@@ -25,9 +25,9 @@
 </template>
 
 <script setup lang="ts">
+import { WtLabel } from '@webitel/ui-sdk/components';
 import { useI18n } from 'vue-i18n';
 
-import { WtLabel } from '../../../../../../components/index';
 import type { IFilter } from '../../../filters';
 import DynamicFilterPanelWrapper from '../../../filters/components/dynamic-filter-panel-wrapper.vue';
 import { FilterOptionToPreviewComponentMap } from '../../../filters/components/filter-options';
@@ -42,4 +42,4 @@ const props = defineProps<Props>();
 const { t } = useI18n();
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped></style>

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

@@ -68,20 +68,20 @@
 </template>
 
 <script lang="ts" setup>
-import { type StoreDefinition, storeToRefs } from 'pinia';
-import { computed, inject, onUnmounted,ref, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { EnginePresetQuery } from 'webitel-sdk';
-
 import {
   WtButton,
   WtEmpty,
   WtIconAction,
   WtPopup,
   WtSearchBar,
-} from '../../../../../../components/index';
-import { IconAction } from '../../../../../../enums';
-import { useTableEmpty } from '../../../../../TableComponentModule/composables/useTableEmpty';
+} from '@webitel/ui-sdk/components';
+import { IconAction } from '@webitel/ui-sdk/enums';
+import { useTableEmpty } from '@webitel/ui-sdk/modules/TableComponentModule/composables/useTableEmpty';
+import { type Store, storeToRefs } from 'pinia';
+import { computed, inject, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { EnginePresetQuery } from 'webitel-sdk';
+
 import PresetQueryAPI from '../../api/PresetQuery.api.ts';
 import PresetPreview from './preset-preview.vue';
 
@@ -90,7 +90,7 @@ const props = defineProps<{
    * presets "section" namespace
    */
   namespace: string;
-  usePresetsStore: StoreDefinition;
+  usePresetsStore: Store;
 }>();
 
 const emit = defineEmits<{
@@ -104,7 +104,7 @@ const { t } = useI18n();
 const showPresetsList = ref(false);
 
 const presetsStore = props.usePresetsStore();
-const { dataList, error, isLoading, filtersManager, page } =
+const { dataList, error, isLoading, filtersManager } =
   storeToRefs(presetsStore);
 
 const { loadDataList, initialize, updateSize, deleteEls } = presetsStore;

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

@@ -76,16 +76,16 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
-import { AxiosError } from 'axios';
-import { computed, ref } from 'vue';
-import { EnginePresetQuery } from 'webitel-sdk';
-
 import {
   WtExpansionPanel,
   WtIconAction,
   WtRadio,
-} from '../../../../../../components/index';
-import { createFiltersManager } from '../../../filters/index';
+} from '@webitel/ui-sdk/components';
+import { AxiosError } from 'axios';
+import { computed, ref } from 'vue';
+import { EnginePresetQuery } from 'webitel-sdk';
+
+import { createFiltersManager } 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';

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

@@ -34,10 +34,10 @@
 </template>
 
 <script setup lang="ts">
+import { WtPopup } from '@webitel/ui-sdk/components';
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import { WtPopup } from '../../../../../../components/index';
 import { SubmitConfig } from './save-preset-popup.vue';
 
 const emit = defineEmits<{

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

@@ -30,13 +30,13 @@
 </template>
 
 <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 { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
-import { WtIconAction } from '../../../../../../components/index';
-import { IconAction } from '../../../../../../enums';
-import { IFiltersManager } from '../../../filters/index';
+import { IFiltersManager } from '../../../filters';
 import {
   addPreset,
   getPresetList,
@@ -136,4 +136,4 @@ const handlePresetOverwriteConfirmation = async ({
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

@@ -48,11 +48,11 @@
 <script setup lang="ts">
 import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
+import { WtPopup } from '@webitel/ui-sdk/components';
 import { computed, reactive, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { EnginePresetQuery } from 'webitel-sdk';
 
-import { WtPopup } from '../../../../../../components/index';
 import type { IFiltersManager } from '../../../index';
 import PresetDescriptionField from '../_shared/input-fields/preset-description-field.vue';
 import PresetNameField from '../_shared/input-fields/preset-name-field.vue';

package/src/filters/classes/FiltersManager.ts

@@ -1,4 +1,5 @@
-import { isEmpty } from '../../../../../scripts';
+import { isEmpty } from '@webitel/ui-sdk/scripts';
+
 import {
   filterLabelToSnapshotKey,
   filterNameFromSnapshotKey,

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

@@ -10,11 +10,10 @@
 <script setup lang="ts">
 import { useVuelidate } from '@vuelidate/core';
 import { maxLength } from '@vuelidate/validators';
+import { WtInput } from '@webitel/ui-sdk/components';
 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>();
@@ -47,4 +46,4 @@ watch(
 );
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped></style>

package/src/filters/components/config/dynamic-filter-config-form.vue

@@ -16,11 +16,20 @@
       v-bind="{
         filterName,
         filterValue,
-        inputLabel: t('webitelUI.filters.filterValue'),
-        onValueChange: (v) => (filterValue = v),
-        onValueInvalidChange: (v) => (invalid = v),
+        inputLabel: valueInputLabelText,
+        onValueChange,
+        onValueInvalidChange,
       }"
-    />
+    >
+      <component
+        :is="FilterOptionToValueComponentMap[filterName]"
+        :key="filterName"
+        :model-value="filterValue"
+        :label="valueInputLabelText"
+        @update:model-value="onValueChange"
+        @update:invalid="onValueInvalidChange"
+      />
+    </slot>
 
     <dynamic-filter-config-form-label
       :value="filterLabel"
@@ -49,20 +58,19 @@
 </template>
 
 <script lang="ts" setup>
+import { WtButton, WtSelect } from '@webitel/ui-sdk/components';
 import deepcopy from 'deep-copy';
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import WtButton from '../../../../../../components/wt-button/wt-button.vue';
-import WtSelect from '../../../../../../components/wt-select/wt-select.vue';
-import type { FilterInitParams, FilterName, IFilter } from '../../types/Filter';
+import type {
+  FilterInitParams,
+  FilterNameSelectRepresentation,
+  IFilter,
+} from '../../types/Filter';
+import { FilterOptionToValueComponentMap } from '../filter-options';
 import DynamicFilterConfigFormLabel from './dynamic-filter-config-form-label.vue';
 
-interface FilterNameSelectRepresentation {
-  name: string;
-  value: FilterName;
-}
-
 interface AddModeProps {
   options: Array<FilterNameSelectRepresentation>;
 }
@@ -90,6 +98,18 @@ const editMode = !!props.filter;
 
 const invalid = ref(false);
 
+const onValueChange = (v) => {
+  filterValue.value = v;
+};
+
+const onValueInvalidChange = (v) => {
+  invalid.value = v;
+};
+
+const valueInputLabelText = computed(() => {
+  return t('webitelUI.filters.filterValue');
+});
+
 const onLabelValueUpdate = (val: string) => {
   filterLabel.value = val;
 };

package/src/filters/components/config/dynamic-filter-config-view.vue

@@ -8,13 +8,13 @@
       <template #activator="slotScope">
         <slot
           name="activator"
-          v-bind="slotScope"
+          v-bind="{ tooltipSlotScope: slotScope }"
         />
       </template>
       <template #default="slotScope">
         <slot
           name="content"
-          v-bind="slotScope"
+          v-bind="{ tooltipSlotScope: slotScope }"
         />
       </template>
     </wt-tooltip>
@@ -27,7 +27,7 @@
  * and their styling
  */
 
-import WtTooltip from '../../../../../../components/wt-tooltip/wt-tooltip.vue';
+import { WtTooltip } from '@webitel/ui-sdk/components';
 
 interface Props {
   disabled?: boolean;
@@ -37,4 +37,4 @@ interface Props {
 const props = defineProps<Props>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

@@ -12,30 +12,52 @@
       </div>
     </template>
 
-    <template #content="slotScope">
+    <template #content="{ tooltipSlotScope }">
       <slot
         name="form"
-        v-bind="slotScope"
+        v-bind="{ tooltipSlotScope }"
       >
-        filter form should be here
+        <dynamic-filter-config-form
+          :options="props.filterOptions"
+          @cancel="() => tooltipSlotScope.hide()"
+          @submit="
+            (payload) =>
+              submitFilterChange(payload, { hide: tooltipSlotScope.hide })
+          "
+        />
       </slot>
     </template>
   </dynamic-filter-config-view>
 </template>
 
 <script lang="ts" setup>
+import { WtIconAction } from '@webitel/ui-sdk/components';
 import { useI18n } from 'vue-i18n';
 
-import WtIconAction from '../../../../../components/wt-icon-action/wt-icon-action.vue';
+import type {
+  FilterInitParams,
+  FilterNameSelectRepresentation,
+} from '../types/Filter';
+import DynamicFilterConfigForm from './config/dynamic-filter-config-form.vue';
 import DynamicFilterConfigView from './config/dynamic-filter-config-view.vue';
 
 interface Props {
+  filterOptions: FilterNameSelectRepresentation[];
   showLabel?: boolean;
 }
 
 const props = defineProps<Props>();
 
 const { t } = useI18n();
+
+const emit = defineEmits<{
+  'add:filter': [FilterInitParams];
+}>();
+
+const submitFilterChange = (payload: FilterInitParams, { hide }) => {
+  emit('add:filter', payload);
+  hide();
+};
 </script>
 
 <style lang="scss" scoped>

package/src/filters/components/dynamic-filter-panel-wrapper.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { ComponentSize } from '../../../../../enums';
+import { ComponentSize } from '@webitel/ui-sdk/enums';
 
 const props = withDefaults(
   defineProps<{

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

@@ -18,11 +18,10 @@
 </template>
 
 <script lang="ts" setup>
+import { WtSearchBar } from '@webitel/ui-sdk/components';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import WtSearchBar from '../../../../../components/wt-search-bar/wt-search-bar.vue';
-
 type ModelValue = string;
 const model = defineModel<ModelValue>();
 
@@ -58,4 +57,4 @@ const searchModeOptions = computed(() =>
 );
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/_shared/has-options/has-option-filter-value-field.vue

@@ -13,10 +13,10 @@
 </template>
 
 <script lang="ts" setup>
+import { WtSelect } from '@webitel/ui-sdk/components';
 import { computed, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import WtSelect from '../../../../../../../../components/wt-select/wt-select.vue';
 import { BooleanOptions } from '../../../../enums/boolean-options';
 
 const model = defineModel<boolean | null>();
@@ -35,4 +35,4 @@ const strModel = computed({
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/actual-reaction-time/actual-reaction-time-filter-value-field.vue

@@ -15,4 +15,4 @@ type ModelValue = {
 const model = defineModel<ModelValue>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/actual-resolution-time/actual-resolution-time-filter-value-field.vue

@@ -15,4 +15,4 @@ type ModelValue = {
 const model = defineModel<ModelValue>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/agent/agent-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[];
@@ -55,4 +55,4 @@ const handleInput = (value: ModelValue) => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

package/src/filters/components/filter-options/agent/agent-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/agent/config.js

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

package/src/filters/components/filter-options/amd-result/amd-result-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 { AmdResultOptions } from '../../../enums/amd-result-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/amd-result/amd-result-filter-value-preview.vue

@@ -15,4 +15,4 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

@@ -21,11 +21,10 @@
 <script lang="ts" setup>
 import { useVuelidate } from '@vuelidate/core';
 import { requiredIf } from '@vuelidate/validators';
+import { WtCheckbox, WtSelect } from '@webitel/ui-sdk/components';
 import { computed, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
-import WtCheckbox from '../../../../../../../components/wt-checkbox/wt-checkbox.vue';
-import WtSelect from '../../../../../../../components/wt-select/wt-select.vue';
 import { searchMethod } from './config.js';
 
 type ModelValue = {
@@ -71,4 +70,4 @@ watch(
 );
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>

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

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

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

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

package/src/filters/components/filter-options/author/author-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/author/author-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/author/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/cause/cause-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 { HangupCauseOptions } from '../../../enums/hangup-cause-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/cause/cause-filter-value-preview.vue

@@ -15,4 +15,4 @@ const props = defineProps<{
 }>();
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped></style>