@konfuzio/document-validation-ui 0.1.4 → 0.1.5-automatic-document-splitting

package/src/components/DocumentEdit/EditSidebar.vue

@@ -1,75 +1,105 @@
 <template>
   <div class="edit-sidebar">
-    <div class="sidebar-header">
-      <h3 class="sidebar-title">
-        {{ $t("edit_document") }}
-      </h3>
-      <p class="description">
-        {{ $t("edit_early_access") }}
-      </p>
-      <p class="description">
-        {{ $t("select_pages") }}
-      </p>
-    </div>
-
     <div class="buttons-container">
-      <div class="rotate-selected rotate">
+      <div class="rotate-selected edit-buttons">
+        <SidebarButtons
+          :show-rotate-button="true"
+          :button-disabled="buttonDisabled"
+          :button-text="$t('rotate_selected')"
+          :icon="'arrow-rotate-left'"
+          @rotate="rotateLeft"
+        />
+
+        <SidebarButtons
+          :show-rotate-button="true"
+          :button-disabled="buttonDisabled"
+          :button-text="$t('rotate_selected')"
+          :icon="'arrow-rotate-right'"
+          @rotate="rotateRight"
+        />
+
         <p :class="['pages-selected', buttonDisabled && 'disabled']">
           {{ selectedPages.length }} {{ $t("selected") }}
         </p>
-        <b-button
-          class="rotate-button primary-button"
-          :disabled="buttonDisabled"
-          @click="rotateLeft"
-        >
-          <div class="button-content">
-            <b-icon icon="arrow-rotate-left" class="is-small" />
-            <span class="button-text">{{ $t("rotate_selected") }}</span>
-          </div>
-        </b-button>
-        <b-button
-          class="rotate-button primary-button"
-          :disabled="buttonDisabled"
-          @click="rotateRight"
-        >
-          <div class="button-content">
-            <b-icon icon="arrow-rotate-right" class="is-small" />
-            <span class="button-text">{{ $t("rotate_selected") }}</span>
-          </div>
-        </b-button>
       </div>
 
-      <div class="rotate-all rotate">
-        <b-button class="rotate-button primary-button" @click="rotateAllLeft">
-          <b-icon icon="arrow-rotate-left" class="is-small" />
-          <span class="button-text">{{ $t("rotate_all") }}</span>
-        </b-button>
-        <b-button class="rotate-button primary-button" @click="rotateAllRight">
-          <b-icon icon="arrow-rotate-right" class="is-small" />
-          <span class="button-text">{{ $t("rotate_all") }}</span>
-        </b-button>
+      <div class="rotate-all edit-buttons">
+        <SidebarButtons
+          :show-rotate-button="true"
+          :button-disabled="false"
+          :button-text="$t('rotate_all')"
+          :icon="'arrow-rotate-left'"
+          @rotate="rotateAllLeft"
+        />
+
+        <SidebarButtons
+          :show-rotate-button="true"
+          :button-disabled="false"
+          :button-text="$t('rotate_all')"
+          :icon="'arrow-rotate-right'"
+          @rotate="rotateAllRight"
+        />
       </div>
     </div>
+    <div class="split smart-split">
+      <b-tooltip
+        multilined
+        :active="!documentHasProposedSplit(selectedDocument)"
+        position="is-bottom"
+        class="bottom-aligned"
+        :label="tooltipInfo"
+      >
+        <b-field>
+          <b-switch
+            :value="true"
+            size="is-small"
+            v-model="switchStatus"
+            :disabled="!documentHasProposedSplit(selectedDocument)"
+          >
+            <span class="switch-text">{{ $t("smart_split") }}</span>
+            <span
+              v-if="documentHasProposedSplit(selectedDocument)"
+              class="new-badge"
+              >{{ newText }}</span
+            >
+          </b-switch>
+        </b-field>
+      </b-tooltip>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapState, mapGetters } from "vuex";
+import { nextTick } from "vue";
+import SidebarButtons from "./SidebarButtons";
+
 /**
  * This component renders buttons to rotate single pages or all pages
  * in edit mode
  * */
