Started work on revisions in image manager

app/Http/Controllers/ImageController.php

@@ -257,6 +257,18 @@ class ImageController extends Controller
         return response()->json($pageSearch);
     }
 
+    /**
+     * Get the revisions for an image.
+     * @param $id
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function getRevisions($id)
+    {
+        $image = $this->imageRepo->getById($id);
+        $revisions = $image->revisions()->orderBy('id', 'desc')->get();
+        return response()->json($revisions);
+    }
+
     /**
      * Deletes an image and all thumbnail/image files
      * @param int $id

app/Repos/ImageRepo.php

@@ -201,7 +201,7 @@ class ImageRepo
      * @throws \BookStack\Exceptions\ImageUploadException
      * @throws \Exception
      */
-    private function loadThumbs(Image $image)
+    protected function loadThumbs(Image $image)
     {
         $image->thumbs = [
             'gallery' => $this->getThumbnail($image, 150, 150),

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

@@ -24,6 +24,9 @@ const data = {
     searching: false,
     searchTerm: '',
 
+    revisions: [],
+    selectedRevision: null,
+
     imageUpdateSuccess: false,
     imageDeleteSuccess: false,
     deleteConfirm: false,
@@ -110,6 +113,8 @@ const methods = {
         let currentTime = Date.now();
         let timeDiff = currentTime - previousClickTime;
         let isDblClick = timeDiff < dblClickTime && image.id === previousClickImage;
+        this.revisions = [];
+        this.selectedRevision = null
 
         if (isDblClick) {
             this.callbackAndHide(image);
@@ -117,6 +122,11 @@ const methods = {
             this.selectedImage = image;
             this.deleteConfirm = false;
             this.dependantPages = false;
+            if (this.imageType === 'drawio') {
+                this.$http.get(window.baseUrl(`/images/revisions/${image.id}`)).then(resp => {
+                    this.revisions = resp.data;
+                })
+            }
         }
 
         previousClickTime = currentTime;
@@ -172,6 +182,11 @@ const methods = {
         this.images.unshift(event.data);
         this.$events.emit('success', trans('components.image_upload_success'));
     },
+
+    selectRevision(revision) {
+        let rev = (this.selectedRevision === revision) ? null : revision;
+        this.selectedRevision = rev;
+    }
 };
 
 const computed = {

resources/assets/sass/_components.scss

@@ -221,10 +221,19 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
   img {
     max-width: 100%;
-    max-height: 200px;
+    max-height: 180px;
     display: block;
     margin: 0 auto $-m auto;
-    box-shadow: $bs-light;
+    box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
+  }
+  .image-manager-viewer {
+    height: 196px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    a {
+      display: inline-block;
+    }
   }
   .dropzone-container {
     border-bottom: 1px solid #DDD;

resources/views/components/image-manager.blade.php

@@ -47,10 +47,17 @@
 
                         <div class="image-manager-details anim fadeIn" v-if="selectedImage">
 
-                            <form @submit.prevent="saveImageDetails">
+                            <div v-if="selectedRevision" class="image-manager-viewer">
-                                <div>
+                                <a :href="selectedRevision.url" target="_blank" style="display: block;">
+                                    <img :src="selectedRevision.url" :alt="selectedImage.name"
+                                         :title="selectedImage.name">
+                                </a>
+                            </div>
+
+                            <form @submit.prevent="saveImageDetails" v-if="!selectedRevision">
+                                <div class="image-manager-viewer">
                                     <a :href="selectedImage.url" target="_blank" style="display: block;">
-                                        <img :src="selectedImage.thumbs.display" :alt="selectedImage.title"
+                                        <img :src="selectedImage.thumbs.display" :alt="selectedImage.name"
                                              :title="selectedImage.name">
                                     </a>
                                 </div>
@@ -60,7 +67,7 @@
                                 </div>
                             </form>
 
-                            <div class="clearfix">
+                            <div  v-if="!selectedRevision" class="clearfix">
                                 <div class="float left">
                                     <button type="button" class="button icon outline" @click="deleteImage">@icon('delete')</button>
 
@@ -84,6 +91,28 @@
                                 </div>
                             </div>
 
+                            {{--Revisions View--}}
+                            <div v-show="imageType === 'drawio'">
+                                <hr>
+                                <h5>Revisions</h5>
+                                <table v-if="revisions.length > 0" class="table">
+                                    <tr v-for="(revision, index) in revisions" :key="revision.id" :class="{'primary-background-light': selectedRevision === revision}" @click="selectRevision(revision)">
+                                        <td>
+                                            <span v-text="revision.revision"></span>
+                                            <span class="italic text-muted" v-if="index === 0 && revision.path === selectedImage.path">(Current)</span>
+                                        </td>
+                                        <td class="text-small">
+                                            <span v-text="(new Date(revision.created_at + 'Z')).toLocaleTimeString()"></span>
+                                            <br>
+                                            <span v-text="(new Date(revision.created_at + 'Z')).toLocaleDateString()"></span>
+                                        </td>
+                                    </tr>
+                                </table>
+                                <p v-if="revisions.length === 0" class="text-muted italic">
+                                    No revisions found
+                                </p>
+                            </div>
+
                         </div>
 
 

routes/web.php

@@ -98,6 +98,7 @@ Route::group(['middleware' => 'auth'], function () {
         Route::post('/drawing/upload', 'ImageController@uploadDrawing');
         Route::put('/drawing/upload/{id}', 'ImageController@updateDrawing');
         Route::get('/usage/{id}', 'ImageController@usage');
+        Route::get('/revisions/{id}', 'ImageController@getRevisions');
         Route::post('/{type}/upload', 'ImageController@uploadByType');
         Route::get('/{type}/all', 'ImageController@getAllByType');
         Route::get('/{type}/all/{page}', 'ImageController@getAllByType');