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

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -2,16 +2,12 @@
   <div :class="['document-edit', splitOverview && 'split-overview-component']">
     <div v-if="!splitOverview" class="pages-section">
       <EditPages
-        :splitting-lines="splittingLines"
-        :split-suggestions-enabled="splitSuggestionsEnabled"
+        :active-splitting-lines="activeSplittingLines"
         @change-page="changePage"
         @handle-splitting-lines="handleSplittingLines"
         @check-move="checkMove"
         @handle-drag-end="handleDragEnd"
       />
-      <div class="info-bar">
-        <SplitInfoBar v-if="splitSuggestionsEnabled" />
-      </div>
     </div>
     <div v-else class="split-overview-section">
       <SplitOverview
@@ -26,13 +22,8 @@
         @rotate-right="rotatePage"
         @rotate-all-left="handleRotationsToTheLeft"
         @rotate-all-right="handleRotationsToTheRight"
-        @handle-splitting-suggestions="applySplittingSuggestions"
-        :split-suggestions-enabled="splitSuggestionsEnabled"
       />
     </div>
-    <div class="confirmation-modal-container">
-      <EditConfirmationModal @save-changes="saveEditChanges" />
-    </div>
   </div>
 </template>
 <script>
@@ -40,8 +31,6 @@ import { mapState } from "vuex";
 import EditSidebar from "./EditSidebar";
 import SplitOverview from "./SplitOverview";
 import EditPages from "./EditPages";
-import SplitInfoBar from "./SplitInfoBar";
-import EditConfirmationModal from "./EditConfirmationModal";
 
 /**
  * This component shows a document thumbnail grid view and sidebar, to be able to edit the document.
@@ -52,29 +41,22 @@ export default {
     EditSidebar,
     SplitOverview,
     EditPages,
-    SplitInfoBar,
-    EditConfirmationModal,
   },
   data() {
     return {
-      fileName: null,
+      fileName: [],
       fileExtension: null,
-      splittingLines: [],
+      activeSplittingLines: [],
       dragging: false,
       prevPageAtIndex: null,
-      splitSuggestionsEnabled: false,
     };
   },
   computed: {
-    ...mapState("document", [
-      "recalculatingAnnotations",
-      "selectedDocument",
-      "splittingSuggestions",
-    ]),
+    ...mapState("document", ["recalculatingAnnotations", "selectedDocument"]),
     ...mapState("display", ["currentPage"]),
     ...mapState("edit", [
       "editMode",
-      "pagesForPostprocess",
+      "documentPagesListForEditMode",
       "updatedDocument",
       "splitOverview",
       "selectedPages",
@@ -83,7 +65,6 @@ export default {
   watch: {
     pages() {
       if (!this.selectedDocument) return;
-
       this.setPages();
     },
     splitOverview(newValue) {
@@ -91,18 +72,9 @@ export default {
         this.splitFileNameFromExtension();
       }
     },
-    pagesForPostprocess(newValue) {
+    documentPagesListForEditMode(newValue) {
       if (newValue) {
-        this.saveUpdatedDocuments();
-      }
-    },
-    splittingLines(newValue) {
-      const aiSplit = newValue.find((item) => item.origin === "AI");
-
-      // If there are no AI suggestions left, because of being manually removed by the user
-      // the Smart Split switch should be turned off
-      if (!aiSplit) {
-        this.splitSuggestionsEnabled = false;
+        this.saveUpdatedDocument();
       }
     },
   },
@@ -114,30 +86,16 @@ export default {
       if (!this.selectedDocument) {
         return;
       }
-
-      // set array of pages only with the data we need for postprocessing the document
-      this.$store.dispatch(
-        "edit/setPagesForPostprocess",
-        this.createPagesForPostprocess()
+      // set array of pages only with the data we need
+      const pages = this.createDocumentPagesListForEditMode();
+      this.$store.dispatch("edit/setDocumentPagesListForEditMode", pages);
+      // create array to handle the splitting
+      // length - 1 because of how many lines to split we need (last one not necessary)
+      this.activeSplittingLines = new Array(
+        this.selectedDocument.pages.length - 1
       );
-
-      // Create array with placeholder data for the splitting points
-      if (this.selectedDocument.pages.length > 0) {
-        this.selectedDocument.pages.map((page) => {
-          if (page.number === this.selectedDocument.pages.length) {
-            this.setSplittingArray(page.number, null);
-            return;
-          }
-          this.setSplittingArray(0, null);
-        });
-
-        if (this.splittingSuggestions) {
-          this.splitSuggestionsEnabled = true;
-          this.setAutomaticSplitting();
-        }
-      }
     },
-    createPagesForPostprocess() {
+    createDocumentPagesListForEditMode() {
       return this.selectedDocument.pages.map((page) => {
         return {
           id: page.id,
@@ -179,44 +137,12 @@ export default {
     },
 
     /** SPLIT */
