@webitel/ui-sdk 26.2.100 → 26.2.102

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-sdk",
-	"version": "26.2.100",
+	"version": "26.2.102",
 	"private": false,
 	"scripts": {
 		"make-all": "npm version patch --git-tag-version false && npm run build && (npm run build:types || true) && (npm run biome:format:all || true) && npm run publish-lib",
@@ -111,8 +111,6 @@
 		}
 	},
 	"devDependencies": {
-		"@vuelidate/core": "^2.0.3",
-		"@vuelidate/validators": "^2.0.4",
 		"@biomejs/biome": "^2.3.11",
 		"@regle/core": "^1.16.2",
 		"@tsconfig/node22": "^22.0.0",
@@ -121,8 +119,11 @@
 		"@vue/compat": "^3.5.x",
 		"@vue/test-utils": "^2.4.6",
 		"@vue/tsconfig": "^0.8.1",
+		"@vuelidate/core": "^2.0.3",
+		"@vuelidate/validators": "^2.0.4",
 		"@webitel/styleguide": "^26.2.0-1",
 		"clipboard-copy": "^4.x",
+		"csv-parse": "^6.1.0",
 		"globals": "^16.0.0",
 		"globby": "^16.x",
 		"happy-dom": "^20.x",
@@ -306,8 +307,8 @@
 			"import": "./src/modules*"
 		},
 		"./modules/FilesExport": {
-			"types": "./types/modules/FilesExport/v2/index.d.ts",
-			"import": "./src/modules/FilesExport/v2/index.ts"
+			"types": "./types/modules/FilesExport/index.d.ts",
+			"import": "./src/modules/FilesExport/index.ts"
 		},
 		"./modules/CallSession": {
 			"types": "./types/modules/CallSession/index.d.ts",

package/src/components/on-demand/wt-upload-file-icon-btn/wt-upload-file-icon-btn.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="wt-upload-file-icon-btn">
+    <wt-icon-btn
+      v-tooltip="t('iconHints.upload')"
+      icon="upload"
+      @click="triggerFileInput"
+    />
+
+    <input
+      ref="fileInput"
+      :accept="accept"
+      class="wt-upload-file-icon-btn__input"
+      type="file"
+      @change="inputFileHandler"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, withDefaults } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+defineOptions({
+	name: 'UploadFileIconBtn',
+});
+
+interface Props {
+	accept?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	accept: '.csv',
+});
+
+const emit =
+	defineEmits<(e: 'change', files: FileList | null, event: Event) => void>();
+
+const { t } = useI18n();
+
+const fileInput = ref<HTMLInputElement | null>(null);
+
+const triggerFileInput = () => {
+	fileInput.value?.click();
+};
+
+const clearFileInput = () => {
+	if (fileInput.value) fileInput.value.value = '';
+};
+
+const inputFileHandler = (event: Event) => {
+	const target = event.target as HTMLInputElement | null;
+	const files = target?.files ?? null;
+
+	emit('change', files, event);
+	clearFileInput();
+};
+
+const { accept } = props;
+</script>
+
+<style lang="scss">
+.wt-upload-file-icon-btn {
+  position: relative;
+  line-height: 0;
+
+  .wt-upload-file-icon-btn__input {
+    position: absolute;
+    top: -2px;
+    left: 0;
+    visibility: hidden;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    font-size: 0;
+  }
+}
+</style>

package/src/locale/en/en.js

@@ -256,6 +256,15 @@ export default deepmerge(
 					[WebitelMediaExporterExportStatus.Failed]: 'Error',
 				},
 			},
+			importCSV: 'Import CSV',
+			CSV: {
+				skipHeaders: 'Skip headers',
+				charSet: 'Char set',
+				separator: 'Separator',
+				CSVColumn: 'CSV column',
+				fieldName: 'Field name',
+				clearMember: 'Clear member',
+			},
 		},
 		channel: {
 			state: {

package/src/locale/es/es.js

@@ -249,6 +249,15 @@ export default {
 			},
 		},
 	},
+	importCSV: 'Importar CSV',
+	CSV: {
+		skipHeaders: 'Omitir encabezados',
+		charSet: 'Conjunto de caracteres',
+		separator: 'Separador',
+		CSVColumn: 'Columna CSV',
+		fieldName: 'Nombre del campo',
+		clearMember: 'Eliminar miembro',
+	},
 	channel: {
 		state: {
 			[ChannelState.Waiting]: 'En espera',

package/src/locale/kz/kz.js

@@ -254,6 +254,15 @@ export default {
 			},
 		},
 	},
