@webitel/ui-datalist 26.8.12 → 26.8.14

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.8.12",
+	"version": "26.8.14",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -b tsconfig.build.json",

package/src/modules/filters/components/config/static-view/__tests__/static-filter-field.spec.ts

@@ -14,6 +14,7 @@ import StaticFilterField from '../static-filter-field.vue';
 const StubInput = {
 	props: [
 		'modelValue',
+		'hideLabel',
 	],
 	emits: [
 		'update:modelValue',
@@ -124,4 +125,13 @@ describe('StaticFilterField', () => {
 
 		expect(wrapper.emitted('delete:filter')).toBeUndefined();
 	});
+
+	/* static mode used to force hideLabel on every value field, which left
+	   select-based filters (has-option-filter-value-field) with no visible
+	   label at all — the value field itself now decides whether to show one */
+	it('does not force hideLabel on its value field', () => {
+		const wrapper = mountField(deletableConfig, filtersManager);
+
+		expect(wrapper.findComponent(StubInput).props('hideLabel')).toBeUndefined();
+	});
 });

package/src/modules/filters/components/config/static-view/static-filter-field.vue

@@ -10,10 +10,8 @@
       :disable-default-value="true"
       :disable-validation="true /*for static filters validation is not needed (different presentation with dynamic filters)*/"
       :filter-config="filterConfig"
-      :hide-label="true /*for static filters need to hide label and display placeholder (different presentation with dynamic filters)*/"
       :static-view="true"
       :model-value="filterValue"
-      :placeholder="filterConfig.label"
       @update:model-value="onValueChange"
     />
   </div>

package/src/modules/filters/components/search-bar/__tests__/dynamic-filter-search.spec.ts

@@ -0,0 +1,97 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { reactive } from 'vue';
+
+import {
+	createFiltersManager,
+	type IFiltersManager,
+} from '../../../classes/FiltersManager';
+import DynamicFilterSearch from '../dynamic-filter-search.vue';
+
+const searchModeOptions = [
+	{
+		value: 'name',
+		text: 'Name',
+	},
+	{
+		value: 'about',
+		text: 'About',
+	},
+];
+
+const newFiltersManager = () =>
+	reactive(createFiltersManager()) as IFiltersManager;
+
+const mountSearch = (
+	filtersManager: IFiltersManager,
+	props: Record<string, unknown> = {},
+) =>
+	shallowMount(DynamicFilterSearch, {
+		props: {
+			filtersManager,
+			...props,
+		},
+	});
+
+/* wt-search-bar is an async component, shallowMount renders it as the root stub */
+const searchBarValue = (wrapper: ReturnType<typeof mountSearch>) =>
+	wrapper.attributes('value');
+
+describe('dynamic-filter-search', () => {
+	it('restores the value of the filter of the current search mode', async () => {
+		const filtersManager = newFiltersManager();
+
+		const wrapper = mountSearch(filtersManager, {
+			searchModeOptions,
+			searchMode: 'name',
+			isFiltersRestoring: true,
+		});
+
+		filtersManager.addFilter({
+			name: 'name',
+			value: 'john',
+		});
+		await wrapper.setProps({
+			isFiltersRestoring: false,
+		});
+
+		expect(searchBarValue(wrapper)).toBe('john');
+	});
+
+	it('switches the search mode to the restored search filter', async () => {
+		const filtersManager = newFiltersManager();
+
+		const wrapper = mountSearch(filtersManager, {
+			searchModeOptions,
+			searchMode: '',
+			isFiltersRestoring: true,
+		});
+
+		filtersManager.addFilter({
+			name: 'about',
+			value: 'manager',
+		});
+		await wrapper.setProps({
+			isFiltersRestoring: false,
+		});
+
+		expect(searchBarValue(wrapper)).toBe('manager');
+		expect(wrapper.emitted('update:searchMode')?.at(-1)).toEqual([
+			'about',
+		]);
+	});
+
+	it('restores the value of a single search filter', () => {
+		const filtersManager = newFiltersManager();
+		filtersManager.addFilter({
+			name: 'q',
+			value: 'john',
+		});
+
+		const wrapper = mountSearch(filtersManager, {
+			singleSearchName: 'q',
+		});
+
+		expect(searchBarValue(wrapper)).toBe('john');
+	});
+});

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

