@konfuzio/document-validation-ui 0.1.6-pre-release-1 → 0.1.6-pre-release

package/src/components/DocumentAnnotations/AnnotationActionButtons.vue

@@ -3,7 +3,7 @@
     <!-- loading -->
     <div v-if="isLoading">
       <b-notification :closable="false" class="loading-background">
-        <b-loading :active="isLoading" :is-full-page="loadingOnFullPage">
+        <b-loading :active="isLoading" :is-full-page="false">
           <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
         </b-loading>
       </b-notification>
@@ -11,7 +11,7 @@
 
     <!-- save button -->
     <b-button
-      v-if="saveBtn && !isLoading && !publicView"
+      v-if="saveBtn && !isLoading && !publicView && !documentIsReviewed"
       :class="[
         'annotation-save-btn text-btn',
         actionBar && 'action-bar-save-btn',
@@ -25,7 +25,7 @@
 
     <!-- cancel button -->
     <b-button
-      v-if="cancelBtn && !isLoading"
+      v-if="cancelBtn && !isLoading && !documentIsReviewed"
       class="is-small annotation-cancel-btn"
       icon-left="xmark"
       @click.stop="cancel"
@@ -33,7 +33,14 @@
 
     <!-- decline button -->
     <div
-      v-if="declineBtn && !isLoading && !saveBtn && !cancelBtn && !publicView"
+      v-if="
+        declineBtn &&
+        !isLoading &&
+        !saveBtn &&
+        !cancelBtn &&
+        !publicView &&
+        !documentIsReviewed
+      "
       class="missing-decline-button-container"
     >
       <b-button
@@ -47,7 +54,14 @@
 
     <!-- accept button -->
     <b-button
-      v-if="acceptBtn && !isLoading && !saveBtn && !cancelBtn && !publicView"
+      v-if="
+        acceptBtn &&
+        !isLoading &&
+        !saveBtn &&
+        !cancelBtn &&
+        !publicView &&
+        !documentIsReviewed
+      "
       class="annotation-accept-btn primary-button"
       type="is-primary"
       @click.stop="accept"
@@ -58,7 +72,12 @@
     <!-- missing button -->
     <div
       v-if="
-        showMissingBtn && !isLoading && !cancelBtn && !saveBtn && !publicView
+        showMissingBtn &&
+        !isLoading &&
+        !cancelBtn &&
+        !saveBtn &&
+        !publicView &&
+        !documentIsReviewed
       "
       class="missing-decline-button-container"
     >
@@ -73,7 +92,7 @@
 
     <!-- Restore not found annotations -->
     <b-button
-      v-if="restoreBtn && !isLoading && !publicView"
+      v-if="restoreBtn && !isLoading && !publicView && !documentIsReviewed"
       class="restore-btn"
       type="is-primary"
       @click.stop="restore"
@@ -115,13 +134,12 @@ export default {
       required: false,
     },
   },
