Add file removal functionality

src/filemanager.html

@@ -53,6 +53,25 @@
 
   <a class="offline-banner animateMe" ng-show="client.offline" ng-cloak href="https://cloudron.io/documentation/troubleshooting/" target="_blank"><i class="fa fa-circle-notch fa-spin"></i> Cloudron is offline. Reconnecting...</a>
 
+  <!-- Modal remove entry -->
+  <div class="modal fade" id="entryRemoveModal" tabindex="-1" role="dialog">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">Delete {{ entryRemove.entry.fileName }}</h4>
+        </div>
+        <div class="modal-body">
+          <p class="text-bold text-danger" ng-show="entryRemove.error">{{ entryRemove.error }}</p>
+          <p ng-hide="entryRemove.error">After deletion, the user will not be able to access the dashboard or login to any of the apps. Note that any user data inside the apps is not removed.</p>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          <button type="button" class="btn btn-danger" ng-click="entryRemove.submit()" ng-hide="entryRemove.error" ng-disabled="entryRemove.busy"><i class="fa fa-circle-notch fa-spin" ng-show="entryRemove.busy"></i> Delete</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <div class="main-container animateMe ng-hide " ng-show="initialized">
     <br/>
     <div class="row">
@@ -83,7 +102,7 @@
               </tr>
             </thead>
             <tbody>
-              <tr ng-disabled="cwd === '/'">
+              <tr ng-hide="cwd === '/'">
                 <td><i class="fas fa-level-up-alt"></i></td>
                 <td class="hand elide-table-cell" ng-click="goDirectoryUp()">Up</td>
                 <td class="text-right no-wrap" style="vertical-align: bottom"></td>
@@ -99,7 +118,7 @@
               <td class="hand elide-table-cell" ng-click="open(entry)">{{ entry.size | prettyDiskSize }}</td>
                 <td class="hand elide-table-cell" ng-click="open(entry)">{{ entry.uid | prettyOwner }}</td>
                 <td class="text-right no-wrap" style="vertical-align: bottom">
-                  <button class="btn btn-xs btn-danger" ng-click="remove(entry)"><i class="far fa-trash-alt"></i></button>
+                  <button class="btn btn-xs btn-danger" ng-click="entryRemove.show(entry)"><i class="far fa-trash-alt"></i></button>
                 </td>
               </tr>
             </tbody>

src/js/client.js

@@ -2394,6 +2394,15 @@ angular.module('Application').service('Client', ['$http', '$interval', '$timeout
         });
     };
 
+    Client.prototype.filesRemove = function (appId, path, callback) {
+        del('/api/v1/apps/' + appId + '/files/' + path, null, function (error, data, status) {
+            if (error) return callback(error);
+            if (status !== 200) return callback(new ClientError(status, data));
+
+            callback(null, data);
+        });
+    };
+
     client = new Client();
     return client;
 }]);

src/js/filemanager.js

@@ -1,6 +1,6 @@
 'use strict';
 
-/* global angular */
+/* global angular, $ */
 
 // create main application module
 var app = angular.module('Application', ['angular-md5', 'ui-notification']);
@@ -55,20 +55,22 @@ app.controller('FileManagerController', ['$scope', 'Client', function ($scope, C
         console.log('uploadFolder');
     };
 
-    $scope.remove = function (entry) {
-        console.log('remove', entry);
-    };
-
     $scope.open = function (entry) {
+        var filePath = sanitize($scope.cwd + '/' + entry.filePath);
+
         if (entry.isDirectory) {
-            setDirectory($scope.cwd + '/' + entry.filePath);
+            setDirectory(filePath);
         } else if (entry.isFile) {
-            console.log('open', entry)
+            Client.filesGet($scope.appId, filePath, function (error, result) {
+                if (error) return Client.error(error);
+
+                console.log('open', result);
+            });
         } else {}
     };
 
     $scope.goDirectoryUp = function () {
-        setDirectory($scope.cwd + '/..')
+        setDirectory($scope.cwd + '/..');
     };
 
     function setDirectory(path) {
@@ -80,6 +82,36 @@ app.controller('FileManagerController', ['$scope', 'Client', function ($scope, C
         $scope.refresh();
     }
 
+    $scope.entryRemove = {
+        busy: false,
+        error: null,
+        entry: {},
+
+        show: function (entry) {
+            $scope.entryRemove.error = null;
+            $scope.entryRemove.entry = entry;
+
+            $('#entryRemoveModal').modal('show');
+        },
+
+        submit: function () {
+            $scope.entryRemove.busy = true;
+
+            var filePath = sanitize($scope.cwd + '/' + $scope.entryRemove.entry.filePath);
+
+            Client.filesRemove($scope.appId, filePath, function (error, result) {
+                $scope.entryRemove.busy = false;
+                if (error) return Client.error(error);
+
+                console.log('remove', result);
+
+                $scope.refresh();
+
+                $('#entryRemoveModal').modal('hide');
+            });
+        }
+    };
+
     function init() {
 
         Client.getStatus(function (error, status) {