@konfuzio/document-validation-ui 0.1.14 → 0.1.16-dev.0

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -1,36 +1,51 @@
 <template>
-  <div :class="['document-edit', splitOverview && 'split-overview-component']">
-    <div v-if="!splitOverview" class="pages-section">
+  <div
+    :class="[
+      'document-edit',
+      renameAndCategorize && 'rename-and-categorize-component',
+    ]"
+  >
+    <div v-if="!renameAndCategorize" class="pages-section">
       <EditPages
-        :active-splitting-lines="activeSplittingLines"
-        @change-page="changePage"
+        :splitting-lines="splittingLines"
+        :split-suggestions-enabled="splitSuggestionsEnabled"
         @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
+    <div v-else class="rename-and-categorize-section">
+      <RenameAndCategorize
         :file-name="fileName"
         :file-extension="fileExtension"
         @change-page="changePage"
       />
     </div>
-    <div v-if="!splitOverview" class="sidebar">
+    <div v-if="!renameAndCategorize" class="sidebar">
       <EditSidebar
-        @rotate-left="rotatePage"
-        @rotate-right="rotatePage"
+        :split-suggestions-enabled="splitSuggestionsEnabled"
+        @rotate="rotatePage"
         @rotate-all-left="handleRotationsToTheLeft"
         @rotate-all-right="handleRotationsToTheRight"
+        @handle-splitting-suggestions="applySplittingSuggestions"
       />
     </div>
+    <div class="confirmation-modal-container">
+      <EditConfirmationModal @save-changes="saveEditChanges" />
+    </div>
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import EditSidebar from "./EditSidebar";
-import SplitOverview from "./SplitOverview";
+import RenameAndCategorize from "./RenameAndCategorize";
 import EditPages from "./EditPages";
