@nu-art/thunderstorm-frontend 0.400.10 → 0.400.13

package/modules/routing/ModuleFE_RoutingV2.js

@@ -1,7 +1,7 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BrowserRouter, Navigate, NavLink, Route, Routes } from 'react-router-dom';
-import { BadImplementationException, composeUrl, Module, removeItemFromArray } from '@nu-art/ts-common';
+import { BadImplementationException, composeQueryParams, composeUrl, exists, Module, removeItemFromArray, _keys } from '@nu-art/ts-common';
 import { LocationChangeListener } from './LocationChangeListener.js';
 import { mouseEventHandler, stopPropagation } from '../../utils/tools.js';
 import { AwaitModules } from '../../components/AwaitModules/AwaitModules.js';
@@ -126,6 +126,159 @@ class ModuleFE_RoutingV2_Class extends Module {
     setNavigate(navigate) {
         this.navigate = navigate;
     }
+    // ######################## Query Param Methods ########################
+    /**
+     * Get all query parameters from the current URL (decoded)
+     */
+    getQueryParams() {
+        const params = this.getEncodedQueryParams();
+        _keys(params).forEach(key => {
+            const _param = params[key];
+            if (!exists(_param))
+                return;
+            const value = `${params[key]}`;
+            params[key] = decodeURIComponent(value);
+        });
+        return params;
+    }
+    /**
+     * Get a single query parameter from the current URL
+     * @param key - The query parameter key
+     * @returns The decoded value, null if key exists but value is empty, or undefined if key doesn't exist
+     */
+    getQueryParameter(key) {
+        const queryParams = this.getQueryParams();
+        const value = queryParams[key];
+        if (value === undefined && Object.keys(queryParams).includes(key))
+            return null;
+        return value;
+    }
+    /**
+     * Replace all query parameters on the current route
+     * @param queryParams - The query parameters to set
+     */
+    setQuery(queryParams) {
+        const encodedQueryParams = this.encodeUrlParams(queryParams);
+        this.updateQueryParams(encodedQueryParams);
+    }
+    /**
+     * Add or update a single query parameter on the current route
+     * @param key - The query parameter key
+     * @param value - The query parameter value
+     */
+    addQueryParam(key, value) {
+        const decodedQueryParams = this.getQueryParams();
+        decodedQueryParams[key] = value;
+        this.updateQueryParams(decodedQueryParams);
+    }
+    /**
+     * Remove a single query parameter from the current route
+     * @param key - The query parameter key to remove
+     */
+    removeQueryParam(key) {
+        const encodedQueryParams = this.getEncodedQueryParams();
+        delete encodedQueryParams[key];
+        this.updateQueryParams(encodedQueryParams);
+    }
+    // ######################## URL Utility Methods ########################
+    /**
+     * Get the current location object (compatible with BrowserHistory.getCurrent())
+     * @returns Object with pathname and search properties
+     */
+    getCurrent() {
+        return {
+            pathname: window.location.pathname,
+            search: window.location.search,
+            hash: window.location.hash,
+        };
+    }
+    /**
+     * Get the current URL pathname
+     * @returns The current pathname
+     */
+    getCurrentUrl() {
+        return window.location.pathname;
+    }
+    /**
+     * Get the window origin
+     * @returns The origin (protocol + hostname + port)
+     */
+    getOrigin() {
+        return window.location.origin;
+    }
+    // ######################## Navigation Methods ########################
+    /**
+     * Navigate to a pathname with optional query params (adds to history)
+     * @param location - Location descriptor with pathname and optional search
+     */
+    push(location) {
+        const url = this.composeLocationUrl(location);
+        this.navigate(url);
+    }
+    /**
+     * Replace current history entry with new pathname and optional query params
+     * @param location - Location descriptor with pathname and optional search
+     */
+    replace(location) {
+        const url = this.composeLocationUrl(location);
+        this.navigate(url, { replace: true });
+    }
+    // ######################## Private Helper Methods ########################
+    getEncodedQueryParams() {
+        const queryParams = {};
+        let queryAsString = window.location.search;
+        if (!queryAsString || queryAsString.length === 0)
+            return {};
+        while (queryAsString.startsWith('?') || queryAsString.startsWith('/?')) {
+            if (queryAsString.startsWith('?'))
+                queryAsString = queryAsString.substring(1);
+            else if (queryAsString.startsWith('/?'))
+                queryAsString = queryAsString.substring(2);
+            else
+                break;
+        }
+        const query = queryAsString.split('&');
+        return query.map(param => {
+            const parts = param.split('=');
+            return { key: parts[0], value: parts[1]?.length === 0 ? undefined : parts[1] };
+        }).reduce((toRet, param) => {
+            toRet[param.key] = param.value;
+            return toRet;
+        }, queryParams);
+    }
+    composeQuery(queryParams) {
+        const queryAsString = composeQueryParams(queryParams);
+        if (queryAsString.length === 0)
+            return '';
+        return queryAsString;
+    }
+    encodeUrlParams(queryParams) {
+        const encodedQueryParams = { ...queryParams };
+        _keys(encodedQueryParams).forEach(key => {
+            const value = encodedQueryParams[key];
+            if (!value) {
+                delete encodedQueryParams[key];
+                return;
+            }
+            encodedQueryParams[key] = encodeURIComponent(value);
+        });
+        return encodedQueryParams;
+    }
+    createLocationDataFromQueryParams(encodedQueryParams, pathname = window.location.pathname) {
+        const cleanPathname = !pathname.endsWith('/') ? pathname : pathname.substring(0, pathname.length - 1);
+        const search = encodedQueryParams ? this.composeQuery(encodedQueryParams) : '';
+        return search.length > 0 ? `${cleanPathname}?${search}` : cleanPathname;
+    }
+    updateQueryParams(encodedQueryParams) {
+        const url = this.createLocationDataFromQueryParams(encodedQueryParams);
+        this.navigate(url, { replace: true });
+    }
+    composeLocationUrl(location) {
+        const cleanPathname = !location.pathname.endsWith('/') ? location.pathname : location.pathname.substring(0, location.pathname.length - 1);
+        const search = location.search || '';
+        const hash = location.hash || '';
+        return `${cleanPathname}${search}${hash}`;
+    }
 }
 export const TS_NavLink = (props) => {
     const { route, children, ignoreClickOnSameRoute, ..._props } = props;
@@ -141,3 +294,42 @@ export const TS_NavLink = (props) => {
         }) }, children);
 };
 export const ModuleFE_RoutingV2 = new ModuleFE_RoutingV2_Class();
