@konfuzio/document-validation-ui 0.1.5-pre-release-1 → 0.1.5-styles-refactor

package/src/components/DocumentPage/DocumentPage.vue

@@ -438,19 +438,21 @@ export default {
         return;
       }
       const image = new Image();
-      api.IMG_REQUEST.get(
-        `${this.page.image_url}?${this.selectedDocument.downloaded_at}`
-      )
-        .then((response) => {
-          return response.data;
-        })
+      if (process.env.NODE_ENV === "test") {
+        return;
+      }
+      api
+        .makeImageRequest(
+          `${this.page.image_url}?${this.selectedDocument.downloaded_at}`
+        )
         .then((myBlob) => {
           image.src = URL.createObjectURL(myBlob);
           image.onload = () => {
             // set image only when it is loaded
             this.image = image;
           };
-        });
+        })
+        .catch((error) => {});
     },
 
     /**

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -13,6 +13,7 @@
         <ScrollingPage
           v-for="page in editMode ? documentPagesListForEditMode : pages"
           :key="page.number"
+          ref="scrollingPage"
           :page="page"
           :client-height="clientHeight"
           :scroll-top="scrollTop"
@@ -29,7 +30,7 @@
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import scroll from "../../directives/scroll";
 import ScrollingPage from "./ScrollingPage";
 import Toolbar from "./DocumentToolbar";
@@ -49,6 +50,8 @@ export default {
     return {
       scrollTop: 0,
       clientHeight: 0,
+      isScolling: false,
+      scrollTimeout: null,
     };
   },
 
@@ -59,7 +62,13 @@ export default {
       "loading",
     ]),
     ...mapState("edit", ["editMode", "documentPagesListForEditMode"]),
-    ...mapState("display", ["scale", "documentActionBar"]),
+    ...mapState("display", [
+      "scale",
+      "documentActionBar",
+      "pageChangedFromThumbnail",
+      "currentPage",
+    ]),
+    ...mapGetters("display", ["visiblePageRange"]),
 
     pages() {
       if (this.selectedDocument) {
@@ -85,6 +94,9 @@ export default {
       this.scrollTop = 0;
     },
   },
+  mounted() {
+    this.$refs.scrollingDocument.addEventListener("scroll", this.handleScroll);
+  },
 
   methods: {
     updateScrollBounds() {
@@ -102,6 +114,24 @@ export default {
 
       this.$refs.scrollingDocument.scroll(scrollX, scrollY);
     },
+    handleScroll() {
+      if (this.pages.length === 1) return;
+
+      this.isScrolling = true;
+
+      clearTimeout(this.scrollTimeout);
+
+      this.scrollTimeout = setTimeout(() => {
+        this.isScrolling = false;
+
+        if (
+          this.pageChangedFromThumbnail &&
+          this.visiblePageRange[1] === this.currentPage
+        ) {
+          this.$store.dispatch("display/setPageChangedFromThumbnail", false);
+        }
+      }, 300);
+    },
   },
 };
 </script>

package/src/components/DocumentPage/ScrollingPage.vue

@@ -44,10 +44,12 @@ export default {
       previousFocusedAnnotation: null,
       previousY: null,
       pageBeingLoaded: false,
+      isScrolling: false,
     };
   },
 
   computed: {
+    ...mapState("display", ["pageChangedFromThumbnail"]),
     ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
     ...mapGetters("document", ["scrollDocumentToAnnotation"]),
 
@@ -117,15 +119,12 @@ export default {
       }
     },
     isElementFocused(focused) {
-      if (!this.loading && focused) {
+      if (!this.loading && focused && !this.pageChangedFromThumbnail) {
         this.$store.dispatch("display/updateCurrentPage", this.page.number);
       }
     },
     currentPage(number) {
-      if (
-        (this.page.number === number || this.page.number === number) &&
-        !this.isElementFocused
-      ) {
+      if (this.page.number === number && !this.isElementFocused) {
         this.$emit("page-jump", this.elementTop, 0);
       }
     },

package/src/components/DocumentThumbnails/DocumentThumbnails.vue

@@ -62,7 +62,7 @@ export default {
   },
   data() {
     return {
-      thumbnailClicked: false,
+      thumbnailClicked: null,
       previousScrollPosition: 0,
     };
   },
@@ -76,9 +76,10 @@ export default {
   },
   watch: {
     currentPage(newPage) {
-      if (newPage && !this.thumbnailClicked) {
-        this.scrollToThumbnail();
-      }
+      if (!newPage) return;
+
+      // handle thumbnail selection when scrolling the document
+      this.scrollToThumbnail(newPage);
     },
   },
   mounted() {
@@ -94,27 +95,29 @@ export default {
   methods: {
     /* Change page if not the currently open and not in modal */
     changePage(pageNumber) {
-      this.thumbnailClicked = true;
+      this.thumbnailClicked = pageNumber;
 
       if (
         !this.loading &&
         !this.recalculatingAnnotations &&
         pageNumber != this.currentPage
       ) {
-        this.$store.dispatch(
-          "display/updateCurrentPage",
-          parseInt(pageNumber, 10)
-        );
+        this.$store.dispatch("display/setPageChangedFromThumbnail", true);
+        this.$store.dispatch("display/updateCurrentPage", pageNumber);
       }
     },
 
