[JSX] Enabled Data Mapping for CSV Downloads (#5291)

Because the getFormatedCell function often both formats AND maps data, there was a developing issue where the downloaded data in the form of CSV did not represent what was shown in the datatable, but rather the initial data before mapping - therefore downloading keys rather than values.

This fixes this by allowing developers to disentangle mapping and formatting. A function can be created which checks the value of the parameter column and then changes the value correspondingly. This function can then be passed as a prop to the FilterableDataTable component which will take care of the rest.

jsx/DataTable.js

@@ -84,6 +84,14 @@ class DataTable extends Component {
   }
 
   downloadCSV(csvData) {
+    // Map cell data to proper values if applicable.
+    if (this.props.getMappedCell) {
+      csvData = csvData
+      .map((row, i) => this.props.fields
+        .map((field, j) => this.props.getMappedCell(field.label, row[j]))
+      );
+    }
+
     let csvworker = new Worker(loris.BaseURL + '/js/workers/savecsv.js');
 
     csvworker.addEventListener('message', function(e) {

jsx/FilterableDataTable.js

@@ -64,6 +64,7 @@ class FilterableDataTable extends Component {
         filter={this.state.filter}
         actions={this.props.actions}
         getFormattedCell={this.props.getFormattedCell}
+        getMappedCell={this.props.getMappedCell}
         folder={this.props.folder}
         nullTableShow={this.props.nullTableShow}
       />

modules/media/jsx/mediaIndex.js

@@ -22,6 +22,7 @@ class MediaIndex extends Component {
 
     this.fetchData = this.fetchData.bind(this);
     this.formatColumn = this.formatColumn.bind(this);
+    this.mapColumn = this.mapColumn.bind(this);
   }
 
   componentDidMount() {
@@ -46,6 +47,23 @@ class MediaIndex extends Component {
       });
   }
 
+  /**
+   * Modify value of specified column cells in the Data Table component
+   *
+   * @param {string} column - column name
+   * @param {string} value - cell value
+   *
+   * @return {string} a mapped value for the table cell at a given column
+   */
+  mapColumn(column, value) {
+    switch (column) {
+      case 'Site':
+        return this.state.fieldOptions.sites[value];
+      default:
+        return value;
+    }
+  }
+
   /**
    * Modify behaviour of specified column cells in the Data Table component
    *
@@ -56,6 +74,7 @@ class MediaIndex extends Component {
    * @return {*} a formated table cell for a given column
    */
   formatColumn(column, cell, row) {
+    cell = this.mapColumn(column, cell);
     // Set class to 'bg-danger' if file is hidden.
     const style = (row['File Visibility'] === '1') ? 'bg-danger' : '';
     let result = <td className={style}>{cell}</td>;
@@ -81,7 +100,7 @@ class MediaIndex extends Component {
       }
       break;
     case 'Site':
-      result = <td className={style}>{this.state.fieldOptions.sites[cell]}</td>;
+      result = <td className={style}>{cell}</td>;
       break;
     case 'Edit Metadata':
       if (!this.props.hasPermission('media_write')) {
@@ -199,6 +218,7 @@ class MediaIndex extends Component {
             data={this.state.data}
             fields={fields}
             getFormattedCell={this.formatColumn}
+            getMappedCell={this.mapColumn}
           />
         </TabPane>
         {uploadTab()}