From afcefbc81ee43295dc7de7e6881afc6e2e6439ee Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Fri, 19 Jun 2020 18:35:29 +0300 Subject: [PATCH 01/27] Introduce massaction mod for media gallery --- .../Controller/Adminhtml/Image/Delete.php | 17 +-- MediaGalleryUi/Model/DeleteImage.php | 28 +++-- .../ui_component/media_gallery_listing.xml | 1 + .../standalone_media_gallery_listing.xml | 8 ++ .../adminhtml/web/css/source/_module.less | 5 +- .../adminhtml/web/js/action/deleteImage.js | 98 +++++++-------- .../deleteImageWithDetailConfirmation.js | 2 +- .../view/adminhtml/web/js/grid/checkboxes.js | 41 ++++++ .../view/adminhtml/web/js/grid/massactions.js | 119 ++++++++++++++++++ .../template/grid/massactions/checkboxes.html | 9 ++ 10 files changed, 258 insertions(+), 70 deletions(-) create mode 100644 MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js create mode 100644 MediaGalleryUi/view/adminhtml/web/js/grid/massactions.js create mode 100644 MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html diff --git a/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php b/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php index d189117cf91d..0a9c6e7a0a97 100644 --- a/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php +++ b/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php @@ -85,12 +85,12 @@ public function execute() { /** @var Json $resultJson */ $resultJson = $this->resultFactory->create(ResultFactory::TYPE_JSON); - $imageId = (int) $this->getRequest()->getParam('id'); + $imageIds = $this->getRequest()->getParam('ids'); - if ($imageId === 0) { + if (empty($imageIds) || !is_array($imageIds)) { $responseContent = [ 'success' => false, - 'message' => __('Image ID is required.'), + 'message' => __('Image Ids is required and must be type of array.'), ]; $resultJson->setHttpResponseCode(self::HTTP_BAD_REQUEST); $resultJson->setData($responseContent); @@ -99,14 +99,15 @@ public function execute() } try { - $assets = $this->getAssetsByIds->execute([$imageId]); - /** @var AssetInterface $asset */ - $asset = current($assets); - $this->deleteImage->execute($asset); + $this->deleteImage->execute($this->getAssetsByIds->execute($imageIds)); $responseCode = self::HTTP_OK; + $prefix = count($imageIds) > 1 ? 'images' : 'image'; $responseContent = [ 'success' => true, - 'message' => __('You have successfully removed the image "%image"', ['image' => $asset->getTitle()]), + 'message' => __( + 'You have successfully removed the "%image" ' . $prefix, + ['image' => count($imageIds)] + ), ]; } catch (LocalizedException $exception) { $responseCode = self::HTTP_BAD_REQUEST; diff --git a/MediaGalleryUi/Model/DeleteImage.php b/MediaGalleryUi/Model/DeleteImage.php index b3a954c7bc5f..75562fa9fdd6 100644 --- a/MediaGalleryUi/Model/DeleteImage.php +++ b/MediaGalleryUi/Model/DeleteImage.php @@ -56,17 +56,27 @@ public function __construct( * * @see \Magento\MediaGallery\Plugin\Wysiwyg\Images\Storage * - * @param AssetInterface $asset - * @throws LocalizedException + * @param AssetInterface[] $asset */ - public function execute(AssetInterface $asset): void + public function execute(array $assets): void { - if ($this->isPathExcluded->execute($asset->getPath())) { - throw new LocalizedException(__('Could not delete image: destination directory is restricted.')); - } + $failedAssets = []; + foreach ($assets as $asset) { + if ($this->isPathExcluded->execute($asset->getPath())) { + $failedAssets[] = $asset->getPath(); + } - $mediaDirectory = $this->filesystem->getDirectoryRead(DirectoryList::MEDIA); - $absolutePath = $mediaDirectory->getAbsolutePath($asset->getPath()); - $this->imagesStorage->deleteFile($absolutePath); + $mediaDirectory = $this->filesystem->getDirectoryRead(DirectoryList::MEDIA); + $absolutePath = $mediaDirectory->getAbsolutePath($asset->getPath()); + $this->imagesStorage->deleteFile($absolutePath); + } + if (!empty($failedAssets)) { + throw new LocalizedException( + __( + 'Could not delete "%image": destination directory is restricted.', + ['image' => implode(",", $failedAssets)] + ) + ); + } } } diff --git a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml index c84779a38efe..2e1f92807278 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml @@ -115,6 +115,7 @@ + diff --git a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml index 0a08034354a2..fa17e51d9322 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml @@ -102,6 +102,7 @@ + @@ -155,6 +156,13 @@ false + + + + standalone_media_gallery_listing.standalone_media_gallery_listing.listing_top.media_gallery_massactions + + + diff --git a/MediaGalleryUi/view/adminhtml/web/css/source/_module.less b/MediaGalleryUi/view/adminhtml/web/css/source/_module.less index 34bb23ea29a9..d4d9d3eab3bc 100644 --- a/MediaGalleryUi/view/adminhtml/web/css/source/_module.less +++ b/MediaGalleryUi/view/adminhtml/web/css/source/_module.less @@ -40,6 +40,9 @@ color: @color-media-gallery-buttons-text; } + .mediagallery-massaction-checkbox { + position: relative; + } .media-gallery-container { .masonry-image-grid .no-data-message-container, @@ -123,7 +126,7 @@ border-radius: 6px; padding-top: 6px; } - + .masonry-image-overlay { background-color: @color-masonry-overlay; float: right; diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js index 2e726c6fae15..7a4911e47d40 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js @@ -11,61 +11,54 @@ define([ ], function ($, _, urlBuilder, messages, confirmation) { 'use strict'; - return { + return function (records, deleteUrl, confirmationContent) { + var deferred = $.Deferred(), + title = $.mage.__('Delete image'), + cancelText = $.mage.__('Cancel'), + deleteImageText = $.mage.__('Delete Image'); - /** - * Delete image action - * - * @param {Object} record - * @param {String} deleteUrl - * @param {String} confirmationContent - */ - deleteImageAction: function (record, deleteUrl, confirmationContent) { - var title = $.mage.__('Delete image'), - cancelText = $.mage.__('Cancel'), - deleteImageText = $.mage.__('Delete Image'), - deleteImageCallback = this.deleteImage.bind(this); - - confirmation({ - title: title, - modalClass: 'media-gallery-delete-image-action', - content: confirmationContent, - buttons: [ - { - text: cancelText, - class: 'action-secondary action-dismiss', + confirmation({ + title: title, + modalClass: 'media-gallery-delete-image-action', + content: confirmationContent, + buttons: [ + { + text: cancelText, + class: 'action-secondary action-dismiss', - /** - * Close modal - */ - click: function () { - this.closeModal(); - } - }, - { - text: deleteImageText, - class: 'action-primary action-accept', + /** + * Close modal + */ + click: function () { + this.closeModal(); + deferred.resolve(); + } + }, + { + text: deleteImageText, + class: 'action-primary action-accept', - /** - * Delete Image and close modal - */ - click: function () { - deleteImageCallback(record, deleteUrl); - this.closeModal(); - } + /** + * Delete Image and close modal + */ + click: function () { + sendRequest(records, deleteUrl); + this.closeModal(); } - ] - }); - }, + } + ] + }); /** - * Delete image + * Send deletion request with redords ids * - * @param {Object} record + * @param {Array} records * @param {String} deleteUrl */ - deleteImage: function (record, deleteUrl) { - var recordId = record.id; + function sendRequest(records, deleteUrl) { + var recordIds = $.map(records, function (record) { + return record.id; + }); $.ajax({ type: 'POST', @@ -73,7 +66,7 @@ define([ dataType: 'json', showLoader: true, data: { - 'id': recordId + 'ids': recordIds }, context: this, @@ -86,22 +79,23 @@ define([ var message = !_.isUndefined(response.message) ? response.message : null; if (!response.success) { - message = message || $.mage.__('There was an error on attempt to delete the image.'); + message = message || $.mage.__('There was an error on attempt to delete the images.'); $(window).trigger('fileDeleted.enhancedMediaGallery', { reload: false, message: message, code: 'error' }); - return; + deferred.reject(message); } - message = message || $.mage.__('You have successfully removed the image.'); + message = message || $.mage.__('You have successfully removed the images.'); $(window).trigger('fileDeleted.enhancedMediaGallery', { reload: true, message: message, code: 'success' }); + deferred.resolve(message); }, /** @@ -128,5 +122,7 @@ define([ } }); } - }; + + return deferred.promise(); + } }); diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js index e399f5ae4180..72f89d763677 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js @@ -32,7 +32,7 @@ define([ }.bind(this)).fail(function () { confirmationContent = confirmationContent.replace('%1', ''); }).always(function () { - deleteImage.deleteImageAction(record, deleteImageUrl, confirmationContent); + deleteImage([record], deleteImageUrl, confirmationContent); }); }, diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js b/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js new file mode 100644 index 000000000000..b7c9cafd7e1d --- /dev/null +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js @@ -0,0 +1,41 @@ +/** + * Copyright © Magento, Inc. All rights reserved. + * See COPYING.txt for license details. + */ + +/* global Base64 */ +define([ + 'jquery', + 'Magento_Ui/js/grid/columns/column' +], function ($, Column) { + 'use strict'; + + return Column.extend({ + defaults: { + bodyTmpl: 'Magento_MediaGalleryUi/grid/massactions/checkboxes', + modules: { + massactions: '${ $.massActionComponent }' + } + }, + + /** + * Initializes media gallery massaction component. + * + * @returns {Sticky} Chainable. + */ + initialize: function () { + this._super().observe([ + 'selectedItems' + ]); + + return this; + }, + + /** + * Is massaction mod active. + */ + isMassAction: function () { + return this.massactions().isMassAction(); + } + }); +}); diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massactions.js new file mode 100644 index 000000000000..ee6d6b4cc80b --- /dev/null +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massactions.js @@ -0,0 +1,119 @@ +/** + * Copyright © Magento, Inc. All rights reserved. + * See COPYING.txt for license details. + */ + +/* global Base64 */ +define([ + 'jquery', + 'uiComponent', + 'underscore', + 'Magento_MediaGalleryUi/js/directory/actions/createDirectory' +], function ($, Component, layout, _, createDirectory) { + 'use strict'; + + return Component.extend({ + defaults: { + standAloneTitle: 'Manage Gallery', + slidePanelTitle: 'Media Gallery', + defaultTitle: null, + massactionModeTitle: 'Select Images to Delete' + }, + + /** + * Initializes media gallery massaction component. + * + * @returns {Sticky} Chainable. + */ + initialize: function () { + this._super().observe([ + 'selectedItems', + 'massActionMode' + ]); + this.initEvents(); + + return this; + }, + + /** + * Is massaction mod active. + */ + isMassAction: function () { + return this.massActionMode(); + }, + + /** + * Initilize massactions events for media gallery grid. + */ + initEvents: function () { + $(window).on('massAction.MediaGallery', function () { + if (this.massActionMode()) { + return; + } + this.massActionMode(true); + this.switchMode(); + }.bind(this)); + + $(window).on('terminateMassAction.MediaGallery', function () { + if (!this.massActionMode()) { + return; + } + this.massActionMode(false); + this.switchMode(); + }.bind(this)); + }, + + /** + * Switch massaction per current event. + */ + switchMode: function () { + this.changePageTItle(); + this.switchButtons(); + }, + + /** + * Hide or show buttons per active mode. + */ + switchButtons: function () { + var buttonsIds = [ + '#delete_folder', + '#create_folder', + '#upload_image', + '#search_adobe_stock' + ], + deleteButtonSelector = '#delete_selected'; + + if (this.massActionMode()) { + $.each(buttonsIds, function (key, value) { + $(value).addClass('no-display'); + }); + + $(deleteButtonSelector).removeClass('no-display media-gallery-actions-buttons'); + $(deleteButtonSelector).addClass('primary'); + } else { + $.each(buttonsIds, function (key, value) { + $(value).removeClass('no-display'); + }); + $(deleteButtonSelector).addClass('no-display media-gallery-actions-buttons'); + $(deleteButtonSelector).removeClass('primary'); + } + + }, + + /** + * Change page title per active mode. + */ + changePageTItle: function () { + var title = $('h1:contains(' + this.standAloneTitle + ')'), + titleSelector = title.length === 1 ? title : $('h1:contains(' + this.slidePanelTitle + ')'); + + if (this.massActionMode()) { + this.defaultTitle = titleSelector.text(); + titleSelector.text(this.massactionModeTitle); + } else { + titleSelector = $('h1:contains(' + this.massactionModeTitle + ')'); + titleSelector.text(this.defaultTitle); + } + } + }); +}); diff --git a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html new file mode 100644 index 000000000000..c3cd4d05b6fb --- /dev/null +++ b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html @@ -0,0 +1,9 @@ + +
+ +
From b56ac460cb64cd315f29736950ea186222db9e5c Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Fri, 19 Jun 2020 18:54:43 +0300 Subject: [PATCH 02/27] correct styles for checkbox component --- .../view/adminhtml/web/css/source/_module.less | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/MediaGalleryUi/view/adminhtml/web/css/source/_module.less b/MediaGalleryUi/view/adminhtml/web/css/source/_module.less index d4d9d3eab3bc..d8a8a6f83c7d 100644 --- a/MediaGalleryUi/view/adminhtml/web/css/source/_module.less +++ b/MediaGalleryUi/view/adminhtml/web/css/source/_module.less @@ -17,6 +17,7 @@ @color-media-gallery-buttons-background: #e3e3e3; @color-media-gallery-buttons-border: #adadad; @color-media-gallery-buttons-text: #514943; +@color-media-gallery-checkbox-background: #eee; & when (@media-common = true) { @@ -41,7 +42,16 @@ } .mediagallery-massaction-checkbox { - position: relative; + position: absolute; + margin-top: -280px; + margin-left: 15px; + width: 40px; + height: 40px; + background-color: @color-media-gallery-checkbox-background; + input[type="checkbox"] { + margin-left: 10px; + margin-top: 11px; + } } .media-gallery-container { From 21ef7b2b302390cadd149e191ade08745e091bc6 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Fri, 19 Jun 2020 18:57:03 +0300 Subject: [PATCH 03/27] Correct border radius --- MediaGalleryUi/view/adminhtml/web/css/source/_module.less | 1 + 1 file changed, 1 insertion(+) diff --git a/MediaGalleryUi/view/adminhtml/web/css/source/_module.less b/MediaGalleryUi/view/adminhtml/web/css/source/_module.less index d8a8a6f83c7d..52f2b9ebb75e 100644 --- a/MediaGalleryUi/view/adminhtml/web/css/source/_module.less +++ b/MediaGalleryUi/view/adminhtml/web/css/source/_module.less @@ -47,6 +47,7 @@ margin-left: 15px; width: 40px; height: 40px; + border-radius: 4px; background-color: @color-media-gallery-checkbox-background; input[type="checkbox"] { margin-left: 10px; From bcc1d62ddf859589f5ea35702243637d9b2ec53f Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Fri, 19 Jun 2020 22:10:25 +0300 Subject: [PATCH 04/27] Improve slide panel gallery, fix mftf tests --- ...inEnhancedMediaGalleryImageDeletedActionGroup.xml | 2 +- .../adminhtml/ui_component/media_gallery_listing.xml | 12 +++++++++++- .../standalone_media_gallery_listing.xml | 3 +++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml index bc00f7c874b1..5887ce350e71 100644 --- a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml @@ -15,7 +15,7 @@ - + diff --git a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml index 2e1f92807278..55410037ae22 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml @@ -115,7 +115,7 @@ - + @@ -162,6 +162,16 @@ media-gallery-masonry-grid + + + + media_gallery_listing.media_gallery_listing.listing_top.media_gallery_massactions + + + + false + + diff --git a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml index fa17e51d9322..e0d63c435195 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml @@ -161,6 +161,9 @@ standalone_media_gallery_listing.standalone_media_gallery_listing.listing_top.media_gallery_massactions + + false + From a466964e1590841e9ae1b1938d24f359f1a059eb Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Sat, 20 Jun 2020 11:42:26 +0300 Subject: [PATCH 05/27] Hide column from sort by component --- .../view/adminhtml/ui_component/media_gallery_listing.xml | 6 +++--- .../ui_component/standalone_media_gallery_listing.xml | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml index 55410037ae22..9c0d85c29c54 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml @@ -167,10 +167,10 @@ media_gallery_listing.media_gallery_listing.listing_top.media_gallery_massactions + + true + - - false - diff --git a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml index e0d63c435195..adc80f73e36e 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml @@ -160,11 +160,11 @@ standalone_media_gallery_listing.standalone_media_gallery_listing.listing_top.media_gallery_massactions + + true + - - false - - + From d13f78bc8162fa850d3dcd3602065aafd097e71b Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Sat, 20 Jun 2020 13:05:00 +0300 Subject: [PATCH 06/27] Track selected items in checkbox component fix static tests --- MediaGalleryUi/Model/DeleteImage.php | 2 +- .../ui_component/media_gallery_listing.xml | 3 + .../standalone_media_gallery_listing.xml | 3 + .../adminhtml/web/css/source/_module.less | 15 ++-- .../adminhtml/web/js/action/deleteImage.js | 78 +++++++++---------- .../view/adminhtml/web/js/grid/checkboxes.js | 32 ++++++-- .../view/adminhtml/web/js/grid/massactions.js | 11 +-- .../template/grid/massactions/checkboxes.html | 2 +- 8 files changed, 85 insertions(+), 61 deletions(-) diff --git a/MediaGalleryUi/Model/DeleteImage.php b/MediaGalleryUi/Model/DeleteImage.php index 75562fa9fdd6..9b00a1dbe315 100644 --- a/MediaGalleryUi/Model/DeleteImage.php +++ b/MediaGalleryUi/Model/DeleteImage.php @@ -56,7 +56,7 @@ public function __construct( * * @see \Magento\MediaGallery\Plugin\Wysiwyg\Images\Storage * - * @param AssetInterface[] $asset + * @param AssetInterface[] $assets */ public function execute(array $assets): void { diff --git a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml index 9c0d85c29c54..d8e6fb706b6d 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml @@ -171,6 +171,9 @@ true + + Magento_MediaGalleryUi/grid/massactions/checkboxes + diff --git a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml index adc80f73e36e..15ba6e4692e9 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml @@ -165,6 +165,9 @@ + + Magento_MediaGalleryUi/grid/massactions/checkboxes + diff --git a/MediaGalleryUi/view/adminhtml/web/css/source/_module.less b/MediaGalleryUi/view/adminhtml/web/css/source/_module.less index 52f2b9ebb75e..3d25a105f1f8 100644 --- a/MediaGalleryUi/view/adminhtml/web/css/source/_module.less +++ b/MediaGalleryUi/view/adminhtml/web/css/source/_module.less @@ -42,18 +42,19 @@ } .mediagallery-massaction-checkbox { - position: absolute; - margin-top: -280px; - margin-left: 15px; - width: 40px; - height: 40px; - border-radius: 4px; background-color: @color-media-gallery-checkbox-background; + border-radius: 4px; + height: 40px; input[type="checkbox"] { margin-left: 10px; margin-top: 11px; } + margin-left: 15px; + margin-top: -280px; + position: absolute; + width: 40px; } + .media-gallery-container { .masonry-image-grid .no-data-message-container, @@ -137,7 +138,7 @@ border-radius: 6px; padding-top: 6px; } - + .masonry-image-overlay { background-color: @color-masonry-overlay; float: right; diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js index 7a4911e47d40..c2ed3840e14b 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js @@ -17,52 +17,20 @@ define([ cancelText = $.mage.__('Cancel'), deleteImageText = $.mage.__('Delete Image'); - confirmation({ - title: title, - modalClass: 'media-gallery-delete-image-action', - content: confirmationContent, - buttons: [ - { - text: cancelText, - class: 'action-secondary action-dismiss', - - /** - * Close modal - */ - click: function () { - this.closeModal(); - deferred.resolve(); - } - }, - { - text: deleteImageText, - class: 'action-primary action-accept', - - /** - * Delete Image and close modal - */ - click: function () { - sendRequest(records, deleteUrl); - this.closeModal(); - } - } - ] - }); - /** * Send deletion request with redords ids * - * @param {Array} records - * @param {String} deleteUrl + * @param {Array} images + * @param {String} serviceUrl */ - function sendRequest(records, deleteUrl) { - var recordIds = $.map(records, function (record) { - return record.id; + function sendRequest(images, serviceUrl) { + var recordIds = $.map(images, function (image) { + return image.id; }); $.ajax({ type: 'POST', - url: deleteUrl, + url: serviceUrl, dataType: 'json', showLoader: true, data: { @@ -123,6 +91,38 @@ define([ }); } + confirmation({ + title: title, + modalClass: 'media-gallery-delete-image-action', + content: confirmationContent, + buttons: [ + { + text: cancelText, + class: 'action-secondary action-dismiss', + + /** + * Close modal + */ + click: function () { + this.closeModal(); + deferred.resolve(); + } + }, + { + text: deleteImageText, + class: 'action-primary action-accept', + + /** + * Delete Image and close modal + */ + click: function () { + sendRequest(records, deleteUrl); + this.closeModal(); + } + } + ] + }); + return deferred.promise(); - } + }; }); diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js b/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js index b7c9cafd7e1d..2245e969f83c 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js @@ -3,7 +3,6 @@ * See COPYING.txt for license details. */ -/* global Base64 */ define([ 'jquery', 'Magento_Ui/js/grid/columns/column' @@ -12,25 +11,46 @@ define([ return Column.extend({ defaults: { - bodyTmpl: 'Magento_MediaGalleryUi/grid/massactions/checkboxes', modules: { massactions: '${ $.massActionComponent }' } }, /** - * Initializes media gallery massaction component. + * Initializes media gallery checkbox component. * * @returns {Sticky} Chainable. */ initialize: function () { - this._super().observe([ - 'selectedItems' - ]); + this._super().observe(['selectedItems']); + + this.selectedItems({}); return this; }, + /** + * Checkbox checked, push ids to the selected ids or remove if the same cheked. + */ + selectItem: function (record) { + if (this.isMassAction()) { + if (this.selectedItems()[record.id]) { + delete this.selectedItems()[record.id]; + } else { + this.selectedItems()[record.id] = record.id; + } + } + + return true; + }, + + /** + * Is current record already checked. + */ + isChecked: function (record) { + return this.selectedItems()[record.id]; + }, + /** * Is massaction mod active. */ diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massactions.js index ee6d6b4cc80b..12db8dd29e20 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massactions.js @@ -3,13 +3,10 @@ * See COPYING.txt for license details. */ -/* global Base64 */ define([ 'jquery', - 'uiComponent', - 'underscore', - 'Magento_MediaGalleryUi/js/directory/actions/createDirectory' -], function ($, Component, layout, _, createDirectory) { + 'uiComponent' +], function ($, Component) { 'use strict'; return Component.extend({ @@ -67,7 +64,7 @@ define([ * Switch massaction per current event. */ switchMode: function () { - this.changePageTItle(); + this.changePageTitle(); this.switchButtons(); }, @@ -103,7 +100,7 @@ define([ /** * Change page title per active mode. */ - changePageTItle: function () { + changePageTitle: function () { var title = $('h1:contains(' + this.standAloneTitle + ')'), titleSelector = title.length === 1 ? title : $('h1:contains(' + this.slidePanelTitle + ')'); diff --git a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html index c3cd4d05b6fb..d14441271983 100644 --- a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html +++ b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html @@ -5,5 +5,5 @@ */ -->
- +
From 1cb166996a2661a7da45c9c487aa92f1da57ffe0 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Sat, 20 Jun 2020 13:43:41 +0300 Subject: [PATCH 07/27] use single quotes --- MediaGalleryUi/view/adminhtml/web/css/source/_module.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MediaGalleryUi/view/adminhtml/web/css/source/_module.less b/MediaGalleryUi/view/adminhtml/web/css/source/_module.less index 3d25a105f1f8..be44743adebe 100644 --- a/MediaGalleryUi/view/adminhtml/web/css/source/_module.less +++ b/MediaGalleryUi/view/adminhtml/web/css/source/_module.less @@ -45,7 +45,7 @@ background-color: @color-media-gallery-checkbox-background; border-radius: 4px; height: 40px; - input[type="checkbox"] { + input[type='checkbox'] { margin-left: 10px; margin-top: 11px; } From 77d144f5e7e80a372f63c78e7f89aae6e556b087 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Sat, 20 Jun 2020 16:22:15 +0300 Subject: [PATCH 08/27] Correct component configuration --- ...sertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml | 2 +- .../view/adminhtml/ui_component/media_gallery_listing.xml | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml index 5887ce350e71..87fb94b20e9e 100644 --- a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml @@ -15,7 +15,7 @@ - + diff --git a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml index d8e6fb706b6d..c0ba36ef615d 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml @@ -166,9 +166,9 @@ media_gallery_listing.media_gallery_listing.listing_top.media_gallery_massactions - - - true + + true + From 2efa76f8a05b493546474dc192e5d4dcb3550552 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Mon, 22 Jun 2020 10:56:31 +0300 Subject: [PATCH 09/27] Show count of selected items --- .../ui_component/standalone_media_gallery_listing.xml | 6 +++++- .../view/adminhtml/web/css/source/_module.less | 9 ++++++++- .../view/adminhtml/web/js/grid/checkboxes.js | 1 + .../view/adminhtml/web/js/grid/massactions.js | 11 ++++++++++- .../web/template/grid/massactions/count.html | 9 +++++++++ 5 files changed, 33 insertions(+), 3 deletions(-) create mode 100644 MediaGalleryUi/view/adminhtml/web/template/grid/massactions/count.html diff --git a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml index 15ba6e4692e9..477b799f5c9a 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml @@ -102,7 +102,6 @@ - @@ -138,6 +137,11 @@ + +
+
( Selected)
+
From b6012a9906b3e5158c160b733525e61d06bc0410 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Mon, 22 Jun 2020 15:21:04 +0300 Subject: [PATCH 10/27] Send request to delete selected item, rfactoring --- .../Controller/Adminhtml/Image/Delete.php | 13 +- ...cedMediaGalleryImageDeletedActionGroup.xml | 2 +- .../ui_component/media_gallery_listing.xml | 13 +- .../standalone_media_gallery_listing.xml | 11 +- .../adminhtml/web/css/source/_module.less | 2 +- .../deleteImageWithDetailConfirmation.js | 6 +- .../{deleteImage.js => deleteImages.js} | 12 +- .../massactionView.js} | 96 ++++++------ .../web/js/grid/massaction/massactions.js | 138 ++++++++++++++++++ 9 files changed, 218 insertions(+), 75 deletions(-) rename MediaGalleryUi/view/adminhtml/web/js/action/{deleteImage.js => deleteImages.js} (92%) rename MediaGalleryUi/view/adminhtml/web/js/grid/{massactions.js => massaction/massactionView.js} (51%) create mode 100644 MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js diff --git a/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php b/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php index 0a9c6e7a0a97..214d4485af17 100644 --- a/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php +++ b/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php @@ -90,7 +90,7 @@ public function execute() if (empty($imageIds) || !is_array($imageIds)) { $responseContent = [ 'success' => false, - 'message' => __('Image Ids is required and must be type of array.'), + 'message' => __('Image Ids are required and must be of type array.'), ]; $resultJson->setHttpResponseCode(self::HTTP_BAD_REQUEST); $resultJson->setData($responseContent); @@ -99,14 +99,15 @@ public function execute() } try { - $this->deleteImage->execute($this->getAssetsByIds->execute($imageIds)); + $assets = $this->getAssetsByIds->execute($imageIds); + $this->deleteImage->execute($assets); $responseCode = self::HTTP_OK; - $prefix = count($imageIds) > 1 ? 'images' : 'image'; + $message = count($imageIds) > 1 ? 'assets have been' : ' asset "%assetName" has been'; $responseContent = [ 'success' => true, 'message' => __( - 'You have successfully removed the "%image" ' . $prefix, - ['image' => count($imageIds)] + 'The ' . $message . ' successfully deleted', + ['assetName' => current($assets)->getTitle()] ), ]; } catch (LocalizedException $exception) { @@ -120,7 +121,7 @@ public function execute() $responseCode = self::HTTP_INTERNAL_ERROR; $responseContent = [ 'success' => false, - 'message' => __('An error occurred on attempt to save image.'), + 'message' => __('An error occurred on attempt to delete image.'), ]; } diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml index 87fb94b20e9e..bc00f7c874b1 100644 --- a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml @@ -15,7 +15,7 @@ - + diff --git a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml index c0ba36ef615d..5d53c4de6a11 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml @@ -115,7 +115,6 @@ - @@ -151,6 +150,18 @@ + + + + standalone_media_gallery_listing.standalone_media_gallery_listing.media_gallery_columns.massaction_checkbox + standalone_media_gallery_listing.standalone_media_gallery_listing.media_gallery_columns.thumbnail_url + + + + component="Magento_MediaGalleryUi/js/grid/massaction/massactions" + template="Magento_MediaGalleryUi/grid/massactions/count" > + + + standalone_media_gallery_listing.standalone_media_gallery_listing.media_gallery_columns.massaction_checkbox + standalone_media_gallery_listing.standalone_media_gallery_listing.media_gallery_columns.thumbnail_url + + + Date: Mon, 22 Jun 2020 15:27:12 +0300 Subject: [PATCH 11/27] Typo fixes --- .../view/adminhtml/web/js/grid/massaction/massactionView.js | 2 +- .../view/adminhtml/web/js/grid/massaction/massactions.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js index 9fd0e9342692..6b501246c037 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js @@ -16,7 +16,7 @@ define([ standAloneTitle: 'Manage Gallery', slidePanelTitle: 'Media Gallery', defaultTitle: null, - bittonsIds: [ + buttonsIds: [ '#delete_folder', '#create_folder', '#upload_image', diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js index b145cb0cc49a..4c50a0adef92 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js @@ -64,7 +64,7 @@ define([ }, /** - * Is massaction mod active. + * Is massaction mode active. */ isMassAction: function () { return this.massActionMode() || false; From af43e33c85b355919e207ca1865afd11d9c0c0aa Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Mon, 22 Jun 2020 21:04:24 +0300 Subject: [PATCH 12/27] REfactor to better component dependency --- .../Controller/Adminhtml/Image/Delete.php | 8 +++--- ...cedMediaGalleryImageDeletedActionGroup.xml | 2 +- .../ui_component/media_gallery_listing.xml | 4 +-- .../view/adminhtml/web/js/grid/checkboxes.js | 25 +++++++++++++++---- .../web/js/grid/massaction/massactionView.js | 21 +++++++++++++++- .../web/js/grid/massaction/massactions.js | 23 ++++++----------- .../template/grid/massactions/checkboxes.html | 2 +- .../web/template/grid/massactions/count.html | 2 +- 8 files changed, 57 insertions(+), 30 deletions(-) diff --git a/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php b/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php index 214d4485af17..c1b937194b9a 100644 --- a/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php +++ b/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php @@ -102,12 +102,14 @@ public function execute() $assets = $this->getAssetsByIds->execute($imageIds); $this->deleteImage->execute($assets); $responseCode = self::HTTP_OK; - $message = count($imageIds) > 1 ? 'assets have been' : ' asset "%assetName" has been'; + $message = count($imageIds) > 1 ? 'assets have been' : ' asset ' . $asset->getTitle() . ' has been'; $responseContent = [ 'success' => true, 'message' => __( - 'The ' . $message . ' successfully deleted', - ['assetName' => current($assets)->getTitle()] + 'The %message successfully deleted', + [ + 'message' => $message + ] ), ]; } catch (LocalizedException $exception) { diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml index bc00f7c874b1..2d75a0933bf7 100644 --- a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml @@ -15,7 +15,7 @@ - + diff --git a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml index 5d53c4de6a11..c3df038f04b4 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml @@ -157,8 +157,8 @@ template="Magento_MediaGalleryUi/grid/massactions/count" > - standalone_media_gallery_listing.standalone_media_gallery_listing.media_gallery_columns.massaction_checkbox - standalone_media_gallery_listing.standalone_media_gallery_listing.media_gallery_columns.thumbnail_url + media_gallery_listing.media_gallery_listing.media_gallery_columns.massaction_checkbox + media_gallery_listing.media_gallery_listing.media_gallery_columns.thumbnail_url diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js b/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js index 6a2c66d6b94b..4fc2d01345ad 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js @@ -13,6 +13,9 @@ define([ defaults: { modules: { massactions: '${ $.massActionComponent }' + }, + listens: { + '${ $.massActionComponent }:massActionMode': 'setMode' } }, @@ -22,24 +25,36 @@ define([ * @returns {Sticky} Chainable. */ initialize: function () { - this._super().observe(['selectedItems']); + this._super().observe(['selectedItems', 'isMassActionMode']); this.selectedItems({}); return this; }, + /** + * Sets current mode + */ + setMode: function () { + this.isMassActionMode(this.massactions().massActionMode()); + }, + /** * Checkbox checked, push ids to the selected ids or remove if the same cheked. */ selectItem: function (record) { + var items; + if (this.isMassAction()) { + items = this.selectedItems(); + if (this.selectedItems()[record.id]) { - delete this.selectedItems()[record.id]; + delete items[record.id]; + this.selectedItems(items); } else { - this.selectedItems()[record.id] = record.id; + items[record.id] = record.id; + this.selectedItems(items); } - this.massactions().selectedItems(this.selectedItems()); } return true; @@ -56,7 +71,7 @@ define([ * Is massaction mod active. */ isMassAction: function () { - return this.massactions().isMassAction(); + return this.isMassActionMode(); } }); }); diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js index 6b501246c037..8605debb2d2a 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js @@ -11,11 +11,14 @@ define([ return Component.extend({ defaults: { + imageItemSelector: '.media-gallery-image-block', + gridSelector: '[data-id="media-gallery-masonry-grid"]', originDeleteSelector: null, deleteButtonSelector: '#delete_selected', standAloneTitle: 'Manage Gallery', slidePanelTitle: 'Media Gallery', defaultTitle: null, + contextButtonSelector: '.three-dots', buttonsIds: [ '#delete_folder', '#create_folder', @@ -47,8 +50,9 @@ define([ this.changePageTitle().then(function () { this.switchButtons().then(function () { + this.handleItemsUpdates(); deferred.resolve(); - }); + }.bind(this)); }.bind(this)); return deferred.promise(); @@ -67,6 +71,7 @@ define([ $(value).addClass('no-display'); }); + $(this.imageItemSelector).css('pointer-events', 'none'); $(this.deleteButtonSelector).removeClass('no-display media-gallery-actions-buttons'); $(this.deleteButtonSelector).addClass('primary'); @@ -76,6 +81,7 @@ define([ deferred.resolve(); } else { $(this.deleteButtonSelector).replaceWith(this.originDeleteSelector); + $(this.imageItemSelector).css('pointer-events', ''); $.each(this.buttonsIds, function (key, value) { $(value).removeClass('no-display'); @@ -89,6 +95,19 @@ define([ return deferred.promise(); }, + /** + * Keep buttons hidden on massaction mod state when grid updated. + */ + handleItemsUpdates: function () { + document.querySelectorAll(this.gridSelector)[0].addEventListener('DOMSubtreeModified', function () { + if (this.massActionMode()) { + $(this.imageItemSelector).css('pointer-events', 'none'); + $(this.contextButtonSelector).addClass('no-display'); + } + }.bind(this), false); + + }, + /** * Change page title per active mode. */ diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js index 4c50a0adef92..ecb1aaeba6f0 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js @@ -18,18 +18,16 @@ define([ checkbox: '${ $.checkboxComponentName }', imageModel: '${ $.imageModelName }' }, - imports: { - selectedItems: '${ $.checkboxComponentName }:selectedItems' - }, - listens: { - selectedItems: 'setItems' - }, viewConfig: [ { component: 'Magento_MediaGalleryUi/js/grid/massaction/massactionView', - name: '${ $.name }_view' + name: '${ $.name }_view', + provider: '${ $.provider }' } ], + listens: { + '${ $.checkboxComponentName }:selectedItems': 'setItems' + }, exports: { massActionMode: '${ $.name }_view:massActionMode' } @@ -45,9 +43,9 @@ define([ 'selectedItems', 'massActionMode' ]); + this.selectedItems({}); this.initView(); this.initEvents(); - this.selectedItems({}); return this; }, @@ -63,13 +61,6 @@ define([ return this; }, - /** - * Is massaction mode active. - */ - isMassAction: function () { - return this.massActionMode() || false; - }, - /** * Initilize massactions events for media gallery grid. */ @@ -95,7 +86,7 @@ define([ * Set selected items. from checkbox component. */ setItems: function () { - if (this.isMassAction()) { + if (this.massActionMode()) { this.selectedItems(this.checkbox().selectedItems()); } }, diff --git a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html index d14441271983..27e6c2b0ca5c 100644 --- a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html +++ b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html @@ -4,6 +4,6 @@ * See COPYING.txt for license details. */ --> -
+
diff --git a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/count.html b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/count.html index 88d339b64894..1bea830bb43c 100644 --- a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/count.html +++ b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/count.html @@ -4,6 +4,6 @@ * See COPYING.txt for license details. */ --> -
+
( Selected)
From e2bf31552253ab88b85a2a60224e8f42604b2637 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Mon, 22 Jun 2020 21:09:08 +0300 Subject: [PATCH 13/27] Fix typo --- MediaGalleryUi/Controller/Adminhtml/Image/Delete.php | 4 +++- .../view/adminhtml/web/js/grid/massaction/massactionView.js | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php b/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php index c1b937194b9a..8f234c4d2cc9 100644 --- a/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php +++ b/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php @@ -102,7 +102,9 @@ public function execute() $assets = $this->getAssetsByIds->execute($imageIds); $this->deleteImage->execute($assets); $responseCode = self::HTTP_OK; - $message = count($imageIds) > 1 ? 'assets have been' : ' asset ' . $asset->getTitle() . ' has been'; + $message = count($imageIds) > 1 ? + 'assets have been' : + ' asset ' . current($assets)->getTitle() . ' has been'; $responseContent = [ 'success' => true, 'message' => __( diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js index 8605debb2d2a..83001204cc07 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js @@ -24,7 +24,8 @@ define([ '#create_folder', '#upload_image', '#search_adobe_stock', - '.three-dots' + '.three-dots', + '#add_selected' ], massactionModeTitle: 'Select Images to Delete' }, From abed1ce9821d0ed0d90edff4c8a266fa296bc1b2 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Mon, 22 Jun 2020 21:47:27 +0300 Subject: [PATCH 14/27] fix statis tests --- MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js index 7639611f5d4b..9a69018a1d9d 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js @@ -11,7 +11,7 @@ define([ ], function ($, _, urlBuilder, messages, confirmation) { 'use strict'; - return function (recordIds, deleteUrl, confirmationContent) { + return function (ids, deleteUrl, confirmationContent) { var deferred = $.Deferred(), title = $.mage.__('Delete image'), cancelText = $.mage.__('Cancel'), @@ -114,7 +114,7 @@ define([ * Delete Image and close modal */ click: function () { - sendRequest(recordIds, deleteUrl); + sendRequest(ids, deleteUrl); this.closeModal(); } } From 8b79c96c6357ecee8e6a65228911ed0016b796c3 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Tue, 23 Jun 2020 00:21:32 +0300 Subject: [PATCH 15/27] Activate mass action if at least one item selected, add cancel button --- ...cedMediaGalleryImageDeletedActionGroup.xml | 2 +- .../view/adminhtml/web/js/grid/checkboxes.js | 38 ++------ .../web/js/grid/massaction/massactionView.js | 93 ++++++++++++------- .../web/js/grid/massaction/massactions.js | 19 ++-- .../template/grid/massactions/checkboxes.html | 2 +- 5 files changed, 82 insertions(+), 72 deletions(-) diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml index 2d75a0933bf7..68cbe85ac96c 100644 --- a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml @@ -15,7 +15,7 @@ - + diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js b/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js index 4fc2d01345ad..103eb87cb6ff 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js @@ -10,14 +10,6 @@ define([ 'use strict'; return Column.extend({ - defaults: { - modules: { - massactions: '${ $.massActionComponent }' - }, - listens: { - '${ $.massActionComponent }:massActionMode': 'setMode' - } - }, /** * Initializes media gallery checkbox component. @@ -32,29 +24,20 @@ define([ return this; }, - /** - * Sets current mode - */ - setMode: function () { - this.isMassActionMode(this.massactions().massActionMode()); - }, - /** * Checkbox checked, push ids to the selected ids or remove if the same cheked. */ selectItem: function (record) { var items; - if (this.isMassAction()) { - items = this.selectedItems(); + items = this.selectedItems(); - if (this.selectedItems()[record.id]) { - delete items[record.id]; - this.selectedItems(items); - } else { - items[record.id] = record.id; - this.selectedItems(items); - } + if (this.selectedItems()[record.id]) { + delete items[record.id]; + this.selectedItems(items); + } else { + items[record.id] = record.id; + this.selectedItems(items); } return true; @@ -65,13 +48,6 @@ define([ */ isChecked: function (record) { return this.selectedItems()[record.id]; - }, - - /** - * Is massaction mod active. - */ - isMassAction: function () { - return this.isMassActionMode(); } }); }); diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js index 83001204cc07..ca342e4affc5 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js @@ -12,9 +12,15 @@ define([ return Component.extend({ defaults: { imageItemSelector: '.media-gallery-image-block', + pageActionsSelector: '.page-actions-buttons', gridSelector: '[data-id="media-gallery-masonry-grid"]', originDeleteSelector: null, + originCancelEvent: null, + cancelMassactionButton: '', + isCancelButtonInserted: false, deleteButtonSelector: '#delete_selected', + assSelectedButtonSelector: '#add_selected', + cancelMassactionButtonSelector: '#cancel', standAloneTitle: 'Manage Gallery', slidePanelTitle: 'Media Gallery', defaultTitle: null, @@ -44,56 +50,77 @@ define([ }, /** - * Initializes media gallery massaction per active view. + * Switch massaction view state per active mode. */ switchView: function () { - var deferred = $.Deferred(); - - this.changePageTitle().then(function () { - this.switchButtons().then(function () { - this.handleItemsUpdates(); - deferred.resolve(); - }.bind(this)); - }.bind(this)); - - return deferred.promise(); + this.changePageTitle(); + this.switchButtons(); + this.handleItemsUpdates(); }, /** * Hide or show buttons per active mode. */ switchButtons: function () { - var deferred = $.Deferred(); if (this.massActionMode()) { - this.originDeleteSelector = $(this.deleteButtonSelector).clone(true, true); - - $.each(this.buttonsIds, function (key, value) { - $(value).addClass('no-display'); - }); + this.activateMassactionButtonView(); + } else { + this.revertButtonsToDefaultView(); + } + }, - $(this.imageItemSelector).css('pointer-events', 'none'); - $(this.deleteButtonSelector).removeClass('no-display media-gallery-actions-buttons'); - $(this.deleteButtonSelector).addClass('primary'); + /** + * Sets buttons to default regular -mode view. + */ + revertButtonsToDefaultView: function () { + $(this.deleteButtonSelector).replaceWith(this.originDeleteSelector); - $(this.deleteButtonSelector).off('click').on('click', function () { - $(this.deleteButtonSelector).trigger('massDelete'); - }.bind(this)); - deferred.resolve(); + if (!this.isCancelButtonInserted) { + $(this.cancelMassactionButtonSelector).replaceWith(this.originCancelEvent); } else { - $(this.deleteButtonSelector).replaceWith(this.originDeleteSelector); - $(this.imageItemSelector).css('pointer-events', ''); + $(this.cancelMassactionButtonSelector).addClass('no-display'); + } + $(this.imageItemSelector).css('pointer-events', ''); - $.each(this.buttonsIds, function (key, value) { - $(value).removeClass('no-display'); - }); + $.each(this.buttonsIds, function (key, value) { + $(value).removeClass('no-display'); + }); - $(this.deleteButtonSelector).addClass('no-display media-gallery-actions-buttons'); - $(this.deleteButtonSelector).removeClass('primary'); - deferred.resolve(); + $(this.assSelectedButtonSelector).addClass('no-display'); + $(this.deleteButtonSelector).addClass('no-display media-gallery-actions-buttons'); + $(this.deleteButtonSelector).removeClass('primary'); + }, + + /** + * Activate mass action buttons view + */ + activateMassactionButtonView: function () { + this.originDeleteSelector = $(this.deleteButtonSelector).clone(true, true); + this.originCancelEvent = $(this.cancelMassactionButton).clone(true); + + $.each(this.buttonsIds, function (key, value) { + $(value).addClass('no-display'); + }); + + $(this.imageItemSelector).css('pointer-events', 'none'); + $(this.deleteButtonSelector).removeClass('no-display media-gallery-actions-buttons'); + $(this.deleteButtonSelector).addClass('primary'); + + if (!$(this.cancelMassactionButtonSelector).length) { + $(this.pageActionsSelector).append(this.cancelMassactionButton); + this.isCancelButtonInserted = true; + } else { + $(this.cancelMassactionButtonSelector).replaceWith(this.cancelMassactionButton); } + $(this.cancelMassactionButtonSelector).on('click', function () { + $(window).trigger('terminateMassAction.MediaGallery'); + }); + + $(this.deleteButtonSelector).off('click').on('click', function () { + $(this.deleteButtonSelector).trigger('massDelete'); + }.bind(this)); - return deferred.promise(); }, /** diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js index ecb1aaeba6f0..b168e0aa9fa1 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js @@ -69,6 +69,7 @@ define([ if (this.massActionMode()) { return; } + this.imageModel().selected(null); this.massActionMode(true); this.switchMode(); }.bind(this)); @@ -77,17 +78,24 @@ define([ if (!this.massActionMode()) { return; } + + this.checkbox().selectedItems({}); this.massActionMode(false); this.switchMode(); }.bind(this)); }, /** - * Set selected items. from checkbox component. + * Set selected items. activete massaction if selected at least one item. */ setItems: function () { - if (this.massActionMode()) { - this.selectedItems(this.checkbox().selectedItems()); + this.selectedItems(this.checkbox().selectedItems()); + + if (this.getSelectedCount() >= 1 && !this.massActionMode()) { + $(window).trigger('massAction.MediaGallery'); + } else if (this.getSelectedCount() < 1 && this.massActionMode()) { + this.massActionMode(false); + this.switchMode(); } }, @@ -102,9 +110,8 @@ define([ * Switch massaction per current event. */ switchMode: function () { - this.massactionView().switchView().then(function () { - this.handleDeleteAction(); - }.bind(this)); + this.massactionView().switchView(); + this.handleDeleteAction(); }, /** diff --git a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html index 27e6c2b0ca5c..afa8c94909d5 100644 --- a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html +++ b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html @@ -4,6 +4,6 @@ * See COPYING.txt for license details. */ --> -
+
From 70a4b5b4d3edd1613d86b3db625175fe0eeeb83f Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Tue, 23 Jun 2020 09:33:38 +0300 Subject: [PATCH 16/27] Fix Mftf tests, correct typos --- MediaGalleryUi/Controller/Adminhtml/Image/Delete.php | 2 +- .../web/js/grid/massaction/massactionView.js | 2 +- .../adminhtml/web/js/grid/massaction/massactions.js | 12 ++++++------ 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php b/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php index 8f234c4d2cc9..edc190e9c45e 100644 --- a/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php +++ b/MediaGalleryUi/Controller/Adminhtml/Image/Delete.php @@ -104,7 +104,7 @@ public function execute() $responseCode = self::HTTP_OK; $message = count($imageIds) > 1 ? 'assets have been' : - ' asset ' . current($assets)->getTitle() . ' has been'; + ' asset "' . current($assets)->getTitle() . '" has been'; $responseContent = [ 'success' => true, 'message' => __( diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js index ca342e4affc5..44d2ee95c7f5 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js @@ -124,7 +124,7 @@ define([ }, /** - * Keep buttons hidden on massaction mod state when grid updated. + * Keep buttons hidden on massaction mode state when grid updated. */ handleItemsUpdates: function () { document.querySelectorAll(this.gridSelector)[0].addEventListener('DOMSubtreeModified', function () { diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js index b168e0aa9fa1..d5fd35903fac 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js @@ -51,10 +51,10 @@ define([ }, /** - * Initialize child components - * - * @returns {Object} - */ + * Initialize child components + * + * @returns {Object} + */ initView: function () { Layout(this.viewConfig); @@ -100,8 +100,8 @@ define([ }, /** - * Return total selected items. - */ + * Return total selected items. + */ getSelectedCount: function () { return Object.keys(this.selectedItems()).length; }, From 9cae1534a6bb39ef38c9cc79d633e8987a34971e Mon Sep 17 00:00:00 2001 From: Nazar Klovanych Date: Tue, 23 Jun 2020 11:25:47 +0300 Subject: [PATCH 17/27] Cover changes with mftf tests --- ...AssertMassActionModeDetailsActionGroup.xml | 23 ++++++++++ ...leryImageDeleteImagesInBulkActionGroup.xml | 25 +++++++++++ ...erySelectIMageForMAssActionActionGroup.xml | 21 ++++++++++ ...cedMediaGalleryImageDeletedActionGroup.xml | 2 +- ...nEnhancedMediaGalleryMassActionSection.xml | 16 +++++++ ...ncedMediaGalleryDeleteImagesInBulkTest.xml | 42 +++++++++++++++++++ .../template/grid/massactions/checkboxes.html | 2 +- 7 files changed, 129 insertions(+), 2 deletions(-) create mode 100644 MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryAssertMassActionModeDetailsActionGroup.xml create mode 100644 MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup.xml create mode 100644 MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml create mode 100644 MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml create mode 100644 MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryAssertMassActionModeDetailsActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryAssertMassActionModeDetailsActionGroup.xml new file mode 100644 index 000000000000..d3aa1a8ccfff --- /dev/null +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryAssertMassActionModeDetailsActionGroup.xml @@ -0,0 +1,23 @@ + + + + + + + Asserts that massaction mode can be enabled and disabled, verify massaction view after switch to massaction mode + + + + + + + + + + diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup.xml new file mode 100644 index 000000000000..d3f2cb62f1ea --- /dev/null +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup.xml @@ -0,0 +1,25 @@ + + + + + + + Delete images in bulk using mass action mode. + + + + + + + + + + + + diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml new file mode 100644 index 000000000000..7ad4961b1ad6 --- /dev/null +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml @@ -0,0 +1,21 @@ + + + + + + + Select images in grid by clicking on mass action checkbox + + + + + + + + diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml index 68cbe85ac96c..7c273c1814e0 100644 --- a/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AssertAdminEnhancedMediaGalleryImageDeletedActionGroup.xml @@ -15,7 +15,7 @@ - + diff --git a/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml b/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml new file mode 100644 index 000000000000..f2bbde73f879 --- /dev/null +++ b/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml @@ -0,0 +1,16 @@ + + + +
+ + + + +
+ diff --git a/MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml b/MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml new file mode 100644 index 000000000000..931e80a955a4 --- /dev/null +++ b/MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml @@ -0,0 +1,42 @@ + + + + + + + + + + <stories value="[Story #42] User deletes images in bulk"/> + <testCaseId value="https://studio.cucumber.io/projects/131313/test-plan/folders/1054245/scenarios/4753539"/> + <description value="User deletes images with less clicks"/> + <severity value="CRITICAL"/> + <group value="media_gallery_ui"/> + </annotations> + <before> + <actionGroup ref="AdminLoginActionGroup" stepKey="loginAsAdmin"/> + <actionGroup ref="AdminOpenMediaGalleryForPageNoEditorActionGroup" stepKey="openMediaGalleryForPage"/> + </before> + <actionGroup ref="AdminEnhancedMediaGalleryUploadImageActionGroup" stepKey="uploadImage"> + <argument name="image" value="ImageUpload"/> + </actionGroup> + <actionGroup ref="AdminEnhancedMediaGalleryUploadImageActionGroup" stepKey="uploadSecondImage"> + <argument name="image" value="ImageUpload_1"/> + </actionGroup> + <actionGroup ref="AdminEnhancedMediaGalleryAssertMassActionModeDetailsActionGroup" stepKey="assertMassActionModeAvailable"> + <argument name="imageName" value="{{ImageUpload.fileName}}"/> + </actionGroup> + <actionGroup ref="AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup" stepKey="selectFirstImageToDelete"> + <argument name="imageName" value="{{ImageUpload.fileName}}"/> + </actionGroup> + <actionGroup ref="AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup" stepKey="selectSecondImageToDelete"> + <argument name="imageName" value="{{ImageUpload_1.fileName}}"/> + </actionGroup> + <actionGroup ref="AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup" stepKey="deleteImagesAndAssertREsult"/> + </test> +</tests> diff --git a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html index afa8c94909d5..ddc3bf454f12 100644 --- a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html +++ b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html @@ -5,5 +5,5 @@ */ --> <div class="mediagallery-massaction-checkbox"> - <input type="checkbox" data-bind="checked: isChecked($row()), click: function () { return selectItem($row()); }" /> + <input type="checkbox" data-bind="attr: { 'data-ui-id': $row().title }, checked: isChecked($row()), click: function () { return selectItem($row()); }" /> </div> From c99d81a63467a32257a388300ca5e936b2a983b8 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych <nazarn96@gmail.com> Date: Tue, 23 Jun 2020 11:27:34 +0300 Subject: [PATCH 18/27] fix typos --- ...nhancedMediaGallerySelectIMageForMAssActionActionGroup.xml | 4 ++-- .../Section/AdminEnhancedMediaGalleryMassActionSection.xml | 2 +- .../Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml index 7ad4961b1ad6..c6df44f4a091 100644 --- a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml @@ -15,7 +15,7 @@ <arguments> <argument name="imageName" type="string" defaultValue="magento"/> </arguments> - - <click selector="{{AdminEnhancedMediaGalleryMassActionSection.massActionCheckbox(imageName)}}" stepKey="selectImageInGridToDelte"/> + + <click selector="{{AdminEnhancedMediaGalleryMassActionSection.massActionCheckbox(imageName)}}" stepKey="selectImageInGridToDelte"/> </actionGroup> </actionGroups> diff --git a/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml b/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml index f2bbde73f879..a81322f225cc 100644 --- a/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml +++ b/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml @@ -11,6 +11,6 @@ <element name="massActionCheckbox" type="button" selector="//input[@type='checkbox'][@data-ui-id ='{{imageName}}']" parameterized="true"/> <element name="totalSelected" type="text" selector=".mediagallery-massaction-items-count > .selected_count_text"/> <element name="cancelMassActionMode" type="button" selector="#cancel"/> - <element name="deleteSelected" type="button" selector="#delete_selected"/> + <element name="deleteSelected" type="button" selector="#delete_selected"/> </section> </sections> diff --git a/MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml b/MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml index 931e80a955a4..c10b6d0cb6a5 100644 --- a/MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml +++ b/MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml @@ -37,6 +37,6 @@ <actionGroup ref="AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup" stepKey="selectSecondImageToDelete"> <argument name="imageName" value="{{ImageUpload_1.fileName}}"/> </actionGroup> - <actionGroup ref="AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup" stepKey="deleteImagesAndAssertREsult"/> + <actionGroup ref="AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup" stepKey="deleteImagesAndAssertResult"/> </test> </tests> From 45f39a4c6499516e75601053fd9a283b2b76708e Mon Sep 17 00:00:00 2001 From: Nazar Klovanych <nazarn96@gmail.com> Date: Wed, 24 Jun 2020 12:25:59 +0300 Subject: [PATCH 19/27] Remove checkbox component, use checkbox as part of image component --- ...ryAssertImagesDeletedInBulkActionGroup.xml | 18 ++++++ ...GalleryEnableMassActionModeActionGroup.xml | 18 ++++++ ...leryImageDeleteImagesInBulkActionGroup.xml | 1 - ...rySelectImageForMassActionActionGroup.xml} | 2 +- ...nEnhancedMediaGalleryMassActionSection.xml | 1 + ...ncedMediaGalleryDeleteImagesInBulkTest.xml | 8 ++- .../ui_component/media_gallery_listing.xml | 20 +++--- .../standalone_media_gallery_listing.xml | 20 +++--- .../deleteImageWithDetailConfirmation.js | 4 +- .../view/adminhtml/web/js/grid/checkboxes.js | 53 ---------------- .../adminhtml/web/js/grid/columns/image.js | 62 ++++++++++++++++--- .../web/js/grid/massaction/massactionView.js | 24 ++----- .../web/js/grid/massaction/massactions.js | 36 +++-------- .../web/template/grid/columns/image.html | 5 +- .../template/grid/massactions/checkboxes.html | 9 --- 15 files changed, 132 insertions(+), 149 deletions(-) create mode 100644 MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryAssertImagesDeletedInBulkActionGroup.xml create mode 100644 MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryEnableMassActionModeActionGroup.xml rename MediaGalleryUi/Test/Mftf/ActionGroup/{AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml => AdminEnhancedMediaGallerySelectImageForMassActionActionGroup.xml} (92%) delete mode 100644 MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js delete mode 100644 MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryAssertImagesDeletedInBulkActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryAssertImagesDeletedInBulkActionGroup.xml new file mode 100644 index 000000000000..643c431b2ef3 --- /dev/null +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryAssertImagesDeletedInBulkActionGroup.xml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + /** + * Copyright © Magento, Inc. All rights reserved. + * See COPYING.txt for license details. + */ +--> + +<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" + xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd"> + <actionGroup name="AdminEnhancedMediaGalleryAssertImagesDeletedInBulkActionGroup"> + <annotations> + <description>Asserts images has been deleted in mass action.</description> + </annotations> + + <see userInput='The assets have been successfully deleted' stepKey="verifyDeleteImages"/> + </actionGroup> +</actionGroups> diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryEnableMassActionModeActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryEnableMassActionModeActionGroup.xml new file mode 100644 index 000000000000..5a88ee580f57 --- /dev/null +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryEnableMassActionModeActionGroup.xml @@ -0,0 +1,18 @@ +<?xml version="1.0" encoding="UTF-8"?> +<!-- + /** + * Copyright © Magento, Inc. All rights reserved. + * See COPYING.txt for license details. + */ +--> + +<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" + xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd"> + <actionGroup name="AdminEnhancedMediaGalleryEnableMassActionModeActionGroup"> + <annotations> + <description>Activate massaction mode by click on Delete Selected..</description> + </annotations> + + <click selector="{{AdminEnhancedMediaGalleryMassActionSection.massActionButton}}" stepKey="clickOnMassActionButton"/> + </actionGroup> +</actionGroups> diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup.xml index d3f2cb62f1ea..0e19fce124d6 100644 --- a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup.xml +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup.xml @@ -20,6 +20,5 @@ <waitForLoadingMaskToDisappear stepKey="waitForDeleteModal"/> <click selector="{{AdminEnhancedMediaGalleryDeleteModalSection.confirmDelete}}" stepKey="confirmDelete"/> <waitForLoadingMaskToDisappear stepKey="waitForDeletingProcces"/> - <see userInput='The assets have been successfully deleted' stepKey="verifyDeleteImages"/> </actionGroup> </actionGroups> diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectImageForMassActionActionGroup.xml similarity index 92% rename from MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml rename to MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectImageForMassActionActionGroup.xml index c6df44f4a091..ed949441c8e3 100644 --- a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup.xml +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGallerySelectImageForMassActionActionGroup.xml @@ -8,7 +8,7 @@ <actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd"> - <actionGroup name="AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup"> + <actionGroup name="AdminEnhancedMediaGallerySelectImageForMassActionActionGroup"> <annotations> <description>Select images in grid by clicking on mass action checkbox</description> </annotations> diff --git a/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml b/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml index a81322f225cc..8b420cbc60ff 100644 --- a/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml +++ b/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml @@ -12,5 +12,6 @@ <element name="totalSelected" type="text" selector=".mediagallery-massaction-items-count > .selected_count_text"/> <element name="cancelMassActionMode" type="button" selector="#cancel"/> <element name="deleteSelected" type="button" selector="#delete_selected"/> + <element name="massActionButton" type="button" selector="#delete_massaction"/> </section> </sections> diff --git a/MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml b/MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml index c10b6d0cb6a5..d90bc7b40eaf 100644 --- a/MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml +++ b/MediaGalleryUi/Test/Mftf/Test/AdminEnhancedMediaGalleryDeleteImagesInBulkTest.xml @@ -28,15 +28,19 @@ <actionGroup ref="AdminEnhancedMediaGalleryUploadImageActionGroup" stepKey="uploadSecondImage"> <argument name="image" value="ImageUpload_1"/> </actionGroup> + + <actionGroup ref="AdminEnhancedMediaGalleryEnableMassActionModeActionGroup" stepKey="enableMassActionToVerifyMode"/> <actionGroup ref="AdminEnhancedMediaGalleryAssertMassActionModeDetailsActionGroup" stepKey="assertMassActionModeAvailable"> <argument name="imageName" value="{{ImageUpload.fileName}}"/> </actionGroup> - <actionGroup ref="AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup" stepKey="selectFirstImageToDelete"> + <actionGroup ref="AdminEnhancedMediaGalleryEnableMassActionModeActionGroup" stepKey="enableMassActionToDeleteImages"/> + <actionGroup ref="AdminEnhancedMediaGallerySelectImageForMassActionActionGroup" stepKey="selectFirstImageToDelete"> <argument name="imageName" value="{{ImageUpload.fileName}}"/> </actionGroup> - <actionGroup ref="AdminEnhancedMediaGallerySelectIMageForMAssActionActionGroup" stepKey="selectSecondImageToDelete"> + <actionGroup ref="AdminEnhancedMediaGallerySelectImageForMassActionActionGroup" stepKey="selectSecondImageToDelete"> <argument name="imageName" value="{{ImageUpload_1.fileName}}"/> </actionGroup> <actionGroup ref="AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup" stepKey="deleteImagesAndAssertResult"/> + <actionGroup ref="AdminEnhancedMediaGalleryAssertImagesDeletedInBulkActionGroup" stepKey="assertImagesDeleted"/> </test> </tests> diff --git a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml index c3df038f04b4..f842c7b25590 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml @@ -47,6 +47,12 @@ <class>action-default scalable add media-gallery-actions-buttons</class> <label translate="true">Create Folder</label> </button> + <button name="delete_massaction"> + <param name="on_click" xsi:type="string">jQuery(window).trigger('massAction.MediaGallery')</param> + <param name="sort_order" xsi:type="number">50</param> + <class>action-default scalable add media-gallery-actions-buttons</class> + <label translate="true">Delete Selected...</label> + </button> <button name="delete_selected"> <param name="on_click" xsi:type="string">return false;</param> <param name="sort_order" xsi:type="number">40</param> @@ -173,19 +179,6 @@ <item name="containerId" xsi:type="string">media-gallery-masonry-grid</item> </item> </argument> - <column name="massaction_checkbox" component="Magento_MediaGalleryUi/js/grid/checkboxes"> - <argument name="data" xsi:type="array"> - <item name="config" xsi:type="array"> - <item name="massActionComponent" xsi:type="string">media_gallery_listing.media_gallery_listing.listing_top.media_gallery_massactions</item> - <item name="sort_by" xsi:type="array"> - <item name="excluded" xsi:type="boolean">true</item> - </item> - </item> - </argument> - <settings> - <bodyTmpl>Magento_MediaGalleryUi/grid/massactions/checkboxes</bodyTmpl> - </settings> - </column> <column name="source" component="Magento_Ui/js/grid/columns/overlay" class="Magento\MediaGalleryUi\Ui\Component\Listing\Columns\SourceIconProvider"> <settings> <label translate="true">Source</label> @@ -200,6 +193,7 @@ <item name="url" xsi:type="string">thumbnail_url</item> </item> <item name="deleteImageUrl" xsi:type="url" path="media_gallery/image/delete"/> + <item name="massactionComponentName" xsi:type="string">media_gallery_listing.media_gallery_listing.listing_top.media_gallery_massactions</item> <item name="messagesName" xsi:type="string">media_gallery_listing.media_gallery_listing.messages</item> <item name="imageModelname" xsi:type="string">media_gallery_listing.media_gallery_listing.media_gallery_columns.thumbnail_url</item> <item name="mediaGalleryDirectoryComponent" xsi:type="string">media_gallery_listing.media_gallery_listing.media_gallery_directories</item> diff --git a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml index d78db67ce9b4..c1be82cc95c3 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml @@ -38,6 +38,12 @@ <param name="sort_order" xsi:type="number">40</param> <class>action-default scalable add media-gallery-actions-buttons no-display</class> <label translate="true">Delete Selected</label> + </button> + <button name="delete_massaction"> + <param name="on_click" xsi:type="string">jQuery(window).trigger('massAction.MediaGallery')</param> + <param name="sort_order" xsi:type="number">50</param> + <class>action-default scalable add media-gallery-actions-buttons</class> + <label translate="true">Delete Selected...</label> </button> <button name="upload_image"> <param name="on_click" xsi:type="string">jQuery('#image-uploader-input').click();</param> @@ -167,19 +173,6 @@ <sortable>false</sortable> </settings> </column> - <column name="massaction_checkbox" component="Magento_MediaGalleryUi/js/grid/checkboxes"> - <argument name="data" xsi:type="array"> - <item name="config" xsi:type="array"> - <item name="massActionComponent" xsi:type="string">standalone_media_gallery_listing.standalone_media_gallery_listing.listing_top.media_gallery_massactions</item> - <item name="sort_by" xsi:type="array"> - <item name="excluded" xsi:type="boolean">true</item> - </item> - </item> - </argument> - <settings> - <bodyTmpl>Magento_MediaGalleryUi/grid/massactions/checkboxes</bodyTmpl> - </settings> - </column> <column name="thumbnail_url" component="Magento_MediaGalleryUi/js/grid/columns/image" class="Magento\MediaGalleryUi\Ui\Component\Listing\Columns\Url"> <argument name="data" xsi:type="array"> <item name="config" xsi:type="array"> @@ -188,6 +181,7 @@ </item> <item name="url" xsi:type="string">thumbnail_url</item> <item name="deleteImageUrl" xsi:type="url" path="media_gallery/image/delete"/> + <item name="massactionComponentName" xsi:type="string">standalone_media_gallery_listing.standalone_media_gallery_listing.listing_top.media_gallery_massactions</item> <item name="messagesName" xsi:type="string">standalone_media_gallery_listing.standalone_media_gallery_listing.messages</item> <item name="mediaGalleryDirectoryComponent" xsi:type="string">standalone_media_gallery_listing.standalone_media_gallery_listing.media_gallery_directories</item> </item> diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js index b9464bc3761a..bc5e836bc3af 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js @@ -7,7 +7,7 @@ define([ 'underscore', 'Magento_MediaGalleryUi/js/action/getDetails', 'Magento_MediaGalleryUi/js/action/deleteImages' -], function ($, _, getDetails, DeleteImages) { +], function ($, _, getDetails, deleteImages) { 'use strict'; return { @@ -32,7 +32,7 @@ define([ }.bind(this)).fail(function () { confirmationContent = confirmationContent.replace('%1', ''); }).always(function () { - DeleteImages([record.id], deleteImageUrl, confirmationContent); + deleteImages([record.id], deleteImageUrl, confirmationContent); }); }, diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js b/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js deleted file mode 100644 index 103eb87cb6ff..000000000000 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/checkboxes.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * Copyright © Magento, Inc. All rights reserved. - * See COPYING.txt for license details. - */ - -define([ - 'jquery', - 'Magento_Ui/js/grid/columns/column' -], function ($, Column) { - 'use strict'; - - return Column.extend({ - - /** - * Initializes media gallery checkbox component. - * - * @returns {Sticky} Chainable. - */ - initialize: function () { - this._super().observe(['selectedItems', 'isMassActionMode']); - - this.selectedItems({}); - - return this; - }, - - /** - * Checkbox checked, push ids to the selected ids or remove if the same cheked. - */ - selectItem: function (record) { - var items; - - items = this.selectedItems(); - - if (this.selectedItems()[record.id]) { - delete items[record.id]; - this.selectedItems(items); - } else { - items[record.id] = record.id; - this.selectedItems(items); - } - - return true; - }, - - /** - * Is current record already checked. - */ - isChecked: function (record) { - return this.selectedItems()[record.id]; - } - }); -}); diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image.js b/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image.js index 18468a99f84c..b2adce29b2ee 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image.js @@ -5,8 +5,9 @@ define([ 'jquery', 'Magento_Ui/js/grid/columns/column', - 'uiLayout' -], function ($, Column, layout) { + 'uiLayout', + 'underscore' +], function ($, Column, layout, _) { 'use strict'; return Column.extend({ @@ -24,13 +25,15 @@ define([ modules: { actions: '${ $.name }_actions', provider: '${ $.provider }', - messages: '${ $.messagesName }' + messages: '${ $.messagesName }', + massaction: '${ $.massactionComponentName }' }, imports: { activeDirectory: '${ $.mediaGalleryDirectoryComponent }:activeNode' }, listens: { - activeDirectory: 'selectDirectoryHandle' + activeDirectory: 'selectDirectoryHandle', + '${ $.massactionComponentName }:massActionMode': 'updateSelected' }, viewConfig: [ { @@ -68,6 +71,13 @@ define([ return this; }, + /** + * Is massaction mode active. + */ + isMassActionMode: function () { + return this.massaction().massActionMode(); + }, + /** * Returns url to given record. * @@ -88,6 +98,13 @@ define([ return record[this.fields.id]; }, + /** + * Update selected items per massaction mode. + */ + updateSelected: function () { + this.selected({}); + }, + /** * Returns name to given record. * @@ -105,10 +122,14 @@ define([ * @returns {Boolean} */ isSelected: function (record) { - if (this.selected() === null) { + if (_.isNull(this.selected())) { return false; } + if (this.massaction().massActionMode()) { + return this.selected()[record.id]; + } + return this.getId(this.selected()) === this.getId(record); }, @@ -136,12 +157,35 @@ define([ } }, + /** + * Handle checkbox click. + */ + checkboxClick: function (record) { + var items = this.selected(); + + if (this.selected()[record.id]) { + delete items[record.id]; + this.selected(items); + } else { + items[record.id] = record.id; + this.selected(items); + } + + return true; + }, + /** * Set the record as selected */ select: function (record) { - this.isSelected(record) ? this.selected(null) : this.selected(record); - this.toggleAddSelectedButton(); + if (this.massaction().massActionMode()) { + return this.checkboxClick(record); + } else { + this.isSelected(record) ? this.selected(null) : this.selected(record); + this.toggleAddSelectedButton(); + } + + return true; }, /** @@ -234,7 +278,9 @@ define([ * @param {String} path */ selectDirectoryHandle: function (path) { - if (this.selected() && this.selected().directory !== path) { + if (this.selected() && + this.selected().directory !== path && + !this.massaction().massActionMode()) { this.deselectImage(); } } diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js index 44d2ee95c7f5..9c05db3f80c7 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js @@ -11,7 +11,6 @@ define([ return Component.extend({ defaults: { - imageItemSelector: '.media-gallery-image-block', pageActionsSelector: '.page-actions-buttons', gridSelector: '[data-id="media-gallery-masonry-grid"]', originDeleteSelector: null, @@ -19,7 +18,7 @@ define([ cancelMassactionButton: '<button id="cancel" type="button" class="cancel">Cancel</button>', isCancelButtonInserted: false, deleteButtonSelector: '#delete_selected', - assSelectedButtonSelector: '#add_selected', + addSelectedButtonSelector: '#add_selected', cancelMassactionButtonSelector: '#cancel', standAloneTitle: 'Manage Gallery', slidePanelTitle: 'Media Gallery', @@ -31,7 +30,8 @@ define([ '#upload_image', '#search_adobe_stock', '.three-dots', - '#add_selected' + '#add_selected', + '#delete_massaction' ], massactionModeTitle: 'Select Images to Delete' }, @@ -55,7 +55,6 @@ define([ switchView: function () { this.changePageTitle(); this.switchButtons(); - this.handleItemsUpdates(); }, /** @@ -81,13 +80,12 @@ define([ } else { $(this.cancelMassactionButtonSelector).addClass('no-display'); } - $(this.imageItemSelector).css('pointer-events', ''); $.each(this.buttonsIds, function (key, value) { $(value).removeClass('no-display'); }); - $(this.assSelectedButtonSelector).addClass('no-display'); + $(this.addSelectedButtonSelector).addClass('no-display'); $(this.deleteButtonSelector).addClass('no-display media-gallery-actions-buttons'); $(this.deleteButtonSelector).removeClass('primary'); }, @@ -103,7 +101,6 @@ define([ $(value).addClass('no-display'); }); - $(this.imageItemSelector).css('pointer-events', 'none'); $(this.deleteButtonSelector).removeClass('no-display media-gallery-actions-buttons'); $(this.deleteButtonSelector).addClass('primary'); @@ -123,19 +120,6 @@ define([ }, - /** - * Keep buttons hidden on massaction mode state when grid updated. - */ - handleItemsUpdates: function () { - document.querySelectorAll(this.gridSelector)[0].addEventListener('DOMSubtreeModified', function () { - if (this.massActionMode()) { - $(this.imageItemSelector).css('pointer-events', 'none'); - $(this.contextButtonSelector).addClass('no-display'); - } - }.bind(this), false); - - }, - /** * Change page title per active mode. */ diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js index d5fd35903fac..fc65e6f69667 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js @@ -7,15 +7,15 @@ define([ 'jquery', 'uiComponent', 'Magento_MediaGalleryUi/js/action/deleteImages', - 'uiLayout' -], function ($, Component, DeleteImages, Layout) { + 'uiLayout', + 'underscore' +], function ($, Component, DeleteImages, Layout, _) { 'use strict'; return Component.extend({ defaults: { modules: { massactionView: '${ $.name }_view', - checkbox: '${ $.checkboxComponentName }', imageModel: '${ $.imageModelName }' }, viewConfig: [ @@ -25,9 +25,6 @@ define([ provider: '${ $.provider }' } ], - listens: { - '${ $.checkboxComponentName }:selectedItems': 'setItems' - }, exports: { massActionMode: '${ $.name }_view:massActionMode' } @@ -40,10 +37,8 @@ define([ */ initialize: function () { this._super().observe([ - 'selectedItems', 'massActionMode' ]); - this.selectedItems({}); this.initView(); this.initEvents(); @@ -79,31 +74,20 @@ define([ return; } - this.checkbox().selectedItems({}); this.massActionMode(false); this.switchMode(); }.bind(this)); }, - /** - * Set selected items. activete massaction if selected at least one item. - */ - setItems: function () { - this.selectedItems(this.checkbox().selectedItems()); - - if (this.getSelectedCount() >= 1 && !this.massActionMode()) { - $(window).trigger('massAction.MediaGallery'); - } else if (this.getSelectedCount() < 1 && this.massActionMode()) { - this.massActionMode(false); - this.switchMode(); - } - }, - /** * Return total selected items. */ getSelectedCount: function () { - return Object.keys(this.selectedItems()).length; + if (this.massActionMode() && !_.isNull(this.imageModel().selected())) { + return Object.keys(this.imageModel().selected()).length; + } + + return 0; }, /** @@ -121,11 +105,11 @@ define([ if (this.massActionMode()) { $(this.massactionView().deleteButtonSelector).on('massDelete', function () { DeleteImages( - this.selectedItems(), + this.imageModel().selected(), this.imageModel().deleteImageUrl, $.mage.__('Are you sure you want to delete "%2" images?').replace('%2', this.getSelectedCount()) ).then(function () { - this.checkbox().selectedItems({}); + this.imageModel().selected({}); this.massActionMode(false); this.switchMode(); }.bind(this)); diff --git a/MediaGalleryUi/view/adminhtml/web/template/grid/columns/image.html b/MediaGalleryUi/view/adminhtml/web/template/grid/columns/image.html index a29f830ed574..ef2f583ed155 100644 --- a/MediaGalleryUi/view/adminhtml/web/template/grid/columns/image.html +++ b/MediaGalleryUi/view/adminhtml/web/template/grid/columns/image.html @@ -5,6 +5,9 @@ */ --> <div class="media-gallery-wrap" collapsible> + <div class="mediagallery-massaction-checkbox" if="isMassActionMode()"> + <input type="checkbox" data-bind="attr: { 'data-ui-id': $row().title }, visible: isMassActionMode(), checked: isSelected($row()), click: function () { return select($row()); }" /> + </div> <div class="media-gallery-image"> <div data-row="file" class="masonry-image-block media-gallery-image-block" @@ -33,7 +36,7 @@ </ul> <div class="media-gallery-image-actions"> <div class="action-select-wrap"> - <span class="three-dots" + <span class="three-dots" ifnot="isMassActionMode()" toggleCollapsible click="function () { clickOnThreeDots($row(), $collapsible.opened()); }"></span> </div> diff --git a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html b/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html deleted file mode 100644 index ddc3bf454f12..000000000000 --- a/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/checkboxes.html +++ /dev/null @@ -1,9 +0,0 @@ -<!-- -/** - * Copyright © Magento, Inc. All rights reserved. - * See COPYING.txt for license details. - */ ---> -<div class="mediagallery-massaction-checkbox"> - <input type="checkbox" data-bind="attr: { 'data-ui-id': $row().title }, checked: isChecked($row()), click: function () { return selectItem($row()); }" /> -</div> From 73ef8bcbf0f1625e3fd51a5bab611d0986438d61 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych <nazarn96@gmail.com> Date: Wed, 24 Jun 2020 12:32:29 +0300 Subject: [PATCH 20/27] Remove unused properties --- MediaGalleryUi/view/adminhtml/web/js/grid/columns/image.js | 6 +++--- .../view/adminhtml/web/js/grid/massaction/massactions.js | 3 +-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image.js b/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image.js index b2adce29b2ee..e7c05573a4f1 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image.js @@ -180,11 +180,11 @@ define([ select: function (record) { if (this.massaction().massActionMode()) { return this.checkboxClick(record); - } else { - this.isSelected(record) ? this.selected(null) : this.selected(record); - this.toggleAddSelectedButton(); } + this.isSelected(record) ? this.selected(null) : this.selected(record); + this.toggleAddSelectedButton(); + return true; }, diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js index fc65e6f69667..348e029c7bdb 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js @@ -21,8 +21,7 @@ define([ viewConfig: [ { component: 'Magento_MediaGalleryUi/js/grid/massaction/massactionView', - name: '${ $.name }_view', - provider: '${ $.provider }' + name: '${ $.name }_view' } ], exports: { From bf11f6e4a083266d22149b9439679ffbb565629d Mon Sep 17 00:00:00 2001 From: Nazar Klovanych <nazarn96@gmail.com> Date: Fri, 26 Jun 2020 18:23:47 +0300 Subject: [PATCH 21/27] Add warning popup when there is no images selected for mass delete action --- .../web/js/grid/massaction/massactions.js | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js index 348e029c7bdb..644b6acecf22 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js @@ -8,8 +8,9 @@ define([ 'uiComponent', 'Magento_MediaGalleryUi/js/action/deleteImages', 'uiLayout', - 'underscore' -], function ($, Component, DeleteImages, Layout, _) { + 'underscore', + 'Magento_Ui/js/modal/alert' +], function ($, Component, DeleteImages, Layout, _, uiAlert) { 'use strict'; return Component.extend({ @@ -103,15 +104,22 @@ define([ handleDeleteAction: function () { if (this.massActionMode()) { $(this.massactionView().deleteButtonSelector).on('massDelete', function () { - DeleteImages( - this.imageModel().selected(), - this.imageModel().deleteImageUrl, - $.mage.__('Are you sure you want to delete "%2" images?').replace('%2', this.getSelectedCount()) - ).then(function () { - this.imageModel().selected({}); - this.massActionMode(false); - this.switchMode(); - }.bind(this)); + if (this.getSelectedCount() < 1) { + uiAlert({ + content: $.mage.__('You need to select atleast one image') + }); + + } else { + DeleteImages( + this.imageModel().selected(), + this.imageModel().deleteImageUrl, + $.mage.__('Are you sure you want to delete "%2" images?').replace('%2', this.getSelectedCount()) + ).then(function () { + this.imageModel().selected({}); + this.massActionMode(false); + this.switchMode(); + }.bind(this)); + } }.bind(this)); } } From 2b493fc7a387510242e6a02dd52bc410f14494bc Mon Sep 17 00:00:00 2001 From: Nazar Klovanych <nazarn96@gmail.com> Date: Fri, 26 Jun 2020 18:26:29 +0300 Subject: [PATCH 22/27] fix identation and typos --- .../view/adminhtml/web/js/grid/massaction/massactions.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js index 644b6acecf22..06462bdd2f09 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js @@ -106,14 +106,16 @@ define([ $(this.massactionView().deleteButtonSelector).on('massDelete', function () { if (this.getSelectedCount() < 1) { uiAlert({ - content: $.mage.__('You need to select atleast one image') + content: $.mage.__('You need to select at least one image') }); } else { DeleteImages( this.imageModel().selected(), this.imageModel().deleteImageUrl, - $.mage.__('Are you sure you want to delete "%2" images?').replace('%2', this.getSelectedCount()) + $.mage.__( + 'Are you sure you want to delete "%2" images?' + ).replace('%2', this.getSelectedCount()) ).then(function () { this.imageModel().selected({}); this.massActionMode(false); From d26103edc268fd48a34995f2f731f84d83503af9 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych <nazarn96@gmail.com> Date: Tue, 30 Jun 2020 14:37:29 +0300 Subject: [PATCH 23/27] Display content usage information for multiple assets during multiple delete --- .../AddAdobeStockImageDetailsPlugin.php | 18 ++--- .../image/adobe-stock-image-details.html | 2 +- .../Controller/Adminhtml/Image/Details.php | 8 +- MediaGalleryUi/Model/GetDetailsByAssetId.php | 44 ++++++----- .../ui_component/media_gallery_listing.xml | 8 +- .../standalone_media_gallery_listing.xml | 8 +- .../deleteImageWithDetailConfirmation.js | 76 +++++++++---------- .../adminhtml/web/js/action/deleteImages.js | 1 + .../adminhtml/web/js/action/getDetails.js | 4 +- .../web/js/grid/columns/image/actions.js | 2 +- .../web/js/grid/massaction/massactionView.js | 11 ++- .../web/js/grid/massaction/massactions.js | 16 ++-- .../adminhtml/web/js/image/image-details.js | 4 +- 13 files changed, 97 insertions(+), 105 deletions(-) diff --git a/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php b/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php index bd4ae0b00870..7717b1d0711e 100644 --- a/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php +++ b/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php @@ -94,15 +94,16 @@ public function __construct( public function afterExecute( GetDetailsByAssetId $getImageDetailsByAssetId, array $imageDetails, - int $assetId + array $assetIds ): array { try { $mediaGalleryIdFilter = $this->filterBuilder->setField(self::MEDIA_GALLERY_ID) - ->setValue($assetId) - ->create(); + ->setValue(implode(",", $assetIds)) + ->setConditionType('in') + ->create(); + $searchCriteria = $this->searchCriteriaBuilder ->addFilter($mediaGalleryIdFilter) - ->setPageSize(1) ->create(); /** @var AssetSearchResultsInterface $result */ @@ -110,14 +111,13 @@ public function afterExecute( $adobeStockInfo = []; if ($result->getTotalCount() > 0) { $item = $result->getItems(); - /** @var AssetInterface $asset */ - $asset = reset($item); - $adobeStockInfo = $this->loadAssetsInfo($asset); + + foreach ($item as $asset) { + $imageDetails[$asset->getMediaGalleryId()]['adobe_stock'] = $this->loadAssetsInfo($asset); + } } - $imageDetails['adobe_stock'] = $adobeStockInfo; } catch (Exception $exception) { $this->logger->critical($exception); - $imageDetails['adobe_stock'] = []; } return $imageDetails; diff --git a/AdobeStockImageAdminUi/view/adminhtml/web/template/image/adobe-stock-image-details.html b/AdobeStockImageAdminUi/view/adminhtml/web/template/image/adobe-stock-image-details.html index 4d99e2612377..d57bf9de9629 100644 --- a/AdobeStockImageAdminUi/view/adminhtml/web/template/image/adobe-stock-image-details.html +++ b/AdobeStockImageAdminUi/view/adminhtml/web/template/image/adobe-stock-image-details.html @@ -4,7 +4,7 @@ * See COPYING.txt for license details. */ --> -<div class="adobe-stock-image-details image-details-section" if="$parent.image().adobe_stock.length"> +<div class="adobe-stock-image-details image-details-section" if="$parent.image().adobe_stock"> <h3 data-bind="i18n: 'Adobe Stock'"></h3> <div class="attributes"> <each args="$parent.image().adobe_stock"> diff --git a/MediaGalleryUi/Controller/Adminhtml/Image/Details.php b/MediaGalleryUi/Controller/Adminhtml/Image/Details.php index 82a3394b7add..d959a070148e 100644 --- a/MediaGalleryUi/Controller/Adminhtml/Image/Details.php +++ b/MediaGalleryUi/Controller/Adminhtml/Image/Details.php @@ -66,12 +66,12 @@ public function execute() { /** @var Json $resultJson */ $resultJson = $this->resultFactory->create(ResultFactory::TYPE_JSON); - $id = (int) $this->getRequest()->getParam('id'); + $ids = $this->getRequest()->getParam('ids'); - if ($id === 0) { + if (empty($ids) || !is_array($ids)) { $responseContent = [ 'success' => false, - 'message' => __('Asset ID is required.'), + 'message' => __('Assets Ids is required, and must be of type array.'), ]; $resultJson->setHttpResponseCode(self::HTTP_BAD_REQUEST); $resultJson->setData($responseContent); @@ -80,7 +80,7 @@ public function execute() } try { - $details = $this->getDetailsByAssetId->execute($id); + $details = $this->getDetailsByAssetId->execute($ids); $responseCode = self::HTTP_OK; $responseContent = [ diff --git a/MediaGalleryUi/Model/GetDetailsByAssetId.php b/MediaGalleryUi/Model/GetDetailsByAssetId.php index 4993347e3538..6fcb99791e81 100644 --- a/MediaGalleryUi/Model/GetDetailsByAssetId.php +++ b/MediaGalleryUi/Model/GetDetailsByAssetId.php @@ -26,7 +26,7 @@ class GetDetailsByAssetId /** * @var GetAssetsByIdsInterface */ - private $getAssetById; + private $getAssetsById; /** * @var StoreManagerInterface @@ -63,36 +63,42 @@ public function __construct( GetAssetsKeywordsInterface $getAssetKeywords ) { $this->detailsProviderPool = $detailsProviderPool; - $this->getAssetById = $getAssetById; + $this->getAssetsById = $getAssetById; $this->storeManager = $storeManager; $this->sourceIconProvider = $sourceIconProvider; $this->getAssetKeywords = $getAssetKeywords; } /** - * Get image details by asset ID + * Get image details by assets Ids * - * @param int $assetId + * @param array $assetId * @throws LocalizedException * @throws Exception * @return array */ - public function execute(int $assetId): array + public function execute(array $assetIds): array { - $asset = current($this->getAssetById->execute([$assetId])); - - return [ - 'image_url' => $this->getUrl($asset->getPath()), - 'title' => $asset->getTitle(), - 'path' => $asset->getPath(), - 'description' => $asset->getDescription(), - 'id' => $assetId, - 'details' => $this->detailsProviderPool->execute($asset), - 'size' => $asset->getSize(), - 'tags' => $this->getKeywords($asset), - 'source' => $asset->getSource() ? $this->sourceIconProvider->getSourceIconUrl($asset->getSource()) : null, - 'content_type' => strtoupper(str_replace('image/', '', $asset->getContentType())), - ]; + $assets = $this->getAssetsById->execute($assetIds); + + $details = []; + foreach ($assets as $asset) { + $details[$asset->getId()] = [ + 'image_url' => $this->getUrl($asset->getPath()), + 'title' => $asset->getTitle(), + 'path' => $asset->getPath(), + 'description' => $asset->getDescription(), + 'id' => $asset->getId(), + 'details' => $this->detailsProviderPool->execute($asset), + 'size' => $asset->getSize(), + 'tags' => $this->getKeywords($asset), + 'source' => $asset->getSource() ? + $this->sourceIconProvider->getSourceIconUrl($asset->getSource()) : + null, + 'content_type' => strtoupper(str_replace('image/', '', $asset->getContentType())), + ]; + } + return $details; } /** diff --git a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml index f842c7b25590..35a2cd263654 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/media_gallery_listing.xml @@ -51,13 +51,7 @@ <param name="on_click" xsi:type="string">jQuery(window).trigger('massAction.MediaGallery')</param> <param name="sort_order" xsi:type="number">50</param> <class>action-default scalable add media-gallery-actions-buttons</class> - <label translate="true">Delete Selected...</label> - </button> - <button name="delete_selected"> - <param name="on_click" xsi:type="string">return false;</param> - <param name="sort_order" xsi:type="number">40</param> - <class>action-default scalable media-gallery-actions-buttons no-display</class> - <label translate="true">Delete Selected</label> + <label translate="true">Delete Images...</label> </button> </buttons> <spinner>media_gallery_columns</spinner> diff --git a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml index c1be82cc95c3..4b821fcb123f 100644 --- a/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml +++ b/MediaGalleryUi/view/adminhtml/ui_component/standalone_media_gallery_listing.xml @@ -32,18 +32,12 @@ <param name="sort_order" xsi:type="number">30</param> <class>action-default scalable add media-gallery-actions-buttons</class> <label translate="true">Create Folder</label> - </button> - <button name="delete_selected"> - <param name="on_click" xsi:type="string">return false;</param> - <param name="sort_order" xsi:type="number">40</param> - <class>action-default scalable add media-gallery-actions-buttons no-display</class> - <label translate="true">Delete Selected</label> </button> <button name="delete_massaction"> <param name="on_click" xsi:type="string">jQuery(window).trigger('massAction.MediaGallery')</param> <param name="sort_order" xsi:type="number">50</param> <class>action-default scalable add media-gallery-actions-buttons</class> - <label translate="true">Delete Selected...</label> + <label translate="true">Delete Images...</label> </button> <button name="upload_image"> <param name="on_click" xsi:type="string">jQuery('#image-uploader-input').click();</param> diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js index bc5e836bc3af..c954cb6900cc 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js @@ -15,63 +15,61 @@ define([ /** * Get information about image use * - * @param {Object} record + * @param {Array} recordsIds * @param {String} imageDetailsUrl * @param {String} deleteImageUrl */ - deleteImageAction: function (record, imageDetailsUrl, deleteImageUrl) { - var confirmationContent = $.mage.__('%1 Are you sure you want to delete "%2" image?') - .replace('%2', record.path); + deleteImageAction: function (recordsIds, imageDetailsUrl, deleteImageUrl) { + var imagesCount = Object.keys(recordsIds).length, + confirmationContent = $.mage.__('%1 Are you sure you want to delete "%2" image%3?') + .replace('%2', Object.keys(recordsIds).length).replace('%3', imagesCount > 1 ? 's' : ''), + deferred = $.Deferred(); - getDetails(imageDetailsUrl, record.id) + getDetails(imageDetailsUrl, recordsIds) .then(function (imageDetails) { - confirmationContent = confirmationContent.replace( - '%1', - this.getConfirmationContentByImageDetails(imageDetails) - ); - }.bind(this)).fail(function () { + confirmationContent = confirmationContent.replace( + '%1', + this.getRecordRelatedContentMessage(imageDetails) + ); + }.bind(this)).fail(function () { confirmationContent = confirmationContent.replace('%1', ''); }).always(function () { - deleteImages([record.id], deleteImageUrl, confirmationContent); + deleteImages(recordsIds, deleteImageUrl, confirmationContent).then(function () { + deferred.resolve(); + }).fail(function (message) { + deferred.reject(message); + }); }); - }, - - /** - * Returns confirmation content with information about related content - * - * @param {Object} imageDetails - * @return String - */ - getConfirmationContentByImageDetails: function (imageDetails) { - var details = imageDetails.details; - if (_.isObject(details) && !_.isUndefined(details['6'])) { - return this.getRecordRelatedContentMessage(details['6'].value); - } - - return ''; + return deferred.promise(); }, /** * Get information about image use * - * @param {Object|String} value + * @param {Object|String} imageDetails * @return {String} */ - getRecordRelatedContentMessage: function (value) { - var usedInMessage = $.mage.__('This image is used in %s.'), - usedIn = ''; - - if (_.isObject(value) && !_.isEmpty(value)) { - _.each(value, function (numberOfTimeUsed, moduleName) { - usedIn += numberOfTimeUsed + ' ' + moduleName + ', '; - }); - usedIn = usedIn.replace(/,\s*$/, ''); + getRecordRelatedContentMessage: function (imageDetails) { + var usedInMessage = $.mage.__('This image%p is used in %s.'), + usedIn = {}, + message = '', + prefix = Object.keys(imageDetails).length > 1 ? 's' : ''; - return usedInMessage.replace('%s', usedIn); - } + $.each(imageDetails, function (key, image) { + if (_.isObject(image.details[6]) && !_.isEmpty(image.details[6].value)) { + $.each(image.details[6].value, function (entityName, count) { + usedIn[entityName] = usedIn[entityName] + count || count; + }); + } + }); + $.each(usedIn, function (entityName, count) { + message += count + ' ' + entityName + ', '; + }); + message = message.replace(/,\s*$/, ''); + message = usedInMessage.replace('%s', message).replace('%p', prefix); - return ''; + return message; } }; }); diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js index 9a69018a1d9d..5161ea198ab9 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js @@ -85,6 +85,7 @@ define([ message: message, code: 'error' }); + deferred.reject(message); } }); } diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/getDetails.js b/MediaGalleryUi/view/adminhtml/web/js/action/getDetails.js index 4c9eb628b172..6f7b311cd082 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/getDetails.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/getDetails.js @@ -7,7 +7,7 @@ define([ ], function ($) { 'use strict'; - return function (imageDetailsUrl, imageId) { + return function (imageDetailsUrl, imageIds) { var deferred = $.Deferred(), message; @@ -17,7 +17,7 @@ define([ dataType: 'json', showLoader: true, data: { - 'id': imageId + 'ids': imageIds }, context: this, diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/actions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/actions.js index d629e30bceab..468aa159488d 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/actions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/actions.js @@ -73,7 +73,7 @@ define([ var imageDetailsUrl = this.mediaGalleryImageDetails().imageDetailsUrl, deleteImageUrl = this.imageModel().deleteImageUrl; - deleteImageWithDetailConfirmation.deleteImageAction(record, imageDetailsUrl, deleteImageUrl); + deleteImageWithDetailConfirmation.deleteImageAction([record.id], imageDetailsUrl, deleteImageUrl); }, /** diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js index 9c05db3f80c7..bb3b8d958a7a 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js @@ -17,7 +17,7 @@ define([ originCancelEvent: null, cancelMassactionButton: '<button id="cancel" type="button" class="cancel">Cancel</button>', isCancelButtonInserted: false, - deleteButtonSelector: '#delete_selected', + deleteButtonSelector: '#delete_massaction', addSelectedButtonSelector: '#add_selected', cancelMassactionButtonSelector: '#cancel', standAloneTitle: 'Manage Gallery', @@ -30,10 +30,9 @@ define([ '#upload_image', '#search_adobe_stock', '.three-dots', - '#add_selected', - '#delete_massaction' + '#add_selected' ], - massactionModeTitle: 'Select Images to Delete' + massactionModeTitle: $.mage.__('Select Images to Delete') }, /** @@ -86,7 +85,7 @@ define([ }); $(this.addSelectedButtonSelector).addClass('no-display'); - $(this.deleteButtonSelector).addClass('no-display media-gallery-actions-buttons'); + $(this.deleteButtonSelector).addClass('media-gallery-actions-buttons'); $(this.deleteButtonSelector).removeClass('primary'); }, @@ -101,7 +100,7 @@ define([ $(value).addClass('no-display'); }); - $(this.deleteButtonSelector).removeClass('no-display media-gallery-actions-buttons'); + $(this.deleteButtonSelector).removeClass('media-gallery-actions-buttons').text($.mage.__('Delete Selected')); $(this.deleteButtonSelector).addClass('primary'); if (!$(this.cancelMassactionButtonSelector).length) { diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js index 06462bdd2f09..122fe8238c26 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js @@ -6,7 +6,7 @@ define([ 'jquery', 'uiComponent', - 'Magento_MediaGalleryUi/js/action/deleteImages', + 'Magento_MediaGalleryUi/js/action/deleteImageWithDetailConfirmation', 'uiLayout', 'underscore', 'Magento_Ui/js/modal/alert' @@ -15,9 +15,11 @@ define([ return Component.extend({ defaults: { + mediaGalleryImageDetailsName: 'mediaGalleryImageDetails', modules: { massactionView: '${ $.name }_view', - imageModel: '${ $.imageModelName }' + imageModel: '${ $.imageModelName }', + mediaGalleryImageDetails: '${ $.mediaGalleryImageDetailsName }' }, viewConfig: [ { @@ -110,17 +112,15 @@ define([ }); } else { - DeleteImages( + DeleteImages.deleteImageAction( this.imageModel().selected(), - this.imageModel().deleteImageUrl, - $.mage.__( - 'Are you sure you want to delete "%2" images?' - ).replace('%2', this.getSelectedCount()) + this.mediaGalleryImageDetails().imageDetailsUrl, + this.imageModel().deleteImageUrl ).then(function () { this.imageModel().selected({}); this.massActionMode(false); this.switchMode(); - }.bind(this)); + }); } }.bind(this)); } diff --git a/MediaGalleryUi/view/adminhtml/web/js/image/image-details.js b/MediaGalleryUi/view/adminhtml/web/js/image/image-details.js index 4627012aff2c..f5ebc2396510 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/image/image-details.js +++ b/MediaGalleryUi/view/adminhtml/web/js/image/image-details.js @@ -47,8 +47,8 @@ define([ */ showImageDetailsById: function (imageId) { if (_.isUndefined(this.images[imageId])) { - getDetails(this.imageDetailsUrl, imageId).then(function (imageDetails) { - this.images[imageId] = imageDetails; + getDetails(this.imageDetailsUrl, [imageId]).then(function (imageDetails) { + this.images[imageId] = imageDetails[imageId]; this.image(this.images[imageId]); this.openImageDetailsModal(); }.bind(this)).fail(function (message) { From f9f507caf0d480bae9d8e3fb0679fcf59f1f0c02 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych <nazarn96@gmail.com> Date: Tue, 30 Jun 2020 18:49:50 +0300 Subject: [PATCH 24/27] Move prefix generation of content usage to frontend --- .../AddAdobeStockImageDetailsPlugin.php | 3 +- .../Model/AssetDetailsProvider/UsedIn.php | 6 ++-- MediaGalleryUi/Model/GetDetailsByAssetId.php | 2 +- MediaGalleryUi/etc/di.xml | 12 +++---- .../deleteImageWithDetailConfirmation.js | 32 +++++++++++++++++-- .../web/js/grid/massaction/massactionView.js | 11 ++++--- .../adminhtml/web/js/image/image-details.js | 31 ++++++++++++++++-- 7 files changed, 72 insertions(+), 25 deletions(-) diff --git a/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php b/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php index 7717b1d0711e..5fbcd1280700 100644 --- a/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php +++ b/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php @@ -87,7 +87,7 @@ public function __construct( * * @param GetDetailsByAssetId $getImageDetailsByAssetId * @param array $imageDetails - * @param int $assetId + * @param array $assetId * @return array * @SuppressWarnings(PHPMD.UnusedFormalParameter) */ @@ -108,7 +108,6 @@ public function afterExecute( /** @var AssetSearchResultsInterface $result */ $result = $this->assetRepository->getList($searchCriteria); - $adobeStockInfo = []; if ($result->getTotalCount() > 0) { $item = $result->getItems(); diff --git a/MediaGalleryUi/Model/AssetDetailsProvider/UsedIn.php b/MediaGalleryUi/Model/AssetDetailsProvider/UsedIn.php index 0b5c15d4b370..83cabd644376 100644 --- a/MediaGalleryUi/Model/AssetDetailsProvider/UsedIn.php +++ b/MediaGalleryUi/Model/AssetDetailsProvider/UsedIn.php @@ -71,16 +71,14 @@ private function getUsedIn(int $assetId): array foreach ($contentIdentities as $contentIdentity) { $entityId = $contentIdentity->getEntityId(); $type = $this->contentTypes[$contentIdentity->getEntityType()] ?? $contentIdentity->getEntityType(); - $singleType = $this->contentTypes[$contentIdentity->getEntityType() . '_single'] ?? $type; if (!isset($entityIds[$type])) { - $usedIn[$singleType] = 1; + $usedIn[$type] = 1; } elseif ($entityIds[$type]['entity_id'] !== $entityId) { if (isset($usedIn[$type])) { $usedIn[$type] +=1; } else { - $usedIn[$type] = $usedIn[$singleType]+1; - unset($usedIn[$singleType]); + $usedIn[$type] = $usedIn[$type]+1; } } $entityIds[$type]['entity_id'] = $entityId; diff --git a/MediaGalleryUi/Model/GetDetailsByAssetId.php b/MediaGalleryUi/Model/GetDetailsByAssetId.php index 6fcb99791e81..b870082ea2aa 100644 --- a/MediaGalleryUi/Model/GetDetailsByAssetId.php +++ b/MediaGalleryUi/Model/GetDetailsByAssetId.php @@ -72,7 +72,7 @@ public function __construct( /** * Get image details by assets Ids * - * @param array $assetId + * @param array $assetIds * @throws LocalizedException * @throws Exception * @return array diff --git a/MediaGalleryUi/etc/di.xml b/MediaGalleryUi/etc/di.xml index abbb3b7c0128..48cd74f63383 100644 --- a/MediaGalleryUi/etc/di.xml +++ b/MediaGalleryUi/etc/di.xml @@ -47,14 +47,10 @@ <type name="Magento\MediaGalleryUi\Model\AssetDetailsProvider\UsedIn"> <arguments> <argument name="contentTypes" xsi:type="array"> - <item name="catalog_category" xsi:type="string">Categories</item> - <item name="catalog_category_single" xsi:type="string">Category</item> - <item name="catalog_product" xsi:type="string">Products</item> - <item name="catalog_product_single" xsi:type="string">Product</item> - <item name="cms_block" xsi:type="string">Blocks</item> - <item name="cms_block_single" xsi:type="string">Block</item> - <item name="cms_page" xsi:type="string">Pages</item> - <item name="cms_page_single" xsi:type="string">Page</item> + <item name="catalog_category" xsi:type="string">Category</item> + <item name="catalog_product" xsi:type="string">Product</item> + <item name="cms_block" xsi:type="string">Block</item> + <item name="cms_page" xsi:type="string">Page</item> </argument> </arguments> </type> diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js index c954cb6900cc..22f33fa33a37 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js @@ -12,6 +12,8 @@ define([ return { + categoryContentType: 'Category', + /** * Get information about image use * @@ -59,17 +61,41 @@ define([ $.each(imageDetails, function (key, image) { if (_.isObject(image.details[6]) && !_.isEmpty(image.details[6].value)) { $.each(image.details[6].value, function (entityName, count) { - usedIn[entityName] = usedIn[entityName] + count || count; + usedIn[entityName] = usedIn[entityName] + count || count; }); } }); + $.each(usedIn, function (entityName, count) { - message += count + ' ' + entityName + ', '; - }); + message += count + ' ' + this.getEntityNameWithPrefix(entityName, count) + ', '; + }.bind(this)); + message = message.replace(/,\s*$/, ''); message = usedInMessage.replace('%s', message).replace('%p', prefix); return message; + }, + + /** + * Return entity name based on used in count + * + * @param {String} entityName + * @param {String} count + */ + getEntityNameWithPrefix: function (entityName, count) { + var name; + + if (count > 1) { + if (entityName === this.categoryContentType) { + name = entityName.slice(0, -1) + 'ies'; + } else { + name = entityName + 's'; + } + + return name; + } + + return entityName; } }; }); diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js index bb3b8d958a7a..2e962cfc8d95 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js @@ -85,8 +85,9 @@ define([ }); $(this.addSelectedButtonSelector).addClass('no-display'); - $(this.deleteButtonSelector).addClass('media-gallery-actions-buttons'); - $(this.deleteButtonSelector).removeClass('primary'); + $(this.deleteButtonSelector) + .addClass('media-gallery-actions-buttons') + .removeClass('primary'); }, /** @@ -100,8 +101,10 @@ define([ $(value).addClass('no-display'); }); - $(this.deleteButtonSelector).removeClass('media-gallery-actions-buttons').text($.mage.__('Delete Selected')); - $(this.deleteButtonSelector).addClass('primary'); + $(this.deleteButtonSelector) + .removeClass('media-gallery-actions-buttons') + .text($.mage.__('Delete Selected')) + .addClass('primary'); if (!$(this.cancelMassactionButtonSelector).length) { $(this.pageActionsSelector).append(this.cancelMassactionButton); diff --git a/MediaGalleryUi/view/adminhtml/web/js/image/image-details.js b/MediaGalleryUi/view/adminhtml/web/js/image/image-details.js index f5ebc2396510..d539bd918fcc 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/image/image-details.js +++ b/MediaGalleryUi/view/adminhtml/web/js/image/image-details.js @@ -18,6 +18,7 @@ define([ imageDetailsUrl: '/media_gallery/image/details', images: [], tagListLimit: 7, + categoryContentType: 'Category', showAllTags: false, image: null, modules: { @@ -134,14 +135,38 @@ define([ var usedIn = ''; if (_.isObject(value)) { - _.each(value, function (numberOfTimeUsed, moduleName) { - usedIn += numberOfTimeUsed + ' ' + moduleName + '</br>'; - }); + $.each(value, function (moduleName, count) { + usedIn += count + ' ' + + this.getEntityNameWithPrefix(moduleName, count) + + '</br>'; + }.bind(this)); return usedIn; } return value; + }, + + /** + * Return entity name based on used in count + * + * @param {String} entityName + * @param {String} count + */ + getEntityNameWithPrefix: function (entityName, count) { + var name; + + if (count > 1) { + if (entityName === this.categoryContentType) { + name = entityName.slice(0, -1) + 'ies'; + } else { + name = entityName + 's'; + } + + return name; + } + + return entityName; } }); }); From e549b8f5028c0c8f3741d3ebca8469eef7c24769 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych <nazarn96@gmail.com> Date: Tue, 30 Jun 2020 20:21:31 +0300 Subject: [PATCH 25/27] Refactoring fix mftf tests --- ...hancedMediaGalleryEnableMassActionModeActionGroup.xml | 2 +- .../AdminEnhancedMediaGalleryMassActionSection.xml | 5 ++--- .../Mftf/Test/AdminMediaGalleryDeleteImageFileTest.xml | 6 +++++- .../web/js/action/deleteImageWithDetailConfirmation.js | 7 +++++-- .../view/adminhtml/web/js/action/deleteImages.js | 4 +++- .../adminhtml/web/js/grid/massaction/massactionView.js | 9 +++++---- .../view/adminhtml/web/js/grid/massaction/massactions.js | 7 +++++-- .../view/adminhtml/web/js/image/image-actions.js | 2 +- 8 files changed, 27 insertions(+), 15 deletions(-) diff --git a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryEnableMassActionModeActionGroup.xml b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryEnableMassActionModeActionGroup.xml index 5a88ee580f57..022120755cd5 100644 --- a/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryEnableMassActionModeActionGroup.xml +++ b/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryEnableMassActionModeActionGroup.xml @@ -13,6 +13,6 @@ <description>Activate massaction mode by click on Delete Selected..</description> </annotations> - <click selector="{{AdminEnhancedMediaGalleryMassActionSection.massActionButton}}" stepKey="clickOnMassActionButton"/> + <click selector="{{AdminEnhancedMediaGalleryMassActionSection.deleteSelected}}" stepKey="clickOnMassActionButton"/> </actionGroup> </actionGroups> diff --git a/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml b/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml index 8b420cbc60ff..a40a70c5f160 100644 --- a/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml +++ b/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml @@ -10,8 +10,7 @@ <section name="AdminEnhancedMediaGalleryMassActionSection"> <element name="massActionCheckbox" type="button" selector="//input[@type='checkbox'][@data-ui-id ='{{imageName}}']" parameterized="true"/> <element name="totalSelected" type="text" selector=".mediagallery-massaction-items-count > .selected_count_text"/> - <element name="cancelMassActionMode" type="button" selector="#cancel"/> - <element name="deleteSelected" type="button" selector="#delete_selected"/> - <element name="massActionButton" type="button" selector="#delete_massaction"/> + <element name="cancelMassActionMode" type="button" selector="#cancel_massaction"/> + <element name="deleteSelected" type="button" selector="#delete_massaction"/> </section> </sections> diff --git a/MediaGalleryUi/Test/Mftf/Test/AdminMediaGalleryDeleteImageFileTest.xml b/MediaGalleryUi/Test/Mftf/Test/AdminMediaGalleryDeleteImageFileTest.xml index 1fdb4b1a9619..52f3f5ced83a 100644 --- a/MediaGalleryUi/Test/Mftf/Test/AdminMediaGalleryDeleteImageFileTest.xml +++ b/MediaGalleryUi/Test/Mftf/Test/AdminMediaGalleryDeleteImageFileTest.xml @@ -29,7 +29,11 @@ <actionGroup ref="AdminMediaGalleryClickImageInGridActionGroup" stepKey="selectImageInGrid"> <argument name="imageName" value="{{ImageUpload.file}}"/> </actionGroup> - <actionGroup ref="AdminMediaGalleryImageDeleteActionGroup" stepKey="deleteImage"/> + <actionGroup ref="AdminEnhancedMediaGalleryEnableMassActionModeActionGroup" stepKey="enableMassActionToDeleteImages"/> + <actionGroup ref="AdminEnhancedMediaGallerySelectImageForMassActionActionGroup" stepKey="selectFirstImageToDelete"> + <argument name="imageName" value="{{ImageUpload.fileName}}"/> + </actionGroup> + <actionGroup ref="AdminEnhancedMediaGalleryImageDeleteImagesInBulkActionGroup" stepKey="deleteImagesAndAssertResult"/> <actionGroup ref="AssertAdminEnhancedMediaGalleryImageDeletedActionGroup" stepKey="verifyImageIsDeleted"> <argument name="imageName" value="{{ImageUpload.filename}}"/> </actionGroup> diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js index 22f33fa33a37..903de4815e6d 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js @@ -36,8 +36,8 @@ define([ }.bind(this)).fail(function () { confirmationContent = confirmationContent.replace('%1', ''); }).always(function () { - deleteImages(recordsIds, deleteImageUrl, confirmationContent).then(function () { - deferred.resolve(); + deleteImages(recordsIds, deleteImageUrl, confirmationContent).then(function (status) { + deferred.resolve(status); }).fail(function (message) { deferred.reject(message); }); @@ -66,6 +66,9 @@ define([ } }); + if (_.isEmpty(usedIn)) { + return ''; + } $.each(usedIn, function (entityName, count) { message += count + ' ' + this.getEntityNameWithPrefix(entityName, count) + ', '; }.bind(this)); diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js index 5161ea198ab9..1d55939c5d1b 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImages.js @@ -104,7 +104,9 @@ define([ */ click: function () { this.closeModal(); - deferred.resolve(); + deferred.resolve({ + status: 'canceled' + }); } }, { diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js index 2e962cfc8d95..5f0519c2d8e2 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js @@ -15,7 +15,7 @@ define([ gridSelector: '[data-id="media-gallery-masonry-grid"]', originDeleteSelector: null, originCancelEvent: null, - cancelMassactionButton: '<button id="cancel" type="button" class="cancel">Cancel</button>', + cancelMassactionButton: '<button id="cancel_massaction" type="button" class="cancel">Cancel</button>', isCancelButtonInserted: false, deleteButtonSelector: '#delete_massaction', addSelectedButtonSelector: '#add_selected', @@ -75,9 +75,10 @@ define([ $(this.deleteButtonSelector).replaceWith(this.originDeleteSelector); if (!this.isCancelButtonInserted) { - $(this.cancelMassactionButtonSelector).replaceWith(this.originCancelEvent); + $('#cancel_massaction').replaceWith(this.originCancelEvent); } else { $(this.cancelMassactionButtonSelector).addClass('no-display'); + $('#cancel_massaction').remove(); } $.each(this.buttonsIds, function (key, value) { @@ -95,7 +96,7 @@ define([ */ activateMassactionButtonView: function () { this.originDeleteSelector = $(this.deleteButtonSelector).clone(true, true); - this.originCancelEvent = $(this.cancelMassactionButton).clone(true); + this.originCancelEvent = $('#cancel').clone(true); $.each(this.buttonsIds, function (key, value) { $(value).addClass('no-display'); @@ -112,7 +113,7 @@ define([ } else { $(this.cancelMassactionButtonSelector).replaceWith(this.cancelMassactionButton); } - $(this.cancelMassactionButtonSelector).on('click', function () { + $('#cancel_massaction').on('click', function () { $(window).trigger('terminateMassAction.MediaGallery'); }); diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js index 122fe8238c26..f952877b7129 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js @@ -116,11 +116,14 @@ define([ this.imageModel().selected(), this.mediaGalleryImageDetails().imageDetailsUrl, this.imageModel().deleteImageUrl - ).then(function () { + ).then(function (response) { + if (response.status == 'canceled') { + return; + } this.imageModel().selected({}); this.massActionMode(false); this.switchMode(); - }); + }.bind(this)); } }.bind(this)); } diff --git a/MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js b/MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js index 67354b175ae5..988a8e770a5a 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js @@ -58,7 +58,7 @@ define([ deleteImageUrl = this.imageModel().deleteImageUrl; deleteImageWithDetailConfirmation.deleteImageAction( - this.imageModel().getSelected(), + [this.imageModel().getSelected().id], imageDetailsUrl, deleteImageUrl ); From adfedb7491b6d49212b3c19443278e4c4231bca8 Mon Sep 17 00:00:00 2001 From: Nazar Klovanych <nazarn96@gmail.com> Date: Tue, 30 Jun 2020 20:24:04 +0300 Subject: [PATCH 26/27] Fix static tests --- .../Plugin/AddAdobeStockImageDetailsPlugin.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php b/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php index 5fbcd1280700..8d6f1c9a61ae 100644 --- a/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php +++ b/AdobeStockImageAdminUi/Plugin/AddAdobeStockImageDetailsPlugin.php @@ -87,7 +87,7 @@ public function __construct( * * @param GetDetailsByAssetId $getImageDetailsByAssetId * @param array $imageDetails - * @param array $assetId + * @param array $assetIds * @return array * @SuppressWarnings(PHPMD.UnusedFormalParameter) */ From d9dc62a47f14d7fb4722d9b88ab2d1ecd673c64b Mon Sep 17 00:00:00 2001 From: Nazar Klovanych <nazarn96@gmail.com> Date: Tue, 30 Jun 2020 20:25:19 +0300 Subject: [PATCH 27/27] fic static --- .../view/adminhtml/web/js/grid/massaction/massactions.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js index f952877b7129..ebb619af83c4 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js @@ -117,7 +117,7 @@ define([ this.mediaGalleryImageDetails().imageDetailsUrl, this.imageModel().deleteImageUrl ).then(function (response) { - if (response.status == 'canceled') { + if (response.status === 'canceled') { return; } this.imageModel().selected({});