inviton-powerduck 0.0.7 → 0.0.9

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/app/vuetsx.ts

@@ -2,6 +2,7 @@
 import { Prop, Vue, Component as OriginalComponent } from "vue-facing-decorator";
 import { ComponentSetupFunction, Cons } from "vue-facing-decorator/dist/component";
 import { ValidationRuleset, ValidationState } from "../common/static-wrappers/interfaces/validation-interface";
+import { slotUnwrapper } from "../common/slot-unwrapper";
 
 @Component
 export default class TsxComponent<P> extends Vue {
@@ -31,16 +32,20 @@ export default class TsxComponent<P> extends Vue {
         }
     }
 
-    protected getSlotProperties<T>(type: string): Array<T> {
-        var retVal: Array<T> = [];
-        for (const node of (this.$slots.default?.() || [])) {
-            const fwId = (node as any).type?.__vfdConstructor?.$fwName;
-            if (fwId == type) {
-                retVal.push(node.props as any)
-            }
-        }
-
+	protected getSlotProperties<T>(type: string): Array<T> {
+		const slots = slotUnwrapper(this.$slots.default?.());
+		const retVal: Array<T> = [] = slots?.filter(node => (node as any)?.type?.__vfdConstructor?.$fwName == type).map(node => node.props as any);
         return retVal;
+
+        // var retVal: Array<T> = [];
+        // for (const node of (this.$slots.default?.() || [])) {
+        //     const fwId = (node as any).type?.__vfdConstructor?.$fwName;
+        //     if (fwId == type) {
+        //         retVal.push(node.props as any)
+        //     }
+        // }
+
+        // return retVal;
     }
 }
 

package/common/base-component.tsx

