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

package/src/components/DocumentEdit/EditSidebar.vue

@@ -1,75 +1,104 @@
 <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 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 +108,24 @@ 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.$nextTick(() => {
+      this.switchStatus = this.splitSuggestionsEnabled;
+      this.tooltipInfo = this.$t("no_splitting_suggestions");
+      if (this.newText) {
+        this.newText = this.$t("new").toUpperCase();
+      }
+    });
   },
   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

@@ -112,7 +112,7 @@ export default {
   },
   computed: {
     ...mapState("document", ["selectedDocument", "pages"]),
-    ...mapState("edit", ["updatedDocument", "documentPagesListForEditMode"]),
+    ...mapState("edit", ["updatedDocument", "pagesForPostprocess"]),
   },
   methods: {
     handleBackButton() {
@@ -162,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
       );
 
@@ -174,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,120 @@
+<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 { 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;
+    }
+
+    this.$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/ActionBar.vue

@@ -8,7 +8,7 @@
         {{ documentActionBar.text }}
       </div>
       <div v-if="documentActionBar.action" class="action-button">
-        <ActionButtons
+        <AnnotationActionButtons
           :save-btn="documentActionBar.action !== null"
           :is-loading="documentActionBar.loading"
           :action-bar="true"
@@ -21,14 +21,14 @@
 
 <script>
 import { mapState } from "vuex";
-import ActionButtons from "../DocumentAnnotations/ActionButtons";
+import AnnotationActionButtons from "../DocumentAnnotations/AnnotationActionButtons";
 import ActionIcon from "../../assets/images/ActionIcon";
 
 export default {
   name: "ActionBar",
   components: {
     ActionIcon,
-    ActionButtons,
+    AnnotationActionButtons,
   },
   computed: {
     ...mapState("display", ["documentActionBar"]),

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -11,11 +11,12 @@
         "
       >
         <ScrollingPage
-          v-for="page in editMode ? documentPagesListForEditMode : pages"
+          v-for="page in editMode ? pagesForPostprocess : pages"
           :key="page.number"
           :page="page"
           :client-height="clientHeight"
           :scroll-top="scrollTop"
+          ref="scrollingPage"
           class="scrolling-page"
           @page-jump="onPageJump"
         />
@@ -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,
     };
   },
 
@@ -58,8 +61,18 @@ export default {
       "selectedDocument",
       "loading",
     ]),
-    ...mapState("edit", ["editMode", "documentPagesListForEditMode"]),
-    ...mapState("display", ["scale", "documentActionBar"]),
+    ...mapState("edit", [
+      "editMode",
+      "documentPagesListForEditMode",
+      "pagesForPostprocess",
+    ]),
+    ...mapState("display", [
+      "scale",
+      "documentActionBar",
+      "pageChangedFromThumbnail",
+      "currentPage",
+    ]),
+    ...mapGetters("display", ["visiblePageRange"]),
 
     pages() {
       if (this.selectedDocument) {
@@ -85,6 +98,9 @@ export default {
       this.scrollTop = 0;
     },
   },
+  mounted() {
+    this.$refs.scrollingDocument.addEventListener("scroll", this.handleScroll);
+  },
 
   methods: {
     updateScrollBounds() {
@@ -102,6 +118,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();
       }
     },