inviton-powerduck 0.0.137 → 0.0.139

package/app/powerduck-system-resources.ts

@@ -50,6 +50,7 @@ export interface IPowerduckSystemResources {
 	quickEdit: string;
 	quickEditItemsCount: string;
 	quickEditErrorNamed: string;
+	translateFromThisLanguage: string;
 
 	languageSK: string;
 	languageEN: string;
@@ -76,6 +77,7 @@ export interface IPowerduckSystemResources {
 	validationErrorIpAddress: string;
 	validationErrorMacAddress: string;
 	validationErrorGeneric: string;
+	uploadImageInvalidFileType: string;
 
 	signInGoogle: string;
 	signInFacebook: string;

package/common/dialog-utils.ts

@@ -267,7 +267,7 @@ export class DialogUtils {
 			DialogIcons.Error,
 			false,
 		);
-		console.log(modalSelector);
+		// console.log(modalSelector);
 		modalContext.show();
 		return modalSelector;
 	}

package/common/external-barcode-scanner.ts

@@ -240,7 +240,6 @@
 
 	this._onKeyUp = function (e) {
 		var value = e.which ? e.which : e.keyCode;
-		console.log(value);
 
 		if (value > 31) {
 			clearTimeout(self._t);

package/common/utils/array-extend.ts

@@ -1,6 +1,6 @@
 import { arraySort } from './array-sort';
 
-interface ArrayExtended<T> extends Array<T> {
+export interface ArrayExtended<T> extends Array<T> {
 	/**
 	 * Removes given items from the Array
 	 *
@@ -16,6 +16,11 @@ interface ArrayExtended<T> extends Array<T> {
 	 */
 	insertAt: (item: T, index: number) => void;
 
+	/**
+	 * Clones current array into new instance
+	 */
+	clone: () => ArrayExtended<T>;
+
 	/**
 	 * Sorts array by given property
 	 *
@@ -75,10 +80,10 @@ interface ArrayExtended<T> extends Array<T> {
 }
 
 if (!(Array.prototype as any).find) {
-	(Array.prototype as any).find = function (callback) {
+	(Array.prototype as any).find = function (callback, ...args) {
 		const list = new Object(this);
 		const length = (list as any).length >>> 0;
-		const thisArg = arguments[1];
+		const thisArg = args[0];
 		for (let i = 0; i < length; i++) {
 			const element = list[i];
 			if (callback.call(
@@ -98,9 +103,9 @@ export const arrayExtend = <T>(arr: T[]): ArrayExtended<T> => {
 		arr = [];
 	}
 
-	((arr as any)).remove = function (items: []): void {
-		for (let i = 0, len = arguments.length; i < len; i++) {
-			const item = arguments[i];
+	((arr as any)).remove = (items: [], ...args): void => {
+		for (let i = 0, len = args.length; i < len; i++) {
+			const item = args[i];
 			const itemIndex = arr.indexOf(item);
 
 			if (itemIndex > -1) {
@@ -109,7 +114,11 @@ export const arrayExtend = <T>(arr: T[]): ArrayExtended<T> => {
 		}
 	};
 
-	((arr as any)).insertAt = function (item, index) {
+	((arr as any)).clone = function () {
+		return arrayExtend(this.slice(0));
+	};
+
+	((arr as any)).insertAt = (item, index) => {
 		arr.splice(
 			index,
 			0,
@@ -117,7 +126,7 @@ export const arrayExtend = <T>(arr: T[]): ArrayExtended<T> => {
 		);
 	};
 
-	((arr as any)).contains = function (item) {
+	((arr as any)).contains = (item) => {
 		if (item != null) {
 			let idProp = 'Id';
 			if (item[idProp] == null) {
@@ -137,7 +146,7 @@ export const arrayExtend = <T>(arr: T[]): ArrayExtended<T> => {
 		return arr.includes(item);
 	};
 
-	((arr as any)).min = function <T>(callbackfn: (value: T, index: number, array: T[]) => number, defaultValue?: number): number {
+	((arr as any)).min = <T>(callbackfn: (value: T, index: number, array: T[]) => number, defaultValue?: number): number => {
 		if (arr.length == 0) {
 			return defaultValue;
 		}
@@ -153,7 +162,7 @@ export const arrayExtend = <T>(arr: T[]): ArrayExtended<T> => {
 		)), Number.MAX_VALUE);
 	};
 
-	((arr as any)).max = function <T>(callbackfn: (value: T, index: number, array: T[]) => number, defaultValue?: number): number {
+	((arr as any)).max = <T>(callbackfn: (value: T, index: number, array: T[]) => number, defaultValue?: number): number => {
 		if (arr.length == 0) {
 			return defaultValue;
 		}
@@ -169,7 +178,7 @@ export const arrayExtend = <T>(arr: T[]): ArrayExtended<T> => {
 		)), 0);
 	};
 
-	((arr as any)).sum = function <T>(callbackfn: (value: T, index: number, array: T[]) => number, defaultValue?: number): number {
+	((arr as any)).sum = <T>(callbackfn: (value: T, index: number, array: T[]) => number, defaultValue?: number): number => {
 		if (arr.length == 0) {
 			return defaultValue;
 		}
@@ -185,28 +194,22 @@ export const arrayExtend = <T>(arr: T[]): ArrayExtended<T> => {
 		), 0);
 	};
 
-	((arr as any)).selectMany = function (callback): any {
-		return arr.reduce((
-			prevVal,
+	((arr as any)).selectMany = (callback): any => arr.reduce((
+		prevVal,
+		u,
+		i,
+	) => [
+		...prevVal,
+		...(callback(
 			u,
 			i,
-		) => [
-				...prevVal,
-				...(callback(
-					u,
-					i,
-					arr,
-				) as any),
-			], []);
-	};
+			arr,
+		) as any),
+	], []);
 
-	((arr as any)).distinct = function (): any {
-		return arr.reduce((un, u) => ({ ...un, u }), {});
-	};
+	((arr as any)).distinct = (): any => arr.reduce((un, u) => ({ ...un, u }), {});
 
-	((arr as any)).sortBy = function <T>(propName: string | ((item: T) => string | number)): ArrayExtended<T> {
-		return arraySort(arr as any, propName) as any;
-	};
+	((arr as any)).sortBy = <T>(propName: string | ((item: T) => string | number)): ArrayExtended<T> => arraySort(arr as any, propName) as any;
 
 	return arr as any;
 };

package/common/utils/broswer-image-compression.ts

@@ -25,7 +25,7 @@ export class BrowserImageCompression {
 			compressedImage.isCompressed = true;
 			return compressedImage;
 		} catch (error) {
-			console.log(error);
+			console.error(error);
 			return file;
 		}
 	}

package/common/utils/language-utils.ts

@@ -25,7 +25,7 @@ export namespace LanguageUtils {
 		return name;
 	}
 
-	export function getLanguageList(): Array<LanguageListItem> {
+	export function getLanguageList(sort?: boolean): Array<LanguageListItem> {
 		const retVal = <Array<LanguageListItem>>[];
 
 		const getLanguage = (langCode: Language): LanguageListItem => {
@@ -80,6 +80,7 @@ export namespace LanguageUtils {
 			}
 		}
 
+		if (sort === true) {
 		try {
 			retVal.sort((a, b) => {
 				return a.text.localeCompare(b.text);
@@ -87,6 +88,7 @@ export namespace LanguageUtils {
 		} catch (e) {
 			arraySort(retVal, 'text');
 		}
+	}
 
 		LanguageUtils.getLanguageList = function () {
 			return retVal;

package/components/app/vue-plugin-jsxtransform.ts

@@ -22,7 +22,7 @@ export const VueJsxTransform = {
 					}
 
 					if (data?.onClick != null) {
-						console.log(data);
+						console.error(data);
 						(window as any).kurek = data;
 					}
 

package/components/bootstrap-toggle/index.tsx

@@ -1,7 +1,7 @@
 import type { Validation } from '@vuelidate/core';
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
 import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
-import { Prop, toNative } from 'vue-facing-decorator';
+import { Prop, toNative, Watch } from 'vue-facing-decorator';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
 import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
@@ -68,6 +68,11 @@ class BootstrapToggleComponent extends TsxComponent<BootstrapToggleArgs> impleme
 
 	}
 
+	@Watch('value')
+	onValueChanged() {
+		this.$forceUpdate();
+	}
+
 	getCaptionTrue(): string {
 		return this.captionTrue || PowerduckState.getResourceValue('yes');
 	}

package/components/chart-js/pie-chart.tsx

@@ -84,7 +84,7 @@ class PieChartComponent extends TsxComponent<PieArgs> implements PieArgs {
 			this.destroyChart();
 
 			this.$nextTick(() => {
-				console.log(this.getCanvasContext() == null);
+				// console.log(this.getCanvasContext() == null);
 
 				this._chart = new Chart(this.getCanvasContext(), {
 					type: this.type || PieChartType.Doughnut,

package/components/datatable/datatable-static.tsx

@@ -67,16 +67,15 @@ export class DataTableStaticComponent extends TsxComponent<DataTableStaticArgs>
 		return this.getTable().normalizeStringForSearch(str);
 	}
 
-	private post(data: any): Promise<any> {
-		const self = this;
-		return new Promise((resolve, reject) => {
-			const rowArr = [...(self.rows || [])];
+	private post(_data: any): Promise<any> {
+		return new Promise((resolve) => {
+			const rowArr = [...(this.rows || [])];
 
 			resolve({
 				TotalCount: rowArr.length,
 				TotalFilteredCount: rowArr.length,
 				Rows: rowArr,
-				InitRows: self.rows,
+				InitRows: this.rows,
 			});
 		});
 	}
@@ -130,4 +129,5 @@ export class DataTableStaticComponent extends TsxComponent<DataTableStaticArgs>
 }
 
 const DataTableStatic = toNative(DataTableStaticComponent);
+export type DataTableStaticType = typeof DataTableStatic.prototype;
 export default DataTableStatic;

package/components/datatable/datatable.tsx

@@ -294,6 +294,7 @@ export interface TableColumn {
 	cssClass?: string;
 	visible?: boolean;
 	sortable?: boolean;
+	searchable?: boolean;
 	filterType?: DataTableFilterItemType;
 	filterItems?: DataTableFilterItemCollection;
 	filterAllowExclusivity?: boolean;
@@ -2283,7 +2284,6 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 			return '';
 		} else if (filterType == DataTableFilterItemType.Text || filterType == null) {
 			return (<TextBox updateMode="input" cssClass="dt-filter-input" wrap={false} label={null} placeholder={`${capitalize(PowerduckState.getResourceValue('search'))}...`} value={this.currentAdvancedFilterState[dtColumn.id]} changed={(e) => { this.performInputFilter(dtColumn, e); }} appendIcon={closeIcon} appendIconClicked={appendIconClicked} />);
-			// return (<input class="dt-filter-input" placeholder={AppState.resources.search.capitalize() + "..."} onKeyup={(e) => { this.performInputFilter(dtColumn, e) }} value={this.currentAdvancedFilterState[dtColumn.id]} />)
 		} else if (filterType == DataTableFilterItemType.Dropdown) {
 			return (
 				<div class="dt-filter-dropdown">
@@ -2291,7 +2291,7 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 						label={null}
 						options={dtColumn.filterItems}
 						wrap={false}
-						disableSearch={true}
+						disableSearch={!dtColumn.searchable}
 						dropdownAutoWidth={true}
 						multiselect={true}
 						multiselectMode={MultiselectMode.Checkboxes}
@@ -2492,5 +2492,5 @@ class DataTableComponent extends TsxComponent<DataTableArgs> implements DataTabl
 })();
 
 const DataTable = toNative(DataTableComponent);
-export const DataTableType = typeof DataTable.prototype;
+export type DataTableType = typeof DataTable.prototype;
 export default DataTable;

package/components/datatable/ts/reorder.ts

@@ -70,8 +70,6 @@ function handleDragging(event) {
 	draggingItem.style.top = `${event.pageY - mouseOffsetY}px`;
 	draggingItem.style.left = `${event.pageX - mouseOffsetX}px`;
 
-	console.log(event.pageX);
-
 	const draggingItemCoordinates = getDOMNodePosition(draggingItem);
 	const prevItem = draggingItem.previousElementSibling;
 	const nextItem = draggingItem.nextElementSibling;

package/components/dropdown/index.tsx

@@ -970,7 +970,7 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 							return $(`${builder}</span></span>`);
 						};
 					} else {
-						console.log('Skipping tagsButtons - one of required conditions not met');
+						// console.log('Skipping tagsButtons - one of required conditions not met');
 					}
 				}
 			}
@@ -1218,4 +1218,5 @@ class DropdownListComponent extends TsxComponent<DropdownListArgs> implements Dr
 }
 
 const DropdownList = toNative(DropdownListComponent);
+export type DropdownListType = typeof DropdownList.prototype;
 export default DropdownList;

package/components/dropdown/ts/select2-multi-checkboxes.ts

@@ -84,12 +84,39 @@ import { PortalUtils } from '../../../common/utils/utils';
 		self.$element.select2({
 			allowClear: true,
 			ajax: {
-				transport(
+				transport (
 					params,
 					success,
 					failure,
 				) {
-					success({ results: self.currentData || [] });
+					const stripDiacritics = (text: string) => {
+						const DIACRITICS = ($ as any).fn.select2.amd.require('select2/diacritics');
+						const match = a => DIACRITICS[a] || a;
+						return text.replace(/[^\u0000-\u007E]/g, match);
+					};
+
+					const normalizeForSearch = (text: string) => {
+						if (text == null) {
+							return null;
+						}
+						return stripDiacritics(text).toUpperCase();
+					};
+
+					let data = self.currentData || [];
+					const searchTerm = normalizeForSearch(params.data?.term?.trim());
+
+					if (searchTerm == null || searchTerm.trim() == '') {
+						success({ results: data || [] });
+						return;
+					}
+
+					const filteredData = data.filter(item => {
+						const itemText = normalizeForSearch(item.text);
+						return itemText.includes(searchTerm);
+					});
+
+					success({ results: filteredData || [] });
+					// success({ results: data || [] });
 				},
 			},
 			language: options.language,

package/components/fullcalendar/timegrid-calendar.tsx

@@ -329,7 +329,7 @@ class TimegridCalendarComponent extends TsxComponent<TimegridCalendarArgs> imple
 			resourceGroupField: 'building',
 			events: this.getEvents(),
 			eventRender: (args) => {
-				console.log('rendering');
+				// console.log('rendering');
 				args.el.classList.add('tg-has-menu');
 				args.el.setAttribute('data-uuid', args.event.extendedProps.uuid);
 				args.el.setAttribute('data-event-id', args.event.id);

package/components/image-crop/image-cropping-modal.tsx

@@ -99,7 +99,7 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 		const start = new Date().getTime();
 		const img = new Image();
 		img.onload = function () {
-			const waitForLoad = function (callback) {
+			const waitForLoad = (callback) => {
 				if (new Date().getTime() - start > 700) {
 					callback();
 				} else {
@@ -150,18 +150,6 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 		(this.$refs.imageCropModal as typeof Modal.prototype).hide();
 	}
 
-	private getImageFormat(dataUrl): string {
-		if (dataUrl.length > 100) {
-			dataUrl = dataUrl.substring(0, 100);
-		}
-
-		if (dataUrl.contains('image/png')) {
-			return 'image/png';
-		} else {
-			return 'image/jpeg';
-		}
-	}
-
 	private handleSaveButtonClicked() {
 		this.blocked = true;
 
@@ -169,7 +157,6 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 		const canvas = this.$refs.imageCropCanvas as HTMLCanvasElement;
 		const ctx = canvas.getContext('2d');
 		const selection = this.getCurrentSelection();
-
 		image.src = this.getFileName();
 		image.onload = async () => {
 			this.drawCroppedImageOnCanvas(
@@ -196,7 +183,7 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 						this.blocked = false;
 					}, 500);
 				},
-				this.getImageFormat(image.src),
+				await this.getImageFormat(image.src),
 				0.9,
 			);
 		};
@@ -272,6 +259,58 @@ class ImageCropModalComponent extends TsxComponent<ImageCropModalBindingArgs> im
 		}
 	}
 
+	private async getImageFormat(url: string): Promise<string | null> {
+		const response = await fetch(url, { mode: 'cors' });
+		if (!response.ok) {
+			throw new Error('Failed to fetch image');
+		}
+
+		const buffer = await response.arrayBuffer();
+		const bytes = new Uint8Array(buffer);
+
+		if (
+			bytes[0] === 0x89
+			&& bytes[1] === 0x50
+			&& bytes[2] === 0x4E
+			&& bytes[3] === 0x47
+		) {
+			return 'image/png';
+		}
+
+		if (
+			bytes[0] === 0xFF
+			&& bytes[1] === 0xD8
+			&& bytes[bytes.length - 2] === 0xFF
+			&& bytes[bytes.length - 1] === 0xD9
+		) {
+			return 'image/jpeg';
+		}
+
+		if (
+			bytes[0] === 0x47
+			&& bytes[1] === 0x49
+			&& bytes[2] === 0x46
+			&& bytes[3] === 0x38
+		) {
+			return 'image/gif';
+		}
+
+		if (
+			bytes[0] === 0x52
+			&& bytes[1] === 0x49
+			&& bytes[2] === 0x46
+			&& bytes[3] === 0x46
+			&& bytes[8] === 0x57
+			&& bytes[9] === 0x45
+			&& bytes[10] === 0x42
+			&& bytes[11] === 0x50
+		) {
+			return 'image/webp';
+		}
+
+		return null;
+	}
+
 	private getCurrentSelection(): ImageCropSelection {
 		const img = $(this.getImageElement()).first();
 		const cropHolder = $(this.$refs.imageCroppingContainer).find('.jcrop-active').first();

package/components/image-crop/upload-and-crop.tsx

@@ -2,8 +2,11 @@ import type { _ButtonArgsBase, ButtonLayout, ButtonSize } from '../button/button
 import type { UploadButtonFileObtainedArgs } from '../button/upload-button';
 import type { ImageCroppedUploadArgs } from './image-cropping-modal';
 import { Prop, toNative } from 'vue-facing-decorator';
+import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
 import { BrowserImageCompression } from '../../common/utils/broswer-image-compression';
+import { formatString } from '../../common/utils/format-string';
+import { PortalUtils } from '../../common/utils/utils';
 import UploadButton from '../button/upload-button';
 import LoadingIndicator from '../loading-indicator';
 import NotificationProvider from '../ui/notification';
@@ -27,6 +30,7 @@ interface UploadImageAndCropButtonArgs extends _ButtonArgsBase {
 	uploadComplete: (args: any) => void;
 	autoCommit?: boolean;
 	disableCompression?: boolean;
+	allowedTypes?: string[];
 	compressionMaxSizeMb?: number;
 	isLoading?: boolean;
 }
@@ -54,6 +58,7 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 	@Prop() uploadComplete: (args: any) => void;
 	@Prop() autoCommit: boolean;
 	@Prop() disableCompression: boolean;
+	@Prop() allowedTypes: string[];
 	@Prop() compressionMaxSizeMb?: number;
 	isInternalLoading: boolean = false;
 
@@ -61,6 +66,11 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 		const urlCreator = window.URL || window.webkitURL;
 		const imgUrl = urlCreator.createObjectURL(e.file);
 
+		if (this.allowedTypes?.length > 0 && !this.allowedTypes.includes(e.file.type)) {
+			NotificationProvider.showErrorMessage(formatString(PowerduckState.getResourceValue('uploadImageInvalidFileType'), PortalUtils.htmlEscape(this.allowedTypes.join(', '))));
+			return;
+		}
+
 		if (this.useCropper != false) {
 			(this.$refs.imgCrop as typeof ImageCropModal.prototype).show({
 				fileName: e.file.name,
@@ -78,9 +88,9 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 				file: e.file,
 				fileName: e.file.name,
 				dataUrl: null,
-			}).then((resp) => {
+			}).then(() => {
 				this.isInternalLoading = false;
-			}).catch((err) => {
+			}).catch((_err) => {
 				this.isInternalLoading = false;
 			});
 		}
@@ -91,8 +101,6 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 	}
 
 	async getUploadPromise(args: ImageCroppedUploadArgs): Promise<any> {
-		const self = this;
-
 		if (!(this.disableCompression || args.file.type == 'image/svg+xml')) {
 			args.file = await BrowserImageCompression.compress(args.file, {
 				maxSizeMB: this.compressionMaxSizeMb,
@@ -101,8 +109,8 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 
 		return new Promise((resolve, reject) => {
 			const formData = new FormData();
-			if (self.uploadArgs != null) {
-				const argsVal = self.uploadArgs(args);
+			if (this.uploadArgs != null) {
+				const argsVal = this.uploadArgs(args);
 				if (argsVal != null) {
 					for (const key in argsVal) {
 						formData.append(key, argsVal[key]);
@@ -110,10 +118,10 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 				}
 			}
 
-			if (self.autoCommit === true) {
+			if (this.autoCommit === true) {
 				const request = new XMLHttpRequest();
-				request.open('POST', self.uploadUrl);
-				request.onreadystatechange = function () {
+				request.open('POST', this.uploadUrl);
+				request.onreadystatechange = () => {
 					if (request.readyState == 4) {
 						let response;
 						try {
@@ -123,8 +131,8 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 						}
 
 						if (request.status == 200) {
-							if (self.uploadComplete) {
-								self.uploadComplete(response);
+							if (this.uploadComplete) {
+								this.uploadComplete(response);
 							}
 
 							resolve(response);
@@ -144,8 +152,8 @@ class UploadImageAndCropButtonComponent extends TsxComponent<UploadImageAndCropB
 
 				request.send(formData);
 			} else {
-				const argsVal = self.uploadArgs(args);
-				self.uploadComplete(argsVal);
+				const argsVal = this.uploadArgs(args);
+				this.uploadComplete(argsVal);
 				resolve(formData);
 			}
 		});

package/components/input/localized-info-input.tsx

@@ -1,5 +1,6 @@
 import type { ILocalizedText } from '../../common/localized-text';
 import type { ValidationState } from '../../common/static-wrappers/interfaces/validation-interface';
+import type { TranslateGetRequest, TranslateGetResponse } from './translate';
 import { Prop, toNative } from 'vue-facing-decorator';
 import TsxComponent, { Component } from '../../app/vuetsx';
 import { Language } from '../../common/enums/language';
@@ -19,6 +20,8 @@ interface LocalizedInfoInputArgs {
 	validationState?: ValidationState;
 	changed: (e: ILocalizedText) => void;
 	mandatory?: boolean;
+	translatable?: boolean;
+	translateApiMethod?: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
 }
 
 @Component
@@ -32,6 +35,8 @@ class LocalizedInfoInputComponent extends TsxComponent<LocalizedInfoInputArgs> i
 	@Prop() displayType: 'input' | 'textarea';
 	@Prop() changed: (e: ILocalizedText) => void;
 	@Prop() mandatory?: boolean;
+	@Prop({ default: false }) translatable: boolean;
+	@Prop() translateApiMethod: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
 
 	getValueForTmrLanguage(lang: Language): string {
 		return this.value[lang];
@@ -99,6 +104,8 @@ class LocalizedInfoInputComponent extends TsxComponent<LocalizedInfoInputArgs> i
 					changed={(e) => {
 						this.valueChanged(e);
 					}}
+					translatable={this.translatable}
+					translateApiMethod={this.translateApiMethod}
 					supportedLanguages={[
 						Language.sk,
 						Language.en,
@@ -125,6 +132,8 @@ class LocalizedInfoInputComponent extends TsxComponent<LocalizedInfoInputArgs> i
 					changed={(e) => {
 						this.valueChanged(e);
 					}}
+					translatable={this.translatable}
+					translateApiMethod={this.translateApiMethod}
 					supportedLanguages={[
 						Language.sk,
 						Language.en,

package/components/input/localized-string-input.tsx

@@ -1,6 +1,7 @@
 import type { ILocalizedText } from '../../common/localized-text';
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
 import type { FormItemWrapperArgs, HintType, MarginType } from '../form/form-item-wrapper';
+import type { TranslateGetRequest, TranslateGetResponse } from './translate';
 import { Prop, toNative } from 'vue-facing-decorator';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
@@ -16,6 +17,7 @@ import Modal, { ModalSize } from '../modal/modal';
 import ModalBody from '../modal/modal-body';
 import ModalFooter from '../modal/modal-footer';
 import globalIcon from './img/global.png';
+import Translate from './translate';
 import './css/localized-string-input.css';
 
 interface LocalizedStringInputArgs extends FormItemWrapperArgs {
@@ -23,6 +25,8 @@ interface LocalizedStringInputArgs extends FormItemWrapperArgs {
 	changed: (e: ILocalizedText) => void;
 	supportedLanguages?: Language[];
 	placeholder?: string;
+	translatable?: boolean;
+	translateApiMethod?: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
 }
 
 @Component
@@ -44,6 +48,8 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
 	@Prop() hintType!: HintType;
 	@Prop() appendIcon: string;
 	@Prop() prependIcon: string;
+	@Prop({default: false}) translatable: boolean;
+	@Prop() translateApiMethod: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
 	@Prop() appendClicked: () => void;
 	@Prop() prependClicked: () => void;
 	currentValue: ILocalizedText = null;
@@ -231,6 +237,21 @@ class LocalizedStringInputComponent extends TsxComponent<LocalizedStringInputArg
 											<img class="lsi-icon" src={LanguageUtils.getLanguageFlagUrl(lang.flag)} />
 										</label>
 										<div class="col-md-9">
+											<div class="d-flex justify-content-end">
+												{this.translatable !== false && (
+													<Translate
+														value={this.currentValue}
+														currentLangId={lang.id}
+														langArr={LanguageUtils.getLanguageList()}
+														changeValue={(langId, value) => {
+															this.handleModalValueChange(value, { id: langId });
+															this.$forceUpdate();
+														}}
+														getActualValue={(langId, value) => value[langId]}
+														apiMethod={this.translateApiMethod}
+													/>
+												)}
+											</div>
 											<div class="form-group maxwidth-input ">
 												<input
 													type="text"

package/components/input/localized-string-textarea.tsx

@@ -2,6 +2,7 @@ import type { Language } from '../../common/enums/language';
 import type { ILocalizedText } from '../../common/localized-text';
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
 import type { FormItemWrapperArgs, HintType, MarginType } from '../form/form-item-wrapper';
+import type { TranslateGetRequest, TranslateGetResponse } from './translate';
 import { Prop, toNative } from 'vue-facing-decorator';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
@@ -10,12 +11,15 @@ import FormItemWrapper from '../form/form-item-wrapper';
 import { TabPage } from '../tabs/tab-page';
 import Tabs, { TabsRenderMode } from '../tabs/tabs';
 import TextArea from './textarea';
+import Translate from './translate';
 
 interface LocalizedStringInputArgs extends FormItemWrapperArgs {
 	value: ILocalizedText;
 	changed: (e: ILocalizedText) => void;
 	supportedLanguages?: Language[];
 	placeholder?: string;
+	translatable?: boolean;
+	translateApiMethod?: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
 }
 
 @Component
@@ -36,6 +40,8 @@ class LocalizedStringTextareaComponent extends TsxComponent<LocalizedStringInput
 	@Prop() hintType!: HintType;
 	@Prop() appendIcon: string;
 	@Prop() prependIcon: string;
+	@Prop({ default: false }) translatable: boolean;
+	@Prop() translateApiMethod: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
 	@Prop() appendClicked: () => void;
 	@Prop() prependClicked: () => void;
 	currentValue: ILocalizedText = null;
@@ -110,6 +116,16 @@ class LocalizedStringTextareaComponent extends TsxComponent<LocalizedStringInput
 								}}
 								rows={4}
 							/>
+							{this.translatable !== false && (
+								<Translate
+									value={this.value}
+									currentLangId={lang.id}
+									langArr={langArr}
+									changeValue={this.changeValue.bind(this)}
+									getActualValue={(langId, value) => this.getActualValue(langId, value as ILocalizedText)}
+									apiMethod={this.translateApiMethod}
+								/>
+							)}
 						</TabPage>
 					))}
 				</Tabs>

package/components/input/localized-string-wysiwyg.tsx

@@ -2,6 +2,7 @@ import type { Language } from '../../common/enums/language';
 import type { ILocalizedText } from '../../common/localized-text';
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
 import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
+import type { TranslateGetRequest, TranslateGetResponse } from './translate';
 import { Prop, toNative } from 'vue-facing-decorator';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
@@ -9,6 +10,7 @@ import { LanguageUtils } from '../../common/utils/language-utils';
 import FormItemWrapper from '../form/form-item-wrapper';
 import { TabPage } from '../tabs/tab-page';
 import Tabs, { TabsRenderMode } from '../tabs/tabs';
+import Translate from './translate';
 import WysiwigEditor from './wysiwig';
 
 interface LocalizedStringInputArgs extends FormItemWrapperArgs {
@@ -17,6 +19,8 @@ interface LocalizedStringInputArgs extends FormItemWrapperArgs {
 	supportedLanguages?: Language[];
 	placeholder?: string;
 	resizable?: boolean;
+	translatable?: boolean;
+	translateApiMethod?: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
 }
 
 @Component
@@ -39,6 +43,8 @@ class LocalizedStringWysiwigComponent extends TsxComponent<LocalizedStringInputA
 	@Prop() prependIcon: string;
 	@Prop() appendClicked: () => void;
 	@Prop() prependClicked: () => void;
+	@Prop({ default: false }) translatable: boolean;
+	@Prop() translateApiMethod: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
 	currentValue: ILocalizedText = null;
 	editorHeight: number = null;
 
@@ -117,6 +123,16 @@ class LocalizedStringWysiwigComponent extends TsxComponent<LocalizedStringInputA
 									this.changeValue(lang.id, e);
 								}}
 							/>
+							{this.translatable !== false && (
+								<Translate
+									value={this.value}
+									currentLangId={lang.id}
+									langArr={langArr}
+									changeValue={this.changeValue.bind(this)}
+									getActualValue={(langId, value) => this.getActualValue(langId, value as ILocalizedText)}
+									apiMethod={this.translateApiMethod}
+								/>
+							)}
 						</TabPage>
 					))}
 				</Tabs>

package/components/input/translate.tsx

@@ -0,0 +1,100 @@
+import type { Language } from '../../common/enums/language';
+import type { ILocalizedText } from '../../common/localized-text';
+import type LocalizedText from '../../common/localized-text';
+import { Prop } from 'vue-facing-decorator';
+import PowerduckState from '../../app/powerduck-state';
+import { TsxComponentExtendedBase } from '../../app/vuestsx-extended';
+import { Component } from '../../app/vuetsx';
+import { LanguageUtils } from '../../common/utils/language-utils';
+import TextButton from '../button/text-button';
+
+interface TranslateArgs {
+	value: ILocalizedText | LocalizedText;
+	currentLangId: Language;
+	langArr: LanguageUtils.LanguageListItem[];
+	changeValue: (langId: Language, value: string) => void;
+	getActualValue: (langId: Language, value: ILocalizedText | LocalizedText) => string;
+	apiMethod: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
+}
+
+export class TranslateGetRequest {
+	fromLang: string;
+	toLang: string[];
+	text: string;
+}
+
+export class TranslateGetResponse {
+	result: LocalizedText;
+}
+
+@Component
+export default class Translate extends TsxComponentExtendedBase<TranslateArgs> implements TranslateArgs {
+	@Prop() value: ILocalizedText | LocalizedText;
+	@Prop() currentLangId: Language;
+	@Prop() langArr: LanguageUtils.LanguageListItem[];
+	@Prop() apiMethod: <RQ extends TranslateGetRequest, RS extends TranslateGetResponse>(data?: RQ) => Promise<RS>;
+	@Prop() changeValue: (langId: Language, value: string) => void;
+	@Prop() getActualValue: (langId: Language, value: ILocalizedText | LocalizedText) => string;
+	translateLoading = false;
+
+	async translateValue(
+		value: string,
+		fromLang: Language,
+		langArr: LanguageUtils.LanguageListItem[],
+	) {
+		console.log('value', value);
+		this.translateLoading = true;
+		const toLang = langArr.filter(x => !this.getActualValue(x.id, this.value))?.map(x => x.id);
+		console.log('toland', toLang, langArr);
+		if (toLang.length === 0) {
+			this.translateLoading = false;
+			return;
+		}
+
+		const resp = await this.tryGetDataByArgs<TranslateGetResponse, TranslateGetRequest>({
+			blockRoot: false,
+			apiMethod: this.apiMethod,
+			requestArgs: {
+				fromLang,
+				toLang,
+				text: value,
+			},
+		});
+
+		if (resp?.result != null) {
+			for (const key in resp.result) {
+				const langCode = LanguageUtils.getLanguageEnum(key);
+				this.changeValue(langCode, resp.result[key]);
+			}
+		} else {
+			console.error('Error while getting translation');
+		}
+
+		this.translateLoading = false;
+	}
+
+	render(h) {
+		return this.translateLoading
+			? (
+					<div class="d-flex flex-row gap-1 align-items-center">
+						<div class="spinner-border spinner-border-sm" role="status">
+							<span class="sr-only">Loading...</span>
+						</div>
+						<span>Translating...</span>
+					</div>
+				)
+			: (
+					<TextButton
+						icon="icon icon-translate"
+						text={PowerduckState.getResourceValue('translateFromThisLanguage')}
+						clicked={() => {
+							this.translateValue(
+								this.getActualValue(this.currentLangId, this.value),
+								this.currentLangId,
+								this.langArr,
+							);
+						}}
+					/>
+				);
+	}
+}

package/components/modal/modal.tsx

@@ -314,5 +314,5 @@ class ModalComponent extends TsxComponent<ModalArgs> implements ModalArgs {
 }
 
 const Modal = toNative(ModalComponent);
-export const ModalType = typeof Modal.prototype;
+export type ModalType = typeof Modal.prototype;
 export default Modal;

package/components/photos/photo-manager.tsx

@@ -56,13 +56,11 @@ class PhotoManagerComponent extends TsxComponentExtended<PhotoManagerArgs> imple
 			return [];
 		}
 
-		return this.photos.map((p, i) => {
-			return {
-				Id: p.id as any,
-				ImageUrl: p.fullPath, // this.getFullPath(p),
-				SortOrder: p.sortOrder,
-			};
-		});
+		return this.photos.map((p, i) => ({
+			Id: p.id as any,
+			ImageUrl: p.fullPath, // this.getFullPath(p),
+			SortOrder: p.sortOrder,
+		}));
 	}
 
 	getFullPath(img: Photo) {
@@ -71,7 +69,7 @@ class PhotoManagerComponent extends TsxComponentExtended<PhotoManagerArgs> imple
 
 	parseServerResponse(resp): DropzoneGalleryItem {
 		if (resp.fileData == null) {
-			throw 'break';
+			throw new Error('break');
 		}
 
 		const retVal: PhotoManagerUberModel = resp.fileData;
@@ -90,7 +88,7 @@ class PhotoManagerComponent extends TsxComponentExtended<PhotoManagerArgs> imple
 
 	render(h) {
 		if (this.photos == null) {
-			throw 'Photo collection cannot be null, always has to be at least empty array';
+			throw new Error('Photo collection cannot be null, always has to be at least empty array');
 		}
 
 		this.photos.forEach((p, i) => {
@@ -132,8 +130,6 @@ class PhotoManagerComponent extends TsxComponentExtended<PhotoManagerArgs> imple
 					changed={(items) => {
 						const itemsClone = [...(items || [])];
 
-						console.log(items);
-
 						this.photos.splice(0, this.photos.length);
 						for (const p of itemsClone) {
 							this.photos.push({

package/components/share/share-modal.tsx

@@ -30,7 +30,7 @@ class ShareModalComponent extends TsxComponent<ShareComponentBindingArgs> implem
 					// on success
 				})
 				.catch((error) => {
-					console.log('Error sharing:', error);
+					console.error('Error sharing:', error);
 				});
 
 			return;

package/components/share/share.tsx

@@ -23,7 +23,7 @@ export class ShareHelper {
 				// on success
 			})
 			.catch((error) => {
-				console.log('Error sharing:', error);
+				console.error('Error sharing:', error);
 			});
 	}
 }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "inviton-powerduck",
 	"type": "module",
-	"version": "0.0.137",
+	"version": "0.0.139",
 	"files": [
 		"app/",
 		"common/",
@@ -49,6 +49,7 @@
 		"jquery-minicolors": "2.1.10",
 		"jquery-resizable": "1.0.6",
 		"jspreadsheet-ce": "^4.15.0",
+		"jsuites": "5.11.0",
 		"leaflet": "^1.9.4",
 		"leaflet.markercluster": "^1.5.3",
 		"mark.js": "8.11.1",