@truedat/dd 4.49.9 → 4.50.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## [4.50.2] 2022-08-26
+
+### Added
+
+- [TD-5078] Support for creating a modification GrantRequestGroup
+
 ## [4.49.5] 2022-08-03
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "4.49.9",
+  "version": "4.50.3",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "jsnext:main": "src/index.js",
@@ -88,9 +88,9 @@
   },
   "dependencies": {
     "@apollo/client": "^3.6.4",
-    "@truedat/auth": "4.49.9",
-    "@truedat/core": "4.49.9",
-    "@truedat/df": "4.49.9",
+    "@truedat/auth": "4.50.3",
+    "@truedat/core": "4.50.3",
+    "@truedat/df": "4.50.3",
     "lodash": "^4.17.21",
     "path-to-regexp": "^1.7.0",
     "prop-types": "^15.8.1",
@@ -112,5 +112,5 @@
     "react-dom": ">= 16.8.6 < 17",
     "semantic-ui-react": ">= 0.88.2 < 2.1"
   },
-  "gitHead": "45bbf362a6bc6a075d779997b373bd0935cef100"
+  "gitHead": "ecf9302d2b22a74d3339a85398788a68e086c428"
 }

package/src/api/queries.js

@@ -79,3 +79,19 @@ export const REFERENCE_DATASET_QUERY = gql`
     }
   }
 `;
+
+export const LATEST_GRANT_REQUEST_QUERY = gql`
+  query latestGrantRequest($id: ID!) {
+    latestGrantRequest(data_structure_id: $id) {
+      id
+      group {
+        grant {
+          id
+        }
+      }
+      status {
+        status
+      }
+    }
+  }
+`;

package/src/api.js

@@ -10,6 +10,7 @@ const API_PROFILE_EXECUTION = "/api/profile_executions/:id";
 const API_REFERENCE_DATA_DOWNLOAD = "/api/reference_data/:id/csv";
 const API_GRANT_REQUEST = "/api/grant_requests/:id";
 const API_GRANT_REQUEST_APPROVALS = "/api/grant_requests/:id/approvals";
+const API_GRANT_REQUEST_STATUS = "/api/grant_requests/:id/status";
 const API_GRANT_REQUEST_GROUP = "/api/grant_request_groups";
 const API_GRANT_REQUESTS = "/api/grant_requests";
 const API_GRANT = "/api/grants/:id";
@@ -57,6 +58,7 @@ export {
   API_GRANT_FILTERS_SEARCH,
   API_GRANT_REQUEST,
   API_GRANT_REQUEST_APPROVALS,
+  API_GRANT_REQUEST_STATUS,
   API_GRANT_REQUEST_GROUP,
   API_GRANT_REQUESTS,
   API_GRANTS_SEARCH,

package/src/components/GrantChangeRequest.js

@@ -0,0 +1,32 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useHistory } from "react-router-dom";
+import { linkTo } from "@truedat/core/routes";
+import { setGrantChangeRequestCart } from "../routines";
+
+export const GrantChangeRequest = ({
+  structure,
+  grant,
+  setGrantChangeRequestCart,
+  children,
+}) => {
+  const history = useHistory();
+  if (!structure) return;
+
+  return React.cloneElement(children, {
+    onClick: () => {
+      setGrantChangeRequestCart({ structure, grant });
+      history.push(linkTo.GRANTS_REQUESTS_CHECKOUT());
+    },
+  });
+};
+
+GrantChangeRequest.propTypes = {
+  structure: PropTypes.object,
+  grant: PropTypes.object,
+  setGrantChangeRequestCart: PropTypes.func,
+  children: PropTypes.node,
+};
+
+export default connect(null, { setGrantChangeRequestCart })(GrantChangeRequest);

package/src/components/GrantRequestCancel.js

