added diff editor #129, submit button disabled while docker process r…

…equest #132

server/serverpl/filebrowser/static/filebrowser/editor.component.css

@@ -146,11 +146,11 @@ editor {
     max-height: calc(100% - 66px);
     overflow: hidden;
     background-color: #F5F5F5;
-    transition: height .3s;
+    transition: height .1s;
 }
 
 #console .resizer {
-    background: #F5F5F5;
+    background: #ecedf0;
     position: absolute;
     right: 0;
     top: 0;

server/serverpl/filebrowser/static/filebrowser/editor.component.html

@@ -43,11 +43,17 @@
         <div id='console' class='mdl-shadow--1dp border-top'>
         {{editor.consoleHeight}}
             <div id='console__tab' class="editor__tab">
-                <span class='editor__tab-item border-bottom'>Console</span>
+                <span class='editor__tab-item border-bottom'>
+                    Console
+                     <md-tooltip md-direction="top">display informations, errors, warnings, click and drag to open</md-tooltip>
+                </span>
                 <div class="mdl-layout-spacer"></div>     
                 <div class='editor__tab-item' ng-click='editor.clearConsole()'>
                     <md-tooltip md-direction="top">Clear</md-tooltip><i class="fas fa-trash-alt"></i>
                 </div>
+                <div class='editor__tab-item' ng-click='editor.closeConsole()'>
+                    <md-tooltip md-direction="top">Close</md-tooltip><i class="fas fa-times"></i>
+                </div>
             </div>
             <div id='console__content'>
                 <ul>

server/serverpl/filebrowser/static/filebrowser/editor.component.js

@@ -10,12 +10,12 @@ function EditorComponent($scope, EditorService, MonacoService) {
     editor.searchQuery = '';
     editor.searchResult = [];
     editor.searching = false;
-    const consoleNode = angular.element('#console');
+    editor.consoleNode = angular.element('#console');
 
     EditorService.onLogAdded = function() {
-        const height = consoleNode.height();
+        const height = editor.consoleNode.height();
         if (height < 300) {
-            consoleNode.height(400);
+            editor.consoleNode.height(400);
         }
        // $scope.$apply();
     }
@@ -40,6 +40,10 @@ function EditorComponent($scope, EditorService, MonacoService) {
         return editor.selection() && editor.selection().repo;
     }
 
+    editor.closeConsole = function() {
+        editor.consoleNode.height(32);
+    }
+
     editor.clearConsole = function() {
         EditorService.clearLogs();
     }

server/serverpl/filebrowser/static/filebrowser/editor.service.js

@@ -9,6 +9,7 @@ function EditorService($http, $mdDialog) {
     instance.logs = [];
     instance.resources = [];
     instance.onLogAdded;
+
     //#endregion
 
     //#region git
@@ -46,7 +47,7 @@ function EditorService($http, $mdDialog) {
                 instance.runningTask = false;
             }).catch((error) => {
                 instance.runningTask = false;
-                instance.log('<span style="color: red;">Git clone failed: ' + error.data || error + '</span>');
+                instance.logError(error.data || error);
             });
         });
     }
@@ -68,7 +69,7 @@ function EditorService($http, $mdDialog) {
                 instance.runningTask = false;
             }).catch(error => {
                 instance.runningTask = false;
-                instance.log('<span style="color: red;">Git push failed: ' + error.data + '</span>');
+                instance.logError(error.data || error);
             });
         });
     }
@@ -95,7 +96,7 @@ function EditorService($http, $mdDialog) {
                 instance.runningTask = false;
             }).catch(error => {
                 instance.runningTask = false;
-                instance.log('<span style="color: red;">Git pull failed: ' + error.data + '</span>');
+                instance.logError(error.data || error);
             });
         });
     }
@@ -114,7 +115,7 @@ function EditorService($http, $mdDialog) {
             instance.runningTask = false;
         }).catch(error => {
             instance.runningTask = false;
-            instance.log('<span style="color: red;">Git status failed: ' + error.data + '</span>');
+            instance.logError(error.data || error);
         });
     }
 
@@ -132,7 +133,7 @@ function EditorService($http, $mdDialog) {
             instance.runningTask = false;
         }).catch(error => {
             instance.runningTask = false;
-            instance.log('<span style="color: red;">Git add failed: ' + error.data + '</span>');
+            instance.logError(error.data || error);
         });
     }
 
@@ -153,11 +154,11 @@ function EditorService($http, $mdDialog) {
                 instance.runningTask = false;
             }).catch(error => {
                 instance.runningTask = false;
-                instance.log('<span style="color: red;">Git commit failed: ' + error.data + '</span>');
+                instance.logError(error.data || error);
             });
         });
     }