-
-import { mapState } from "vuex";
-
 export default {
   name: "EditSidebar",
+  components: {
+    SidebarButtons,
+  },
   data() {
     return {
       buttonDisabled: true,
+      tooltipInfo: null,
+      newText: this.$t("new"),
+      switchStatus: true,
     };
   },
+  props: {
+    splitSuggestionsEnabled: {
+      type: Boolean,
+    },
+  },
   computed: {
     ...mapState("edit", ["selectedPages"]),
+    ...mapState("document", ["splittingSuggestions", "selectedDocument"]),
+    ...mapGetters("document", ["documentHasProposedSplit"]),
   },
   watch: {
     selectedPages(newValue) {
@@ -79,6 +109,26 @@ export default {
         this.buttonDisabled = true;
       }
     },
+    switchStatus(newValue) {
+      if (this.splittingSuggestions && this.splittingSuggestions.length > 0)
+        this.$emit("handle-splitting-suggestions", newValue);
+    },
+    splitSuggestionsEnabled(newValue) {
+      if (!newValue) {
+        this.switchStatus = false;
+      }
+    },
+  },
+  mounted() {
+    this.tooltipInfo = this.$t("no_splitting_suggestions");
+
+    nextTick(() => {
+      if (this.newText) {
+        this.newText = this.$t("new").toUpperCase();
+      }
+
+      this.switchStatus = this.splitSuggestionsEnabled;
+    });
   },
   methods: {
     rotateLeft() {

package/src/components/DocumentEdit/SidebarButtons.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="sidebar-buttons">
+    <!-- Rotate buttons -->
+    <div v-if="showRotateButton" class="rotate-button-container">
+      <b-button
+        class="rotate-button edit-mode-btn primary-button"
+        :disabled="buttonDisabled"
+        @click="rotateButton"
+      >
+        <div class="button-content">
+          <b-icon :icon="icon" class="is-small" />
+          <span class="button-text">{{ buttonText }}</span>
+        </div>
+      </b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SidebarButtons",
+  props: {
+    showRotateButton: {
+      type: Boolean,
+      default: false,
+    },
+    buttonDisabled: {
+      type: Boolean,
+      default: true,
+    },
+    buttonText: {
+      type: String,
+      default: null,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    tooltipInfo: {
+      type: String,
+      default: null,
+    },
+  },
+
+  methods: {
+    rotateButton() {
+      this.$emit("rotate");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>

package/src/components/DocumentEdit/SplitInfoBar.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="split-info-bar">
+    <StarIcon />
+    <span> {{ $t("smart_split_suggestions") }}</span>
+  </div>
+</template>
+
+<script>
+import StarIcon from "../../assets/images/StarIcon";
+
+export default {
+  name: "SplitInfoBar",
+  components: {
+    StarIcon,
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>

package/src/components/DocumentEdit/SplitOverview.vue

@@ -97,9 +97,11 @@ export default {
   props: {
     fileName: {
       type: String,
+      default: "",
     },
     fileExtension: {
       type: String,
+      default: "",
     },
   },
   data() {
@@ -110,7 +112,7 @@ export default {
   },
   computed: {
     ...mapState("document", ["selectedDocument", "pages"]),
-    ...mapState("edit", ["updatedDocument", "documentPagesListForEditMode"]),
+    ...mapState("edit", ["updatedDocument", "pagesForPostprocess"]),
   },
   methods: {
     handleBackButton() {
@@ -160,11 +162,11 @@ export default {
       return name.split(".").slice(0, -1).join(".");
     },
     getImageUrl(page) {
-      if (!this.documentPagesListForEditMode || !this.pages || !page) return;
+      if (!this.pagesForPostprocess || !this.pages || !page) return;
 
       // returns the first thumbnail in the pages array
       // for each new document
-      const image = this.documentPagesListForEditMode.find(
+      const image = this.pagesForPostprocess.find(
         (p) => p.number === page.pages[0].number
       );
 
@@ -172,8 +174,7 @@ export default {
     },
     getRotation(pageId) {
       // rotate page
-      return this.documentPagesListForEditMode?.find((p) => p.id === pageId)
-        ?.angle;
+      return this.pagesForPostprocess?.find((p) => p.id === pageId)?.angle;
     },
   },
 };

package/src/components/{DocumentError.vue → DocumentModals/DocumentErrorModal.vue}

@@ -29,11 +29,10 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
-import ErrorIcon from "../assets/images/ErrorIcon";
+import ErrorIcon from "../../assets/images/ErrorIcon";
 
 export default {
-  name: "DocumentError",
+  name: "DocumentErrorModal",
   components: {
     ErrorIcon,
   },
@@ -54,4 +53,4 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" src="../assets/scss/document_error.scss"></style>
+<style scoped lang="scss" src="../../assets/scss/document_error.scss"></style>

package/src/components/{NotOptimizedViewportModal.vue → DocumentModals/NotOptimizedViewportModal.vue}

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import Illustration from "../assets/images/NotOptimizedIllustration";
+import Illustration from "../../assets/images/NotOptimizedIllustration";
 
 export default {
   name: "NotOptimizedViewportModal",
@@ -47,5 +47,5 @@ export default {
 <style
   scoped
   lang="scss"
-  src="../assets/scss/document_viewport_modal.scss"
+  src="../../assets/scss/document_viewport_modal.scss"
 ></style>

package/src/components/DocumentModals/SplittingSuggestionsModal.vue

@@ -0,0 +1,121 @@
+<template>
+  <section ref="splittingModal" class="splitting-confirmation-modal">
+    <b-modal
+      v-model="isModalActive"
+      class="modal-400"
+      :width="500"
+      :can-cancel="[]"
+    >
+      <section class="modal-card-body split-modal">
+        <div class="header">
+          <StarIcon />
+          <p class="modal-title">
+            {{
+              splittingSuggestions && splittingSuggestions.length > 0
+                ? $t("split_modal_title")
+                : $t("prepare_document")
+            }}
+          </p>
+        </div>
+        <div ref="bodyText" class="content"></div>
+      </section>
+      <footer class="modal-card-foot">
+        <b-button @click="closeModal">
+          {{ $t("do_it_later") }}
+        </b-button>
+        <b-button type="is-primary" @click="handleReviewNow">
+          {{ $t("review_now") }}
+          <span class="recommended">{{ recommended }}</span>
+        </b-button>
+      </footer>
+    </b-modal>
+  </section>
+</template>
+
+<script>
+import { nextTick } from "vue";
+import { mapGetters, mapState } from "vuex";
+import StarIcon from "../../assets/images/StarIcon";
+
+/**
+ * This component shows a modal to inform the user about auto-splitting suggestions
+ */
+export default {
+  name: "SplittingSuggestionsModal",
+  components: {
+    StarIcon,
+  },
+  data() {
+    return {
+      isModalActive: false,
+      recommended: this.$t("recommended"),
+    };
+  },
+  computed: {
+    ...mapState("document", ["splittingSuggestions", "selectedDocument"]),
+    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
+  },
+  watch: {
+    splittingSuggestions(newValue) {
+      if (newValue) {
+        this.isModalActive = true;
+      }
+    },
+    isModalActive(newValue) {
+      if (newValue) {
+        this.$nextTick(() => {
+          if (
+            this.splittingSuggestions &&
+            this.splittingSuggestions.length > 0
+          ) {
+            this.$refs.bodyText.innerHTML = this.$t("split_modal_body", {
+              number_of_split_documents: this.splittingSuggestions.length,
+            });
+          } else {
+            this.$refs.bodyText.innerHTML = this.$t(
+              "split_modal_no_suggestions"
+            );
+          }
+        });
+      }
+    },
+  },
+  mounted() {
+    if (this.splittingSuggestions) {
+      this.isModalActive = true;
+    }
+
+    nextTick(() => {
+      if (this.recommended) {
+        this.recommended = this.recommended.toUpperCase();
+      }
+    });
+  },
+  methods: {
+    closeModal() {
+      const updatedDocument = [
+        {
+          name: this.selectedDocument.data_file_name,
+          category: this.selectedDocument.category,
+          pages: this.selectedDocument.pages,
+        },
+      ];
+
+      this.$store.dispatch("edit/editDocument", updatedDocument);
+
+      this.$store.dispatch("display/setCategorizeModalIsActive", false);
+      this.isModalActive = false;
+    },
+    handleReviewNow() {
+      this.$store.dispatch("edit/enableEditMode");
+      this.isModalActive = false;
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/splitting_confirmation_modal.scss"
+></style>

package/src/components/DocumentPage/DocumentPage.vue

@@ -4,6 +4,7 @@
     :class="[
       'pdf-page-container',
       (categorizeModalIsActive || editMode || publicView) && 'default-cursor',
+      page.number === currentPage && 'current-page',
     ]"
   >
     <NewAnnotation
@@ -150,6 +151,8 @@ export default {
   },
 
   computed: {
+    ...mapState("display", ["currentPage"]),
+
     showFocusedAnnotation() {
       return (
         this.documentAnnotationSelected &&
@@ -242,7 +245,11 @@ export default {
       "selectionFromBbox",
       "spanSelection",
     ]),
-    ...mapState("display", ["scale", "optimalScale"]),
+    ...mapState("display", [
+      "scale",
+      "optimalScale",
+      "categorizeModalIsActive",
+    ]),
     ...mapState("document", [
       "documentAnnotationSelected",
       "recalculatingAnnotations",
@@ -251,7 +258,6 @@ export default {
       "selectedDocument",
       "publicView",
       "selectedEntities",
-      "categorizeModalIsActive",
     ]),
     ...mapState("edit", ["editMode"]),
     ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
@@ -452,7 +458,7 @@ export default {
      */
     entityRect(entity) {
       let entityIsSelected = false;
-      if (this.newAnnotation) {
+      if (this.newAnnotation && this.newAnnotation.length > 0) {
         entityIsSelected = this.newAnnotation.find((selectedEntity) => {
           return (
             selectedEntity.entity.original.offset_string ===

package/src/components/DocumentPage/DummyPage.vue

@@ -20,18 +20,20 @@ import { PIXEL_RATIO } from "../../constants";
 export default {
   props: {
     width: {
-      default: 0
+      default: 0,
+      type: Number,
     },
     height: {
-      default: 0
-    }
+      default: 0,
+      type: Number,
+    },
   },
   computed: {
     ...mapState("display", ["scale"]),
     actualSizeViewport() {
       return {
         width: this.width * this.scale,
-        height: this.height * this.scale
+        height: this.height * this.scale,
       };
     },
 
@@ -39,7 +41,7 @@ export default {
       const { width: actualSizeWidth, height: actualSizeHeight } =
         this.actualSizeViewport;
       const [pixelWidth, pixelHeight] = [actualSizeWidth, actualSizeHeight].map(
-        dim => Math.ceil(dim / PIXEL_RATIO)
+        (dim) => Math.ceil(dim / PIXEL_RATIO)
       );
       return { width: pixelWidth, height: pixelHeight };
     },
@@ -47,7 +49,7 @@ export default {
     canvasStyle() {
       const { width, height } = this.scaledViewport;
       return `width: ${width}px; height: ${height}px; margin: 0 auto`;
-    }
-  }
+    },
+  },
 };
 </script>

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -11,7 +11,7 @@
         "
       >
         <ScrollingPage
-          v-for="page in editMode ? documentPagesListForEditMode : pages"
+          v-for="page in editMode ? pagesForPostprocess : pages"
           :key="page.number"
           :page="page"
           :client-height="clientHeight"
@@ -58,7 +58,7 @@ export default {
       "selectedDocument",
       "loading",
     ]),
-    ...mapState("edit", ["editMode", "documentPagesListForEditMode"]),
+    ...mapState("edit", ["editMode", "pagesForPostprocess"]),
     ...mapState("display", ["scale", "documentActionBar"]),
 
     pages() {
@@ -69,7 +69,12 @@ export default {
       }
     },
     showToolbar() {
-      return this.pages.length > 0 && this.scale && !this.documentActionBar;
+      return (
+        !this.loading &&
+        this.pages.length > 0 &&
+        this.scale &&
+        !this.documentActionBar
+      );
     },
     showActionBar() {
       return this.documentActionBar !== null;

package/src/components/DocumentThumbnails/DocumentThumbnails.vue

@@ -1,12 +1,13 @@
 <template>
-  <div class="document-pages">
+  <div ref="documentThumbnails" class="document-pages">
     <div v-if="selectedDocument">
       <div
         v-for="page in selectedDocument.pages"
+        ref="docPage"
         :key="page.id"
         :class="[
           'document-thumbnail',
-          currentPage == page.number && 'selected'
+          currentPage == page.number && 'selected',
         ]"
         @click="changePage(page.number)"
       >
@@ -16,7 +17,7 @@
               v-if="!loading && !recalculatingAnnotations"
               :class="[
                 'img-thumbnail',
-                currentPage == page.number && 'selected'
+                currentPage == page.number && 'selected',
               ]"
               :width="'40px'"
               :image-url="`${page.thumbnail_url}?${selectedDocument.downloaded_at}`"
@@ -57,19 +58,44 @@ export default {
   name: "DocumentThumbnails",
   components: {
     ServerImage,
-    LoadingThumbnail
+    LoadingThumbnail,
+  },
+  data() {
+    return {
+      thumbnailClicked: false,
+      previousScrollPosition: 0,
+    };
   },
   computed: {
     ...mapState("document", [
       "selectedDocument",
       "recalculatingAnnotations",
-      "loading"
+      "loading",
     ]),
-    ...mapState("display", ["currentPage"])
+    ...mapState("display", ["currentPage"]),
+  },
+  watch: {
+    currentPage(newPage) {
+      if (newPage && !this.thumbnailClicked) {
+        this.scrollToThumbnail();
+      }
+    },
   },
+  mounted() {
+    const scrollingPage = document.querySelector(".scrolling-document");
+
+    if (scrollingPage) {
+      scrollingPage.addEventListener("scroll", () => {
+        this.scrollToThumbnail();
+      });
+    }
+  },
+
   methods: {
     /* Change page if not the currently open and not in modal */
     changePage(pageNumber) {
+      this.thumbnailClicked = true;
+
       if (
         !this.loading &&
         !this.recalculatingAnnotations &&
@@ -80,8 +106,19 @@ export default {
           parseInt(pageNumber, 10)
         );
       }
-    }
-  }
+    },
+
+    scrollToThumbnail() {
+      // select only the active thumbnail
+      const selectedPage = this.$refs.docPage.filter((image) =>
+        image.className.includes("selected")
+      );
+
+      if (selectedPage && selectedPage[0]) {
+        selectedPage[0].scrollIntoView();
+      }
+    },
+  },
 };
 </script>
 

package/src/components/DocumentTopBar/DocumentName.vue

@@ -69,6 +69,7 @@ export default {
   props: {
     dataFileName: {
       type: String,
+      default: "",
     },
   },
   data() {