Downloadable file option in column

library/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@irontec/ivoz-ui",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "UI library used in ivozprovider",
   "license": "GPL-3.0",
   "main": "index.js",

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 (

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',
+  };
+});

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>
+    </>
+  );
+}

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 {