-    setAutomaticSplitting() {
-      // map over splitting suggestions to find the page number based on the page id
-      // to update the splittingLines array with this data
-
-      this.splittingSuggestions.map((item) => {
-        const firstPage = this.selectedDocument.pages.find(
-          (page) => page.id === item.pages[0].id
-        );
-
-        if (firstPage.number === 1) {
-          // only add the active splitting line from the 1st page of the second document
-          // since it's the first splitting point
-          return;
-        }
-
-        this.handleSplittingLines(firstPage.number, "AI");
-      });
-    },
-    applySplittingSuggestions(value) {
-      // Show information bar
-      this.splitSuggestionsEnabled = value;
-
-      // Apply or remove split lines
-      this.setAutomaticSplitting();
-    },
-    setSplittingArray(pageNumber, splittingOrigin) {
-      // This function sets the splittingLines array
-      // based on splitting suggestions or no suggestions
-      this.splittingLines.push({
-        page: pageNumber,
-        origin: splittingOrigin,
-      });
-    },
     splitFileNameFromExtension() {
       if (!this.selectedDocument) return;
 
       // Save the file name and the extension in different variables
       // to be used in the next step of the splitting
+
       if (this.selectedDocument.data_file_name) {
         this.fileName = this.selectedDocument.data_file_name
           .split(".")
@@ -230,76 +156,57 @@ export default {
           .at(-1);
       }
     },
-    handleSplittingLines(page, origin) {
-      // To select and deselect the division lines
-      // Add page number & origin to specific index
-      // Or replace it with 0 (to keep the same index & array length) if it exists
-      const found = this.splittingLines.find((item) => item.page === page);
-
-      // new line added or removed based on the page clicked:
-      const newPage = { page: page, origin: origin };
-      const removedPage = { page: 0, origin: origin };
-
-      if (
-        page === this.splittingLines.length ||
-        (!this.splitSuggestionsEnabled && !found && origin === "AI")
-      ) {
-        // check if it's the last item to keep unchanged
-        // Or if splitting is switched off, but some of the suggestion lines
-        // were removed manually
-        return;
-      } else if (this.splitSuggestionsEnabled && origin === "AI") {
-        // if manual suggestions were added but we enable automatic splitting,
-        // this last one takes over
-        this.splittingLines.splice(page - 1, 1, newPage);
-      } else if (found) {
-        // If splitting is switched off and we have manual splits,
-        // those should stay unchanged
-        if (!this.splitSuggestionsEnabled && found.origin !== origin) {
-          return;
-        }
+    handleSplittingLines(page) {
+      // For splitting line purposes
+      // Add page number to specific index
+      // Or replace it with 0 (to keep the same index) if it exists
+      const found = this.activeSplittingLines.find(
+        (item) => item === page.number
+      );
 
-        this.splittingLines.splice(page - 1, 1, removedPage);
+      if (found) {
+        this.activeSplittingLines.splice(page.number - 1, 1, 0);
       } else {
-        this.splittingLines.splice(page - 1, 1, newPage);
+        this.activeSplittingLines.splice(page.number - 1, 1, page.number);
       }
 
-      this.saveUpdatedDocuments();
+      this.saveUpdatedDocument();
     },
-    saveUpdatedDocuments() {
+    saveUpdatedDocument() {
       this.splitFileNameFromExtension();
 
-      const clickedLines = this.splittingLines.filter(
-        (item) => item.page !== 0
+      // Check how many sub docs we have
+      const subDocuments = this.activeSplittingLines.filter(
+        (item) => item !== 0
       );
 
-      const newDocuments = this.createEachNewDocument(
-        clickedLines,
-        clickedLines.length
-      );
-
-      // // Set the state to the created array
-      this.$store.dispatch("edit/setUpdatedDocument", newDocuments);
-    },
-    createEachNewDocument(clickedLines, length) {
-      const documents = new Array(length);
-
-      for (let i = 0; i < length; i++) {
-        const newDocument = {
-          name: this.handleNewDocumentName(i),
-          category: this.handleNewDocumentCategory(i, clickedLines),
-          pages: this.handleNewDocumentPages(i, clickedLines),
+      // Create array of objects
+      // with a fixed size based on how many sub documents are currently
+      const pageObjectArray = new Array(subDocuments.length + 1);
+
+      // Loop over the created array
+      // for each iteration we create the page object with the correponding data
+      for (let i = 0; i < pageObjectArray.length; i++) {
+        const pageObject = {
+          name: this.handleFileName(i),
+          category: this.selectedDocument.category,
+          pages: this.handleSubPages(i, subDocuments),
         };
 
-        // we replace the "undefined" with the created object
-        documents.splice(i, 1, newDocument);
+        // Then we replace the "undefined" with the created object
+        pageObjectArray.splice(i, 1, pageObject);
       }
 
-      return documents;
+      // Set the state to the created array
+      this.$store.dispatch("edit/setUpdatedDocument", pageObjectArray);
     },
-    handleNewDocumentName(index) {
+    handleFileName(index) {
       let newFileName;
 
+      // Return original file name,
+      // file name + copy,
+      // or file name + copy + number
+      // based on where the object will be located in the array
       if (index === 0) {
         newFileName = this.selectedDocument.data_file_name;
       } else if (index === 1) {
@@ -309,95 +216,50 @@ export default {
       }
       return newFileName;
     },
-    handleNewDocumentCategory(index, clickedLines) {
-      if (clickedLines[index].origin && clickedLines[index].origin === "AI") {
-        // get the index of the new document in the splitting suggestions
-        // to return its category
-        const i = this.indexOfSplittingSuggestion(index, clickedLines);
-
-        return this.splittingSuggestions[i].category;
-      } else {
-        return this.selectedDocument.category;
-      }
-    },
-    handleNewDocumentPages(index, clickedLines) {
-      // assign the correct pages to each new document
+    handleSubPages(index, splittingLine) {
+      // assign the correct pages to each object
       let pages;
 
       if (index === 0) {
-        pages = this.pagesForPostprocess.slice(0, clickedLines[index].page);
+        pages = this.documentPagesListForEditMode.slice(
+          0,
+          splittingLine[index]
+        );
       } else {
-        if (!clickedLines[index].page) {
-          pages = this.pagesForPostprocess.slice(clickedLines[index - 1].page);
+        if (!splittingLine[index]) {
+          pages = this.documentPagesListForEditMode.slice(
+            splittingLine[index - 1]
+          );
         } else {
-          pages = this.pagesForPostprocess.slice(
-            clickedLines[index - 1].page,
-            clickedLines[index].page
+          pages = this.documentPagesListForEditMode.slice(
+            splittingLine[index - 1],
+            splittingLine[index]
           );
         }
       }
-
       return pages;
     },
-    indexOfSplittingSuggestion(index, clickedLines) {
-      const foundPage = this.selectedDocument.pages.find(
-        (page) => page.number === clickedLines[index].page
-      );
-
-      const singleSplittingSuggestion = this.splittingSuggestions.find(
-        (item) => item.pages[0].id === foundPage.id
-      );
-
-      return this.splittingSuggestions.indexOf(singleSplittingSuggestion);
-    },
 
     /** SORT */
     checkMove(e) {
       // Save the page placed originally where the page we are dragging will go
-      this.prevPageAtIndex = this.pagesForPostprocess.find(
+      this.prevPageAtIndex = this.documentPagesListForEditMode.find(
         (page) =>
-          this.pagesForPostprocess.indexOf(page) ===
+          this.documentPagesListForEditMode.indexOf(page) ===
           e.draggedContext.futureIndex
       );
     },
     handleDragEnd() {
       // Update page numbers
-      const pages = this.pagesForPostprocess.map((page) => {
-        const index = this.pagesForPostprocess.indexOf(page);
+      const pages = this.documentPagesListForEditMode.map((page) => {
+        const index = this.documentPagesListForEditMode.indexOf(page);
         return {
           ...page,
           number: index + 1,
         };
       });
 
-      this.$store.dispatch("edit/setPagesForPostprocess", pages);
-    },
-
-    /** SUBMIT CHANGES */
-    // Send update request to the backend
-    saveEditChanges() {
-      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"),
-          });
-        });
-
-      this.closeEditMode();
-    },
-
-    closeEditMode() {
-      this.$store.dispatch("edit/disableEditMode");
-      this.$store.dispatch("edit/setSplitOverview", false);
-      this.$store.dispatch("edit/setUpdatedDocument", null);
-      this.$store.dispatch("edit/setSelectedPages", null);
-      this.$nextTick(() => {
-        // reset to first page
-        this.$store.dispatch("display/updateCurrentPage", 1);
-      });
+      this.$store.dispatch("edit/setDocumentPagesListForEditMode", pages);
     },
   },
 };

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);