@webitel/ui-sdk 26.8.21 → 26.8.22

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

@@ -1,7 +1,10 @@
-import { computed, ref, watch } from 'vue';
+import { computed, type Ref, ref, watch } from 'vue';
 
 import { debounce, isEmpty } from '../../../scripts';
-import normalizeCSVData from '../scripts/normalizeCSVData';
+import normalizeCSVData, {
+	type CsvDataRow,
+	type CsvMappingField,
+} from '../scripts/normalizeCSVData';
 import parseCSV from '../scripts/parseCSV';
 import processFile from '../scripts/processFile';
 import splitAndSaveData from '../scripts/splitAndSaveData';
@@ -14,12 +17,33 @@ import HandlingCSVMode from '../types/WtUploadCSVHandlingMode.enum';
  * @param {import('vue').Ref<boolean>} params.skipHeaders
  * @param {import('vue').Ref<string>} params.separator
  */
-const useUploadCsv = ({ props, emit, skipHeaders, separator }) => {
+export interface UseUploadCsvProps {
+	file?: File | null;
+	mappingFields?: CsvMappingField[];
+	addBulkItems?: (items: unknown[]) => unknown | Promise<unknown>;
+	handlingMode?: string;
+	fileUploadHandler?: () => unknown | Promise<unknown>;
+}
+
+interface UseUploadCsvParams {
+	props: UseUploadCsvProps;
+	// biome-ignore lint/suspicious/noExplicitAny: receives the component's typed emit
+	emit: (event: any, ...args: any[]) => void;
+	skipHeaders: Ref<boolean>;
+	separator: Ref<string>;
+}
+
+const useUploadCsv = ({
+	props,
+	emit,
+	skipHeaders,
+	separator,
+}: UseUploadCsvParams) => {
 	const isReadingFile = ref(false);
 	const isParsingCSV = ref(false);
-	const parsedFile = ref(null);
+	const parsedFile = ref<unknown>(null);
 	const isParsingPreview = ref(false);
-	const parseErrorStackTrace = ref('');
+	const parseErrorStackTrace = ref<unknown>('');
 	const csvPreview = ref<unknown[]>([
 		[],
 	]);
@@ -31,7 +55,7 @@ const useUploadCsv = ({ props, emit, skipHeaders, separator }) => {
 	);
 
 	const csvColumns = computed(() => {
-		const firstRow = csvPreview.value[0] || {};
+		const firstRow = (csvPreview.value[0] || {}) as object;
 		const columns = Object.keys(firstRow);
 
 		if (skipHeaders.value) {
@@ -48,7 +72,7 @@ const useUploadCsv = ({ props, emit, skipHeaders, separator }) => {
 	const parseCSVOptions = computed(() => ({
 		/* docs: https://csv.js.org/parse/options/ */
 		delimiter: separator.value,
-		columns: (firstLine) => {
+		columns: (firstLine: string[]) => {
 			if (skipHeaders.value) return firstLine;
 			return firstLine.map((_, index) => `${index}`);
 		},
@@ -80,7 +104,7 @@ const useUploadCsv = ({ props, emit, skipHeaders, separator }) => {
 	async function createCSVPreview(file = parsedFile.value) {
 		try {
 			parseErrorStackTrace.value = '';
-			csvPreview.value = await parseCSV(file, {
+			csvPreview.value = await parseCSV(file as string, {
 				...parseCSVOptions.value,
 				toLine: 4,
 			});
@@ -114,18 +138,21 @@ const useUploadCsv = ({ props, emit, skipHeaders, separator }) => {
 
 		isReadingFile.value = true;
 
-		parsedFile.value = await processFile(props.file, {});
+		parsedFile.value = await processFile(props.file as File, {});
 		await createCSVPreview(parsedFile.value);
 
 		isReadingFile.value = false;
 	}
 
 	async function handleCSVProcessing() {
-		const sourceData = await parseCSV(parsedFile.value, parseCSVOptions.value);
+		const sourceData = await parseCSV(
+			parsedFile.value as string,
+			parseCSVOptions.value,
+		);
 
 		const normalizedData = normalizeCSVData({
-			data: sourceData,
-			mappings: props.mappingFields,
+			data: sourceData as CsvDataRow[],
+			mappings: props.mappingFields ?? [],
 		});
 
 		await splitAndSaveData({

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

@@ -1,22 +1,25 @@
 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 }) => {
+/** maps a webitel field to the csv column(s) it is built from */
+export interface CsvMappingField {
+	name: string;
+	csv: string | string[];
+	required?: boolean;
+	/** ui locale key */
+	locale?: string;
+	/** the field maps to several csv columns */
+	multiple?: boolean;
+}
+
+export type CsvDataRow = Record<string, unknown>;
+
+const normalizeCSVData = ({
+	data,
+	mappings,
+}: {
+	data: CsvDataRow[];
+	mappings: CsvMappingField[];
+}) => {
 	const nonEmptyMappingFields = mappings.filter((field) => !isEmpty(field.csv));
 
 	return data.map((dataItem, index) => {

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

@@ -1,6 +1,6 @@
-import { parse } from 'csv-parse/browser/esm';
+import { type Options, parse } from 'csv-parse/browser/esm';
 
-const parseCSV = (csvStr, options = {}): Promise<unknown[]> =>
+const parseCSV = (csvStr: string, options: Options = {}): Promise<unknown[]> =>
 	new Promise((resolve, reject) => {
 		parse(
 			csvStr,

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

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

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

@@ -1,10 +1,16 @@
-const splitAndSaveData = async ({ data, saveCallback }) => {
+const splitAndSaveData = async ({
+	data,
+	saveCallback,
+}: {
+	data: unknown[];
+	saveCallback?: (chunk: unknown[]) => unknown | Promise<unknown>;
+}) => {
 	const chunkSize = 100;
 	const chunksCount = Math.ceil(data.length / chunkSize);
 	let processedChunkIndex = 1;
 	try {
 		for (; processedChunkIndex <= chunksCount; processedChunkIndex += 1) {
-			await saveCallback(
+			await saveCallback?.(
 				data.slice(
 					(processedChunkIndex - 1) * chunkSize,
 					processedChunkIndex * chunkSize,

package/src/modules/UserNotifications/stores/userNotificationsStore.ts

@@ -77,7 +77,15 @@ export const createUserNotificationsStore = () => {
 				() =>
 					eventBus.$emit('notification', {
 						type,
-						text: i18n.global.t(
+						text: (
+							i18n.global.t as (
+								key: string,
+								named: Record<string, unknown>,
+								options: {
+									locale: string;
+								},
+							) => string
+						)(
 							`systemNotifications.warnings.${localeKey}`,
 							{
 								...params,

package/src/modules/Userinfo/classes/ApplicationsAccess.ts

@@ -303,14 +303,15 @@ export default class ApplicationsAccess {
 	}
 
 	// minify schema for API sending
-	static minify(access) {
-		const rmEmptyKeys = (obj) => {
+	static minify(access: Record<string, unknown>) {
+		const rmEmptyKeys = (obj: Record<string, unknown>) => {
 			Object.keys(obj).forEach((key) => {
 				if (!obj[key] || key === '_locale') delete obj[key];
 				if (typeof obj[key] === 'object') {
-					rmEmptyKeys(obj[key]);
+					const nested = obj[key] as Record<string, unknown>;
+					rmEmptyKeys(nested);
 
-					if (!Object.keys(obj[key]).length) delete obj[key];
+					if (!Object.keys(nested).length) delete obj[key];
 				}
 			});
 			return obj;
@@ -319,8 +320,13 @@ export default class ApplicationsAccess {
 	}
 
 	// restore minified schema from API response
-	static restore(access) {
-		return deepmerge(applicationsAccess(false), access);
+	static restore(
+		access: PartialDeep<ApplicationsAccessSchema>,
+	): ApplicationsAccessSchema {
+		return deepmerge(
+			applicationsAccess(false),
+			access,
+		) as ApplicationsAccessSchema;
 		// return deepmerge(access, applicationsAccess(false));
 	}
 

package/src/modules/Userinfo/mappings/mappings.ts

@@ -10,8 +10,11 @@ import {
 	WtObject,
 } from '../../../enums';
 import { CrudGlobalAction, ScopeClass, SpecialGlobalAction } from '../enums';
+import type { GlobalAction } from '../types/UserAccess';
 
-export const mapGlobalActionToCrudAction = {
+export const mapGlobalActionToCrudAction: Partial<
+	Record<GlobalAction, CrudAction>
+> = {
 	[CrudGlobalAction.Add]: CrudAction.Create,
 	[CrudGlobalAction.Read]: CrudAction.Read,
 	[CrudGlobalAction.Write]: CrudAction.Update,
@@ -161,7 +164,9 @@ export const mapScopeClassToWtObjects: Partial<Record<ScopeClass, WtObject[]>> =
 		],
 	};
 
-export const wtObjectsWithGlobalCrudActionAccessAsChecksSource = {
+export const wtObjectsWithGlobalCrudActionAccessAsChecksSource: Partial<
+	Record<WtObject, boolean>
+> = {
 	[WtObject.License]: true,
 	[WtObject.Object]: true,
 };
@@ -173,7 +178,9 @@ export const wtObjectsWithGlobalSpecialActionAccessAsChecksSource: Partial<
 	[WtObject.GlobalVariable]: SpecialGlobalAction.SchemeVariables,
 };
 
-export const mapScopeClassAccessTokenToCrudAction = {
+export const mapScopeClassAccessTokenToCrudAction: Partial<
+	Record<string, CrudAction>
+> = {
 	r: CrudAction.Read,
 	w: CrudAction.Update,
 	d: CrudAction.Delete,

package/src/modules/Userinfo/scripts/utils.ts

@@ -1,4 +1,4 @@
-import type { CrudAction, WtObject } from '../../../enums';
+import type { CrudAction, WtApplication, WtObject } from '../../../enums';
 import { _wtUiLog as wtlog } from '../../../scripts/logger';
 import {
 	mapGlobalActionToCrudAction,
@@ -128,11 +128,15 @@ export const makeLicenseAccessMap = (
 };
 
 export const castUiSectionToWtObject = (section: UiSection): WtObject => {
-	return mapUiSectionToWtObject[section];
+	// `mapUiSectionToWtObject` is a lodash `invert()` result, so it is untyped
+	return mapUiSectionToWtObject[section] as unknown as WtObject;
 };
 
-export const castWtObjectToUiSection = (object: WtObject): UiSection => {
-	return mapWtObjectToUiSection[object];
+export const castWtObjectToUiSection = (
+	app: WtApplication,
+	object: WtObject,
+): UiSection | undefined => {
+	return mapWtObjectToUiSection[app]?.[object];
 };
 
 export const shouldUseGlobalSpecialActionAccessAsChecksSource = (

package/src/modules/Userinfo/stores/accessStore.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { ref } from 'vue';
-import type { NavigationGuard } from 'vue-router';
+import type { NavigationGuard, RouteLocationNormalized } from 'vue-router';
 
 import { CrudAction, type WtApplication, type WtObject } from '../../../enums';
 import type { SpecialGlobalAction, WebitelLicense } from '../enums';
@@ -12,7 +12,6 @@ import {
 	makeScopeAccessMap,
 	makeSectionVisibilityMap,
 	shouldUseGlobalCrudActionAccessAsChecksSource,
-	shouldUseGlobalSpecialActionAccessAsChecksSource,
 } from '../scripts/utils';
 import type {
 	AppVisibilityMap,
@@ -48,23 +47,22 @@ export const createUserAccessStore = ({
 
 		const hasAccess = (
 			action: CrudAction | SpecialGlobalAction,
-			object: WtObject,
+			object?: WtObject,
 		) => {
 			/* scope exceptions handling */
 
-			if (shouldUseGlobalSpecialActionAccessAsChecksSource(object)) {
-				return hasSpecialGlobalActionAccess(
-					wtObjectsWithGlobalSpecialActionAccessAsChecksSource[object],
-				);
+			const specialAction =
+				object && wtObjectsWithGlobalSpecialActionAccessAsChecksSource[object];
+			if (specialAction) {
+				return hasSpecialGlobalActionAccess(specialAction);
 			}
 
-			if (shouldUseGlobalCrudActionAccessAsChecksSource(object)) {
+			if (object && shouldUseGlobalCrudActionAccessAsChecksSource(object)) {
 				return hasGlobalCrudActionAccess(action as CrudAction);
 			}
 
-			const allowScopeAccess = scopeAccess.value
-				.get(object)
-				?.get(action as CrudAction);
+			const allowScopeAccess =
+				object && scopeAccess.value.get(object)?.get(action as CrudAction);
 			return !!allowScopeAccess;
 		};
 
@@ -85,7 +83,7 @@ export const createUserAccessStore = ({
 		};
 
 		const hasApplicationVisibility = (app: WtApplication) => {
-			return appVisibilityAccess.value.get(app);
+			return !!appVisibilityAccess.value.get(app);
 		};
 
 		const hasSectionVisibility = ({
@@ -102,7 +100,7 @@ export const createUserAccessStore = ({
 			const objectOfSection = object; /*castUiSectionToWtObject(section)*/
 			const hasSectionVisibilityAccess = (section: UiSection) => {
 				const fullSectionName: FullUiSectionName = `${appOfSection}/${section}`;
-				return sectionVisibilityAccess.value.get(fullSectionName);
+				return !!sectionVisibilityAccess.value.get(fullSectionName);
 			};
 
 			const allowAppVisibility = hasApplicationVisibility(appOfSection);
@@ -117,16 +115,18 @@ export const createUserAccessStore = ({
 				.toReversed()
 				.find(({ meta }) => meta.WtApplication)?.meta?.WtApplication as
 				| WtApplication
-				| ((RouteLocationNormalized) => WtApplication);
+				| ((route: RouteLocationNormalized) => WtApplication);
 
 			/* find last because "matched" has top=>bottom routes order */
 			let uiSection = to.matched.toReversed().find(({ meta }) => meta.UiSection)
 				?.meta?.UiSection as
 				| UiSection
-				| ((RouteLocationNormalized) => UiSection);
+				| ((route: RouteLocationNormalized) => UiSection);
 			/* find last because "matched" has top=>bottom routes order */
 			let wtObject = to.matched.toReversed().find(({ meta }) => meta.UiSection)
-				?.meta?.WtObject as WtObject | ((RouteLocationNormalized) => WtObject);
+				?.meta?.WtObject as
+				| WtObject
+				| ((route: RouteLocationNormalized) => WtObject);
 
 			// if, then compute fn
 			if (typeof wtApplication === 'function') {

package/src/modules/Userinfo/types/UserAccess.ts

@@ -109,7 +109,7 @@ export type AppVisibilityMap = Map<WtApplication, boolean>;
 export type SectionVisibilityMap = Map<FullUiSectionName, boolean>;
 
 export interface UserAccessStore {
-	initialize: (CreateUserAccessStoreRawAccess) => void;
+	initialize: (rawAccess: CreateUserAccessStoreRawAccess) => void;
 
 	hasReadAccess: (object?: WtObject) => boolean;
 	hasCreateAccess: (object?: WtObject) => boolean;

package/src/plugins/breakpoint/breakpoint.plugin.ts

@@ -149,7 +149,7 @@ const onResize = () => {
 		xl: 4,
 	};
 
-	const current = breakpoints[breakpoint.name];
+	const current = breakpoints[breakpoint.name as keyof typeof breakpoints];
 	const max = breakpoints[mobileBreakpoint];
 
 	breakpoint.mobile = current <= max;

package/src/scripts/compareSize.ts

@@ -19,7 +19,7 @@ const numerics = Object.values(ComponentSize).reduce(
  * compareSize(ComponentSize.XS, ComponentSize.MD); // true
  * compareSize(ComponentSize.LG, ComponentSize.SM); // false
  */
-export const compareSize = (s1, s2) => {
+export const compareSize = (s1: ComponentSize, s2: ComponentSize) => {
 	return numerics[s1] - numerics[s2];
 };
 
@@ -30,7 +30,7 @@ export const compareSize = (s1, s2) => {
  * @returns {boolean}
  */
 
-export const smallerThen = (s1, s2) => {
+export const smallerThen = (s1: ComponentSize, s2: ComponentSize) => {
 	return compareSize(s1, s2) < 0;
 };
 
@@ -40,7 +40,7 @@ export const smallerThen = (s1, s2) => {
  * @param s2
  * @returns {boolean}
  */
-export const smallerOrEqual = (s1, s2) => {
+export const smallerOrEqual = (s1: ComponentSize, s2: ComponentSize) => {
 	return compareSize(s1, s2) <= 0;
 };
 
@@ -50,7 +50,7 @@ export const smallerOrEqual = (s1, s2) => {
  * @param s2
  * @returns {boolean}
  */
-export const greaterThen = (s1, s2) => {
+export const greaterThen = (s1: ComponentSize, s2: ComponentSize) => {
 	return compareSize(s1, s2) > 0;
 };
 

package/src/scripts/downloadFile/downloadFile.ts

@@ -4,7 +4,7 @@ const downloadFile = ({
 	response,
 	fileFormat,
 	filename,
-	mimetype = null,
+	mimetype = undefined,
 }: DownloadFileOptions) => {
 	const blob = new Blob(
 		[

package/src/scripts/normalizeDatetime.ts

@@ -82,7 +82,7 @@ export const normalizeToTimestamp = (
 		if (+value) {
 			return +value;
 		}
-	} else {
-		return Date.now();
+		return 0;
 	}
+	return Date.now();
 };

package/src/utils/displayText.ts

@@ -1,3 +1,3 @@
 export const EMPTY_SYMBOL = '-';
 
-export const displayText = (text: string) => text || EMPTY_SYMBOL;
+export const displayText = (text?: string | null) => text || EMPTY_SYMBOL;