X-Git-Url: http://source.bookstackapp.com/bookstack/blobdiff_plain/3a5c20c17e4228ad37a35e7267ab890c7ae92bcb..refs/pull/1462/head:/resources/assets/js/vues/image-manager.js

diff --git a/resources/assets/js/vues/image-manager.js b/resources/assets/js/vues/image-manager.js
index 89fe6769e..dd1d9d17a 100644
--- a/resources/assets/js/vues/image-manager.js
+++ b/resources/assets/js/vues/image-manager.js
@@ -1,6 +1,7 @@
-const dropzone = require('./components/dropzone');
+import * as Dates from "../services/dates";
+import dropzone from "./components/dropzone";
 
-let page = 0;
+let page = 1;
 let previousClickTime = 0;
 let previousClickImage = 0;
 let dataLoaded = false;
@@ -19,56 +20,73 @@ const data = {
     selectedImage: false,
     dependantPages: false,
     showing: false,
-    view: 'all',
+    filter: null,
     hasMore: false,
     searching: false,
     searchTerm: '',
 
     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;
     },
 
     hide() {
+        if (this.$refs.dropzone) {
+            this.$refs.dropzone.onClose();
+        }
         this.showing = false;
         this.selectedImage = false;
-        this.$refs.dropzone.onClose();
         this.$el.children[0].components.overlay.hide();
     },
 
-    fetchData() {
-        let url = baseUrl + page;
-        let query = {};
-        if (this.uploadedTo !== false) query.page_id = this.uploadedTo;
-        if (this.searching) query.term = this.searchTerm;
-
-        this.$http.get(url, {params: query}).then(response => {
-            this.images = this.images.concat(response.data.images);
-            this.hasMore = response.data.hasMore;
-            page++;
-        });
+    async fetchData() {
+        let query = {
+            page,
+            search: this.searching ? this.searchTerm : null,
+            uploaded_to: this.uploadedTo || null,
+            filter_type: this.filter,
+        };
+
+        const {data} = await this.$http.get(baseUrl, {params: query});
+        this.images = this.images.concat(data.images);
+        this.hasMore = data.has_more;
+        page++;
+    },
+
+    setFilterType(filterType) {
+        this.filter = filterType;
+        this.resetState();
+        this.fetchData();
     },
 
-    setView(viewName) {
+    resetState() {
         this.cancelSearch();
+        this.resetListView();
+        this.deleteConfirm = false;
+        baseUrl = window.baseUrl(`/images/${this.imageType}`);
+    },
+
+    resetListView() {
         this.images = [];
         this.hasMore = false;
-        page = 0;
-        this.view = viewName;
-        baseUrl = window.baseUrl(`/images/${this.imageType}/${viewName}/`);
-        this.fetchData();
+        page = 1;
     },
 
     searchImages() {
@@ -81,14 +99,12 @@ const methods = {
         }
 
         this.searching = true;
-        this.images = [];
-        this.hasMore = false;
-        page = 0;
-        baseUrl = window.baseUrl(`/images/${this.imageType}/search/`);
+        this.resetListView();
         this.fetchData();
     },
 
     cancelSearch() {
+        if (!this.searching) return;
         this.searching = false;
         this.searchTerm = '';
         this.images = preSearchImages;
@@ -96,15 +112,16 @@ const methods = {
     },
 
     imageSelect(image) {
-        let dblClickTime = 300;
-        let currentTime = Date.now();
-        let timeDiff = currentTime - previousClickTime;
-        let isDblClick = timeDiff < dblClickTime && image.id === previousClickImage;
+        const dblClickTime = 300;
+        const currentTime = Date.now();
+        const timeDiff = currentTime - previousClickTime;
+        const isDblClick = timeDiff < dblClickTime && image.id === previousClickImage;
 
         if (isDblClick) {
             this.callbackAndHide(image);
         } else {
             this.selectedImage = image;
+            this.deleteConfirm = false;
             this.dependantPages = false;
         }
 
@@ -117,11 +134,11 @@ const methods = {
         this.hide();
     },
 
-    saveImageDetails() {
-        let url = window.baseUrl(`/images/update/${this.selectedImage.id}`);
-        this.$http.put(url, this.selectedImage).then(response => {
-            this.$events.emit('success', trans('components.image_update_success'));
-        }).catch(error => {
+    async saveImageDetails() {
+        let url = window.baseUrl(`/images/${this.selectedImage.id}`);
+        try {
+            await this.$http.put(url, this.selectedImage)
+        } catch (error) {
             if (error.response.status === 422) {
                 let errors = error.response.data;
                 let message = '';
@@ -130,26 +147,33 @@ const methods = {
                 });
                 this.$events.emit('error', message);
             }
-        });
+        }
     },
 
-    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 => {
-            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;
+    async deleteImage() {
+
+        if (!this.deleteConfirm) {
+            const url = window.baseUrl(`/images/usage/${this.selectedImage.id}`);
+            try {
+                const {data} = await this.$http.get(url);
+                this.dependantPages = data;
+            } catch (error) {
+                console.error(error);
             }
-        });
+            this.deleteConfirm = true;
+            return;
+        }
+
+        const url = window.baseUrl(`/images/${this.selectedImage.id}`);
+        await this.$http.delete(url);
+        this.images.splice(this.images.indexOf(this.selectedImage), 1);
+        this.selectedImage = false;
+        this.$events.emit('success', trans('components.image_delete_success'));
+        this.deleteConfirm = false;
     },
 
     getDate(stringDate) {
-        return new Date(stringDate);
+        return Dates.formatDateTime(new Date(stringDate));
     },
 
     uploadSuccess(event) {
@@ -160,7 +184,7 @@ const methods = {
 
 const computed = {
     uploadUrl() {
-        return window.baseUrl(`/images/${this.imageType}/upload`);
+        return window.baseUrl(`/images/${this.imageType}`);
     }
 };
 
@@ -168,10 +192,10 @@ function mounted() {
     window.ImageManager = this;
     this.imageType = this.$el.getAttribute('image-type');
     this.uploadedTo = this.$el.getAttribute('uploaded-to');
-    baseUrl = window.baseUrl('/images/' + this.imageType + '/all/')
+    baseUrl = window.baseUrl('/images/' + this.imageType)
 }
 
-module.exports = {
+export default {
     mounted,
     methods,
     data,