+// ######################## Utility Functions ########################
+/**
+ * Encode URL query parameters
+ * @param queryParams - Query parameters to encode
+ * @returns Encoded query parameters
+ */
+export function encodeUrlParams(queryParams) {
+    const encodedQueryParams = { ...queryParams };
+    _keys(encodedQueryParams).forEach(key => {
+        const value = encodedQueryParams[key];
+        if (!value) {
+            delete encodedQueryParams[key];
+            return;
+        }
+        encodedQueryParams[key] = encodeURIComponent(value);
+    });
+    return encodedQueryParams;
+}
+/**
+ * Compose a query string from query parameters
+ * @param queryParams - Query parameters to compose
+ * @returns Query string (without leading ?)
+ */
+export function composeQuery(queryParams) {
+    const queryAsString = composeQueryParams(queryParams);
+    if (queryAsString.length === 0)
+        return '';
+    return queryAsString;
+}
+/**
+ * Compose a full URL with query parameters
+ * @param url - Base URL
+ * @param queryParams - Optional query parameters
+ * @returns Full URL with query string
+ */
+export function composeURL(url, queryParams) {
+    const queryAsString = composeQuery(queryParams);
+    return `${url}${queryAsString.length > 0 ? `?${queryAsString}` : ''}`;
+}

package/modules/routing/index.d.ts

