diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js index 8d2713515236..2e726c6fae15 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js @@ -18,10 +18,10 @@ define([ * * @param {Object} record * @param {String} deleteUrl + * @param {String} confirmationContent */ - deleteImageAction: function (record, deleteUrl) { - var baseContent = $.mage.__('Are you sure you want to delete "%s" image?'), - title = $.mage.__('Delete image'), + deleteImageAction: function (record, deleteUrl, confirmationContent) { + var title = $.mage.__('Delete image'), cancelText = $.mage.__('Cancel'), deleteImageText = $.mage.__('Delete Image'), deleteImageCallback = this.deleteImage.bind(this); @@ -29,7 +29,7 @@ define([ confirmation({ title: title, modalClass: 'media-gallery-delete-image-action', - content: baseContent.replace('%s', record.path), + content: confirmationContent, buttons: [ { text: cancelText, diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js new file mode 100644 index 000000000000..e399f5ae4180 --- /dev/null +++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js @@ -0,0 +1,77 @@ +/** + * Copyright © Magento, Inc. All rights reserved. + * See COPYING.txt for license details. + */ +define([ + 'jquery', + 'underscore', + 'Magento_MediaGalleryUi/js/action/getDetails', + 'Magento_MediaGalleryUi/js/action/deleteImage' +], function ($, _, getDetails, deleteImage) { + 'use strict'; + + return { + + /** + * Get information about image use + * + * @param {Object} record + * @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); + + getDetails(imageDetailsUrl, record.id) + .then(function (imageDetails) { + confirmationContent = confirmationContent.replace( + '%1', + this.getConfirmationContentByImageDetails(imageDetails) + ); + }.bind(this)).fail(function () { + confirmationContent = confirmationContent.replace('%1', ''); + }).always(function () { + deleteImage.deleteImageAction(record, deleteImageUrl, confirmationContent); + }); + }, + + /** + * 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 ''; + }, + + /** + * Get information about image use + * + * @param {Object|String} value + * @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*$/, ''); + + return usedInMessage.replace('%s', usedIn); + } + + return ''; + } + }; +}); 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 4a980115400b..d629e30bceab 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/actions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/actions.js @@ -6,9 +6,9 @@ define([ 'jquery', 'underscore', 'uiComponent', - 'Magento_MediaGalleryUi/js/action/deleteImage', + 'Magento_MediaGalleryUi/js/action/deleteImageWithDetailConfirmation', 'Magento_MediaGalleryUi/js/grid/columns/image/insertImageAction' -], function ($, _, Component, deleteImage, image) { +], function ($, _, Component, deleteImageWithDetailConfirmation, image) { 'use strict'; return Component.extend({ @@ -51,7 +51,7 @@ define([ initEvents: function () { $(this.imageModel().addSelectedBtnSelector).click(function () { image.insertImage( - this.imageModel().getSelected(), + this.imageModel().getSelected(), { onInsertUrl: this.imageModel().onInsertUrl, storeId: this.imageModel().storeId @@ -70,7 +70,10 @@ define([ * @param {Object} record */ deleteImageAction: function (record) { - deleteImage.deleteImageAction(record, this.imageModel().deleteImageUrl); + var imageDetailsUrl = this.mediaGalleryImageDetails().imageDetailsUrl, + deleteImageUrl = this.imageModel().deleteImageUrl; + + deleteImageWithDetailConfirmation.deleteImageAction(record, imageDetailsUrl, deleteImageUrl); }, /** diff --git a/MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js b/MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js index 32d674d83201..67354b175ae5 100644 --- a/MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js +++ b/MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js @@ -7,18 +7,20 @@ define([ 'jquery', 'underscore', 'uiElement', - 'Magento_MediaGalleryUi/js/action/deleteImage', + 'Magento_MediaGalleryUi/js/action/deleteImageWithDetailConfirmation', 'Magento_MediaGalleryUi/js/grid/columns/image/insertImageAction' -], function ($, _, Element, deleteImage, addSelected) { +], function ($, _, Element, deleteImageWithDetailConfirmation, addSelected) { 'use strict'; return Element.extend({ defaults: { modalSelector: '', modalWindowSelector: '', + mediaGalleryImageDetailsName: 'mediaGalleryImageDetails', template: 'Magento_MediaGalleryUi/image/actions', modules: { - imageModel: '${ $.imageModelName }' + imageModel: '${ $.imageModelName }', + mediaGalleryImageDetails: '${ $.mediaGalleryImageDetailsName }' } }, @@ -52,7 +54,14 @@ define([ * Delete image action */ deleteImageAction: function () { - deleteImage.deleteImageAction(this.imageModel().getSelected(), this.imageModel().deleteImageUrl); + var imageDetailsUrl = this.mediaGalleryImageDetails().imageDetailsUrl, + deleteImageUrl = this.imageModel().deleteImageUrl; + + deleteImageWithDetailConfirmation.deleteImageAction( + this.imageModel().getSelected(), + imageDetailsUrl, + deleteImageUrl + ); }, /**