@konfuzio/document-validation-ui 0.1.10-dev.14 → 0.1.10-dev.16

package/package.json

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

package/src/assets/scss/document_edit.scss

@@ -46,6 +46,8 @@
           display: flex;
           flex-direction: row;
           justify-content: space-between;
+          height: 100%;
+          align-items: center;
         }
         .bottom-section {
           text-align: center;

package/src/assets/scss/document_name.scss

@@ -1,11 +1,9 @@
 @import "./imports.scss";
 
 .document-name-component {
-  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 100%;
   gap: 12px;
   line-height: 20px;
 

package/src/assets/scss/document_top_bar.scss

@@ -32,6 +32,29 @@
       flex: 1;
     }
 
+    .center-bar-components {
+      display: flex;
+      align-items: center;
+      gap: 38px;
+
+      &.single-component {
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .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/assets/scss/theme.scss

@@ -291,7 +291,7 @@
   }
 
   .b-checkbox.checkbox {
-    .check {
+    input[type="checkbox"] + .check {
       background-color: $white;
     }
     &:hover input[type="checkbox"]:not(:disabled) + .check {

package/src/components/App.vue

@@ -66,10 +66,10 @@ export default {
       required: false,
       default: "",
     },
+    // eslint-disable-next-line vue/require-default-prop
     locale: {
       type: String,
       required: false,
-      default: "en",
     },
     // eslint-disable-next-line vue/prop-name-casing
     documents_list_path: {
@@ -111,11 +111,7 @@ export default {
       }
     },
     isPublicView() {
-      if (
-        process.env.VUE_APP_GUEST_USER_TOKEN ||
-        this.user_token ||
-        (this.full_mode && this.full_mode === "true")
-      ) {
+      if (this.userToken || (this.full_mode && this.full_mode === "true")) {
         return false;
       } else {
         return true;

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -53,10 +53,6 @@ export default {
       type: Object,
       required: true,
     },
-    saveChanges: {
-      type: Boolean,
-      required: false,
-    },
   },
   data() {
     return {
@@ -70,7 +66,6 @@ export default {
       "isDocumentReviewed",
     ]),
     ...mapGetters("display", ["bboxToRect"]),
-    ...mapState("selection", ["spanSelection"]),
     ...mapState("document", [
       "editAnnotation",
       "publicView",
@@ -107,12 +102,6 @@ export default {
         this.handleCancel(true);
       }
     },
-
-    saveChanges(newValue) {
-      if (newValue) {
-        this.saveAnnotationChanges();
-      }
-    },
   },
   methods: {
     setText(text) {
@@ -205,14 +194,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/DocumentEdit/DocumentEdit.vue

@@ -85,8 +85,9 @@ export default {
       "selectedPages",
       "submitEditChanges",
     ]),
-    ...mapState("project", ["projectId", "documentsListPath"]),
+    ...mapState("project", ["projectId", "documentsListPath", "currentUser"]),
     ...mapGetters("edit", ["documentShouldBePostprocessed"]),
+    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
   watch: {
     renameAndCategorize(newValue) {
@@ -375,7 +376,10 @@ export default {
     // Send update request to the backend
     saveEditChanges() {
       // Verify if there was splitting, rotating and/or reordering
-      if (this.documentShouldBePostprocessed) {
+      if (
+        this.documentShouldBePostprocessed ||
+        this.waitingForSplittingConfirmation(this.selectedDocument)
+      ) {
         this.$store
           .dispatch("edit/editDocument", this.updatedDocument)
           .catch((error) => {
@@ -386,9 +390,13 @@ export default {
             });
           });
 
-        navigateToDocumentsList(this.documentsListPath, this.projectId);
+        navigateToDocumentsList(
+          this.documentsListPath,
+          this.projectId,
+          this.currentUser.id
+        );
       } else {
-        // Check if only the category changes:
+        // Check if only the category and/or name changes:
         const newCategory = this.updatedDocument[0].category;
         const newName = this.updatedDocument[0].name;
         let category = {};

package/src/components/DocumentEdit/EditPageThumbnail.vue

@@ -11,9 +11,7 @@
         isVisible && 'visible',
         checkboxValue && 'selected',
       ]"
-      :style="{
-        transform: `rotate(${rotation}deg)`,
-      }"
+      :style="`rotate:${rotation}deg`"
       @click="selectPage()"
     >
       <ServerImage :image-url="`${page.thumbnail_url}?${page.updated_at}`">

package/src/components/DocumentEdit/EditSidebar.vue

@@ -96,7 +96,7 @@ export default {
     };
   },
   computed: {
-    ...mapState("edit", ["selectedPages"]),
+    ...mapState("edit", ["selectedPages", "updatedDocument"]),
     ...mapState("document", ["splittingSuggestions", "selectedDocument"]),
     ...mapGetters("document", ["documentHasProposedSplit"]),
   },
@@ -117,6 +117,11 @@ export default {
         this.switchStatus = false;
       }
     },
+    updatedDocument(newValue) {
+      if (newValue && newValue.length === 1) {
+        this.switchStatus = false;
+      }
+    },
   },
   mounted() {
     this.$nextTick(() => {

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -119,6 +119,7 @@ export default {
   methods: {
     handleEdit() {
       if (this.editModeDisabled) return;
+      this.$store.dispatch("selection/disableSelection");
       this.$store.dispatch("edit/enableEditMode");
     },
     zoomIn() {

package/src/components/DocumentTopBar/DocumentName.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="document-name-component">
+  <div
+    :class="['document-name-component', editMode && 'document-name-edit-mode']"
+  >
     <div class="document-icon">
       <ServerImage
         :height="'22px'"

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -10,7 +10,36 @@
         />
       </div>
 
-      <DocumentName :data-file-name="selectedDocument.data_file_name" />
+      <div
+        :class="[
+          'center-bar-components',
+          recalculatingAnnotations && 'single-component',
+        ]"
+      >
+        <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 +116,8 @@ export default {
   data() {
     return {
       categoryError: false,
+      previousDocument: null,
+      nextDocument: null,
     };
   },
   computed: {
@@ -98,7 +129,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 +163,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");