Started work on drawing revisions

Improved sidebar and selection styling of image manager.
Allowed image manager imageType to be changed on open.
Created models for image revisions.

resources/assets/js/components/wysiwyg-editor.js

@@ -221,8 +221,6 @@ function codePlugin() {
 
 function drawIoPlugin() {
 
-    const drawIoUrl = 'https://www.draw.io/?embed=1&ui=atlas&spin=1&proto=json';
-    let iframe = null;
     let pageEditor = null;
     let currentNode = null;
 
@@ -230,6 +228,20 @@ function drawIoPlugin() {
         return node.hasAttribute('drawio-diagram');
     }
 
+    function showDrawingManager(mceEditor, selectedNode = null) {
+        // TODO - Handle how image manager links in.
+        // Show image manager
+        window.ImageManager.show(function (image) {
+
+
+            // // Replace the actively selected content with the linked image
+            // let html = `<a href="${image.url}" target="_blank">`;
+            // html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
+            // html += '</a>';
+            // win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
+        }, 'drawio');
+    }
+
     function showDrawingEditor(mceEditor, selectedNode = null) {
         pageEditor = mceEditor;
         currentNode = selectedNode;
@@ -287,7 +299,12 @@ function drawIoPlugin() {
     window.tinymce.PluginManager.add('drawio', function(editor, url) {
 
         editor.addCommand('drawio', () => {
-            showDrawingEditor(editor);
+            let selectedNode = editor.selection.getNode();
+            if (isDrawing(selectedNode)) {
+                showDrawingManager(editor, selectedNode);
+            } else {
+                showDrawingEditor(editor);
+            }
         });
 
         editor.addButton('drawio', {
@@ -443,7 +460,7 @@ class WysiwygEditor {
                         html += `<img src="${image.thumbs.display}" alt="${image.name}">`;
                         html += '</a>';
                         win.tinyMCE.activeEditor.execCommand('mceInsertContent', false, html);
-                    });
+                    }, 'gallery');
                 }
 
             },

resources/assets/js/vues/image-manager.js

@@ -26,17 +26,22 @@ const data = {
 
     imageUpdateSuccess: false,
     imageDeleteSuccess: false,
+    deleteConfirm: false,
 };
 
 const methods = {
 
-    show(providedCallback) {
+    show(providedCallback, imageType = null) {
         callback = providedCallback;
         this.showing = true;
         this.$el.children[0].components.overlay.show();
 
         // Get initial images if they have not yet been loaded in.
-        if (dataLoaded) return;
+        if (dataLoaded && imageType === this.imageType) return;
+        if (imageType) {
+            this.imageType = imageType;
+            this.resetState();
+        }
         this.fetchData();
         dataLoaded = true;
     },
@@ -62,13 +67,18 @@ const methods = {
     },
 
     setView(viewName) {
+        this.view = viewName;
+        this.resetState();
+        this.fetchData();
+    },
+
+    resetState() {
         this.cancelSearch();
         this.images = [];
         this.hasMore = false;
+        this.deleteConfirm = false;
         page = 0;
-        this.view = viewName;
-        baseUrl = window.baseUrl(`/images/${this.imageType}/${viewName}/`);
-        this.fetchData();
+        baseUrl = window.baseUrl(`/images/${this.imageType}/${this.view}/`);
     },
 
     searchImages() {
@@ -105,6 +115,7 @@ const methods = {
             this.callbackAndHide(image);
         } else {
             this.selectedImage = image;
+            this.deleteConfirm = false;
             this.dependantPages = false;
         }
 
@@ -134,17 +145,22 @@ const methods = {
     },
 
     deleteImage() {
-        let force = this.dependantPages !== false;
-        let url = window.baseUrl('/images/' + this.selectedImage.id);
-        if (force) url += '?force=true';
-        this.$http.delete(url).then(response => {
+
+        if (!this.deleteConfirm) {
+            let url = window.baseUrl(`/images/usage/${this.selectedImage.id}`);
+            this.$http.get(url).then(resp => {
+                this.dependantPages = resp.data;
+            }).catch(console.error).then(() => {
+                this.deleteConfirm = true;
+            });
+            return;
+        }
+
+        this.$http.delete(`/images/${this.selectedImage.id}`).then(resp => {
             this.images.splice(this.images.indexOf(this.selectedImage), 1);
             this.selectedImage = false;
             this.$events.emit('success', trans('components.image_delete_success'));
-        }).catch(error=> {
-            if (error.response.status === 400) {
-                this.dependantPages = error.response.data;
-            }
+            this.deleteConfirm = false;
         });
     },