CSV Download (#3061)

Should be deploy the gcp-cf first before deploying this pr : zesty-io/gcp-cf#179 added `export csv` function on content item. ![csv-download](https://github.com/user-attachments/assets/bb299b9a-fffa-4bf3-b641-d758c7c731e3)
zesty-io · Nov 20, 2024 · cb1fd29 · cb1fd29
1 parent ea46fdd
commit cb1fd29
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 2 deletions.
diff --git a/src/apps/content-editor/src/app/views/ItemList/ItemListActions.tsx b/src/apps/content-editor/src/app/views/ItemList/ItemListActions.tsx
@@ -6,6 +6,7 @@ import {
   Menu,
   MenuItem,
   ListItemIcon,
+  CircularProgress,
 } from "@mui/material";
 import { Database, IconButton } from "@zesty-io/material";
 import {
@@ -19,6 +20,7 @@ import {
   BoltRounded,
   KeyboardArrowRightRounded,
   DataObjectRounded,
+  FileDownloadRounded,
 } from "@mui/icons-material";
 import { forwardRef, useState, useCallback } from "react";
 import { useHistory, useParams as useRouterParams } from "react-router";
@@ -28,6 +30,7 @@ import { debounce } from "lodash";
 import { useGetContentModelsQuery } from "../../../../../../shell/services/instance";
 import { CascadingMenuItem } from "../../../../../../shell/components/CascadingMenuItem";
 import { APIEndpoints } from "../../components/APIEndpoints";
+import { useLazyDownloadCsvQuery } from "../../../../../../shell/services/cloudFunctions";
 
 export const ItemListActions = forwardRef((props, ref) => {
   const { modelZUID } = useRouterParams<{ modelZUID: string }>();
@@ -41,6 +44,8 @@ export const ItemListActions = forwardRef((props, ref) => {
   const isDataset =
     contentModels?.find((model) => model.ZUID === modelZUID)?.type ===
     "dataset";
+  const [downloadCSV, { isLoading: isDownloadCsvLoading }] =
+    useLazyDownloadCsvQuery();
 
   const handleCopyClick = (data: string) => {
     navigator?.clipboard
@@ -105,6 +110,19 @@ export const ItemListActions = forwardRef((props, ref) => {
           </ListItemIcon>
           Import CSV
         </MenuItem>
+        <MenuItem
+          data-cy="DownloadCSVNavButton"
+          onClick={() => downloadCSV({ modelZUID })}
+        >
+          <ListItemIcon>
+            {isDownloadCsvLoading ? (
+              <CircularProgress size="24px" />
+            ) : (
+              <FileDownloadRounded />
+            )}
+          </ListItemIcon>
+          Export CSV
+        </MenuItem>
         <MenuItem
           onClick={() => {
             handleCopyClick(modelZUID);

diff --git a/src/shell/app.config.js b/src/shell/app.config.js
@@ -152,6 +152,8 @@ module.exports = {
     API_INSTANCE_PROTOCOL: "http://",
     API_ANALYTICS: "https://analytics-api-m3rbwjxm5q-uc.a.run.app",
 
+    CLOUD_FUNCTIONS_DOMAIN: "https://us-central1-zesty-dev.cloudfunctions.net",
+
     SERVICE_AUTH: "http://auth.api.zesty.localdev:3011",
     SERVICE_EMAIL: "",
     SERVICE_MEDIA_MANAGER:

diff --git a/src/shell/services/cloudFunctions.ts b/src/shell/services/cloudFunctions.ts
@@ -23,10 +23,37 @@ export const cloudFunctionsApi = createApi({
         };
       },
     }),
+
+    downloadCsv: builder.query<
+      string[],
+      {
+        modelZUID: string;
+      }
+    >({
+      query: ({ modelZUID }) => {
+        return {
+          url: `downloadCSV`,
+          method: "GET",
+          params: {
+            instanceZUID,
+            modelZUID,
+          },
+          responseHandler: async (response) =>
+            window.location.assign(
+              window.URL.createObjectURL(await response.blob())
+            ),
+          cache: "no-cache",
+        };
+      },
+    }),
   }),
 });
 
 // Export hooks for usage in functional components, which are
 // auto-generated based on the defined endpoints
-export const { useRefreshCacheMutation, useAiGenerationMutation } =
-  cloudFunctionsApi;
+export const {
+  useRefreshCacheMutation,
+  useAiGenerationMutation,
+  useDownloadCsvQuery,
+  useLazyDownloadCsvQuery,
+} = cloudFunctionsApi;