Add downloadCSV property for downloading content as CSV

package.json

@@ -12,6 +12,12 @@
     "README.md"
   ],
   "dependencies": {
+    "@fortawesome/fontawesome": "^1.2.0-6",
+    "@fortawesome/fontawesome-common-types": "^6.1.1",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-regular-svg-icons": "^6.1.0",
+    "@fortawesome/free-solid-svg-icons": "^6.1.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@types/history": "^4.7.11",
     "json-e": "^4.4.3",
     "lodash": "^4.17.21",

src/AutoUI/Actions/DownloadCSV.tsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { AutoUIBaseResource, AutoUIModel } from '../schemaOps';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button } from 'rendition';
+import { faDownload } from '@fortawesome/free-solid-svg-icons';
+import { useTranslation } from '../../hooks/useTranslation';
+
+// // Source: https://stackoverflow.com/questions/41028114/how-to-convert-array-of-nested-objects-to-csv
+// const pivot = (arr: object[]) => {
+// 	const mp = new Map();
+
+// 	const setValue = (a: string[], path: string[], val: any) => {
+// 		if (Object(val) !== val) {
+// 			// primitive value
+// 			const pathStr = path.join('.');
+// 			const i = (mp.has(pathStr) ? mp : mp.set(pathStr, mp.size)).get(pathStr);
+// 			a[i] = val;
+// 		} else {
+// 			for (const key of Object.keys(val)) {
+// 				setValue(a, key === '0' ? path : path.concat(key), val[key]);
+// 			}
+// 		}
+// 		return a;
+// 	};
+
+// 	const result = arr.map((obj) => setValue([], [], obj));
+// 	return [[...mp.keys()], ...result];
+// };
+
+// // Source: https://stackoverflow.com/questions/41028114/how-to-convert-array-of-nested-objects-to-csv
+// const toCsv = (arr: any[][]) => {
+// 	return arr
+// 		.map((row) =>
+// 			row.map((val) => (isNaN(val) ? JSON.stringify(val) : +val)).join(','),
+// 		)
+// 		.join('\n');
+// };
+
+const toCsv = <T extends AutoUIBaseResource<T>>(
+	data: T[],
+	model: AutoUIModel<T>,
+) => {
+	// TODO only use data from columns that the user has read permissions for
+	console.log('*** data', data);
+	console.log('*** model', model);
+	const { schema, priorities } = model;
+	const { properties } = schema;
+	if (!properties || !priorities) {
+		return '';
+	}
+	const allPriorities = [
+		...priorities.primary,
+		...priorities.secondary,
+		...priorities.tertiary,
+	];
+	const propertiesWithPriority = [
+		...allPriorities.map((priority) => properties[priority]),
+	].filter((property) => property != null);
+	const arr = [
+		propertiesWithPriority.map((property) =>
+			typeof property !== 'boolean' && 'title' in property
+				? property.title ?? ''
+				: '',
+		),
+	];
+	for (const item of data) {
+		const row = [];
+		for (const column of allPriorities) {
+			const property = properties[column];
+			if (property) {
+				const itemColumn = item[column];
+				if (
+					typeof property !== 'boolean' &&
+					'description' in property &&
+					property.description != null
+				) {
+					if (
+						property.type === 'array' ||
+						(Array.isArray(property.type) && property.type.includes('array'))
+					) {
+						// array
+						row.push(
+							(itemColumn as Array<typeof itemColumn>)[0][
+								JSON.parse(property.description)[
+									'x-ref-scheme'
+								][0] as keyof typeof itemColumn
+							] as string,
+						);
+					} else {
+						// object
+						row.push(
+							itemColumn[
+								JSON.parse(property.description)[
+									'x-ref-scheme'
+								][0] as keyof typeof itemColumn
+							] as string,
+						);
+					}
+				} else {
+					row.push(itemColumn as string);
+				}
+			}
+		}
+		arr.push(row);
+	}
+	console.log('*** arr', arr);
+	return arr
+		.map((row) => row.map((val) => `"${val}"`).join(','))
+		.join('\n');
+};
+
+const download = <T extends AutoUIBaseResource<T>>(
+	data: T[],
+	model: AutoUIModel<T>,
+	fileName: string,
+) => {
+	// const csvData = toCsv(pivot(data));
+	const csvData = toCsv(data, model);
+	return;
+	const CSVFile = new Blob([csvData], { type: 'text/csv' });
+	const tempLink = document.createElement('a');
+	tempLink.download = `${fileName}.csv`;
+	const url = window.URL.createObjectURL(CSVFile);
+	tempLink.href = url;
+	tempLink.style.display = 'none';
+	document.body.appendChild(tempLink);
+	tempLink.click();
+	document.body.removeChild(tempLink);
+};
+
+interface DownloadCSVProps<T extends AutoUIBaseResource<T>> {
+	model?: AutoUIModel<T>;
+	downloadCSV?: {
+		getData: ($filter: any) => Promise<T[]>;
+		fileName: string;
+	};
+	$filter: any;
+}
+
+export const DownloadCSV = <T extends AutoUIBaseResource<T>>({
+	model,
+	downloadCSV,
+	$filter,
+}: DownloadCSVProps<T>) => {
+	const { t } = useTranslation();
+
+	if (!downloadCSV || !model) {
+		return null;
+	}
+
+	const { getData, fileName } = downloadCSV;
+
+	return (
+		<Button
+			onClick={async () => {
+				const data = await getData($filter);
+				download(data, model, fileName);
+			}}
+			tooltip={t('actions.download_csv')}
+			icon={<FontAwesomeIcon icon={faDownload} />}
+		/>
+	);
+};

