🐛 handle editing toolbox state emit state of toolbox to disable/enabl…

…e close editing panel (#106)

components/Editing.vue

@@ -96,6 +96,7 @@
         @savetoolbox        = "saveToolBox"
         @setactivetool      = "startActiveTool"
         @stopactivetool     = "stopActiveTool"
+        @on-editing         = "updateLayersInEditing"
       />
     </div>
 
@@ -116,7 +117,7 @@
 
     data() {
       return {
-        saving: false, // whether to show loading bar while committing to server (click on save disk icon)
+        saving:          false, // whether to show loading bar while committing to server (click on save disk icon)
         layersInEditing: 0, //@since 3.8.0 Number of layers in editing
       };
     },
@@ -131,6 +132,14 @@
     },
 
     methods: {
+      /**
+       * Method that handle editing state of toolbox layer
+       * @since 3.8.0
+       * @param bool
+       */
+      updateLayersInEditing(bool) {
+        this.layersInEditing += bool ? 1 : -1;
+      },
 
       undo() {
         this.$options.service.undo();
@@ -161,19 +170,18 @@
       async startToolBox(toolboxId) {
         const toolbox = this._getToolBoxById(toolboxId);
         if (ApplicationState.online && toolbox.canEdit()) {
-          //check if a dependency layer (in relation) has some changes not commietd
+          //check if a dependency layer (in relation) has some changes not committed
           const dirtyId = toolbox.getDependencies()
             .find(id => this._getToolBoxById(id).isDirty());
           if (dirtyId) {
-            //if there is a layer with not saved/committed changes ask before get start toolbox
+            //if there is a layer with not saved/committed changes ask before get start toolbox,
             //otherwise changes made on relation layers are not sync with current database state
             //example Joins 1:1 fields
             try      { await this.$options.service.commitDirtyToolBoxes(dirtyId); }
             catch(e) { console.warn(e); }
           }
           toolbox
             .start()
-            .then(() => this.layersInEditing++)
         }
       },
 
@@ -185,11 +193,10 @@
         if (toolbox.state.editing.history.commit) {
           this.$options.service
             .commit()
-            .always(() => toolbox.stop().then(() => this.layersInEditing--));
+            .always(() => toolbox.stop());
         } else {
           toolbox
             .stop()
-            .then(() => this.layersInEditing--)
         }
       },
 

components/Toolbox.vue

@@ -346,10 +346,17 @@
 
     watch: {
 
-      async'state.activetool'(activetool) {
+      async 'state.activetool'(activetool) {
         await this.$nextTick();
         this.currenttoolhelpmessage = activetool && activetool.getHelpMessage();
       },
+      /**
+       * Method to watch toolbox in editing state
+       * @param bool
+       */
+      'state.editing.on'(bool) {
+        this.$emit('on-editing', bool);
+      }
 
     },