inviton-powerduck 0.0.6 → 0.0.8

package/app/powerduck-initializer.ts

@@ -3,13 +3,25 @@ import { IPowerduckSystemResources } from './powerduck-system-resources';
 import jquery from "jquery";
 import moment from "moment";
 import select2 from "select2";
+import { Language } from '../common/enums/language';
+import { LanguageUtils } from '../common/utils/language-utils';
+
+export interface PoweduckInitFrameworkArgs  {
+    supportedLanguages?: Language[]
+}
 
 export default class PowerduckInitializer {
-    static initPlugins() {
+    static initFramework(args?: PoweduckInitFrameworkArgs) {
         window["jQuery"] = jquery;
         window["$"] = window["jQuery"];
         window["moment"] = moment;
         window["select2"] = select2();
+
+        if (args != null) {
+            if (args.supportedLanguages?.length as number > 0) {
+                LanguageUtils.supportedLanguages = args.supportedLanguages as Language[];
+            }
+        }
     }
 
     static initState<TResoures extends IPowerduckSystemResources>(resources: TResoures, args?: PowerduckStateInitArgs) {

package/app/powerduck-system-resources.ts

@@ -35,6 +35,7 @@ export interface IPowerduckSystemResources {
     itemsOutOfArray: string
     fileDownloadTitle: string
     imageCrop: string
+    uploadImage: string
     copyToClipboard: string
     copyToClipboardSuccess: string
     loginExpired: string

package/common/utils/language-utils.ts

@@ -5,6 +5,8 @@ import { arraySort } from "./array-sort";
 import { PortalUtils } from "./utils";
 
 export namespace LanguageUtils {
+    export let supportedLanguages = [Language.Slovak, Language.English];
+
     export interface LanguageListItem {
         text: string;
         value: string;
@@ -63,6 +65,12 @@ export namespace LanguageUtils {
             return newOption;
         };
 
+        for (let i = 0; i <= 7; i++) {
+            if (supportedLanguages.indexOf(i) > -1) {
+                retVal.push(getLanguage(i));
+            }
+        }
+
         try {
             retVal.sort(function (a, b) {
                 return a.text.localeCompare(b.text);
@@ -196,6 +204,6 @@ export namespace LanguageUtils {
     }
 
     export function negateString(str: string): string {
-        return PowerduckState.getResourceValue('negationBase')  + str.toLowerCase();
+        return PowerduckState.getResourceValue('negationBase') + str.toLowerCase();
     }
 }

package/common/utils/upload-image-helper.ts

@@ -1,5 +1,6 @@
-import { ImageResponse, OnUploadImageResponse } from "../../api/data-contracts/image";
-import { AppState } from "../../app/app-state";
+
+import PowerduckState from "../../app/powerduck-state";
+import { ImageResponse, OnUploadImageResponse } from "../../data/image";
 import { AppHttpProvider } from "../api-http";
 import { BrowserImageCompression } from "./broswer-image-compression";
 import StringUtils from "./string-utils";
@@ -21,7 +22,7 @@ export class UploadImageHelper {
             body: formData,
             headers: {
                 Authorization: "Bearer " + AppHttpProvider.bearerToken,
-                "Accept-Language": AppState.currentLanguageCode,
+                "Accept-Language": PowerduckState.getCurrentLanguageCode(),
             },
         });
 

package/components/accordion/accordion.tsx

@@ -61,7 +61,7 @@ class Accordion extends TsxComponent<AccordionArgs> implements AccordionArgs {
     }
 
     getSkin(): AccordionSkin {
-        return this.skin || AccordionSkin.Contrasting;
+        return (this.skin === AccordionSkin.Light ? AccordionSkin.Light : AccordionSkin.Contrasting);
     }
 
     getCssClassSkin() {
@@ -81,6 +81,8 @@ class Accordion extends TsxComponent<AccordionArgs> implements AccordionArgs {
                                 <a
                                     data-toggle="collapse"
                                     data-parent={"#" + componentId}
+                                    data-bs-toggle="collapse"
+                                    data-bs-parent={"#" + componentId}
                                     href={"#" + componentId + "-coll-" + i}
                                     aria-expanded="false"
                                     aria-controls={componentId + "-coll-" + i}

package/components/app/navigation-guard.ts

@@ -1,8 +1,8 @@
-import { IAppRoute } from "../../common/static-wrappers/interfaces/router-interface";
+
 
 export interface NavigationBeforeLeaveArgs {
-    to?: IAppRoute;
-    from?: IAppRoute;
+    to?: any; //IAppRoute
+    from?: any;
     instance: any;
     allowsAsync: boolean;
     next: (result?: boolean) => void;

package/components/button/button.tsx

@@ -5,6 +5,8 @@ import { Tooltip } from "bootstrap";
 import { isNullOrEmpty } from "../../common/utils/is-null-or-empty";
 
 interface ButtonArgs extends _ButtonArgsBase {
+    href?: string
+    hrefTarget?: '_blank' | '_self' | '_parent' | '_top'
     clicked: (e: any) => void;
 }
 
@@ -25,6 +27,8 @@ class Button extends TsxComponent<ButtonArgs> implements ButtonArgs {
     @Prop() disabled!: boolean;
     @Prop() fullWidth!: boolean;
     @Prop() pulsate!: boolean;
+    @Prop() href!: string
+    @Prop() hrefTarget!: '_blank' | '_self' | '_parent' | '_top'
 
     //When update, update Button & DropdownButton :/
     getCssClass(): string {
@@ -36,7 +40,8 @@ class Button extends TsxComponent<ButtonArgs> implements ButtonArgs {
             (this.iconButton ? " btn-icon" : "") +
             (this.cssClass != null ? " " + this.cssClass : "") +
             (this.fullWidth ? " full-width" : "") +
-            (this.pulsate ? " btn-pulsating" : "")
+            (this.pulsate ? " btn-pulsating" : "") + 
+            (this.iconOnRight ? ' btn-icon-on-right' : '')
         );
     }
 
@@ -48,7 +53,7 @@ class Button extends TsxComponent<ButtonArgs> implements ButtonArgs {
         }
     }
 
-    onButtonClicked(e) {
+    handleButtonClicked(e) {
         this.clicked(e);
 
         if (!isNullOrEmpty(this.tooltip)) {
@@ -65,35 +70,55 @@ class Button extends TsxComponent<ButtonArgs> implements ButtonArgs {
     }
 
     render(h) {
-        return (
-            <button
-                type="button"
-                class={this.getCssClass()}
-                disabled={this.disabled == true}
-                data-dismiss={this.dismissModal ? "modal" : null}
-                data-bs-dismiss={this.dismissModal ? "modal" : null}
-                title={this.tooltip}
-                onClick={(e) => {
-                    this.onButtonClicked(e);
-                }}
-            >
-                {this.icon && this.iconOnRight != true && (
-                    <span class="btn-label">
-                        <i class={this.icon}></i>
-                        {this.text && <span>&nbsp;&nbsp;</span>}
-                    </span>
-                )}
+        if (this.href == null) {
+            return (
+                <button type="button" class={this.getCssClass()} disabled={this.disabled == true} data-dismiss={this.dismissModal ? 'modal' : null} data-bs-dismiss={this.dismissModal ? 'modal' : null} title={this.tooltip} onClick={(e) => { this.handleButtonClicked(e) }}>
+                    {this.icon && this.iconOnRight != true &&
+                        <span class="btn-label">
+                            <i class={this.icon}></i>
+                            {this.text &&
+                                <span>&nbsp;&nbsp;</span>
+                            }
+                        </span>
+                    }
 
-                {this.text}
+                    {this.text}
 
-                {this.icon && this.iconOnRight == true && (
-                    <span class="btn-label">
-                        {this.text && <span>&nbsp;&nbsp;</span>}
-                        <i class={this.icon}></i>
-                    </span>
-                )}
-            </button>
-        );
+                    {this.icon && this.iconOnRight == true &&
+                        <span class="btn-label">
+                            {this.text &&
+                                <span>&nbsp;&nbsp;</span>
+                            }
+                            <i class={this.icon}></i>
+                        </span>
+                    }
+                </button>
+            )
+        } else {
+            return (
+                <a href={this.href} target={this.hrefTarget == null ? '_self' : this.hrefTarget} class={this.getCssClass()} disabled={this.disabled == true} data-dismiss={this.dismissModal ? 'modal' : null} data-bs-dismiss={this.dismissModal ? 'modal' : null} title={this.tooltip}>
+                    {this.icon && this.iconOnRight != true &&
+                        <span class="btn-label">
+                            <i class={this.icon}></i>
+                            {this.text &&
+                                <span>&nbsp;&nbsp;</span>
+                            }
+                        </span>
+                    }
+
+                    {this.text}
+
+                    {this.icon && this.iconOnRight == true &&
+                        <span class="btn-label">
+                            {this.text &&
+                                <span>&nbsp;&nbsp;</span>
+                            }
+                            <i class={this.icon}></i>
+                        </span>
+                    }
+                </a>
+            )
+        }
     }
 }
 

package/components/button/excel-upload-button.tsx

@@ -25,7 +25,7 @@ class ExcelUploadButton extends TsxComponent<ExcelUploadButtonArgs> implements E
     @Prop() pulsate!: boolean;
     @Prop() excelLoaded: (excelData: Array<Array<string>>) => void;
 
-    onFileLoaded(buffer) {
+    handleFileLoaded(buffer) {
         if (this.excelLoaded != null) {
             this.excelLoaded(ExcelReader.readFileAsJson(buffer));
         }
@@ -37,7 +37,7 @@ class ExcelUploadButton extends TsxComponent<ExcelUploadButtonArgs> implements E
                 onlyExcel={true}
                 asArrayBuffer={true}
                 changedClientside={(e) => {
-                    this.onFileLoaded(e);
+                    this.handleFileLoaded(e);
                 }}
                 cssClass={this.cssClass}
                 layout={this.layout}

package/components/button/ladda-button.tsx

@@ -23,7 +23,7 @@ class LaddaButton extends TsxComponent<LaddaButtonArgs> implements LaddaButtonAr
     @Prop() pulsate!: boolean;
     @Prop() clicked: (e: any) => Promise<any>;
 
-    onButtonClicked(e) {
+    handleButtonClicked(e) {
         var targetElem = e.target as HTMLElement;
         if (targetElem.nodeName.toLowerCase() != "button") {
             targetElem = $(targetElem).closest("button")[0];
@@ -43,7 +43,7 @@ class LaddaButton extends TsxComponent<LaddaButtonArgs> implements LaddaButtonAr
         return (
             <Button
                 clicked={(e) => {
-                    this.onButtonClicked(e);
+                    this.handleButtonClicked(e);
                 }}
                 cssClass={this.cssClass}
                 layout={this.layout}

package/components/button/text-button.tsx

@@ -10,6 +10,7 @@ interface TextButtonArgs {
     cssClass?: string;
     pulsate?: boolean;
     fontAdjust?: boolean;
+    iconOnRight?: boolean
 }
 
 @Component
@@ -19,6 +20,7 @@ class TextButton extends TsxComponent<TextButtonArgs> implements TextButtonArgs
     @Prop() text!: string;
     @Prop() tooltip!: string;
     @Prop() fontAdjust!: boolean;
+    @Prop() iconOnRight!: boolean;
 
     @Prop() clicked: (e: any) => void;
     @Prop() disabled!: boolean;
@@ -29,7 +31,7 @@ class TextButton extends TsxComponent<TextButtonArgs> implements TextButtonArgs
         return "text-button" + (this.cssClass != null ? " " + this.cssClass : "") + (this.pulsate ? " btn-pulsating" : "") + (this.fontAdjust == true ? " text-button-font" : "");
     }
 
-    onButtonClicked(e) {
+    handleButtonClicked(e) {
         this.clicked(e);
 
         if (!isNullOrEmpty(this.tooltip)) {
@@ -45,15 +47,16 @@ class TextButton extends TsxComponent<TextButtonArgs> implements TextButtonArgs
 
     render(h) {
         return (
-            <span
-                onClick={(e) => {
-                    this.onButtonClicked(e);
-                }}
-                class={this.getCssClass()}
-                title={this.tooltip}
-            >
-                <i class={this.icon}></i>
+            <span onClick={(e) => { this.handleButtonClicked(e) }} class={this.getCssClass()} title={this.tooltip}>
+                {!this.iconOnRight &&
+                    <i class={this.icon}></i>
+                }
+
                 <span>{this.text}</span>
+
+                {this.iconOnRight &&
+                    <i class={this.icon}></i>
+                }
             </span>
         );
     }

package/components/button/upload-button.tsx

@@ -108,7 +108,7 @@ class UploadButton extends TsxComponent<UploadButtonArgs> implements UploadButto
         }
     }
 
-    onClientButtonClicked() {
+    handleClientButtonClicked() {
         this.$refs.clientImageLoader["click"]();
     }
 
@@ -116,14 +116,14 @@ class UploadButton extends TsxComponent<UploadButtonArgs> implements UploadButto
         this.handleClientsideChange(e.target.files[0]);
     }
 
-    onDrop(e) {
+    handleDrop(e) {
         var file = e.dataTransfer.files[0];
         if (file != null) {
             this.handleClientsideChange(file);
         }
     }
 
-    onDummyEvent(e: Event) {
+    handleDummyEvent(e: Event) {
         e.preventDefault();
         e.stopPropagation();
     }
@@ -134,11 +134,11 @@ class UploadButton extends TsxComponent<UploadButtonArgs> implements UploadButto
             if (targetEl["_eventsBound"] == null) {
                 targetEl["_eventsBound"] = true;
                 ["drag", "dragstart", "dragend", "dragover", "dragenter", "dragleave", "drop"].forEach((evType) => {
-                    targetEl.addEventListener(evType, this.onDummyEvent);
+                    targetEl.addEventListener(evType, this.handleDummyEvent);
                 });
 
                 targetEl.addEventListener("drop", (e) => {
-                    this.onDrop(e);
+                    this.handleDrop(e);
                 });
             }
         });
@@ -156,7 +156,7 @@ class UploadButton extends TsxComponent<UploadButtonArgs> implements UploadButto
                 <Button
                     ref={"uploadButton"}
                     clicked={(e) => {
-                        this.onClientButtonClicked();
+                        this.handleClientButtonClicked();
                     }}
                     cssClass={this.cssClass}
                     layout={this.layout}

package/components/card/card-header-with-options.tsx

@@ -36,7 +36,7 @@ class CardHeaderWithOptions extends TsxComponent<CardHeaderWithOptionsArgs> impl
                 )}
 
                 <div class="dropdown card-header-options-dropdown">
-                    <button type="button" class="btn btn-default dropdown-toggle no-caret" data-toggle="dropdown">
+                    <button type="button" class="btn btn-default dropdown-toggle no-caret" data-toggle="dropdown" data-bs-toggle="dropdown">
                         <i class="icon icon-settings"></i>
                     </button>
                     <div class="dropdown-menu dropdown-menu-right">

package/components/card/card.tsx

@@ -1,6 +1,7 @@
-import { toNative, Prop } from "vue-facing-decorator";
-import TsxComponent, { Component } from "../../app/vuetsx";
-import PowerduckState from "../../app/powerduck-state";
+import { Prop, toNative } from 'vue-facing-decorator'
+
+import PowerduckState from '../../app/powerduck-state'
+import TsxComponent, { Component } from '../../app/vuetsx'
 
 export enum CardRole {
     Normal = 0,
@@ -8,24 +9,28 @@ export enum CardRole {
 }
 
 interface CardArgs {
-    role?: CardRole;
-    renderMode?: "default" | "inlined";
-    hasShadow?: boolean;
+	role?: CardRole
+	renderMode?: 'default' | 'inlined'
+	hasShadow?: boolean
+	cssClass?: string
+	clicked?: () => void
 }
 
 @Component
 class Card extends TsxComponent<CardArgs> implements CardArgs {
-    @Prop() role!: CardRole;
-    @Prop() hasShadow!: boolean;
-    @Prop() renderMode?: "default" | "inlined";
-
-    render(h) {
-        return (
-            <div class={"card" + (this.role == CardRole.RootCard ? " single-card root-element" : "") + this.getStickyCssClass() + this.getBoxShadowCardCss() + this.getRenderModeCardCss()}>
-                {this.$slots.default?.()}
-            </div>
-        );
-    }
+	@Prop() role!: CardRole
+	@Prop() hasShadow!: boolean
+	@Prop() renderMode?: 'default' | 'inlined'
+	@Prop() cssClass?: string
+	@Prop() clicked?: () => void
+
+	render() {
+		return (
+			<div onClick={this?.clicked} role={this.getRole()} class={`card${this.role == CardRole.RootCard ? ' single-card root-element' : ''}${this.getStickyCssClass()}${this.getBoxShadowCardCss()}${this.getRenderModeCardCss()} ${this.cssClass ?? ''}`}>
+				{this.$slots.default?.()}
+			</div>
+		)
+	}
 
     getStickyCssClass(): string {
         var cssClass = "";
@@ -55,8 +60,16 @@ class Card extends TsxComponent<CardArgs> implements CardArgs {
             return " card-render-inlined";
         }
 
-        return "";
-    }
+		return ''
+	}
+
+	getRole() {
+		if (this.clicked != null) {
+			return 'button'
+		}
+
+		return 'initial'
+	}
 }
 
-export default toNative(Card);
+export default toNative(Card);

package/components/card/image-card.tsx

@@ -1,8 +1,9 @@
-import { toNative, Prop } from "vue-facing-decorator"
-import TsxComponent, { Component } from "../../app/vuetsx"
-import CardBody from "./card-body"
-import Card from "./card"
-import PowerduckState from "../../app/powerduck-state"
+import { Prop, toNative } from 'vue-facing-decorator'
+
+import PowerduckState from '../../app/powerduck-state'
+import TsxComponent, { Component } from '../../app/vuetsx'
+import Card from './card'
+import CardBody from './card-body'
 
 export enum CardRole {
     Normal = 0,
@@ -10,39 +11,43 @@ export enum CardRole {
 }
 
 interface ImageCardArgs {
-    role?: CardRole
-    renderMode?: "default" | "inlined"
-    hasShadow?: boolean
-    imgUrl: string
-    imgAlt?: string
+	role?: CardRole
+	renderMode?: 'default' | 'inlined'
+	hasShadow?: boolean
+	imgUrl: string
+	imgAlt?: string
+	height?: string
+	clicked?: () => void
 }
 
 @Component
 class ImageCard extends TsxComponent<ImageCardArgs> implements ImageCardArgs {
-    @Prop() role!: CardRole
-    @Prop() hasShadow!: boolean
-    @Prop() renderMode?: "default" | "inlined"
-    @Prop() imgUrl: string
-    @Prop() imgAlt?: string
+	@Prop() role!: CardRole
+	@Prop() hasShadow!: boolean
+	@Prop() renderMode?: 'default' | 'inlined'
+	@Prop() imgUrl: string
+	@Prop() height?: string
+	@Prop() imgAlt?: string
+	@Prop() clicked?: () => void
 
-    render(h) {
-        return (
-            <Card renderMode={"inlined"}>
-                <div class="row g-0">
-                    <div class="col-md-4">
-                        <img
-                            src={this.imgUrl}
-                            class="img-fluid rounded-start h-100 object-fit-cover"
-                            alt={this.imgAlt ?? "Image"}
-                        />
-                    </div>
-                    <div class="col-md-8">
-                        <CardBody>{this.$slots.default?.()}</CardBody>
-                    </div>
-                </div>
-            </Card>
-        )
-    }
+	render() {
+		return (
+			<Card clicked={this?.clicked} renderMode="inlined">
+				<div class="row g-0">
+					<div class="col-md-3" style={`height: ${this.height ?? 'auto'}`}>
+						<img
+							src={this.imgUrl}
+							class="img-fluid rounded-start h-100 w-100 object-fit-cover"
+							alt={this.imgAlt ?? 'Image'}
+						/>
+					</div>
+					<div class="col-md-8">
+						<CardBody>{this.$slots.default?.()}</CardBody>
+					</div>
+				</div>
+			</Card>
+		)
+	}
 
     getStickyCssClass(): string {
         var cssClass = ""
@@ -76,4 +81,4 @@ class ImageCard extends TsxComponent<ImageCardArgs> implements ImageCardArgs {
     }
 }
 
-export default toNative(ImageCard)
+export default toNative(ImageCard)