@truedat/dd 8.9.1 → 8.10.1

package/src/components/__tests__/__snapshots__/GrantRequestsSearchResults.spec.js.snap

@@ -5,31 +5,54 @@ exports[`<GrantRequestsSearchResults /> matches the latest snapshot 1`] = `
   <div
     class="ui segment"
   >
-    <h2
-      class="ui header"
+    <div
+      class="grant-requests-header"
     >
-      <i
-        aria-hidden="true"
-        class="key circular icon"
-      />
-      <div
-        class="content"
+      <h2
+        class="ui header"
       >
-        grantRequests.header.approve
+        <i
+          aria-hidden="true"
+          class="key circular icon"
+        />
         <div
-          class="sub header"
+          class="content"
         >
-          grantRequests.subheader.approve
+          grantRequests.header.approve
+          <div
+            class="sub header"
+          >
+            grantRequests.subheader.approve
+          </div>
         </div>
+      </h2>
+      <div
+        class="grant-requests-view-actions grant-requests-view-actions-approve"
+      >
+        <button
+          class="ui active button grant-requests-view-button"
+        >
+          Approve view
+        </button>
+        <button
+          class="ui button grant-requests-view-button"
+        >
+          List view
+        </button>
       </div>
-    </h2>
+    </div>
+    <div
+      class="ui hidden divider"
+    />
     <div
       class="ui bottom attached segment"
     >
       <div
-        class="grant-requests-bulk-actions"
+        class="grant-requests-toolbar"
       >
-        <div>
+        <div
+          class="grant-requests-search"
+        >
           <div
             class="ui action left icon input"
           >
@@ -77,115 +100,120 @@ exports[`<GrantRequestsSearchResults /> matches the latest snapshot 1`] = `
             class="selectedFilters"
           />
         </div>
-        <div>
+        <div
+          class="grant-requests-approve-actions"
+        >
           <div
-            class="row grant-requests-approve-actions"
+            aria-expanded="false"
+            class="ui selection dropdown grant-requests-bulk-role-selector "
+            role="listbox"
+            tabindex="0"
           >
             <div
-              class="five wide column"
+              aria-atomic="true"
+              aria-live="polite"
+              class="divider text"
+              role="alert"
+            >
+              foo
+            </div>
+            <i
+              aria-hidden="true"
+              class="dropdown icon"
+            />
+            <div
+              class="menu transition"
             >
               <div
-                class="ui buttons"
+                aria-checked="false"
+                aria-disabled="true"
+                aria-selected="false"
+                class="disabled item header"
+                role="option"
+                style="pointer-events: all;"
               >
-                <button
-                  class="ui active icon button"
+                <span
+                  class="text"
                 >
-                  Approve view
-                </button>
-                <button
-                  class="ui icon button"
+                  Seleccione un rol
+                </span>
+              </div>
+              <div
+                aria-checked="false"
+                aria-selected="false"
+                class="item"
+                role="option"
+                style="pointer-events: all;"
+              >
+                <span
+                  class="text"
                 >
-                  Search view
-                </button>
+                  bar
+                </span>
               </div>
-            </div>
-          </div>
-          <div
-            class="row"
-          >
-            <div
-              class="right aligned five wide column"
-            >
               <div
-                aria-expanded="false"
-                class="ui selection dropdown grant-requests-bulk-role-selector"
-                role="listbox"
-                tabindex="0"
+                aria-checked="true"
+                aria-selected="true"
+                class="active selected item"
+                role="option"
+                style="pointer-events: all;"
               >
-                <div
-                  aria-atomic="true"
-                  aria-live="polite"
-                  class="divider text"
-                  role="alert"
+                <span
+                  class="text"
                 >
                   foo
-                </div>
-                <i
-                  aria-hidden="true"
-                  class="dropdown icon"
-                />
-                <div
-                  class="menu transition"
-                >
-                  <div
-                    aria-checked="false"
-                    aria-selected="false"
-                    class="item"
-                    role="option"
-                    style="pointer-events: all;"
-                  >
-                    <span
-                      class="text"
-                    >
-                      bar
-                    </span>
-                  </div>
-                  <div
-                    aria-checked="true"
-                    aria-selected="true"
-                    class="active selected item"
-                    role="option"
-                    style="pointer-events: all;"
-                  >
-                    <span
-                      class="text"
-                    >
-                      foo
-                    </span>
-                  </div>
-                </div>
+                </span>
               </div>
-              <button
-                class="ui primary button button icon group-actions"
-              >
-                grantRequest.actions.approve
-              </button>
-              <button
-                class="ui secondary button button icon group-actions"
-              >
-                grantRequest.actions.reject
-              </button>
             </div>
           </div>
+          <button
+            class="ui primary button button icon group-actions grant-requests-approval-button"
+          >
+            grantRequest.actions.approve
+          </button>
+          <button
+            class="ui secondary button button icon group-actions grant-requests-approval-button"
+          >
+            grantRequest.actions.reject
+          </button>
+        </div>
+        <div
+          class="grant-requests-download-actions"
+        >
+          <button
+            class="ui icon secondary disabled button"
+            data-position="top right"
+            data-tooltip="grantRequest.actions.download.tooltip"
+            disabled=""
+            tabindex="-1"
+          >
+            <i
+              aria-hidden="true"
+              class="download icon"
+            />
+          </button>
         </div>
       </div>
       <div
-        class="dimmable"
+        class="grant-requests-bulk-label-results"
       >
         <div
-          class="grant-requests-bulk-label-results"
+          class="ui label"
         >
-          <div
-            class="ui label"
-          >
-            grantRequests.retrieved.results
-          </div>
-          <div
-            class="ui label"
-          >
-            grantRequests.bulk.selected
-          </div>
+          grantRequests.retrieved.results
         </div>
+        <div
+          class="ui label"
+        >
+          grantRequests.bulk.selected
+        </div>
+      </div>
+      <div
+        class="dimmable"
+      >
+        <div
+          class="ui inverted dimmer"
+        />
         <table
           class="ui selectable sortable table"
         >

package/src/hooks/useGrantRequest.js

@@ -1,8 +1,10 @@
+import FileSaver from "file-saver";
 import useSWRMutations from "swr/mutation";
-import { apiJsonPost } from "@truedat/core/services/api";
+import { apiJsonPost, JSON_OPTS } from "@truedat/core/services/api";
 import {
   API_GRANT_REQUEST_BULK_APPROVAL,
   API_GRANT_REQUEST_GROUP,
+  API_GRANT_REQUESTS_DOWNLOAD,
   API_GRANT_REQUESTS_SEARCH,
   API_GRANT_REQUESTS_FILTERS_SEARCH,
 } from "../api";
@@ -29,3 +31,20 @@ export const useGrantRequestsFilters = () => {
     apiJsonPost(url, arg),
   );
 };
+
+const saveGrantRequestFile = ({ data, headers }) => {
+  const contentDisposition = headers["content-disposition"];
+  const regex = /filename=(.+)$/;
+  const match = regex.exec(contentDisposition);
+  const fileName = match ? match[1] : "grant_requests.xlsx";
+  FileSaver.saveAs(data, fileName);
+};
+
+export const useGrantRequestsDownload = () => {
+  return useSWRMutations(API_GRANT_REQUESTS_DOWNLOAD, (url, { arg }) =>
+    apiJsonPost(url, arg, {
+      ...JSON_OPTS,
+      responseType: "blob",
+    }).then(({ data, headers }) => saveGrantRequestFile({ data, headers })),
+  );
+};