+	importCSV: 'CSV импорттау',
+	CSV: {
+		skipHeaders: 'Тақырыптарды өткізіп жіберу',
+		charSet: 'Таңбалар жиыны',
+		separator: 'Бөлгіш',
+		CSVColumn: 'CSV бағаны',
+		fieldName: 'Өріс атауы',
+		clearMember: 'Мүшені тазалау',
+	},
 	channel: {
 		state: {
 			[ChannelState.Waiting]: 'Күту',

package/src/locale/pl/pl.js

@@ -254,6 +254,15 @@ export default {
 			},
 		},
 	},
+	importCSV: 'Importuj CSV',
+	CSV: {
+		skipHeaders: 'Pomiń nagłówki',
+		charSet: 'Zestaw znaków',
+		separator: 'Separator',
+		CSVColumn: 'Kolumna CSV',
+		fieldName: 'Nazwa pola',
+		clearMember: 'Wyczyść członka',
+	},
 	channel: {
 		state: {
 			[ChannelState.Waiting]: 'Oczekiwanie',

package/src/locale/ro/ro.js

@@ -254,6 +254,15 @@ export default {
 			},
 		},
 	},
+	importCSV: 'Importă CSV',
+	CSV: {
+		skipHeaders: 'Omite anteturile',
+		charSet: 'Set de caractere',
+		separator: 'Separator',
+		CSVColumn: 'Coloană CSV',
+		fieldName: 'Nume câmp',
+		clearMember: 'Șterge membrul',
+	},
 	channel: {
 		state: {
 			[ChannelState.Waiting]: 'În așteptare',

package/src/locale/ru/ru.js

@@ -250,6 +250,15 @@ export default {
 			},
 		},
 	},
+	importCSV: 'Импорт CSV',
+	CSV: {
+		skipHeaders: 'Пропустить заголовки',
+		charSet: 'Кодировка',
+		separator: 'Разделитель',
+		CSVColumn: 'Столбец CSV',
+		fieldName: 'Имя поля',
+		clearMember: 'Очистить участника',
+	},
 	channel: {
 		state: {
 			[ChannelState.Waiting]: 'Ожидание',

package/src/locale/uk/uk.js

@@ -249,6 +249,15 @@ export default {
 			},
 		},
 	},
+	importCSV: 'Імпорт CSV',
+	CSV: {
+		skipHeaders: 'Пропустити заголовки',
+		charSet: 'Кодування',
+		separator: 'Роздільник',
+		CSVColumn: 'Стовпець CSV',
+		fieldName: 'Назва поля',
+		clearMember: 'Очистити учасника',
+	},
 	channel: {
 		state: {
 			[ChannelState.Waiting]: 'Очікування',

package/src/locale/uz/uz.js

@@ -255,6 +255,15 @@ export default {
 			},
 		},
 	},
+	importCSV: 'CSV import qilish',
+	CSV: {
+		skipHeaders: 'Sarlavhalarni o‘tkazib yuborish',
+		charSet: 'Belgilar to‘plami',
+		separator: 'Ajratgich',
+		CSVColumn: 'CSV ustuni',
+		fieldName: 'Maydon nomi',
+		clearMember: 'A’zoni tozalash',
+	},
 	channel: {
 		state: {
 			[ChannelState.Waiting]: 'Kutmoqda',

package/src/locale/vi/vi.js

@@ -254,6 +254,15 @@ export default {
 			},
 		},
 	},