-
+    
     function loadOption(resource) {
         resource['options'] = options.filter(option => {
             for (const predicate of option.filters) {
@@ -230,7 +231,7 @@ function EditorService($http, $mdDialog) {
     }
 
     instance.renameResource = function(resource) {
-        resource.__name__ = document.name;
+        resource.__name__ = resource.name;
         resource.__parent__ = instance.findResource(resource.parent);
         resource.editing = true;
     }
@@ -327,8 +328,8 @@ function EditorService($http, $mdDialog) {
                 recursive_remove(instance.resources);
                 resolve();
             }).catch(error => {
-                instance.log(error.data);
-                reject(error.data);
+                instance.log(error.data || error);
+                reject(error.data || error);
             });
         });
 
@@ -518,6 +519,26 @@ function EditorService($http, $mdDialog) {
         const dotIndex = resource.name.lastIndexOf('.');
         return resource.name.substring(dotIndex + 1);
     }
+
+    instance.showDiff = function(resource) {
+        instance.runningTask = true;
+        return new Promise((resolve, reject) => {
+            $http({
+                method: 'GET',
+                url: 'option',
+                params: {
+                    name: "git_show",
+                    path: resource.path,
+                }
+            }).then(response => {
+                instance.runningTask = false;
+                resolve(response.data);
+            }).catch(error => {
+                instance.runningTask = false;
+                instance.logError(error.data || error);
+            });
+        });
+    }
 
     //#endregion
 
@@ -529,6 +550,12 @@ function EditorService($http, $mdDialog) {
         }
     }
 
+    instance.logError = function(message) {
+        if (typeof(message) == 'object') {
+            message = JSON.stringify(message);
+        }
+        instance.log('<span style="color: red;">' + message + '</span>');
+    }
     instance.clearLogs = function() {
         instance.logs = [];
     }

server/serverpl/filebrowser/static/filebrowser/explorer/explorer.component.js

