@beinformed/ui 1.65.9 → 1.65.11

package/src/hooks/useModularUIBasic.js

@@ -4,7 +4,7 @@ import { useSelector } from "react-redux";
 import { useMemo } from "react";
 import { useModularUI } from "./useModularUI";
 
-import { MODULARUI_STATUS } from "../constants";
+import { HTTP_METHODS, MODULARUI_STATUS } from "../constants";
 import { useModularUIKey } from "./useModularUIKey";
 
 import type { ModularUIModel, Href } from "../models";
@@ -13,6 +13,7 @@ export type HookOptions = {
   origin?: string,
   contextPath?: string,
   removeOnUnmount?: boolean,
+  formdata?: any,
 };
 
 export type UseModularUIBasicOptions<T: ModularUIModel> = {
@@ -25,6 +26,7 @@ export type UseModularUIBasicOptions<T: ModularUIModel> = {
   key?: string,
   isReload?: boolean,
   removeOnUnmount?: boolean,
+  formdata?: any,
 };
 
 // Helper to create useModularUI options
@@ -41,6 +43,8 @@ const createUseModularUIOptions = <T: ModularUIModel>(
     contextPath: undefined,
     cache: false,
     removeOnUnmount: false,
+    method: HTTP_METHODS.GET,
+    data: undefined,
   };
 
   // Handle targetModel and forceTargetModel
@@ -62,6 +66,11 @@ const createUseModularUIOptions = <T: ModularUIModel>(
     baseOptions.removeOnUnmount = true;
   }
 
+  if (options.formdata != null) {
+    baseOptions.method = HTTP_METHODS.POST;
+    baseOptions.data = options.formdata;
+  }
+
   // Handle origin and contextPath options
   baseOptions.origin = options.origin ?? baseOptions.origin;
   baseOptions.contextPath = options.contextPath ?? baseOptions.contextPath;
@@ -94,6 +103,7 @@ export const useModularUIBasic = <T: ModularUIModel>(
     origin: undefined,
     contextPath: undefined,
     key: undefined,
+    formdata: undefined,
   },
 ): T | null => {
   const memoizedHref = useMemo(() => href.toString(), [href]);

package/src/hooks/usePanel.js

@@ -64,7 +64,7 @@ const useUrl = (href?: string | Href, fromRoute: boolean = false) => {
  */
 export const usePanel = (
   href?: string | Href,
-  options?: HookOptions & { fromRoute?: boolean },
+  options?: { ...HookOptions, fromRoute?: boolean },
 ): ListModel | GroupingPanelModel | DetailModel | null => {
   const { fromRoute, ...hookOptions } = options || { fromRoute: false };
 

package/src/hooks/useRouter.js

@@ -1,6 +1,6 @@
 // @flow
+import { useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import type { Location, LocationShape } from "react-router";
 
 import {
   push,
@@ -9,6 +9,8 @@ import {
   goBack,
   goForward,
 } from "../redux/_router/RouterActions";
+
+import type { Location, LocationShape } from "react-router";
 import type {
   GoAction,
   GoBackAction,
@@ -17,48 +19,52 @@ import type {
   ReplaceAction,
 } from "../redux";
 
-type UseLocationHook = () => Location;
-type UseLocationKeyHook = () => string;
-type UseQuerystringHook = () => string;
-type UsePathnameHook = () => string;
-type UseNavigationHook = () => {
+type NavigationAPI = {|
   push: (location: LocationShape | string, state?: { ... }) => PushAction,
   replace: (location: LocationShape | string, state?: { ... }) => ReplaceAction,
   go: (delta: number) => GoAction,
   goBack: () => GoBackAction,
   goForward: () => GoForwardAction,
-};
+|};
 
 /**
+ * Returns the full location object from the router state.
  */
-export const useLocation: UseLocationHook = () =>
-  useSelector((state) => state.router.location);
+export const useLocation = (): Location =>
+  useSelector((state) => state.router?.location || {});
 
 /**
+ * Returns the unique key of the current location.
  */
-export const useLocationKey: UseLocationKeyHook = () =>
-  useLocation()?.key ?? "";
+export const useLocationKey = (): string =>
+  useSelector((state) => state.router?.location?.key ?? "");
 
 /**
+ * Returns the current search (querystring) portion of the URL.
  */
-export const useQuerystring: UseQuerystringHook = () => useLocation()?.search;
+export const useQuerystring = (): string =>
+  useSelector((state) => state.router?.location?.search ?? "");
 
 /**
+ * Returns the current URL pathname.
  */
-export const usePathname: UsePathnameHook = () => useLocation()?.pathname;
+export const usePathname = (): string =>
+  useSelector((state) => state.router?.location?.pathname ?? "");
 
 /**
+ * Provides navigation methods.
  */
-export const useNavigation: UseNavigationHook = () => {
+export const useNavigation = (): NavigationAPI => {
   const dispatch = useDispatch();
 
-  return {
-    push: (location: LocationShape | string, state?: { ... }) =>
-      dispatch(push(location, state)),
-    replace: (location: LocationShape | string, state?: { ... }) =>
-      dispatch(replace(location, state)),
-    go: (delta: number) => dispatch(go(delta)),
-    goBack: () => dispatch(goBack()),
-    goForward: () => dispatch(goForward()),
-  };
+  return useMemo(
+    () => ({
+      push: (location, state) => dispatch(push(location, state)),
+      replace: (location, state) => dispatch(replace(location, state)),
+      go: (delta) => dispatch(go(delta)),
+      goBack: () => dispatch(goBack()),
+      goForward: () => dispatch(goForward()),
+    }),
+    [dispatch],
+  );
 };

package/src/models/attributes/AttributeModel.js

@@ -613,6 +613,20 @@ export default class AttributeModel
     return this.validate(this.validateValue);
   }
 
+  /**
+   * Get valid status
+   */
+  getIsValid(): boolean {
+    return this._isValid;
+  }
+
+  /**
+   * Set valid status
+   */
+  setIsValid(isValid: boolean) {
+    this._isValid = isValid;
+  }
+
   /**
    * Retrieve applicable constraint for this attribute
    */

package/src/models/attributes/CompositeAttributeModel.js

@@ -155,13 +155,20 @@ class CompositeAttributeModel extends AttributeModel {
       return true;
     }
 
-    this._isValid = this.children.validate();
+    let isValid = this.children.validate();
 
-    if (this._isValid) {
-      this._isValid = this.constraintCollection.validate();
+    if (isValid) {
+      isValid = this.constraintCollection.validate();
     }
 
-    return this._isValid;
+    this.setIsValid(isValid);
+    return this.getIsValid();
+  }
+
+  /**
+   */
+  get isValid(): boolean {
+    return this.validate("");
   }
 
   /**
@@ -193,13 +200,6 @@ class CompositeAttributeModel extends AttributeModel {
     return constraints;
   }
 
-  /**
-   * Indicates if attribute input is valid
-   */
-  get isValid(): boolean {
-    return this.validate("");
-  }
-
   /**
    */
   hasServerErrors(): boolean {

package/src/models/attributes/PasswordAttributeModel.js

@@ -222,13 +222,13 @@ export default class PasswordAttributeModel extends StringAttributeModel {
     }
 
     if (this.isOptionalAndEmpty(value)) {
-      this._isValid = true;
+      this.setIsValid(true);
     } else if (this._validatedValue !== `${this.confirmValue}-${value}`) {
-      this._isValid = this.constraintCollection.validate(value);
+      this.setIsValid(this.constraintCollection.validate(value));
     }
     this._validatedValue = `${this.confirmValue}-${value}`;
 
-    return this._isValid;
+    return this.getIsValid();
   }
 
   /**

package/src/models/filters/FilterModel.js

@@ -131,7 +131,7 @@ export default class FilterModel extends BaseFilterModel implements IFilter {
    * Inidiates if filter is valid
    */
   get isValid(): boolean {
-    return this.attribute?.isValid || true;
+    return this.attribute?.isValid ?? true;
   }
 
   /**

package/src/models/filters/RangeFilterModel.js

@@ -13,7 +13,7 @@ export default class RangeFilterModel extends FilterModel implements IFilter {
   update(attribute: AttributeType, value: string) {
     if (this.attribute instanceof CompositeAttributeModel) {
       this.attribute.update(value, attribute);
-    } else if (this.attribute !== null) {
+    } else if (this.attribute != null) {
       this.attribute.update(value);
     }
   }

package/src/models/href/Href.js

@@ -322,7 +322,8 @@ class Href {
         (param) =>
           param.isModUIParameter &&
           (!prefix || !param.prefix || param.prefix === prefix) &&
-          param.value != null,
+          param.value != null &&
+          param.value !== "",
       )
       .map((param) => param.toQuerystring(false))
       .join("&");
@@ -335,6 +336,15 @@ class Href {
     return this.getQuerystring(false);
   }
 
+  /**
+   * Retrieve all parameters from the parameter collection in a querystring style prefix~name1=value1&prefix~name2=value2, with the prefix
+   * The prefix is used to identify parameters per component on a grouping panel
+   * @returns {string}
+   */
+  get publicQuerystring(): string {
+    return this.getQuerystring(true);
+  }
+
   /**
    * Set the path of the Href, the part before the querystring question mark
    */
@@ -412,6 +422,23 @@ class Href {
     return this;
   }
 
+  /**
+   */
+  set formdata(formdata: any) {
+    const currentState = this.state ?? {};
+
+    this.state = {
+      ...currentState,
+      formdata,
+    };
+  }
+
+  /**
+   */
+  get formdata(): any {
+    return this.state?.formdata;
+  }
+
   /**
    * Set resourctype
    */
@@ -550,7 +577,8 @@ class Href {
   toLocation(): LocationShape {
     return {
       pathname: this.path,
-      search: this.querystring.length > 0 ? `?${this.querystring}` : "",
+      search:
+        this.publicQuerystring.length > 0 ? `?${this.publicQuerystring}` : "",
       hash: this.hash.length > 0 ? `#${this.hash}` : "",
       state: {
         origin: this.origin,

package/src/models/href/ListHref.js

@@ -28,7 +28,7 @@ export default class ListHref extends Href {
     this._isPrefixed = isPrefixed;
 
     if (list != null) {
-      this.setParameterNamesFromListModel(list);
+      this.setParametersFromListModel(list);
     } else if (href != null && href instanceof ListHref) {
       this.setParameterNamesFromHref(href);
     }
@@ -47,7 +47,7 @@ export default class ListHref extends Href {
   /**
    * Retrieve parameter names and settings from List model
    */
-  setParameterNamesFromListModel(list: ListModel) {
+  setParametersFromListModel(list: ListModel) {
     this._prefix = this._isPrefixed ? list.key : null;
 
     this._pagingName = list.paging ? list.paging.name : "";
@@ -65,6 +65,8 @@ export default class ListHref extends Href {
     this.sort = list.sorting && list.sorting.param ? list.sorting.param : null;
 
     this.filterCollection = list.filterCollection;
+
+    this.formdata = list.formdata;
   }
 
   /**

package/src/models/list/ListModel.js

@@ -448,7 +448,13 @@ export default class ListModel extends ResourceModel {
 
   /**
    */
-  get formdata(): string {
-    return JSON.stringify(this.filterCollection.formdata);
+  get formdata(): string | null {
+    const { formdata } = this.filterCollection;
+
+    if (formdata != null) {
+      return JSON.stringify(formdata);
+    }
+
+    return null;
   }
 }

package/src/models/parameter/Parameter.js

@@ -52,14 +52,14 @@ class Parameter {
     }
 
     // parameter has the structure prefix~name=value
-    const namePart = parameter.substr(0, parameter.indexOf("="));
-    const value = parameter.substr(parameter.indexOf("=") + 1);
+    const namePart = parameter.substring(0, parameter.indexOf("="));
+    const value = parameter.substring(parameter.indexOf("=") + 1);
 
     let prefix;
-    let name = namePart;
-    if (namePart.includes(PARAMETER_SEPARATOR)) {
-      prefix = namePart.substr(0, namePart.indexOf("~"));
-      name = namePart.substr(namePart.indexOf("~") + 1);
+    let name = decodeURIComponent(namePart);
+    if (name.includes(PARAMETER_SEPARATOR)) {
+      prefix = name.substring(0, name.indexOf("~"));
+      name = name.substring(name.indexOf("~") + 1);
     }
 
     if (name === "") {