Przeglądaj źródła

HUE-1273 [pig] Confirmation popup when leaving unsaved script

Added confirmation when trying to create a new script or load an existing one when the user has unsaved changes
Enrico Berti 12 lat temu
rodzic
commit
3b0ed99a89
2 zmienionych plików z 69 dodań i 8 usunięć
  1. 25 8
      apps/pig/src/pig/templates/app.mako
  2. 44 0
      apps/pig/static/js/pig.ko.js

+ 25 - 8
apps/pig/src/pig/templates/app.mako

@@ -47,7 +47,7 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
       </%def>
 
       <%def name="creation()">
-          <button class="btn fileToolbarBtn" title="${_('Create a new script')}" data-bind="click: newScript"><i class="icon-plus-sign"></i> ${_('New script')}</button>
+          <button class="btn fileToolbarBtn" title="${_('Create a new script')}" data-bind="click: confirmNewScript"><i class="icon-plus-sign"></i> ${_('New script')}</button>
       </%def>
     </%actionbar:render>
     <div class="alert alert-info" data-bind="visible: scripts().length == 0">
@@ -86,10 +86,10 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
         <td class="center" data-bind="click: handleSelect" style="cursor: default">
           <div data-bind="css: {hueCheckbox: true, 'icon-ok': selected}"></div>
         </td>
-        <td data-bind="click: $root.viewScript">
-          <strong><a href="#" data-bind="click: $root.viewScript, text: name"></a></strong>
+        <td data-bind="click: $root.confirmViewScript">
+          <strong><a href="#" data-bind="click: $root.confirmViewScript, text: name"></a></strong>
         </td>
-        <td data-bind="click: $root.viewScript">
+        <td data-bind="click: $root.confirmViewScript">
           <span data-bind="text: scriptSumup"></span>
         </td>
       </tr>
@@ -105,7 +105,7 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
             <li data-bind="click: editScript" class="active" data-section="edit">
               <a href="#"><i class="icon-edit"></i> ${ _('Edit script') }</a>
             </li>
-            <li data-bind="click: newScript">
+            <li data-bind="click: confirmNewScript">
               <a href="#" title="${ _('New script') }" rel="tooltip" data-placement="right">
                 <i class="icon-plus-sign"></i> ${ _('New script') }
               </a>
@@ -440,6 +440,23 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
     </div>
 </div>
 
+<div id="confirmModal" class="modal hide fade">
+  <div class="modal-header">
+    <a href="#" class="close" data-dismiss="modal">&times;</a>
+    <h3>${_('Are you sure?')}</h3>
+  </div>
+  <div class="modal-body">
+    <p>
+      ${_('The current script has unsaved changes. Are you sure you want to discard the changes?')}
+    </p>
+  </div>
+  <div class="modal-footer">
+    <a class="btn" data-dismiss="modal">${_('No')}</a>
+    <a class="btn btn-danger disable-feedback" data-bind="click: confirmScript">${_('Yes')}</a>
+  </div>
+</div>
+
+
 <div class="bottomAlert alert"></div>
 
 <script src="/static/ext/js/knockout-2.1.0.js" type="text/javascript" charset="utf-8"></script>
@@ -851,7 +868,7 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
               window.clearInterval(dashboardLoadedInterval);
               viewModel.loadScript(scriptId);
               if (viewModel.currentScript().id() == -1) {
-                viewModel.newScript();
+                viewModel.confirmNewScript();
               }
               $(document).trigger("loadEditor");
             }
@@ -869,7 +886,7 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
               window.clearInterval(dashboardLoadedInterval);
               viewModel.loadScript(scriptId);
               if (viewModel.currentScript().id() == -1) {
-                viewModel.newScript();
+                viewModel.confirmNewScript();
               }
               $(document).trigger("loadEditor");
             }
@@ -888,7 +905,7 @@ ${ commonheader(None, "pig", user, "100px") | n,unicode }
               viewModel.loadScript(scriptId);
               $(document).trigger("loadEditor");
               if (viewModel.currentScript().id() == -1) {
-                viewModel.newScript();
+                viewModel.confirmNewScript();
               }
               else {
                 viewModel.currentScript().isRunning(true);

+ 44 - 0
apps/pig/static/js/pig.ko.js

@@ -137,6 +137,7 @@ var PigViewModel = function (props) {
   };
 
   self.currentScript = ko.observable(new PigScript(_defaultScript));
+  self.loadingScript = null;
   self.currentDeleteType = ko.observable("");
 
   self.selectedScripts = ko.computed(function () {
@@ -183,8 +184,29 @@ var PigViewModel = function (props) {
     }
   }
 
+  self.confirmNewScript = function () {
+    if (self.isDirty()) {
+      showConfirmModal();
+    }
+    else {
+      self.newScript();
+    }
+  };
+
+  self.confirmScript = function () {
+    if (self.loadingScript != null){
+      self.viewScript(self.loadingScript);
+    }
+    else {
+      self.newScript();
+    }
+  };
+
   self.newScript = function () {
+    self.loadingScript = null;
     self.currentScript(new PigScript(_defaultScript));
+    self.isDirty(false);
+    $("#confirmModal").modal("hide");
     $(document).trigger("loadEditor");
     $(document).trigger("showEditor");
   };
@@ -201,8 +223,21 @@ var PigViewModel = function (props) {
     $(document).trigger("showLogs");
   };
 
+  self.confirmViewScript = function (script) {
+    if (self.isDirty()) {
+      self.loadingScript = script;
+      showConfirmModal();
+    }
+    else {
+      self.viewScript(script);
+    }
+  };
+
   self.viewScript = function (script) {
+    self.loadingScript = null;
     self.currentScript(script);
+    self.isDirty(false);
+    $("#confirmModal").modal("hide");
     $(document).trigger("loadEditor");
     $(document).trigger("showEditor");
   };
@@ -358,6 +393,15 @@ var PigViewModel = function (props) {
     });
   }
 
+  function showConfirmModal() {
+    $("#confirmModal").modal({
+      keyboard: true,
+      show: true
+    });
+  }
+
+
+
   function callSave(script) {
     $(document).trigger("saving");
     $.post(self.SAVE_URL,