@webitel/ui-datalist 26.8.13 → 26.8.15

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "26.8.13",
+	"version": "26.8.15",
 	"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/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: {

package/src/modules/filters/modules/filterConfig/components/tags/tags-filter-value-preview.vue

@@ -1,7 +1,7 @@
 <template>
-  <ul v-if="value?.length">
+  <ul v-if="tags.length">
     <li
-      v-for="(tag, index) of value"
+      v-for="(tag, index) of tags"
       :key="index"
     >
       {{ tag }}
@@ -10,10 +10,15 @@
 </template>
 
 <script lang="ts" setup>
-defineProps<{
-	/** tag names — this filter stores strings, not lookup objects */
-	value?: string[];
+import { computed } from 'vue';
+
+import type { IFilter } from '../../../../classes/Filter';
+
+const props = defineProps<{
+	filter: IFilter;
 }>();
+
+const tags = computed(() => (props.filter.value as string[] | undefined) ?? []);
 </script>
 
 <style scoped></style>