@@ -0,0 +1,47 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { connect } from "react-redux";
+import { useIntl } from "react-intl";
+import { ConfirmModal } from "@truedat/core/components";
+import { createGrantRequestStatus } from "../routines";
+
+export const GrantRequestCancel = ({
+  structureId,
+  grantRequest,
+  createGrantRequestStatus,
+  children,
+}) => {
+  const { formatMessage } = useIntl();
+
+  if (!grantRequest) return;
+
+  return (
+    <ConfirmModal
+      trigger={children}
+      header={formatMessage({
+        id: "grantRequest.actions.cancel.confirmation.header",
+      })}
+      content={formatMessage({
+        id: "grantRequest.actions.cancel.confirmation.content",
+      })}
+      onConfirm={() =>
+        createGrantRequestStatus({
+          structureId,
+          grantRequestId: grantRequest.id,
+          status: "cancelled",
+        })
+      }
+      onOpen={(e) => e.stopPropagation()}
+      onClose={(e) => e.stopPropagation()}
+    />
+  );
+};
+
+GrantRequestCancel.propTypes = {
+  structureId: PropTypes.number,
+  grantRequest: PropTypes.object,
+  createGrantRequestStatus: PropTypes.func,
+  children: PropTypes.node,
+};
+
+export default connect(null, { createGrantRequestStatus })(GrantRequestCancel);

package/src/components/GrantRequestHeader.js