src/AutoUI/index.tsx

@@ -65,6 +65,7 @@ import {
 } from '../oData/jsonToOData';
 import { CollectionLensRendererProps } from './Lenses/types';
 import pickBy from 'lodash/pickBy';
+import { DownloadCSV } from './Actions/DownloadCSV';
 
 const DEFAULT_ITEMS_PER_PAGE = 50;
 
@@ -129,7 +130,13 @@ export interface AutoUIProps<T> extends Omit<BoxProps, 'onChange'> {
 	lensContext?: object;
 	/** Loading property to show the Spinner */
 	loading?: boolean;
+	/** Property to use as the key for each rendered entity */
 	rowKey?: keyof T;
+	/** Passes $filter and expects all data */
+	downloadCSV?: {
+		getData: ($filter: any) => Promise<T[]>;
+		fileName: string;
+	};
 }
 
 export const AutoUI = <T extends AutoUIBaseResource<T>>({
@@ -148,6 +155,7 @@ export const AutoUI = <T extends AutoUIBaseResource<T>>({
 	lensContext,
 	loading,
 	rowKey,
+	downloadCSV,
 	...boxProps
 }: AutoUIProps<T>) => {
 	const { t } = useTranslation();
@@ -340,6 +348,11 @@ export const AutoUI = <T extends AutoUIBaseResource<T>>({
 		[actions, sdk?.tags],
 	);
 
+	const pineClientfilters = React.useMemo(
+		() => convertToPineClientFilter([], filters),
+		[filters],
+	);
+
 	const internalOnChange = (
 		updatedFilters: JSONSchema[],
 		sortInfo: TableSortOptions<T> | null,
@@ -447,6 +460,11 @@ export const AutoUI = <T extends AutoUIBaseResource<T>>({
 													);
 												}}
 											/>
+											<DownloadCSV
+												model={model}
+												downloadCSV={downloadCSV}
+												$filter={pineClientfilters}
+											/>
 										</>
 									)}
 								</HeaderGrid>

src/hooks/useTranslation.tsx

@@ -7,6 +7,7 @@ export type TFunction = (str: string, options?: any) => string;
 
 const translationMap = {
 	'actions.manage_tags': 'Manage tags',
+	'actions.download_csv': 'Download CSV',
 	'info.update_item_no_permissions':
 		"You don't have permission to {{action}} the selected {{resource}}",
 	'info.ongoing_action_wait': 'There is an ongoing action, please wait',