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

Jump to bottom

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 2 commits
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",
}
54 changes: 51 additions & 3 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,8 @@ import Griddle from 'griddle-react';
import i18n from 'i18n';
import { galleryViewPropTypes, galleryViewDefaultProps } from 'containers/Gallery/Gallery';
import { fileSize } from 'lib/DataFormat';
import { inject } from 'lib/Injector';
import { compose } from 'redux';

class TableView extends Component {
constructor(props) {
Expand All @@ -15,6 +17,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 +48,7 @@ class TableView extends Component {
const columns = [
'thumbnail',
'title',
'status',
'size',
'lastEdited',
];
Expand Down Expand Up @@ -80,18 +84,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 +257,36 @@ 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;
const { VersionedBadge } = this.props;

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 flags ? <span>{flags}</span> : null;
}

/**
* Renders the progressbar for a given row
*
Expand Down Expand Up @@ -378,8 +420,14 @@ TableView.defaultProps = galleryViewDefaultProps;
TableView.propTypes = {
...galleryViewPropTypes,
sort: PropTypes.string.isRequired,
VersionedBadge: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
};

export { TableView as Component };

export default TableView;
export default compose(
inject(
['VersionedBadge'],
VersionedBadge => ({ VersionedBadge })
)
)(TableView);
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@
},
"devDependencies": {
"@silverstripe/eslint-config": "0.0.5",
"@silverstripe/webpack-config": "^1.0.0",
"@silverstripe/webpack-config": "^1.2.0",
"@storybook/addon-actions": "^3.4.11",
"@storybook/addons": "^3.4.11",
"@storybook/react": "^3.4.11",
Expand Down
50 changes: 47 additions & 3 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,10 @@
eslint-plugin-jsx-a11y "^5.1.1"
eslint-plugin-react "^7.3.0"

"@silverstripe/webpack-config@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@silverstripe/webpack-config/-/webpack-config-1.0.0.tgz#95ab7a5cca9959346b9c0feed306f65c8d2f3182"
"@silverstripe/webpack-config@^1.2.0":
version "1.2.0"
resolved "https://registry.yarnpkg.com/@silverstripe/webpack-config/-/webpack-config-1.2.0.tgz#e79aeebda764b48ccafd62dd1e0b438e418757b5"
integrity sha512-Joctx5bPuMr4rGuM3qR+FRzxfRu8CTAcLFYSpoeW+Xf4u8SdpXoij8Jqb2Q0l3y9rXLGBqIyEyDkcgNthB/yDg==
dependencies:
autoprefixer "^6.4.0"
babel-core "^6.24.1"
Expand All @@ -58,6 +59,7 @@
modernizr-loader "^1.0.1"
node-sass "^4.5.3"
npm "^6.0.0"
postcss-custom-properties "^8.0.10"
postcss-load-config "^1.2.0"
postcss-loader "^2.0.5"
resolve-url-loader "^2.0.2"
Expand Down Expand Up @@ -2151,6 +2153,15 @@ chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.3.2, chalk@^2.4.1:
escape-string-regexp "^1.0.5"
supports-color "^5.3.0"

chalk@^2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
dependencies:
ansi-styles "^3.2.1"
escape-string-regexp "^1.0.5"
supports-color "^5.3.0"

change-emitter@^0.1.2:
version "0.1.6"
resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
Expand Down Expand Up @@ -7376,6 +7387,14 @@ postcss-convert-values@^2.3.4:
postcss "^5.0.11"
postcss-value-parser "^3.1.2"

postcss-custom-properties@^8.0.10:
version "8.0.11"
resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-8.0.11.tgz#2d61772d6e92f22f5e0d52602df8fae46fa30d97"
integrity sha512-nm+o0eLdYqdnJ5abAJeXp4CEU1c1k+eB2yMCvhgzsds/e0umabFrN6HoTy/8Q4K5ilxERdl/JD1LO5ANoYBeMA==
dependencies:
postcss "^7.0.17"
postcss-values-parser "^2.0.1"

postcss-discard-comments@^2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"
Expand Down Expand Up @@ -7618,6 +7637,15 @@ postcss-value-parser@^3.0.1, postcss-value-parser@^3.0.2, postcss-value-parser@^
version "3.3.0"
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz#87f38f9f18f774a4ab4c8a232f5c5ce8872a9d15"

postcss-values-parser@^2.0.1:
version "2.0.1"
resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg==
dependencies:
flatten "^1.0.2"
indexes-of "^1.0.1"
uniq "^1.0.1"

postcss-zindex@^2.0.1:
version "2.2.0"
resolved "https://registry.yarnpkg.com/postcss-zindex/-/postcss-zindex-2.2.0.tgz#d2109ddc055b91af67fc4cb3b025946639d2af22"
Expand All @@ -7643,6 +7671,15 @@ postcss@^6.0.0, postcss@^6.0.1, postcss@^6.0.17:
source-map "^0.6.1"
supports-color "^5.4.0"

postcss@^7.0.17:
version "7.0.17"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
dependencies:
chalk "^2.4.2"
source-map "^0.6.1"
supports-color "^6.1.0"

prelude-ls@~1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
Expand Down Expand Up @@ -9446,6 +9483,13 @@ supports-color@^5.3.0, supports-color@^5.4.0:
dependencies:
has-flag "^3.0.0"

supports-color@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.1.0.tgz#0764abc69c63d5ac842dd4867e8d025e880df8f3"
integrity sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==
dependencies:
has-flag "^3.0.0"

svg-tag-names@^1.1.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/svg-tag-names/-/svg-tag-names-1.1.1.tgz#9641b29ef71025ee094c7043f7cdde7d99fbd50a"
Expand Down