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

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -105,18 +105,9 @@ export default {
   },
   computed: {
     ...mapState("category", ["categories"]),
-    ...mapState("document", [
-      "selectedDocument",
-      "categorizeModalIsActive",
-      "splittingSuggestions",
-    ]),
+    ...mapState("document", ["selectedDocument"]),
     ...mapGetters("category", ["category", "projectHasSingleCategory"]),
     ...mapGetters("document", ["categorizationIsConfirmed"]),
-
-    singleCategoryInProject() {
-      // if only 1 category in the project, we don't enable the dropdown
-      return this.categories && this.categories.length === 1;
-    },
   },
   watch: {
     selectedDocument(newValue) {
@@ -136,13 +127,6 @@ export default {
     show(newValue) {
       this.$store.dispatch("display/setCategorizeModalIsActive", newValue);
     },
-    categorizeModalIsActive(newValue) {
-      // Show modal after split suggestion modal
-      // if no category confirmed
-      if (newValue) {
-        this.show = newValue && !this.categorizationIsConfirmed;
-      }
-    },
   },
   mounted() {
     this.setDocumentValues();
@@ -175,11 +159,7 @@ export default {
         }
 
         this.selectedCategory = category;
-        this.documentCategory = category;
-
-        // By default, if the document has no category, the categorize modal is shown
-        // But if there is a category, we also need to check if there are splitting suggestions or not
-        this.show = !category || (category && !this.splittingSuggestions);
+        this.show = !this.categorizationIsConfirmed;
       }
     },
     canCloseModal() {

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -14,9 +14,7 @@
 
     <!-- When there's no annotations in the label -->
     <div v-else-if="annotationSets.length === 0">
-      <CategorizeModal
-        v-if="!publicView && !waitingForSplittingConfirmation(selectedDocument)"
-      />
+      <CategorizeModal v-if="!publicView" />
       <EmptyState />
     </div>
 
@@ -27,9 +25,7 @@
         missingAnnotations.length && !publicView && 'showing-rejected',
       ]"
     >
-      <CategorizeModal
-        v-if="!publicView && !waitingForSplittingConfirmation(selectedDocument)"
-      />
+      <CategorizeModal v-if="!publicView" />
       <div
         v-for="(annotationSet, indexGroup) in annotationSets"
         :key="indexGroup"
@@ -127,13 +123,9 @@ export default {
       "loading",
       "labels",
       "selectedDocument",
-      "splittingSuggestions",
     ]),
     ...mapGetters("category", ["category"]),
-    ...mapGetters("document", [
-      "numberOfAnnotationSetGroup",
-      "waitingForSplittingConfirmation",
-    ]),
+    ...mapGetters("document", ["numberOfAnnotationSetGroup"]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
     },

package/src/components/DocumentCategory.vue

@@ -29,7 +29,11 @@
               {{ $t("category") }}
             </p>
             <div class="category-name">
-              {{ setCategoryDefaultText }}
+              {{
+                !splitMode
+                  ? categoryName(selectedDocument.category)
+                  : categoryName(updatedDocument[index].category)
+              }}
             </div>
           </div>
           <div :class="[!splitMode && 'caret-section']">
@@ -98,18 +102,6 @@ export default {
     ...mapState("document", ["selectedDocument", "annotations"]),
     ...mapState("category", ["categories"]),
     ...mapState("edit", ["editMode", "updatedDocument"]),
-
-    setCategoryDefaultText() {
-      if (!this.splitMode) {
-        return this.categoryName(this.selectedDocument.category);
-      } else {
-        const categoryName = this.categoryName(
-          this.updatedDocument[this.index].category
-        );
-
-        return categoryName ? categoryName : this.$t("choose_category");
-      }
-    },
   },
   watch: {
     categories(newValue) {

package/src/components/DocumentDashboard.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dashboard">
     <DocumentTopBar />
-    <div :class="['dashboard-viewer', splitOverview ? 'edit-mode' : '']">
+    <div :class="['dashboard-viewer', editMode ? 'edit-mode' : '']">
       <DocumentThumbnails v-if="!editMode" ref="documentPages" />
       <ScrollingDocument ref="scrollingDocument" class="dashboard-document" />
       <DocumentAnnotations v-if="!editMode" ref="annotations" />
@@ -18,7 +18,7 @@
       </transition>
     </div>
     <div v-if="showDocumentError" class="error-modal">
-      <DocumentErrorModal />
+      <DocumentError />
     </div>
     <div v-if="!optimalResolution" class="not-optimized">
       <NotOptimizedViewportModal />
@@ -28,13 +28,6 @@
         {{ $t("resolution_not_supported") }}
       </div>
     </div>
-    <div
-      v-if="
-        selectedDocument && waitingForSplittingConfirmation(selectedDocument)
-      "
-    >
-      <SplittingSuggestionsModal />
-    </div>
   </div>
 </template>
 
@@ -46,9 +39,8 @@ import { DocumentThumbnails } from "./DocumentThumbnails";
 import { DocumentAnnotations } from "./DocumentAnnotations";
 import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
-import NotOptimizedViewportModal from "../components/DocumentModals/NotOptimizedViewportModal";
-import DocumentErrorModal from "../components/DocumentModals/DocumentErrorModal";
-import SplittingSuggestionsModal from "../components/DocumentModals/SplittingSuggestionsModal";
+import NotOptimizedViewportModal from "./NotOptimizedViewportModal";
+import DocumentError from "./DocumentError";
 
 /**
  * This component shows the PDF pages in a scrolling component and
@@ -64,8 +56,7 @@ export default {
     DocumentEdit,
     ErrorMessage,
     NotOptimizedViewportModal,
-    DocumentErrorModal,
-    SplittingSuggestionsModal,
+    DocumentError,
   },
   data() {
     return {
@@ -86,11 +77,9 @@ export default {
       "showDocumentError",
       "errorMessageWidth",
       "selectedDocument",
-      "splittingSuggestions",
     ]),
-    ...mapState("edit", ["editMode", "splitOverview"]),
+    ...mapState("edit", ["editMode"]),
     ...mapGetters("display", ["isMinimumWidth"]),
-    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
   watch: {
     selectedDocument(newDocument, oldDocument) {

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,127 +137,72 @@ 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 && item.pages.length > 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;
+      if (!this.selectedDocument && !this.selectedDocument.data_file_name)
+        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(".")
-          .slice(0, -1)
-          .join(".");
-      }
-
-      if (this.selectedDocument.data_file_name) {
-        this.fileExtension = this.selectedDocument.data_file_name
-          .split(".")
-          .at(-1);
-      }
+      this.fileName = this.selectedDocument.data_file_name
+        .split(".")
+        .slice(0, -1)
+        .join(".");
+
+      this.fileExtension = this.selectedDocument.data_file_name
+        .split(".")
+        .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
-      );
-
-      const newDocuments = this.createEachNewDocument(
-        clickedLines,
-        clickedLines.length
+      // Check how many sub docs we have
+      const subDocuments = this.activeSplittingLines.filter(
+        (item) => item !== 0
       );
 
-      // // 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 +212,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);
     },
   },
 };