@konfuzio/document-validation-ui 0.1.14 → 0.1.15

package/src/components/DocumentAnnotations/AnnotationSetActionButtons.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="action-buttons">
+    <!-- mark all empty labels as missing -->
+    <div
+      v-if="!publicView && !isDocumentReviewed"
+      class="missing-button-container all-missing"
+      @mouseenter="mouseenterAnnotationSet('missing')"
+      @mouseleave="mouseleaveAnnotationSet"
+    >
+      <b-button
+        type="is-ghost"
+        class="missing-btn all-missing-btn"
+        :disabled="numberOfEmptyLabelsInAnnotationSet === 0"
+        @click.stop="markAllAsMissing"
+      >
+        {{ $t("mark_all_missing") }} ({{ numberOfEmptyLabelsInAnnotationSet }})
+      </b-button>
+    </div>
+
+    <!-- accept all pending annotations -->
+    <div
+      v-if="!publicView && !isDocumentReviewed"
+      class="accept-all"
+      @mouseenter="mouseenterAnnotationSet('accept')"
+      @mouseleave="mouseleaveAnnotationSet"
+    >
+      <b-button
+        type="is-primary"
+        class="accept-all-btn"
+        :disabled="numberOfPendingAnnotationsInAnnotationSet === 0"
+        @click.stop="acceptAllPending"
+      >
+        {{ $t("accept_group") }} ({{
+          numberOfPendingAnnotationsInAnnotationSet
+        }})
+      </b-button>
+    </div>
+  </div>
+</template>
+<script>
+/* Component for showing actions for each Annotation Set */
+
+import { mapGetters, mapState } from "vuex";
+
+export default {
+  name: "AnnotationSetActionButtons",
+  props: {
+    numberOfEmptyLabelsInAnnotationSet: {
+      type: Number,
+      default: 0,
+    },
+    numberOfPendingAnnotationsInAnnotationSet: {
+      type: Number,
+      default: 0,
+    },
+  },
+  computed: {
+    ...mapState("document", ["publicView"]),
+    ...mapGetters("document", ["isDocumentReviewed"]),
+  },
+  methods: {
+    mouseenterAnnotationSet(type) {
+      if (type == "missing") {
+        this.$emit("hover-annotation-set-to-mark-missing");
+      }
+
+      if (type == "accept") {
+        this.$emit("hover-annotation-set-to-accept");
+      }
+    },
+    mouseleaveAnnotationSet() {
+      this.$emit("leave-annotation-set-to-accept");
+      this.$emit("leave-annotation-set-to-mark-missing");
+    },
+    markAllAsMissing() {
+      this.$emit("mark-all-empty-missing");
+    },
+    acceptAllPending() {
+      this.$emit("accept-all-pending-annotations");
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>

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">
@@ -42,6 +42,7 @@
                 'label-set-dropdown',
                 labelSets.length === 0 && 'dropdown-disabled',
               ]"
+              scrollable
             >
               <template #trigger>
                 <div>
@@ -149,7 +150,7 @@ export default {
         }
       );
 
-      this.$emit("labelSet", this.selectedLabelSet);
+      this.$emit("finish", this.selectedLabelSet);
       this.close();
     },
     setSelectedLabelSet(labelSet) {
@@ -157,6 +158,7 @@ export default {
       this.selectedLabelSet = labelSet;
     },
     close() {
+      this.$store.dispatch("display/showChooseLabelSetModal", null);
       this.$emit("close");
     },
     createLabelsList(labels) {

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

@@ -0,0 +1,295 @@
+import DocumentAnnotations from "./DocumentAnnotations.vue";
+
+describe("Document Annotations", () => {
+    beforeEach(() => {
+        cy.fetchDocument();
+        cy.dispatchAction("document", "setPublicView", false);
+    });
+
+    it("shows loading when there are no annotation sets loaded yet or when loading the data", () => {
+        cy.mount(DocumentAnnotations);
+        cy.dispatchAction("document", "setAnnotationSets", null);
+        cy.get("#labels-sidebar")
+          .find(".document-annotations-loading")
+          .its("length")
+          .should("equal", 1);
+
+        cy.mount(DocumentAnnotations);
+        cy.dispatchAction("document", "startLoading");
+        cy.get("#labels-sidebar")
+          .find(".document-annotations-loading")
+          .its("length")
+          .should("equal", 1);
+    });
+
+    it("shows 3 rows of loading annotation sets", () => {
+        cy.mount(DocumentAnnotations);
+        cy.dispatchAction("document", "startLoading");
+        cy.get("#labels-sidebar")
+          .find(".loading-annotation-set")
+          .its("length")
+          .should("equal", 3);
+    });
+
+    it("shows all annotation sets", () => {
+        cy.mount(DocumentAnnotations);
+        cy.get("#labels-sidebar")
+          .find(".annotation-set-group")
+          .then((elements) => {
+            cy.storeState("document", "annotationSets")
+              .its("length")
+              .should("equal", elements.length);
+            });
+    });
+
+    it("shows the empty state if there are no annotation sets", () => {
+        cy.mount(DocumentAnnotations);
+        cy.dispatchAction("document", "setAnnotationSets", []);
+        
+        cy.get("#labels-sidebar")
+          .find(".empty-annotation-sets")
+          .find(".empty-container")
+          .find(".title")
+          .should('be.visible')
+    });
+
+    it("shows no annotation set action buttons if the document is read only", () => {
+      cy.mount(DocumentAnnotations);
+      cy.dispatchAction("document", "setPublicView", true);
+      
+      cy.get("#labels-sidebar")
+        .find(".labelset-action-buttons")
+        .should("not.be.visible");
+    });
+
+    it("renders action buttons for the annotation sets and annotations", () => {
+      cy.mount(DocumentAnnotations);
+    
+      cy.get("#labels-sidebar")
+        .find(".labelset-action-buttons")
+        .should("be.visible");
+
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".buttons-container")
+        .should("exist");
+    });
+
+    it("does not show annotations action buttons by default", () => {
+      cy.mount(DocumentAnnotations);
+    
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".buttons-container")
+        .should("not.be.visible");
+    });
+
+    it("clicks each annotation and empty annotation and checks that it is in edit mode", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".annotation-value")
+        .not(".missing-annotation")
+        .each($annotation => {
+          cy.wrap($annotation)
+            .should("not.have.class", "clicked-ann")
+          cy.wrap($annotation)
+            .click();
+          cy.wrap($annotation)
+            .should("have.class", "clicked-ann")
+          cy.wait(1000);
+        })
+    });
+
+    it("clicks each annotation and shows action buttons", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".annotation")
+        .each(($row) => {
+          cy.wrap($row)
+            .find(".annotation-value")
+            .click();
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-save-btn")
+            .should("be.visible")
+            
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-cancel-btn")
+            .should("be.visible")
+          
+          
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-cancel-btn")
+            .click();
+
+          cy.wait(1000);
+        })
+    });
+
+    it("shows accept and decline buttons when hovering annotation", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".not-revised")
+        .each(($row) => {
+          cy.wrap($row)
+            .trigger("mouseover");
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".decline-button-container")
+            .should("be.visible");
+            
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-accept-btn")
+            .should("be.visible");
+
+          cy.wait(1000);
+        })
+    });
+
+    it("clicks each empty annotation and shows action buttons", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .find(".annotation-value")
+        .each(($annotation) => {
+          if ($annotation.hasClass("missing-annotation")) {
+           return;
+          } else {
+            cy.wrap($annotation)
+            .click();
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-cancel-btn")
+            .should("be.visible")
+            
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".annotation-cancel-btn")
+            .click();
+
+          cy.wait(1000);
+          }
+        });     
+    });
+
+    it("shows mark as missing button when hovering empty annotation", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .find(".annotation-value")
+        .not(".missing-annotation")
+        .each(($annotation) => {
+          cy.wrap($annotation)
+            .trigger("mouseover");
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".missing-button-container")
+            .should("be.visible");
+            
+          cy.wait(1000);
+        })
+    });
+
+    it("marks empty annotation as missing", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .find(".annotation-value")
+        .not(".missing-annotation")
+        .each(($annotation, index) => {
+          cy.wrap($annotation)
+            .trigger("mouseover");
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".missing-button-container")
+            .find(".missing-btn")
+            .click();
+          
+          cy.storeState("document", "missingAnnotations").its("length").should("not.eq", 0);
+
+          cy.wrap($annotation)
+            .trigger("mouseleave");
+
+          cy.wait(1000);
+        })
+    });
+
+    it("restores empty annotation", () => {
+      cy.mount(DocumentAnnotations);
+      
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .find(".missing-annotation")
+        .each(($annotation) => {
+          cy.wrap($annotation)
+            .trigger("mouseover");
+
+          cy.get("#labels-sidebar")
+            .find(".label")
+            .find(".annotation-row")
+            .find(".action-buttons")
+            .find(".restore-btn")
+            .click();
+
+          cy.wrap($annotation)
+            .trigger("mouseleave");
+
+          cy.wait(1000);
+        });
+
+      cy.get("#labels-sidebar")
+        .find(".label")
+        .find(".annotation-row")
+        .find(".empty-annotation")
+        .should("not.have.class", "missing-annotation");
+    });
+});