@konfuzio/document-validation-ui 0.1.13-dev.3 → 0.1.13

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -54,7 +54,10 @@
               )}`
             }}
           </div>
-          <div class="labelset-action-buttons">
+          <div
+            class="labelset-action-buttons"
+            v-if="annotationSet.labels.length !== 0"
+          >
             <AnnotationSetActionButtons
               :number-of-empty-labels-in-annotation-set="
                 emptyLabelsLength(annotationSet)
@@ -82,19 +85,33 @@
           </div>
         </div>
 
-        <div v-for="label in annotationSet.labels" :key="label.id">
-          <div
-            v-if="!(label.annotations.length === 0 && publicView)"
-            class="labels"
-          >
-            <DocumentLabel
-              :label="label"
-              :annotation-set="annotationSet"
-              :index-group="indexGroup"
-              @handle-missing-annotation="markAnnotationsAsMissing"
-            />
+        <div v-if="annotationSet.labels.length > 0">
+          <div v-for="label in annotationSet.labels" :key="label.id">
+            <div
+              v-if="!(label.annotations.length === 0 && publicView)"
+              class="labels"
+            >
+              <DocumentLabel
+                :label="label"
+                :annotation-set="annotationSet"
+                :index-group="indexGroup"
+                @handle-missing-annotation="markAnnotationsAsMissing"
+              />
+            </div>
           </div>
         </div>
+
+        <div v-if="annotationSet.labels.length === 0" class="no-labels">
+          <span> {{ $t("no_labels_in_set") }}</span>
+          <span v-if="!publicView" v-html="$t('link_to_add_labels')"></span>
+        </div>
+
+        <div
+          v-else-if="!annotationSetHasAnnotations(annotationSet) && publicView"
+          class="no-labels"
+        >
+          <span> {{ $t("no_annotations_in_annotation_set") }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -175,6 +192,14 @@ export default {
     window.removeEventListener("keydown", this.keyDownHandler);
   },
   methods: {
+    annotationSetHasAnnotations(annotationSet) {
+      const found = annotationSet.labels.find(
+        (label) => label.annotations.length > 0
+      );
+
+      return found;
+    },
+
     focusOnNextAnnotation() {
       const annotations = this.createArray("keyboard-nav");
 

package/src/components/DocumentAnnotations/DocumentLabel.vue

@@ -15,14 +15,14 @@
           </div>
         </div>
         <div class="label-group-right">
-          <div v-if="!publicView" class="label-annotations-pending">
+          <div class="label-annotations-pending" v-if="!publicView">
             {{
               `${
                 label.annotations.length - acceptedAnnotationsGroupCounter
               } ${$t("annotations_pending")}`
             }}
           </div>
-          <div v-if="!publicView" class="label-annotations-accepted">
+          <div class="label-annotations-accepted" v-if="!publicView">
             {{
               `${acceptedAnnotationsGroupCounter} ${$t("annotations_accepted")}`
             }}

package/src/components/DocumentAnnotations/ExtractingData.vue

@@ -9,21 +9,33 @@
     </div>
     <div class="data-extraction-text">
       <p class="title">
-        {{ $t("data_being_extracted") }}
+        <span v-if="redirectingUser"> {{ $t("wait_title") }}</span>
+        <span v-else>
+          {{ $t("data_being_extracted") }}
+        </span>
       </p>
       <div class="description">
-        <p>{{ $t("analysing_document") }}</p>
-        <p>{{ $t("few_minutes") }}</p>
+        <span v-if="redirectingUser">
+          <p>{{ $t("redirecting_to_documents_list") }}</p>
+        </span>
+        <span v-else>
+          <p>{{ $t("analysing_document") }}</p>
+          <p>{{ $t("few_minutes") }}</p>
+        </span>
       </div>
     </div>
   </div>
 </template>
 <script>
+import { mapState } from "vuex";
 import AnnotationActionButtons from "./AnnotationActionButtons";
 
 export default {
   name: "ExtractingData",
   components: { AnnotationActionButtons },
+  computed: {
+    ...mapState("edit", ["redirectingUser"]),
+  },
 };
 </script>
 <style scoped lang="scss" src="../../assets/scss/extracting_data.scss"></style>

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -390,11 +390,15 @@ export default {
             });
           });
 
-        navigateToDocumentsList(
+        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;

package/src/components/DocumentModals/DocumentErrorModal.vue

@@ -3,7 +3,7 @@
     <b-modal
       v-model="isModalActive"
       :width="400"
-      can-cancel="['x']"
+      :can-cancel="['x']"
       :on-cancel="closeModal"
     >
       <section class="modal-card-body">

package/src/components/DocumentPage/DocumentPage.vue

@@ -459,7 +459,7 @@ export default {
         return;
       }
       api
-        .makeImageRequest(
+        .makeFileRequest(
           `${this.page.image_url}?${this.selectedDocument.downloaded_at}`
         )
         .then((myBlob) => {

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -26,6 +26,26 @@
         v-if="!editMode && !publicView && !isDocumentReviewed"
         class="toolbar-divider"
       />
+
+      <div v-if="!publicView" class="download-file icons">
+        <b-dropdown aria-role="list" position="is-top-right">
+          <template #trigger>
+            <b-icon icon="download" size="small" class="download-file" />
+          </template>
+
+          <b-dropdown-item aria-role="listitem" @click="handleDownloadFile()">{{
+            $t("original_file")
+          }}</b-dropdown-item>
+          <b-dropdown-item
+            aria-role="listitem"
+            @click="handleDownloadFile('ocr')"
+            >{{ $t("pdf_file") }}</b-dropdown-item
+          >
+        </b-dropdown>
+      </div>
+
+      <div v-if="!publicView" class="toolbar-divider" />
+
       <div class="icons icons-right">
         <div
           :class="[
@@ -63,6 +83,7 @@ import FitZoomIcon from "../../assets/images/FitZoomIcon";
 import PlusIcon from "../../assets/images/PlusIcon";
 import MinusIcon from "../../assets/images/MinusIcon";
 import EditDocIcon from "../../assets/images/EditDocIcon";
+import api from "../../api";
 
 export default {
   name: "DocumentToolbar",
@@ -158,6 +179,41 @@ export default {
         this.$store.dispatch("display/updateScale", { scale });
       });
     },
+    handleDownloadFile(fileType) {
+      let fileUrl;
+      // get the file name without the extension
+      let fileName = this.getFileName(this.selectedDocument.data_file_name);
+
+      if (fileType === "ocr") {
+        fileUrl = this.selectedDocument.file_url;
+        fileName = `${fileName}_${fileType}`;
+      } else {
+        fileUrl = `/doc/show-original/${this.selectedDocument.id}/`;
+      }
+
+      // Automatically download original or ocr files
+      return api
+        .makeFileRequest(fileUrl)
+        .then((myBlob) => {
+          const url = URL.createObjectURL(myBlob);
+          const link = document.createElement("a");
+          link.href = url;
+          link.setAttribute("download", fileName);
+          link.click();
+          URL.revokeObjectURL(link.href);
+        })
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("error_downloading_file"),
+          });
+          console.log(error);
+        });
+    },
+    getFileName(fileName) {
+      return fileName.split(".").slice(0, -1).join(".");
+    },
     cancelAnnotationEditMode() {
       this.$store.dispatch("document/resetEditAnnotation");
       this.$store.dispatch("selection/disableSelection");

package/src/components/DocumentThumbnails/DocumentThumbnails.cy.js

@@ -0,0 +1,64 @@
+import DocumentThumbnails from "./DocumentThumbnails.vue";
+
+describe("Document Thumbnails", () => {
+  beforeEach(() => {
+    cy.fetchDocument();
+  });
+
+  it("shows thumbnails for all document pages", () => {
+    cy.mount(DocumentThumbnails);
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .then((elements) => {
+        cy.storeState("document", "selectedDocument")
+          .its("pages")
+          .its("length")
+          .should("equal", elements.length);
+      });
+  });
+
+  it("loads thumbnail pictures that are shown on screen", () => {
+    cy.intercept("GET", "**/page/show-thumbnail/**").as("getThumbnail");
+    cy.mount(DocumentThumbnails);
+
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .then((elements) => {
+        cy.get("@getThumbnail.all")
+          .its("length")
+          .should("equal", elements.length);
+      });
+  });
+
+  it("displays page number correctly", () => {
+    cy.mount(DocumentThumbnails);
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .each(($row, index) => {
+        cy.wrap($row)
+          .find(".number-thumbnail")
+          .contains(index + 1);
+        cy.wait(1000);
+      });
+  });
+
+  it("navigates to every document thumbnail", () => {
+    cy.mount(DocumentThumbnails);
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .each(($row, index) => {
+        cy.wrap($row).click();
+        cy.storeState("display", "currentPage").should("equal", index + 1);
+        cy.wait(1000);
+      });
+  });
+
+  it("show loading when a document is not set", () => {
+    cy.mount(DocumentThumbnails);
+    cy.dispatchAction("document", "setSelectedDocument", null);
+    cy.get("#document-pages")
+      .find(".document-thumbnail-loading")
+      .its("length")
+      .should("equal", 1);
+  });
+});

package/src/components/DocumentThumbnails/DocumentThumbnails.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="documentThumbnails" class="document-pages">
+  <div id="document-pages" ref="documentThumbnails">
     <div v-if="selectedDocument">
       <div
         v-for="page in selectedDocument.pages"
@@ -32,7 +32,7 @@
         </div>
       </div>
     </div>
-    <div v-else>
+    <div v-else class="document-thumbnail-loading">
       <div class="document-thumbnail">
         <div class="image-section">
           <div class="image-container">

package/src/icons.js

@@ -17,6 +17,7 @@ import {
   faRepeat,
   faArrowLeft,
   faArrowRight,
+  faDownload,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as Icons } from "@fortawesome/vue-fontawesome";
 
@@ -37,7 +38,8 @@ library.add(
   faScissors,
   faRepeat,
   faArrowLeft,
-  faArrowRight
+  faArrowRight,
+  faDownload
 );
 
 export default Icons;

package/src/locales/de.json

@@ -132,5 +132,13 @@
   "delete_label": "Label löschen",
   "table": "Tabelle",
   "prepare_document": "Dokument vorbereiten",
-  "delete_table": "Tabelle löschen"
+  "delete_table": "Tabelle löschen",
+  "error_downloading_file": "Die Datei konnte nicht heruntergeladen werden.",
+  "original_file": "Originaldatei",
+  "pdf_file": "PDF Datei",
+  "no_labels_in_set": "Dieser Annotationssatz hat keine Beschriftungen.",
+  "link_to_add_labels": "Sehen Sie <a href='https://help.konfuzio.com/modules/labels/index.html#add-a-label' target='_blank'>hier</a>, wie Sie sie hinzufügen.",
+  "no_annotations_in_annotation_set": "Dieser Annotationssatz enthält keine extrahierten Annotationen für die jeweiligen Beschriftungen.",
+  "wait_title": "Bitte warten...",
+  "redirecting_to_documents_list": "Wir führen Sie zur Dokumentenliste, sodass Sie Ihre Dokumente weiter überprüfen können, während wir die vorgenommenen Änderungen verarbeiten."
 }

package/src/locales/en.json

@@ -132,5 +132,13 @@
   "edit_label": "Edit label",
   "delete_label": "Delete label",
   "table": "Table",
-  "delete_table": "Delete table"
+  "delete_table": "Delete table",
+  "error_downloading_file": "The file could not be downloaded.",
+  "original_file": "Original file",
+  "pdf_file": "PDF file",
+  "no_labels_in_set": "This annotation set has no labels.",
+  "link_to_add_labels": "See how to add them <a href='https://help.konfuzio.com/modules/labels/index.html#add-a-label' target='_blank'>here</a>.",
+  "no_annotations_in_annotation_set": "This annotation set has no annotations extracted for its respective labels.",
+  "wait_title": "Please wait...",
+  "redirecting_to_documents_list": "We are taking you to the documents list, so you can continue reviewing your documents while we process the changes made."
 }

package/src/locales/es.json

@@ -132,5 +132,13 @@
   "new_multi_ann_description": "Seleccione un modelo de datos de los existentes, luego deseleccione las etiquetas que no existen en este documento.",
   "new_multi_ann_title": "Crear múltiples anotaciones",
   "prepare_document": "Prepare el documento",
-  "delete_table": "Eliminar tabla"
+  "delete_table": "Eliminar tabla",
+  "error_downloading_file": "El documento no pudo ser descargado.",
+  "original_file": "Documento original",
+  "pdf_file": "Documento PDF",
+  "no_labels_in_set": "Este grupo de anotaciones no tiene etiquetas.",
+  "link_to_add_labels": "Para ver cómo agregarlas haga clic <a href='https://help.konfuzio.com/modules/labels/index.html#add-a-label' target='_blank'>aquí</a>.",
+  "no_annotations_in_annotation_set": "Este grupo de anotaciones no tiene anotaciones encontradas para sus respectivas etiquetas.",
+  "wait_title": "Por favor espere...",
+  "redirecting_to_documents_list": "Lo estamos redirigiendo a la lista de documentos, para que pueda continuar la revisión de sus documentos mientras procesamos los cambios realizados."
 }

package/src/store/document.js

@@ -17,7 +17,7 @@ const state = {
   annotationSets: null,
   annotations: null,
   labels: [],
-  documentId: null,
+  documentId: process.env.VUE_APP_DOCUMENT_ID,
   sidebarAnnotationSelected: null,
   documentAnnotationSelected: null,
   selectedDocument: null,
@@ -1256,7 +1256,9 @@ const mutations = {
     state.selectedDocument = document;
 
     // this is to handle cache when a document is edited or changed
-    state.selectedDocument.downloaded_at = Date.now();
+    if (state.selectedDocument) {
+      state.selectedDocument.downloaded_at = Date.now();
+    }
   },
   SET_RECALCULATING_ANNOTATIONS: (state, recalculatingAnnotations) => {
     state.recalculatingAnnotations = recalculatingAnnotations;

package/src/store/edit.js

@@ -16,6 +16,7 @@ const state = {
   updatedDocument: [],
   showEditConfirmationModal: false,
   submitEditChanges: false,
+  redirectingUser: false,
 };
 
 const getters = {
@@ -260,6 +261,10 @@ const actions = {
   setShowEditConfirmationModal: ({ commit }, value) => {
     commit("SET_SHOW_EDIT_CONFIRMATION_MODAL", value);
   },
+
+  setRedirectingUser: ({ commit }, value) => {
+    commit("SET_REDIRECTING_USER", value);
+  },
 };
 
 const mutations = {
@@ -290,6 +295,9 @@ const mutations = {
   SET_SUBMIT_EDIT_CHANGES: (state, value) => {
     state.submitEditChanges = value;
   },
+  SET_REDIRECTING_USER: (state, value) => {
+    state.redirectingUser = value;
+  },
 };
 
 export default {

package/src/store/project.js

@@ -2,7 +2,7 @@ import myImports from "../api";
 const HTTP = myImports.HTTP;
 
 const state = {
-  projectId: null,
+  projectId: process.env.VUE_APP_PROJECT_ID,
   currentUser: null,
   documentsListPath: null,
   documentsInProject: null,

package/src/utils/utils.js

@@ -45,6 +45,8 @@ export function navigateToDocumentsList(path, projectId, userId) {
   const newPath = `${path}${slash}${parameters}`;
 
   window.location.href = newPath;
+
+  return true;
 }
 
 export function isElementArray(element) {