-    scrollToThumbnail() {
+    scrollToThumbnail(page) {
       // select only the active thumbnail
       const selectedPage = this.$refs.docPage.filter((image) =>
         image.className.includes("selected")
       );
 
-      if (selectedPage && selectedPage[0]) {
+      if (page == this.thumbnailClicked) {
+        this.thumbnailClicked = null;
+      }
+
+      if (!this.thumbnailClicked && selectedPage && selectedPage[0]) {
         selectedPage[0].scrollIntoView();
       }
     },

package/src/store/display.js

@@ -29,6 +29,7 @@ const state = {
   interactionBlocked: false,
   documentActionBar: null, // document action bar properties
   categorizeModalIsActive: false,
+  pageChangedFromThumbnail: false,
 };
 
 const getters = {
@@ -209,6 +210,9 @@ const actions = {
   setCategorizeModalIsActive: ({ commit }, value) => {
     commit("SET_CATEGORIZE_MODAL_IS_ACTIVE", value);
   },
+  setPageChangedFromThumbnail: ({ commit }, value) => {
+    commit("SET_PAGE_CHANGED_FROM_THUMBNAIL", value);
+  },
 };
 
 const mutations = {
@@ -235,6 +239,9 @@ const mutations = {
   SET_CATEGORIZE_MODAL_IS_ACTIVE: (state, value) => {
     state.categorizeModalIsActive = value;
   },
+  SET_PAGE_CHANGED_FROM_THUMBNAIL: (state, value) => {
+    state.pageChangedFromThumbnail = value;
+  },
 };
 
 export default {

package/src/store/document.js

@@ -811,16 +811,20 @@ const actions = {
   },
 
   fetchMissingAnnotations: ({ commit, state, getters }) => {
-    return HTTP.get(
-      `/missing-annotations/?document=${state.documentId}&limit=100`
-    )
-      .then((response) => {
-        commit("SET_MISSING_ANNOTATIONS", response.data.results);
-        commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
-      })
-      .catch((error) => {
-        console.log(error);
-      });
+    return new Promise((resolve, reject) => {
+      return HTTP.get(
+        `/missing-annotations/?document=${state.documentId}&limit=100`
+      )
+        .then((response) => {
+          commit("SET_MISSING_ANNOTATIONS", response.data.results);
+          commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
+          resolve(true);
+        })
+        .catch((error) => {
+          reject(error.response);
+          console.log(error);
+        });
+    });
   },
 
   addMissingAnnotations: ({ commit, dispatch }, missingAnnotations) => {
@@ -842,7 +846,7 @@ const actions = {
   },
 
   deleteMissingAnnotation: ({ commit, getters, dispatch }, id) => {
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       return HTTP.delete(`/missing-annotations/${id}/`)
         .then((response) => {
           if (response.status === 204) {
@@ -851,7 +855,7 @@ const actions = {
           }
         })
         .catch((error) => {
-          resolve(error.response);
+          reject(error.response);
           console.log(error);
         });
     });
@@ -899,6 +903,7 @@ const actions = {
           }
         })
         .catch((error) => {
+          reject(error.response);
           console.log(error);
         });
     });

package/src/store/edit.js

@@ -149,7 +149,7 @@ const actions = {
     dispatch("document/startRecalculatingAnnotations", null, {
       root: true,
     });
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       HTTP.post(
         `/documents/${rootState.document.documentId}/postprocess/`,
         editedDocument
@@ -171,7 +171,7 @@ const actions = {
           }
         })
         .catch((error) => {
-          resolve(error.response);
+          reject(error.response);
           console.log(error);
         });
     });