gui: Split folders into two categories on the sharing tab for devices (#7162)

gui/default/syncthing/core/syncthingController.js

@@ -1430,32 +1430,28 @@ angular.module('syncthing.core')
             }
             $scope.currentDevice._addressesStr = deviceCfg.addresses.join(', ');
             initShareEditing('device');
-            $scope.currentSharing.selected = {};
-            $scope.deviceFolders($scope.currentDevice).forEach(function (folder) {
-                $scope.currentSharing.selected[folder] = true;
+            $scope.deviceFolders($scope.currentDevice).forEach(function (folderID) {
+                $scope.currentSharing.shared.push($scope.folders[folderID]);
+                $scope.currentSharing.selected[folderID] = true;
+            });
+            $scope.currentSharing.unrelated = $scope.folderList().filter(function (n) {
+                return !$scope.currentSharing.selected[n.id];
             });
             $scope.deviceEditor.$setPristine();
             $('#editDevice').modal();
         };
 
-        $scope.selectAllFolders = function (state) {
-            var folders = $scope.folders;
-            for (var id in folders) {
-                $scope.currentSharing.selected[id] = !!state;
-            };
-        };
-
         $scope.selectAllSharedFolders = function (state) {
-            var devices = $scope.currentSharing.shared;
-            for (var i = 0; i < devices.length; i++) {
-                $scope.currentSharing.selected[devices[i].deviceID] = !!state;
+            var folders = $scope.currentSharing.shared;
+            for (var i = 0; i < folders.length; i++) {
+                $scope.currentSharing.selected[folders[i].id] = !!state;
             }
         };
 
         $scope.selectAllUnrelatedFolders = function (state) {
-            var devices = $scope.currentSharing.unrelated;
-            for (var i = 0; i < devices.length; i++) {
-                $scope.currentSharing.selected[devices[i].deviceID] = !!state;
+            var folders = $scope.currentSharing.unrelated;
+            for (var i = 0; i < folders.length; i++) {
+                $scope.currentSharing.selected[folders[i].id] = !!state;
             }
         };
 
@@ -1485,6 +1481,7 @@ angular.module('syncthing.core')
                     };
                     $scope.editingExisting = false;
                     initShareEditing('device');
+                    $scope.currentSharing.unrelated = $scope.folderList();
                     $scope.deviceEditor.$setPristine();
                     $('#editDevice').modal();
                 });
@@ -1533,17 +1530,22 @@ angular.module('syncthing.core')
                     }
 
                     if (!found) {
+                        // Add device to folder
                         $scope.folders[id].devices.push({
                             deviceID: deviceCfg.deviceID
                         });
                     }
                 } else {
+                    // Remove device from folder
                     $scope.folders[id].devices = $scope.folders[id].devices.filter(function (n) {
                         return n.deviceID !== deviceCfg.deviceID;
                     });
                 }
             }
 
+            delete $scope.currentSharing;
+
+            $scope.config.folders = folderList($scope.folders);
             $scope.saveConfig();
         };
 

gui/default/syncthing/device/editDeviceModalView.html

@@ -65,15 +65,38 @@
           </div>
           <div class="row">
             <div class="col-md-12">
-              <div class="form-group">
-                <label translate for="folders">Share Folders With Device</label>
+              <div class="form-group" ng-if="currentSharing.shared.length">
+                <label translate for="folders">Shared Folders</label>
                 <p class="help-block">
-                  <span translate>Select the folders to share with this device.</span>&emsp;
-                  <small><a href="#" ng-click="selectAllFolders(true)" translate>Select All</a>&emsp;
-                    <a href="#" ng-click="selectAllFolders(false)" translate>Deselect All</a></small>
+                  <span translate>Deselect folders to stop sharing with this device.</span>&emsp;
+                  <small><a href="#" ng-click="selectAllSharedFolders(true)" translate>Select All</a>&emsp;
+                    <a href="#" ng-click="selectAllSharedFolders(false)" translate>Deselect All</a></small>
+                </p>
+                <div class="row">
+                  <div class="col-md-4" ng-repeat="folder in currentSharing.shared">
+                    <div class="checkbox">
+                      <label ng-if="folder.label.length == 0">
+                        <input type="checkbox" ng-model="currentSharing.selected[folder.id]" />&nbsp;{{folder.id}}
+                      </label>
+                      <label ng-if="folder.label.length != 0">
+                        <input type="checkbox" ng-model="currentSharing.selected[folder.id]" />&nbsp; <span tooltip data-original-title="{{folder.id}}">{{folder.label}}</span>
+                      </label>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="form-group" ng-if="currentSharing.unrelated.length || folderList().length == 0">
+                <label translate for="folders">Unshared Folders</label>
+                <p class="help-block" ng-if="folderList().length > 0">
+                  <span translate>Select additional folders to share with this device.</span>&emsp;
+                  <small><a href="#" ng-click="selectAllUnrelatedFolders(true)" translate>Select All</a>&emsp;
+                    <a href="#" ng-click="selectAllUnrelatedFolders(false)" translate>Deselect All</a></small>
+                </p>
+                <p class="help-block" ng-if="folderList().length == 0">
+                  <span translate>There are no folders to share with this device.</span>
                 </p>
                 <div class="row">
