mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-10-01 05:36:00 +00:00
Started work on revisions in image manager
This commit is contained in:
parent
13ad0031d6
commit
6cdb943916
@ -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
|
||||
|
@ -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),
|
||||
|
@ -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 = {
|
||||
|
@ -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;
|
||||
|
@ -47,10 +47,17 @@
|
||||
|
||||
<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;">
|
||||
<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>
|
||||
|
||||
|
||||
|
@ -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');
|
||||
|
Loading…
Reference in New Issue
Block a user