@webitel/ui-sdk 26.2.101 → 26.2.102

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

@@ -0,0 +1,203 @@
+import { computed, ref, watch } from 'vue';
+
+import { debounce, isEmpty } from '../../../scripts';
+import normalizeCSVData from '../scripts/normalizeCSVData';
+import parseCSV from '../scripts/parseCSV';
+import processFile from '../scripts/processFile';
+import splitAndSaveData from '../scripts/splitAndSaveData';
+import HandlingCSVMode from '../types/WtUploadCSVHandlingMode.enum';
+
+/**
+ * @param {Object} params
+ * @param {Object} params.props - component props (file, mappingFields, handlingMode, addBulkItems, fileUploadHandler)
+ * @param {Function} params.emit - emit from setup
+ * @param {import('vue').Ref<boolean>} params.skipHeaders
+ * @param {import('vue').Ref<string>} params.separator
+ */
+const useUploadCsv = ({ props, emit, skipHeaders, separator }) => {
+	const isReadingFile = ref(false);
+	const isParsingCSV = ref(false);
+	const parsedFile = ref(null);
+	const isParsingPreview = ref(false);
+	const parseErrorStackTrace = ref('');
+	const csvPreview = ref([
+		[],
+	]);
+
+	const csvValues = computed(() =>
+		(props.mappingFields || [])
+			.filter((field) => field.csv)
+			.flatMap((field) => field.csv),
+	);
+
+	const csvColumns = computed(() => {
+		const firstRow = csvPreview.value[0] || {};
+		const columns = Object.keys(firstRow);
+
+		if (skipHeaders.value) {
+			return columns;
+		}
+
+		return columns.map((_, index) => `${index + 1} column`);
+	});
+
+	const filteredCsvColumns = computed(() =>
+		csvColumns.value.filter((item) => csvValues.value.indexOf(item) !== -1),
+	);
+
+	const parseCSVOptions = computed(() => ({
+		/* docs: https://csv.js.org/parse/options/ */
+		delimiter: separator.value,
+		columns: (firstLine) => {
+			if (skipHeaders.value) return firstLine;
+			return firstLine.map((_, index) => `${index}`);
+		},
+		skipEmptyLines: true,
+	}));
+
+	const csvPreviewTableHeaders = computed(() =>
+		csvColumns.value.map((col, index) => ({
+			text: col,
+			value: skipHeaders.value ? col : `${index}`,
+		})),
+	);
+
+	const filteredCsvPreviewTableHeaders = computed(() =>
+		filteredCsvColumns.value.map((col, index) => ({
+			text: col,
+			value: skipHeaders.value ? col : `${index}`,
+		})),
+	);
+
+	const csvPreviewTableData = computed(() => csvPreview.value);
+
+	const allowSaveAction = computed(() =>
+		(props.mappingFields || []).every(
+			(field) => !field.required || !isEmpty(field.csv),
+		),
+	);
+
+	async function createCSVPreview(file = parsedFile.value) {
+		try {
+			parseErrorStackTrace.value = '';
+			csvPreview.value = await parseCSV(file, {
+				...parseCSVOptions.value,
+				toLine: 4,
+			});
+		} catch (err) {
+			parseErrorStackTrace.value = err;
+			csvPreview.value = [
+				[],
+			];
+		}
+	}
+
+	function resetMappings() {
+		const mappingFields = (props.mappingFields || []).map((field) => ({
+			...field,
+			csv: field.multiple ? [] : '',
+		}));
+		emit('changeMappingFields', mappingFields);
+	}
+
+	async function handleParseOptionsChangeImpl() {
+		isParsingPreview.value = true;
+		await createCSVPreview();
+		resetMappings();
+		isParsingPreview.value = false;
+	}
+
+	const handleParseOptionsChange = debounce(handleParseOptionsChangeImpl);
+
+	async function initUploadPopup() {
+		if (!props.file) return;
+
+		isReadingFile.value = true;
+
+		parsedFile.value = await processFile(props.file, {});
+		await createCSVPreview(parsedFile.value);
+
+		isReadingFile.value = false;
+	}
+
+	async function handleCSVProcessing() {
+		const sourceData = await parseCSV(parsedFile.value, parseCSVOptions.value);
+
+		const normalizedData = normalizeCSVData({
+			data: sourceData,
+			mappings: props.mappingFields,
+		});
+
+		await splitAndSaveData({
+			data: normalizedData,
+			saveCallback: props.addBulkItems,
+		});
+	}
+
+	async function processCSV() {
+		isParsingCSV.value = true;
+
+		try {
+			parseErrorStackTrace.value = '';
+
+			const handler =
+				props.handlingMode === HandlingCSVMode.PROCESS
+					? handleCSVProcessing
+					: props.fileUploadHandler;
+
+			if (handler) {
+				await handler();
+			}
+
+			close();
+		} catch (err) {
+			parseErrorStackTrace.value = err;
+			throw err;
+		} finally {
+			isParsingCSV.value = false;
+		}
+	}
+
+	function handleSave() {
+		emit('save');
+		return processCSV();
+	}
+
+	function close() {
+		emit('close');
+	}
+
+	// watchers (те, що були в mixin.watch)
+	watch(skipHeaders, async () => {
+		await handleParseOptionsChange();
+	});
+
+	watch(separator, async () => {
+		await handleParseOptionsChange();
+	});
+
+	watch(
+		() => props.file,
+		(file) => {
+			if (file) initUploadPopup();
+		},
+	);
+
+	return {
+		isReadingFile,
+		isParsingCSV,
+		isParsingPreview,
+		parseErrorStackTrace,
+		csvPreviewTableData,
+		csvPreviewTableHeaders,
+		filteredCsvPreviewTableHeaders,
+		csvColumns,
+		allowSaveAction,
+
+		processCSV,
+		handleSave,
+		close,
+	};
+};
+
+export default useUploadCsv;

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

