@konfuzio/document-validation-ui 0.1.5-automatic-document-splitting-3 → 0.1.5-styles-refactor

package/src/components/DocumentEdit/EditPages.vue

@@ -48,29 +48,23 @@
         <div
           :class="[
             'splitting-lines',
-            splittingLines &&
-              splittingLines[index].page === page.number &&
+            activeSplittingLines &&
+              activeSplittingLines[index] === page.number &&
               'active-split',
           ]"
-          @click="handleSplittingLines(page.number, 'manual')"
+          @click="handleSplittingLines(page)"
         >
           <div class="scissors-icon">
             <b-icon icon="scissors" class="is-small" />
           </div>
           <div
-            v-if="splittingLines && splittingLines[index].page === page.number"
+            v-if="
+              activeSplittingLines &&
+              activeSplittingLines[index] === page.number
+            "
             class="lines"
           >
-            <SplitZigZag
-              :color="
-                splittingLines &&
-                splittingLines[index].origin &&
-                splittingLines[index].origin === 'AI' &&
-                splitSuggestionsEnabled
-                  ? 'green'
-                  : 'dark'
-              "
-            />
+            <SplitZigZag />
           </div>
           <div v-else class="lines">
             <SplitLines />
@@ -104,14 +98,10 @@ export default {
     draggable,
   },
   props: {
-    splittingLines: {
+    activeSplittingLines: {
       type: Array,
       default: null,
     },
-    splitSuggestionsEnabled: {
-      type: Boolean,
-      default: false,
-    },
   },
   data() {
     return {
@@ -119,41 +109,39 @@ export default {
       selected: null,
     };
   },
-
   computed: {
     ...mapState("document", [
       "pages",
       "recalculatingAnnotations",
       "selectedDocument",
-      "splittingSuggestions",
     ]),
     ...mapState("edit", [
       "editMode",
-      "pagesForPostprocess",
+      "documentPagesListForEditMode",
       "splitOverview",
       "selectedPages",
       "splitOverview",
     ]),
   },
   watch: {
-    pagesForPostprocess(newValue, oldValue) {
+    documentPagesListForEditMode(newValue, oldValue) {
       if (newValue !== oldValue) {
         this.editPages = newValue;
       }
     },
     editPages(newValue, oldValue) {
       if (newValue !== oldValue) {
-        this.$store.dispatch("edit/setPagesForPostprocess", newValue);
+        this.$store.dispatch("edit/setDocumentPagesListForEditMode", newValue);
       }
     },
     splitOverview(newValue) {
       if (newValue) {
-        this.editPages = this.pagesForPostprocess;
+        this.editPages = this.documentPagesListForEditMode;
       }
     },
   },
   mounted() {
-    this.editPages = this.pagesForPostprocess;
+    this.editPages = this.documentPagesListForEditMode;
   },
   methods: {
     handlePageChange(pageNumber) {
@@ -196,10 +184,11 @@ export default {
     },
     getRotation(pageId) {
       // rotate page
-      return this.pagesForPostprocess?.find((p) => p.id === pageId)?.angle;
+      return this.documentPagesListForEditMode?.find((p) => p.id === pageId)
+        ?.angle;
     },
-    handleSplittingLines(page, origin) {
-      this.$emit("handle-splitting-lines", page, origin);
+    handleSplittingLines(page) {
+      this.$emit("handle-splitting-lines", page);
     },
     checkMove(event) {
       this.$emit("check-move", event);

package/src/components/DocumentEdit/EditSidebar.vue

@@ -1,105 +1,75 @@
 <template>
   <div class="edit-sidebar">
-    <div class="buttons-container">
-      <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"
-        />
+    <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">
         <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 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 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>
     </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) {
@@ -109,26 +79,6 @@ 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/SplitOverview.vue

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

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

@@ -29,10 +29,11 @@
 </template>
 
 <script>
-import ErrorIcon from "../../assets/images/ErrorIcon";
+import { mapState } from "vuex";
+import ErrorIcon from "../assets/images/ErrorIcon";
 
 export default {
-  name: "DocumentErrorModal",
+  name: "DocumentError",
   components: {
     ErrorIcon,
   },
@@ -53,4 +54,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/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

@@ -11,8 +11,9 @@
         "
       >
         <ScrollingPage
-          v-for="page in editMode ? pagesForPostprocess : pages"
+          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,
     };
   },
 
@@ -58,8 +61,14 @@ export default {
       "selectedDocument",
       "loading",
     ]),
-    ...mapState("edit", ["editMode", "pagesForPostprocess"]),
-    ...mapState("display", ["scale", "documentActionBar"]),
+    ...mapState("edit", ["editMode", "documentPagesListForEditMode"]),
+    ...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/components/DocumentTopBar/DocumentTopBarButtons.vue

@@ -38,7 +38,7 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from "vuex";
+import { mapState } from "vuex";
 import ActionButtons from "../DocumentAnnotations/ActionButtons";
 
 export default {
@@ -83,6 +83,7 @@ export default {
     this.finishDisabled = !this.finishedReview;
   },
   methods: {
+    /** EDIT MODE */
     closeEditMode() {
       this.$store.dispatch("edit/disableEditMode");
       this.$store.dispatch("edit/setSplitOverview", false);
@@ -104,11 +105,24 @@ export default {
         // Enable the "next" button to go to the overview
         this.$store.dispatch("edit/setSplitOverview", true);
         this.$store.dispatch("edit/setSelectedPages", null);
-      } else {
-        // If we are in the overview (so more than 1 doc)
-        // or in the edit mode (only 1 doc)
-        // Show confirmation modal to user
-        this.$store.dispatch("edit/setShowEditConfirmationModal", true);
+      }
+
+      // If we are in the overview (so more than 1 doc)
+      // or in the edit mode (only 1 doc)
+      else if (this.updatedDocument) {
+        // Send update request to the backend
+        this.$store
+          .dispatch("edit/editDocument", this.updatedDocument)
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("edit_error"),
+            });
+          });
+
+        // Close edit mode
+        this.closeEditMode();
       }
     },
     handleFinishReview() {

package/src/components/{DocumentModals/NotOptimizedViewportModal.vue → 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/locales/de.json

@@ -110,21 +110,8 @@
   "new_multi_ann_description": "Wählen Sie ein Datenmodell aus den vorhandenen aus und deaktivieren Sie dann die Labels, die in diesem Dokument nicht vorhanden sind.",
   "drag_drop_columns_multi_ann": "Drag and Drop, um die Reihenfolge der Labels zu ändern",
   "error_creating_multi_ann": "Nicht alle Annotationen wurden erfolgreich erstellt.",
+  "disabled_finish_review": "Der Abschluss der Dokumentenprüfung ist erst möglich, nachdem alle Annotationen überarbeitet wurden, unabhängig davon, ob sie akzeptiert oder abgelehnt wurden.",
   "no_multi_ann_labelset_model": "Es gibt keine verfügbaren Label Sets, die mehrfach in diesem Dokument zu finden sind. Weitere Informationen finden Sie unter <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>diesem Link</a>.",
   "single_category_in_project": "Das aktuelle Projekt hat nur eine Kategorie. Um sie ändern zu können, sollte die neue zuerst dem Projekt hinzugefügt werden. Einzelheiten dazu finden Sie unter <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>diesem Link</a>.",
-  "approved_annotations": "Die Kategorie kann nicht geändert werden, da bereits akzeptierte Annotationen oder manuell erstellte Annotationen zu diesem Dokument vorhanden sind.",
-  "disabled_finish_review": "Der Abschluss der Dokumentenprüfung ist erst möglich, nachdem alle Annotationen überarbeitet wurden, unabhängig davon, ob sie akzeptiert oder abgelehnt wurden.",
-  "split_modal_title": "Dokument aufteilen",
-  "split_modal_body": "Wir haben Ihre Datei gescannt und <strong>{number_of_split_documents}</strong> verschiedene Dokumente gefunde. <strong>Wir empfehlen dringend,</strong> sie zu diesem Zeitpunkt aufzuteilen, da sonst alle Fortschritte, die Sie gemacht haben, aufgrund der erneuten Extraktion der Dokumentdaten verloren gehen.",
-  "do_it_later": "Ich werde es später machen",
-  "review_now": "Jetzt reviewen",
-  "recommended": "Empfohlen",
-  "smart_split": "Smart Split",
-  "smart_split_suggestions": "Unsere Smart Split-Vorschläge sind grün hervorgehoben",
-  "no_splitting_suggestions": "Dieses Dokument enthält keine Split-Vorschläge",
-  "confirm_splitting": "Sind Sie sicher, dass Sie die Änderungen bestätigen möchten?",
-  "splitting_warning": "Beachten Sie bitte, dass alle Annotationen, die Sie in diesem Dokument gemacht haben, nicht gespeichert werden, wenn Sie fortfahren.",
-  "no": "Nein",
-  "yes": "Ja",
-  "split_modal_no_suggestions": "Do you need to split the document? <strong>We strongly recommend</strong> splitting it at this stage, otherwise all the progress you’ve made will be lost in the future."
+  "approved_annotations": "Die Kategorie kann nicht geändert werden, da bereits akzeptierte Annotationen oder manuell erstellte Annotationen zu diesem Dokument vorhanden sind."
 }

package/src/locales/en.json

@@ -114,19 +114,5 @@
   "disabled_finish_review": "Finishing the document review is only possible after all annotations have been revised, whether they are accepted or rejected.",
   "no_multi_ann_labelset_model": "There are no available label sets that can be found multiple times in this document. For more details, you can visit <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>this link</a>.",
   "single_category_in_project": "The current project has only one category. To be able to change it, the new one should be first added to the project. For details on how to do this, visit <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>this link</a>.",
-  "approved_annotations": "It is not possible to change the current category since the document has approved or manually created annotations.",
-  "split_modal_title": "Split the document",
-  "split_modal_body": "We've scanned your file and found <strong>{number_of_split_documents}</strong> different documents. <strong>We strongly recommend</strong> splitting it at this stage, otherwise all the progress you’ve made will be lost due to document data re-extraction.",
-  "do_it_later": "I'll do it later",
-  "review_now": "Review now",
-  "recommended": "Recommended",
-  "smart_split": "Smart Split",
-  "smart_split_suggestions": "Our Smart Split suggestions are highlighted in green",
-  "no_splitting_suggestions": "This document does not have splitting suggestions",
-  "confirm_splitting": "Are you sure you want to confirm the changes?",
-  "splitting_warning": "Be aware that any annotations you have made in this document will not be saved if you proceed.",
-  "no": "No",
-  "yes": "Yes",
-  "prepare_document": "Prepare the document",
-  "split_modal_no_suggestions": "Do you need to split the document? <strong>We strongly recommend</strong> splitting it at this stage, otherwise all the progress you’ve made will be lost in the future."
+  "approved_annotations": "It is not possible to change the current category since the document has approved or manually created annotations."
 }