-                  <div class="col-md-4" ng-repeat="folder in folderList()">
+                  <div class="col-md-4" ng-repeat="folder in currentSharing.unrelated">
                     <div class="checkbox">
                       <label ng-if="folder.label.length == 0">
                         <input type="checkbox" ng-model="currentSharing.selected[folder.id]">&nbsp;{{folder.id}}

gui/default/untrusted/syncthing/core/syncthingController.js

@@ -1433,40 +1433,36 @@ angular.module('syncthing.core')
                 }
             }
             $scope.currentDevice._addressesStr = deviceCfg.addresses.join(', ');
-
             initShareEditing('device');
-            for (var folderID in $scope.folders) {
-                var found = false;
-                for (var i = 0; i < $scope.folders[folderID].devices.length; i++) {
-                    if ($scope.folders[folderID].devices[i].deviceID === deviceCfg.deviceID) {
-                        found = true;
+            $scope.deviceFolders($scope.currentDevice).forEach(function (folderID) {
+                $scope.currentSharing.shared.push($scope.folders[folderID]);
+                $scope.currentSharing.selected[folderID] = true;
+                var folderdevices = $scope.folders[folderID].devices;
+                for (var i = 0; i < folderdevices.length; i++) {
+                    if (folderdevices[i].deviceID === deviceCfg.deviceID) {
+                        $scope.currentSharing.encryptionPasswords[folderID] = folderdevices[i].encryptionPassword;
                         break;
                     }
                 }
-                if (found) {
-                    $scope.currentSharing.encryptionPasswords[folderID] = $scope.folders[folderID].devices[i].encryptionPassword;
-                    $scope.currentSharing.shared.push($scope.folders[folderID]);
-                } else {
-                    $scope.currentSharing.unrelated.push($scope.folders[folderID]);
-                }
-                $scope.currentSharing.selected[folderID] = found;
-            }
-
+            });
+            $scope.currentSharing.unrelated = $scope.folderList().filter(function (n) {
+                return !$scope.currentSharing.selected[n.id];
+            });
             $scope.deviceEditor.$setPristine();
             $('#editDevice').modal();
         };
 
         $scope.selectAllSharedFolders = function (state) {
-            var devices = $scope.currentSharing.shared;
-            for (var i = 0; i < devices.length; i++) {
-                $scope.currentSharing.selected[devices[i].deviceID] = !!state;
+            var folders = $scope.currentSharing.shared;
+            for (var i = 0; i < folders.length; i++) {
+                $scope.currentSharing.selected[folders[i].id] = !!state;
             }
         };
 
         $scope.selectAllUnrelatedFolders = function (state) {
-            var devices = $scope.currentSharing.unrelated;
-            for (var i = 0; i < devices.length; i++) {
-                $scope.currentSharing.selected[devices[i].deviceID] = !!state;
+            var folders = $scope.currentSharing.unrelated;
+            for (var i = 0; i < folders.length; i++) {
+                $scope.currentSharing.selected[folders[i].id] = !!state;
             }
         };
 
@@ -1496,6 +1492,7 @@ angular.module('syncthing.core')
                     };
                     $scope.editingExisting = false;
                     initShareEditing('device');
+                    $scope.currentSharing.unrelated = $scope.folderList();
                     $scope.deviceEditor.$setPristine();
                     $('#editDevice').modal();
                 });
@@ -1533,36 +1530,36 @@ angular.module('syncthing.core')
             $scope.devices[deviceCfg.deviceID] = deviceCfg;
             $scope.config.devices = deviceList($scope.devices);
 
