From 12561e7ec2c17c423e5d3ae51cd9b69b746fe416 Mon Sep 17 00:00:00 2001
From: rgomez <rgomez@irontec.com>
Date: Tue, 20 Aug 2024 11:17:47 +0200
Subject: [PATCH] add downloadable file in column

---
 .../List/Content/ListContentValue.tsx         | 15 +++++++-
 .../components/List/DownloadFile.styles.tsx   | 21 ++++++++++
 library/src/components/List/DownloadFile.tsx  | 38 +++++++++++++++++++
 .../services/api/ParsedApiSpecInterface.ts    |  1 +
 4 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 library/src/components/List/DownloadFile.styles.tsx
 create mode 100644 library/src/components/List/DownloadFile.tsx

diff --git a/library/src/components/List/Content/ListContentValue.tsx b/library/src/components/List/Content/ListContentValue.tsx
index 67386466..5493025d 100644
--- a/library/src/components/List/Content/ListContentValue.tsx
+++ b/library/src/components/List/Content/ListContentValue.tsx
@@ -13,6 +13,7 @@ import {
   StyledCheckBoxOutlineBlankIcon,
   StyledTableRowFkLink,
 } from './Table/ContentTable.styles';
+import DownloadFile from '../DownloadFile';
 
 interface ListContentValueProps {
   columnName: string;
@@ -23,12 +24,12 @@ interface ListContentValueProps {
 
 const ListContentValue = (props: ListContentValueProps): JSX.Element => {
   const { column, columnName, row, entityService } = props;
-
   const routes = useStoreState((state) => state.routes.routes);
 
   const ListDecorator = entityService.getListDecorator();
   const customComponent = (column as ScalarProperty).component;
-
+  const isDownloadable = (column as ScalarProperty).downloadable;
+  const isFileType = (column as ScalarProperty).type === 'file';
   const isFk = isPropertyFk(column);
   const loadingFk =
     isFk &&
@@ -97,6 +98,16 @@ const ListContentValue = (props: ListContentValueProps): JSX.Element => {
     response = <ListDecorator field={columnName} row={row} property={column} />;
   }
 
+  if (isDownloadable && isFileType) {
+    response = (
+      <DownloadFile
+        row={row}
+        path={entityService.getEntity().path}
+        fileType={columnName}
+      />
+    );
+  }
+
   const prefix = column?.prefix || '';
 
   return (
diff --git a/library/src/components/List/DownloadFile.styles.tsx b/library/src/components/List/DownloadFile.styles.tsx
new file mode 100644
index 00000000..5479a768
--- /dev/null
+++ b/library/src/components/List/DownloadFile.styles.tsx
@@ -0,0 +1,21 @@
+import styled from '@emotion/styled';
+import DownloadIcon from '@mui/icons-material/Download';
+
+export const StyledPdfIcon = styled(DownloadIcon)(() => {
+  return {
+    color: '#5b5b5b',
+    verticalAlign: 'bottom',
+    fontSize: '1.3em',
+    cursor: 'pointer',
+  };
+});
+
+export const StyledFileName = styled.span(() => {
+  return {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: '60px',
+    display: 'inline-flex',
+  };
+});
diff --git a/library/src/components/List/DownloadFile.tsx b/library/src/components/List/DownloadFile.tsx
new file mode 100644
index 00000000..1acfc723
--- /dev/null
+++ b/library/src/components/List/DownloadFile.tsx
@@ -0,0 +1,38 @@
+import { useStoreActions } from 'store';
+import { StyledPdfIcon, StyledFileName } from './DownloadFile.styles';
+import { saveAs } from 'file-saver';
+
+export interface DownloadFileProps {
+  row: Record<string, any>;
+  path: string;
+  fileType: string;
+}
+
+export default function DownloadFile(props: DownloadFileProps): JSX.Element {
+  const { row, path, fileType } = props;
+
+  const apiDownload = useStoreActions((actions) => {
+    return actions.api.download;
+  });
+
+  const download = () => {
+    apiDownload({
+      path: `${path}/${row.id}/${fileType}`,
+      params: {},
+      successCallback: async (data: any, headers: any) => {
+        const fileName = headers['content-disposition']
+          ?.split('filename=')
+          ?.pop();
+
+        saveAs(data, fileName || 'download');
+      },
+    });
+  };
+
+  return (
+    <>
+      <StyledPdfIcon onClick={download} />
+      <StyledFileName>{row[fileType].baseName}</StyledFileName>
+    </>
+  );
+}
diff --git a/library/src/services/api/ParsedApiSpecInterface.ts b/library/src/services/api/ParsedApiSpecInterface.ts
index e9f907a3..87ce2084 100644
--- a/library/src/services/api/ParsedApiSpecInterface.ts
+++ b/library/src/services/api/ParsedApiSpecInterface.ts
@@ -86,6 +86,7 @@ export interface ScalarProperty {
   required: boolean;
   pattern?: RegExp;
   helpText?: string | React.ReactElement<any>;
+  downloadable?: boolean;
 }
 
 export interface EmbeddableProperty {