WIP

spiffworkflow-frontend/src/components/ProcessInstanceListSaveAsReport.tsx

@@ -11,7 +11,7 @@ import HttpService from '../services/HttpService';
 
 type OwnProps = {
   onSuccess: (..._args: any[]) => any;
-  columns: string;
+  columnArray: { Header: string; accessor: string};
   orderBy: string;
   filterBy: string;
   buttonText?: string;
@@ -19,10 +19,10 @@ type OwnProps = {
 
 export default function ProcessInstanceListSaveAsReport({
   onSuccess,
-  columns,
+  columnArray,
   orderBy,
   filterBy,
-  buttonText = 'Save as New Perspective',
+  buttonText = 'Save as Perspective',
 }: OwnProps) {
   const [identifier, setIdentifier] = useState('');
 
@@ -33,9 +33,8 @@ export default function ProcessInstanceListSaveAsReport({
   const addProcessInstanceReport = (event: any) => {
     event.preventDefault();
 
-    const columnArray = columns.split(',').map((column) => {
+    console.log(columnArray);
-      return { Header: column, accessor: column };
+
-    });
     const orderByArray = orderBy.split(',').filter((n) => n);
 
     const filterByArray = filterBy

spiffworkflow-frontend/src/components/ProcessInstanceListTable.tsx

@@ -622,6 +622,10 @@ export default function ProcessInstanceListTable({
     );
   };
 
+  const reportColumns = () => {
+    return (reportMetadata as any).columns;
+  };
+
   const buildTable = () => {
     const headerLabels: Record<string, string> = {
       id: 'Id',
@@ -636,7 +640,7 @@ export default function ProcessInstanceListTable({
     const getHeaderLabel = (header: string) => {
       return headerLabels[header] ?? header;
     };
-    const headers = (reportMetadata as any).columns.map((column: any) => {
+    const headers = reportColumns().map((column: any) => {
       // return <th>{getHeaderLabel((column as any).Header)}</th>;
       return getHeaderLabel((column as any).Header);
     });
@@ -710,7 +714,7 @@ export default function ProcessInstanceListTable({
     };
 
     const rows = processInstances.map((row: any) => {
-      const currentRow = (reportMetadata as any).columns.map((column: any) => {
+      const currentRow = reportColumns().map((column: any) => {
         return formattedColumn(row, column);
       });
       return <tr key={row.id}>{currentRow}</tr>;
@@ -766,11 +770,12 @@ export default function ProcessInstanceListTable({
   };
 
   const saveAsReportComponent = () => {
+    // TODO onSuccess reload/select the new report
     const callback = (_: any) => {};
     return (
       <ProcessInstanceListSaveAsReport
         onSuccess={callback}
-        columns=""
+        columnArray={reportColumns()}
         orderBy=""
         filterBy=""
       />