@@ -10,6 +10,7 @@ angular.module('editor')
 
 function ExplorerComponent(EditorService, MonacoService) {
     const explorer = this;
+
     /** adds new file in the folder 'resource' */
     this.addFile = function (resource, event) {
         event.stopPropagation();
@@ -22,7 +23,7 @@ function ExplorerComponent(EditorService, MonacoService) {
         EditorService.addFolder(resource);
     };
 
-    /** creates or cancels the edition of 'document' depending to 'event' */
+    /** creates or cancels the edition of 'resource' depending to 'event' */
     this.endEditing = function (resource, event) {
         if (event.keyCode === 13) { // enter
             EditorService.createResource(resource).then(() => {
@@ -34,15 +35,15 @@ function ExplorerComponent(EditorService, MonacoService) {
         }
     };
 
-    /** checks if 'document' is the selected document */
-    this.isSelection = function (document) {
-        return MonacoService.isSelection(document);
+    /** checks if 'resource' is the selected resource */
+    this.isSelection = function (resource) {
+        return MonacoService.isSelection(resource);
     };
 
-    /** shows the options of the document */
-    this.showOptions = function (document, menu, event) {
+    /** shows the options of the resource */
+    this.showOptions = function (resource, menu, event) {
         event.preventDefault();
-        if (document.hasOption) {
+        if (resource.hasOption) {
             menu.open();
         }
     };
@@ -73,7 +74,10 @@ function ExplorerComponent(EditorService, MonacoService) {
     this.delete = function (resource, event) {
         event.stopPropagation();
         EditorService.confirm('Would you like to delete "' + resource.name + '"?').then(function () {
-            EditorService.deleteResource(resource);
+            EditorService.deleteResource(resource).then(() => {
+                MonacoService.closeResource(resource);
+            });
+        }).catch(() => {
         });
     };
 
@@ -93,7 +97,7 @@ function ExplorerComponent(EditorService, MonacoService) {
         { icon: 'fas fa-sync', label: 'Reload', enabled: filters.canBeReloaded, action: this.reloadPLTP },
         { icon: 'far fa-file', label: 'New File', enabled: filters.canAddFile, action: this.addFile },
         { icon: 'far fa-folder', label: 'New Folder', enabled: filters.canAddFile, action: this.addFolder },
-        { icon: 'far fa-edit', label: 'Rename', enabled: filters.canBeRenamed, action: this.renameResource },
+        { icon: 'far fa-edit', label: 'Rename', enabled: filters.canBeRenamed, action: this.rename },
         { icon: 'far fa-trash-alt', label: 'Delete', enabled: filters.canBeDeleted, action: this.delete },
         { icon: 'fas fa-lock', label: 'Read Only', enabled: filters.readonly, action: function () { } },
     ];

server/serverpl/filebrowser/static/filebrowser/monaco/config.js

@@ -1,5 +1,5 @@
 // https://microsoft.github.io/monaco-editor/playground.html#interacting-with-the-editor-adding-an-action-to-an-editor-instance
-export function config(completion) {
+export function config(editorNode, diffEditorNode, completion) {
 
     require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.14.3/min/vs' }});
 
@@ -79,7 +79,7 @@ export function config(completion) {
             ]
         });
 
-        const editor = monaco.editor.create($('.monaco__editor').get(0), {
+        const editor = monaco.editor.create(editorNode, {
             value: '',
             theme: 'premierlangage',
             language: '',
@@ -199,8 +199,19 @@ export function config(completion) {
                editor.onDidContentChanged(editor.getValue())
            }
         });
-
+        let diffEditor;
+        if (diffEditorNode) {
+            diffEditor = monaco.editor.createDiffEditor(diffEditorNode, {
+                // You can optionally disable the resizing
+                enableSplitViewResizing: false,
+                readOnly: true,
+                // Render the diff inline
+                renderSideBySide: false
+            });
+        }
+
+        diffEditor.setModel(undefined);
         editor.focus();
-        completion(editor);
+        completion(editor, diffEditor);
     });
 }

server/serverpl/filebrowser/static/filebrowser/monaco/monaco.component.css

@@ -45,6 +45,11 @@ monaco .monaco__editor {
     width: 100%;
 }
 
+monaco .monaco__editor--diff {
+    height: 100%;
+    width: 100%;
+}
+
 monaco .monaco__preview {
     height: calc(100% - 72px);
     width: 10px;
@@ -55,11 +60,10 @@ monaco .monaco__preview {
     right: 0;
     background-color: white;
     padding: 0 12px;
-    transition: width .2s;
+    transition: width .1s;
 }
 
 monaco .monaco__preview .resizer {
-    z-index: 1000;
     background: #ecedf0;
     position: absolute;
     left: 0;

server/serverpl/filebrowser/static/filebrowser/monaco/monaco.component.html

@@ -10,6 +10,12 @@
         </span>
     </div>
     <div class="mdl-layout-spacer"></div>
+    <div class='editor__tab-item' ng-if="monaco.diffEditorEnabled()" ng-click='monaco.didTapShowDiffEditor()'>
+        <md-tooltip>Show diff editor</md-tooltip><i class="fas fa-eye"></i>
+    </div>
+    <div class='editor__tab-item' ng-if="monaco.diffMode()" ng-click='monaco.didTapCloseDiffEditor()'>
+        <md-tooltip>Close diff editor</md-tooltip><i class="fas fa-eye-slash"></i>
+    </div>
     <div class='editor__tab-item' ng-if='monaco.hasPreview()' ng-click='monaco.didTapOpenPreview()'>
         <md-tooltip>Preview</md-tooltip><i class="fas fa-play"></i>
     </div>
@@ -21,6 +27,7 @@
 
 <div class='monaco__main'>
     <div class='monaco__editor'></div>
+    <div class='monaco__editor--diff'></div>
     <div class='monaco__preview border' ng-show='monaco.previewHtml()'>
         <h5>{{monaco.selection().name}} preview</h5><hr/>
         <div ng-bind-html='monaco.previewHtml() | unsafe'></div>

server/serverpl/filebrowser/static/filebrowser/monaco/monaco.component.js

@@ -17,7 +17,7 @@ function MonacoComponent ($scope, EditorService, MonacoService) {
     */
     monaco.closeResource = function(resource) {
         if (resource.changed) {
-            EditorService.confirm('You will lose any unsaved changes !').then(() => {
+            EditorService.confirm('You will lose any unsaved changes, press Ctrl|Cmd + S to save !').then(() => {
                 MonacoService.closeResource(resource);
             });
         } else {
@@ -37,7 +37,24 @@ function MonacoComponent ($scope, EditorService, MonacoService) {
             monaco.previewNode.css({ width: '50%' });
         });
     }
+    /** Handles show diff button click */
+    monaco.didTapShowDiffEditor = function() {
+        EditorService.showDiff(monaco.selection()).then(MonacoService.showDiffEditor);
+    }
+
+    /** Handles close diff button click */
+    monaco.didTapCloseDiffEditor = function() {
+        MonacoService.closeDiffEditor();
+    }
+
+    monaco.diffMode = function() {
+        return monaco.selection() && monaco.selection().diffMode;
+    }
 
+    monaco.diffEditorEnabled = function() {
+        const s = monaco.selection()
+        return s && s.type === 'file' && !s.diffMode;
+    }
     /** 
      * Gets a value indicating whether the selected resource can be previewed 
      * @returns {boolean} true if there is a selected resource and it can be previewed false otherwise 
@@ -68,7 +85,13 @@ function MonacoComponent ($scope, EditorService, MonacoService) {
      * @param {Object} resource - the resource to open.
      */
     monaco.openResource = function(resource) {
-        MonacoService.openResource(resource);
+        const current = monaco.selection();
+        current.previewModeWidth = monaco.previewNode.width();
+        MonacoService.openResource(resource).then(() => {
+            if (resource.previewModeWidth) {
+                monaco.previewNode.width(resource.previewModeWidth);
+            } 
+        });
     }
 
     /** 
@@ -108,6 +131,8 @@ function MonacoComponent ($scope, EditorService, MonacoService) {
         return MonacoService.selection;
     }
 
+    MonacoService.loadEditor();
+
     EditorService.setResizable('.monaco__preview', function(node, e, startX, startY, startWidth, startHeight) {
         node.style.width = (startWidth + startX - e.clientX) + 'px';
         MonacoService.layout();