@konfuzio/document-validation-ui 0.1.10-dev.13 → 0.1.10-dev.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.10-dev.13",
+  "version": "0.1.10-dev.15",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/assets/scss/document_top_bar.scss

@@ -32,6 +32,23 @@
       flex: 1;
     }
 
+    .center-bar-components {
+      display: flex;
+      align-items: center;
+      gap: 38px;
+
+      .navigation-arrow {
+        &:hover {
+          cursor: pointer;
+        }
+
+        &.navigation-disabled {
+          cursor: not-allowed;
+          filter: opacity(0.5);
+        }
+      }
+    }
+
     .right-bar-components {
       align-items: center;
       justify-content: flex-end;

package/src/components/App.vue

@@ -69,7 +69,6 @@ export default {
     locale: {
       type: String,
       required: false,
-      default: "en",
     },
     // eslint-disable-next-line vue/prop-name-casing
     documents_list_path: {

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -53,10 +53,6 @@ export default {
       type: Object,
       required: true,
     },
-    saveChanges: {
-      type: Boolean,
-      required: false,
-    },
   },
   data() {
     return {
@@ -107,12 +103,6 @@ export default {
         this.handleCancel(true);
       }
     },
-
-    saveChanges(newValue) {
-      if (newValue) {
-        this.saveAnnotationChanges();
-      }
-    },
   },
   methods: {
     setText(text) {
@@ -205,14 +195,40 @@ export default {
         index = this.spanIndex;
       }
 
+      let spans = [];
+
+      // Validate if we are deleting an Annotation that it's not multi-lined
+      let isToDelete =
+        this.annotationText.length === 0 &&
+        (!isElementArray(this.annotation.span) ||
+          this.annotation.span.length === 1);
+
+      if (!isToDelete) {
+        const span = this.createSpan();
+
+        spans = [...annotation.span];
+
+        spans[index] = span;
+
+        if (this.annotationText.length === 0) {
+          spans.splice(index, 1);
+        }
+      }
       // API call handled in parent component - AnnotationRow
-      this.$emit(
-        "save-annotation-changes",
-        this.annotation,
-        index,
-        this.span,
-        this.annotationText
-      );
+      this.$emit("save-annotation-changes", spans, isToDelete);
+    },
+
+    createSpan() {
+      return {
+        offset_string: this.annotationText,
+        page_index: this.span.page_index,
+        x0: this.span.x0,
+        x1: this.span.x1,
+        y0: this.span.y0,
+        y1: this.span.y1,
+        start_offset: this.span.start_offset,
+        end_offset: this.span.end_offset,
+      };
     },
   },
 };

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -49,14 +49,14 @@
             @mouseleave="onAnnotationHoverLeave"
           >
             <AnnotationContent
+              :ref="`span_${annotation.id}_${index}`"
               :annotation="annotation"
               :span="span"
               :span-index="index"
               :label="label"
               :annotation-set="annotationSet"
               :is-hovered="hoveredAnnotation"
-              :save-changes="saveChanges"
-              @save-annotation-changes="handleSaveAnnotationChanges"
+              @save-annotation-changes="saveAnnotationChanges"
             />
           </div>
         </div>
@@ -70,7 +70,6 @@
               :label="label"
               :annotation-set="annotationSet"
               :is-hovered="hoveredAnnotation"
-              :save-changes="saveChanges"
               :is-missing-annotation="
                 annotationIsNotFound(annotationSet, label)
               "
@@ -82,7 +81,6 @@
             :label="label"
             :annotation-set="annotationSet"
             :is-hovered="hoveredAnnotation"
-            :save-changes="saveChanges"
             :is-missing-annotation="annotationIsNotFound(annotationSet, label)"
             @save-empty-annotation-changes="saveEmptyAnnotationChanges"
           />
@@ -156,8 +154,6 @@ export default {
       isSelected: false,
       annotationAnimationTimeout: null,
       hoveredAnnotation: null,
-      saveChanges: false,
-      toDecline: false,
     };
   },
   computed: {
@@ -261,7 +257,6 @@ export default {
     },
     editAnnotation(newValue) {
       if (!newValue) {
-        this.saveChanges = false;
         this.isLoading = false;
       }
     },
@@ -451,20 +446,24 @@ export default {
       if (this.publicView || this.isDocumentReviewed) return;
 
       if (
-        this.showAcceptButton() ||
-        this.showDeclineButton() ||
-        this.isAnnotationInEditMode(
-          this.annotationId(),
-          this.editAnnotation.index
-        )
+        this.annotation &&
+        (this.showAcceptButton() ||
+          this.showDeclineButton() ||
+          this.isAnnotationInEditMode(
+            this.annotationId(),
+            this.editAnnotation.index
+          ))
       ) {
-        this.saveChanges = true;
-        if (decline) {
-          this.toDecline = true;
-        }
-      }
-
-      if (
+        // retrieve all edited spans from every AnnotationContent component
+        let spans = [];
+        Object.keys(this.$refs).forEach((ref) => {
+          if (ref.includes(`span_${this.annotation.id}`)) {
+            // call child component createSpan method
+            spans.push(this.$refs[ref][0].createSpan());
+          }
+        });
+        this.saveAnnotationChanges(spans, decline);
+      } else if (
         !this.annotation &&
         this.isAnnotationInEditMode(this.annotationId())
       ) {
@@ -495,12 +494,7 @@ export default {
           this.closedTag = null;
         });
     },
-    handleSaveAnnotationChanges(
-      annotation,
-      index,
-      annotationSpan,
-      annotationContent
-    ) {
+    saveAnnotationChanges(spans, isToDeleteOrDecline) {
       // This function deals with declining Annotations
       // or editing an Annotation or a part of it (if multi line)
       this.isLoading = true;
@@ -508,29 +502,14 @@ export default {
       let updatedString; // what will be sent to the API
       let storeAction; // if it will be 'delete' or 'patch'
 
-      // Validate if we are deleting an Annotation that it's not multi-lined
-      let isToDelete =
-        annotationContent.length === 0 &&
-        (!isElementArray(annotation.span) || annotation.span.length === 1);
-
       // Verify if we delete the entire Annotation or a part of the text
-      if (isToDelete || this.toDecline) {
+      if (isToDeleteOrDecline) {
         storeAction = "document/deleteAnnotation";
       } else {
         // Editing the Annotation
         // Deleting part of multi-line Annotation
         storeAction = "document/updateAnnotation";
 
-        let spans = [...annotation.span];
-
-        const span = this.createSpan(annotationSpan, annotationContent);
-
-        spans[index] = span;
-
-        if (annotationContent.length === 0) {
-          spans.splice(index, 1);
-        }
-
         updatedString = {
           is_correct: true,
           revised: true,
@@ -555,21 +534,8 @@ export default {
           this.$store.dispatch("document/resetEditAnnotation");
           this.$store.dispatch("selection/disableSelection");
           this.$store.dispatch("selection/setSelectedEntities", null);
-          this.toDecline = false;
         });
     },
-    createSpan(span, annotationContent) {
-      return {
-        offset_string: annotationContent,
-        page_index: span.page_index,
-        x0: span.x0,
-        x1: span.x1,
-        y0: span.y0,
-        y1: span.y1,
-        start_offset: span.start_offset,
-        end_offset: span.end_offset,
-      };
-    },
     saveEmptyAnnotationChanges() {
       let annotationToCreate;
 
@@ -624,12 +590,10 @@ export default {
 
         if (found) {
           this.isLoading = true;
-          this.saveChanges = false;
           return;
         }
 
         this.isLoading = false;
-        this.saveChanges = false;
         return;
       }
 
@@ -637,7 +601,6 @@ export default {
       // while waiting for it to be removed from the row
       if (!this.annotationsMarkedAsMissing) {
         this.isLoading = false;
-        this.saveChanges = false;
         return;
       }
 
@@ -652,7 +615,6 @@ export default {
             // Check if we wanna add loading to all empty annotations
             if (this.hoveredAnnotationSet) {
               this.isLoading = true;
-              this.saveChanges = false;
               return;
             }
 
@@ -662,7 +624,6 @@ export default {
               annotation.label === this.label.id
             ) {
               this.isLoading = true;
-              this.saveChanges = false;
               return;
             }
           }

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -67,10 +67,6 @@ export default {
       required: false,
       default: 0,
     },
-    saveChanges: {
-      type: Boolean,
-      required: false,
-    },
     isMissingAnnotation: {
       type: Boolean,
       required: true,

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -10,7 +10,31 @@
         />
       </div>
 
-      <DocumentName :data-file-name="selectedDocument.data_file_name" />
+      <div class="center-bar-components">
+        <div
+          :class="[
+            'left-arrow navigation-arrow',
+            !previousDocument && 'navigation-disabled',
+          ]"
+          type="button"
+          @click="navigateToDocument(previousDocument)"
+        >
+          <b-icon icon="angle-left" size="is-small" />
+        </div>
+
+        <DocumentName :data-file-name="selectedDocument.data_file_name" />
+
+        <div
+          :class="[
+            'right-arrow navigation-arrow',
+            !nextDocument && 'navigation-disabled',
+          ]"
+          type="button"
+          @click="navigateToDocument(nextDocument)"
+        >
+          <b-icon icon="angle-right" size="is-small" />
+        </div>
+      </div>
 
       <div v-if="!recalculatingAnnotations" class="right-bar-components">
         <div
@@ -87,6 +111,8 @@ export default {
   data() {
     return {
       categoryError: false,
+      previousDocument: null,
+      nextDocument: null,
     };
   },
   computed: {
@@ -98,7 +124,19 @@ export default {
     ]),
     ...mapState("category", ["categories"]),
     ...mapState("edit", ["editMode"]),
-    ...mapGetters("document", ["isDocumentReviewed"]),
+    ...mapState("project", ["documentsInProject"]),
+    ...mapGetters("document", [
+      "isDocumentReviewed",
+      "isDocumentReadyToBeReviewed",
+      "waitingForSplittingConfirmation",
+    ]),
+  },
+  watch: {
+    documentsInProject(newValue) {
+      if (newValue && this.selectedDocument) {
+        this.getPreviousAndNextDocuments();
+      }
+    },
   },
   created() {
     window.addEventListener("resize", this.handleResize);
@@ -120,6 +158,42 @@ export default {
     handleResize() {
       this.setComponentWidth(this.$refs.documentTopBar.offsetWidth);
     },
+    getPreviousAndNextDocuments() {
+      // Only consider documents who have a status of "ready"
+      const filteredDocuments = this.documentsInProject.filter(
+        (document) =>
+          this.isDocumentReadyToBeReviewed(document) ||
+          this.waitingForSplittingConfirmation(document)
+      );
+
+      if (!filteredDocuments) return;
+
+      const found = filteredDocuments.find(
+        (document) => document.id === this.selectedDocument.id
+      );
+
+      const indexOfCurrentDocument = filteredDocuments.indexOf(found);
+
+      if (!(indexOfCurrentDocument < 0)) {
+        this.previousDocument = filteredDocuments[indexOfCurrentDocument - 1];
+        this.nextDocument = filteredDocuments[indexOfCurrentDocument + 1];
+      } else {
+        this.previousDocument = filteredDocuments[0];
+        this.nextDocument = filteredDocuments[1];
+      }
+    },
+    navigateToDocument(document) {
+      if (!document) return;
+
+      this.$store.dispatch("document/changeCurrentDocument", document.id);
+
+      if (this.editMode) {
+        // Reset edit mode when changing the document,
+        // in case the change was made from the arrows in the Edit Mode
+        // so that the user does not get stuck in this interface
+        this.$store.dispatch("edit/disableEditMode");
+      }
+    },
   },
 };
 </script>

package/src/components/DocumentsList/DocumentsList.vue

@@ -110,12 +110,7 @@ export default {
   },
   methods: {
     changeDocument(documentId) {
-      if (getURLQueryParam("document") || getURLPath("docs")) {
-        navigateToNewDocumentURL(this.selectedDocument.id, documentId);
-      } else {
-        this.$store.dispatch("document/setDocId", documentId);
-        this.$store.dispatch("document/fetchDocument");
-      }
+      this.$store.dispatch("document/changeCurrentDocument", documentId);
     },
     requestTrialAccess() {
       window.open("https://konfuzio.com", "_blank");

package/src/store/category.js

@@ -3,7 +3,7 @@ import myImports from "../api";
 const HTTP = myImports.HTTP;
 
 const state = {
-  documentsInProject: [],
+  createAvailableListOfDocuments: false,
   documentsAvailableToReview: [], // filtered by user
   categories: null,
 };
@@ -39,37 +39,21 @@ const getters = {
 };
 
 const actions = {
-  setDocumentsInProject: ({ commit }, documents) => {
-    commit("SET_DOCUMENTS_IN_PROJECT", documents);
-  },
   setDocumentsAvailableToReview: ({ commit }, documentsAvailableToReview) => {
     commit("SET_AVAILABLE_DOCUMENTS", documentsAvailableToReview);
   },
   setCategories: ({ commit }, categories) => {
     commit("SET_CATEGORIES", categories);
   },
-  /**
-   * Actions that use HTTP requests always return the axios promise,
-   * so they can be `await`ed (useful to set the `loading` status).
-   */
-  fetchDocumentList: ({ commit, rootState }, categoryId) => {
-    return HTTP.get(
-      `documents/?category=${categoryId}&assignee=${rootState.project.currentUser}&limit=100`
-    )
-      .then((response) => {
-        if (response.data.results) {
-          commit("SET_DOCUMENTS_IN_PROJECT", response.data.results);
-        }
-      })
-      .catch((error) => {
-        console.log(error, "Could not fetch document list from the backend");
-      });
-  },
 
   createAvailableDocumentsList: (
-    { commit, state, dispatch, rootGetters },
+    { commit, state, dispatch, rootState, rootGetters },
     { categoryId, user, poll }
   ) => {
+    if (!state.createAvailableListOfDocuments) return;
+
+    const parameters = `category=${categoryId}`;
+
     const sleep = (duration) =>
       new Promise((resolve) => setTimeout(resolve, duration));
 
@@ -80,10 +64,10 @@ const actions = {
       let errors = 0;
       count += 1;
 
-      return dispatch("fetchDocumentList", categoryId).then(() => {
-        for (let i = 0; i < state.documentsInProject.length; i++) {
+      return dispatch("project/fetchDocumentList", parameters).then(() => {
+        for (let i = 0; i < rootState.project.documentsInProject.length; i++) {
           const found = state.documentsAvailableToReview.find(
-            (doc) => doc.id === state.documentsInProject[i].id
+            (doc) => doc.id === rootState.project.documentsInProject[i].id
           );
 
           if (found) {
@@ -92,14 +76,17 @@ const actions = {
             continue;
           } else if (
             rootGetters["document/isDocumentReadyToBeReviewed"](
-              state.documentsInProject[i]
+              rootState.project.documentsInProject[i]
             )
           ) {
             // add available doc to the end of the array
-            commit("ADD_AVAILABLE_DOCUMENT", state.documentsInProject[i]);
+            commit(
+              "ADD_AVAILABLE_DOCUMENT",
+              rootState.project.documentsInProject[i]
+            );
           } else if (
             rootGetters["document/documentHadErrorDuringExtraction"](
-              state.documentsInProject[i]
+              rootState.project.documentsInProject[i]
             )
           ) {
             dispatch("document/setDocumentError", null, { root: true });
@@ -118,10 +105,10 @@ const actions = {
         // And if the difference is due to errors or to docs not ready
         if (
           poll &&
-          state.documentsInProject.length !==
+          rootState.project.documentsInProject.length !==
             state.documentsAvailableToReview.length &&
           state.documentsAvailableToReview.length + errors !==
-            state.documentsInProject.length
+            rootState.project.documentsInProject.length
         ) {
           if (count >= 10) return true;
 
@@ -137,8 +124,8 @@ const actions = {
 
     // Poll as long as the lengths are different
     if (
-      state.documentsInProject.length === 0 ||
-      state.documentsInProject.length !==
+      rootState.project.documentsInProject.length === 0 ||
+      rootState.project.documentsInProject.length !==
         state.documentsAvailableToReview.length
     ) {
       let duration;
@@ -169,9 +156,6 @@ const actions = {
 };
 
 const mutations = {
-  SET_DOCUMENTS_IN_PROJECT: (state, documents) => {
-    state.documentsInProject = documents;
-  },
   SET_AVAILABLE_DOCUMENTS: (state, documentsAvailableToReview) => {
     state.documentsAvailableToReview = documentsAvailableToReview;
   },

package/src/store/document.js

@@ -1,5 +1,10 @@
 import myImports from "../api";
-import { sleep } from "../utils/utils";
+import {
+  sleep,
+  getURLQueryParam,
+  navigateToNewDocumentURL,
+  getURLPath,
+} from "../utils/utils";
 
 const HTTP = myImports.HTTP;
 const documentPollDuration = 1000;
@@ -758,8 +763,13 @@ const actions = {
         await dispatch("category/fetchCategories", projectId, {
           root: true,
         });
+
+        // get list of documents not reviewed
+        await dispatch("project/fetchDocumentList", "is_reviewed=false", {
+          root: true,
+        });
       }
-      if (categoryId) {
+      if (categoryId && rootState.category.createAvailableListOfDocuments) {
         await dispatch(
           "category/createAvailableDocumentsList",
           {
@@ -1088,6 +1098,20 @@ const actions = {
 
     window.open(fullUrl, "_blank");
   },
+
+  changeCurrentDocument: ({ commit, state, dispatch }, newDocumentId) => {
+    // reset splitting suggestions
+    if (state.splittingSuggestions) {
+      commit("SET_SPLITTING_SUGGESTIONS", null);
+    }
+
+    if (getURLQueryParam("document") || getURLPath("d")) {
+      navigateToNewDocumentURL(state.selectedDocument.id, newDocumentId);
+    } else {
+      commit("SET_DOC_ID", newDocumentId);
+      dispatch("fetchDocument");
+    }
+  },
 };
 
 const mutations = {

package/src/store/edit.js

@@ -271,7 +271,6 @@ const mutations = {
   },
   ADD_SELECTED_PAGE: (state, selectedPage) => {
     state.selectedPages.push(selectedPage);
-    console.log(state.selectedPages);
   },
   SET_SHOW_EDIT_CONFIRMATION_MODAL: (state, value) => {
     state.showEditConfirmationModal = value;

package/src/store/project.js

@@ -5,6 +5,7 @@ const state = {
   projectId: null,
   currentUser: null,
   documentsListPath: null,
+  documentsInProject: null,
 };
 
 const getters = {
@@ -80,6 +81,24 @@ const actions = {
   setDocumentsListPath: ({ commit }, path) => {
     commit("SET_DOCUMENTS_LIST_PATH", path);
   },
+
+  setDocumentsInProject: ({ commit }, documents) => {
+    commit("SET_DOCUMENTS_IN_PROJECT", documents);
+  },
+
+  fetchDocumentList: ({ commit, state }, parameters) => {
+    return HTTP.get(
+      `documents/?project=${state.projectId}&assignee=${state.currentUser}&limit=100&${parameters}`
+    )
+      .then((response) => {
+        if (response.data.results) {
+          commit("SET_DOCUMENTS_IN_PROJECT", response.data.results);
+        }
+      })
+      .catch((error) => {
+        console.log(error, "Could not fetch document list from the backend");
+      });
+  },
 };
 
 const mutations = {
@@ -92,6 +111,9 @@ const mutations = {
   SET_DOCUMENTS_LIST_PATH: (state, path) => {
     state.documentsListPath = path;
   },
+  SET_DOCUMENTS_IN_PROJECT: (state, documents) => {
+    state.documentsInProject = documents;
+  },
 };
 
 export default {