@beinformed/ui 1.65.7 → 1.65.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@beinformed/ui",
-  "version": "1.65.7",
+  "version": "1.65.9",
   "description": "Toolbox for be informed javascript layouts",
   "license": "SEE LICENSE IN LICENSE.md",
   "bugs": "https://support.beinformed.com",
@@ -114,8 +114,8 @@
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-babel": "^5.3.1",
     "eslint-plugin-ft-flow": "^3.0.11",
-    "eslint-plugin-jest": "^29.0.1",
-    "eslint-plugin-jsdoc": "^60.1.0",
+    "eslint-plugin-jest": "^29.12.1",
+    "eslint-plugin-jsdoc": "^61.5.0",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-you-dont-need-lodash-underscore": "^6.14.0",

package/src/hooks/__tests__/UseModularUIModel.spec.js

@@ -12,11 +12,11 @@ import {
   useCaseView,
   useGroupingPanel,
   useDetailPanel,
-  useQuicksearch,
   useUserProfile,
 } from "../useModularUIModel";
 import { useList, useListDetail } from "../useList";
 import { usePanel } from "../usePanel";
+import { useQuicksearch } from "../useSearch";
 import {
   ApplicationModel,
   CaseSearchModel,

package/src/hooks/index.js

@@ -1,9 +1,11 @@
 // @flow
+export * from "./useAllFormsOnModel";
 export * from "./useAuthentication";
 export * from "./useContent";
 export * from "./useForm";
 export * from "./useI18n";
 export * from "./useList";
+export * from "./useLookup";
 export * from "./useModal";
 export * from "./useModelCatalog";
 export * from "./useModels";
@@ -16,4 +18,4 @@ export * from "./usePanel";
 export * from "./usePreference";
 export * from "./useProgressIndicator";
 export * from "./useRouter";
-export * from "./useAllFormsOnModel";
+export * from "./useSearch";

package/src/hooks/useForm.js

@@ -1,16 +1,16 @@
 // @flow
 import { useDispatch } from "react-redux";
 
-import Href from "../models/href/Href";
-
 import { getSetting, HTTP_METHODS } from "../constants";
 
 import type {
   RemoveModelByKeyAction,
   UpdateFormAction,
 } from "../redux/_modularui";
-import { loadModularUI, removeModelByKey } from "../redux/_modularui";
-import { useModularUI } from "./useModularUI";
+import {
+  loadModularUI,
+  removeModelByKey,
+} from "../redux/_modularui/ModularUIActions";
 
 import {
   addRepeatableAttributeSet,
@@ -22,8 +22,11 @@ import {
   updateFormAttribute,
 } from "../redux/actions";
 
+import Href from "../models/href/Href";
 import FormModel from "../models/form/FormModel";
 
+import { useModularUI } from "./useModularUI";
+
 import type { AttributeType, FormObjectModel, ModularUIModel } from "../models";
 import type { UpdateFormOptions } from "../redux/types";
 

package/src/hooks/useList.js

@@ -18,6 +18,7 @@ import FilterModel from "../models/filters/FilterModel";
 
 import type { HookOptions } from "./useModularUIBasic";
 import type { AttributeType, IFilter } from "../models/types";
+import { useCallback, useMemo } from "react";
 
 type ListNavigationHook = {
   update: (list: ListModel, resetPage?: boolean) => void,
@@ -35,6 +36,11 @@ type ListNavigationHook = {
   removeFilter: (list: ListModel, filter: IFilter) => void,
 };
 
+type ListNavigationOptions = {
+  syncLocation: boolean,
+  historyAction: "push" | "replace",
+};
+
 /**
  */
 export const useList = (
@@ -74,90 +80,141 @@ export const useListDetail = (
 
 /**
  */
-export const useListNavigation = (): ListNavigationHook => {
+export const useListNavigation = (
+  { syncLocation, historyAction }: ListNavigationOptions = {
+    syncLocation: true,
+    historyAction: "push",
+  },
+): ListNavigationHook => {
   const history = useHistory();
   const dispatch = useDispatch();
 
-  const update = (list: ListModel, resetPage: boolean = false) => {
-    const listHref = list.selfhref;
-    if (resetPage) {
-      listHref.page = null;
-    }
-
-    if (list.requestMethod === HTTP_METHODS.POST) {
-      history.push({ search: listHref.querystring, state: list.formdata });
-      dispatch(
-        loadModularUI(list.connectKey, listHref, {
-          method: HTTP_METHODS.POST,
-          data: list.formdata,
-          targetModel: [ListModel, CaseSearchModel],
-        }),
-      );
-    } else {
-      history.push({ search: listHref.querystring });
-      dispatch(
-        loadModularUI(list.connectKey, listHref, {
-          method: HTTP_METHODS.GET,
-          targetModel: [ListModel, CaseSearchModel],
-        }),
-      );
-    }
-  };
-
-  const updateFilters = (list: ListModel, filters: FilterCollection) => {
-    list.filterCollection = filters;
-    update(list, true);
-  };
-
-  const updateFilter = (
-    list: ListModel,
-    filter: IFilter,
-    value: string,
-    attribute?: AttributeType,
-  ) => {
-    if (attribute) {
-      filter.update(attribute, value);
-    } else if (filter instanceof AssignmentFilterModel) {
-      throw new Error("Need the attribute to update for AssigmentFilterModel");
-    } else if (filter instanceof FilterModel) {
-      filter.update(filter.attribute, value);
-    }
-    update(list, true);
-  };
-
-  const resetFilters = (list: ListModel) => {
-    list.filterCollection.reset();
-    update(list, true);
-  };
-
-  const removeFilter = (list: ListModel, filter: IFilter) => {
-    list.filterCollection.getFilterByName(filter.name)?.reset();
-    update(list, true);
-  };
-
-  const updateSort = (list: ListModel, sortOption: string) => {
-    list.sorting.value = sortOption;
-    update(list, true);
-  };
-
-  const updatePage = (list: ListModel, page: number) => {
-    list.paging.page = page;
-    update(list);
-  };
-
-  const updatePageSize = (list: ListModel, pagesize: number) => {
-    list.paging.pagesize.value = pagesize;
-    update(list);
-  };
-
-  return {
-    update,
-    updateFilters,
-    updateFilter,
-    updateSort,
-    updatePage,
-    updatePageSize,
-    resetFilters,
-    removeFilter,
-  };
+  const update = useCallback(
+    (list: ListModel, resetPage: boolean = false) => {
+      const listHref = list.selfhref;
+      if (resetPage) {
+        listHref.page = null;
+      }
+
+      if (list.requestMethod === HTTP_METHODS.POST) {
+        if (syncLocation) {
+          history[historyAction]({
+            search: listHref.querystring,
+            state: list.formdata,
+          });
+        }
+
+        dispatch(
+          loadModularUI(list.connectKey, listHref, {
+            method: HTTP_METHODS.POST,
+            data: list.formdata,
+            targetModel: [ListModel, CaseSearchModel],
+          }),
+        );
+      } else {
+        if (syncLocation) {
+          history[historyAction]({ search: listHref.querystring });
+        }
+        dispatch(
+          loadModularUI(list.connectKey, listHref, {
+            method: HTTP_METHODS.GET,
+            targetModel: [ListModel, CaseSearchModel],
+          }),
+        );
+      }
+    },
+    [dispatch, history, historyAction, syncLocation],
+  );
+
+  const updateFilters = useCallback(
+    (list: ListModel, filters: FilterCollection) => {
+      list.filterCollection = filters;
+      update(list, true);
+    },
+    [update],
+  );
+
+  const updateFilter = useCallback(
+    (
+      list: ListModel,
+      filter: IFilter,
+      value: string,
+      attribute?: AttributeType,
+    ) => {
+      if (attribute) {
+        filter.update(attribute, value);
+      } else if (filter instanceof AssignmentFilterModel) {
+        throw new Error(
+          "Need the attribute to update for AssigmentFilterModel",
+        );
+      } else if (filter instanceof FilterModel) {
+        filter.update(filter.attribute, value);
+      }
+      update(list, true);
+    },
+    [update],
+  );
+
+  const resetFilters = useCallback(
+    (list: ListModel) => {
+      list.filterCollection.reset();
+      update(list, true);
+    },
+    [update],
+  );
+
+  const removeFilter = useCallback(
+    (list: ListModel, filter: IFilter) => {
+      list.filterCollection.getFilterByName(filter.name)?.reset();
+      update(list, true);
+    },
+    [update],
+  );
+
+  const updateSort = useCallback(
+    (list: ListModel, sortOption: string) => {
+      list.sorting.value = sortOption;
+      update(list, true);
+    },
+    [update],
+  );
+
+  const updatePage = useCallback(
+    (list: ListModel, page: number) => {
+      list.paging.page = page;
+      update(list);
+    },
+    [update],
+  );
+
+  const updatePageSize = useCallback(
+    (list: ListModel, pagesize: number) => {
+      list.paging.pagesize.value = pagesize;
+      update(list);
+    },
+    [update],
+  );
+
+  return useMemo(
+    () => ({
+      update,
+      updateFilters,
+      updateFilter,
+      updateSort,
+      updatePage,
+      updatePageSize,
+      resetFilters,
+      removeFilter,
+    }),
+    [
+      removeFilter,
+      resetFilters,
+      update,
+      updateFilter,
+      updateFilters,
+      updatePage,
+      updatePageSize,
+      updateSort,
+    ],
+  );
 };

package/src/hooks/useLookup.js

@@ -0,0 +1,82 @@
+// @flow
+import { useEffect, useState } from "react";
+
+import { HTTP_METHODS } from "../constants";
+
+import Href from "../models/href/Href";
+import LinkModel from "../models/links/LinkModel";
+import LookupOptionsModel from "../models/lookup/LookupOptionsModel";
+
+import { useModularUIRequest } from "./useModularUIRequest";
+import { useProgressIndicator } from "./useProgressIndicator";
+
+type UseLookupHook = {
+  lookupOptions: LookupOptionsModel | null,
+  lookupLoading: boolean,
+};
+
+/**
+ * Lookup options call
+ */
+export const useLookup = (
+  lookupLink: LinkModel,
+  filterInput: string = "",
+  minLength: number = 2,
+  debounceMs: number = 300,
+): UseLookupHook => {
+  const { start, finish } = useProgressIndicator();
+  const modularuiRequest = useModularUIRequest();
+
+  const [lookupOptions, setLookupOptions] = useState(null);
+  const [lookupLoading, setLookupLoading] = useState(false);
+
+  const { href, filterName, method } = lookupLink;
+
+  useEffect(() => {
+    if (filterInput.length < minLength) {
+      setLookupOptions(null);
+      return;
+    }
+
+    const timeoutId = setTimeout(async () => {
+      setLookupLoading(true);
+      start();
+
+      const lookupHref = new Href(href);
+      const requestOptions = { method, data: undefined };
+      if (method === HTTP_METHODS.POST) {
+        requestOptions.data = { [filterName]: filterInput };
+      } else {
+        lookupHref.addParameter(filterName, filterInput);
+      }
+
+      modularuiRequest(lookupHref, requestOptions)
+        .fetch()
+        .then((lookupResponse) => {
+          if (lookupResponse instanceof LookupOptionsModel) {
+            setLookupOptions(lookupResponse);
+          }
+        })
+        .finally(() => {
+          finish();
+          setLookupLoading(false);
+        });
+    }, debounceMs);
+
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [
+    debounceMs,
+    filterInput,
+    filterName,
+    finish,
+    href,
+    method,
+    minLength,
+    modularuiRequest,
+    start,
+  ]);
+
+  return { lookupOptions, lookupLoading };
+};

package/src/hooks/useModularUIModel.js

@@ -4,7 +4,6 @@ import CaseViewModel from "../models/caseview/CaseViewModel";
 import TabModel from "../models/tab/TabModel";
 import GroupingPanelModel from "../models/panels/GroupingPanelModel";
 import DetailModel from "../models/detail/DetailModel";
-import CaseSearchModel from "../models/search/CaseSearchModel";
 import UserProfileModel from "../models/user/UserProfileModel";
 
 import { useModularUIBasic } from "./useModularUIBasic";
@@ -74,30 +73,6 @@ export const useDetailPanel = (
     ...options,
   });
 
-/**
- */
-export const useQuicksearch = (
-  href: string | Href,
-  options?: HookOptions,
-): CaseSearchModel | null =>
-  useModularUIBasic("quicksearch", href, {
-    expectedModels: ["CaseSearch"],
-    targetModel: CaseSearchModel,
-    ...options,
-  });
-
-/**
- */
-export const useSearch = (
-  href: string | Href,
-  options?: HookOptions,
-): CaseSearchModel | null =>
-  useModularUIBasic("search", href, {
-    expectedModels: ["CaseSearch"],
-    targetModel: CaseSearchModel,
-    ...options,
-  });
-
 /**
  */
 export const useUserProfile = (

package/src/hooks/useProgressIndicator.js

@@ -7,27 +7,44 @@ import {
   updateProgress,
 } from "../redux/actions/ProgressIndicator";
 import type { ProgressIndicatorState } from "../redux/types";
+import { useCallback } from "react";
 
 type ProgressIndicatorHook = {
-  ...ProgressIndicatorState,
   start: () => void,
   finish: () => void,
   reset: () => void,
   update: (percentComplete: number) => void,
 };
 
+type ProgressIndicatorStateHook = {
+  ...ProgressIndicatorState,
+};
+
 /**
  */
 export const useProgressIndicator = (): ProgressIndicatorHook => {
   const dispatch = useDispatch();
-  const progress = useSelector((state) => state.progressindicator);
 
-  return {
-    ...progress,
-    start: () => dispatch(startProgress()),
-    finish: () => dispatch(finishProgress()),
-    reset: () => dispatch(resetProgress()),
-    update: (percentComplete: number) =>
-      dispatch(updateProgress(percentComplete)),
-  };
+  const start = useCallback(() => {
+    dispatch(startProgress());
+  }, [dispatch]);
+  const finish = useCallback(() => {
+    dispatch(finishProgress());
+  }, [dispatch]);
+  const reset = useCallback(() => {
+    dispatch(resetProgress());
+  }, [dispatch]);
+  const update = useCallback(
+    (percentComplete: number) => {
+      dispatch(updateProgress(percentComplete));
+    },
+    [dispatch],
+  );
+
+  return { start, finish, reset, update };
 };
+
+/**
+ */
+export const useProgressIndicatorState = (): ProgressIndicatorStateHook =>
+  useSelector((state) => state.progressindicator);

package/src/hooks/useSearch.js

@@ -0,0 +1,31 @@
+// @flow
+import Href from "../models/href/Href";
+import CaseSearchModel from "../models/search/CaseSearchModel";
+
+import { useModularUIBasic } from "./useModularUIBasic";
+
+import type { HookOptions } from "./useModularUIBasic";
+
+/**
+ */
+export const useQuicksearch = (
+  href: string | Href,
+  options?: HookOptions,
+): CaseSearchModel | null =>
+  useModularUIBasic("quicksearch", href, {
+    expectedModels: ["CaseSearch"],
+    targetModel: CaseSearchModel,
+    ...options,
+  });
+
+/**
+ */
+export const useSearch = (
+  href: string | Href,
+  options?: HookOptions,
+): CaseSearchModel | null =>
+  useModularUIBasic("search", href, {
+    expectedModels: ["CaseSearch"],
+    targetModel: CaseSearchModel,
+    ...options,
+  });

package/src/models/attributes/AttributeSetModel.js

@@ -89,7 +89,7 @@ export default class AttributeSetModel extends BaseModel {
   }
 
   /**
-   * Retrieve child {@code AttributeSetModel}s
+   * Retrieve child AttributeSetModels
    */
   getChildAttributeSets(): Array<AttributeSetModel> {
     if (!this.contributions.objects) {

package/src/models/attributes/ChoiceAttributeModel.js

@@ -13,7 +13,11 @@ import {
   RENDER_SECTION_LABEL,
   SORT_OPTIONS,
 } from "../../constants/LayoutHints";
-import { ATTRIBUTE_WIDTH } from "../../constants";
+import {
+  ATTRIBUTE_WIDTH,
+  PARAMETER_TYPES,
+  HTTP_METHODS,
+} from "../../constants";
 
 import type {
   ModularUIModel,
@@ -133,7 +137,24 @@ export default class ChoiceAttributeModel extends AttributeModel {
    * Retrieve lookup service link
    */
   get lookupLink(): LinkModel | null {
-    return this.links.getLinkByKey("lookupOptions");
+    const link = this.links.getLinkByKey("lookupOptions");
+    if (link && this.lookupParameterType === PARAMETER_TYPES.BODY) {
+      link.method = HTTP_METHODS.POST;
+    }
+    return link;
+  }
+
+  /**
+   * Indicate if the lookup must be done with POST or GET
+   */
+  get lookupParameterType(): $Values<typeof PARAMETER_TYPES> {
+    const parameterType = this.getContribution("parameterType");
+    switch (parameterType) {
+      case "bodyParameter":
+        return PARAMETER_TYPES.BODY;
+      default:
+        return PARAMETER_TYPES.QUERY;
+    }
   }
 
   /**

package/src/models/links/LinkModel.js

@@ -6,9 +6,10 @@ import BaseModel from "../base/BaseModel";
 import Href from "../href/Href";
 import LinkCollection from "../links/LinkCollection";
 import { INITIAL_FILTER } from "../../constants/LayoutHints";
+import Parameter from "../parameter/Parameter";
+import { HTTP_METHODS } from "../../constants";
 
 import type { ModelOptions, ModularUIModel } from "../types";
-import Parameter from "../parameter/Parameter";
 
 /**
  * Defines a Link. For instance below example of a link to the tab 'books'
@@ -23,6 +24,7 @@ class LinkModel extends BaseModel {
   _isCacheable: boolean;
   _icon: string;
   _targetModel: ?Class<ModularUIModel>;
+  _method: $Keys<typeof HTTP_METHODS>;
 
   /**
    * Create a Link
@@ -36,6 +38,7 @@ class LinkModel extends BaseModel {
 
     this.createHref(modelOptions);
 
+    this._method = HTTP_METHODS.GET;
     this._isCacheable = false;
   }
 
@@ -121,6 +124,20 @@ class LinkModel extends BaseModel {
     this._href = href;
   }
 
+  /**
+   * Indicate how this link must be called, GET by default
+   */
+  get method(): $Keys<typeof HTTP_METHODS> {
+    return this._method;
+  }
+
+  /**
+   * Set http method for this link
+   */
+  set method(method: $Keys<typeof HTTP_METHODS>) {
+    this._method = method;
+  }
+
   /**
    * Getting the label of the link
    */