@truedat/dd 8.9.1 → 8.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@truedat/dd",
-  "version": "8.9.1",
+  "version": "8.10.0",
   "description": "Truedat Web Data Dictionary",
   "sideEffects": false,
   "module": "src/index.js",
@@ -51,7 +51,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@truedat/test": "8.9.1",
+    "@truedat/test": "8.10.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "redux-saga-test-plan": "^4.0.6"
@@ -86,5 +86,5 @@
     "svg-pan-zoom": "^3.6.2",
     "swr": "^2.3.3"
   },
-  "gitHead": "778d7597a979b8c64dd2bbd5d512fd7c4a24b453"
+  "gitHead": "f18f60e317c52a90197068ed60908966ca7f58f0"
 }

package/src/api.js

@@ -19,6 +19,7 @@ const API_GRANT_REQUEST_STATUS = "/api/grant_requests/:id/status";
 const API_GRANT_REQUEST_GROUP = "/api/grant_request_groups";
 const API_GRANT_REQUEST_GROUPS_BULK = "/api/grant_request_groups/bulk";
 const API_GRANT_REQUESTS = "/api/grant_requests";
+const API_GRANT_REQUESTS_DOWNLOAD = "/api/grant_requests/xlsx/download";
 const API_GRANT_REQUEST_BULK_APPROVAL = "/api/grant_requests/bulk_approval";
 const API_GRANT_REQUESTS_SEARCH = "/api/grant_requests/search";
 const API_GRANT_REQUESTS_FILTERS_SEARCH = "/api/grant_requests_filters/search";
