Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BUG Add a status column to the table view #980

Merged
merged 4 commits into from
Sep 10, 2019
Merged

BUG Add a status column to the table view #980

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
82a4b16
BUG Add a status column to the table view
Aug 29, 2019
e5f206b
Answer PR feedback and install latest version of webpack-config
Sep 2, 2019
b02f574
Update behat test to use the click on the Title header when sorting f…
Sep 9, 2019
5fb759e
Rebuild bundle
Sep 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion client/dist/js/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

5 changes: 3 additions & 2 deletions client/lang/src/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
}
44 changes: 42 additions & 2 deletions client/src/containers/TableView/TableView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
maxime-rainville marked this conversation as resolved.
Show resolved Hide resolved

class TableView extends Component {
constructor(props) {
Expand All @@ -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 = {
Expand Down Expand Up @@ -45,6 +47,7 @@ class TableView extends Component {
const columns = [
'thumbnail',
'title',
'status',
'size',
'lastEdited',
];
Expand Down Expand Up @@ -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: 'sort--disabled',
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,
},
Expand Down Expand Up @@ -245,6 +256,35 @@ class TableView extends Component {
);
}

/**
* Renders the content for the status column
*
* @param {object} props
* @returns {Component|null}
*/
renderStatus(props) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was inspired by getStatusFlags on GalleryItem.

getStatusFlags has a updateStatusFlags hook that looks like it's meant to allow module like Fluent to add their own status flags. However, it's not clear how you would go about using it or that it even works.

If allowing module to add their own flags is a key requirements, I think we need to rethink how this is done and come up with a consistent way of doing for both the gallery view and the table view.

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>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So this would return an empty span for folders - was that deliberate?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've updated it to return null when there's no flag. There's a possible future where we update this again so other module can specify their own flags and where someone decide they want to flag folders.

}

/**
* Renders the progressbar for a given row
*
Expand Down