@@ -155,12 +155,14 @@ watch(
 	(next) => {
 		if (next) return;
 
-		const searchModes = [
-			defaultSearchName,
-		];
+		const searchModes = hasSearchModes.value
+			? (props.searchModeOptions?.map((option) => option.value) ?? [])
+			: [
+					defaultSearchName,
+				];
+
 		if (hasSearchModes.value && !searchMode.value) {
-			searchMode.value =
-				props.searchModeOptions?.map((option) => option.value)[0] || '';
+			searchMode.value = searchModes[0] || '';
 		}
 
 		for (const mode of searchModes) {

package/src/modules/filters/modules/filterConfig/components/_shared/has-options/__tests__/has-option-filter-value-field.spec.ts

@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+
+import { createFilterConfig } from '../../../../classes/createFilterConfig';
+import { FilterOption } from '../../../../enums/FilterOption';
+import HasOptionFilterValueField from '../has-option-filter-value-field.vue';
+
+describe('HasOptionFilterValueField label', () => {
+	it('renders a name-based label by default (static-filter-field no longer forces hideLabel)', () => {
+		const filterConfig = createFilterConfig({
+			name: FilterOption.Rated,
+			showFilterName: true,
+		});
+
+		const wrapper = mount(HasOptionFilterValueField, {
+			props: {
+				filterConfig,
+			},
+		});
+
+		expect(wrapper.find('.wt-select__label').exists()).toBe(true);
+		expect(wrapper.find('.wt-select__label').text()).toContain('Rated');
+	});
+
+	it('still respects an explicit hideLabel, e.g. has-user-filter-value-field always passing it', () => {
+		const filterConfig = createFilterConfig({
+			name: FilterOption.Rated,
+			showFilterName: true,
+		});
+
+		const wrapper = mount(HasOptionFilterValueField, {
+			props: {
+				filterConfig,
+				hideLabel: true,
+			},
+		});
+
+		expect(wrapper.find('.wt-select__label').exists()).toBe(false);
+	});
+});

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

@@ -1,12 +1,12 @@
 <template>
   <wt-single-select
-    :label="labelValue"
     :options="BooleanOptions"
     v-model:model-value="strModel"
     class="has-option-filter-value-field"
     data-key="value"
     option-value="value"
     v-bind="attrs"
+    :label="labelValue"
   />
 </template>
 
@@ -15,10 +15,13 @@ import { WtSingleSelect } from '@webitel/ui-sdk/components';
 import { computed, useAttrs } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { WtSysTypeFilterConfig } from '../../../classes/FilterConfig';
 import { BooleanOptions } from '../../../enums/options/BooleanFilterOptions';
 
 const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
 	hideLabel?: boolean;
+	label?: string;
 }>();
 
 const model = defineModel<boolean | null>();
@@ -27,9 +30,13 @@ const attrs = useAttrs();
 
 const { t } = useI18n();
 
-const labelValue = computed(() =>
-	props?.hideLabel ? undefined : t('webitelUI.filters.filterValue'),
-);
+const labelValue = computed(() => {
+	if (props?.hideLabel) return;
+	const value = props?.filterConfig?.showFilterName
+		? props?.filterConfig.name
+		: 'filterValue';
+	return t(`webitelUI.filters.${value}`);
+});
 
 const strModel = computed({
 	get: () => {

package/src/modules/filters/modules/filterConfig/components/has-attachment/has-attachment-filter-value-field.vue

@@ -1,5 +1,6 @@
 <template>
   <has-option-filter-value-field
+    :filter-config="filterConfig"
     :model-value="model"
     :v="!disableValidation && v$.model"
     @update:model-value="model = $event"
@@ -11,9 +12,11 @@ import { useVuelidate } from '@vuelidate/core';
 import { required } from '@vuelidate/validators';
 import { computed, watch } from 'vue';
 
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
 
 const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
 	disableValidation?: boolean;
 }>();
 

package/src/modules/filters/modules/filterConfig/components/has-file/has-file-filter-value-field.vue

@@ -1,7 +1,8 @@
 <template>
   <has-option-filter-value-field
+    :filter-config="filterConfig"
     :model-value="model"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
     @update:model-value="model = $event"
   />
 </template>
@@ -9,10 +10,16 @@
 <script lang="ts" setup>
 import { watch } from 'vue';
 
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
 import { useBooleanFilterValueValidation } from '../../composables/booleanFilterToolkit';
 import { BooleanFilterModelValue } from '../../enums/options/BooleanFilterOptions';
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
 
+const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<BooleanFilterModelValue | null>();
 
 const { v$ } = useBooleanFilterValueValidation<BooleanFilterModelValue>(model);
@@ -26,7 +33,7 @@ const emit = defineEmits<{
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {
-		emit('update:invalid', invalid);
+		emit('update:invalid', props.disableValidation ? false : invalid);
 	},
 	{
 		immediate: true,

package/src/modules/filters/modules/filterConfig/components/has-rating/has-rating-filter-value-field.vue

@@ -1,7 +1,8 @@
 <template>
   <has-option-filter-value-field
+    :filter-config="filterConfig"
     :model-value="model"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
     @update:model-value="model = $event"
   />
 </template>
@@ -9,10 +10,16 @@
 <script lang="ts" setup>
 import { watch } from 'vue';
 
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
 import { useBooleanFilterValueValidation } from '../../composables/booleanFilterToolkit';
 import { BooleanFilterModelValue } from '../../enums/options/BooleanFilterOptions';
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
 
+const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<BooleanFilterModelValue | null>();
 
 const { v$ } = useBooleanFilterValueValidation<BooleanFilterModelValue>(model);
@@ -26,7 +33,7 @@ const emit = defineEmits<{
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {
-		emit('update:invalid', invalid);
+		emit('update:invalid', props.disableValidation ? false : invalid);
 	},
 	{
 		immediate: true,

package/src/modules/filters/modules/filterConfig/components/has-transcription/has-transcription-filter-value-field.vue

@@ -1,7 +1,8 @@
 <template>
   <has-option-filter-value-field
+    :filter-config="filterConfig"
     :model-value="model"
-    :v="v$.model"
+    :v="!disableValidation && v$.model"
     @update:model-value="model = $event"
   />
 </template>
@@ -9,10 +10,16 @@
 <script lang="ts" setup>
 import { watch } from 'vue';
 
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
 import { useBooleanFilterValueValidation } from '../../composables/booleanFilterToolkit';
 import { BooleanFilterModelValue } from '../../enums/options/BooleanFilterOptions';
 import HasOptionFilterValueField from '../_shared/has-options/has-option-filter-value-field.vue';
 
+const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
+	disableValidation?: boolean;
+}>();
+
 const model = defineModel<BooleanFilterModelValue | null>();
 
 const { v$ } = useBooleanFilterValueValidation<BooleanFilterModelValue>(model);
@@ -26,7 +33,7 @@ const emit = defineEmits<{
 watch(
 	() => v$.value.$invalid,
 	(invalid) => {
-		emit('update:invalid', invalid);
+		emit('update:invalid', props.disableValidation ? false : invalid);
 	},
 	{
 		immediate: true,

package/src/modules/filters/modules/filterConfig/components/rated-by/__tests__/rated-by-filter-value-field.spec.ts

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+
+import { createFilterConfig } from '../../../classes/createFilterConfig';
+import { FilterOption } from '../../../enums/FilterOption';
+import RatedByFilterValueField from '../rated-by-filter-value-field.vue';
+
+vi.mock('@webitel/api-services/api', async (importOriginal) => ({
+	...(await importOriginal()),
+	UsersAPI: {
+		getLookup: vi.fn(() =>
+			Promise.resolve({
+				items: [],
+				next: false,
+			}),
+		),
+	},
+}));
+
+describe('RatedByFilterValueField label', () => {
+	it('shows the filter name, not the generic "Value" text, when showFilterName is set', () => {
+		const filterConfig = createFilterConfig({
+			name: FilterOption.RatedBy,
+			showFilterName: true,
+		});
+
+		const wrapper = mount(RatedByFilterValueField, {
+			props: {
+				filterConfig,
+			},
+		});
+
+		expect(wrapper.find('.wt-select__label').text()).not.toBe('Value');
+	});
+});

package/src/modules/filters/modules/filterConfig/components/rated-by/rated-by-filter-value-field.vue

@@ -1,6 +1,6 @@
 <template>
   <wt-multi-select
-    :label="t('webitelUI.filters.filterValue')"
+    :label="labelValue"
     :search-method="searchMethod"
     :model-value="model"
     :v="!disableValidation && v$.model"
@@ -16,11 +16,13 @@ import { WtMultiSelect } from '@webitel/ui-sdk/components';
 import { computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
+import { WtSysTypeFilterConfig } from '../../classes/FilterConfig';
 import { searchMethod } from './config.js';
 
 type ModelValue = number[];
 
 const props = defineProps<{
+	filterConfig?: WtSysTypeFilterConfig;
 	disableValidation?: boolean;
 }>();
 
@@ -33,6 +35,13 @@ const emit = defineEmits<{
 }>();
 const { t } = useI18n();
 
+const labelValue = computed(() => {
+	const value = props?.filterConfig?.showFilterName
+		? props?.filterConfig.name
+		: 'filterValue';
+	return t(`webitelUI.filters.${value}`);
+});
+
 const v$ = useVuelidate(
 	computed(() => ({
 		model: {