@@ -179,7 +179,7 @@ export abstract class PowerduckViewModelBase extends Vue {
     /**
      * Validates current viewModel state based on given valdiation ruleset
      */
-    validate(showErrorMessage?: boolean, silent?: boolean): boolean {
+    async validate(showErrorMessage?: boolean, silent?: boolean): Promise<boolean> {
         if (localStorage.getItem("disableValidation") == "1") {
             return true;
         }
@@ -188,7 +188,7 @@ export abstract class PowerduckViewModelBase extends Vue {
             throw "Validation rules not specified, has to be specified in @Component declaration!";
         }
 
-        var isInvalid = this.v$.$error;
+        var isInvalid = !(await this.v$.$validate());
         if (isInvalid) {
             if (showErrorMessage != false) {
                 this.showValidationErrorMessage();

package/common/history-extended.ts

@@ -0,0 +1,172 @@
+export interface HistoryChangedData {
+    from: any
+    to: any
+    history: any[]
+    direction: 'back' | 'forward' | 'reload'
+    handled?: boolean
+}
+
+export interface HistoryChangedEvent extends PopStateEvent {
+    detail: HistoryChangedData
+}
+
+interface HistoryOnSteroids extends History {
+    __historyExtendedInitialized: boolean
+    // stateIndex: number
+    // states: string[][]
+    // silentPop: boolean
+
+    silentBack: () => void
+    clearForward: () => void
+    nextBackWillNavigateAway: () => boolean
+}
+
+
+const history: HistoryOnSteroids = window.history as any;
+if (!history.__historyExtendedInitialized) {
+    history.__historyExtendedInitialized = true;
+
+    (function () {
+        const originalPushState = history.pushState;
+        const originalReplaceState = history.replaceState;
+
+        let currentIndex = 0;
+        let previousState = null;
+        const stateHistory = []; // Array to store the timeline of states
+        let silentMode = false; // Flag to suppress events
+
+        // Function to log state into history
+        function logState(state, index) {
+            stateHistory[index] = { ...state, __heindex: index };
+        }
+
+        // Function to dispatch the 'history-changed' event
+        function dispatchHistoryChangedEvent(direction, fromState, toState) {
+            const event = new CustomEvent("history-changed", {
+                detail: {
+                    direction,
+                    from: fromState,
+                    to: toState,
+                    history: stateHistory.slice(0, currentIndex + 1),
+                },
+            });
+
+            if (silentMode) {
+                return;
+            }
+
+            window.dispatchEvent(event);
+        }
+
+        // Override pushState
+        history.pushState = function (state, title, url) {
+            previousState = { ...history.state, __heindex: currentIndex };
+            currentIndex++;
+            const enhancedState = { ...state, __heindex: currentIndex };
+
+            logState(enhancedState, currentIndex); // Log new state to history
+            originalPushState.call(history, enhancedState, title, url);
+            //dispatchHistoryChangedEvent("forward", previousState, enhancedState);
+        };
+
+        // Override replaceState
+        history.replaceState = function (state, title, url) {
+            const enhancedState = { ...state, __heindex: currentIndex };
+            logState(enhancedState, currentIndex); // Replace state in history
+            originalReplaceState.call(history, enhancedState, title, url);
+        };
+
+        // Popstate listener to detect navigation direction
+        window.addEventListener("popstate", (event) => {
+            if (silentMode) return; // Suppress event if in silent mode
+
+            const previousIndex = currentIndex;
+            previousState = stateHistory[previousIndex] || null;
+
+            currentIndex = event.state ? event.state.__heindex || 0 : 0;
+            const toState = stateHistory[currentIndex] || event.state || {};
+
+            if (currentIndex > previousIndex) {
+                dispatchHistoryChangedEvent("forward", previousState, toState);
+            } else if (currentIndex < previousIndex) {
+                dispatchHistoryChangedEvent("back", previousState, toState);
+            } else {
+                dispatchHistoryChangedEvent("reload", previousState, toState);
+            }
+        });
+
+        // Preserve current state on load and add index
+        window.addEventListener("load", () => {
+            const initialState = history.state || {};
+            if (!initialState.__heindex) {
+                history.replaceState({ ...initialState, __heindex: currentIndex }, "");
+            } else {
+                currentIndex = initialState.__heindex;
+            }
+            logState(history.state, currentIndex);
+            previousState = history.state;
+        });
+
+        // Add silent back navigation method
+        history.silentBack = function () {
+            silentMode = true; // Suppress events temporarily
+            history.back();
+            setTimeout(() => {
+                silentMode = false; // Restore normal behavior
+            }, 0);
+        };
+
+        // Add clear forward navigation method
+        history.clearForward = function () {
+            const currentState = { ...history.state };
+            silentMode = true; // Suppress events temporarily
+            originalReplaceState.call(history, currentState, "", location.href);
+            stateHistory.splice(currentIndex + 1); // Remove all forward history
+            setTimeout(() => {
+                silentMode = false; // Restore normal behavior
+            }, 0);
+        };
+
+        history.nextBackWillNavigateAway = function () {
+            return currentIndex < 1;
+        }
+    })();
+}
+
+export default class HistoryExtended {
+    static addPopstateListener(handler: (ev: HistoryChangedEvent) => any) {
+        addEventListener("history-changed" as any, handler);
+    }
+
+    static removePopstateListener(handler: (ev: HistoryChangedEvent) => any) {
+        removeEventListener("history-changed" as any, handler);
+    }
+
+    static nextBackWillNavigateAway(): boolean {
+        return history.nextBackWillNavigateAway();
+    }
+
+    static back(args?: { silent?: boolean }): void {
+        if (args?.silent == true) {
+            history.silentBack();
+        } else {
+            history.back();
+        }
+    }
+
+    static forward(): void {
+        history.forward();
+    }
+
+    static go(delta?: number): void {
+        history.go(delta);
+    }
+
+    static pushState(data: any, unused: string, url?: string | URL | null): void {
+        history.pushState(data, unused, url);
+    }
+
+    static replaceState(data: any, unused: string, url?: string | URL | null): void {
+        history.replaceState(data, unused, url);
+    }
+}

package/common/history-handler.ts

@@ -1,155 +1,111 @@
-import { arrayExtend } from "./utils/array-extend"
-import { isNullOrEmpty } from "./utils/is-null-or-empty"
-import { PortalUtils } from "./utils/utils"
+import { ModalUtils } from "./../components/modal/modal-utils";
+import HistoryExtended from "./history-extended"
+
 
 export const initHistory = () => {
-    import("jquery").then((jq) => {
-        const $ = jq.default
-        let openArr = arrayExtend<string>([]);
-        let skipModalHideCount = 0
-        let skipHistoryCount = 0
-
-        let initializer = {
-            intializeModalListener() {
-                $(document).on("show.bs.modal", ".modal", function (this: any) {
-                    if ($(this).attr("data-preventhistory") == "true") {
-                        return
-                    }
+    const randomString = (length: number): string => {
+        var result = "";
+        var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+        for (var i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
+        return result;
+    }
+
+    const initializer = {
+        intializeModalListener() {
+            if ((window as any).__historyPowerduckInitialized == true) {
+                return;
+            }
 
-                    let handleUUID = PortalUtils.randomString(16)
-                    $(this).attr("data-hist-uuid", handleUUID)
-                    openArr.push(handleUUID)
-
-                    window.history.pushState(
-                        {
-                            modalId: handleUUID,
-                        },
-                        null,
-                        null,
-                    )
-                })
-
-                $(document).on("fdd-show", function (this: any, e: any, context: JQuery) {
-                    let handleUUID = PortalUtils.randomString(16)
-                    $(context).attr("data-hist-uuid", handleUUID)
-                    openArr.push(handleUUID)
-
-                    window.history.pushState(
-                        {
-                            fddId: handleUUID,
-                        },
-                        null,
-                        null,
-                    )
-                })
-
-                $(document).on("hide.bs.modal", ".modal", function (this: any) {
-                    if ($(this).attr("data-preventhistory") == "true") {
-                        return
-                    }
+            (window as any).__historyPowerduckInitialized = true;
+            $(document).on("show.bs.modal", ".modal", function (this: any) {
+                const elem = this as HTMLElement;
+                if (elem.getAttribute('data-preventhistory') == 'true') {
+                    return;
+                }
 
-                    let handleUUID = $(this).attr("data-hist-uuid")
-                    openArr.remove(handleUUID)
+                const modalId = randomString(16);
+                elem.setAttribute('data-history-uuid', modalId);
+                HistoryExtended.pushState({ modalId }, null, null);
+            });
 
-                    if (skipModalHideCount > 0) {
-                        skipModalHideCount -= 1
-                    } else {
-                        skipHistoryCount += 1
-                        window.history.back()
-                    }
-                })
+            $(document).on("fdd-show", function (this: any, e: any, context: JQuery) {
+                const elem = this as HTMLElement;
+                if (elem.getAttribute('data-preventhistory') == 'true') {
+                    return;
+                }
 
-                $(document).on("fdd-hide", function (this: any, e: any, context: JQuery) {
-                    let handleUUID = $(this).attr("data-hist-uuid")
-                    openArr.remove(handleUUID)
+                const fddId = randomString(16);
+                elem.setAttribute('data-history-uuid', fddId);
+                HistoryExtended.pushState({ fddId }, null, null);
+            });
 
-                    if (skipModalHideCount > 0) {
-                        skipModalHideCount -= 1
-                    } else {
-                        skipHistoryCount += 1
-                        window.history.back()
-                    }
-                })
-
-                window.addEventListener("popstate", function (e) {
-                    let state = e.state
-                    if (state != null && !isNullOrEmpty(state.modalId)) {
-                        let modalElem = $("[data-hist-uuid='" + state.modalId + "']")
-                        if (modalElem.length > 0 && !modalElem.hasClass("show")) {
-                            modalElem.show()
-                            return
+            $(document).on("hide.bs.modal", ".modal", function (this: any, e) {
+                const elem = this as HTMLElement;
+                if (elem.getAttribute('data-preventhistory') == 'true') {
+                    return;
+                }
+
+                const backButtonTriggered = elem.getAttribute('data-history-bbtrigger');
+                elem.removeAttribute('data-history-bbtrigger');
+
+                if (backButtonTriggered != 'true') {
+                    const isHandled = (e as any)._isNavHandled;
+                    if (isHandled != true) {
+                        (e as any)._isNavHandled = true;
+
+                        if (!HistoryExtended.nextBackWillNavigateAway()) {
+                            HistoryExtended.back({ silent: true });
                         }
                     }
+                }
+            });
+
+            $(document).on("fdd-hide", function (this: any, e: any, context: JQuery) {
+                const elem = this as HTMLElement;
+                if (elem.getAttribute('data-preventhistory') == 'true') {
+                    return;
+                }
 
-                    if (state != null && !isNullOrEmpty(state.fddId)) {
-                        return
+                const backButtonTriggered = elem.getAttribute('data-history-bbtrigger');
+                elem.removeAttribute('data-history-bbtrigger');
+
+                if (backButtonTriggered != 'true') {
+                    const isHandled = (e as any)._isNavHandled;
+                    if (isHandled != true) {
+                        (e as any)._isNavHandled = true;
+                        HistoryExtended.back({ silent: true });
                     }
+                }
+            });
 
-                    if (skipHistoryCount > 0) {
-                        skipHistoryCount -= 1
-                        //history.replaceState({ "obsolete": true }, "");
-                        //setTimeout(() => {
-                        //history.pushState(null, document.title, location.href);
-                        //}, 20);
-                    } else {
-                        let handleUUID = openArr.pop()
-                        if (!isNullOrEmpty(handleUUID)) {
-                            skipModalHideCount += 1
-
-                            let context = $("[data-hist-uuid='" + handleUUID + "']")
-                            if (context.hasClass("modal")) {
-                                context.hide()
-                            } else if (context.attr("id") == "filterableSelectDropDown") {
-                                $("#btn_fdd_FddCancel").click()
-                            }
-                        }
+            HistoryExtended.addPopstateListener((e) => {
+                const { detail } = e;
+                if (detail == null) {
+                    return;
+                }
 
-                        //history.replaceState({ "obsolete": true }, "");
-                        //setTimeout(() => {
-                        //    history.pushState(null, document.title, location.href);
-                        //}, 20);
+                if (detail.direction == 'back') {
+                    const stateFrom = detail.from;
+                    if (stateFrom == null) {
+                        return;
+                    }
+
+                    const modalId = stateFrom.modalId;
+                    if (modalId != null && modalId.length > 0) {
+                        const $modal = $("[data-history-uuid='" + modalId + "']");
+                        $modal.attr('data-history-bbtrigger', 'true');
+                        ModalUtils.hideModal($modal);
                     }
-                })
-            },
-        }
 
-        //Modal stacking handler
-        $(document).on("show.bs.modal", ".modal", function (this: any) {
-            var $this = $(this)
-            var highestZ = 0
-
-            $(".modal:visible").each(function (this: HTMLElement) {
-                let zi = this.style.zIndex
-                if (zi != null && zi.length > 0) {
-                    let numZi = Number(zi)
-                    if (numZi > highestZ && numZi > 1049) {
-                        highestZ = numZi
+                    const fddId = stateFrom.fddId;
+                    if (fddId != null && fddId.length > 0) {
+                        $("#btn_fdd_FddCancel").trigger('click');
                     }
                 }
-            })
 
-            if (highestZ < 1049) {
-                highestZ = 1049
-            }
+            });
+        }
+    }
 
-            var zIndex = highestZ + 2
-            $this.css("z-index", zIndex)
-            setTimeout(function () {
-                $(".modal-backdrop")
-                    .not(".modal-stack")
-                    .css("z-index", zIndex - 1)
-                    .addClass("modal-stack")
-            }, 0)
-        })
-
-        $(document).on("hidden.bs.modal", ".modal", function (this: any) {
-            $(this).css("z-index", "")
-        })
-
-        //if (PortalUtils.treatAsMobileDevice()) {
-        initializer.intializeModalListener()
-        //}
-
-        // window['HistoryHandlerExt'] = historyHandler;
-    })
+    initializer.intializeModalListener();
 }

package/common/slot-unwrapper.ts

@@ -0,0 +1,17 @@
+import { Fragment, VNode } from "vue";
+
+export function slotUnwrapper(slots: VNode[]): VNode[] {
+	const extractNodes = (nodes: VNode | VNode[]): VNode[] => {
+		if (!nodes) {
+			return [];
+		}
+
+		if (Array.isArray(nodes)) {
+			return nodes.flatMap(node => (node.type === Fragment ? extractNodes(node.children as VNode[]) : node));
+		}
+
+		return [nodes];
+	};
+
+	return slots.flatMap(node => (node.type === Fragment ? extractNodes(node.children as VNode[]) : node));
+}

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

@@ -1,27 +1,31 @@
-import imageCompression from "browser-image-compression";
+import imageCompression, { Options } from "browser-image-compression";
+
+interface BrowserImageFile extends File {
+    isCompressed?: boolean
+}
 
 export class BrowserImageCompression {
-    static async compress(file: File): Promise<File> {
-        const options = {
-            maxSizeMB: 0.5,
-            useWebWorker: true,
-        };
+    static async compress(file: BrowserImageFile, args?: Options): Promise<BrowserImageFile> {
+        if (file.isCompressed) {
+            return file;
+        }
 
-        // console.log('Before:');
-        // console.log('compressedFile instanceof Blob', file instanceof Blob);
-        // console.log(`compressedFile size ${file.size / 1024 / 1024} MB`);
+        let options: Options = args || {};
+        options.useWebWorker = true;
 
-        let compressedImage: File = null;
+        if (options.maxSizeMB == null) {
+            options.maxSizeMB = 0.5;
+        }
+
+        let compressedImage: BrowserImageFile = null;
 
         try {
             compressedImage = await imageCompression(file, options);
+            compressedImage.isCompressed = true;
+            return compressedImage;
         } catch (error) {
             console.log(error);
+            return file;
         }
-
-        // console.log('After:');
-        // console.log('compressedFile instanceof Blob', file instanceof Blob);
-        // console.log(`compressedFile size ${file.size / 1024 / 1024} MB`);
-        return compressedImage;
     }
 }

package/common/utils/format-string.ts

@@ -1,5 +1,4 @@
-export function formatString(str: string) {
-    var args = arguments;
+export function formatString(str: string, ...args: any[]): string {
     return str.replace(/\{\{|\}\}|\{(\d+)\}/g, function (m, n) {
         if (m == "{{") {
             return "{";
@@ -7,6 +6,8 @@ export function formatString(str: string) {
         if (m == "}}") {
             return "}";
         }
-        return args[parseInt(n) + 1];
+
+		const index = parseInt(n);
+        return args[index] ?? '';
     });
-};
+};

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

@@ -6,9 +6,11 @@ import { BrowserImageCompression } from "./broswer-image-compression";
 import StringUtils from "./string-utils";
 
 export class UploadImageHelper {
-    static async postImage(file: File, attractionType: string): Promise<ImageResponse> {
-        if (file.type != "image/svg+xml") {
-            file = await BrowserImageCompression.compress(file);
+    static async postImage(file: File, attractionType: string, disableCompression: boolean = false, compressionMaxMb: number = 0.5): Promise<ImageResponse> {
+        if (!(disableCompression || file.type == "image/svg+xml")) {
+            file = await BrowserImageCompression.compress(file, {
+                maxSizeMB: compressionMaxMb
+            });
         }
 
         let formData: FormData = new FormData();

package/common/validation.ts

@@ -28,9 +28,10 @@ import PowerduckState from "../app/powerduck-state";
 import { IValidationSet, ValidationRuleset, ValidationState } from "./static-wrappers/interfaces/validation-interface";
 
 function getFirstUnsattisfiedValidatorName(valProp: Validation): string {
-    for (var validatorName in valProp.$params) {
-        if (valProp[validatorName] === false) {
-            return validatorName;
+    const errors = valProp?.$errors || [];
+    for (var fieldError of errors) {
+        if (fieldError != null) {
+            return fieldError.$validator;
         }
     }
 
@@ -69,10 +70,6 @@ function getErrorMessage(valProp: Validation, invalidValidatorName: string): str
         errMsg = PowerduckState.getResourceValue('validationErrorGeneric');
     }
 
-    if (valProp.$params.customErrMsg) {
-        errMsg = valProp.$params.customErrMsg.errMsg;
-    }
-
     return errMsg;
 }
 
@@ -256,12 +253,4 @@ export class ValidationBuilder {
         this._validationArgs[name] = validationFunc;
         return this;
     }
-
-    withCustomErrorMessage(msg: string): ValidationBuilder {
-        this._validationArgs["customErrMsg"] = helpers.withParams({ type: "customErrMsg", errMsg: msg }, function (value, parentVm) {
-            return true;
-        });
-
-        return this;
-    }
 }

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/bootstrap-toggle/index.tsx

@@ -140,7 +140,7 @@ class BootstrapToggle extends TsxComponent<BootstrapToggleArgs> implements Boots
         }
     }
 
-    beforeDestroy() {
+    beforeUnmount() {
         $(this.getBootstrapToggleElement())["bootstrapToggle"]("destroy");
         $(this.getBootstrapToggleElement()).off("change");
     }