@webitel/ui-datalist 26.8.24 → 26.8.26

package/package.json

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

package/src/modules/filters/composables/useVariableColumnFilters.ts

@@ -1,24 +1,26 @@
 import type { DataField } from '@webitel/api-services/gen/models';
 import type { WtTableHeader } from '@webitel/ui-sdk/components/wt-table/types/WtTable';
-import { WtTypeExtensionFieldKind } from '@webitel/ui-sdk/enums';
 import { isVariableHeader } from '@webitel/ui-sdk/modules/TableVariableColumnSelect';
 import { computed, type MaybeRefOrGetter, toValue } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 import type { FilterInitParams, FilterName, IFilter } from '../classes/Filter';
 import type { IFiltersManager } from '../classes/FiltersManager';
+import {
+	isVariableKeyFilterValue,
+	VariableKeyFilterConfig,
+} from '../modules/filterConfig/components/variable/variableKeyFilterConfig';
 import { FilterOption } from '../modules/filterConfig/enums/FilterOption';
 import {
 	isVariableFilterName,
 	toVariableFilterFields,
 	VARIABLE_FIELD_PREFIX,
-	variableKeyFromFilterName,
 } from '../scripts/variableFilters';
 
 const parseVariableFilterValue = (raw: string) =>
 	raw.split('&').reduce<Record<string, string>>((vars, pair) => {
-		const [key, value] = pair.split('=');
-		if (key) vars[key] = value ?? '';
+		const [key, ...valueParts] = pair.split('=');
+		if (key) vars[key] = valueParts.join('=');
 		return vars;
 	}, {});
 