@@ -0,0 +1,60 @@
+import isEmpty from '../../../scripts/isEmpty';
+
+/**
+ *
+ * @param data
+ * @param mappings
+ *
+ * Data format: {
+ * [colName]: [value]
+ * }
+ *
+ * Mappings format: {
+ * name: string, // webitel field name
+ * csv: string | string[], // csv column name
+ * required: boolean, // is this webitel field required?
+ * locale: string, // ui
+ * }
+ */
+const normalizeCSVData = ({ data, mappings }) => {
+	const nonEmptyMappingFields = mappings.filter((field) => !isEmpty(field.csv));
+
+	return data.map((dataItem, index) => {
+		const normalized = nonEmptyMappingFields.reduce(
+			(normalizedItem, { name, csv, required }) => {
+				const value = Array.isArray(csv)
+					? csv.map((csv) => dataItem[csv])
+					: dataItem[csv];
+
+				let filteredValue; // Filter empty values in validation purposes
+				if (Array.isArray(value)) {
+					// Because required field can be combined from many fields in multiple select, so we need to check all values.
+					// For example, if we have 3 fields and they are empty, we will get empty array.
+					filteredValue = value.filter((item) => !isEmpty(item));
+				} else {
+					filteredValue = value;
+				}
+
+				const isValueEmpty = isEmpty(filteredValue);
+				// This check is only for required fields
+				if (required && isValueEmpty) {
+					throw new Error(
+						`Required field is empty: ${name} on row ${index + 1}`,
+					);
+				}
+
+				return isValueEmpty
+					? normalizedItem
+					: {
+							...normalizedItem,
+							[name]: value, // Return the original value for proper mapping (e.g., variables in members)
+						};
+			},
+			{},
+		);
+
+		return normalized;
+	});
+};
+
+export default normalizeCSVData;

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

@@ -0,0 +1,13 @@
+import { parse } from 'csv-parse/browser/esm';
+
+const parseCSV = (csvStr, options = {}) =>
+	new Promise((resolve, reject) => {
+		const callback = (err, output) => {
+			if (output) resolve(output, err);
+			reject(err);
+		};
+
+		parse(csvStr, options, callback);
+	});
+
+export default parseCSV;

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

@@ -0,0 +1,12 @@
+const processFile = (file, { charset = 'utf-8' } = {}) =>
+	new Promise((resolve, reject) => {
+		const reader = new FileReader();
+		reader.addEventListener('load', (e) => {
+			const loadedFile = e.target.result;
+			resolve(loadedFile);
+		});
+		reader.addEventListener('error', (e) => reject(e));
+		reader.readAsText(file, charset);
+	});
+
+export default processFile;

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

@@ -0,0 +1,25 @@
+const splitAndSaveData = async ({ data, saveCallback }) => {
+	const chunkSize = 100;
+	const chunksCount = Math.ceil(data.length / chunkSize);
+	let processedChunkIndex = 1;
+	try {
+		for (; processedChunkIndex <= chunksCount; processedChunkIndex += 1) {
+			await saveCallback(
+				data.slice(
+					(processedChunkIndex - 1) * chunkSize,
+					processedChunkIndex * chunkSize,
+				),
+			);
+		}
+	} catch (err) {
+		const errMessage = JSON.stringify(err instanceof Error ? err.message : err);
+
+		throw new Error(
+			`An error occurred during saving ${
+				(processedChunkIndex - 1) * chunkSize
+			}-${processedChunkIndex * chunkSize} data chunk: ${errMessage}`,
+		);
+	}
+};
+
+export default splitAndSaveData;

package/src/modules/UploadCsvPopup/types/WtUploadCSVHandlingMode.enum.ts

