@konfuzio/document-validation-ui 0.1.16-dev.2 → 0.1.16-dev.4

package/package.json

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

package/src/assets/scss/document_annotations.scss

@@ -1,6 +1,6 @@
 @import "./imports.scss";
 
-#labels-sidebar {
+#document-annotations {
   font-family: $font-family;
   flex: 1;
   background-color: $background;
@@ -426,10 +426,12 @@
       }
     }
 
-    .missing-button-container, .decline-button-container {
+    .missing-button-container,
+    .decline-button-container {
       background-color: transparent;
 
-      .missing-btn, .decline-btn {
+      .missing-btn,
+      .decline-btn {
         color: $grey-blue !important;
         font-size: 14px !important;
         font-weight: 500;

package/src/assets/scss/document_edit.scss

@@ -1,6 +1,6 @@
 @import "./imports.scss";
 
-.document-edit {
+#document-edit {
   display: flex;
   flex: 1;
   background-color: $light-grey-background;

package/src/assets/scss/document_toolbar.scss

@@ -1,6 +1,6 @@
 @import "./imports.scss";
 
-.toolbar-container {
+#toolbar-container {
   position: absolute;
   width: fit-content;
   bottom: 20px;

package/src/components/DocumentAnnotations/DocumentAnnotations.cy.js

@@ -304,4 +304,120 @@ describe("Document Annotations", () => {
         .find(".empty-annotation")
         .should("not.have.class", "missing-annotation");
     });
+
+    it("gets successfull response from the API when accepting annotation", () => {
+      cy.mount(DocumentAnnotations);
+
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".not-revised")
+        .first()
+        .then(($element) => {
+          const annotationId = $element[0].id;
+       
+          cy.intercept('PATCH', `**/annotations/${annotationId}/`).as('updateAnnotation');
+          
+          cy.wrap($element)
+            .trigger("mouseover");
+
+          cy.wait(1000);
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-accept-btn")
+            .click();
+          
+          cy.wait("@updateAnnotation").its("response.statusCode").should("eq", 200);
+        })
+    });
+
+    it("gets successfull response from the API when declining annotation", () => {
+      cy.mount(DocumentAnnotations);
+
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".annotation")
+        .first()
+        .then(($element) => {
+          const annotationId = $element[0].id;
+       
+          cy.intercept('DELETE', `**/annotations/${annotationId}/`).as('deleteAnnotation');
+          
+          cy.wrap($element)
+            .trigger("mouseover");
+
+          cy.wait(1000);
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".decline-btn")
+            .click();
+          
+          cy.wait("@deleteAnnotation").its("response.statusCode").should("eq", 204);
+        })
+    });
+
+    it("gets successfull response from the API when marking annotation as missing", () => {
+      cy.mount(DocumentAnnotations);
+
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .first()
+        .then(($element) => {       
+          cy.intercept('POST', `**/missing-annotations/`).as('addMissingAnnotations');
+          
+          cy.wrap($element)
+            .trigger("mouseover");
+
+          cy.wait(1000);
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".missing-btn")
+            .click();
+          
+          cy.wait("@addMissingAnnotations").its("response.statusCode").should("eq", 201);
+        })
+    });
+
+    it("gets successfull response from the API when restoring missing annotation", () => {
+      cy.mount(DocumentAnnotations);
+
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .find(".missing-annotation")
+        .first()
+        .then(($element) => {
+          
+          cy.getStore("document").then($document => {
+            cy.intercept('DELETE', `**/missing-annotations/${$document.missingAnnotations[0].id}/`).as('deleteMissingAnnotation');
+          })
+          
+          cy.wrap($element)
+            .trigger("mouseover");
+
+          cy.wait(1000);
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".restore-btn")
+            .click();
+          
+          cy.wait("@deleteMissingAnnotation").its("response.statusCode").should("eq", 204);
+        })
+    });
 });

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -1,13 +1,20 @@
 <template>
-  <div id="labels-sidebar">
+  <div id="document-annotations">
     <!-- When extracting annotations after editing -->
     <div v-if="recalculatingAnnotations" class="extracting-data">
       <ExtractingData />
     </div>
 
     <!-- When document data is still loading -->
