group file into folder in select file

index.html

@@ -23,7 +23,7 @@
   <script src="js/libs/jquery-2.2.4.min.js"></script>
   <script src="js/libs/lodash-4.17.3.min.js"></script>
 
-  <script src="js/libs/angular.min.js"></script>
+  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.js"></script>
 
   <script src="js/libs/angularui-bootstrap-tpls.min.js"></script>
   <script src="js/libs/bootstrap-filestyle.js"></script>
@@ -41,6 +41,7 @@
 
   <script src="js/directives/chunkbar.js"></script>
   <script src="js/directives/dgraph.js"></script>
+  <script src="js/directives/fileselect.js"></script>
   <script src="js/directives/fselect.js"></script>
   <script src="js/directives/textarea.js"></script>
 
@@ -1032,30 +1033,33 @@
 
   <!-- {{{ select files checkbox modal -->
 <script type="text/ng-template" id="selectFilesCheckBox.html">
-  <div ng-repeat="(folder,file) in files">
+  <div ng-repeat="(folderName,folder) in files.dirs">
-    <!--is's a folder-->
+    <!--recursive folder-->
-    <div ng-if="!file.index || file.index.toString().indexOf('object') >= 0">
+
-      <div class="controls">
+    <div class="controls">
-        <label class="checkbox">
+      <!--click to toggle show the subfolders and files-->
-          <input type="checkbox"/>{{folder}}
+      <div class="checkbox" data-ng-click="folder.show=!folder.show">
-        </label>
+        <!-- The value of indeterminate="" can be bound to any angular expression -->
-        <div class="form-group selectFiles" ng-include="'selectFilesCheckBox.html'" ng-init="files=file">
+        <input type="checkbox" ng-model="folder.selected" data-ng-click="$event.stopPropagation()" indeterminate="true"/>{{folderName}}
-        </div>
+        <span ng-show="!folder.show" class="control-label">{{ 'click the text to expand the folder' | translate }}</span>
+        <span ng-show="folder.show" class="control-label">{{ 'click the text to collapse the folder' | translate }}</span>
+      </div>
+      <div ng-show="folder.show" class="form-group selectFiles" ng-include="'selectFilesCheckBox.html'" ng-init="files=folder">
       </div>
     </div>
+  </div>
 
-    <!--is's a file-->
+  <div ng-repeat="file in files.files">
-    <div ng-if="file.index && file.index.toString().indexOf('object') < 0">
+    <!--files-->
-      <label class="control-label">{{ 'Select to download' | translate }}</label>
+    <label class="control-label">{{ 'Select to download' | translate }}</label>
 
-      <div class="controls">
+    <div class="controls">
-        <label class="checkbox">
+      <label class="checkbox">
-          <input type="checkbox" ng-model="file.selected"/>{{file.relpath}}
+        <input type="checkbox" ng-model="file.selected"/>{{file.relpath}}
-        </label>
+      </label>
-      </div>
-      <br/>
-      <br/>
     </div>
+    <br/>
+    <br/>
   </div>
 </script>
 <!-- }}} -->

js/ctrls/modal.js

@@ -113,23 +113,60 @@ angular
       var self = this;
 
 	  this.files = _.cloneDeep(files);
-      var groupFile = function (files) {
+      var groupFiles = function (files) {
-          var i, j, str, arr, folder = {}, tmp = folder;
+          var createSubFolder = function () {
-          for (i = 0; i < files.length; i++) {
+              var folder = {
-              str = files[i].relpath;
+                  dirs      : {},
-              arr = str.split("/");
+                  files     : {},
-              for (j = 0; j < arr.length - 1; j++) {
+                  show      : false,
-                  if (!tmp[arr[j]]) {
+                  _selected : false,
-                      tmp[arr[j]] = {};
+                  change    : function () {
+                      for (var file in this.files) {
+                          if (this.files.hasOwnProperty(file)) {
+                              this.files[file].selected = this.selected;
+                          }
+                      }
+                      for (var folder in this.dirs) {
+                          if (this.dirs.hasOwnProperty(folder)) {
+                              this.dirs[folder].selected = this.selected;
+                          }
+                      }
+                      console.log(this);
                   }
-                  tmp = tmp[arr[j]];
+              };
-              }
+              Object.defineProperty(folder, "selected", {
-              tmp[arr[arr.length - 1]] = files[i];
+                  get : function () {
+                      return this._selected;
+                  },
+                  set : function (newValue) {
+                      this._selected = newValue;
+                      this.change();
+                  }
+              });
+              Object.defineProperty(folder, "indeterminate", {
+                  get : function () {
+                      return this._selected;
+                  }
+              });
+              return folder;
+          };
+          var folder = createSubFolder(),
+              tmp;
+          for (var i = 0; i < files.length; i++) {
               tmp = folder;
+              var str = files[i].relpath;
+              var arr = str.split("/");
+              for (var j = 0; j < arr.length - 1; j++) {
+                  if (!tmp.dirs[arr[j]]) {
+                      tmp.dirs[arr[j]] = createSubFolder();
+                  }
+                  tmp = tmp.dirs[arr[j]];
+              }
+              tmp.files[arr[arr.length - 1]] = files[i];
           }
           return folder;
       };
-      this.groupedFiles = groupFile(this.files);
+      this.groupedFiles = groupFiles(this.files);
       this.inst = $modal.open({
         templateUrl: "selectFiles.html",
         scope: scope,

js/directives/fileselect.js

@@ -0,0 +1,21 @@
+// watches changes in the file upload control (input[file]) and
+// puts the files selected in an attribute
+angular.module("webui.directives.fileselect", []).directive("indeterminate", function () {
+    return {
+        // Restrict the directive so it can only be used as an attribute
+        restrict : "A",
+
+        link : function link (scope, elem, attr) {
+            // Whenever the bound value of the attribute changes we update
+            // the internal 'indeterminate' flag on the attached dom element
+            var watcher = scope.$watch(attr.indeterminate, function (value) {
+                elem[0].indeterminate = value;
+            });
+
+            // Remove the watcher when the directive is destroyed
+            scope.$on("$destroy", function () {
+                watcher();
+            });
+        }
+    };
+});

js/init.js

@@ -4,7 +4,7 @@ var webui = angular.module('webui', [
   'webui.services.modals', 'webui.services.alerts',
   'webui.services.settings', 'webui.services.settings.filters',
   'webui.filters.bytes','webui.filters.url',
-  'webui.directives.chunkbar', 'webui.directives.dgraph', 'webui.directives.fselect',
+  'webui.directives.chunkbar', 'webui.directives.dgraph', 'webui.directives.fselect', "webui.directives.fileselect",
   'webui.ctrls.download', 'webui.ctrls.nav', 'webui.ctrls.modal', 'webui.ctrls.alert',
   'webui.ctrls.props',
   // external deps