@@ -37,49 +39,39 @@ export const useVariableColumnFilters = ({
 }) => {
 	const { t } = useI18n();
 
-	const withVariableFilterLabel = (
-		params: FilterInitParams,
-	): FilterInitParams =>
-		isVariableFilterName(params.name)
-			? {
-					...params,
-					label: t('webitelUI.filters.variable'),
-				}
-			: params;
-
 	const variableFilterFields = computed<DataField[]>(() => {
 		const headers = toValue(shownHeaders) || [];
 		const columnHeaders = headers.filter(
 			(header) => isVariableHeader(header) && header.filtered,
 		);
-		const columnFields = toVariableFilterFields(columnHeaders);
 
-		const knownNames = new Set(columnFields.map((field) => field.id));
-		const appliedOnlyFields = toValue(filtersManager)
-			.getAllKeys()
-			.filter((name) => isVariableFilterName(name) && !knownNames.has(name))
-			.map((name) => ({
-				id: name,
-				name: variableKeyFromFilterName(name),
-				kind: WtTypeExtensionFieldKind.Text,
-			}));
-
-		return [
-			...columnFields,
-			...appliedOnlyFields,
-		];
+		return toVariableFilterFields(columnHeaders).filter(
+			(field) => !field.id || !toValue(filtersManager).hasFilter(field.id),
+		);
 	});
 
+	const variableFilterConfigs = computed(() =>
+		toValue(filtersManager)
+			.getAllKeys()
+			.filter(isVariableFilterName)
+			.map(
+				(name) =>
+					new VariableKeyFilterConfig({
+						name,
+						label: t('webitelUI.filters.variable'),
+					}),
+			),
+	);
+
 	const splitVariableFilter = (params: FilterInitParams) => {
 		const variables = parseVariableFilterValue(String(params.value ?? ''));
 
 		Object.entries(variables).forEach(([key, value]) => {
-			addFilter(
-				withVariableFilterLabel({
-					name: `${VARIABLE_FIELD_PREFIX}${key}`,
-					value,
-				}),
-			);
+			addFilter({
+				name: `${VARIABLE_FIELD_PREFIX}${key}`,
+				value,
+				label: params.label,
+			});
 		});
 
 		if (toValue(filtersManager).hasFilter(FilterOption.Variable)) {
@@ -95,7 +87,7 @@ export const useVariableColumnFilters = ({
 			return;
 		}
 
-		addFilter(withVariableFilterLabel(params));
+		addFilter(params);
 	};
 
 	const handleUpdateFilter = (params: FilterInitParams) => {
@@ -104,12 +96,52 @@ export const useVariableColumnFilters = ({
 			return;
 		}
 
-		updateFilter(withVariableFilterLabel(params));
+		updateFilter(params);
+	};
+
+	const updateVariableKeyFilter = ({
+		name,
+		value,
+		label,
+	}: FilterInitParams) => {
+		if (!isVariableKeyFilterValue(value)) {
+			updateFilter({
+				name,
+				value,
+				label,
+			});
+			return;
+		}
+
+		const newName = `${VARIABLE_FIELD_PREFIX}${value.key}`;
+
+		if (newName !== name) {
+			deleteFilter({
+				name,
+			});
+		}
+
+		addFilter({
+			name: newName,
+			value: value.value,
+			label,
+		});
+	};
+
+	const handlePanelUpdateFilter = (params: FilterInitParams) => {
+		if (isVariableFilterName(params.name)) {
+			updateVariableKeyFilter(params);
+			return;
+		}
+
+		handleUpdateFilter(params);
 	};
 
 	return {
 		variableFilterFields,
+		variableFilterConfigs,
 		handleAddFilter,
 		handleUpdateFilter,
+		handlePanelUpdateFilter,
 	};
 };

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

@@ -25,7 +25,11 @@ const props = defineProps<{
 
 const { t } = useI18n();
 
-const variable = props.value.split('=');
+const [key, ...valueParts] = props.value.split('=');
+const variable = [
+	key,
+	valueParts.join('='),
+];
 </script>
 
 <style lang="scss" scoped>

package/src/modules/filters/modules/filterConfig/components/variable/variable-key-filter-value-field.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="variable-key-filter-value-field">
+    <wt-input-text
+      :model-value="variable.key"
+      :label="t('vocabulary.keys')"
+      :v="!disableValidation && v$.variable.key"
+      @update:model-value="updateVariable({ key: $event })"
+    />
+    <wt-input-text
+      :model-value="variable.value"
+      :label="t('vocabulary.values')"
+      :v="!disableValidation && v$.variable.value"
+      @update:model-value="updateVariable({ value: $event })"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useVuelidate } from '@vuelidate/core';
+import { required } from '@vuelidate/validators';
+import { computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import {
+	type IVariableKeyFilterConfig,
+	isVariableKeyFilterValue,
+	type VariableKeyFilterValue,
+} from './variableKeyFilterConfig';
+
+const props = defineProps<{
+	filterConfig: IVariableKeyFilterConfig;
+	disableValidation?: boolean;
+}>();
+
+const emit = defineEmits<{
+	'update:invalid': [
+		boolean,
+	];
+}>();
+
+const model = defineModel<string | VariableKeyFilterValue>();
+
+const { t } = useI18n();
+
+const variable = computed<VariableKeyFilterValue>(() =>
+	isVariableKeyFilterValue(model.value)
+		? model.value
+		: {
+				key: props.filterConfig.variableKey,
+				value: model.value ?? '',
+			},
+);
+
+const updateVariable = (patch: Partial<VariableKeyFilterValue>) => {
+	model.value = {
+		...variable.value,
+		...patch,
+	};
+};
+
+const v$ = useVuelidate(
+	computed(() => ({
+		variable: {
+			key: {
+				required,
+			},
+			value: {
+				required,
+			},
+		},
+	})),
+	{
+		variable,
+	},
+	{
+		$autoDirty: true,
+	},
+);
+
+if (!props.disableValidation) v$.value.$touch();
+
+watch(
+	() => v$.value.$invalid,
+	(invalid) => {
+		emit('update:invalid', invalid);
+	},
+	{
+		immediate: true,
+	},
+);
+</script>
+
+<style lang="scss" scoped>
+.variable-key-filter-value-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs);
+}
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+  <variable-filter-value-preview
+    :key="variableValue"
+    :value="variableValue"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import VariableFilterValuePreview from './variable-filter-value-preview.vue';
+import type { IVariableKeyFilterConfig } from './variableKeyFilterConfig';
+
+const props = defineProps<{
+	filterConfig: IVariableKeyFilterConfig;
+	value?: unknown;
+}>();
+
+const variableValue = computed(
+	() => `${props.filterConfig.variableKey}=${props.value ?? ''}`,
+);
+</script>
+
+<style scoped></style>

package/src/modules/filters/modules/filterConfig/components/variable/variableKeyFilterConfig.ts

@@ -0,0 +1,48 @@
+import { z } from 'zod/v4';
+
+import type { FilterName, FilterValue } from '../../../../classes/Filter';
+import { variableKeyFromFilterName } from '../../../../scripts/variableFilters';
+import type { BaseFilterConfig } from '../../classes/FilterConfig';
+import { FilterConfig } from '../../classes/FilterConfig';
+import VariableKeyFilterValueField from './variable-key-filter-value-field.vue';
+import VariableKeyFilterValuePreview from './variable-key-filter-value-preview.vue';
+
+export interface IVariableKeyFilterConfig extends BaseFilterConfig {
+	readonly variableKey: string;
+}
+
+const variableKeyValueSchema = z.object({
+	key: z.string(),
+	value: z.string(),
+});
+
+export type VariableKeyFilterValue = z.infer<typeof variableKeyValueSchema>;
+
+export const isVariableKeyFilterValue = (
+	value: FilterValue,
+): value is VariableKeyFilterValue =>
+	variableKeyValueSchema.safeParse(value).success;
+
+export class VariableKeyFilterConfig
+	extends FilterConfig
+	implements IVariableKeyFilterConfig
+{
+	readonly variableKey: string;
+
+	constructor({
+		name,
+		label,
+	}: {
+		name: FilterName;
+		label: string;
+	}) {
+		super({
+			name,
+			valueInputComponent: VariableKeyFilterValueField,
+			valuePreviewComponent: VariableKeyFilterValuePreview,
+		});
+
+		this.label = label;
+		this.variableKey = variableKeyFromFilterName(name);
+	}
+}

package/src/modules/table/__tests__/createTableStore.spec.ts

@@ -260,6 +260,65 @@ describe('tableStoreBody', () => {
 		});
 	});
 
