Browse Source

HUE-8162 [core] Add delete operation to the right document assist

Roohi 7 years ago
parent
commit
3724002d01

+ 2 - 0
desktop/core/src/desktop/static/desktop/js/document/hueFileEntry.js

@@ -694,6 +694,7 @@ var HueFileEntry = (function () {
           errorCallback: function () {
             self.activeEntry().load();
             $('#deleteEntriesModal').modal('hide');
+            $(".modal-backdrop").remove();
             self.deletingEntries(false);
           }
         });
@@ -701,6 +702,7 @@ var HueFileEntry = (function () {
         self.deletingEntries(false);
         huePubSub.publish('assist.document.refresh');
         $('#deleteEntriesModal').modal('hide');
+        $(".modal-backdrop").remove();
         self.activeEntry().load();
       }
     };

+ 3 - 0
desktop/core/src/desktop/static/desktop/js/ko.hue-bindings.js

@@ -1171,6 +1171,9 @@
           sel.removeAllRanges();
         }
 
+        if (typeof options.beforeOpen === 'function') {
+          options.beforeOpen.bind(viewModel)();
+        }
         var $menu = $('#hueContextMenu_' + options.template);
         if ($menu.length === 0) {
           $menu = $('<ul id="hueContextMenu_' + options.template  + '" class="hue-context-menu" data-bind="template: { name: \'' + options.template + '\', data: viewModel, afterRender: afterRender }"></ul>').appendTo(HUE_CONTAINER);

+ 2 - 1
desktop/core/src/desktop/templates/assist.mako

@@ -188,6 +188,7 @@ from desktop.views import _ko
     <!-- ko if: definition().type !== 'directory' -->
     <li><a href="javascript: void(0);" data-bind="click: function(data) { showContextPopover(data, { target: $parentContext.$contextSourceElement }, { left: 4, top: 2 }); }"><i class="fa fa-fw fa-info"></i> ${ _('Show details') }</a></li>
     <li><a href="javascript: void(0);" data-bind="click: open"><i class="fa fa-fw fa-edit"></i> ${ _('Open document') }</a></li>
+    <li><a href="javascript: void(0);" data-bind="click: function() { huePubSub.publish('doc.show.delete.modal', $data); activeEntry().getSelectedDocsWithDependents(); activeEntry().showDeleteConfirmation(); }"><i class="fa fa-fw fa-trash-o"></i> ${ _('Delete document') }</a></li>
     <!-- /ko -->
   </script>
 
@@ -677,7 +678,7 @@ from desktop.views import _ko
         </ul>
         <!-- /ko -->
         <ul class="assist-tables" data-bind="foreachVisible: { data: filteredEntries, minHeight: 27, container: '.assist-file-scrollable' }">
-          <li class="assist-entry assist-file-entry" data-bind="appAwareTemplateContextMenu: { template: 'document-context-items', scrollContainer: '.assist-file-scrollable' }, assistFileDroppable, assistFileDraggable, visibleOnHover: { 'selector': '.assist-file-actions' }">
+          <li class="assist-entry assist-file-entry" data-bind="appAwareTemplateContextMenu: { template: 'document-context-items', scrollContainer: '.assist-file-scrollable', beforeOpen: beforeContextOpen }, assistFileDroppable, assistFileDraggable, visibleOnHover: { 'selector': '.assist-file-actions' }">
             <div class="assist-file-actions table-actions">
               <a class="inactive-action" href="javascript:void(0)" data-bind="click: showContextPopover, css: { 'blue': statsVisible }"><i class="fa fa-fw fa-info" title="${_('Show details')}"></i></a>
             </div>

+ 4 - 48
desktop/core/src/desktop/templates/document_browser.mako

@@ -250,50 +250,6 @@ from desktop.views import _ko
       <!-- /ko -->
     </div>
 
-    <div id="deleteEntriesModal" data-keyboard="true" class="modal hide fade" tabindex="-1">
-      <!-- ko with: activeEntry -->
-      <div class="modal-header">
-        <button type="button" class="close" data-dismiss="modal" aria-label="${ _('Close') }"><span aria-hidden="true">&times;</span></button>
-        <!-- ko if: entriesToDelete().length === 0 -->
-        <h2 class="modal-title">${ _('The trash is empty') }</h2>
-        <!-- /ko -->
-        <!-- ko if: entriesToDelete().length > 0 -->
-        <h2 class="modal-title"> ${ _('Do you really want to delete the following document(s)?') } </h2>
-        <!-- /ko -->
-      </div>
-      <div class="modal-body">
-        <div class="doc-browser-empty animated" style="display: none;" data-bind="visible: entriesToDelete().length > 0 && selectedDocsWithDependents().length === 0">
-          <i class="fa fa-spinner fa-spin fa-2x"></i>
-        </div>
-        <ul data-bind="foreach: selectedDocsWithDependents()">
-          <li>
-            <span data-bind="text: $data.name"></span>
-            <!-- ko if: $data.dependents.length > 0 -->
-              (${_('used by')}
-              <a class="pointer" data-bind="hueLink: $data.dependents[0].absoluteUrl, text: $data.dependents[0].name"></a>
-              <!-- ko if: $data.dependents.length > 1 -->
-              ${_('and')} <a class="pointer" data-bind="hueLink: $data.dependents[1].absoluteUrl, text: $data.dependents[1].name"></a>
-                <!-- ko if: $data.dependents.length > 2 -->
-                  ${_('and')} <span data-bind="text: $data.dependents.length - 2"></span> ${_('other')}
-                <!-- /ko -->
-              <!-- /ko -->
-              )
-            <!-- /ko -->
-          </li>
-        </ul>
-      </div>
-      <div class="modal-footer">
-        <!-- ko if: entriesToDelete().length === 0 -->
-        <input type="button" class="btn" data-dismiss="modal" value="${ _('Close') }">
-        <!-- /ko -->
-        <!-- ko if: entriesToDelete().length > 0 -->
-        <input type="button" class="btn" data-dismiss="modal" value="${ _('Cancel') }">
-        <input type="submit" data-bind="click: function() { if (isTrash() || isTrashed()) { removeDocuments(true) } else { moveToTrash() } }, disable: deletingEntries" class="btn btn-danger disable-feedback" value="${_('Yes')}"/>
-        <!-- /ko -->
-      </div>
-      <!-- /ko -->
-    </div>
-
     <div class="doc-browser-container" data-bind="docSelect: activeEntry.entries, docDroppable: { entries: activeEntry.entries }">
       <div class="navbar hue-title-bar">
         <div class="navbar-inner">
@@ -420,7 +376,7 @@ from desktop.views import _ko
                     </li>
                     <!-- /ko -->
                     <li data-bind="css: { 'disabled': selectedEntries().length === 0 || (sharedWithMeSelected() && !superuser) }">
-                      <a href="javascript:void(0);" data-bind="click: function() { getSelectedDocsWithDependents(); showDeleteConfirmation(); }"><i class="fa fa-fw fa-times"></i> <span data-bind="text:  isTrash() || isTrashed() ? '${ _ko('Delete forever') }' : '${ _ko('Move to trash') }'"></span></a>
+                      <a href="javascript:void(0);" data-bind="click: function() {huePubSub.publish('doc.show.delete.modal', $data);getSelectedDocsWithDependents(); showDeleteConfirmation(); }"><i class="fa fa-fw fa-times"></i> <span data-bind="text:  isTrash() || isTrashed() ? '${ _ko('Delete forever') }' : '${ _ko('Move to trash') }'"></span></a>
                     </li>
                     <li data-bind="css: { 'disabled': isTrash() || isTrashed() || selectedEntry() === null || !canModify() || (selectedEntry() != null && (!selectedEntry().isDirectory() || !selectedEntry().canModify())) }">
                       <a href="javascript:void(0);" data-bind="click: function () { showRenameDirectoryModal() }"><i class="fa fa-fw fa-edit"></i> ${_('Rename folder')}</a>
@@ -511,7 +467,7 @@ from desktop.views import _ko
             <div class="doc-browser-row" data-bind="contextMenu: { scrollContainer: '.doc-browser-list', menuSelector: '.hue-context-menu', beforeOpen: beforeContextOpen }">
               <ul class="hue-context-menu">
                 <!-- ko if: isTrashed -->
-                <li><a href="javascript:void(0);" data-bind="click: function() { $parent.getSelectedDocsWithDependents(); $parent.showDeleteConfirmation(); }"><i class="fa fa-fw fa-times"></i> ${ _('Delete') } <span data-bind="visible: $parent.selectedEntries().length > 1, text: '(' + $parent.selectedEntries().length + ')'"></span></a></li>
+                <li><a href="javascript:void(0);" data-bind="click: function() { huePubSub.publish('doc.show.delete.modal', $data);$parent.getSelectedDocsWithDependents(); $parent.showDeleteConfirmation(); }"><i class="fa fa-fw fa-times"></i> ${ _('Delete') } <span data-bind="visible: $parent.selectedEntries().length > 1, text: '(' + $parent.selectedEntries().length + ')'"></span></a></li>
                 <li><a href="javascript:void(0);" data-bind="click: function() { $parent.showRestoreConfirmation(); }"><i class="fa fa-fw fa-undo"></i> ${ _('Restore to Home') } <span data-bind="visible: $parent.selectedEntries().length > 1, text: '(' + $parent.selectedEntries().length + ')'"></span></a></li>
                 <!-- /ko -->
                 <!-- ko ifnot: isTrashed -->
@@ -520,10 +476,10 @@ from desktop.views import _ko
                 <!-- /ko -->
                 <li data-bind="css: { 'disabled': $parent.selectedEntries().length !== 1 }"><a href="javascript:void(0);" data-bind="click: open, css: { 'disabled': $parent.selectedEntries().length !== 1 }"><i class="fa fa-fw fa-file-o"></i> ${ _('Open') }</a></li>
                 <li><a href="javascript:void(0);" data-bind="click: contextMenuDownload"><i class="fa fa-fw fa-download"></i> ${ _('Download') } <span data-bind="visible: $parent.selectedEntries().length > 1, text: '(' + $parent.selectedEntries().length + ')'"></span></a></li>
-                <li data-bind="visible: ! $altDown(), css: { 'disabled' : $parent.sharedWithMeSelected()  && ! $parent.superuser }"><a href="javascript:void(0);" data-bind="click: function () { $parent.getSelectedDocsWithDependents(); $parent.showDeleteConfirmation(); }, css: { 'disabled' : $parent.sharedWithMeSelected() && ! $parent.superuser }">
+                <li data-bind="visible: ! $altDown(), css: { 'disabled' : $parent.sharedWithMeSelected()  && ! $parent.superuser }"><a href="javascript:void(0);" data-bind="click: function () { huePubSub.publish('doc.show.delete.modal', $data);$parent.getSelectedDocsWithDependents(); $parent.showDeleteConfirmation(); }, css: { 'disabled' : $parent.sharedWithMeSelected() && ! $parent.superuser }">
                   <i class="fa fa-fw fa-times"></i> ${ _('Move to trash') } <span data-bind="visible: $parent.selectedEntries().length > 1, text: '(' + $parent.selectedEntries().length + ')'"></span></a>
                 </li>
-                <li data-bind="visible: $altDown(), css: { 'disabled' : $parent.sharedWithMeSelected() && ! $parent.superuser }"><a href="javascript:void(0);" data-bind="click: function() { $parent.getSelectedDocsWithDependents(); $parent.showDeleteConfirmation(); }, css: { 'disabled' : $parent.sharedWithMeSelected() && ! $parent.superuser}"><i class="fa fa-fw fa-times"></i> ${ _('Delete forever') } <span data-bind="visible: $parent.selectedEntries().length > 1, text: '(' + $parent.selectedEntries().length + ')'"></span></a></li>
+                <li data-bind="visible: $altDown(), css: { 'disabled' : $parent.sharedWithMeSelected() && ! $parent.superuser }"><a href="javascript:void(0);" data-bind="click: function() { huePubSub.publish('doc.show.delete.modal', $data);$parent.getSelectedDocsWithDependents(); $parent.showDeleteConfirmation(); }, css: { 'disabled' : $parent.sharedWithMeSelected() && ! $parent.superuser}"><i class="fa fa-fw fa-times"></i> ${ _('Delete forever') } <span data-bind="visible: $parent.selectedEntries().length > 1, text: '(' + $parent.selectedEntries().length + ')'"></span></a></li>
                 <li data-bind="css: { 'disabled': $parent.selectedEntries().length !== 1 }"><a href="javascript:void(0);" data-bind="click: function() { $parent.showSharingModal(); }, css: { 'disabled': $parent.selectedEntries().length !== 1 }"><i class="fa fa-fw fa-users"></i> ${ _('Share') }</a> </li>
                 <!-- /ko -->
               </ul>

+ 2 - 0
desktop/core/src/desktop/templates/ko_components.mako

@@ -27,6 +27,7 @@
 <%namespace name="koNavTags" file="/ko_components/ko_nav_tags.mako" />
 <%namespace name="koSimpleAceEditor" file="/ko_components/ko_simple_ace_editor.mako" />
 <%namespace name="koSqlColumnsTable" file="/ko_components/ko_sql_columns_table.mako" />
+<%namespace name="koDeleteDocModal" file="/ko_components/ko_delete_doc_modal.mako" />
 
 <%def name="all()">
   ${ koBreadCrumbs.breadCrumbs() }
@@ -42,4 +43,5 @@
   ${ koNavTags.navTags() }
   ${ koSimpleAceEditor.simpleAceEditor() }
   ${ koSqlColumnsTable.sqlColumnsTable() }
+  ${ koDeleteDocModal.deleteDoc() }
 </%def>

+ 87 - 0
desktop/core/src/desktop/templates/ko_components/ko_delete_doc_modal.mako

@@ -0,0 +1,87 @@
+## Licensed to Cloudera, Inc. under one
+## or more contributor license agreements.  See the NOTICE file
+## distributed with this work for additional information
+## regarding copyright ownership.  Cloudera, Inc. licenses this file
+## to you under the Apache License, Version 2.0 (the
+## "License"); you may not use this file except in compliance
+## with the License.  You may obtain a copy of the License at
+##
+##     http://www.apache.org/licenses/LICENSE-2.0
+##
+## Unless required by applicable law or agreed to in writing, software
+## distributed under the License is distributed on an "AS IS" BASIS,
+## WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+## See the License for the specific language governing permissions and
+## limitations under the License.
+
+<%!
+from desktop.views import _ko
+from django.utils.translation import ugettext as _
+%>
+
+<%def name="deleteDoc()">
+  <link href="${ static('desktop/ext/css/selectize.css') }" rel="stylesheet">
+
+  <script type="text/html" id="delete-entry-template">
+  <!-- ko with: activeEntry -->
+  <div class="modal-header">
+    <button type="button" class="close" data-dismiss="modal" aria-label="${ _('Close') }"><span aria-hidden="true">&times;</span></button>
+    <!-- ko if: entriesToDelete().length === 0 -->
+    <h2 class="modal-title">${ _('The trash is empty') }</h2>
+    <!-- /ko -->
+    <!-- ko if: entriesToDelete().length > 0 -->
+    <h2 class="modal-title"> ${ _('Do you really want to delete the following document(s)?') } </h2>
+    <!-- /ko -->
+  </div>
+  <div class="modal-body">
+    <div class="doc-browser-empty animated" style="display: none;" data-bind="visible: entriesToDelete().length > 0 && selectedDocsWithDependents().length === 0">
+      <i class="fa fa-spinner fa-spin fa-2x"></i>
+    </div>
+    <ul data-bind="foreach: selectedDocsWithDependents()">
+      <li>
+        <span data-bind="text: $data.name"></span>
+        <!-- ko if: $data.dependents.length > 0 -->
+          (${_('used by')}
+          <a class="pointer" data-bind="hueLink: $data.dependents[0].absoluteUrl, text: $data.dependents[0].name"></a>
+          <!-- ko if: $data.dependents.length > 1 -->
+          ${_('and')} <a class="pointer" data-bind="hueLink: $data.dependents[1].absoluteUrl, text: $data.dependents[1].name"></a>
+            <!-- ko if: $data.dependents.length > 2 -->
+              ${_('and')} <span data-bind="text: $data.dependents.length - 2"></span> ${_('other')}
+            <!-- /ko -->
+          <!-- /ko -->
+          )
+        <!-- /ko -->
+      </li>
+    </ul>
+  </div>
+  <div class="modal-footer">
+    <!-- ko if: entriesToDelete().length === 0 -->
+    <input type="button" class="btn" data-dismiss="modal" value="${ _('Close') }">
+    <!-- /ko -->
+    <!-- ko if: entriesToDelete().length > 0 -->
+    <input type="button" class="btn" data-dismiss="modal" value="${ _('Cancel') }">
+    <input type="submit" data-bind="click: function() { if (isTrash() || isTrashed()) { removeDocuments(true) } else { moveToTrash() } }, disable: deletingEntries" class="btn btn-danger disable-feedback" value="${_('Yes')}"/>
+    <!-- /ko -->
+  </div>
+  <!-- /ko -->
+</script>
+
+  <script type="text/javascript">
+    (function () {
+      ko.components.register('delete-entry', {
+        template: {element: 'delete-entry-template'}
+      });
+
+      huePubSub.subscribe('doc.show.delete.modal', function (docViewModel) {
+        if ($('#deleteEntriesModal').length > 0) {
+          ko.cleanNode($('#deleteEntriesModal')[0]);
+          $('#deleteEntriesModal').remove();
+        }
+        var $deleteEntriesModal = $('<div id="deleteEntriesModal" data-bind="component: { name: \'delete-entry\', params: $data }" data-keyboard="true" class="modal hide fade" tabindex="-1"/>');
+        $(HUE_CONTAINER).append($deleteEntriesModal);
+        ko.applyBindings(docViewModel, $deleteEntriesModal[0]);
+      });
+
+    })();
+  </script>
+</%def>