BUG Add A status column to the table view

silverstripe · Aug 29, 2019 · d00f13f · d00f13f
1 parent 467f77e
commit d00f13f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 5 deletions.
diff --git a/client/dist/js/bundle.js b/client/dist/js/bundle.js
diff --git a/client/lang/src/en.json b/client/lang/src/en.json
@@ -69,5 +69,6 @@
     "AssetAdmin.CreateTitle": "Insert new media from the web",
     "AssetAdmin.EditTitle": "Media from the web",
     "AssetAdmin.NEXT": "Next",
-    "AssetAdmin.PREVIOUS": "Previous"
-}
+    "AssetAdmin.MODIFIED": "Modified",
+    "AssetAdmin.STATUS": "Status",
+}
diff --git a/client/src/containers/TableView/TableView.js b/client/src/containers/TableView/TableView.js
@@ -4,6 +4,7 @@ import Griddle from 'griddle-react';
 import i18n from 'i18n';
 import { galleryViewPropTypes, galleryViewDefaultProps } from 'containers/Gallery/Gallery';
 import { fileSize } from 'lib/DataFormat';
+import VersionedBadge from 'components/VersionedBadge/VersionedBadge';
 
 class TableView extends Component {
   constructor(props) {
@@ -15,6 +16,7 @@ class TableView extends Component {
     this.handleRowClick = this.handleRowClick.bind(this);
     this.renderSelect = this.renderSelect.bind(this);
     this.renderTitle = this.renderTitle.bind(this);
+    this.renderStatus = this.renderStatus.bind(this);
     this.renderNoItemsNotice = this.renderNoItemsNotice.bind(this);
 
     this.state = {
@@ -45,6 +47,7 @@ class TableView extends Component {
     const columns = [
       'thumbnail',
       'title',
+      'status',
       'size',
       'lastEdited',
     ];
@@ -80,18 +83,26 @@ class TableView extends Component {
       {
         columnName: 'title',
         customCompareFn: () => (0), // Suppress griddle re-sorting
+        displayName: i18n._t('File.TITLE', 'Title'),
         cssClassName: 'gallery__table-column--title',
         customComponent: this.renderTitle,
       },
+      {
+        columnName: 'status',
+        sortable: false,
+        cssClassName: 'gallery__table-column--status',
+        customComponent: this.renderStatus,
+        displayName: i18n._t('File.STATUS', 'Status'),
+      },
       {
         columnName: 'lastEdited',
-        displayName: 'Modified',
+        displayName: i18n._t('File.MODIFIED', 'Modified'),
         customComponent: this.renderDate,
       },
       {
         columnName: 'size',
         sortable: false,
-        displayName: 'Size',
+        displayName: i18n._t('File.SIZE', 'Size'),
         cssClassName: 'sort--disabled',
         customComponent: this.renderSize,
       },
@@ -245,6 +256,35 @@ class TableView extends Component {
     );
   }
 
+  /**
+   * Renders the content for the status column
+   *
+   * @param {object} props
+   * @returns {Component|null}
+   */
+  renderStatus(props) {
+    let flags = [];
+    const item = props.rowData;
+
+    if (item.type !== 'folder') {
+      if (item.draft) {
+        flags.push({
+          key: 'status-draft',
+          status: 'draft'
+        });
+      } else if (item.modified) {
+        flags.push({
+          key: 'status-modified',
+          status: 'modified'
+        });
+      }
+    }
+
+    flags = flags.map(({ ...attributes }) => <VersionedBadge {...attributes} />);
+
+    return <span>{flags}</span>;
+  }
+
   /**
    * Renders the progressbar for a given row
    *