@konfuzio/document-validation-ui 0.1.10-dev.9 → 0.1.11-dev.0

package/src/components/App.vue

@@ -66,18 +66,24 @@ 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: {
+      type: String,
+      required: false,
+      default: "",
     },
   },
   computed: {
     documentId() {
       if (getURLQueryParam("document")) {
         return getURLQueryParam("document");
-      } else if (getURLPath("docs")) {
-        return getURLPath("docs");
+      } else if (getURLPath("d")) {
+        return getURLPath("d");
       } else if (process.env.VUE_APP_DOCUMENT_ID) {
         return process.env.VUE_APP_DOCUMENT_ID;
       } else if (this.document) {
@@ -105,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;
@@ -118,6 +120,15 @@ export default {
     showDocumentsList() {
       return process.env.VUE_APP_SHOW_DOCUMENTS_LIST;
     },
+    documentsListPath() {
+      if (process.env.VUE_APP_DOCUMENTS_LIST_PATH) {
+        return process.env.VUE_APP_DOCUMENTS_LIST_PATH;
+      } else if (this.documents_list_path && this.documents_list_path !== "") {
+        return this.documents_list_path;
+      } else {
+        return null;
+      }
+    },
   },
   created() {
     // Sentry config
@@ -160,6 +171,10 @@ export default {
       this.$store.dispatch("project/setProjectId", this.projectId),
       this.$store.dispatch("document/setDocId", this.documentId),
       this.$store.dispatch("document/setPublicView", this.isPublicView),
+      this.$store.dispatch(
+        "project/setDocumentsListPath",
+        this.documentsListPath
+      ),
     ]).finally(() => {
       this.$store.dispatch("document/fetchDocument");
     });

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/ChooseLabelSetModal.vue

@@ -4,7 +4,7 @@
       ref="modal"
       v-model="show"
       :can-cancel="['x', 'outside']"
-      class="modal-absolute modal-400 modal-no-footer"
+      class="modal-absolute modal-400 modal-no-footer model-overflow-visible"
       :on-cancel="close"
     >
       <section class="modal-card-body">
@@ -149,7 +149,7 @@ export default {
         }
       );
 
-      this.$emit("labelSet", this.selectedLabelSet);
+      this.$emit("finish", this.selectedLabelSet);
       this.close();
     },
     setSelectedLabelSet(labelSet) {
@@ -157,6 +157,7 @@ export default {
       this.selectedLabelSet = labelSet;
     },
     close() {
+      this.$store.dispatch("display/showChooseLabelSetModal", null);
       this.$emit("close");
     },
     createLabelsList(labels) {

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,
@@ -111,7 +107,7 @@ export default {
     spanSelection(newValue) {
       if (!newValue) return;
 
-      //   // Check if the bbox has no string
+      // Check if the bbox has no string
       if (newValue[0] && !newValue[0].offset_string) {
         this.$store.dispatch("document/resetEditAnnotation");
         this.$store.dispatch("selection/disableSelection");

package/src/components/DocumentAnnotations/MultiAnnotationTableOverlay.vue

@@ -100,7 +100,7 @@ import AnnotationRow from "../DocumentAnnotations/AnnotationRow";
 import DraggableIcon from "../../assets/images/DraggableIcon";
 
 export default {
-  name: "MultiAnnotationTablePopup",
+  name: "MultiAnnotationTableOverlay",
   components: {
     AnnotationRow,
     DraggableIcon,

package/src/components/DocumentDashboard.vue

@@ -12,6 +12,11 @@
         :left="documentContainerLeftPadding"
         :width="documentContainerWidth"
       />
+      <ChooseLabelSetModal
+        v-if="showChooseLabelSetModal && showChooseLabelSetModal.show"
+        :is-multiple-annotations="showChooseLabelSetModal.isMultipleAnnotations"
+        @finish="showChooseLabelSetModal.finish"
+      />
 
       <transition name="slide-fade">
         <div
@@ -50,6 +55,7 @@ import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
 import NotOptimizedViewportModal from "../components/DocumentModals/NotOptimizedViewportModal";
 import DocumentErrorModal from "../components/DocumentModals/DocumentErrorModal";
+import ChooseLabelSetModal from "../components/DocumentAnnotations/ChooseLabelSetModal";
 
 /**
  * This component shows the PDF pages in a scrolling component and
@@ -67,6 +73,7 @@ export default {
     NotOptimizedViewportModal,
     DocumentErrorModal,
     MultiAnnotationTableOverlay,
+    ChooseLabelSetModal,
   },
   data() {
     return {
@@ -84,6 +91,7 @@ export default {
       "pageWidthScale",
       "currentPage",
       "showAnnSetTable",
+      "showChooseLabelSetModal",
     ]),
     ...mapState("document", [
       "showActionError",

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -27,8 +27,7 @@
     <div v-if="!renameAndCategorize" class="sidebar">
       <EditSidebar
         :split-suggestions-enabled="splitSuggestionsEnabled"
-        @rotate-left="rotatePage"
-        @rotate-right="rotatePage"
+        @rotate="rotatePage"
         @rotate-all-left="handleRotationsToTheLeft"
         @rotate-all-right="handleRotationsToTheRight"
         @handle-splitting-suggestions="applySplittingSuggestions"
@@ -46,6 +45,7 @@ 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.
@@ -85,7 +85,9 @@ export default {
       "selectedPages",
       "submitEditChanges",
     ]),
+    ...mapState("project", ["projectId", "documentsListPath", "currentUser"]),
     ...mapGetters("edit", ["documentShouldBePostprocessed"]),
+    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
   watch: {
     renameAndCategorize(newValue) {
@@ -169,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() {
@@ -376,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,8 +389,14 @@ export default {
               defaultErrorMessage: this.$t("edit_error"),
             });
           });
+
+        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/EditConfirmationModal.vue

@@ -46,6 +46,7 @@ export default {
     },
     confirmChanges() {
       this.$emit("save-changes");
+      this.isModalActive = false;
     },
   },
 };

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(() => {
@@ -129,10 +134,10 @@ export default {
   },
   methods: {
     rotateLeft() {
-      this.$emit("rotate-left", "left");
+      this.$emit("rotate", "left");
     },
     rotateRight() {
-      this.$emit("rotate-right", "right");
+      this.$emit("rotate", "right");
     },
     rotateAllLeft() {
       this.$emit("rotate-all-left");

package/src/components/DocumentPage/DocumentPage.vue

@@ -18,14 +18,6 @@
       :container-height="scaledViewport.height"
       @close="closePopups"
     />
-    <MultiAnnotationTablePopup
-      v-if="newMultiAnnotationSetTable"
-      :table-position="newMultiAnnotationSetTable.position"
-      :page-size="scaledViewport"
-      :label-set="newMultiAnnotationSetTable.labelSet"
-      :grouped-entities="newMultiAnnotationSetTable.entities"
-      @close="closePopups"
-    />
 
     <AnnSetTableOptions v-if="showAnnSetTable" :page="page" />
 
@@ -117,7 +109,6 @@
           :page="page"
           @buttonEnter="onElementEnter"
           @buttonLeave="onElementLeave"
-          @finished="handleMultiAnnSelectionFinished"
         />
       </v-layer>
     </v-stage>
@@ -136,7 +127,6 @@ import api from "../../api";
 import BoxSelection from "./BoxSelection";
 import MultiAnnSelection from "./MultiAnnSelection";
 import NewAnnotation from "./NewAnnotation";
-import MultiAnnotationTablePopup from "./MultiAnnotationTablePopup";
 import AnnSetTableOptions from "./AnnSetTableOptions";
 
 export default {
@@ -145,7 +135,6 @@ export default {
     BoxSelection,
     MultiAnnSelection,
     NewAnnotation,
-    MultiAnnotationTablePopup,
     AnnSetTableOptions,
   },
 
@@ -160,7 +149,6 @@ export default {
     return {
       image: null,
       newAnnotation: [],
-      newMultiAnnotationSetTable: null,
     };
   },
 
@@ -393,7 +381,6 @@ export default {
     },
 
     handleFocusedAnnotation(annotation, trigger) {
-      this.$store.dispatch("document/resetEditAnnotation");
       this.$store.dispatch("document/setSidebarAnnotationSelected", {
         annotation,
         trigger,
@@ -461,10 +448,6 @@ export default {
       this.$refs.stage.$el.style.cursor = "inherit";
     },
 
-    handleMultiAnnSelectionFinished(newMultiAnnotationSetTable) {
-      this.newMultiAnnotationSetTable = newMultiAnnotationSetTable;
-    },
-
     /**
      * Konva draws pages like this.
      */
@@ -557,7 +540,6 @@ export default {
       };
     },
     closePopups(closeNewAnnotaton) {
-      this.newMultiAnnotationSetTable = null;
       if (closeNewAnnotaton) {
         this.newAnnotation = [];
       }

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/DocumentPage/MultiAnnSelection.vue

@@ -132,34 +132,12 @@ export default {
   },
   methods: {
     openMultiAnnotationModal() {
-      this.$buefy.modal.open({
-        parent: this.$parent,
-        component: ChooseLabelSetModal,
-        hasModalCard: true,
-        trapFocus: true,
-        canCancel: false,
-        customClass: "dv-ui-theme invisible-parent-modal",
-        props: { isMultipleAnnotations: true },
-        events: {
-          labelSet: this.submitAnnotations,
-        },
+      this.$store.dispatch("display/showChooseLabelSetModal", {
+        show: true,
+        isMultipleAnnotations: true,
+        finish: this.submitAnnotations,
       });
     },
-    chooseLabelSet(labelSet) {
-      // TODO: deprecated with new multi ann set table
-      const tableSelection = {
-        labelSet,
-        position: {
-          x: this.selection.start.x,
-          y: this.selection.start.y,
-          width: this.selection.end.x - this.selection.start.x,
-          height: this.selection.end.y - this.selection.start.y,
-        },
-        entities: this.entities,
-      };
-      this.$store.dispatch("selection/disableSelection");
-      this.$emit("finished", tableSelection);
-    },
 
     async submitAnnotations(labelSet) {
       const columns = labelSet.labels.map((label) => {