-            $scope.currentSharing.shared.forEach(function (folder) {
-                var id = folder.id;
-                if ($scope.currentSharing.selected[id] !== true) {
+            for (var id in $scope.currentSharing.selected) {
+                if ($scope.currentSharing.selected[id]) {
+                    var found = false;
+                    for (i = 0; i < $scope.folders[id].devices.length; i++) {
+                        if ($scope.folders[id].devices[i].deviceID === deviceCfg.deviceID) {
+                            found = true;
+                            // Update encryption pw
+                            $scope.folders[id].devices[i].encryptionPassword = $scope.currentSharing.encryptionPasswords[id];
+                            break;
+                        }
+                    }
+
+                    if (!found) {
+                        // Add device to folder
+                        $scope.folders[id].devices.push({
+                            deviceID: deviceCfg.deviceID,
+                            encryptionPassword: $scope.currentSharing.encryptionPasswords[id]
+                        });
+                    }
+                } else {
                     // Remove device from folder
                     $scope.folders[id].devices = $scope.folders[id].devices.filter(function (n) {
                         return n.deviceID !== deviceCfg.deviceID;
                     });
-                    return;
                 }
-                // Update encryption pw
-                for (i = 0; i < $scope.folders[id].devices.length; i++) {
-                    if ($scope.folders[id].devices[i].deviceID === deviceCfg.deviceID) {
-                        $scope.folders[id].devices[i].encryptionPassword = $scope.currentSharing.encryptionPasswords[id];
-                        break;
-                    }
-                }
-            });
-            $scope.currentSharing.unrelated.forEach(function (folder) {
-                if ($scope.currentSharing.selected[folder.id] === true) {
-                    $scope.folders[folder.id].devices.push({
-                        deviceID: deviceCfg.deviceID,
-                        encryptionPassword: $scope.currentSharing.encryptionPasswords[folder.id],
-                    });
-                }
-            });
+            }
 
             delete $scope.currentSharing;
 
             $scope.config.folders = folderList($scope.folders);
-
             $scope.saveConfig();
         };
 
@@ -1981,8 +1978,8 @@ angular.module('syncthing.core')
             // Bump time
             pendingFolder.time = (new Date()).toISOString();
 
-            if (id in $scope.devices) {
-                $scope.devices[id].ignoredFolders.push(pendingFolder);
+            if (device in $scope.devices) {
+                $scope.devices[device].ignoredFolders.push(pendingFolder);
                 $scope.saveConfig();
             }
         };

gui/default/untrusted/syncthing/device/editDeviceModalView.html

@@ -67,7 +67,7 @@
             <div class="form-horizontal" ng-if="currentSharing.shared.length">
               <label translate for="folders">Shared Folders</label>
               <p class="help-block">
-                <span translate>Select the folders to share with this device.</span>&emsp;
+                <span translate>Deselect folders to stop sharing with this device.</span>&emsp;
                 <small><a href="#" ng-click="selectAllSharedFolders(true)" translate>Select All</a>&emsp;
                   <a href="#" ng-click="selectAllSharedFolders(false)" translate>Deselect All</a></small>
               </p>
@@ -76,12 +76,15 @@
               </div>
             </div>
             <div class="form-horizontal" ng-if="currentSharing.unrelated.length">
-              <label translate>Unshared Folders</label>
-              <p class="help-block">
+              <label translate for="folders">Unshared Folders</label>
+              <p class="help-block" ng-if="folderList().length > 0">
                 <span translate>Select additional folders to share with this device.</span>&emsp;
                 <small><a href="#" ng-click="selectAllUnrelatedFolders(true)" translate>Select All</a>&emsp;
                   <a href="#" ng-click="selectAllUnrelatedFolders(false)" translate>Deselect All</a></small>
               </p>
+              <p class="help-block" ng-if="folderList().length == 0">
+                <span translate>There are no folders to share with this device.</span>
+              </p>
               <div class="form-group" ng-repeat="folder in currentSharing.unrelated">
                 <share-template selected="currentSharing.selected" encryption-passwords="currentSharing.encryptionPasswords" id="{{folder.id}}" label="{{folderLabel(folder.id)}}" folder-type="{{folder.type}}" untrusted="{{currentDevice.untrusted}}" />
               </div>