@@ -82,6 +83,7 @@ export {
   API_GRANT_REQUESTS,
   API_GRANT_REQUESTS_SEARCH,
   API_GRANT_REQUESTS_FILTERS_SEARCH,
+  API_GRANT_REQUESTS_DOWNLOAD,
   API_GRANTS_SEARCH,
   API_GRAPH,
   API_GRAPH_HASH,

package/src/components/GrantRequestBulkActions.js

@@ -9,17 +9,17 @@ import { GRANT_REQUESTS_APPROVALS_RESULT } from "@truedat/core/routes";
 import { useGrantRequestBulkApproval } from "@truedat/dd/hooks/useGrantRequest";
 import GrantRequestBulkApprovalPopup from "./GrantRequestBulkApprovalPopup";
 
-// import GrantRequestBulkRoleSelector from "./GrantRequestBulkRoleSelector";
-
 export const GrantRequestBulkActions = ({
-  selectedGrantRequests,
-  cleanSelectedGrantRequests,
+  selectedGrantRequests = [],
+  cleanSelectedGrantRequests = () => {},
+  approveView = true,
 }) => {
   const {
     searchData,
     loading,
     toggleHiddenFilterValue,
     resetFilters,
+    setHiddenFilters,
     searchMust,
     cleanQuery,
   } = useSearchContext();
@@ -30,10 +30,17 @@ export const GrantRequestBulkActions = ({
   const { trigger } = useGrantRequestBulkApproval();
 
   const selectRole = (role) => {
-    setSelectedRole(role);
     resetFilters();
     cleanSelectedGrantRequests();
     cleanQuery();
+
+    if (!role) {
+      setSelectedRole(null);
+      setHiddenFilters({});
+      return;
+    }
+
+    setSelectedRole(role);
     toggleHiddenFilterValue({
       filter: "must_not_approved_by",
       value: [role],
@@ -44,10 +51,12 @@ export const GrantRequestBulkActions = ({
   const grantRequests = _.propOr([], "data")(searchData);
   const zeroResults = _.isEmpty(grantRequests);
 
-  const firstRole = _.first(rolesPermission);
   useEffect(() => {
-    selectRole(firstRole);
-  }, [firstRole]);
+    if (!approveView) {
+      setSelectedRole(null);
+      cleanSelectedGrantRequests();
+    }
+  }, [approveView]);
 
   const onSubmit = ({ comment, isRejection }) => {
     setSaving(true);
@@ -77,34 +86,59 @@ export const GrantRequestBulkActions = ({
     _.sortBy(_.identity),
     _.map((role) => ({ key: role, value: role, text: role })),
   )(rolesPermission);
+  const roleSelectorPlaceholder = formatMessage({
+    id: "grantRequestApproval.form.role.select",
+    defaultMessage: "Seleccione un rol",
+  });
+  const firstRole = _.first(rolesPermission);
+  useEffect(() => {
+    selectRole(firstRole);
+  }, [firstRole]);
+
+  const roleSelectorOptions = [
+    {
+      key: "select-role",
+      text: roleSelectorPlaceholder,
+      disabled: true,
+      className: "header",
+    },
+    ...roleOptions,
+  ];
 
   return (
     <>
-      <Dropdown
-        className="grant-requests-bulk-role-selector"
-        placeholder={formatMessage({
-          id: "grantRequestApproval.form.role.select",
-        })}
-        selection
-        options={roleOptions}
-        onChange={(_e, { value }) => selectRole(value)}
-        value={selectedRole}
-      />
-      <GrantRequestBulkApprovalPopup
-        onSubmit={onSubmit}
-        content={formatMessage({ id: "grantRequest.actions.approve" })}
-        disabled={_.isNil(selectedRole) || loading || zeroResults}
-        loading={saving}
-        primary
-      />
-      <GrantRequestBulkApprovalPopup
-        onSubmit={onSubmit}
-        isRejection
-        content={formatMessage({ id: "grantRequest.actions.reject" })}
-        disabled={_.isNil(selectedRole) || loading || zeroResults}
-        loading={saving}
-        secondary
-      />
+      {approveView ? (
+        <>
+          <Dropdown
+            className={`grant-requests-bulk-role-selector ${
+              selectedRole ? "" : "grant-requests-bulk-role-selector-empty"
+            }`}
+            placeholder={formatMessage({
+              id: "grantRequestApproval.form.role.select",
+              defaultMessage: "Seleccione un rol",
+            })}
+            selection
+            options={roleSelectorOptions}
+            onChange={(_e, { value }) => selectRole(value)}
+            value={selectedRole || ""}
+          />
+          <GrantRequestBulkApprovalPopup
+            onSubmit={onSubmit}
+            content={formatMessage({ id: "grantRequest.actions.approve" })}
+            disabled={_.isNil(selectedRole) || loading || zeroResults}
+            loading={saving}
+            primary
+          />
+          <GrantRequestBulkApprovalPopup
+            onSubmit={onSubmit}
+            isRejection
+            content={formatMessage({ id: "grantRequest.actions.reject" })}
+            disabled={_.isNil(selectedRole) || loading || zeroResults}
+            loading={saving}
+            secondary
+          />
+        </>
+      ) : null}
     </>
   );
 };
@@ -112,6 +146,7 @@ export const GrantRequestBulkActions = ({
 GrantRequestBulkActions.propTypes = {
   selectedGrantRequests: PropTypes.array,
   cleanSelectedGrantRequests: PropTypes.func,
+  approveView: PropTypes.bool,
 };
 
 export default GrantRequestBulkActions;

package/src/components/GrantRequestBulkApprovalPopup.js

@@ -1,43 +1,54 @@
 import { useState } from "react";
-import { Button, Popup } from "semantic-ui-react";
 import PropTypes from "prop-types";
+import { Button, Popup } from "semantic-ui-react";
 import GrantRequestBulkApprovalForm from "./GrantRequestBulkApprovalForm";
 
 export const GrantRequestBulkApprovalPopup = ({
   onSubmit,
   isRejection,
+  content,
+  className,
   ...buttonProps
 }) => {
   const [open, setOpen] = useState(false);
+  const buttonClassName = [
+    "button icon group-actions grant-requests-approval-button",
+    className,
+  ]
+    .filter(Boolean)
+    .join(" ");
 
   return (
     <Popup
       on="click"
-      basic
-      flowing
-      content={
-        <GrantRequestBulkApprovalForm
-          onSubmit={(item) => onSubmit(item, () => setOpen(false))}
-          isRejection={isRejection}
-        />
-      }
-      onOpen={() => setOpen(true)}
+      modal
       onClose={() => setOpen(false)}
+      onOpen={() => setOpen(true)}
       open={open}
-      position="bottom right"
+      closeOnDocumentClick={false}
+      wide="very"
       size="large"
       positionFixed
       trigger={
-        <Button className="button icon group-actions" {...buttonProps} />
+        <Button className={buttonClassName} {...buttonProps}>
+          {content}
+        </Button>
       }
-    />
+    >
+      <GrantRequestBulkApprovalForm
+        onSubmit={onSubmit}
+        isRejection={isRejection}
+        onCancel={() => setOpen(false)}
+      />
+    </Popup>
   );
 };
 
 GrantRequestBulkApprovalPopup.propTypes = {
-  grantRequest: PropTypes.object,
   isRejection: PropTypes.bool,
   saving: PropTypes.bool,
   onSubmit: PropTypes.func,
+  content: PropTypes.node,
+  className: PropTypes.string,
 };
 export default GrantRequestBulkApprovalPopup;

package/src/components/GrantRequestRow.js

@@ -1,7 +1,7 @@
 import _ from "lodash/fp";
 import PropTypes from "prop-types";
-import { Checkbox, Table } from "semantic-ui-react";
 import { useNavigate } from "react-router";
+import { Checkbox, Table } from "semantic-ui-react";
 import { linkTo } from "@truedat/core/routes";
 import { columnDecoratorComponent } from "@truedat/core/services";
 
@@ -40,10 +40,6 @@ export const GrantRequestRow = ({
           key={key}
           textAlign={column.textAlign}
           onClick={(ev) => {
-            /* Only do history.push if the table cell but not
-             * some possibly contained anchor (or an element
-             * inside an anchor, such as an icon) is clicked
-             */
             !ev.target.closest("a") &&
               navigate(linkTo.GRANT_REQUEST(grantRequest));
           }}

package/src/components/GrantRequestsDownloadButton.js

@@ -0,0 +1,81 @@
+import _ from "lodash/fp";
+import { useEffect } from "react";
+import PropTypes from "prop-types";
+import { Button } from "semantic-ui-react";
+import { useIntl } from "react-intl";
+import { useSearchContext } from "@truedat/core/search/SearchContext";
+import { useGrantRequestsDownload } from "../hooks/useGrantRequest";
+
+const staticLabels = [
+  "current_status",
+  "user_full_name",
+  "created_by_full_name",
+  "structure_external_id",
+  "domains",
+  "system_name",
+  "structure_path",
+  "request_type",
+];
+
+export const GrantRequestsDownloadButton = ({
+  searchBy,
+  setDownloading,
+  selectedGrantRequests = [],
+}) => {
+  const { formatMessage, locale } = useIntl();
+
+  const {
+    searchData,
+    loading: grantRequestsLoading,
+    filterParams: searchParams,
+  } = useSearchContext();
+
+  const { trigger: triggerDownload, isMutating: grantRequestsDownloading } =
+    useGrantRequestsDownload();
+
+  useEffect(() => {
+    setDownloading(grantRequestsDownloading);
+  }, [setDownloading, grantRequestsDownloading]);
+
+  const grantRequests = searchData?.data;
+
+  const headerLabels = _.flow(
+    _.map((l) => [l, formatMessage({ id: `grantRequests.props.${l}` })]),
+    _.fromPairs,
+  )(staticLabels);
+
+  return (
+    <Button
+      secondary
+      icon="download"
+      onClick={() =>
+        triggerDownload({
+          search_by: searchBy,
+          header_labels: headerLabels,
+          lang: locale,
+          ...(_.isEmpty(selectedGrantRequests)
+            ? searchParams
+            : { must: { id: selectedGrantRequests } }),
+        })
+      }
+      loading={grantRequestsDownloading}
+      disabled={
+        grantRequestsLoading ||
+        (_.isEmpty(selectedGrantRequests) &&
+          (_.isEmpty(grantRequests) || _.isEmpty(searchParams)))
+      }
+      data-tooltip={formatMessage({
+        id: "grantRequest.actions.download.tooltip",
+      })}
+      data-position="top right"
+    />
+  );
+};
+
+GrantRequestsDownloadButton.propTypes = {
+  searchBy: PropTypes.oneOf(["approve", "all"]),
+  setDownloading: PropTypes.func,
+  selectedGrantRequests: PropTypes.array,
+};
+
+export default GrantRequestsDownloadButton;

package/src/components/GrantRequestsLabelResults.js

@@ -1,29 +1,35 @@
+import _ from "lodash/fp";
 import PropTypes from "prop-types";
 import { FormattedMessage } from "react-intl";
 import { Label } from "semantic-ui-react";
 import { useSearchContext } from "@truedat/core/search/SearchContext";
 
 export const GrantRequestsLabelResults = ({ selectedCount, approveView }) => {
-  const { count, loading } = useSearchContext();
+  const { count, searchMust } = useSearchContext();
+
+  const hasRoleSelected = !_.isEmpty(
+    _.prop("must_not_approved_by")(searchMust),
+  );
+
+  const displayCount =
+    approveView && !selectedCount && hasRoleSelected
+      ? count
+      : (selectedCount ?? count);
 
   return (
     <div className="grant-requests-bulk-label-results">
       <Label>
-        {loading ? (
-          <FormattedMessage id="grantRequests.searching" />
-        ) : (
-          <FormattedMessage
-            id="grantRequests.retrieved.results"
-            values={{ count }}
-          />
-        )}
+        <FormattedMessage
+          id="grantRequests.retrieved.results"
+          values={{ count }}
+        />
       </Label>
-      {!loading && approveView ? (
+      {approveView ? (
         <Label>
           <FormattedMessage
             id="grantRequests.bulk.selected"
             values={{
-              count: selectedCount || count,
+              count: displayCount,
             }}
           />
         </Label>

package/src/components/GrantRequestsSearchResults.js

@@ -7,8 +7,7 @@ import {
   Segment,
   Dimmer,
   Loader,
-  GridColumn,
-  GridRow,
+  Divider,
 } from "semantic-ui-react";
 import { FormattedMessage, useIntl } from "react-intl";
 import SearchWidget from "@truedat/core/search/SearchWidget";
@@ -17,6 +16,7 @@ import Pagination from "@truedat/core/search/Pagination";
 import GrantRequestBulkActions from "./GrantRequestBulkActions";
 import GrantRequestsTable from "./GrantRequestsTable";
 import GrantRequestsLabelResults from "./GrantRequestsLabelResults";
+import GrantRequestsDownloadButton from "./GrantRequestsDownloadButton";
 
 export const GrantRequestsSearchResults = () => {
   const { searchData, loading, setOnSearchChange, setHiddenFilters } =
@@ -42,6 +42,7 @@ export const GrantRequestsSearchResults = () => {
 
   const setSearchView = () => {
     setApproveView(false);
+    cleanSelection();
     setHiddenFilters({});
   };
 
@@ -92,73 +93,82 @@ export const GrantRequestsSearchResults = () => {
 
   return (
     <Segment>
-      <Header as="h2">
-        <Icon
-          circular
-          name={formatMessage({
-            id: "grant.header.icon",
-            defaultMessage: "key",
-          })}
-        />
-        <Header.Content>
-          <FormattedMessage id={"grantRequests.header.approve"} />
-          <Header.Subheader>
-            <FormattedMessage id={"grantRequests.subheader.approve"} />
-          </Header.Subheader>
-        </Header.Content>
-      </Header>
+      <div className="grant-requests-header">
+        <Header as="h2">
+          <Icon
+            circular
+            name={formatMessage({
+              id: "grant.header.icon",
+              defaultMessage: "key",
+            })}
+          />
+          <Header.Content>
+            <FormattedMessage id={"grantRequests.header.approve"} />
+            <Header.Subheader>
+              <FormattedMessage id={"grantRequests.subheader.approve"} />
+            </Header.Subheader>
+          </Header.Content>
+        </Header>
+        {hasApproveRoles ? (
+          <div
+            className={`grant-requests-view-actions ${
+              approveView
+                ? "grant-requests-view-actions-approve"
+                : "grant-requests-view-actions-search"
+            }`}
+          >
+            <Button
+              active={approveView}
+              className="grant-requests-view-button"
+              onClick={() => setApproveView(true)}
+            >
+              <FormattedMessage
+                id="grantRequests.view.approve"
+                defaultMessage="Approve view"
+              />
+            </Button>
+            <Button
+              active={!approveView}
+              className="grant-requests-view-button"
+              onClick={() => setSearchView()}
+            >
+              <FormattedMessage
+                id="grantRequests.view.list"
+                defaultMessage="List view"
+              />
+            </Button>
+          </div>
+        ) : null}
+      </div>
+      <Divider hidden />
       <Segment attached="bottom">
-        <div className="grant-requests-bulk-actions">
-          <div>
+        <div className="grant-requests-toolbar">
+          <div className="grant-requests-search">
             <SearchWidget />
           </div>
-          <div>
-            {hasApproveRoles ? (
-              <>
-                <GridRow className="grant-requests-approve-actions">
-                  <GridColumn width={5}>
-                    <Button.Group>
-                      <Button
-                        active={approveView}
-                        icon
-                        onClick={() => setApproveView(true)}
-                      >
-                        Approve view
-                      </Button>
-                      <Button
-                        active={!approveView}
-                        icon
-                        onClick={() => setSearchView()}
-                      >
-                        Search view
-                      </Button>
-                    </Button.Group>
-                  </GridColumn>
-                </GridRow>
-                {approveView ? (
-                  <GridRow>
-                    <GridColumn textAlign="right" width={5}>
-                      <GrantRequestBulkActions
-                        selectedGrantRequests={selectedGrantRequests}
-                        cleanSelectedGrantRequests={cleanSelection}
-                      />
-                    </GridColumn>
-                  </GridRow>
-                ) : null}
-              </>
+          <div className="grant-requests-approve-actions">
+            {hasApproveRoles && approveView ? (
+              <GrantRequestBulkActions
+                selectedGrantRequests={selectedGrantRequests}
+                cleanSelectedGrantRequests={cleanSelection}
+                approveView={approveView}
+              />
             ) : null}
           </div>
+          <div className="grant-requests-download-actions">
+            <GrantRequestsDownloadButton
+              searchBy={approveView ? "approve" : "all"}
+              setDownloading={() => {}}
+              selectedGrantRequests={selectedGrantRequests}
+            />
+          </div>
         </div>
+        <GrantRequestsLabelResults
+          approveView={approveView}
+          selectedCount={_.size(selectedGrantRequests)}
+        />
         <Dimmer.Dimmable dimmed={loading}>
-          {loading ? (
-            <Dimmer active inverted>
-              <Loader />
-            </Dimmer>
-          ) : null}
-          <GrantRequestsLabelResults
-            approveView={approveView}
-            selectedCount={_.size(selectedGrantRequests)}
-          />
+          <Dimmer active={loading} inverted />
           <GrantRequestsTable
             approveView={approveView}
             addAll={addAll}