-    <div v-else-if="!annotationSets || loading" class="document-annotations-loading">
-      <div v-for="n in numberOfLoadingAnnotations" :key="n" class="loading-annotation-set">
+    <div
+      v-else-if="!annotationSets || loading"
+      class="document-annotations-loading"
+    >
+      <div
+        v-for="n in numberOfLoadingAnnotations"
+        :key="n"
+        class="loading-annotation-set"
+      >
         <LoadingAnnotations />
       </div>
     </div>

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -1,9 +1,7 @@
 <template>
   <div
-    :class="[
-      'document-edit',
-      renameAndCategorize && 'rename-and-categorize-component',
-    ]"
+    id="document-edit"
+    :class="[renameAndCategorize && 'rename-and-categorize-component']"
   >
     <div v-if="!renameAndCategorize" class="pages-section">
       <EditPages
@@ -115,10 +113,15 @@ export default {
       this.saveEditChanges();
     },
     updatedDocument(newValue, oldValue) {
-      if(newValue && oldValue && newValue.length !== oldValue.length && newValue.length === 1) {
+      if (
+        newValue &&
+        oldValue &&
+        newValue.length !== oldValue.length &&
+        newValue.length === 1
+      ) {
         this.saveUpdatedDocuments();
       }
-    }
+    },
   },
   mounted() {
     this.setPages();
@@ -292,7 +295,10 @@ export default {
         const newDocument = {
           name: this.handleNewDocumentName(i),
           category: this.handleNewDocumentCategory(i, clickedLines),
-          categories: this.handleNewDocumentCategoriesAndConfidence(i, clickedLines),
+          categories: this.handleNewDocumentCategoriesAndConfidence(
+            i,
+            clickedLines
+          ),
           pages: this.handleNewDocumentPages(i, clickedLines),
         };
 
@@ -315,7 +321,12 @@ export default {
       return newFileName;
     },
     handleNewDocumentCategory(index, clickedLines) {
-      if (this.updatedDocument && this.updatedDocument.length > 1 && clickedLines[index].origin && clickedLines[index].origin === "AI") {
+      if (
+        this.updatedDocument &&
+        this.updatedDocument.length > 1 &&
+        clickedLines[index].origin &&
+        clickedLines[index].origin === "AI"
+      ) {
         // get the index of the new document in the splitting suggestions
         // to return its category
         const i = this.indexOfSplittingSuggestion(index, clickedLines);
@@ -326,7 +337,12 @@ export default {
       }
     },
     handleNewDocumentCategoriesAndConfidence(index, clickedLines) {
-      if (this.updatedDocument && this.updatedDocument.length > 1 && clickedLines[index].origin && clickedLines[index].origin === "AI") {
+      if (
+        this.updatedDocument &&
+        this.updatedDocument.length > 1 &&
+        clickedLines[index].origin &&
+        clickedLines[index].origin === "AI"
+      ) {
         // get the index of the new document in the splitting suggestions
         // to return its category
         const i = this.indexOfSplittingSuggestion(index, clickedLines);
@@ -398,10 +414,10 @@ export default {
         this.waitingForSplittingConfirmation(this.selectedDocument)
       ) {
         // delete the document categories since the backend doesn't need them
-        const documentToProcess = this.updatedDocument.map(document => {
+        const documentToProcess = this.updatedDocument.map((document) => {
           delete document.categories;
           return document;
-        })
+        });
         this.$store
           .dispatch("edit/editDocument", documentToProcess)
           .catch((error) => {

package/src/components/DocumentPage/DocumentToolbar.cy.js

@@ -0,0 +1,215 @@
+import DocumentDashboard from "../DocumentDashboard.vue";
+
+describe("Document Toolbar", () => {
+  beforeEach(() => {
+    cy.fetchDocument();
+    cy.setFullMode();
+  });
+
+  it("downloads the original file", () => {
+    cy.mount(DocumentDashboard).then(({ wrapper, component }) => {
+      component.onDocumentResize();
+      cy.get("#toolbar-container").find(".download-file").first().click();
+      cy.get("#toolbar-container").get(".original-file").click();
+
+      cy.getStore("document").then(($document) => {
+        cy.readFile(
+          `cypress/Downloads/${$document.selectedDocument.data_file_name}`,
+          { timeout: 20000 }
+        ).should("exist");
+      });
+    });
+  });
+
+  it("downloads the ocr file", () => {
+    cy.mount(DocumentDashboard).then(({ wrapper, component }) => {
+      component.onDocumentResize();
+      cy.get("#toolbar-container").find(".download-file").first().click();
+      cy.get("#toolbar-container").get(".ocr-file").click();
+
+      cy.getStore("document").then(($document) => {
+        const fileName = $document.selectedDocument.data_file_name.replace(
+          /(\.[\w\d_-]+)$/i,
+          "_ocr$1"
+        );
+        cy.readFile(`cypress/Downloads/${fileName}`, { timeout: 20000 }).should(
+          "exist"
+        );
+      });
+    });
+  });
+
+  it("zooms in the document", () => {
+    cy.resetFit();
+    cy.mount(DocumentDashboard).then(({ wrapper, component }) => {
+      component.onDocumentResize();
+      const previousZoom = component.scale;
+      const previousDocumentWidth =
+        component.$refs.scrollingDocument.$el.offsetWidth;
+      cy.get("#toolbar-container").should("be.visible");
+
+      // zoom in
+      cy.get("#toolbar-container").get(".zoom-in").click();
+
+      // check if percentage was updated
+      cy.get("#zoom-percentage")
+        .invoke("text")
+        .then(($text) => {
+          expect($text.trim()).to.not.eql("100%");
+        });
+
+      // check if width of document page has increased
+      cy.get("#scrolling-document")
+        .get(".scrolling-page")
+        .first()
+        .find(".pdf-page-container")
+        .invoke("width")
+        .then(($width) => {
+          expect($width).to.be.greaterThan(previousDocumentWidth);
+        });
+
+      // check if document scale has increased
+      cy.getStore("display").then(($display) => {
+        expect($display.scale).to.be.greaterThan(previousZoom);
+        expect($display.fit).to.eql("custom");
+      });
+    });
+  });
+
+  it("zooms out the document", () => {
+    cy.resetFit();
+    cy.mount(DocumentDashboard).then(({ wrapper, component }) => {
+      component.onDocumentResize();
+      const previousZoom = component.scale;
+      const previousDocumentWidth =
+        component.$refs.scrollingDocument.$el.offsetWidth;
+      cy.get("#toolbar-container").should("be.visible");
+
+      // zoom out
+      cy.get("#toolbar-container").get(".zoom-out").click();
+
+      // check if percentage was updated
+      cy.get("#zoom-percentage")
+        .invoke("text")
+        .then(($text) => {
+          expect($text.trim()).to.not.eql("100%");
+        });
+
+      // check if width of document page has decreased
+      cy.get("#scrolling-document")
+        .get(".scrolling-page")
+        .first()
+        .find(".pdf-page-container")
+        .invoke("width")
+        .then(($width) => {
+          expect($width).to.be.lessThan(previousDocumentWidth);
+        });
+
+      // check if document scale has decreased
+      cy.getStore("display").then(($display) => {
+        expect($display.scale).to.be.lessThan(previousZoom);
+        expect($display.fit).to.eql("custom");
+      });
+    });
+  });
+
+  it("fit document zoom", () => {
+    cy.resetFit();
+    cy.mount(DocumentDashboard).then(({ wrapper, component }) => {
+      component.onDocumentResize();
+      const previousZoom = component.scale;
+      const previousDocumentWidth =
+        component.$refs.scrollingDocument.$el.offsetWidth;
+      cy.get("#toolbar-container").should("be.visible");
+
+      // fit zoom
+      cy.get("#toolbar-container").get(".fit-zoom").click();
+
+      // check if percentage goes to half
+      cy.get("#zoom-percentage")
+        .invoke("text")
+        .then(($text) => {
+          expect($text.trim()).to.eql("50%");
+        });
+
+      // check if width of document page has decreased
+      cy.get("#scrolling-document")
+        .get(".scrolling-page")
+        .first()
+        .find(".pdf-page-container")
+        .invoke("width")
+        .then(($width) => {
+          expect($width).to.be.lessThan(previousDocumentWidth);
+        });
+
+      // check if document scale has decreased
+      cy.getStore("display").then(($display) => {
+        expect($display.scale).to.be.lessThan(previousZoom);
+        expect($display.fit).to.eql("all");
+      });
+    });
+  });
+
+  it("fit document zoom after zoom in", () => {
+    cy.resetFit();
+    cy.mount(DocumentDashboard).then(({ wrapper, component }) => {
+      component.onDocumentResize();
+      const previousZoom = component.scale;
+      const previousDocumentWidth =
+        component.$refs.scrollingDocument.$el.offsetWidth;
+      cy.get("#toolbar-container").should("be.visible");
+
+      // zoom in
+      cy.get("#toolbar-container").get(".zoom-in").click();
+      cy.wait(1000);
+      // fit zoom
+      cy.get("#toolbar-container").get(".fit-zoom").click();
+
+      // check if percentage goes to half
+      cy.get("#zoom-percentage")
+        .invoke("text")
+        .then(($text) => {
+          expect($text.trim()).to.eql("50%");
+        });
+
+      // check if width of document page has decreased
+      cy.get("#scrolling-document")
+        .get(".scrolling-page")
+        .first()
+        .find(".pdf-page-container")
+        .invoke("width")
+        .then(($width) => {
+          expect($width).to.be.lessThan(previousDocumentWidth);
+        });
+
+      // check if document scale has decreased comparing to the initial 100% state
+      cy.getStore("display").then(($display) => {
+        expect($display.scale).to.be.lessThan(previousZoom);
+        expect($display.fit).to.eql("all");
+      });
+    });
+  });
+
+  it("check if edit mode is available and open it", () => {
+    cy.mount(DocumentDashboard).then(({ wrapper, component }) => {
+      component.onDocumentResize();
+      cy.gettersStore().then(($getters) => {
+        if (
+          $getters["edit/isEditModeAvailable"] &&
+          !$getters["document/documentCannotBeEdited"]()
+        ) {
+          cy.get("#edit-mode-button").click();
+          cy.get("#document-annotations").should("not.exist");
+          cy.get("#document-edit").should("exist");
+        } else if ($getters["document/documentCannotBeEdited"]()) {
+          cy.get("#edit-mode-button").should(
+            "have.class",
+            "edit-mode-disabled"
+          );
+        } else {
+          cy.get("#edit-mode-button").should("not.exist");
+        }
+      });
+    });
+  });
+});

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toolbar-container">
+  <div id="toolbar-container">
     <div :class="['toolbar', recalculatingAnnotations && 'hidden']">
       <b-tooltip
         :label="tooltipInfo"
@@ -9,7 +9,8 @@
         class="top-aligned"
       >
         <div
-          v-if="!editMode && !publicView && !isDocumentReviewed"
+          v-if="isEditModeAvailable"
+          id="edit-mode-button"
           :class="[
             'icons icons-left',
             editModeDisabled && 'edit-mode-disabled',
@@ -22,10 +23,7 @@
           <span class="edit-text">{{ $t("edit") }}</span>
         </div>
       </b-tooltip>
-      <div
-        v-if="!editMode && !publicView && !isDocumentReviewed"
-        class="toolbar-divider"
-      />
+      <div v-if="isEditModeAvailable" class="toolbar-divider" />
 
       <div v-if="!publicView" class="download-file icons">
         <b-dropdown aria-role="list" position="is-top-right" scrollable>
@@ -33,10 +31,14 @@
             <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
+            class="original-file"
+            aria-role="listitem"
+            @click="handleDownloadFile()"
+            >{{ $t("original_file") }}</b-dropdown-item
+          >
+          <b-dropdown-item
+            class="ocr-file"
             aria-role="listitem"
             @click="handleDownloadFile('ocr')"
             >{{ $t("pdf_file") }}</b-dropdown-item
@@ -58,7 +60,7 @@
           <FitZoomIcon />
         </div>
         <div
-          :class="['zoom-in', 'icon', isZoomInExceeding && 'zoom-disabled']"
+          :class="['zoom-in icon', isZoomInExceeding && 'zoom-disabled']"
           @click.prevent.stop="zoomIn"
         >
           <PlusIcon />
@@ -69,7 +71,7 @@
         >
           <MinusIcon />
         </div>
-        <div class="percentage">
+        <div id="zoom-percentage" class="percentage">
           {{ `${currentPercentage}%` }}
         </div>
       </div>
@@ -106,13 +108,13 @@ export default {
   },
   computed: {
     ...mapState("display", ["scale"]),
-    ...mapState("edit", ["editMode"]),
+    ...mapGetters("edit", ["isEditModeAvailable"]),
     ...mapState("document", [
       "selectedDocument",
       "recalculatingAnnotations",
       "publicView",
     ]),
-    ...mapGetters("document", ["documentCannotBeEdited", "isDocumentReviewed"]),
+    ...mapGetters("document", ["documentCannotBeEdited"]),
     isZoomInExceeding() {
       return this.currentPercentage === this.maxPercentage;
     },

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="scrolling-document">
     <div
       ref="scrollingDocument"
       v-scroll.immediate="updateScrollBounds"

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

@@ -3,10 +3,10 @@ import DocumentThumbnails from "./DocumentThumbnails.vue";
 describe("Document Thumbnails", () => {
   beforeEach(() => {
     cy.fetchDocument();
+    cy.mount(DocumentThumbnails);
   });
 
   it("shows thumbnails for all document pages", () => {
-    cy.mount(DocumentThumbnails);
     cy.get("#document-pages")
       .find(".document-thumbnail")
       .then(($elements) => {
@@ -20,7 +20,6 @@ describe("Document Thumbnails", () => {
 
   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")
@@ -32,7 +31,6 @@ describe("Document Thumbnails", () => {
   });
 
   it("displays page number correctly", () => {
-    cy.mount(DocumentThumbnails);
     cy.get("#document-pages")
       .find(".document-thumbnail")
       .each(($row, index) => {
@@ -44,7 +42,6 @@ describe("Document Thumbnails", () => {
   });
 
   it("navigates to every document thumbnail", () => {
-    cy.mount(DocumentThumbnails);
     cy.get("#document-pages")
       .find(".document-thumbnail")
       .each(($row, index) => {

package/src/components/DocumentTopBar/DocumentTopBar.cy.js

@@ -22,6 +22,7 @@ describe("Document Top Bar", () => {
 
 	it("Shows category dropdown if not edit mode or reviewed", () => {
 		cy.mount(DocumentTopBar);
+		cy.dispatchAction("edit", "disableEditMode");
 
 		cy.get("#document-top-bar-component")
 			.find(".left-bar-components")
@@ -69,6 +70,7 @@ describe("Document Top Bar", () => {
 
 	it("Shows keyboard icon", () => {
 		cy.mount(DocumentTopBar);
+		cy.dispatchAction("edit", "disableEditMode");
 
 		cy.get("#document-top-bar-component")
 			.find(".right-bar-components")
@@ -78,6 +80,7 @@ describe("Document Top Bar", () => {
 
 	it("Shows disabled finish review button", () => {
 		cy.mount(DocumentTopBar);
+		cy.dispatchAction("edit", "disableEditMode");
 
 		cy.get("#document-top-bar-component")
 			.find(".right-bar-components")

package/src/store/document.js

@@ -502,14 +502,16 @@ const getters = {
    * or if it is Ready Only / Reviewed
    * and if so disable the option to edit the document
    */
-  documentCannotBeEdited: (state) => (document) => {
-    return (
-      document.dataset_status === 1 ||
-      document.dataset_status === 2 ||
-      document.dataset_status === 3 ||
-      document.is_reviewed
-    );
-  },
+  documentCannotBeEdited:
+    (state) =>
+    (document = state.selectedDocument) => {
+      return (
+        document.dataset_status === 1 ||
+        document.dataset_status === 2 ||
+        document.dataset_status === 3 ||
+        document.is_reviewed
+      );
+    },
 
   /**
    * If automatic splitting is enabled for the project

package/src/store/edit.js

@@ -20,6 +20,13 @@ const state = {
 };
 
 const getters = {
+  isEditModeAvailable: (state, getters, rootState, rootGetters) => {
+    return (
+      !rootState.document.publicView &&
+      !rootGetters["document/isDocumentReviewed"] &&
+      !state.editMode
+    );
+  },
   isPageSelected: (state) => (id) => {
     return state.selectedPages.find((page) => page.id === id);
   },