Add event to close popover when clicking on select icon. (#1741)

* Add tools service and unit test. * Fix bug due to duplicate module names. * Fix service name to reflect api. * Rename module for clarity. * Seperate and rename module for clarity. * Fix group index bug. * Fix indexing. * Add generate list config. * Launch visualization tool. * Add template generator helper function. * Launch config tested for simple tools. * Update unit test. * Remove empty sets helper method. * Add generate template unit test. * Refactor and add additional unit test. * Add postToolLaunch unit test. * Update API to accept a str instead a str of str uuids. * Add unit tests for generating file str. * Add insert comma method and update unit test. * Remove unused attribute. * Update indices name for clarity. * Remove unneccessary code. * Add comments. * Fix edge case by generating correct size template. * Add comments. * Update index name for clarity. * Update description. * Refactor. * Add comments. * Replace method with underscore method. * Rename for clarity. * Add inner nav directive for popover. * Adjust css. * Add unit tests. * Add validation method. * Add validation method. * Add unit tests. * Remove unneccessary group info. * Add color data obj for input file types. * Update input-group in ctrl panel. * Sync up input file type colors. * Fix nav bug due to incorrect length. * Update unit test. * Update unit tests. * Add edge case for 1 type deep tools. * Fix missing style. * Add event to close popover when clicking on select icon. * Add comments. * Remove extra line space.
refinery-platform · May 23, 2017 · bb09f29 · bb09f29
1 parent 579fbf7
commit bb09f29
Show file tree

Hide file tree

Showing 2 changed files with 94 additions and 89 deletions.
diff --git a/refinery/ui/source/js/file-browser/ctrls/ctrl.js b/refinery/ui/source/js/file-browser/ctrls/ctrl.js
@@ -244,10 +244,16 @@
      * @param nodeUuid
      */
     function openSelectionPopover (nodeRow) {
-      angular.copy(nodeRow, nodesService.activeNodeRow);
-      vm.activeNodeRow = nodesService.activeNodeRow;
-      angular.element('#' + nodeRow.uuid).popover('show');
-      angular.element('.ui-grid-selection-row-header-buttons').popover('disable');
+      if (_.isEmpty(nodesService.activeNodeRow)) {
+        // active nodes are cleared after popovers are closed
+        angular.copy(nodeRow, nodesService.activeNodeRow);
+        vm.activeNodeRow = nodesService.activeNodeRow;
+        angular.element('#' + nodeRow.uuid).popover('show');
+        angular.element('.ui-grid-selection-row-header-buttons').popover('disable');
+      } else {
+        // user selects a different row, triggers closing all open popovers
+        fileService.hideNodePopover = true;
+      }
     }
 
     /**

diff --git a/refinery/ui/source/js/file-browser/partials/node-selection-popover-detail.html b/refinery/ui/source/js/file-browser/partials/node-selection-popover-detail.html
@@ -1,97 +1,96 @@
-<div id="node-selection-popover">
-  <div class="node-input-group">
-    <ul>
-      <form name="inputNodeForm">
-        <div ng-if="NSPCtrl.currentTypes[NSPCtrl.currentTypes.length - 1]=='PAIR'">
-          <li
-            ng-repeat="inputType in NSPCtrl.inputFileTypes track by $index"
-            ng-style="{'color': NSPCtrl.inputFileTypeColor[inputType.uuid],
-            'border-color': NSPCtrl.inputFileTypeColor[inputType.uuid]}">
-            <div class="checkbox">
-              <label>
-                <!-- Deselect: user can currently deselect any node in the current group-->
-                <span
-                  ng-if="NSPCtrl.groupCollection[NSPCtrl.currentGroup] &&
-                  NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid].length > 0"
-                  class="wrap-word">
-                    <span ng-repeat="selectedFile in NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid]">
-                      <input
-                        type="checkbox"
-                        ng-click="NSPCtrl.selectNode(inputType.uuid, selectedFile.uuid)"
-                        ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][inputType.uuid][selectedFile.uuid]">
-                       {{ selectedFile[NSPCtrl.attributes.Name] }}
-                    </span>
+<div class="node-input-group">
+  <ul>
+    <form name="inputNodeForm">
+      <div ng-if="NSPCtrl.currentTypes[NSPCtrl.currentTypes.length-1]=='PAIR'">
+        <li
+          ng-repeat="inputType in NSPCtrl.inputFileTypes track by $index"
+          ng-style="{'color': NSPCtrl.inputFileTypeColor[inputType.uuid],
+          'border-color': NSPCtrl.inputFileTypeColor[inputType.uuid]}">
+          <div class="checkbox">
+            <label>
+              <!-- Deselect: user can currently deselect any node in the current group-->
+              <span
+                ng-if="NSPCtrl.groupCollection[NSPCtrl.currentGroup] &&
+                NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid].length > 0"
+                class="wrap-word">
+                  <span ng-repeat="selectedFile in NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid]">
+                    <input
+                      type="checkbox"
+                      ng-click="NSPCtrl.selectNode(inputType.uuid, selectedFile.uuid)"
+                      ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][inputType.uuid][selectedFile.uuid]">
+                     {{ selectedFile[NSPCtrl.attributes.Name] }}
                   </span>
-                <!-- Select: If there's NOT a group already started for the inputFileType than checkbox not selected-->
-                <span
-                  ng-if="!NSPCtrl.groupCollection[NSPCtrl.currentGroup] ||
-                  !NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid] ||
-                  NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid].length == 0">
-                  <input
-                    type="checkbox"
-                    ng-click="NSPCtrl.selectNode(inputType.uuid)"
-                    ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][inputType.uuid][NSPCtrl.activeNode.uuid]">
-                  {{ inputType.name }}
                 </span>
-              </label>
-            </div>
-          </li>
-        </div>
+              <!-- Select: If there's NOT a group already started for the inputFileType than checkbox not selected-->
+              <span
+                ng-if="!NSPCtrl.groupCollection[NSPCtrl.currentGroup] ||
+                !NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid] ||
+                NSPCtrl.groupCollection[NSPCtrl.currentGroup][inputType.uuid].length == 0">
+                <input
+                  type="checkbox"
+                  ng-click="NSPCtrl.selectNode(inputType.uuid)"
+                  ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][inputType.uuid][NSPCtrl.activeNode.uuid]">
+                {{ inputType.name }}
+              </span>
+            </label>
+          </div>
+        </li>
+      </div>
+
 
-        <div ng-if="NSPCtrl.currentTypes[NSPCtrl.currentTypes.length - 1]=='LIST'">
-           <li
-             ng-style="{'color': NSPCtrl.inputFileTypeColor[NSPCtrl.inputFileTypes[0].uuid],
-            'border-color': NSPCtrl.inputFileTypeColor[NSPCtrl.inputFileTypes[0].uuid]}">
-            <span>
-              <!-- active row selection, for list is always showing -->
+      <div ng-if="NSPCtrl.currentTypes[NSPCtrl.currentTypes.length-1]=='LIST'">
+         <li
+           ng-style="{'color': NSPCtrl.inputFileTypeColor[NSPCtrl.inputFileTypes[0].uuid],
+          'border-color': NSPCtrl.inputFileTypeColor[NSPCtrl.inputFileTypes[0].uuid]}">
+          <span>
+            <!-- active row selection, for list is always showing -->
+            <div class="checkbox">
+              <label>
+                <input
+                  type="checkbox"
+                  ng-click="NSPCtrl.selectNode(NSPCtrl.inputFileTypes[0].uuid)"
+                  ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid][NSPCtrl.activeNode.uuid]">
+                {{ NSPCtrl.inputFileTypes[0].name }}
+              </label>
+          </span>
+         <!-- Select/Deselect nodes in the list -->
+          <span
+            ng-if="NSPCtrl.groupCollection[NSPCtrl.currentGroup] &&
+            NSPCtrl.groupCollection[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid].length > 0">
+            {{ inputType.uuid }}
+            <div ng-repeat="selectedFile in NSPCtrl.groupCollection[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid]">
               <div class="checkbox">
-                <label>
+                <label class="wrap-word">
                   <input
                     type="checkbox"
-                    ng-click="NSPCtrl.selectNode(NSPCtrl.inputFileTypes[0].uuid)"
-                    ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid][NSPCtrl.activeNode.uuid]">
-                  {{ NSPCtrl.inputFileTypes[0].name }}
+                    ng-click="NSPCtrl.selectNode(NSPCtrl.inputFileTypes[0].uuid, selectedFile.uuid)"
+                    ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid][selectedFile.uuid]">
+                 {{ selectedFile[NSPCtrl.attributes.Name] }}
                 </label>
-            </span>
-           <!-- Select/Deselect nodes in the list -->
-            <span
-              ng-if="NSPCtrl.groupCollection[NSPCtrl.currentGroup] &&
-              NSPCtrl.groupCollection[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid].length > 0">
-              {{ inputType.uuid }}
-              <div ng-repeat="selectedFile in NSPCtrl.groupCollection[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid]">
-                <div class="checkbox">
-                  <label class="wrap-word">
-                    <input
-                      type="checkbox"
-                      ng-click="NSPCtrl.selectNode(NSPCtrl.inputFileTypes[0].uuid, selectedFile.uuid)"
-                      ng-model="NSPCtrl.selectionObj[NSPCtrl.currentGroup][NSPCtrl.inputFileTypes[0].uuid][selectedFile.uuid]">
-                   {{ selectedFile[NSPCtrl.attributes.Name] }}
-                  </label>
-                </div>
               </div>
-            </span>
-          </li>
-        </div>
-      </form>
-    </ul>
-  </div>
-  <div>
-    <span ng-if="NSPCtrl.currentTypes.length > 1">
-      <div class="refinery-subheader">
-        <h4>
-           <!-- Checking the type containing the inner most, ['PAIR', 'LIST] -->
-          {{ NSPCtrl.currentTypes[NSPCtrl.currentTypes.length - 2] }} Nav:
-          Group {{ NSPCtrl.currentGroup[NSPCtrl.currentGroup.length - 1] + 1 }}
-        </h4>
+            </div>
+          </span>
+        </li>
       </div>
-      <rp-input-control-inner-nav></rp-input-control-inner-nav>
-    </span>
-    <div class="p-t-1 text-right">
-      <button
-        class="refinery-base btn btn-default btn-xs"
-        ng-click="closeSelectionPopover()">
-        Close
-      </button>
+    </form>
+  </ul>
+</div>
+<div>
+  <span ng-if="NSPCtrl.currentTypes.length > 1">
+    <div class="refinery-subheader">
+      <h4>
+        {{ NSPCtrl.currentTypes[NSPCtrl.currentTypes.length - 2] }} Nav:
+        Group {{ NSPCtrl.currentGroup[NSPCtrl.currentGroup.length - 1] + 1 }}
+      </h4>
     </div>
+    <rp-input-control-inner-nav></rp-input-control-inner-nav>
+  </span>
+  <div class="p-t-1 text-right">
+    <button
+      class="refinery-base btn btn-default btn-xs"
+      ng-click="closeSelectionPopover()">
+      Close
+    </button>
   </div>
 </div>
+