-  data() {
-    return {
-      loadingOnFullPage: false,
-    };
-  },
   computed: {
-    ...mapState("document", ["publicView", "missingAnnotations"]),
+    ...mapState("document", [
+      "publicView",
+      "missingAnnotations",
+      "documentIsReviewed",
+    ]),
   },
   methods: {
     save() {

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div :id="annotation.id" ref="annotation" class="annotation">
     <span
-      v-if="!publicView"
+      v-if="!publicView || !documentIsReviewed"
       :id="annotation.id"
       ref="contentEditable"
       :class="[
@@ -82,6 +82,7 @@ export default {
       "newAcceptedAnnotations",
       "selectedEntities",
       "showActionError",
+      "documentIsReviewed",
     ]),
     annotationText() {
       if (this.isAnnotationBeingEdited) {
@@ -155,7 +156,7 @@ export default {
       this.$refs.contentEditable.textContent = text;
     },
     handleEditAnnotation(event) {
-      if (this.publicView) return;
+      if (this.publicView || this.documentIsReviewed) return;
 
       if (event) {
         event.preventDefault();
@@ -163,6 +164,7 @@ export default {
 
       if (
         !this.publicView &&
+        !this.documentIsReviewed &&
         !this.isAnnotationBeingEdited &&
         !this.isLoading
       ) {
@@ -226,7 +228,7 @@ export default {
       event.preventDefault();
     },
     saveAnnotationChanges(event) {
-      if (this.publicView) return;
+      if (this.publicView || this.documentIsReviewed) return;
 
       if (event) {
         event.preventDefault();

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -1,10 +1,10 @@
 <template>
   <b-tooltip
     :animated="false"
-    position="is-bottom"
-    class="left-aligned annotation-details"
+    :position="fromTable ? 'is-top' : 'is-bottom'"
+    :class="[!fromTable && 'left-aligned', 'annotation-details']"
   >
-    <div class="label-icon">
+    <div :class="['label-icon', fromTable && 'is-small']">
       <div v-if="created(annotation) || edited(annotation)">
         <div
           v-if="accepted(annotation)"
@@ -179,6 +179,10 @@ export default {
       type: Object,
       default: null,
     },
+    fromTable: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

package/src/components/DocumentAnnotations/AnnotationRow.vue

@@ -17,13 +17,18 @@
       @mouseenter="onAnnotationHoverEnter(defaultSpan)"
       @mouseleave="onAnnotationHoverLeave"
     >
-      <AnnotationDetails
-        :description="label.description"
-        :annotation="annotation"
-        :annotation-set="annotationSet"
-        :label="label"
-      />
+      <div class="annotation-icon">
+        <AnnotationDetails
+          :description="label.description"
+          :annotation="annotation"
+          :annotation-set="annotationSet"
+          :label="label"
+          :from-table="fromTable"
+        />
+      </div>
+
       <div
+        v-if="showLabel"
         :class="[
           'label-name',
           annotationIsNotFound(annotationSet, label) && 'not-found-text',
@@ -70,7 +75,7 @@
             />
           </div>
           <EmptyAnnotation
-            v-else
+            v-else-if="!fromTable"
             :label="label"
             :annotation-set="annotationSet"
             :is-hovered="hoveredAnnotation"
@@ -79,7 +84,7 @@
           />
         </div>
       </div>
-      <div class="buttons-container">
+      <div v-if="showButtons" class="buttons-container">
         <AnnotationActionButtons
           :cancel-btn="showCancelButton()"
           :accept-btn="showAcceptButton()"
@@ -127,6 +132,18 @@ export default {
       type: Object,
       default: null,
     },
+    showLabel: {
+      type: Boolean,
+      default: true,
+    },
+    showButtons: {
+      type: Boolean,
+      default: true,
+    },
+    fromTable: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -151,6 +168,7 @@ export default {
       "documentId",
       "showActionError",
       "missingAnnotations",
+      "documentIsReviewed",
     ]),
     ...mapState("selection", ["spanSelection", "elementSelected"]),
     ...mapGetters("document", [
@@ -279,7 +297,7 @@ export default {
       if (span) {
         this.$store.dispatch("document/setDocumentAnnotationSelected", {
           annotation: this.annotation,
-          label: this.label,
+          label: this.fromTable ? null : this.label,
           span,
           scrollTo: false,
         });
@@ -289,6 +307,9 @@ export default {
       this.$store.dispatch("document/disableDocumentAnnotationSelected");
     },
     onAnnotationClick() {
+      if (!this.fromTable) {
+        this.$store.dispatch("display/showAnnSetTable", null);
+      }
       this.$store.dispatch("document/scrollToDocumentAnnotationSelected");
     },
     hoveredEmptyLabels() {
@@ -405,7 +426,7 @@ export default {
       );
     },
     handleSaveChanges(decline) {
-      if (this.publicView) return;
+      if (this.publicView || this.documentIsReviewed) return;
 
       if (
         this.showAcceptButton() ||

package/src/components/DocumentAnnotations/AnnotationSetActionButtons.vue

@@ -2,7 +2,7 @@
   <div class="action-buttons">
     <!-- mark all empty labels as missing -->
     <div
-      v-if="!publicView"
+      v-if="!publicView && !documentIsReviewed"
       class="missing-decline-button-container all-missing"
       @mouseenter="mouseenterAnnotationSet('missing')"
       @mouseleave="mouseleaveAnnotationSet"
@@ -19,7 +19,7 @@
 
     <!-- accept all pending annotations -->
     <div
-      v-if="!publicView"
+      v-if="!publicView && !documentIsReviewed"
       class="accept-all"
       @mouseenter="mouseenterAnnotationSet('accept')"
       @mouseleave="mouseleaveAnnotationSet"
@@ -53,7 +53,7 @@ export default {
     },
   },
   computed: {
-    ...mapState("document", ["publicView"]),
+    ...mapState("document", ["publicView", "documentIsReviewed"]),
   },
   methods: {
     mouseenterAnnotationSet(type) {

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -109,6 +109,8 @@ export default {
       "selectedDocument",
       "categorizeModalIsActive",
       "splittingSuggestions",
+      "publicView",
+      "documentIsReviewed",
     ]),
     ...mapGetters("category", ["category", "projectHasSingleCategory"]),
     ...mapGetters("document", ["categorizationIsConfirmed"]),
@@ -181,7 +183,9 @@ export default {
         // But if there is a category, we also need to check if there are splitting suggestions or not
         this.show =
           (!category || (category && !this.splittingSuggestions)) &&
-          !this.categorizationIsConfirmed;
+          !this.categorizationIsConfirmed &&
+          !this.publicView &&
+          !this.documentIsReviewed;
       }
     },
     canCloseModal() {

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -15,15 +15,42 @@
     <!-- When there's no annotations in the label -->
     <div v-else-if="annotationSets.length === 0">
       <CategorizeModal
-        v-if="!publicView && !waitingForSplittingConfirmation(selectedDocument)"
+        v-if="
+          !publicView &&
+          !documentIsReviewed &&
+          !waitingForSplittingConfirmation(selectedDocument)
+        "
       />
       <EmptyState />
     </div>
 
     <div v-else :class="['annotation-set-list']">
-      <CategorizeModal v-if="!publicView" />
+      <CategorizeModal v-if="!publicView || !documentIsReviewed" />
       <div
-        v-for="(annotationSet, indexGroup) in annotationSets"
+        v-if="Object.entries(annotationSetsInTable()).length > 0"
+        class="annotation-set-group"
+      >
+        <div class="label-set-header">
+          <div class="label-set-name">{{ $t("table") }}</div>
+        </div>
+        <div
+          v-for="(tableSet, index) in Object.values(annotationSetsInTable())"
+          :key="index"
+          class="ann-set-table"
+          @click="openAnnotationSetTable(tableSet)"
+        >
+          <div class="ann-set-table-icon">
+            <GridIcon /><span class="ann-set-number">{{
+              tableSet.length
+            }}</span>
+          </div>
+          <span class="ann-set-table-label-set-name">{{
+            tableSet[0].label_set.name
+          }}</span>
+        </div>
+      </div>
+      <div
+        v-for="(annotationSet, indexGroup) in annotationSetsToShowInList()"
         :key="indexGroup"
         class="annotation-set-group"
       >
@@ -85,6 +112,7 @@ import AnnotationSetActionButtons from "./AnnotationSetActionButtons";
 import DocumentLabel from "./DocumentLabel";
 import LoadingAnnotations from "./LoadingAnnotations";
 import CategorizeModal from "./CategorizeModal";
+import GridIcon from "../../assets/images/GridIcon";
 
 /**
  * This component loads all annotations for one document
@@ -97,6 +125,7 @@ export default {
     DocumentLabel,
     LoadingAnnotations,
     CategorizeModal,
+    GridIcon,
   },
   data() {
     return {
@@ -106,6 +135,7 @@ export default {
     };
   },
   computed: {
+    ...mapState("display", ["showAnnSetTable"]),
     ...mapState("document", [
       "documentId",
       "recalculatingAnnotations",
@@ -118,6 +148,7 @@ export default {
       "labels",
       "selectedDocument",
       "splittingSuggestions",
+      "documentIsReviewed",
     ]),
     ...mapGetters("category", ["category"]),
     ...mapGetters("document", [
@@ -125,6 +156,8 @@ export default {
       "emptyLabelsLength",
       "annotationsWithPendingReviewLength",
       "waitingForSplittingConfirmation",
+      "annotationSetsToShowInList",
+      "annotationSetsInTable",
     ]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
@@ -151,19 +184,6 @@ export default {
     window.removeEventListener("keydown", this.keyDownHandler);
   },
   methods: {
-    showMissingAnnotations() {
-      if (
-        (this.publicView &&
-          this.selectedDocument &&
-          this.selectedDocument.is_reviewed) ||
-        !this.publicView
-      ) {
-        return true;
-      } else {
-        return false;
-      }
-    },
-
     focusOnNextAnnotation() {
       const annotations = Array.from(
         document.getElementsByClassName("annotation-value")
@@ -211,7 +231,7 @@ export default {
 
     keyDownHandler(event) {
       // only allow keyboard navigation if we are not in public view mode
-      if (this.publicView) return;
+      if (this.publicView || this.documentIsReviewed) return;
 
       // get out of edit mode and navigation
       if (event.key === "Escape") {
@@ -476,6 +496,16 @@ export default {
           });
       }
     },
+
+    openAnnotationSetTable(tableSet) {
+      this.$store.dispatch("selection/disableSelection");
+      this.$store.dispatch("document/resetEditAnnotation");
+      if (this.showAnnSetTable && this.showAnnSetTable === tableSet) {
+        this.$store.dispatch("display/toggleAnnSetTable", tableSet);
+      } else {
+        this.$store.dispatch("display/showAnnSetTable", tableSet);
+      }
+    },
   },
 };
 </script>

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="empty-annotation">
     <span
-      v-if="!publicView"
+      v-if="!publicView && !documentIsReviewed"
       :id="emptyAnnotationId()"
       ref="emptyAnnotation"
       :class="[
@@ -84,6 +84,7 @@ export default {
       "publicView",
       "selectedEntities",
       "showActionError",
+      "documentIsReviewed",
     ]),
   },
   watch: {
@@ -158,12 +159,14 @@ export default {
     handleEditEmptyAnnotation() {
       if (
         this.publicView ||
+        this.documentIsReviewed ||
         this.annotationIsNotFound(this.annotationSet, this.label)
       )
         return;
 
       if (
         !this.publicView &&
+        !this.documentIsReviewed &&
         !this.isLoading &&
         this.elementSelected !== this.emptyAnnotationId()
       ) {
@@ -218,7 +221,7 @@ export default {
       }
     },
     saveEmptyAnnotationChanges(event) {
-      if (this.publicView) return;
+      if (this.publicView || this.documentIsReviewed) return;
 
       if (event) {
         event.preventDefault();

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -22,12 +22,12 @@
     </div>
     <div v-if="!splitOverview" class="sidebar">
       <EditSidebar
+        :split-suggestions-enabled="splitSuggestionsEnabled"
         @rotate-left="rotatePage"
         @rotate-right="rotatePage"
         @rotate-all-left="handleRotationsToTheLeft"
         @rotate-all-right="handleRotationsToTheRight"
         @handle-splitting-suggestions="applySplittingSuggestions"
-        :split-suggestions-enabled="splitSuggestionsEnabled"
       />
     </div>
     <div class="confirmation-modal-container">

package/src/components/DocumentEdit/EditSidebar.vue

@@ -51,9 +51,9 @@
       >
         <b-field>
           <b-switch
+            v-model="switchStatus"
             :value="true"
             size="is-small"
-            v-model="switchStatus"
             :disabled="!documentHasProposedSplit(selectedDocument)"
           >
             <span class="switch-text">{{ $t("smart_split") }}</span>
@@ -82,6 +82,11 @@ export default {
   components: {
     SidebarButtons,
   },
+  props: {
+    splitSuggestionsEnabled: {
+      type: Boolean,
+    },
+  },
   data() {
     return {
       buttonDisabled: true,
@@ -90,11 +95,6 @@ export default {
       switchStatus: true,
     };
   },
-  props: {
-    splitSuggestionsEnabled: {
-      type: Boolean,
-    },
-  },
   computed: {
     ...mapState("edit", ["selectedPages"]),
     ...mapState("document", ["splittingSuggestions", "selectedDocument"]),

package/src/components/DocumentPage/AnnSetTableOptions.vue

@@ -0,0 +1,109 @@
+<template>
+  <div
+    class="ann-set-table-header"
+    :style="{ left: `${coordinates.x}px`, top: `${coordinates.y}px` }"
+  >
+    <b-dropdown
+      aria-role="list"
+      class="ann-set-table-header-dropdown"
+      position="is-top-right"
+    >
+      <template #trigger>
+        <span class="ann-set-label-set-name">{{ labelSetName }}</span>
+        <SettingsIcon />
+      </template>
+      <b-dropdown-item
+        aria-role="listitem"
+        class="delete-action"
+        @click="handleDelete()"
+      >
+        <span>{{ $t("delete_table") }}</span></b-dropdown-item
+      >
+    </b-dropdown>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import SettingsIcon from "../../assets/images/SettingsIcon";
+
+export default {
+  name: "AnnSetTableOptions",
+  components: {
+    SettingsIcon,
+  },
+  props: {
+    page: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters("document", [
+      "annotationSetsInTable",
+      "annotationsInAnnotationsSets",
+    ]),
+    ...mapGetters("display", ["bboxToPoint"]),
+    ...mapState("display", ["showAnnSetTable"]),
+    labelSetName() {
+      return this.showAnnSetTable[0].label_set.name;
+    },
+    coordinates() {
+      let xFinal = 0;
+      let yFinal = 0;
+      const paddingTop = 40;
+
+      this.showAnnSetTable.forEach((annotationSet) => {
+        if (annotationSet.labels) {
+          annotationSet.labels.forEach((label) => {
+            label.annotations.forEach((annotation) => {
+              annotation.span.forEach((span) => {
+                const { x, y } = this.bboxToPoint(this.page, {
+                  x: span.x0,
+                  y: span.y0,
+                });
+                if (xFinal === 0 || x < xFinal) {
+                  xFinal = x;
+                }
+                if (yFinal === 0 || y < yFinal) {
+                  yFinal = y - paddingTop;
+                }
+              });
+            });
+          });
+        }
+      });
+      return { x: xFinal, y: yFinal };
+    },
+  },
+  methods: {
+    handleDelete() {
+      const annotationsToDelete = this.annotationsInAnnotationsSets(
+        this.showAnnSetTable
+      );
+
+      for (let i = 0; i < annotationsToDelete.length; i++) {
+        const annotationToDelete = annotationsToDelete[i];
+        this.$store
+          .dispatch("document/deleteAnnotation", {
+            annotationId: annotationToDelete.id,
+          })
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("edit_error"),
+            });
+          });
+      }
+      this.$store.dispatch("display/showAnnSetTable", null);
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/ann_set_table_options.scss"
+></style>