+	importCSV: 'Nhập CSV',
+	CSV: {
+		skipHeaders: 'Bỏ qua tiêu đề',
+		charSet: 'Bộ ký tự',
+		separator: 'Dấu phân cách',
+		CSVColumn: 'Cột CSV',
+		fieldName: 'Tên trường',
+		clearMember: 'Xóa thành viên',
+	},
 	channel: {
 		state: {
 			[ChannelState.Waiting]: 'Đang chờ',

package/src/modules/FilesExport/{v2/composables → composables}/useFilesExport.ts

@@ -1,7 +1,12 @@
 import JSZip from 'jszip';
 import { ref } from 'vue';
-import { _wtUiLog } from '../../../../scripts/logger';
-import { UseFilesExportOptions, UseFilesExportReturn } from '../types/types';
+
+import { _wtUiLog } from '../../../scripts/logger';
+import {
+	ExportedItem,
+	UseFilesExportOptions,
+	UseFilesExportReturn,
+} from '../types/types';
 import { fetchFileBinary, handleMimeType, saveZip } from '../utils/utils';
 
 export const useFilesExportProgress = () => {
@@ -56,6 +61,7 @@ export const useFilesExportProgress = () => {
 
 export const useFilesExport = ({
 	getFileURL,
+	getFileBlob,
 	fetch,
 	filename,
 	skipFilesWithError,
@@ -70,6 +76,16 @@ export const useFilesExport = ({
 		reset: resetProgress,
 	} = useFilesExportProgress();
 
+	const getFile = async (item: ExportedItem) => {
+		if (getFileURL) {
+			return fetchFileBinary(getFileURL(item));
+		}
+		if (getFileBlob) {
+			return getFileBlob(item);
+		}
+		throw new Error('getFileURL or getFileBlob is required');
+	};
+
 	const fillZip = async (zip: JSZip) => {
 		let page = 1;
 		let hasNext = true;
@@ -80,9 +96,9 @@ export const useFilesExport = ({
 			});
 			for (const item of items) {
 				try {
-					const binary = await fetchFileBinary(getFileURL(item));
+					const file = await getFile(item);
 					const itemFilename = handleMimeType(item);
-					zip.file(itemFilename, binary);
+					zip.file(itemFilename, file);
 					updateDownloadStatus(downloadStatus.value.count + 1);
 				} catch (err) {
 					_wtUiLog.warn({

package/src/modules/FilesExport/{v2/index.ts → index.ts}

@@ -1 +1,2 @@
 export { useFilesExport } from './composables/useFilesExport';
+export type { ExportedItem } from './types/types';

package/src/modules/FilesExport/{v2/types → types}/types.ts

@@ -6,7 +6,8 @@ export type ExportedItem = {
 } & Record<string, unknown>;
 
 export type UseFilesExportOptions = {
-	getFileURL: (item: ExportedItem) => string;
+	getFileURL?: (item: ExportedItem) => string;
+	getFileBlob?: (item: ExportedItem) => Promise<Blob>;
 	fetch: ({ page, size }: { page: number; size?: number }) => Promise<{
 		items: ExportedItem[];
 		next: boolean;

package/src/modules/UploadCsvPopup/components/wt-upload-csv-popup.vue

@@ -0,0 +1,266 @@
+<template>
+  <wt-popup
+    v-bind="$attrs"
+    :shown="file"
+    class="wt-upload-csv-popup"
+    @close="close"
+  >
+    <template #title>
+      {{ t('objects.importCSV') }}
+    </template>
+
+    <template #main>
+      <wt-loader
+        v-show="isReadingFile"
+        class="wt-upload-csv-popup__reading-file-loader"
+      />
+
+      <section
+        v-show="!isReadingFile"
+        class="wt-upload-csv-popup-form"
+      >
+        <wt-checkbox
+          v-model:selected="skipHeaders"
+          :label="t('objects.CSV.skipHeaders')"
+          disabled
+        />
+
+        <form class="wt-upload-csv-popup-form__form">
+          <wt-select
+            v-model="charset"
+            :clearable="false"
+            :label="t('objects.CSV.charSet')"
+            :options="charsetOptions"
+            disabled
+          />
+
+          <wt-input
+            v-model="separator"
+            :label="t('objects.CSV.separator')"
+          />
+        </form>
+
+        <!-- PREVIEW SECTION: preview loader, preview table, parsing stack trace -->
+        <section>
+          <wt-loader
+            v-if="isParsingPreview"
+            class="wt-upload-csv-popup__parsing-preview-loader"
+          />
+          <article
+            v-else
+            class="wt-upload-csv-popup-form__file-preview"
+          >
+            <wt-table
+              :data="csvPreviewTableData"
+              :grid-actions="false"
+              :headers="csvPreviewTableHeaders"
+              :selectable="false"
+            />
+          </article>
+        </section>
+
+        <!-- FIELDS MAPPING -->
+        <div class="wt-upload-csv-popup-mapping">
+          <div class="wt-upload-csv-popup-mapping-item">
+            <p
+              class="wt-upload-csv-popup-mapping-item__field typo-subtitle-1"
+            >
+              {{ t('objects.CSV.fieldName') }}
+            </p>
+            <p
+              class="wt-upload-csv-popup-mapping-item__field typo-subtitle-1"
+            >
+              {{ t('objects.CSV.CSVColumn') }}
+            </p>
+          </div>
+
+          <div
+            v-for="(field, key) in mappingFields"
+            :key="key"
+            class="wt-upload-csv-popup-mapping-item"
+          >
+            <p class="wt-upload-csv-popup-mapping-item__field">
+              {{ t(field.locale) }}<span v-if="field.required">*</span>
+            </p>
+
+            <wt-select
+              v-if="!field.multiple"
+              v-model="field.csv"
+              :clearable="!field.required"
+              :options="csvColumns"
+              :placeholder="t(field.locale)"
+              :track-by="null"
+              class="wt-upload-csv-popup-mapping-item__select"
+            />
+            <wt-tags-input
+              v-else
+              v-model="field.csv"
+              :options="csvColumns"
+              :placeholder="t(field.locale)"
+              class="wt-upload-csv-popup-mapping-item__select"
+            />
+
+            <div
+              v-if="field.tooltip"
+              class="upload-tooltip"
+            >
+              {{ field.tooltip }}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <div
+        v-show="!isParsingPreview && parseErrorStackTrace"
+        class="wt-upload-csv-popup-form__error-stack-trace"
+      >
+        {{ parseErrorStackTrace }}
+      </div>
+    </template>
+
+    <template
+      v-if="!isReadingFile"
+      #actions
+    >
+      <wt-button
+        :disabled="!allowSaveAction"
+        :loading="isParsingCSV"
+        @click="processCSV"
+      >
+        {{ t('reusable.save') }}
+      </wt-button>
+      <wt-button
+        color="secondary"
+        @click="close"
+      >
+        {{ t('reusable.close') }}
+      </wt-button>
+    </template>
+  </wt-popup>
+</template>
+
+<script setup lang="ts">
+import { defineEmits, defineProps, ref, toRefs, withDefaults } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import useUploadCsv from '../composable/useUploadCsv';
+import HandlingCSVMode from '../types/WtUploadCSVHandlingMode.enum';
+
+interface CharsetOption {
+	name: string;
+	value: string;
+}
+
+interface Props {
+	file: File | null;
+	mappingFields: unknown[];
+	addBulkItems?: (items: unknown[]) => unknown | Promise<unknown>;
+	handlingMode?: string;
+	fileUploadHandler?: () => unknown | Promise<unknown>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	file: null,
+	mappingFields: () => [],
+	handlingMode: HandlingCSVMode.PROCESS,
+});
+
+const emit = defineEmits<{
+	(e: 'changeMappingFields', value: unknown[]): void;
+	(e: 'save'): void;
+	(e: 'close'): void;
+}>();
+
+const { t } = useI18n();
+
+const skipHeaders = ref(true);
+const separator = ref(',');
+const charsetOptions = ref<CharsetOption[]>([]);
+const charset = ref<CharsetOption>({
+	name: 'UTF-8',
+	value: 'utf-8',
+});
+
+const { file, mappingFields } = toRefs(props);
+
+const {
+	isReadingFile,
+	isParsingCSV,
+	isParsingPreview,
+	parseErrorStackTrace,
+	csvPreviewTableData,
+	csvPreviewTableHeaders,
+	csvColumns,
+	allowSaveAction,
+	processCSV,
+	close,
+} = useUploadCsv({
+	props,
+	emit,
+	skipHeaders,
+	separator,
+});
+</script>
+
+<style lang="scss">
+.wt-upload-csv-popup {
+  :deep(.wt-popup__popup) {
+    min-height: 40vh;
+  }
+
+  .wt-upload-csv-popup__reading-file-loader {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .wt-upload-csv-popup-form__form {
+    display: grid;
+    align-items: flex-start;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: minmax(40px, auto);
+    grid-column-gap: 20px;
+    grid-row-gap: 10px;
+    margin: var(--spacing-sm) 0;
+  }
+
+  .wt-upload-csv-popup__parsing-preview-loader {
+    margin: auto;
+  }
+
+  .wt-upload-csv-popup-form__file-preview .wt-table {
+    overflow: auto;
+    max-width: 60vw;
+  }
+
+  .wt-upload-csv-popup-mapping {
+    .wt-upload-csv-popup-mapping-item {
+      display: grid;
+      align-items: flex-start;
+      grid-template-columns: 1fr 1fr;
+      grid-auto-rows: minmax(40px, auto);
+      grid-column-gap: 20px;
+      grid-row-gap: 10px;
+      margin-bottom: var(--spacing-sm);
+
+      &__field {
+        align-self: center;
+      }
+
+      &__select :deep(.wt-label),
+      &__select :deep(.wt-input-info) {
+        display: none;
+      }
+    }
+  }
+
+  .wt-upload-csv-popup-form__error-stack-trace {
+    margin-top: var(--spacing-sm);
+    padding: var(--spacing-sm);
+    color: var(--error-color);
+    border-radius: var(--border-radius);
+    background: var(--secondary-color);
+  }
+}
+</style>