all: Display list of locally changed items in UI (fixes #5336) (#5337)

gui/default/syncthing/core/syncthingController.js

@@ -46,6 +46,7 @@ angular.module('syncthing.core')
         $scope.neededCurrentPage = 1;
         $scope.neededPageSize = 10;
         $scope.failed = {};
+        $scope.localChanged = {};
         $scope.scanProgress = {};
         $scope.themes = [];
         $scope.globalChangeEvents = {};
@@ -672,6 +673,15 @@ angular.module('syncthing.core')
             });
         };
 
+        $scope.refreshLocalChanged = function (page, perpage) {
+            var url = urlbase + '/db/localchanged?folder=';
+            url += encodeURIComponent($scope.localChanged.folder);
+            url += "&page=" + page + "&perpage=" + perpage;
+            $http.get(url).success(function (data) {
+                $scope.localChanged = data;
+            }).error($scope.emitHTTPError);
+        };
+
         var refreshDeviceStats = debounce(function () {
             $http.get(urlbase + "/stats/device").success(function (data) {
                 $scope.deviceStats = data;
@@ -737,7 +747,7 @@ angular.module('syncthing.core')
             if (state === 'error') {
                 return 'stopped'; // legacy, the state is called "stopped" in the GUI
             }
-            if (state === 'idle' && $scope.neededItems(folderCfg.id) > 0) {
+            if (state === 'idle' && $scope.model[folderCfg.id].needTotalItems > 0) {
                 return 'outofsync';
             }
             if (state === 'scanning') {
@@ -776,15 +786,6 @@ angular.module('syncthing.core')
             return 'info';
         };
 
-        $scope.neededItems = function (folderID) {
-            if (!$scope.model[folderID]) {
-                return 0
-            }
-
-            return $scope.model[folderID].needFiles + $scope.model[folderID].needDirectories +
-                $scope.model[folderID].needSymlinks + $scope.model[folderID].needDeletes;
-        };
-
         $scope.syncPercentage = function (folder) {
             if (typeof $scope.model[folder] === 'undefined') {
                 return 100;
@@ -2194,6 +2195,14 @@ angular.module('syncthing.core')
             $http.post(urlbase + "/db/override?folder=" + encodeURIComponent(folder));
         };
 
+        $scope.showLocalChanged = function (folder) {
+            $scope.localChanged.folder = folder;
+            $scope.localChanged = $scope.refreshLocalChanged(1, 10);
+            $('#localChanged').modal().one('hidden.bs.modal', function () {
+                $scope.localChanged = {};
+            });
+        };
+
         $scope.revert = function (folder) {
             $http.post(urlbase + "/db/revert?folder=" + encodeURIComponent(folder));
         };
@@ -2203,11 +2212,7 @@ angular.module('syncthing.core')
             if (!f) {
                 return false;
             }
-            return f.receiveOnlyChangedBytes > 0 ||
-                f.receiveOnlyChangedDeletes > 0 ||
-                f.receiveOnlyChangedDirectories > 0 ||
-                f.receiveOnlyChangedFiles > 0 ||
-                f.receiveOnlyChangedSymlinks > 0;
+            return $scope.model[folder].receiveOnlyTotalItems > 0;
         };
 
         $scope.advanced = function () {

gui/default/syncthing/transfer/localChangedFilesModalView.html

@@ -0,0 +1,31 @@
+<modal id="localChanged" status="info" icon="fas fa-exclamation-circle" heading="{{'Locally Changed Items' | translate}}" large="yes" closeable="yes">
+  <div class="modal-body">
+    <p translate>
+      The following items were changed locally.
+    </p>
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th translate>Path</th>
+          <th translate>Size</th>
+        </tr>
+      </thead>
+      <tr dir-paginate="file in localChanged.files | itemsPerPage: localChanged.perpage" current-page="localChanged.page" total-items="model[localChanged.folder].receiveOnlyTotalItems" pagination-id="localChanged">
+        <td>{{file.name}}</td>
+        <td><span ng-hide="file.type == 'DIRECTORY'">{{file.size | binary}}B</span></td>
+      </tr>
+    </table>
+    <dir-pagination-controls on-page-change="refreshLocalChanged(newPageNumber, localChanged.perpage)" pagination-id="localChanged"></dir-pagination-controls>
+    <ul class="pagination pull-right">
+      <li ng-repeat="option in [10, 25, 50]" ng-class="{ active: localChanged.page == option }">
+        <a href="#" ng-click="refreshLocalChanged(localChanged.page, option)">{{option}}</a>
+      </li>
+    </ul>
+    <div class="clearfix"></div>
+  </div>
+  <div class="modal-footer">
+    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
+      <span class="fas fa-times"></span>&nbsp;<span translate>Close</span>
+    </button>
+  </div>
+</modal>

gui/default/syncthing/transfer/neededFilesModalView.html

@@ -14,7 +14,7 @@
 
     <table class="table table-striped table-condensed">
 
-      <tr dir-paginate="f in needed | itemsPerPage: neededPageSize" current-page="neededCurrentPage" total-items="neededItems(neededFolder)" pagination-id="needed">
+      <tr dir-paginate="f in needed | itemsPerPage: neededPageSize" current-page="neededCurrentPage" total-items="model[neededFolder].needTotalItems" pagination-id="needed">
 
         <!-- Icon -->
         <td class="small-data col-xs-2">