Started work on revisions in image manager

diff --git a/app/Http/Controllers/ImageController.php b/app/Http/Controllers/ImageController.php
index b156a84255a6492ac11217bab7eea1ed28e35707..bf7f3bb823520c69416ee3992aaf949f41af841c 100644 (file)
--- a/app/Http/Controllers/ImageController.php
+++ b/app/Http/Controllers/ImageController.php
@@ -257,6 +257,18 @@ class ImageController extends Controller
         return response()->json($pageSearch);
     }
 
         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
     /**
      * Deletes an image and all thumbnail/image files
      * @param int $id

diff --git a/app/Repos/ImageRepo.php b/app/Repos/ImageRepo.php
index eff856872bcd07640d216c6b700a1187c0d901f5..384ea545475f32e73aaaea041d37d67e52b43097 100644 (file)
--- a/app/Repos/ImageRepo.php
+++ b/app/Repos/ImageRepo.php
@@ -201,7 +201,7 @@ class ImageRepo
      * @throws \BookStack\Exceptions\ImageUploadException
      * @throws \Exception
      */
      * @throws \BookStack\Exceptions\ImageUploadException
      * @throws \Exception
      */

-    private function loadThumbs(Image $image)
+    protected function loadThumbs(Image $image)

     {
         $image->thumbs = [
             'gallery' => $this->getThumbnail($image, 150, 150),
     {
         $image->thumbs = [
             'gallery' => $this->getThumbnail($image, 150, 150),

diff --git a/resources/assets/js/vues/image-manager.js b/resources/assets/js/vues/image-manager.js
index bef6661929315e470842c5c6a9381655ccbe5943..2a11a6ff2eb9c6b7c77f60bc31ad6264adc23b12 100644 (file)
--- a/resources/assets/js/vues/image-manager.js
+++ b/resources/assets/js/vues/image-manager.js
@@ -24,6 +24,9 @@ const data = {
     searching: false,
     searchTerm: '',
 
     searching: false,
     searchTerm: '',
 

+    revisions: [],
+    selectedRevision: null,
+

     imageUpdateSuccess: false,
     imageDeleteSuccess: false,
     deleteConfirm: false,
     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;
         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);
 
         if (isDblClick) {
             this.callbackAndHide(image);


@@ -117,6 +122,11 @@ const methods = {
             this.selectedImage = image;
             this.deleteConfirm = false;
             this.dependantPages = false;
             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;
         }
 
         previousClickTime = currentTime;


@@ -172,6 +182,11 @@ const methods = {
         this.images.unshift(event.data);
         this.$events.emit('success', trans('components.image_upload_success'));
     },
         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 = {
 };
 
 const computed = {

diff --git a/resources/assets/sass/_components.scss b/resources/assets/sass/_components.scss
index 27dcfda64f9a0a2e3c2c74d2b42386f68f2643e0..76150fe44bafe45992ef91e4648edcf516cfb0c7 100644 (file)
--- a/resources/assets/sass/_components.scss
+++ b/resources/assets/sass/_components.scss
@@ -221,10 +221,19 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
   img {
     max-width: 100%;
   }
   img {
     max-width: 100%;

-    max-height: 200px;
+    max-height: 180px;

     display: block;
     margin: 0 auto $-m auto;
     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;
   }
   .dropzone-container {
     border-bottom: 1px solid #DDD;

diff --git a/resources/views/components/image-manager.blade.php b/resources/views/components/image-manager.blade.php
index 45b30697bc9217f98e91cd315bfa03840dfb04ce..92a69c05dd3aaf63f41f637727511d1f8894755e 100644 (file)
--- a/resources/views/components/image-manager.blade.php
+++ b/resources/views/components/image-manager.blade.php
@@ -47,10 +47,17 @@
 
                         <div class="image-manager-details anim fadeIn" v-if="selectedImage">
 
 
                         <div class="image-manager-details anim fadeIn" v-if="selectedImage">
 

-                            <form @submit.prevent="saveImageDetails">
-                                <div>
+                            <div v-if="selectedRevision" class="image-manager-viewer">
+                                <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;">
                                     <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>
                                              :title="selectedImage.name">
                                     </a>
                                 </div>


@@ -60,7 +67,7 @@
                                 </div>
                             </form>
 
                                 </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>
 
                                 <div class="float left">
                                     <button type="button" class="button icon outline" @click="deleteImage">@icon('delete')</button>
 


@@ -84,6 +91,28 @@
                                 </div>
                             </div>
 
                                 </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>
 
 
                         </div>
 
 

diff --git a/routes/web.php b/routes/web.php
index 40b00c75d0e288beb41f2637cc21e5094ff063cd..254da9cd4723a9c8f8e15d83f51898e07775eaca 100644 (file)
--- a/routes/web.php
+++ b/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::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');
         Route::post('/{type}/upload', 'ImageController@uploadByType');
         Route::get('/{type}/all', 'ImageController@getAllByType');
         Route::get('/{type}/all/{page}', 'ImageController@getAllByType');