@@ -7,6 +7,10 @@ import { Header, Grid, Icon } from "semantic-ui-react";
 import GrantRequestApprovalPopup from "./GrantRequestApprovalPopup";
 
 export const GrantRequestHeader = ({ grantRequest }) => {
+  const isModification = _.prop("_embedded.group._embedded.modification_grant")(
+    grantRequest
+  );
+
   const { formatMessage } = useIntl();
   const canApprove =
     grantRequest?.status === "pending" &&
@@ -17,7 +21,11 @@ export const GrantRequestHeader = ({ grantRequest }) => {
         <Header as="h2">
           <Icon circular name="key" />
           <Header.Content>
-            {formatMessage({ id: "grantRequest.header" })}
+            {formatMessage({
+              id: isModification
+                ? "grantRequest.header.modification"
+                : "grantRequest.header",
+            })}
           </Header.Content>
         </Header>
       </Grid.Column>

package/src/components/MyGrantRequests.js

@@ -16,6 +16,7 @@ const STATUS = [
   "processing",
   "processed",
   "failed",
+  "cancelled",
 ];
 const DEFAULT_STATUS = ["pending", "approved", "rejected", "processing"];
 

package/src/components/StructureGrantButton.js

@@ -1,63 +1,43 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Icon, Label, Popup } from "semantic-ui-react";
+import { useQuery } from "@apollo/client";
 import { connect } from "react-redux";
-import { useIntl } from "react-intl";
-import { DateTime } from "@truedat/core/components";
-import GrantRemoval from "./GrantRemoval";
+import { Loading } from "@truedat/core/components";
+import { LATEST_GRANT_REQUEST_QUERY } from "../api/queries";
 import StructureGrantRequestButton from "./StructureGrantRequestButton";
+import StructureGrantDropdown from "./StructureGrantDropdown";
 
-const isNilOrEmpty = (value) => _.isEmpty(value) || _.isNil(value);
-export const StructureGrantButton = ({ structure, structureGrantPopup }) => {
-  const { formatMessage } = useIntl();
-  const { grant } = structure;
+export const StructureGrantButton = ({ structure }) => {
+  const { grant, id } = structure;
 
-  const popupContent = _.flow(
-    _.reject(({ field }) => isNilOrEmpty(_.get(field)(grant))),
-    _.map(({ field, type }) => {
-      switch (type) {
-        case "datetime":
-          return <DateTime value={_.get(field)(grant)} key={field} />;
-        default:
-          return <div key={field}>{_.get(field)(grant)}</div>;
-      }
-    })
-  )(structureGrantPopup);
+  const { loading, error, data } = useQuery(LATEST_GRANT_REQUEST_QUERY, {
+    fetchPolicy: "cache-and-network",
+    variables: { id },
+  });
+  if (error) return null;
+  if (loading) return <Loading />;
 
-  const label = grant ? (
-    grant.pending_removal ? (
-      <Label color="orange">
-        <Icon name="shield" />
-        {formatMessage({ id: "structure.grant.has_grant_pending_removal" })}
-        <GrantRemoval grant={grant}>
-          <Icon name="undo" />
-        </GrantRemoval>
-      </Label>
-    ) : (
-      <Label color="green">
-        <Icon name="shield" />
-        {formatMessage({ id: "structure.grant.has_grant" })}
-        <GrantRemoval grant={grant}>
-          <Icon name="delete" />
-        </GrantRemoval>
-      </Label>
-    )
+  const grantRequest = _.prop("latestGrantRequest")(data);
+  const isActiveRequest = _.includes(_.prop("status.status")(grantRequest))([
+    "pending",
+    "approved",
+    "processing",
+  ]);
+
+  return grant || isActiveRequest ? (
+    <StructureGrantDropdown
+      grantRequest={isActiveRequest ? grantRequest : null}
+    />
   ) : (
     <StructureGrantRequestButton />
   );
-  return _.isEmpty(popupContent) ? (
-    label
-  ) : (
-    <Popup content={popupContent} trigger={label} />
-  );
 };
 
 StructureGrantButton.propTypes = {
   structure: PropTypes.object,
-  structureGrantPopup: PropTypes.array,
 };
 
-const mapStateToProps = _.pick(["structure", "structureGrantPopup"]);
+const mapStateToProps = ({ structure }) => ({ structure });
 
 export default connect(mapStateToProps)(StructureGrantButton);

package/src/components/StructureGrantCart.js

@@ -53,9 +53,9 @@ export const StructureGrantCart = ({
   const hasFilters = _.flow(_.pathOr([], "filters"), _.negate(_.isEmpty));
 
   const setRowValue =
-    (structure_id) =>
+    (structureId) =>
     ({ index, value }) => {
-      updateGrantRequestFilter({ index, value, structure_id });
+      updateGrantRequestFilter({ index, value, structureId });
     };
 
   return (

package/src/components/StructureGrantCartCheckout.js

@@ -1,12 +1,11 @@
 import _ from "lodash/fp";
 import React from "react";
 import PropTypes from "prop-types";
-import { Segment, Grid, Button, GridColumn } from "semantic-ui-react";
+import { Header, Segment, Grid, Button, GridColumn } from "semantic-ui-react";
 import { bindActionCreators } from "redux";
 import { connect } from "react-redux";
 import { HistoryBackButton } from "@truedat/core/components";
-import { useIntl } from "react-intl";
-import { applyTemplate, validateContent } from "@truedat/df/utils";
+import { useIntl, FormattedMessage } from "react-intl";
 import { checkoutGrantRequest } from "../routines";
 import StructureGrantCart from "./StructureGrantCart";
 import StructureGrantCartTemplate from "./StructureGrantCartTemplate";
@@ -17,29 +16,24 @@ export const StructureGrantCartCheckout = ({
 }) => {
   const { formatMessage } = useIntl();
 
-  const template = grantRequestsCart.template;
-  const content = grantRequestsCart.templateContent;
-
-  const is_invalid_template =
-    !template || _.size(validateContent(template)(content)) > 0;
-
-  const valid_cart = !is_invalid_template;
+  const { template, templateContent, modificationGrant, validCart } =
+    grantRequestsCart;
 
   const checkout = () => {
-    const metadata = applyTemplate(template)(content);
     const requests = _.map((structure) => {
       return {
         data_structure_id: structure.id,
         filters: {
           rows: structure.filters,
         },
-        metadata: metadata,
+        metadata: templateContent,
       };
     })(grantRequestsCart.structures);
     const payload = {
       grant_request_group: {
         requests,
-        type: template.name,
+        type: template,
+        modification_grant_id: modificationGrant ? modificationGrant.id : null,
       },
     };
     checkoutGrantRequest(payload);
@@ -49,14 +43,25 @@ export const StructureGrantCartCheckout = ({
     <Segment className="structures">
       <Grid>
         <Grid.Row>
-          <GridColumn floated="right" textAlign="right">
+          <GridColumn width={8}>
+            <Header as="h2">
+              <Header.Content>
+                <FormattedMessage
+                  id={`grantRequest.header.${
+                    modificationGrant ? "update" : "create"
+                  }`}
+                />
+              </Header.Content>
+            </Header>
+          </GridColumn>
+          <GridColumn width={8} textAlign="right">
             <HistoryBackButton
               content={formatMessage({ id: "actions.cancel" })}
             />
             <Button
               primary
               onClick={checkout}
-              disabled={!valid_cart}
+              disabled={!validCart}
               content={formatMessage({ id: "actions.save" })}
             />
           </GridColumn>

package/src/components/StructureGrantCartTemplate.js

@@ -1,51 +1,26 @@
 import _ from "lodash/fp";
-import React, { useEffect } from "react";
+import React from "react";
 import PropTypes from "prop-types";
-import { Segment, Dropdown, Divider, Form, Header } from "semantic-ui-react";
+import { Segment, Divider, Form, Header } from "semantic-ui-react";
 import { connect } from "react-redux";
 import { useIntl } from "react-intl";
 import {
-  fetchGrantRequestTemplates,
   selectGrantRequestTemplate,
   updateGrantRequestTemplateContent,
 } from "../routines";
 
-const DynamicForm = React.lazy(() =>
-  import("@truedat/df/components/DynamicForm")
+const SelectableDynamicForm = React.lazy(() =>
+  import("@truedat/df/components/SelectableDynamicForm")
 );
 
 export const StructureGrantCartTemplate = ({
   grantRequestsCart,
-  templateContent,
-  fetchGrantRequestTemplates,
   selectGrantRequestTemplate,
   updateGrantRequestTemplateContent,
 }) => {
   const { formatMessage } = useIntl();
 
-  const template = _.pathOr(null, "template")(grantRequestsCart);
-  const templates = _.pathOr(null, "templates")(grantRequestsCart);
-  const templatesLoading = _.pathOr(
-    false,
-    "templatesLoading"
-  )(grantRequestsCart);
-  const singleTemplate = _.size(templates) === 1;
-
-  useEffect(() => {
-    fetchGrantRequestTemplates();
-  }, [fetchGrantRequestTemplates]);
-
-  useEffect(() => {
-    if (singleTemplate) {
-      const defaultTemplate = _.head(templates);
-      selectGrantRequestTemplate(defaultTemplate?.id);
-    }
-  }, [singleTemplate, selectGrantRequestTemplate, templates]);
-
-  const getOptions = _.map((template) => {
-    const { id, name } = _.pick(["id", "name"])(template);
-    return { key: id, value: id, text: name };
-  });
+  const templateContent = _.pathOr({}, "templateContent")(grantRequestsCart);
 
   return (
     <Segment>
@@ -55,53 +30,32 @@ export const StructureGrantCartTemplate = ({
         {formatMessage({ id: `structure.grant.cart.template` })}
       </Header>
       <Divider />
-      {!singleTemplate && (
-        <Dropdown
+      <Form>
+        <SelectableDynamicForm
+          scope="gr"
+          required
+          content={templateContent}
+          onChange={updateGrantRequestTemplateContent}
+          onNameChange={selectGrantRequestTemplate}
           placeholder={formatMessage({
             id: `structure.grant.cart.template.placeholder`,
           })}
-          label={formatMessage({ id: "structureType.template" })}
-          name="template_id"
-          fluid
-          onChange={(_e, { value }) => selectGrantRequestTemplate(value)}
-          options={getOptions(templates) || []}
-          selection
-          clearable
-          loading={templatesLoading}
-          value={template?.id || ""}
+          hideLabel
         />
-      )}
-      {template ? (
-        <>
-          <Divider />
-          <Form>
-            <DynamicForm
-              onChange={updateGrantRequestTemplateContent}
-              template={template}
-              content={templateContent}
-            />
-          </Form>
-        </>
-      ) : null}
+      </Form>
     </Segment>
   );
 };
 
 StructureGrantCartTemplate.propTypes = {
   grantRequestsCart: PropTypes.object,
-  templateContent: PropTypes.object,
-  fetchGrantRequestTemplates: PropTypes.func,
   selectGrantRequestTemplate: PropTypes.func,
   updateGrantRequestTemplateContent: PropTypes.func,
 };
 
-const mapStateToProps = ({ grantRequestsCart }) => ({
-  grantRequestsCart,
-  templateContent: _.pathOr({}, "templateContent")(grantRequestsCart),
-});
+const mapStateToProps = ({ grantRequestsCart }) => ({ grantRequestsCart });
 
 export default connect(mapStateToProps, {
-  fetchGrantRequestTemplates,
   selectGrantRequestTemplate,
   updateGrantRequestTemplateContent,
 })(StructureGrantCartTemplate);