inviton-powerduck 0.0.136 → 0.0.138

package/components/import/import-mapper.tsx

@@ -1,231 +1,231 @@
-import type { DropdownOptionGroup } from '../dropdown';
-import { Component, Prop } from 'vue-facing-decorator';
-import TsxComponent from '../../app/vuetsx';
-import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
-import { latinize } from '../../common/utils/latinize-string';
-import BootstrapToggle from '../bootstrap-toggle';
-import DropdownList from '../dropdown';
-import HtmlLiteral from '../html-literal/html-literal';
-import TextBox, { TextBoxTextType } from '../input/textbox';
-import './css/import-mapper.css';
-
-export interface ImportMapperMapping {
-	columnIndex: number;
-	mappingValue: string;
-}
-
-interface ImportMapperArgs {
-	cssClass?: string;
-	subtitleHtml: string;
-	mappingOptions: DropdownOptionGroup[];
-	importData: Array<Array<string>>;
-	firstRowIsHeaderLabel?: string;
-	defaultMapping?: ImportMapperMapping[];
-}
-
-@Component
-export default class ImportMapper extends TsxComponent<ImportMapperArgs> implements ImportMapperArgs {
-	@Prop() cssClass!: string;
-	@Prop() subtitleHtml!: string;
-	@Prop() mappingOptions!: DropdownOptionGroup[];
-	@Prop() importData!: Array<Array<string>>;
-	@Prop() defaultMapping!: ImportMapperMapping[];
-	@Prop() firstRowIsHeaderLabel!: string;
-	private selectionMap: any = {};
-	private firstRowHeader: boolean = false;
-	private wasMatched = [];
-
-	public getData(): any[] {
-		const retVal = [];
-
-		this.importData.forEach((row, i) => {
-			if (!this.firstRowHeader || i > 0) {
-				const newItem = {};
-				for (const key in this.selectionMap) {
-					const keyInt = Number(key);
-					let objVal = row[keyInt];
-
-					if (objVal != null) {
-						if (typeof objVal === 'string') {
-							objVal = objVal.trim();
-						}
-					}
-
-					newItem[this.selectionMap[key]] = objVal;
-				}
-
-				retVal.push(newItem);
-			}
-		});
-
-		return retVal;
-	}
-
-	private getDisplayValue(obj: any): string {
-		if (obj == null) {
-			return null;
-		} else if (obj._dte) {
-			return obj.toDisplayString(true);
-		}
-
-		return obj;
-	}
-
-	private getLargestRow(): string[] {
-		if (isNullOrEmpty(this.importData)) {
-			return [];
-		}
-
-		let biggestLength = 0;
-		this.importData.forEach((rowArr) => {
-			if (rowArr != null && rowArr.length > biggestLength) {
-				biggestLength = rowArr.length;
-			}
-		});
-
-		const retVal = [];
-		while (true) {
-			if (retVal.length < biggestLength) {
-				retVal.push('x');
-			} else {
-				break;
-			}
-		}
-
-		return retVal;
-	}
-
-	private getDropdownSelectedItem(index: number) {
-		const selection = this.selectionMap[index];
-
-		if (selection == null) {
-			const match = this.getHeaderItem(index);
-
-			if (!isNullOrEmpty(match) && !this.wasMatched.includes(index)) {
-				this.wasMatched.push(index);
-				this.setDropdownSelectedItem(index, match.id);
-				return match.id;
-			} else {
-				return null;
-			}
-		}
-
-		if (selection.includes('ncf:')) {
-			return 'custom';
-		}
-
-		return this.selectionMap[index];
-	}
-
-	private setDropdownSelectedItem(index: number, value: any) {
-		if (value == null || value.id == null) {
-			if (typeof value === 'string') {
-				// this.$set(this.selectionMap, index.toString(), value);
-				this.selectionMap[index.toString()] = value;
-			} else {
-				// this.$set(this.selectionMap, index.toString(), null);
-				this.selectionMap[index.toString()] = null;
-			}
-		} else {
-			// this.$set(this.selectionMap, index.toString(), value.id);
-			this.selectionMap[index.toString()] = value.id;
-		}
-	}
-
-	private getPreviewRows(): Array<string[]> {
-		if (isNullOrEmpty(this.importData)) {
-			return [];
-		}
-
-		let start = 0;
-		let end = 10;
-		if (this.firstRowHeader) {
-			start += 1;
-			end += 1;
-		}
-
-		return this.importData.filter((u, i) => i >= start && i < end);
-	}
-
-	private getHeaderItem(index: number) {
-		const opts = [];
-
-		this.mappingOptions.forEach((mapOpts) => {
-			mapOpts.children.forEach((s) => {
-				opts.push(s);
-			});
-		});
-
-		if (this.importData[0][index] != null) {
-			const indexItem = this.importData[0][index].toString();
-			const headers = opts.filter(p => latinize(p.text).toLowerCase() == latinize(indexItem).toLowerCase() || latinize(p.id).toLowerCase() == latinize(indexItem).toLowerCase());
-			if (headers != null && headers.length == 1) {
-				return headers[0];
-			}
-		} else {
-			return null;
-		}
-	}
-
-	private prefillNewCustomFieldName(index: number) {
-		let retVal = '';
-		if (this.selectionMap[index].includes('ncf:')) {
-			retVal = this.selectionMap[index].substring(4);
-		} else {
-			retVal = this.importData[0][index];
-		}
-
-		this.setDropdownSelectedItem(index, `ncf:${retVal}`);
-		return retVal;
-	}
-
-	private render(h) {
-		const largestRow = this.getLargestRow();
-
-		return (
-			<div class="import-mapper-root">
-				<p class="import-mapper-subtitle">
-					<HtmlLiteral innerHTML={this.subtitleHtml} />
-				</p>
-
-				{this.importData
-				&& (
-					<div class="import-mapper-table-wrap">
-						<table class="import-mapper-table">
-							<thead>
-								<tr>
-									{largestRow.map((col, i) => {
-										return (
-											<td>
-												<DropdownList wrap={false} label={null} placeholder="Select value" options={this.mappingOptions} selected={this.getDropdownSelectedItem(i)} changed={(v) => { this.setDropdownSelectedItem(i, v); }} />
-
-												{this.selectionMap[i] != null && (this.selectionMap[i] == 'custom' || this.selectionMap[i].includes('ncf:'))
-												&& <TextBox wrap={false} label="" cssClass="hidden" value={this.prefillNewCustomFieldName(i)} changed={(v) => { this.setDropdownSelectedItem(i, `ncf:${v}`); }} textType={TextBoxTextType.Text} />}
-											</td>
-										);
-									})}
-								</tr>
-							</thead>
-							<tbody>
-								{this.getPreviewRows().map(row => (
-									<tr>
-										{largestRow.map((col, i) => (
-											<td>
-												{this.getDisplayValue(row[i])}
-											</td>
-										))}
-									</tr>
-								))}
-							</tbody>
-						</table>
-					</div>
-				)}
-
-				<div class="import-mapper-settings">
-					{this.$slots.default}
-					<BootstrapToggle label={this.firstRowIsHeaderLabel ? this.firstRowIsHeaderLabel : 'First row is header'} value={this.firstRowHeader} changed={(e) => { this.firstRowHeader = e; }} />
-				</div>
-			</div>
-		);
-	}
-}
+import type { DropdownOptionGroup } from '../dropdown';
+import { Component, Prop } from 'vue-facing-decorator';
+import TsxComponent from '../../app/vuetsx';
+import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
+import { latinize } from '../../common/utils/latinize-string';
+import BootstrapToggle from '../bootstrap-toggle';
+import DropdownList from '../dropdown';
+import HtmlLiteral from '../html-literal/html-literal';
+import TextBox, { TextBoxTextType } from '../input/textbox';
+import './css/import-mapper.css';
+
+export interface ImportMapperMapping {
+	columnIndex: number;
+	mappingValue: string;
+}
+
+interface ImportMapperArgs {
+	cssClass?: string;
+	subtitleHtml: string;
+	mappingOptions: DropdownOptionGroup[];
+	importData: Array<Array<string>>;
+	firstRowIsHeaderLabel?: string;
+	defaultMapping?: ImportMapperMapping[];
+}
+
+@Component
+export default class ImportMapper extends TsxComponent<ImportMapperArgs> implements ImportMapperArgs {
+	@Prop() cssClass!: string;
+	@Prop() subtitleHtml!: string;
+	@Prop() mappingOptions!: DropdownOptionGroup[];
+	@Prop() importData!: Array<Array<string>>;
+	@Prop() defaultMapping!: ImportMapperMapping[];
+	@Prop() firstRowIsHeaderLabel!: string;
+	private selectionMap: any = {};
+	private firstRowHeader: boolean = false;
+	private wasMatched = [];
+
+	public getData(): any[] {
+		const retVal = [];
+
+		this.importData.forEach((row, i) => {
+			if (!this.firstRowHeader || i > 0) {
+				const newItem = {};
+				for (const key in this.selectionMap) {
+					const keyInt = Number(key);
+					let objVal = row[keyInt];
+
+					if (objVal != null) {
+						if (typeof objVal === 'string') {
+							objVal = objVal.trim();
+						}
+					}
+
+					newItem[this.selectionMap[key]] = objVal;
+				}
+
+				retVal.push(newItem);
+			}
+		});
+
+		return retVal;
+	}
+
+	private getDisplayValue(obj: any): string {
+		if (obj == null) {
+			return null;
+		} else if (obj._dte) {
+			return obj.toDisplayString(true);
+		}
+
+		return obj;
+	}
+
+	private getLargestRow(): string[] {
+		if (isNullOrEmpty(this.importData)) {
+			return [];
+		}
+
+		let biggestLength = 0;
+		this.importData.forEach((rowArr) => {
+			if (rowArr != null && rowArr.length > biggestLength) {
+				biggestLength = rowArr.length;
+			}
+		});
+
+		const retVal = [];
+		while (true) {
+			if (retVal.length < biggestLength) {
+				retVal.push('x');
+			} else {
+				break;
+			}
+		}
+
+		return retVal;
+	}
+
+	private getDropdownSelectedItem(index: number) {
+		const selection = this.selectionMap[index];
+
+		if (selection == null) {
+			const match = this.getHeaderItem(index);
+
+			if (!isNullOrEmpty(match) && !this.wasMatched.includes(index)) {
+				this.wasMatched.push(index);
+				this.setDropdownSelectedItem(index, match.id);
+				return match.id;
+			} else {
+				return null;
+			}
+		}
+
+		if (selection.includes('ncf:')) {
+			return 'custom';
+		}
+
+		return this.selectionMap[index];
+	}
+
+	private setDropdownSelectedItem(index: number, value: any) {
+		if (value == null || value.id == null) {
+			if (typeof value === 'string') {
+				// this.$set(this.selectionMap, index.toString(), value);
+				this.selectionMap[index.toString()] = value;
+			} else {
+				// this.$set(this.selectionMap, index.toString(), null);
+				this.selectionMap[index.toString()] = null;
+			}
+		} else {
+			// this.$set(this.selectionMap, index.toString(), value.id);
+			this.selectionMap[index.toString()] = value.id;
+		}
+	}
+
+	private getPreviewRows(): Array<string[]> {
+		if (isNullOrEmpty(this.importData)) {
+			return [];
+		}
+
+		let start = 0;
+		let end = 10;
+		if (this.firstRowHeader) {
+			start += 1;
+			end += 1;
+		}
+
+		return this.importData.filter((u, i) => i >= start && i < end);
+	}
+
+	private getHeaderItem(index: number) {
+		const opts = [];
+
+		this.mappingOptions.forEach((mapOpts) => {
+			mapOpts.children.forEach((s) => {
+				opts.push(s);
+			});
+		});
+
+		if (this.importData[0][index] != null) {
+			const indexItem = this.importData[0][index].toString();
+			const headers = opts.filter(p => latinize(p.text).toLowerCase() == latinize(indexItem).toLowerCase() || latinize(p.id).toLowerCase() == latinize(indexItem).toLowerCase());
+			if (headers != null && headers.length == 1) {
+				return headers[0];
+			}
+		} else {
+			return null;
+		}
+	}
+
+	private prefillNewCustomFieldName(index: number) {
+		let retVal = '';
+		if (this.selectionMap[index].includes('ncf:')) {
+			retVal = this.selectionMap[index].substring(4);
+		} else {
+			retVal = this.importData[0][index];
+		}
+
+		this.setDropdownSelectedItem(index, `ncf:${retVal}`);
+		return retVal;
+	}
+
+	private render(h) {
+		const largestRow = this.getLargestRow();
+
+		return (
+			<div class="import-mapper-root">
+				<p class="import-mapper-subtitle">
+					<HtmlLiteral innerHTML={this.subtitleHtml} />
+				</p>
+
+				{this.importData
+				&& (
+					<div class="import-mapper-table-wrap">
+						<table class="import-mapper-table">
+							<thead>
+								<tr>
+									{largestRow.map((col, i) => {
+										return (
+											<td>
+												<DropdownList wrap={false} label={null} placeholder="Select value" options={this.mappingOptions} selected={this.getDropdownSelectedItem(i)} changed={(v) => { this.setDropdownSelectedItem(i, v); }} />
+
+												{this.selectionMap[i] != null && (this.selectionMap[i] == 'custom' || this.selectionMap[i].includes('ncf:'))
+												&& <TextBox wrap={false} label="" cssClass="hidden" value={this.prefillNewCustomFieldName(i)} changed={(v) => { this.setDropdownSelectedItem(i, `ncf:${v}`); }} textType={TextBoxTextType.Text} />}
+											</td>
+										);
+									})}
+								</tr>
+							</thead>
+							<tbody>
+								{this.getPreviewRows().map(row => (
+									<tr>
+										{largestRow.map((col, i) => (
+											<td>
+												{this.getDisplayValue(row[i])}
+											</td>
+										))}
+									</tr>
+								))}
+							</tbody>
+						</table>
+					</div>
+				)}
+
+				<div class="import-mapper-settings">
+					{this.$slots.default}
+					<BootstrapToggle label={this.firstRowIsHeaderLabel ? this.firstRowIsHeaderLabel : 'First row is header'} value={this.firstRowHeader} changed={(e) => { this.firstRowHeader = e; }} />
+				</div>
+			</div>
+		);
+	}
+}

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>