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

NEW Select all and clear all functionality #1418

Merged
merged 1 commit into from
Nov 7, 2023
Merged

NEW Select all and clear all functionality #1418

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions client/dist/js/TinyMCE_sslink-file.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions client/dist/js/TinyMCE_ssmedia.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/js/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion client/dist/styles/bundle.css
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions client/lang/src/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"AssetAdmin.BULK_ACTIONS_ARCHIVE_ITEMS_CONFIRM": "You're about to archive %s file(s) which may be used in your site's content. Carefully check the file usage on the files before archiving the file(s).",
"AssetAdmin.BULK_ACTIONS_ARCHIVE_SUCCESS_02": "%s folders/files were successfully archived.",
"AssetAdmin.BULK_ACTIONS_ARCHIVE_WARNING": "Ensure files are removed from content areas prior to archiving them, otherwise they will appear as broken links.",
"AssetAdmin.BULK_ACTIONS_CLEAR_SELECTION": "Clear selection",
"AssetAdmin.BULK_ACTIONS_CONFIRM": "Are you sure you want to %s these files?",
"AssetAdmin.BULK_ACTIONS_DELETE": "Delete",
"AssetAdmin.BULK_ACTIONS_DELETE_CONFIRM": "Are you sure you want to delete these files?",
Expand All @@ -26,6 +27,8 @@
"AssetAdmin.BULK_ACTIONS_DELETE_SUCCESS_02": "%s folders/files were successfully deleted.",
"AssetAdmin.BULK_ACTIONS_DELETE_WARNING": "Ensure files are removed from content areas prior to deleting them, otherwise they will appear as broken links.",
"AssetAdmin.BULK_ACTIONS_PLACEHOLDER": "Select an action...",
"AssetAdmin.BULK_ACTIONS_SELECTED": "%s selected",
"AssetAdmin.BULK_ACTIONS_SELECT_ALL": "Select all",
"AssetAdmin.CANCEL": "Cancel",
"AssetAdmin.CONFIRMDELETE": "Are you sure you want to delete this record?",
"AssetAdmin.CONFIRM_FILE_ARCHIVE": "Confirm archive",
Expand Down
26 changes: 22 additions & 4 deletions client/src/components/BulkActions/BulkActions.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import PropTypes from 'prop-types';
class BulkActions extends Component {
constructor(props) {
super(props);

this.handleChangeValue = this.handleChangeValue.bind(this);
this.renderChild = this.renderChild.bind(this);
}
Expand Down Expand Up @@ -106,13 +105,30 @@ class BulkActions extends Component {
}

const { ActionMenu, showCount } = this.props;

const count = this.props.items.length;
const selectAll = i18n._t('AssetAdmin.BULK_ACTIONS_SELECT_ALL', 'Select all');
const selected = i18n.sprintf(
i18n._t('AssetAdmin.BULK_ACTIONS_SELECTED', '%s selected'),
this.props.items.length
);
const title = i18n._t('AssetAdmin.BULK_ACTIONS_CLEAR_SELECTION', 'Clear selection');

return (
<div className="bulk-actions fieldholder-small">
{showCount &&
<div className="bulk-actions-counter">{count}</div>
<>
<Button
className="bulk-actions-counter font-icon-cross-mark"
onClick={this.props.onClearSelection}
title={title}
>
{selected}
</Button>
<div className="bulk-actions-select-all">
<Button onClick={this.props.onSelectAll}>
{selectAll}
</Button>
</div>
</>
}
{children.slice(0, 2)}
{children.length > 2 && ActionMenu
Expand Down Expand Up @@ -144,6 +160,8 @@ BulkActions.propTypes = {
})),
ActionMenu: PropTypes.elementType,
showCount: PropTypes.bool,
onClearSelection: PropTypes.func.isRequired,
onSelectAll: PropTypes.func.isRequired,
};

