EZP-27914: As an Editor I want to remove permanently a language from a content item

Resources/public/css/theme/views/actions/translate.css

@@ -50,6 +50,17 @@
     font-weight: bold;
 }
 
+.ez-view-translateactionview .ez-contenttranslation-delete-link {
+    color: #fff;
+    background: #498FE1;
+    border-radius: 0.5em;
+    font-weight: bold;
+}
+
+.ez-view-translateactionview .ez-contenttranslation-delete-link:before {
+    content: "\E615"
+}
+
 .ez-view-translateactionview .ez-newtranslation-button {
     background: #B8E986;
     color: #333333;

Resources/public/css/views/actions/translate.css

@@ -59,16 +59,21 @@
     padding: 1em 1.5em;
 }
 
-.ez-view-translateactionview .ez-contenttranslation-edit-link {
+.ez-view-translateactionview .ez-contenttranslation-actions {
     display: none;
     position: absolute;
     z-index: 1;
     right: 1.5em;
     top: 0.9em;
 }
 
-.ez-view-translateactionview .ez-contenttranslation:hover .ez-contenttranslation-edit-link {
+.ez-view-translateactionview .ez-contenttranslation:hover .ez-contenttranslation-actions {
     display: block;
+}
+
+.ez-view-translateactionview .ez-contenttranslation-actions .ez-contenttranslation-edit-link,
+.ez-view-translateactionview .ez-contenttranslation-actions .ez-contenttranslation-delete-link {
+    display: inline-block;
     padding: 0.1em 0.5em;
 }
 

Resources/public/js/models/ez-contentmodel.js

@@ -464,6 +464,22 @@ YUI.add('ez-contentmodel', function (Y) {
             }
             contentService.deleteContent(this.get('id'), callback);
         },
+
+        /**
+         * Removes translation
+         *
+         * @method removeTranslation
+         * @param {Object} options
+         * @param {Object} options.api (required) the JS REST client instance
+         * @param {String} languageCode
+         * @param {Function} callback
+         */
+        removeTranslation: function (options, languageCode, callback) {
+            var capi = options.api,
+                contentService = capi.getContentService();
+
+            contentService.removeTranslation(this.get('id'), languageCode, callback);
+        },
     }, {
         REST_STRUCT_ROOT: "Content",
         ATTRS_REST_MAP: [

Resources/public/js/views/actions/ez-translateactionview.js

@@ -14,7 +14,10 @@ YUI.add('ez-translateactionview', function (Y) {
     var events = {
             '.ez-newtranslation-button': {
                 'tap': '_newTranslationLanguageSelectionBox',
-            }
+            },
+            '.ez-contenttranslation-delete-link': {
+                'tap': '_deleteTranslation',
+            },
         };
 
     /**
@@ -60,6 +63,7 @@ YUI.add('ez-translateactionview', function (Y) {
                 location: this.get('location').toJSON(),
                 content: this.get('content').toJSON(),
                 translations: translationsList,
+                canDeleteTranslations: translationsList.length > 1,
                 firstLanguagesCode: firstLanguageCodes,
                 moreTranslationCount: moreTranslationCount
             }));
@@ -147,6 +151,31 @@ YUI.add('ez-translateactionview', function (Y) {
             this._hideView();
         },
 
+        /**
+         * Tap event handler on Delete Translation button.
+         *
+         * @method _deleteTranslation
+         * @protected
+         * @param {EventFacade} e
+         */
+        _deleteTranslation: function (e) {
+            var data = {
+                translation: e.target.getAttribute('data-translation'),
+                contentId: this.get('content').get('contentId')
+            };
+
+            e.preventDefault();
+
+            /**
+             * Fired when the translation is deleted
+             *
+             * @event deleteTranslation
+             * @param {data.translation} Language code of translation
+             * @param {data.contentId} The content Id
+             */
+            this.fire('deleteTranslation', data);
+        },
+
         /**
          * Fires `translate` event after making a selection on LanguageSelectionBox
          *

Resources/public/js/views/services/ez-locationviewviewservice.js

@@ -30,6 +30,7 @@ YUI.add('ez-locationviewviewservice', function (Y) {
             this.on('*:translateContent', this._translateContent);
             this.on('*:sortUpdate', this._updateSorting);
             this.on('*:updatePriority', this._updatePriority);
+            this.on('*:deleteTranslation', this._confirmDeleteTranslation);
             this.after('*:requestChange', this._setLanguageCode);
 
             this._setLanguageCode();
@@ -567,6 +568,74 @@ YUI.add('ez-locationviewviewservice', function (Y) {
             this.set('languageCode', this.get('request').params.languageCode);
         },
 
+        /**
+         * Removes translation from content.
+         *
+         * @method _deleteTranslation
+         * @protected
+         * @param {String} languageCode
+         */
+        _deleteTranslation: function (languageCode) {
+            var content = this.get('content'),
+                options = {
+                    api: this.get('capi')
+                };
+
+            content.removeTranslation(options, languageCode, Y.bind(function(error) {
+                if (error) {
+                    this._notify(
+                        Y.eZ.trans('failed.delete.content.translation', { language: languageCode }, 'bar'),
+                        'content-delete-translation-' + content.get('id'), 'error', 0
+                    );
+                    return;
+                }
+
+                this._notify(
+                    Y.eZ.trans('success.delete.content.translation', { language: languageCode }, 'bar'),
+                    'content-delete-translation-' + content.get('id'), 'done', 5
+                );
+
+                this.get('app').navigateTo('viewLocation', {
+                     id: this.get('location').get('id'),
+                     languageCode: content.get('mainLanguageCode')
+                });
+            }, this));
+        },
+
+        /**
+         * `deleteTranslation` event handler,
+         * it asks confirmation to the user before delete the translation item.
+         *
+         * @method _confirmDeleteTranslation
+         * @protected
+         * @param {Object} e event facade of the deleteAction event
+         */
+        _confirmDeleteTranslation: function (e) {
+            var content = this.get('content'),
+                languageCode = e.translation;
+
+            e.preventDefault();
+            if (languageCode === content.get('mainLanguageCode')) {
+                this._notify(
+                    Y.eZ.trans('failed.delete.content.main.translation', {}, 'bar'),
+                    'content-delete-translation-' + content.get('id'), 'error', 0
+                );
+            } else {
+                /**
+                 * Opens confirmation modal of deleting translation
+                 *
+                 * @event confirmBoxOpen
+                 * @param {e.config} Modal configuration
+                 */
+                this.fire('confirmBoxOpen', {
+                    config: {
+                        title: Y.eZ.trans('confirm.delete.translation', { language: languageCode }, 'bar'),
+                        confirmHandler: Y.bind(this._deleteTranslation, this, languageCode),
+                    }
+                });
+            }
+        },
+
         _getViewParameters: function () {
             return {
                 content: this.get('content'),

Resources/public/templates/translateaction.hbt

@@ -21,9 +21,15 @@
                     <a class="ez-contenttranslation-view-link" href="{{ path "viewLocation" id=../location.id languageCode=this }}">
                         {{ language_name this }}
                     </a>
-                    <a class="ez-contenttranslation-edit-link" href="{{ path "editContent" id=../content.id languageCode=this }}">
-                        {{translate 'translateaction.edit' 'bar'}}
-                    </a>
+
+                    <span class="ez-contenttranslation-actions">
+                        <a class="ez-contenttranslation-edit-link" href="{{ path "editContent" id=../content.id languageCode=this }}">
+                            {{translate 'translateaction.edit' 'bar'}}
+                        </a>
+                        {{#if ../canDeleteTranslations}}
+                        <a class="ez-contenttranslation-delete-link ez-font-icon" data-translation="{{.}}" href="{{ path "editContent" id=../content.id languageCode=this }}"></a>
+                        {{/if}}
+                    </span>
                 </li>
                 {{/each}}
             </ul>

Resources/translations/bar.en.xlf

@@ -227,6 +227,30 @@
         <note>key: translateaction.edit</note>
         <jms:reference-file>Resources/public/templates/translateaction.hbt</jms:reference-file>
       </trans-unit>
+      <trans-unit id="f066151955a2dd9163a84081f8f2ef175966bbd4" resname="confirm.delete.translation">
+        <source>Are you sure you want to delete "%language%" translation?</source>
+        <target>Are you sure you want to delete "%language%" translation?</target>
+        <note>key: confirm.delete.translation</note>
+        <jms:reference-file>Resources/public/js/views/services/ez-locationviewviewservice.js</jms:reference-file>
+      </trans-unit>
+      <trans-unit id="e5e147f6fd07facc4a3318e223553c790faa0641" resname="success.delete.content.translation">
+        <source>Translation "%language%" has been deleted.</source>
+        <target>Translation "%language%" has been deleted.</target>
+        <note>key: success.delete.content.translation</note>
+        <jms:reference-file>Resources/public/js/views/services/ez-locationviewviewservice.js</jms:reference-file>
+      </trans-unit>
+      <trans-unit id="011d57b24d3097d18e29e303e9b6c0c54ba82a8c" resname="failed.delete.content.translation">
+        <source>Cannot delete translation "%language%" from content.</source>
+        <target>Cannot delete translation "%language%" from content.</target>
+        <note>key: failed.delete.content.translation</note>
+        <jms:reference-file>Resources/public/js/views/services/ez-locationviewviewservice.js</jms:reference-file>
+      </trans-unit>
+      <trans-unit id="011d57b24d3097d18e29e303e9b6c0c54ba82a8c" resname="failed.delete.content.main.translation">
+        <source>Cannot delete main translation from content.</source>
+        <target>Cannot delete main translation from content.</target>
+        <note>key: failed.delete.content.main.translation</note>
+        <jms:reference-file>Resources/public/js/views/services/ez-locationviewviewservice.js</jms:reference-file>
+      </trans-unit>
       <trans-unit id="0da142a7f050a139b79a5865547744a56a5f4281" resname="translateaction.existing.translations">
         <source>Existing Translations</source>
         <target>Existing Translations</target>

Tests/js/views/actions/assets/ez-translateactionview-tests.js

@@ -14,7 +14,7 @@ YUI.add('ez-translateactionview-tests', function (Y) {
                 this.label = 'Translate test label';
                 this.translationsList = ['eng-GB', 'pol-PL'];
                 this.disabled = false;
-                this.templateVariablesCount = 8;
+                this.templateVariablesCount = 9;
                 this.contentMock = new Mock();
                 this.locationMock = new Mock();
                 this.versionMock = new Mock();

composer.json

@@ -9,7 +9,7 @@
         }
     },
     "require": {
-        "ezsystems/platform-ui-assets-bundle": "^4.0.0",
+        "ezsystems/platform-ui-assets-bundle": "^4.1.0",
         "ezsystems/repository-forms": "^1.11",
         "ezsystems/ezpublish-kernel": "^6.13",
         "ezsystems/ez-support-tools": "^0.2",