@konfuzio/document-validation-ui 0.1.1 → 0.1.2-pre-release-1

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -1,9 +1,6 @@
 <template>
   <div :class="['document-edit', splitOverview && 'split-overview-component']">
-    <div
-      v-if="!splitOverview"
-      class="pages-section"
-    >
+    <div v-if="!splitOverview" class="pages-section">
       <EditPages
         :active-splitting-lines="activeSplittingLines"
         @change-page="changePage"
@@ -12,20 +9,14 @@
         @handle-drag-end="handleDragEnd"
       />
     </div>
-    <div
-      v-else
-      class="split-overview-section"
-    >
+    <div v-else class="split-overview-section">
       <SplitOverview
         :file-name="fileName"
         :file-extension="fileExtension"
         @change-page="changePage"
       />
     </div>
-    <div
-      v-if="!splitOverview"
-      class="sidebar"
-    >
+    <div v-if="!splitOverview" class="sidebar">
       <EditSidebar
         @rotate-left="rotatePage"
         @rotate-right="rotatePage"
@@ -49,7 +40,7 @@ export default {
   components: {
     EditSidebar,
     SplitOverview,
-    EditPages
+    EditPages,
   },
   data() {
     return {
@@ -57,7 +48,7 @@ export default {
       fileExtension: null,
       activeSplittingLines: [],
       dragging: false,
-      prevPageAtIndex: null
+      prevPageAtIndex: null,
     };
   },
   computed: {
@@ -68,8 +59,8 @@ export default {
       "documentPagesListForEditMode",
       "updatedDocument",
       "splitOverview",
-      "selectedPages"
-    ])
+      "selectedPages",
+    ]),
   },
   watch: {
     pages() {
@@ -85,7 +76,7 @@ export default {
       if (newValue) {
         this.saveUpdatedDocument();
       }
-    }
+    },
   },
   mounted() {
     this.setPages();
@@ -105,15 +96,15 @@ export default {
       );
     },
     createDocumentPagesListForEditMode() {
-      return this.selectedDocument.pages.map(page => {
+      return this.selectedDocument.pages.map((page) => {
         return {
           id: page.id,
           angle: 0,
-          page_number: page.number,
+          number: page.number,
           thumbnail_url: page.thumbnail_url,
           image_url: page.image_url,
           size: page.size,
-          updated_at: this.selectedDocument.downloaded_at
+          updated_at: this.selectedDocument.downloaded_at,
         };
       });
     },
@@ -129,13 +120,13 @@ export default {
 
     /** ROTATE */
     rotatePage(direction) {
-      const page = this.selectedPages.map(page => {
+      const page = this.selectedPages.map((page) => {
         return page;
       });
 
       this.$store.dispatch("edit/rotatePage", {
         page,
-        direction
+        direction,
       });
     },
     handleRotationsToTheLeft() {
@@ -170,17 +161,13 @@ export default {
       // 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.page_number
+        (item) => item === page.number
       );
 
       if (found) {
-        this.activeSplittingLines.splice(page.page_number - 1, 1, 0);
+        this.activeSplittingLines.splice(page.number - 1, 1, 0);
       } else {
-        this.activeSplittingLines.splice(
-          page.page_number - 1,
-          1,
-          page.page_number
-        );
+        this.activeSplittingLines.splice(page.number - 1, 1, page.number);
       }
 
       this.saveUpdatedDocument();
@@ -189,7 +176,9 @@ export default {
       this.splitFileNameFromExtension();
 
       // Check how many sub docs we have
-      const subDocuments = this.activeSplittingLines.filter(item => item !== 0);
+      const subDocuments = this.activeSplittingLines.filter(
+        (item) => item !== 0
+      );
 
       // Create array of objects
       // with a fixed size based on how many sub documents are currently
@@ -201,7 +190,7 @@ export default {
         const pageObject = {
           name: this.handleFileName(i),
           category: this.selectedDocument.category,
-          pages: this.handleSubPages(i, subDocuments)
+          pages: this.handleSubPages(i, subDocuments),
         };
 
         // Then we replace the "undefined" with the created object
@@ -255,24 +244,24 @@ export default {
     checkMove(e) {
       // Save the page placed originally where the page we are dragging will go
       this.prevPageAtIndex = this.documentPagesListForEditMode.find(
-        page =>
+        (page) =>
           this.documentPagesListForEditMode.indexOf(page) ===
           e.draggedContext.futureIndex
       );
     },
     handleDragEnd() {
       // Update page numbers
-      const pages = this.documentPagesListForEditMode.map(page => {
+      const pages = this.documentPagesListForEditMode.map((page) => {
         const index = this.documentPagesListForEditMode.indexOf(page);
         return {
           ...page,
-          page_number: index + 1
+          number: index + 1,
         };
       });
 
       this.$store.dispatch("edit/setDocumentPagesListForEditMode", pages);
-    }
-  }
+    },
+  },
 };
 </script>
 

package/src/components/DocumentEdit/EditPages.vue

@@ -34,10 +34,7 @@
                   transform: 'rotate(' + getRotation(page.id) + 'deg)',
                 }"
               >
-                <b-skeleton
-                  width="57px"
-                  height="57px"
-                />
+                <b-skeleton width="57px" height="57px" />
               </ServerImage>
             </div>
             <div class="icon-container">
@@ -46,36 +43,30 @@
               </div>
             </div>
           </div>
-          <span class="page-number">{{ page.page_number }}</span>
+          <span class="page-number">{{ page.number }}</span>
         </div>
         <div
           :class="[
             'splitting-lines',
             activeSplittingLines &&
-              activeSplittingLines[index] === page.page_number &&
+              activeSplittingLines[index] === page.number &&
               'active-split',
           ]"
           @click="handleSplittingLines(page)"
         >
           <div class="scissors-icon">
-            <b-icon
-              icon="scissors"
-              class="is-small"
-            />
+            <b-icon icon="scissors" class="is-small" />
           </div>
           <div
             v-if="
               activeSplittingLines &&
-                activeSplittingLines[index] === page.page_number
+              activeSplittingLines[index] === page.number
             "
             class="lines"
           >
             <SplitZigZag />
           </div>
-          <div
-            v-else
-            class="lines"
-          >
+          <div v-else class="lines">
             <SplitLines />
           </div>
         </div>
@@ -162,10 +153,10 @@ export default {
     },
     selectPage(page) {
       if (!page) return;
-      this.$emit("change-page", page.page_number);
+      this.$emit("change-page", page.number);
       const selectedPage = {
         id: page.id,
-        number: page.page_number,
+        number: page.number,
         thumbnail_url: page.thumbnail_url,
       };
       this.selected = true;

package/src/components/DocumentPage/DocumentPage.vue

@@ -1,5 +1,8 @@
 <template>
-  <div ref="pdfContainer" class="pdf-page-container">
+  <div
+    ref="pdfContainer"
+    :class="['pdf-page-container', categorizeModalIsActive && 'pointer-cursor']"
+  >
     <NewAnnotation
       v-if="newAnnotation && newAnnotation.length && !editAnnotation"
       :new-annotation="newAnnotation"
@@ -48,7 +51,7 @@
           <template v-for="annotation in pageAnnotations">
             <template
               v-for="(bbox, index) in annotation.span.filter(
-                (bbox) => bbox.page_index + 1 == pageNumber
+                (bbox) => bbox.page_index + 1 == page.number
               )"
             >
               <v-rect
@@ -147,7 +150,7 @@ export default {
     showFocusedAnnotation() {
       return (
         this.documentAnnotationSelected &&
-        this.documentAnnotationSelected.page === this.pageNumber &&
+        this.documentAnnotationSelected.page === this.page.number &&
         this.visiblePageRange.includes(this.documentAnnotationSelected.page) &&
         !this.isAnnotationInEditMode(this.documentAnnotationSelected.id)
       );
@@ -174,7 +177,7 @@ export default {
     },
 
     pageInVisibleRange() {
-      return this.visiblePageRange.includes(this.pageNumber);
+      return this.visiblePageRange.includes(this.page.number);
     },
 
     /**
@@ -215,7 +218,7 @@ export default {
         this.annotations.map((annotation) => {
           if (
             annotation.span.find(
-              (span) => span.page_index + 1 === this.pageNumber
+              (span) => span.page_index + 1 === this.page.number
             )
           ) {
             annotations.push(annotation);
@@ -225,16 +228,9 @@ export default {
       return annotations;
     },
 
-    pageNumber() {
-      if (this.editMode) {
-        return this.page.page_number;
-      }
-      return this.page.number;
-    },
-
     selection() {
       return this.$store.getters["selection/getSelectionForPage"](
-        this.pageNumber
+        this.page.number
       );
     },
 
@@ -252,6 +248,7 @@ export default {
       "selectedDocument",
       "publicView",
       "selectedEntities",
+      "categorizeModalIsActive",
     ]),
     ...mapState("edit", ["editMode"]),
     ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
@@ -300,6 +297,8 @@ export default {
     },
 
     onMouseDown(event) {
+      if (this.categorizeModalIsActive) return;
+
       this.closePopups();
 
       // check if element and delegate to it
@@ -324,7 +323,7 @@ export default {
 
       const position = this.$refs.stage.getStage().getPointerPosition();
       this.startSelection({
-        pageNumber: this.pageNumber,
+        pageNumber: this.page.number,
         start: {
           x: position.x,
           y: position.y,
@@ -366,7 +365,7 @@ export default {
     },
 
     handleClickedEntity(entity) {
-      if (!entity) return;
+      if (!entity || this.categorizeModalIsActive) return;
 
       // Check if we are creating a new Annotation
       // or if we are editing an existing or empty one
@@ -404,7 +403,9 @@ export default {
     },
 
     onElementEnter() {
-      this.$refs.stage.$el.style.cursor = "pointer";
+      if (!this.categorizeModalIsActive) {
+        this.$refs.stage.$el.style.cursor = "pointer";
+      }
     },
 
     onElementLeave() {

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -4,15 +4,15 @@
       <b-tooltip
         :label="tooltipInfo"
         multilined
-        type="is-dark"
         :active="editModeDisabled"
         size="is-large"
+        class="top-aligned"
       >
         <div
           v-if="!editMode"
           :class="[
             'icons icons-left',
-            editModeDisabled && 'edit-mode-disabled'
+            editModeDisabled && 'edit-mode-disabled',
           ]"
           @click="handleEdit"
         >
@@ -22,27 +22,15 @@
           <span class="edit-text">{{ $t("edit") }}</span>
         </div>
       </b-tooltip>
-      <div
-        v-if="!editMode"
-        class="toolbar-divider"
-      />
+      <div v-if="!editMode" class="toolbar-divider" />
       <div class="icons icons-right">
-        <div
-          class="fit-zoom icon"
-          @click.prevent.stop="fitAuto"
-        >
+        <div class="fit-zoom icon" @click.prevent.stop="fitAuto">
           <FitZoomIcon />
         </div>
-        <div
-          class="zoom-in icon"
-          @click.prevent.stop="zoomIn"
-        >
+        <div class="zoom-in icon" @click.prevent.stop="zoomIn">
           <PlusIcon />
         </div>
-        <div
-          class="zoom-out icon"
-          @click.prevent.stop="zoomOut"
-        >
+        <div class="zoom-out icon" @click.prevent.stop="zoomOut">
           <MinusIcon />
         </div>
         <div class="percentage">
@@ -66,7 +54,7 @@ export default {
     FitZoomIcon,
     PlusIcon,
     MinusIcon,
-    EditDocIcon
+    EditDocIcon,
   },
   data() {
     return {
@@ -76,21 +64,21 @@ export default {
       fitPercentage: 0.5,
       toolbarModalOpen: true,
       editModeDisabled: false,
-      tooltipInfo: null
+      tooltipInfo: null,
     };
   },
   computed: {
     ...mapState("display", ["scale"]),
     ...mapState("edit", ["editMode"]),
     ...mapState("document", ["selectedDocument", "recalculatingAnnotations"]),
-    ...mapGetters("document", ["documentCannotBeEdited"])
+    ...mapGetters("document", ["documentCannotBeEdited"]),
   },
   watch: {
     selectedDocument(newValue) {
       if (this.documentCannotBeEdited(newValue)) {
         this.editModeDisabled = true;
       }
-    }
+    },
   },
   mounted() {
     this.defaultScale = this.scale;
@@ -137,8 +125,8 @@ export default {
       this.$store.dispatch("display/updateFit", "custom").then(() => {
         this.$store.dispatch("display/updateScale", { scale });
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

package/src/components/DocumentPage/NewAnnotation.vue

@@ -55,13 +55,16 @@
       </b-button>
     </b-dropdown>
     <b-tooltip
-      :label="$t('no_labels_available')"
       multilined
-      type="is-dark"
       :active="selectedSet && (!labels || labels.length === 0)"
       size="is-large"
       position="is-bottom"
+      class="bottom-aligned"
+      :close-delay="5000"
     >
+      <template #content>
+        <div ref="tooltipContent"></div>
+      </template>
       <b-dropdown
         v-model="selectedLabel"
         aria-role="list"
@@ -199,6 +202,8 @@ export default {
       // prevent click propagation when opening the popup
       document.body.addEventListener("click", this.clickOutside);
     }, 200);
+
+    this.setTooltipText();
   },
   destroyed() {
     document.body.removeEventListener("click", this.clickOutside);
@@ -276,6 +281,10 @@ export default {
         },
       });
     },
+    setTooltipText() {
+      // Text set from innerHTML vs 'label' due to html tag in locales file string
+      this.$refs.tooltipContent.innerHTML = this.$t("no_labels_available");
+    },
   },
 };
 </script>

package/src/components/DocumentPage/ScrollingPage.vue

@@ -113,20 +113,12 @@ export default {
     },
     isElementFocused(focused) {
       if (!this.loading && focused) {
-        let pageNumber;
-
-        // TODO: have the same name for page.number in the edit mode so there's no need to do this validations
-        if (this.editMode) {
-          pageNumber = this.page.page_number;
-        } else {
-          pageNumber = this.page.number;
-        }
-        this.$store.dispatch("display/updateCurrentPage", pageNumber);
+        this.$store.dispatch("display/updateCurrentPage", this.page.number);
       }
     },
     currentPage(number) {
       if (
-        (this.page.number === number || this.page.page_number === number) &&
+        (this.page.number === number || this.page.number === number) &&
         !this.isElementFocused
       ) {
         this.$emit("page-jump", this.elementTop);
@@ -147,14 +139,9 @@ export default {
         });
     },
     pageInVisibleRange(page) {
-      let number;
-      if (this.editMode) {
-        number = page.page_number;
-      } else {
-        number = page.number;
-      }
       return (
-        this.currentPage === number || this.visiblePageRange.includes(number)
+        this.currentPage === page.number ||
+        this.visiblePageRange.includes(page.number)
       );
     },
     updateElementBounds() {

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -8,10 +8,6 @@
         <DocumentCategory
           v-if="categories && !editMode && !recalculatingAnnotations"
         />
-        <DocumentDatasetStatus
-          v-if="showDatasetDropdown && !editMode && !recalculatingAnnotations"
-          :dataset-status="selectedDocument.dataset_status"
-        />
       </div>
 
       <DocumentName :data-file-name="selectedDocument.data_file_name" />
@@ -29,7 +25,6 @@
           class="read-only-info"
         >
           <b-tooltip
-            type="is-dark"
             :animated="false"
             position="is-bottom"
             class="right-aligned width-184"
@@ -64,10 +59,6 @@
         <div class="top-bar-buttons">
           <DocumentTopBarButtons />
         </div>
-
-        <div v-if="showHandoverButton && !editMode" class="handover">
-          <DocumentHandover />
-        </div>
       </div>
     </div>
     <div v-else class="loading-top-bar">
@@ -78,10 +69,8 @@
 
 <script>
 import { mapState } from "vuex";
-import DocumentDatasetStatus from "./DocumentDatasetStatus";
 import DocumentCategory from "../../components/DocumentCategory";
 import DocumentName from "./DocumentName";
-import DocumentHandover from "./DocumentHandover";
 import DocumentTopBarButtons from "./DocumentTopBarButtons";
 import KeyboardActionsDescription from "./KeyboardActionsDescription";
 
@@ -94,17 +83,13 @@ export default {
   name: "DocumentTopBar",
   components: {
     DocumentCategory,
-    DocumentDatasetStatus,
     DocumentName,
-    DocumentHandover,
     DocumentTopBarButtons,
     KeyboardActionsDescription,
   },
   data() {
     return {
       categoryError: false,
-      showDatasetDropdown: false,
-      showHandoverButton: false,
     };
   },
   computed: {

package/src/components/DocumentTopBar/DocumentTopBarButtons.vue

@@ -28,7 +28,7 @@
       class="finish-review-button-container"
     >
       <ActionButtons
-        :finish-review-btn="finishReviewBtn"
+        :finish-review-btn="annotationSets && annotationSets.length > 0"
         :finish-disabled="finishDisabled"
         :is-loading="isLoading"
         @finish-review="handleFinishReview"
@@ -60,6 +60,7 @@ export default {
       "selectedDocument",
       "publicView",
       "finishedReview",
+      "annotationSets",
     ]),
     ...mapState("edit", ["editMode", "splitOverview", "updatedDocument"]),
   },
@@ -96,7 +97,11 @@ export default {
     handleButton() {
       // Check if we are not in the split overview
       // and if we have a split document
-      if (!this.splitOverview && this.updatedDocument.length > 1) {
+      if (
+        !this.splitOverview &&
+        this.updatedDocument &&
+        this.updatedDocument.length > 1
+      ) {
         // Enable the "next" button to go to the overview
         this.$store.dispatch("edit/setSplitOverview", true);
         this.$store.dispatch("edit/setSelectedPages", null);

package/src/components/DocumentTopBar/index.js

@@ -1,5 +1,3 @@
 export { default as DocumentTopBar } from "./DocumentTopBar";
 export { default as DocumentName } from "./DocumentName";
-export { default as DatasetStatus } from "./DocumentDatasetStatus";
-export { default as Handover } from "./DocumentHandover";
 export { default as DocumentTopBarButtons } from "./DocumentTopBarButtons";

package/src/locales/de.json

@@ -34,7 +34,7 @@
   "ok": "Ok, verstanden",
   "no_data_found": "Zum Bearbeiten anklicken...",
   "draw_box_document": "Find <i>{label_name}</i> in the document",
-  "accuracy": "Genauigkeit",
+  "confidence": "Konfidenz",
   "not_found_in_document": "Im Dokument nicht gefunden",
   "approved_by": "Genehmigt von",
   "approved": "Genehmigt",
@@ -98,9 +98,9 @@
   "enter_key": "Akzeptieren oder Speichern",
   "delete_key": "Ablehnen",
   "decline": "Decline",
-  "server_error": "We are currently experiencing a server issue. Please try again later or",
-  "get_support": "Get Support",
-  "no_labels_available": "Das ausgewählte Annotations-Set enthält keine nicht ausgefüllten oder multiplen Labels.",
+  "server_error": "Wir haben derzeit ein Serverproblem. Bitte versuchen Sie es später noch einmal oder",
+  "get_support": "Hole dir Unterstützung",
+  "no_labels_available": "Das ausgewählte Annotations-Set enthält keine nicht ausgefüllten oder multiplen Labels. Weitere Informationen finden Sie unter <a href='https://help.konfuzio.com/modules/labels/index.html#multiple' target='_blank'>diesem Link</a>.",
   "new_ann_set_title": "Neues Annotations-Set",
   "new_ann_set_description": "Wählen Sie ein Datenmodell aus den vorhandenen aus. Das neue Annotations-Set enthält dieselben Beschriftungen.",
   "select_label_set": "Wählen Sie das Label-Set-Modell aus",
@@ -110,5 +110,8 @@
   "new_multi_ann_title": "Erstellen Sie mehrere Annotationen",
   "new_multi_ann_description": "Wählen Sie ein Datenmodell aus den vorhandenen aus und deaktivieren Sie dann die Labels, die in diesem Dokument nicht vorhanden sind.",
   "drag_drop_columns_multi_ann": "Drag and Drop, um die Reihenfolge der Labels zu ändern",
-  "error_creating_multi_ann": "Nicht alle Annotationen wurden erfolgreich erstellt."
+  "error_creating_multi_ann": "Nicht alle Annotationen wurden erfolgreich erstellt.",
+  "disabled_finish_review": "Der Abschluss der Dokumentenprüfung ist erst möglich, nachdem alle Annotationen überarbeitet wurden, unabhängig davon, ob sie akzeptiert oder abgelehnt wurden.",
+  "no_multi_ann_labelset_model": "Es gibt keine verfügbaren Label Sets, die mehrfach in diesem Dokument zu finden sind. Weitere Informationen finden Sie unter <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>diesem Link</a>.",
+  "single_category_in_project": "Das aktuelle Projekt hat nur eine Kategorie, die diesem Dokument bereits zugeordnet ist. Um sie ändern zu können, sollte die neue zuerst dem Projekt hinzugefügt werden. Einzelheiten dazu finden Sie unter <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>diesem Link</a>."
 }

package/src/locales/en.json

@@ -33,7 +33,7 @@
   "ok": "Ok, got it",
   "no_data_found": "Click to edit...",
   "draw_box_document": "Find <i>{label_name}</i> in the document",
-  "accuracy": "Accuracy",
+  "confidence": "Confidence",
   "not_found_in_document": "Not found in the document",
   "approved_by": "Approved by",
   "approved": "Approved",
@@ -106,9 +106,12 @@
   "decline": "Decline",
   "server_error": "We are currently experiencing a server issue. Please try again later or",
   "get_support": "Get Support",
-  "no_labels_available": "There are no unfilled or multiple labels in the selected annotation set.",
+  "no_labels_available": "There are no unfilled or multiple labels in the selected annotation set. For more details, you can visit <a href='https://help.konfuzio.com/modules/labels/index.html#multiple' target='_blank'>this link</a>.",
   "new_multi_ann_title": "Create multiple annotations",
   "new_multi_ann_description": "Select a data model from the existing ones, then deselect the labels that don't exist in this document.",
   "drag_drop_columns_multi_ann": "Drag and drop to change the order of the labels",
-  "error_creating_multi_ann": "Not all annotation sets were created successfully."
+  "error_creating_multi_ann": "Not all annotation sets were created successfully.",
+  "disabled_finish_review": "Finishing the document review is only possible after all annotations have been revised, whether they are accepted or rejected.",
+  "no_multi_ann_labelset_model": "There are no available label sets that can be found multiple times in this document. For more details, you can visit <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>this link</a>.",
+  "single_category_in_project": "The current project has only one category, which is already assigned to this document. To be able to change it, the new one should be first added to the project. For details on how to do this, visit <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>this link</a>."
 }