+import SplitInfoBar from "./SplitInfoBar";
+import EditConfirmationModal from "./EditConfirmationModal";
+import { navigateToDocumentsList } from "../../utils/utils";
 
 /**
  * This component shows a document thumbnail grid view and sidebar, to be able to edit the document.
@@ -39,44 +54,66 @@ export default {
   name: "DocumentEdit",
   components: {
     EditSidebar,
-    SplitOverview,
+    RenameAndCategorize,
     EditPages,
+    SplitInfoBar,
+    EditConfirmationModal,
   },
   data() {
     return {
-      fileName: [],
+      fileName: null,
       fileExtension: null,
-      activeSplittingLines: [],
+      splittingLines: [],
       dragging: false,
       prevPageAtIndex: null,
+      splitSuggestionsEnabled: false,
     };
   },
   computed: {
-    ...mapState("document", ["recalculatingAnnotations", "selectedDocument"]),
+    ...mapState("document", [
+      "recalculatingAnnotations",
+      "selectedDocument",
+      "splittingSuggestions",
+      "pages",
+    ]),
     ...mapState("display", ["currentPage"]),
     ...mapState("edit", [
       "editMode",
-      "documentPagesListForEditMode",
+      "pagesForPostprocess",
       "updatedDocument",
-      "splitOverview",
+      "renameAndCategorize",
       "selectedPages",
+      "submitEditChanges",
     ]),
+    ...mapState("project", ["projectId", "documentsListPath", "currentUser"]),
+    ...mapGetters("edit", ["documentShouldBePostprocessed"]),
+    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
   watch: {
-    pages() {
-      if (!this.selectedDocument) return;
-      this.setPages();
-    },
-    splitOverview(newValue) {
+    renameAndCategorize(newValue) {
       if (newValue) {
         this.splitFileNameFromExtension();
       }
     },
-    documentPagesListForEditMode(newValue) {
+    pagesForPostprocess(newValue, oldValue) {
       if (newValue) {
-        this.saveUpdatedDocument();
+        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;
       }
     },
+    submitEditChanges(newValue) {
+      if (!newValue) return;
+
+      this.saveEditChanges();
+    },
   },
   mounted() {
     this.setPages();
@@ -86,16 +123,30 @@ export default {
       if (!this.selectedDocument) {
         return;
       }
-      // 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
+
+      // set array of pages only with the data we need for postprocessing the document
+      this.$store.dispatch(
+        "edit/setPagesForPostprocess",
+        this.createPagesForPostprocess()
       );
+
+      // 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();
+        }
+      }
     },
-    createDocumentPagesListForEditMode() {
+    createPagesForPostprocess() {
       return this.selectedDocument.pages.map((page) => {
         return {
           id: page.id,
@@ -120,13 +171,11 @@ export default {
 
     /** ROTATE */
     rotatePage(direction) {
-      const page = this.selectedPages.map((page) => {
-        return page;
-      });
-
-      this.$store.dispatch("edit/rotatePage", {
-        page,
-        direction,
+      this.selectedPages.forEach((page) => {
+        this.$store.dispatch("edit/rotatePage", {
+          page,
+          direction,
+        });
       });
     },
     handleRotationsToTheLeft() {
@@ -137,76 +186,119 @@ 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
+      if (!this.splittingSuggestions) return;
+
+      this.splittingSuggestions.map((item) => {
+        const lastPage = this.selectedDocument.pages.find(
+          (page) => page.id === item.pages[item.pages.length - 1].id
+        );
+
+        this.handleSplittingLines(lastPage.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
+      this.fileName = this.selectedDocument.data_file_name
+        .split(".")
+        .slice(0, -1)
+        .join(".");
 
-      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.fileExtension = this.selectedDocument.data_file_name
+        .split(".")
+        .at(-1);
     },
-    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
-      );
+    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 (found) {
-        this.activeSplittingLines.splice(page.number - 1, 1, 0);
+      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 (
+        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 (found) {
+        // If splitting is switched off and we have manual splits,
+        // those should stay unchanged
+        if (!this.splitSuggestionsEnabled && found.origin !== origin) {
+          return;
+        }
+
+        this.splittingLines.splice(page - 1, 1, removedPage);
       } else {
-        this.activeSplittingLines.splice(page.number - 1, 1, page.number);
+        this.splittingLines.splice(page - 1, 1, newPage);
       }
 
-      this.saveUpdatedDocument();
+      this.saveUpdatedDocuments();
     },
-    saveUpdatedDocument() {
+    saveUpdatedDocuments() {
       this.splitFileNameFromExtension();
 
-      // Check how many sub docs we have
-      const subDocuments = this.activeSplittingLines.filter(
-        (item) => item !== 0
+      const clickedLines = this.splittingLines.filter(
+        (item) => item.page !== 0
+      );
+
+      const newDocuments = this.createEachNewDocument(
+        clickedLines,
+        clickedLines.length
       );
 
-      // 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),
+      // // 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),
         };
 
-        // Then we replace the "undefined" with the created object
-        pageObjectArray.splice(i, 1, pageObject);
+        // we replace the "undefined" with the created object
+        documents.splice(i, 1, newDocument);
       }
 
-      // Set the state to the created array
-      this.$store.dispatch("edit/setUpdatedDocument", pageObjectArray);
+      return documents;
     },
-    handleFileName(index) {
+    handleNewDocumentName(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) {
@@ -216,50 +308,155 @@ export default {
       }
       return newFileName;
     },
-    handleSubPages(index, splittingLine) {
-      // assign the correct pages to each object
+    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
       let pages;
 
       if (index === 0) {
-        pages = this.documentPagesListForEditMode.slice(
-          0,
-          splittingLine[index]
-        );
+        pages = this.pagesForPostprocess.slice(0, clickedLines[index].page);
       } else {
-        if (!splittingLine[index]) {
-          pages = this.documentPagesListForEditMode.slice(
-            splittingLine[index - 1]
-          );
+        if (!clickedLines[index].page) {
+          pages = this.pagesForPostprocess.slice(clickedLines[index - 1].page);
         } else {
-          pages = this.documentPagesListForEditMode.slice(
-            splittingLine[index - 1],
-            splittingLine[index]
+          pages = this.pagesForPostprocess.slice(
+            clickedLines[index - 1].page,
+            clickedLines[index].page
           );
         }
       }
+
       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[item.pages.length - 1].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.documentPagesListForEditMode.find(
+      this.prevPageAtIndex = this.pagesForPostprocess.find(
         (page) =>
-          this.documentPagesListForEditMode.indexOf(page) ===
+          this.pagesForPostprocess.indexOf(page) ===
           e.draggedContext.futureIndex
       );
     },
     handleDragEnd() {
       // Update page numbers
-      const pages = this.documentPagesListForEditMode.map((page) => {
-        const index = this.documentPagesListForEditMode.indexOf(page);
+      const pages = this.pagesForPostprocess.map((page) => {
+        const index = this.pagesForPostprocess.indexOf(page);
         return {
           ...page,
           number: index + 1,
         };
       });
 
-      this.$store.dispatch("edit/setDocumentPagesListForEditMode", pages);
+      this.$store.dispatch("edit/setPagesForPostprocess", pages);
+    },
+
+    /** SUBMIT CHANGES */
+    // Send update request to the backend
+    saveEditChanges() {
+      // Verify if there was splitting, rotating and/or reordering
+      if (
+        this.documentShouldBePostprocessed ||
+        this.waitingForSplittingConfirmation(this.selectedDocument)
+      ) {
+        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"),
+            });
+          });
+
+        const redirection = navigateToDocumentsList(
+          this.documentsListPath,
+          this.projectId,
+          this.currentUser.id
+        );
+
+        if (redirection) {
+          this.$store.dispatch("edit/setRedirectingUser", true);
+        }
+      } else {
+        // Check if only the category and/or name changes:
+        const newCategory = this.updatedDocument[0].category;
+        const newName = this.updatedDocument[0].name;
+        let category = {};
+        let name = {};
+        let revisedCategory = {};
+
+        if (this.selectedDocument.category !== newCategory) {
+          Object.assign(category, {
+            category: newCategory,
+          });
+
+          this.$store.dispatch("document/startLoading");
+        }
+
+        if (!this.selectedDocument.category_is_revised && newCategory) {
+          Object.assign(revisedCategory, {
+            category_is_revised: true,
+          });
+        }
+
+        if (this.selectedDocument.data_file_name !== newName) {
+          Object.assign(name, { data_file_name: newName });
+        }
+
+        if (!category && !name) {
+          return;
+        }
+
+        const updatedValues = Object.assign(category, revisedCategory, name);
+
+        this.$store
+          .dispatch("document/updateDocument", updatedValues)
+          .catch((error) => {
+            this.$store.dispatch("document/endLoading");
+            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/setRenameAndCategorize", false);
+      this.$store.dispatch("edit/setUpdatedDocument", null);
+      this.$store.dispatch("edit/setSelectedPages", null);
+      this.$store.dispatch("edit/setSubmitEditChanges", false);
+      this.$store.dispatch("edit/setShowEditConfirmationModal", false);
+      this.$nextTick(() => {
+        // reset to first page
+        this.$store.dispatch("display/updateCurrentPage", 1);
+      });
     },
   },
 };

package/src/components/DocumentEdit/EditConfirmationModal.vue

@@ -0,0 +1,55 @@
+<template>
+  <section class="edit-confirmation-modal">
+    <b-modal v-model="isModalActive" :can-cancel="[]" class="edit-modal">
+      <section class="modal-card-body">
+        <div class="header">
+          <p class="modal-title">{{ $t("confirm_splitting") }}</p>
+        </div>
+        <div class="content">{{ $t("splitting_warning") }}</div>
+      </section>
+      <footer class="modal-card-foot">
+        <b-button @click="closeModal">
+          {{ $t("no") }}
+        </b-button>
+        <b-button type="is-primary" @click="confirmChanges">
+          {{ $t("yes") }}
+        </b-button>
+      </footer>
+    </b-modal>
+  </section>
+</template>
+
+<script>
+import { mapState } from "vuex";
+/**
+ * This component shows a modal to confirm the edit changes in the document
+ */
+export default {
+  name: "EditConfirmationModal",
+  data() {
+    return {
+      isModalActive: false,
+    };
+  },
+  computed: {
+    ...mapState("edit", ["showEditConfirmationModal"]),
+  },
+  watch: {
+    showEditConfirmationModal(newValue) {
+      this.isModalActive = newValue;
+    },
+  },
+  methods: {
+    closeModal() {
+      this.isModalActive = false;
+      this.$store.dispatch("edit/setShowEditConfirmationModal", false);
+    },
+    confirmChanges() {
+      this.$emit("save-changes");
+      this.isModalActive = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>