@konfuzio/document-validation-ui 0.1.5-automatic-document-splitting-2 → 0.1.5-pre-release-1

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/ScrollingDocument.vue

@@ -11,7 +11,7 @@
         "
       >
         <ScrollingPage
-          v-for="page in editMode ? pagesForPostprocess : pages"
+          v-for="page in editMode ? documentPagesListForEditMode : pages"
           :key="page.number"
           :page="page"
           :client-height="clientHeight"
@@ -58,7 +58,7 @@ export default {
       "selectedDocument",
       "loading",
     ]),
-    ...mapState("edit", ["editMode", "pagesForPostprocess"]),
+    ...mapState("edit", ["editMode", "documentPagesListForEditMode"]),
     ...mapState("display", ["scale", "documentActionBar"]),
 
     pages() {

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."
 }

package/src/locales/es.json

@@ -112,18 +112,5 @@
   "disabled_finish_review": "Solo es posible finalizar la revisión del documento si todas las anotaciones han sido revisadas, ya sea aceptadas o rechazadas.",
   "no_multi_ann_labelset_model": "En este documento no hay grupos de etiquetas múltiples disponibles. Para más información, haz clic en <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>este enlace</a>.",
   "single_category_in_project": "Este proyecto solo tiene una categoría. Para poder modificarla, es necesario agregar esta nueva categoría al proyecto. Para más información, visita <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>este enlace</a>.",
-  "approved_annotations": "No es posible cambiar la categoría, ya que existen anotaciones aceptadas o creadas manualmente en este documento.",
-  "split_modal_title": "Dividir el documento",
-  "split_modal_body": "Hemos escaneado tu documento y hemos encontrado <strong>{number_of_split_documents}</strong> documentos diferentes. <strong>Te recomendamos</strong> dividir el documento en esta etapa, ya que de lo contrario se perderá el progreso logrado debido a una nueva extracción de los datos del documento.",
-  "do_it_later": "Lo haré luego",
-  "review_now": "Revisar ahora",
-  "recommended": "Recomendado",
-  "smart_split": "División Inteligente",
-  "smart_split_suggestions": "Nuestras sugerencias de División Inteligente están marcadas en color verde",
-  "no_splitting_suggestions": "Este documento no tiene sugerencias de división",
-  "confirm_splitting": "¿Seguro que quieres confirmar los cambios?",
-  "splitting_warning": "Ten en cuenta que se perderán las anotaciones que hayas confirmado en el documento.",
-  "no": "No",
-  "yes": "Sí",
-  "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": "No es posible cambiar la categoría, ya que existen anotaciones aceptadas o creadas manualmente en este documento."
 }

package/src/store/document.js

@@ -28,7 +28,6 @@ const state = {
   newAcceptedAnnotations: null,
   selectedEntities: null,
   serverError: false,
-  splittingSuggestions: false,
 };
 
 const getters = {
@@ -420,20 +419,6 @@ const getters = {
     }
   },
 
-  /**
-   * If automatic splitting is enabled for the project
-   */
-  waitingForSplittingConfirmation: () => (document) => {
-    return document && document.status_data === 41;
-  },
-
-  /**
-   * Show the Smart Split switch or not
-   */
-  documentHasProposedSplit: () => (document) => {
-    return document.proposed_split && document.proposed_split.length > 0;
-  },
-
   /**
    * Joins all strings in a multi-entity Annotation array
    * to look like a single string
@@ -604,9 +589,6 @@ const actions = {
   setSelectedEntities: ({ commit }, entities) => {
     commit("SET_SELECTED_ENTITIES", entities);
   },
-  setSplittingSuggestions: ({ commit }, value) => {
-    commit("SET_SPLITTING_SUGGESTIONS", value);
-  },
 
   /**
    * Actions that use HTTP requests always return the axios promise,
@@ -653,10 +635,6 @@ const actions = {
             });
           }
 
-          if (getters.documentHasProposedSplit(response.data)) {
-            commit("SET_SPLITTING_SUGGESTIONS", response.data.proposed_split);
-          }
-
           categoryId = response.data.category;
           // TODO: add this validation to a method
           isRecalculatingAnnotations = response.data.labeling_available !== 1;
@@ -738,7 +716,7 @@ const actions = {
       HTTP.post(`/annotations/`, annotation)
         .then(async (response) => {
           if (response.status === 201) {
-            await dispatch("fetchMissingAnnotations");
+            dispatch("fetchMissingAnnotations");
             commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
 
             if (!getters.annotationSetExists(response.data.annotation_set)) {
@@ -833,27 +811,25 @@ const actions = {
   },
 
   fetchMissingAnnotations: ({ commit, state, getters }) => {
-    return new Promise((resolve, reject) => {
-      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(response);
-        })
-        .catch((error) => {
-          reject(error.response);
-          console.log(error);
-        });
-    });
+    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);
+      });
   },
 
   addMissingAnnotations: ({ commit, dispatch }, missingAnnotations) => {
     return new Promise((resolve, reject) => {
-      HTTP.post(`/missing-annotations/`, missingAnnotations)
-        .then(async (response) => {
+      return HTTP.post(`/missing-annotations/`, missingAnnotations)
+        .then((response) => {
           if (response.status === 201) {
             commit("SET_REJECTED_MISSING_ANNOTATIONS", null);
-            await dispatch("fetchMissingAnnotations");
+            dispatch("fetchMissingAnnotations");
           }
 
           resolve(response);
@@ -867,10 +843,10 @@ const actions = {
 
   deleteMissingAnnotation: ({ commit, getters, dispatch }, id) => {
     return new Promise((resolve) => {
-      HTTP.delete(`/missing-annotations/${id}/`)
-        .then(async (response) => {
+      return HTTP.delete(`/missing-annotations/${id}/`)
+        .then((response) => {
           if (response.status === 204) {
-            await dispatch("fetchMissingAnnotations");
+            dispatch("fetchMissingAnnotations");
             resolve(true);
           }
         })
@@ -911,11 +887,8 @@ const actions = {
         `documents/${state.documentId}/?fields=status_data,labeling_available`
       )
         .then((response) => {
-          if (
-            getters.isDocumentReadyToBeReviewed(response.data) ||
-            getters.waitingForSplittingConfirmation(response.data)
-          ) {
-            // ready or has splitting suggestions
+          if (getters.isDocumentReadyToBeReviewed(response.data)) {
+            // ready
             return resolve(true);
           } else if (getters.documentHadErrorDuringExtraction(response.data)) {
             // error
@@ -1186,9 +1159,6 @@ const mutations = {
   UPDATE_FILE_NAME: (state, value) => {
     state.selectedDocument.data_file_name = value;
   },
-  SET_SPLITTING_SUGGESTIONS: (state, array) => {
-    state.splittingSuggestions = array;
-  },
 };
 
 export default {