@truedat/dd 8.2.4 → 8.3.1

package/src/components/StructureGrantCartCheckout.js

@@ -1,46 +1,284 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
+import { useEffect, useMemo, Suspense } from "react";
 import { Header, Segment, Grid, Button, GridColumn } from "semantic-ui-react";
 import { bindActionCreators } from "redux";
-import { connect } from "react-redux";
+import { connect, useDispatch } from "react-redux";
 import { HistoryBackButton } from "@truedat/core/components";
 import { useIntl, FormattedMessage } from "react-intl";
-import { checkoutGrantRequest } from "../routines";
+import { lazy } from "react";
+import {
+  checkoutGrantRequest,
+  initGroupTemplates,
+  selectGrantRequestTemplate,
+  selectGrantRequestTemplateForGroup,
+  updateGrantRequestTemplateContentForGroup,
+} from "../routines";
 import StructureGrantCart from "./StructureGrantCart";
 import StructureGrantCartInformation from "./StructureGrantCartInformation";
-import { useState } from "react";
+import StructureGrantCartUserSelector from "./StructureGrantCartUserSelector";
+import { useWebContext } from "@truedat/core/webContext";
+import { useTemplateRelations } from "@truedat/df/hooks/useTemplateRelations";
+import { useCheckoutGrantRequest } from "../hooks/useCheckoutGrantRequest";
+import { useTemplatesByIds } from "../hooks/useTemplatesByIds";
+
+const SelectableDynamicForm = lazy(
+  () => import("@truedat/df/components/SelectableDynamicForm")
+);
+
+const getGroupedStructuresByTemplate = (
+  structures,
+  templateResourceRelations,
+  defaultTemplateId
+) => {
+  const systemToTemplateId = _.fromPairs(
+    (templateResourceRelations ?? []).map((r) => [
+      r.resource_id != null ? Number(r.resource_id) || r.resource_id : null,
+      r.template_id != null ? Number(r.template_id) || r.template_id : null,
+    ]).filter(([sid]) => sid != null)
+  );
+  return _.reduce(
+    (acc, structure) => {
+      const systemId = structure.system_id ?? structure.system?.id ?? null;
+      const normalizedSystemId =
+        systemId != null ? Number(systemId) || systemId : null;
+      const templateId =
+        normalizedSystemId != null
+          ? systemToTemplateId[normalizedSystemId] ?? defaultTemplateId
+          : defaultTemplateId;
+      const key =
+        templateId != null ? String(templateId) : "others";
+      const list = acc[key] ?? [];
+      return { ...acc, [key]: [...list, structure] };
+    },
+    {},
+    structures ?? []
+  );
+};
 
 export const StructureGrantCartCheckout = ({
   grantRequestsCart,
-  checkoutGrantRequest,
+  initGroupTemplates,
+  selectGrantRequestTemplate,
+  selectGrantRequestTemplateForGroup,
+  updateGrantRequestTemplateContentForGroup,
 }) => {
+  const dispatch = useDispatch();
+  const { trigger, isMutating } = useCheckoutGrantRequest();
+  const { resource: templateResourceRelations, default: defaultRelation } =
+    useTemplateRelations({
+      resourceType: "system",
+      listAll: true,
+    });
+  const defaultTemplateId =
+    defaultRelation?.template_id != null
+      ? Number(defaultRelation.template_id) || defaultRelation.template_id
+      : null;
   const { formatMessage } = useIntl();
-  const [isRequesting, setIsRequesting] = useState(false);
+  const { scopesWithRelations = [] } = useWebContext();
+  const {
+    template,
+    templateContent,
+    modificationGrant,
+    validCart,
+    user,
+    structures = [],
+    groupTemplates = {},
+  } = grantRequestsCart;
+
+  const groupedStructures = getGroupedStructuresByTemplate(
+    structures,
+    templateResourceRelations,
+    defaultTemplateId
+  );
+  const groupKeys = _.keys(groupedStructures);
+  const isMultiGroup =
+    !modificationGrant &&
+    scopesWithRelations.includes("gr") &&
+    groupKeys.length > 1;
+
+  const singleGroupKey =
+    !modificationGrant &&
+    scopesWithRelations.includes("gr") &&
+    groupKeys.length === 1
+      ? groupKeys[0]
+      : null;
+
+  const effectiveTemplateIdByKey = useMemo(
+    () =>
+      _.fromPairs(
+        groupKeys.map((k) => [
+          k,
+          k === "others" ? defaultTemplateId : Number(k) || k,
+        ])
+      ),
+    [groupKeys.join(","), defaultTemplateId]
+  );
+
+  const uniqueTemplateIds = useMemo(
+    () => _.uniq(_.compact(_.values(effectiveTemplateIdByKey))),
+    [effectiveTemplateIdByKey]
+  );
 
-  const { template, templateContent, modificationGrant, validCart, user } =
-    grantRequestsCart;
+  const singleTemplateId =
+    !isMultiGroup && singleGroupKey != null
+      ? singleGroupKey === "others"
+        ? defaultTemplateId
+        : Number(singleGroupKey) || singleGroupKey
+      : null;
+
+  const templateIdsToFetch = isMultiGroup
+    ? uniqueTemplateIds
+    : singleTemplateId != null
+      ? [singleTemplateId]
+      : [];
+
+  const templatesById = useTemplatesByIds(templateIdsToFetch);
+
+  const systemTemplates = useMemo(() => {
+    if (!isMultiGroup) return {};
+    const next = {};
+    groupKeys.forEach((k) => {
+      const tid = effectiveTemplateIdByKey[k];
+      const t =
+        tid != null
+          ? templatesById[String(tid)] ?? templatesById[tid]
+          : null;
+      if (t) next[k] = t;
+    });
+    return next;
+  }, [isMultiGroup, groupKeys.join(","), effectiveTemplateIdByKey, templatesById]);
+
+  const singleSystemTemplate = useMemo(
+    () =>
+      singleTemplateId != null
+        ? templatesById[String(singleTemplateId)] ??
+          templatesById[singleTemplateId] ??
+          null
+        : null,
+    [singleTemplateId, templatesById]
+  );
+
+  useEffect(() => {
+    if (!isMultiGroup) return;
+    if (_.isEmpty(uniqueTemplateIds)) {
+      initGroupTemplates(
+        _.fromPairs(
+          groupKeys.map((k) => [
+            k,
+            {
+              template: k === "others" ? null : undefined,
+              templateContent: {},
+              valid: false,
+            },
+          ])
+        )
+      );
+      return;
+    }
+    const allLoaded = uniqueTemplateIds.every(
+      (id) =>
+        templatesById[String(id)] !== undefined ||
+        templatesById[id] !== undefined
+    );
+    if (!allLoaded) return;
+    const getTemplateById = (tid) =>
+      tid != null ? templatesById[String(tid)] ?? templatesById[tid] : null;
+    const initial = _.fromPairs(
+      groupKeys.map((k) => {
+        const t = getTemplateById(effectiveTemplateIdByKey[k])?.name;
+        return [
+          k,
+          {
+            template: t ?? (k === "others" ? null : undefined),
+            templateContent: {},
+            valid: false,
+          },
+        ];
+      })
+    );
+    initGroupTemplates(initial);
+  }, [
+    isMultiGroup,
+    groupKeys.join(","),
+    uniqueTemplateIds.join(","),
+    defaultTemplateId,
+    templatesById,
+    effectiveTemplateIdByKey,
+    initGroupTemplates,
+  ]);
+
+  useEffect(() => {
+    if (isMultiGroup || singleTemplateId == null || !singleSystemTemplate?.name)
+      return;
+    selectGrantRequestTemplate(singleSystemTemplate.name);
+  }, [
+    isMultiGroup,
+    singleTemplateId,
+    singleSystemTemplate?.name,
+    selectGrantRequestTemplate,
+  ]);
+
+  const validCartMulti =
+    isMultiGroup &&
+    user?.valid &&
+    groupKeys.every(
+      (k) => groupTemplates[k]?.template && groupTemplates[k]?.valid
+    );
+
+  const canSubmit = isMultiGroup ? validCartMulti : validCart && user?.valid;
 
   const checkout = () => {
-    const requests = _.map((structure) => {
-      return {
+    let payload;
+    if (isMultiGroup) {
+      const grant_request_groups = groupKeys
+        .filter((k) => _.size(groupedStructures[k]) > 0)
+        .map((key) => {
+          const groupData = groupTemplates[key];
+          const templateName = groupData?.template;
+          const requests = _.map((structure) => ({
+            data_structure_id: structure.id,
+            filters: { rows: structure.filters },
+            metadata: groupData?.templateContent ?? {},
+          }))(groupedStructures[key]);
+          return _.omitBy(_.isNil)({
+            requests,
+            type: templateName,
+            modification_grant_id: modificationGrant?.id ?? null,
+            user_id: user?.id,
+            created_by_id: user?.id,
+          });
+        });
+      payload = { grant_request_groups };
+    } else {
+      const requests = _.map((structure) => ({
         data_structure_id: structure.id,
-        filters: {
-          rows: structure.filters,
-        },
+        filters: { rows: structure.filters },
         metadata: templateContent,
+      }))(structures);
+      payload = {
+        grant_request_group: _.omitBy(_.isNil)({
+          requests,
+          type: template,
+          modification_grant_id: modificationGrant?.id ?? null,
+          user_id: user?.id,
+          created_by_id: user?.id,
+        }),
       };
-    })(grantRequestsCart.structures);
-    const payload = {
-      grant_request_group: _.omitBy(_.isNil)({
-        requests,
-        type: template,
-        modification_grant_id: modificationGrant ? modificationGrant.id : null,
-        user_id: user?.id,
-        created_by_id: user?.id,
-      }),
-    };
-    setIsRequesting(true);
-    checkoutGrantRequest(payload);
+    }
+    dispatch(checkoutGrantRequest.request());
+    trigger(payload)
+      .then((data) => dispatch(checkoutGrantRequest.success(data)))
+      .catch((err) =>
+        dispatch(
+          checkoutGrantRequest.failure(
+            err?.response
+              ? { status: err.response.status, data: err.response.data }
+              : err?.message
+          )
+        )
+      )
+      .finally(() => dispatch(checkoutGrantRequest.fulfill()));
   };
 
   return (
@@ -51,9 +289,7 @@ export const StructureGrantCartCheckout = ({
             <Header as="h2">
               <Header.Content>
                 <FormattedMessage
-                  id={`grantRequest.header.${
-                    modificationGrant ? "update" : "create"
-                  }`}
+                  id={`grantRequest.header.${modificationGrant ? "update" : "create"}`}
                 />
               </Header.Content>
             </Header>
@@ -65,21 +301,91 @@ export const StructureGrantCartCheckout = ({
             <Button
               primary
               onClick={checkout}
-              disabled={!validCart || !user.valid || isRequesting}
+              disabled={!canSubmit || isMutating}
               content={formatMessage({ id: "actions.save" })}
             />
           </GridColumn>
         </Grid.Row>
-        <Grid.Row>
-          <Grid.Column width={5}>
-            <StructureGrantCartInformation
-              isModification={!!modificationGrant}
-            />
-          </Grid.Column>
-          <Grid.Column width={11}>
-            <StructureGrantCart />
-          </Grid.Column>
-        </Grid.Row>
+        {isMultiGroup ? (
+          <>
+            <Grid.Row>
+              <Grid.Column width={16}>
+                <Header as="h4">
+                  <FormattedMessage id="grants.props.user_name" />
+                </Header>
+                <StructureGrantCartUserSelector spacedLabel />
+              </Grid.Column>
+            </Grid.Row>
+            {groupKeys.map((key) => {
+              const groupStructures = groupedStructures[key] ?? [];
+              if (_.isEmpty(groupStructures)) return null;
+              const isOthers = key === "others";
+              const groupData = groupTemplates[key] ?? {};
+              const selectedTemplate = systemTemplates[key];
+              return (
+                <Grid.Row key={key}>
+                  <Grid.Column width={5}>
+                    <Segment className="grant-cart-group-form">
+                      <Header as="h4">
+                        {isOthers ? (
+                          <FormattedMessage id="grantRequest.cart.group.others" />
+                        ) : (
+                          selectedTemplate?.name ?? key
+                        )}
+                      </Header>
+                      <Suspense fallback={null}>
+                        <SelectableDynamicForm
+                          scope="gr"
+                          content={groupData.templateContent ?? {}}
+                          hideLabel
+                          isModification={!!modificationGrant}
+                          selectedTemplate={selectedTemplate}
+                          disableSelector={!!selectedTemplate}
+                          onChange={({ content, valid }) =>
+                            updateGrantRequestTemplateContentForGroup({
+                              key,
+                              content,
+                              valid,
+                            })
+                          }
+                          onNameChange={(name) =>
+                            selectGrantRequestTemplateForGroup({
+                              key,
+                              template: name,
+                            })
+                          }
+                          placeholder={formatMessage({
+                            id: "structure.grant.cart.template.placeholder",
+                          })}
+                          required
+                        />
+                      </Suspense>
+                    </Segment>
+                  </Grid.Column>
+                  <Grid.Column width={11}>
+                    <StructureGrantCart
+                      structureRequestGroups={groupStructures}
+                      allowEmptyCart
+                    />
+                  </Grid.Column>
+                </Grid.Row>
+              );
+            })}
+          </>
+        ) : (
+          <Grid.Row>
+            <Grid.Column width={5}>
+              <StructureGrantCartInformation
+                isModification={!!modificationGrant}
+                selectedTemplate={singleSystemTemplate}
+                disableSelector={!!singleSystemTemplate}
+              />
+            </Grid.Column>
+            <Grid.Column width={11}>
+              <StructureGrantCart />
+            </Grid.Column>
+          </Grid.Row>
+        )}
       </Grid>
     </Segment>
   );
@@ -87,7 +393,10 @@ export const StructureGrantCartCheckout = ({
 
 StructureGrantCartCheckout.propTypes = {
   grantRequestsCart: PropTypes.object,
-  checkoutGrantRequest: PropTypes.func,
+  initGroupTemplates: PropTypes.func,
+  selectGrantRequestTemplate: PropTypes.func,
+  selectGrantRequestTemplateForGroup: PropTypes.func,
+  updateGrantRequestTemplateContentForGroup: PropTypes.func,
 };
 
 const mapStateToProps = ({ grantRequestsCart }) => ({
@@ -95,7 +404,15 @@ const mapStateToProps = ({ grantRequestsCart }) => ({
 });
 
 const mapDispatchToProps = (dispatch) =>
-  bindActionCreators({ checkoutGrantRequest }, dispatch);
+  bindActionCreators(
+    {
+      initGroupTemplates,
+      selectGrantRequestTemplate,
+      selectGrantRequestTemplateForGroup,
+      updateGrantRequestTemplateContentForGroup,
+    },
+    dispatch
+  );
 
 export default connect(
   mapStateToProps,

package/src/components/StructureGrantCartInformation.js

@@ -21,6 +21,8 @@ export const StructureGrantCartInformation = ({
   isModification,
   selectGrantRequestTemplate,
   updateGrantRequestTemplateContent,
+  selectedTemplate,
+  disableSelector,
 }) => {
   const { formatMessage } = useIntl();
   const templateContent = _.pathOr({}, "templateContent")(grantRequestsCart);
@@ -60,6 +62,8 @@ export const StructureGrantCartInformation = ({
             id: `structure.grant.cart.template.placeholder`,
           })}
           required
+          selectedTemplate={selectedTemplate}
+          disableSelector={disableSelector}
         />
       </Form>
     </Segment>
@@ -71,6 +75,8 @@ StructureGrantCartInformation.propTypes = {
   selectGrantRequestTemplate: PropTypes.func,
   updateGrantRequestTemplateContent: PropTypes.func,
   isModification: PropTypes.bool,
+  selectedTemplate: PropTypes.object,
+  disableSelector: PropTypes.bool,
 };
 
 const mapStateToProps = ({ grantRequestsCart }) => ({ grantRequestsCart });

package/src/components/StructureGrantCartUserSelector.js

@@ -14,6 +14,7 @@ import { updateGrantRequestUser } from "../routines";
 export const StructureGrantCartUserSelector = ({
   grantRequestsCart,
   updateGrantRequestUser,
+  spacedLabel,
 }) => {
   const { formatMessage } = useIntl();
   const [usersGroupsQuery, setUsersGroupsQuery] = useState("");
@@ -166,14 +167,27 @@ export const StructureGrantCartUserSelector = ({
         selection
         required={thirdParty}
         label={
-          <Checkbox
-            label={formatMessage({ id: "grantRequestCart.user.label" })}
-            onChange={(e, data) => {
-              setThirdParty(data.checked);
-              selectUser(null);
-            }}
-            checked={thirdParty}
-          />
+          spacedLabel ? (
+            <span className="grant-cart-user-selector-label-spaced">
+              <Checkbox
+                label={formatMessage({ id: "grantRequestCart.user.label" })}
+                onChange={(e, data) => {
+                  setThirdParty(data.checked);
+                  selectUser(null);
+                }}
+                checked={thirdParty}
+              />
+            </span>
+          ) : (
+            <Checkbox
+              label={formatMessage({ id: "grantRequestCart.user.label" })}
+              onChange={(e, data) => {
+                setThirdParty(data.checked);
+                selectUser(null);
+              }}
+              checked={thirdParty}
+            />
+          )
         }
         options={options}
         value={userId}
@@ -186,6 +200,7 @@ export const StructureGrantCartUserSelector = ({
 StructureGrantCartUserSelector.propTypes = {
   grantRequestsCart: PropTypes.object,
   updateGrantRequestUser: PropTypes.func,
+  spacedLabel: PropTypes.bool,
 };
 
 const mapStateToProps = ({ grantRequestsCart }) => ({

package/src/components/__tests__/GrantRequestCartResult.spec.js

@@ -0,0 +1,79 @@
+import { render, waitForLoad } from "@truedat/test/render";
+import { GrantRequestCartResult } from "../GrantRequestCartResult";
+
+jest.mock("../../hooks/useGrantRequestGroupsByIds", () => ({
+  useGrantRequestGroupsByIds: jest.fn(),
+}));
+
+jest.mock("react-router", () => {
+  const actual = jest.requireActual("react-router");
+  return {
+    ...actual,
+    useParams: jest.fn(),
+  };
+});
+
+const { useGrantRequestGroupsByIds } = require("../../hooks/useGrantRequestGroupsByIds");
+const { useParams } = require("react-router");
+
+describe("GrantRequestCartResult", () => {
+  it("matches snapshot when no ids in URL (empty)", async () => {
+    useParams.mockReturnValue({});
+    useGrantRequestGroupsByIds.mockReturnValue({
+      groups: [],
+      isLoading: false,
+      error: null,
+    });
+    const rendered = render(<GrantRequestCartResult />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("matches snapshot when ids in URL and hook returns groups", async () => {
+    useParams.mockReturnValue({ ids: "1-2" });
+    const groups = [
+      { id: 1, type: "Template A" },
+      { id: 2, type: "Template B" },
+    ];
+    useGrantRequestGroupsByIds.mockReturnValue({
+      groups,
+      isLoading: false,
+      error: null,
+    });
+    const rendered = render(<GrantRequestCartResult />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+
+  it("matches snapshot when groups have embedded requests with data structures", async () => {
+    useParams.mockReturnValue({ ids: "1" });
+    const groups = [
+      {
+        id: 1,
+        type: "Template A",
+        _embedded: {
+          requests: [
+            {
+              _embedded: {
+                data_structure: { id: 10, name: "Structure One", external_id: "ext-1" },
+              },
+            },
+            {
+              _embedded: {
+                data_structure: { id: 20, name: "Structure Two", external_id: "ext-2" },
+              },
+            },
+          ],
+        },
+      },
+    ];
+    useGrantRequestGroupsByIds.mockReturnValue({
+      groups,
+      isLoading: false,
+      error: null,
+    });
+    const rendered = render(<GrantRequestCartResult />);
+    await waitForLoad(rendered);
+    expect(rendered.container).toMatchSnapshot();
+  });
+});