BulkActions.defaultProps = {
Expand Down
16 changes: 14 additions & 2 deletions client/src/components/BulkActions/BulkActions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,27 @@ $bulk-actions-width: 300px;

.bulk-actions-counter {
vertical-align: middle;
min-width: 28px;
padding: 6px;
padding: 5px 12px 5px 8px;
margin-right: 8px;
line-height: $line-height-base;
color: $white;
text-align: center;
background-color: $component-active-bg;
border-radius: $btn-border-radius;
font-weight: bold;

&.btn-secondary:hover,
&.btn-secondary:focus,
&.btn-secondary:focus-visible {
background-color: $brand-secondary;
border-color: $brand-secondary;
color: $white;
}
}

.bulk-actions-select-all button {
color: $component-active-bg;
font-weight: bold;
}

.bulk-actions__action.ss-ui-button {
Expand Down
13 changes: 12 additions & 1 deletion client/src/containers/Gallery/Gallery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const ACTION_TYPES = {
UNPUBLISH: 'unpublish',
INSERT: 'insert',
ADMIN: 'admin',
SELECT: 'select'
SELECT: 'select',
};

class Gallery extends Component {
Expand Down Expand Up @@ -68,6 +68,7 @@ class Gallery extends Component {
this.handleBeginSelection = this.handleBeginSelection.bind(this);
this.handleGroupSelect = this.handleGroupSelect.bind(this);
this.handleClearSelection = this.handleClearSelection.bind(this);
this.handleSelectAll = this.handleSelectAll.bind(this);
this.toggleSelectConcat = this.toggleSelectConcat.bind(this);
this.getSelectableFiles = this.getSelectableFiles.bind(this);
}
Expand Down Expand Up @@ -539,6 +540,14 @@ class Gallery extends Component {
this.props.actions.gallery.deselectFiles();
}

/**
* Selects all visible files
*/
handleSelectAll() {
const ids = this.props.files.map(file => file.id);
this.handleGroupSelect(ids, new Event('na'));
}

/**
* Pick if the selection started from inside the pagination. If it started from inside the
* pagination, cancel it to prevent inteference with the normal pagination.
Expand Down Expand Up @@ -756,6 +765,8 @@ class Gallery extends Component {
key={selected.length > 0}
container={this.gallery}
showCount={maxFilesSelect !== 1}
onClearSelection={this.handleClearSelection}
onSelectAll={this.handleSelectAll}
/>
);
}
Expand Down
30 changes: 24 additions & 6 deletions tests/behat/features/manage-files.feature
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ Feature: Manage files
Scenario: I can edit a folder
When I check the folder named "folder1" in the gallery
Then I should see an ".bulk-actions__action[value='edit']" element
And the ".bulk-actions-counter" element should contain "1"
And the ".bulk-actions-counter" element should contain "1 selected"
When I press the "Edit" button
And I wait for 1 second
Then I should see the "Form_fileEditForm" form
Expand Down Expand Up @@ -106,14 +106,14 @@ Feature: Manage files
When I click on the file named "folder1" in the gallery
And I check the file named "file1" in the gallery
Then I should see an ".bulk-actions__action[value='edit']" element
And the ".bulk-actions-counter" element should contain "1"
And the ".bulk-actions-counter" element should contain "1 selected"
When I check the file named "file2" in the gallery
Then the ".bulk-actions__action[value='delete']" element should contain "Delete"
And the ".bulk-actions-counter" element should contain "2"
And the ".bulk-actions-counter" element should contain "2 selected"
And I should not see an ".bulk-actions__action[value='edit']" element
When I attach the file "testfile.jpg" to dropzone "gallery-container"
And I check the file named "testfile" in the gallery
Then the ".bulk-actions-counter" element should contain "3"
Then the ".bulk-actions-counter" element should contain "3 selected"
And I press the "Delete" button
Then I should see a modal titled "Confirm deletion"
And I press the Delete button inside the modal
Expand All @@ -129,11 +129,11 @@ Feature: Manage files
And I check the file named "file1" in the gallery
And I check the file named "file2" in the gallery
Then I should see an ".bulk-actions__action[value='move']" element
And the ".bulk-actions-counter" element should contain "2"
And the ".bulk-actions-counter" element should contain "2 selected"
And the ".bulk-actions__action[value='move']" element should contain "Move"
When I attach the file "testfile.jpg" to dropzone "gallery-container"
And I check the file named "testfile" in the gallery
Then the ".bulk-actions-counter" element should contain "3"
Then the ".bulk-actions-counter" element should contain "3 selected"
And I press the "Move" button
Then I should see a modal titled "Move 3 item(s) to..."
And I should see the "Form_moveForm" form
Expand All @@ -148,6 +148,24 @@ Feature: Manage files
And I should see the file named "file2" in the gallery
And I should see the file named "testfile" in the gallery

Scenario: I can select all and deselect all files with bulk action buttons
Given a "image" "assets/folder1/file2.jpg" was created "2012-01-02 12:00:00"
When I click on the file named "folder1" in the gallery
Then I should not see a ".bulk-actions" element
And I should not see a "bulk-actions-counter" element
And I should not see a "bulk-actions-select-all" element
When I check the file named "file1" in the gallery
Then I should see a ".bulk-actions" element
And I should see a ".bulk-actions-counter" element
And the ".bulk-actions-counter" element should contain "1 selected"
And I should see a ".bulk-actions-select-all" element
When I click on the ".bulk-actions-select-all" element
Then the ".bulk-actions-counter" element should contain "3 selected"
When I click on the ".bulk-actions-counter" element
Then I should not see a ".bulk-actions" element
And I should not see a "bulk-actions-counter" element
And I should not see a "bulk-actions-select-all" element

Scenario: I can publish and unpublish multiple files
Given a "image" "assets/folder1/file2.jpg" was created "2012-01-02 12:00:00"
And a "image" "assets/folder1/testfile.jpg"
Expand Down