@@ -0,0 +1,9 @@
+export const HandlingCSVMode = {
+	UPLOAD: 'upload',
+	PROCESS: 'process',
+} as const;
+
+export type HandlingCSVMode =
+	(typeof HandlingCSVMode)[keyof typeof HandlingCSVMode];
+
+export default HandlingCSVMode;

package/types/components/on-demand/wt-upload-file-icon-btn/wt-upload-file-icon-btn.vue.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    accept?: string;
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    change: (files: FileList, event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onChange?: (files: FileList, event: Event) => any;
+}>, {
+    accept: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/types/locale/en/en.d.ts

@@ -220,6 +220,15 @@ declare const _default: {
                 FAILED: string;
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
     };
     channel: {
         state: {

package/types/locale/es/es.d.ts

@@ -241,6 +241,15 @@ declare namespace _default {
             export { status_2 as status };
         }
     }
+    export let importCSV: string;
+    export namespace CSV {
+        let skipHeaders: string;
+        let charSet: string;
+        let separator: string;
+        let CSVColumn: string;
+        let fieldName: string;
+        let clearMember: string;
+    }
     export namespace channel_1 {
         let state_1: {
             [x: number]: string;

package/types/locale/i18n.d.ts

@@ -221,6 +221,15 @@ declare const _default: import("vue-i18n").I18n<{
                     FAILED: string;
                 };
             };
+            importCSV: string;
+            CSV: {
+                skipHeaders: string;
+                charSet: string;
+                separator: string;
+                CSVColumn: string;
+                fieldName: string;
+                clearMember: string;
+            };
         };
         channel: {
             state: {
@@ -1032,6 +1041,15 @@ declare const _default: import("vue-i18n").I18n<{
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -1826,6 +1844,15 @@ declare const _default: import("vue-i18n").I18n<{
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -2622,6 +2649,15 @@ declare const _default: import("vue-i18n").I18n<{
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -3416,6 +3452,15 @@ declare const _default: import("vue-i18n").I18n<{
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -4212,6 +4257,15 @@ declare const _default: import("vue-i18n").I18n<{
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -5008,6 +5062,15 @@ declare const _default: import("vue-i18n").I18n<{
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -5805,6 +5868,15 @@ declare const _default: import("vue-i18n").I18n<{
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -6601,6 +6673,15 @@ declare const _default: import("vue-i18n").I18n<{
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;

package/types/locale/index.d.ts

@@ -231,6 +231,15 @@ export declare const messages: {
                     FAILED: string;
                 };
             };
+            importCSV: string;
+            CSV: {
+                skipHeaders: string;
+                charSet: string;
+                separator: string;
+                CSVColumn: string;
+                fieldName: string;
+                clearMember: string;
+            };
         };
         channel: {
             state: {
@@ -1042,6 +1051,15 @@ export declare const messages: {
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -1836,6 +1854,15 @@ export declare const messages: {
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -2632,6 +2659,15 @@ export declare const messages: {
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -3426,6 +3462,15 @@ export declare const messages: {
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -4222,6 +4267,15 @@ export declare const messages: {
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -5018,6 +5072,15 @@ export declare const messages: {
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -5815,6 +5878,15 @@ export declare const messages: {
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;
@@ -6611,6 +6683,15 @@ export declare const messages: {
                 };
             };
         };
+        importCSV: string;
+        CSV: {
+            skipHeaders: string;
+            charSet: string;
+            separator: string;
+            CSVColumn: string;
+            fieldName: string;
+            clearMember: string;
+        };
         channel: {
             state: {
                 [x: number]: string;

package/types/locale/kz/kz.d.ts

@@ -241,6 +241,15 @@ declare namespace _default {
             export { status_2 as status };
         }
     }
+    export let importCSV: string;
+    export namespace CSV {
+        let skipHeaders: string;
+        let charSet: string;
+        let separator: string;
+        let CSVColumn: string;
+        let fieldName: string;
+        let clearMember: string;
+    }
     export namespace channel_1 {
         let state_1: {
             [x: number]: string;

package/types/locale/pl/pl.d.ts

@@ -241,6 +241,15 @@ declare namespace _default {
             export { status_2 as status };
         }
     }
+    export let importCSV: string;
+    export namespace CSV {
+        let skipHeaders: string;
+        let charSet: string;
+        let separator: string;
+        let CSVColumn: string;
+        let fieldName: string;
+        let clearMember: string;
+    }
     export namespace channel_1 {
         let state_1: {
             [x: number]: string;

package/types/locale/ro/ro.d.ts

@@ -241,6 +241,15 @@ declare namespace _default {
             export { status_2 as status };
         }
     }
+    export let importCSV: string;
+    export namespace CSV {
+        let skipHeaders: string;
+        let charSet: string;
+        let separator: string;
+        let CSVColumn: string;
+        let fieldName: string;
+        let clearMember: string;
+    }
     export namespace channel_1 {
         let state_1: {
             [x: number]: string;