+	/*
+	 An endpoint may answer with sibling data alongside `items` — e.g. per-page
+	 totals for a footer row — which has no home on the store otherwise;
+	 without this, a table needing it had to bolt a bespoke wrapper onto
+	 `createTableStore` just to surface one extra reactive field.
+	 */
+	describe('aggs', () => {
+		let useStore: ReturnType<typeof createTableStore>;
+
+		beforeEach(async () => {
+			getList.mockResolvedValue({
+				items: [],
+				next: false,
+				aggs: {
+					total: 3,
+				},
+			});
+
+			useStore = createTableStore('cases-aggs/datalist', {
+				apiModule: {
+					getList,
+				},
+				headers,
+				disablePersistence: true,
+			});
+
+			mountTab(useStore);
+			await flush();
+		});
+
+		it('picks up aggs from the getList response', () => {
+			const store = useStore();
+
+			expect(store.aggs).toEqual({
+				total: 3,
+			});
+		});
+
+		it('stays undefined when the response has none', async () => {
+			getList.mockResolvedValue({
+				items: [],
+				next: false,
+			});
+
+			const store = useStore();
+			await store.loadDataList();
+
+			expect(store.aggs).toBeUndefined();
+		});
+
+		it('drops on $reset', () => {
+			const store = useStore();
+
+			store.$reset();
+
+			expect(store.aggs).toBeUndefined();
+		});
+	});
+
 	describe('filters persistence of a nested list', () => {
 		it('keeps an added filter out of the route query, in sessionStorage instead', async () => {
 			const useStore = createTableStore('cases-nested-filters/datalist', {

package/src/modules/table/createTableStore.store.ts

@@ -126,6 +126,12 @@ export const tableStoreBody = <Entity extends Identifiable>(
 	const selected: Ref<Entity[]> = ref([]);
 	const error = ref<unknown>(null);
 	const isLoading = ref(false);
+	/**
+	 * Sibling data an endpoint answers alongside the paginated `items` — e.g.
+	 * per-page totals for a footer row. Not every `getList` response has one;
+	 * absent, it stays `undefined` and callers that do not need it can ignore it.
+	 */
+	const aggs = ref<unknown>(undefined);
 
 	const updateSelected = (value: Entity[]) => {
 		selected.value = value;
@@ -177,9 +183,14 @@ export const tableStoreBody = <Entity extends Identifiable>(
 		const params = getLoadDataParams();
 
 		try {
-			const { items, next } = await apiModule.getList(params);
+			const {
+				items,
+				next,
+				aggs: responseAggs,
+			} = await apiModule.getList(params);
 
 			dataList.value = items ?? [];
+			aggs.value = responseAggs;
 
 			/**
 			 * @author: @Oleksandr Palonnyi
@@ -221,9 +232,14 @@ export const tableStoreBody = <Entity extends Identifiable>(
 		const params = getLoadDataParams();
 
 		try {
-			const { items, next } = await apiModule.getList(params);
+			const {
+				items,
+				next,
+				aggs: responseAggs,
+			} = await apiModule.getList(params);
 
 			dataList.value.push(...(items ?? []));
+			aggs.value = responseAggs;
 			$patchPaginationStore({
 				next,
 			});
@@ -413,6 +429,7 @@ export const tableStoreBody = <Entity extends Identifiable>(
 		selected.value = [];
 		error.value = null;
 		isLoading.value = false;
+		aggs.value = undefined;
 		parentId.value = undefined;
 
 		paginationStore.$reset();
@@ -433,6 +450,7 @@ export const tableStoreBody = <Entity extends Identifiable>(
 		selected,
 		error,
 		isLoading,
+		aggs,
 
 		page,
 		size,

package/src/modules/types/tableStore.types.ts

@@ -68,12 +68,14 @@ export interface LoadDataListOptions {
 	withLoading?: boolean;
 }
 
-export interface TableStore<Entity> {
+export interface TableStore<Entity, Aggs = unknown> {
 	// tableStore
 	dataList: Ref<Entity[]>;
 	selected: Ref<Entity[]>;
 	error: Ref<Error | null>;
 	isLoading: Ref<boolean>;
+	/** Sibling data alongside `dataList` — e.g. per-page totals for a footer row. */
+	aggs: Ref<Aggs | undefined>;
 
 	// paginationStore
 	page: Ref<number>;