@@ -1,5 +1,4 @@
 export * from './types.js';
 export * from './LocationChangeListener.js';
 export * from './route.js';
-export * from './ModuleFE_Routing.js';
 export * from './ModuleFE_RoutingV2.js';

package/modules/routing/index.js

@@ -1,5 +1,4 @@
 export * from './types.js';
 export * from './LocationChangeListener.js';
 export * from './route.js';
-export * from './ModuleFE_Routing.js';
 export * from './ModuleFE_RoutingV2.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nu-art/thunderstorm-frontend",
-  "version": "0.400.10",
+  "version": "0.400.13",
   "description": "Thunderstorm Frontend",
   "keywords": [
     "TacB0sS",
@@ -37,11 +37,11 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@nu-art/thunderstorm-shared": "0.400.10",
-    "@nu-art/firebase-frontend": "0.400.10",
-    "@nu-art/firebase-shared": "0.400.10",
-    "@nu-art/ts-common": "0.400.10",
-    "@nu-art/ts-styles": "0.400.10",
+    "@nu-art/thunderstorm-shared": "0.400.13",
+    "@nu-art/firebase-frontend": "0.400.13",
+    "@nu-art/firebase-shared": "0.400.13",
+    "@nu-art/ts-common": "0.400.13",
+    "@nu-art/ts-styles": "0.400.13",
     "abort-controller": "^3.0.0",
     "axios": "^1.13.1",
     "body-parser": "^1.19.0",

package/utils/EditableItem.js

@@ -501,7 +501,7 @@ export class EditableDBItemV3 extends EditableItem {
         if (this.hasValidationError())
             return this.setStatus(EditableItemStatus_FailedValidation);
         if (this.saveError)
-            return this.setStatus(exports.EditableItemStatus_ErrorSaving);
+            return this.setStatus(EditableItemStatus_ErrorSaving);
         if (this.hasChanges()) {
             return this.setStatus(EditableItemStatus_UnsavedChanges);
         }

package/utils/tools.d.ts

@@ -1,6 +1,8 @@
 import { Browser } from '@nu-art/thunderstorm-shared/consts';
+import { DBProto } from '@nu-art/ts-common';
 import * as React from 'react';
 import { DependencyList, Dispatch, EffectCallback, SetStateAction } from 'react';
+import { ModuleFE_BaseDB } from '../modules/db-api-gen/ModuleFE_BaseDB.js';
 export declare function browserType(): Browser;
 export declare function base64ToBlob(imageAsBase64: string): Promise<Blob>;
 export declare function stringToArrayBuffer(stringToConvert: string): ArrayBuffer;
@@ -28,4 +30,7 @@ type MouseClickActions = {
 };
 export declare const mouseEventHandler: (e: React.MouseEvent | MouseEvent, actions: MouseClickActions) => void | undefined;
 export declare const stringReplacer: (_content: string, _toReplace: string, replacer: (match: string, i: number) => JSX.Element) => React.ReactNode[];
+export type EntityToResolve<P extends DBProto<any> = DBProto<any>> = string | P['dbType'] | undefined;
+export declare const resolveId: (entity: EntityToResolve) => any;
+export declare const resolveEntity: <P extends DBProto<any>>(module: ModuleFE_BaseDB<P>) => (entity: EntityToResolve<P>) => Readonly<P["dbType"]> | undefined;
 export {};

package/utils/tools.js

@@ -136,3 +136,7 @@ export const stringReplacer = (_content, _toReplace, replacer) => {
         i++;
     }
 };
+export const resolveId = (entity) => typeof entity === 'string' ? entity : entity?._id;
+export const resolveEntity = (module) => (entity) => typeof entity === 'string'
+    ? module.cache.unique(entity)
+    : entity;