@webitel/ui-sdk 26.8.56 → 26.8.57

package/src/modules/UploadCsvPopup/composable/useUploadCsv.ts

@@ -1,6 +1,11 @@
 import { computed, type Ref, ref, watch } from 'vue';
 
-import { debounce, isEmpty } from '../../../scripts';
+import { useEventBus } from '../../../composables';
+import {
+	debounce,
+	eventBus as defaultEventBus,
+	isEmpty,
+} from '../../../scripts';
 import normalizeCSVData, {
 	type CsvDataRow,
 	type CsvMappingField,
@@ -17,12 +22,20 @@ import HandlingCSVMode from '../types/WtUploadCSVHandlingMode.enum';
  * @param {import('vue').Ref<boolean>} params.skipHeaders
  * @param {import('vue').Ref<string>} params.separator
  */
+
+export interface UploadCsvParseSettings {
+	separator: string;
+}
+
 export interface UseUploadCsvProps {
 	file?: File | null;
 	mappingFields?: CsvMappingField[];
 	addBulkItems?: (items: unknown[]) => unknown | Promise<unknown>;
-	handlingMode?: string;
-	fileUploadHandler?: () => unknown | Promise<unknown>;
+	handlingMode?: HandlingCSVMode;
+	fileUploadHandler?: (
+		settings: UploadCsvParseSettings,
+	) => unknown | Promise<unknown>;
+	charset?: string;
 }
 
 interface UseUploadCsvParams {
@@ -39,11 +52,12 @@ const useUploadCsv = ({
 	skipHeaders,
 	separator,
 }: UseUploadCsvParams) => {
+	const eventBus = useEventBus() ?? defaultEventBus;
+
 	const isReadingFile = ref(false);
 	const isParsingCSV = ref(false);
 	const parsedFile = ref<unknown>(null);
 	const isParsingPreview = ref(false);
-	const parseErrorStackTrace = ref<unknown>('');
 	const csvPreview = ref<unknown[]>([
 		[],
 	]);
@@ -101,15 +115,21 @@ const useUploadCsv = ({
 		),
 	);
 
+	function notifyError(err: unknown) {
+		eventBus.$emit('notification', {
+			type: 'error',
+			text: err instanceof Error ? err.message : String(err),
+		});
+	}
+
 	async function createCSVPreview(file = parsedFile.value) {
 		try {
-			parseErrorStackTrace.value = '';
 			csvPreview.value = await parseCSV(file as string, {
 				...parseCSVOptions.value,
 				toLine: 4,
 			});
 		} catch (err) {
-			parseErrorStackTrace.value = err;
+			notifyError(err);
 			csvPreview.value = [
 				[],
 			];
@@ -138,7 +158,9 @@ const useUploadCsv = ({
 
 		isReadingFile.value = true;
 
-		parsedFile.value = await processFile(props.file as File, {});
+		parsedFile.value = await processFile(props.file as File, {
+			charset: props.charset,
+		});
 		await createCSVPreview(parsedFile.value);
 
 		isReadingFile.value = false;
@@ -165,20 +187,17 @@ const useUploadCsv = ({
 		isParsingCSV.value = true;
 
 		try {
-			parseErrorStackTrace.value = '';
-
-			const handler =
-				props.handlingMode === HandlingCSVMode.PROCESS
-					? handleCSVProcessing
-					: props.fileUploadHandler;
-
-			if (handler) {
-				await handler();
+			if (props.handlingMode === HandlingCSVMode.PROCESS) {
+				await handleCSVProcessing();
+			} else {
+				await props.fileUploadHandler?.({
+					separator: separator.value,
+				});
 			}
 
 			close();
 		} catch (err) {
-			parseErrorStackTrace.value = err;
+			notifyError(err);
 			throw err;
 		} finally {
 			isParsingCSV.value = false;
@@ -194,7 +213,6 @@ const useUploadCsv = ({
 		emit('close');
 	}
 
-	// watchers (те, що були в mixin.watch)
 	watch(skipHeaders, async () => {
 		await handleParseOptionsChange();
 	});
@@ -214,7 +232,6 @@ const useUploadCsv = ({
 		isReadingFile,
 		isParsingCSV,
 		isParsingPreview,
-		parseErrorStackTrace,
 		csvPreviewTableData,
 		csvPreviewTableHeaders,
 		filteredCsvPreviewTableHeaders,

package/src/modules/UploadCsvPopup/index.ts

@@ -0,0 +1,11 @@
+export { default as WtUploadCsvPopup } from './components/wt-upload-csv-popup.vue';
+export type {
+	UploadCsvParseSettings,
+	UseUploadCsvProps,
+} from './composable/useUploadCsv';
+export { default as useUploadCsv } from './composable/useUploadCsv';
+export type {
+	CsvDataRow,
+	CsvMappingField,
+} from './scripts/normalizeCSVData';
+export { HandlingCSVMode } from './types/WtUploadCSVHandlingMode.enum';

package/src/modules/UploadCsvPopup/scripts/__tests__/normalizeCSVData.spec.js

@@ -0,0 +1,125 @@
+import normalizeCSVData from '../normalizeCSVData';
+
+describe('normalizeCSVData', () => {
+	const mappings = [
+		{
+			// webitel field name
+			name: 'name',
+			// csv column name
+			csv: 'col1',
+			// is this webitel field required?
+			required: true,
+			// ui
+			locale: '',
+		},
+		{
+			name: 'phone',
+			csv: [
+				'col2',
+				'col3',
+			],
+			required: true,
+		},
+	];
+
+	it('normalizes simple data', () => {
+		const input = [
+			{
+				col1: 'John',
+				col2: '123',
+				col3: '456',
+			},
+			{
+				col1: 'Jane',
+				col2: '789',
+				col3: '012',
+			},
+		];
+		const result = normalizeCSVData({
+			data: input,
+			mappings,
+		});
+		const output = [
+			{
+				name: 'John',
+				phone: [
+					'123',
+					'456',
+				],
+			},
+			{
+				name: 'Jane',
+				phone: [
+					'789',
+					'012',
+				],
+			},
+		];
+		expect(result).toEqual(output);
+	});
+
+	it('throws an error at normalizing data with required (!) empty value', () => {
+		const input = [
+			{
+				col1: '',
+				col2: '123',
+				col3: '3424',
+			},
+			{
+				col1: 'name',
+				col2: '131312',
+				col3: '012',
+			},
+		];
+		try {
+			normalizeCSVData({
+				data: input,
+				mappings,
+			});
+		} catch (err) {
+			expect(err).toBeTruthy();
+			return;
+		}
+		expect(false).toBe(true); // reject test if no error
+	});
+
+	it(`returns correct fields for mapping, including empty fields,
+   if one of them is empty`, () => {
+		const input = [
+			{
+				col1: 'name',
+				col2: '123',
+				col3: '',
+			},
+			{
+				col1: 'name',
+				col2: '123',
+				col3: '012',
+			},
+		];
+
+		const result = normalizeCSVData({
+			data: input,
+			mappings,
+		});
+
+		const output = [
+			{
+				name: 'name',
+				phone: [
+					'123',
+					'',
+				],
+			},
+			{
+				name: 'name',
+				phone: [
+					'123',
+					'012',
+				],
+			},
+		];
+
+		expect(result).toEqual(output);
+	});
+});

package/src/modules/UploadCsvPopup/scripts/__tests__/parseCSV.spec.js

@@ -0,0 +1,63 @@
+import parseCSV from '../parseCSV';
+
+describe('parseCSV', () => {
+	it('parses a csv into rows keyed by the header', async () => {
+		const csv = 'col1,col2\nJohn,30';
+
+		const result = await parseCSV(csv, {
+			columns: true,
+		});
+
+		expect(result).toEqual([
+			{
+				col1: 'John',
+				col2: '30',
+			},
+		]);
+	});
+
+	/*
+	WTEL-10058: the parser used to coerce 'true'/'false' and JSON-looking cells
+	for every consumer. Type casting belongs to whoever knows the field types —
+	CRM does it in prepareCsvLookupRows. Everything here stays a string.
+	 */
+	it.each([
+		'true',
+		'false',
+		'[1,2]',
+		'{"a":1}',
+		'42',
+	])('keeps %s as a string', async (value) => {
+		const csv = `col1\n"${value.replaceAll('"', '""')}"`;
+
+		const result = await parseCSV(csv, {
+			columns: true,
+		});
+
+		expect(result[0].col1).toBe(value);
+	});
+
+	it('respects a custom delimiter', async () => {
+		const csv = 'col1;col2\nJohn;30';
+
+		const result = await parseCSV(csv, {
+			columns: true,
+			delimiter: ';',
+		});
+
+		expect(result[0]).toEqual({
+			col1: 'John',
+			col2: '30',
+		});
+	});
+
+	it('rejects on a malformed csv', async () => {
+		const csv = 'col1,col2\n"unterminated,30\nJane,25';
+
+		await expect(
+			parseCSV(csv, {
+				columns: true,
+			}),
+		).rejects.toBeTruthy();
+	});
+});

package/src/modules/UploadCsvPopup/scripts/normalizeCSVData.ts

@@ -9,6 +9,8 @@ export interface CsvMappingField {
 	locale?: string;
 	/** the field maps to several csv columns */
 	multiple?: boolean;
+	/** hint rendered under the mapping row */
+	tooltip?: string;
 }
 
 export type CsvDataRow = Record<string, unknown>;

package/src/modules/UploadCsvPopup/scripts/parseCSV.ts

@@ -6,29 +6,6 @@ const parseCSV = (csvStr: string, options: Options = {}): Promise<unknown[]> =>
 			csvStr,
 			{
 				columns: true,
-				cast: (value /* context */) => {
-					if (typeof value !== 'string') return value;
-
-					const trimmed = value.trim();
-
-					// boolean
-					if (trimmed === 'true') return true;
-					if (trimmed === 'false') return false;
-
-					// array / object (JSON)
-					if (
-						(trimmed.startsWith('[') && trimmed.endsWith(']')) ||
-						(trimmed.startsWith('{') && trimmed.endsWith('}'))
-					) {
-						try {
-							return JSON.parse(trimmed);
-						} catch {
-							return value;
-						}
-					}
-
-					return value;
-				},
 				...options,
 			},
 			(err, output) => {