@konfuzio/document-validation-ui 0.1.1

package/src/components/App.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="app-container">
+    <DocumentsList />
+    <DocumentDashboard />
+  </div>
+</template>
+<script>
+import DocumentDashboard from "./DocumentDashboard";
+import { DocumentsList } from "./DocumentsList";
+import API from "../api";
+
+export default {
+  name: "App",
+  components: {
+    DocumentsList,
+    DocumentDashboard,
+  },
+  props: {
+    document: {
+      type: String,
+      required: false,
+    },
+    project: {
+      type: String,
+      required: false,
+    },
+    user_token: {
+      type: String,
+      required: false,
+    },
+    full_mode: {
+      type: String,
+      required: false,
+    },
+    locale: { type: String, required: false },
+  },
+  computed: {
+    documentId() {
+      if (process.env.VUE_APP_DOCUMENT_ID) {
+        return process.env.VUE_APP_DOCUMENT_ID;
+      } else if (this.document) {
+        return this.document;
+      } else {
+        return null;
+      }
+    },
+    projectId() {
+      if (process.env.VUE_APP_PROJECT_ID) {
+        return process.env.VUE_APP_PROJECT_ID;
+      } else if (this.project) {
+        return this.project;
+      } else {
+        return null;
+      }
+    },
+    userToken() {
+      if (process.env.VUE_APP_GUEST_USER_TOKEN) {
+        return process.env.VUE_APP_GUEST_USER_TOKEN;
+      } else if (this.user_token) {
+        return this.user_token;
+      } else {
+        return null;
+      }
+    },
+    isPublicView() {
+      if (
+        process.env.VUE_APP_GUEST_USER_TOKEN ||
+        this.user_token ||
+        (this.full_mode && this.full_mode === "true")
+      ) {
+        return false;
+      } else {
+        return true;
+      }
+    },
+  },
+  created() {
+    // locale config
+    if (this.locale && this.locale !== "") {
+      this.$i18n.locale = this.locale;
+    }
+
+    // user token config
+    API.setAuthToken(this.userToken);
+
+    // document and project config
+    Promise.all([
+      this.$store.dispatch("project/setProjectId", this.projectId),
+      this.$store.dispatch("document/setDocId", this.documentId),
+      this.$store.dispatch("document/setPublicView", this.isPublicView),
+    ]).finally(() => {
+      this.$store.dispatch("document/fetchDocument");
+    });
+
+    // Add observer for class added to HTML tag when Buefy modals are mounted
+    const htmlTag = document.documentElement;
+    const observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        if (mutation.attributeName === "class") {
+          const classToRemove = "is-clipped";
+          if (mutation.target.classList.contains(classToRemove)) {
+            htmlTag.classList.remove(classToRemove);
+          }
+        }
+      });
+    });
+    observer.observe(htmlTag, { attributes: true });
+  },
+};
+</script>
+
+<style lang="scss" src="../assets/scss/main.scss"></style>

package/src/components/DocumentAnnotations/ActionButtons.vue

@@ -0,0 +1,237 @@
+<template>
+  <div class="action-buttons">
+    <!-- loading -->
+    <div v-if="isLoading && !finishReviewBtn">
+      <b-notification :closable="false" class="loading-background">
+        <b-loading :active="isLoading" :is-full-page="loadingOnFullPage">
+          <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
+        </b-loading>
+      </b-notification>
+    </div>
+
+    <!-- save button -->
+    <b-button
+      v-if="saveBtn && !isLoading"
+      :class="[
+        'annotation-save-btn text-btn',
+        actionBar && 'action-bar-save-btn',
+      ]"
+      type="is-primary"
+      @click.stop="save"
+    >
+      {{ $t("save") }}
+    </b-button>
+
+    <!-- cancel button -->
+    <b-button
+      v-if="cancelBtn && !isLoading"
+      class="is-small annotation-cancel-btn"
+      icon-left="xmark"
+      @click.stop="cancel"
+    />
+
+    <!-- decline button -->
+    <div
+      v-if="declineBtn && !isLoading && !saveBtn && !cancelBtn"
+      class="reject-decline-button-container"
+    >
+      <b-button
+        type="is-ghost"
+        class="reject-decline-btn decline-btn"
+        @click.stop="decline"
+      >
+        {{ $t("decline") }}
+      </b-button>
+    </div>
+
+    <!-- accept button -->
+    <b-button
+      v-if="acceptBtn && !isLoading && !saveBtn && !cancelBtn"
+      class="annotation-accept-btn"
+      type="is-primary"
+      @click.stop="accept"
+    >
+      {{ $t("accept") }}
+    </b-button>
+
+    <!-- reject button -->
+    <div
+      v-if="showReject && !isLoading && !cancelBtn && !saveBtn"
+      class="reject-decline-button-container"
+    >
+      <b-button
+        type="is-ghost"
+        class="reject-decline-btn reject-btn"
+        @click.stop="reject"
+      >
+        {{ $t("reject_label") }}
+      </b-button>
+    </div>
+
+    <!-- reject all labels -->
+    <div
+      v-if="
+        !publicView && rejectAllEmptyBtn && !isLoading && !cancelBtn && !saveBtn
+      "
+      class="reject-decline-button-container reject-all"
+      @mouseenter="mouseenterAnnotationSet('reject')"
+      @mouseleave="mouseleaveAnnotationSet"
+    >
+      <b-button
+        type="is-ghost"
+        class="reject-decline-btn reject-btn reject-all-btn"
+        :disabled="emptyLabelsLength(annotationSet) === 0"
+        @click.stop="rejectAllEmpty"
+      >
+        {{ $t("reject_all_empty") }} ({{ emptyLabelsLength(annotationSet) }})
+      </b-button>
+    </div>
+
+    <!-- accept all pending annotations -->
+    <div
+      v-if="!publicView && acceptAllBtn && !isLoading"
+      class="accept-all"
+      @mouseenter="mouseenterAnnotationSet('accept')"
+      @mouseleave="mouseleaveAnnotationSet"
+    >
+      <b-button
+        type="is-primary"
+        class="accept-all-btn"
+        :disabled="annotationsWithPendingReviewLength(annotationSet) === 0"
+        @click.stop="acceptGroup"
+      >
+        {{ $t("accept_group") }} ({{
+          annotationsWithPendingReviewLength(annotationSet)
+        }})
+      </b-button>
+    </div>
+
+    <!-- finish review button -->
+    <b-button
+      v-if="finishReviewBtn"
+      :class="['finish-review-btn', 'text-btn']"
+      type="is-primary"
+      :disabled="finishDisabled"
+      @click.stop="finishReview"
+    >
+      <span v-if="!isLoading">
+        {{ $t("finish_review") }}
+      </span>
+
+      <div v-else>
+        <b-notification :closable="false" :class="['loading-background']">
+          <b-loading :active="isLoading" :is-full-page="loadingOnFullPage">
+            <b-icon icon="spinner" class="fa-spin loading-icon-size spinner" />
+          </b-loading>
+        </b-notification>
+      </div>
+    </b-button>
+  </div>
+</template>
+<script>
+import { mapState, mapGetters } from "vuex";
+export default {
+  name: "ActionButtons",
+  props: {
+    saveBtn: {
+      type: Boolean,
+    },
+    cancelBtn: {
+      type: Boolean,
+    },
+    showReject: {
+      type: Boolean,
+    },
+    isLoading: {
+      type: Boolean,
+    },
+    acceptBtn: {
+      type: Boolean,
+    },
+    finishReviewBtn: {
+      type: Boolean,
+    },
+    finishDisabled: {
+      type: Boolean,
+    },
+    handleReject: {
+      type: Function,
+      default: null,
+    },
+    rejectAllEmptyBtn: {
+      type: Boolean,
+    },
+    annotationSet: {
+      type: Object,
+      default: null,
+    },
+    acceptAllBtn: {
+      type: Boolean,
+    },
+    declineBtn: {
+      type: Boolean,
+    },
+    actionBar: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      loadingOnFullPage: false,
+    };
+  },
+  computed: {
+    ...mapState("document", ["publicView", "missingAnnotations"]),
+    ...mapGetters("document", [
+      "emptyLabelsLength",
+      "annotationsWithPendingReviewLength",
+    ]),
+  },
+  methods: {
+    save() {
+      this.$emit("save");
+    },
+    cancel() {
+      this.$emit("cancel");
+    },
+    accept() {
+      this.$emit("accept");
+    },
+    reject() {
+      this.$emit("reject");
+    },
+    mouseenterAnnotationSet(type) {
+      if (type == "reject") {
+        this.$emit("hover-annotation-set-to-reject");
+      }
+
+      if (type == "accept") {
+        this.$emit("hover-annotation-set-to-accept");
+      }
+    },
+    mouseleaveAnnotationSet() {
+      this.$emit("leave-annotation-set-to-accept");
+      this.$emit("leave-annotation-set-to-reject");
+    },
+    rejectAllEmpty() {
+      this.$emit("reject-all-empty");
+    },
+    finishReview() {
+      this.$emit("finish-review");
+    },
+    acceptGroup() {
+      this.$emit("accept-group");
+    },
+    decline() {
+      this.$emit("decline");
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>

package/src/components/DocumentAnnotations/AnnotationContent.vue

@@ -0,0 +1,249 @@
+<template>
+  <div :id="annotation.id" ref="annotation" class="annotation">
+    <span
+      v-if="!publicView"
+      :id="annotation.id"
+      ref="contentEditable"
+      :class="[
+        'annotation-value',
+        isLoading && 'saving-changes',
+        showActionError &&
+          editAnnotation &&
+          editAnnotation.id === annotation.id &&
+          'error-editing',
+        isAnnotationBeingEdited && 'clicked',
+      ]"
+      role="textbox"
+      :contenteditable="isAnnotationBeingEdited"
+      @click="handleEditAnnotation"
+      @paste="handlePaste"
+      @keypress.enter="saveAnnotationChanges"
+    >
+      {{ span.offset_string }}
+    </span>
+    <span v-else class="annotation-value">
+      {{ span.offset_string }}
+    </span>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+
+/**
+ * This component is responsible for managing filled annotations.
+ */
+export default {
+  name: "AnnotationContent",
+  props: {
+    annotation: {
+      type: Object,
+      required: true,
+    },
+    span: {
+      required: true,
+    },
+    spanIndex: {
+      type: Number,
+      required: true,
+    },
+    label: {
+      type: Object,
+    },
+    annotationSet: {
+      type: Object,
+    },
+    saveChanges: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  data() {
+    return {
+      isLoading: false,
+    };
+  },
+  computed: {
+    ...mapGetters("document", [
+      "isAnnotationInEditMode",
+      "pageAtIndex",
+      "getTextFromEntities",
+    ]),
+    ...mapGetters("display", ["bboxToRect"]),
+    ...mapGetters("selection", ["isValueArray"]),
+    ...mapState("selection", ["spanSelection"]),
+    ...mapState("document", [
+      "editAnnotation",
+      "publicView",
+      "annotations",
+      "newAcceptedAnnotations",
+      "selectedEntities",
+      "showActionError",
+    ]),
+    annotationText() {
+      if (this.isAnnotationBeingEdited) {
+        if (this.selectedEntities && this.selectedEntities.length > 0) {
+          return this.getTextFromEntities();
+        }
+        return this.$refs.contentEditable.textContent.trim();
+      } else {
+        return this.span.offset_string;
+      }
+    },
+    isAnnotationDeleted() {
+      return this.annotation.revised && !this.annotation.is_correct;
+    },
+    isAnnotationBeingEdited() {
+      return this.isAnnotationInEditMode(this.annotation.id, this.spanIndex);
+    },
+  },
+  watch: {
+    span(newValue) {
+      if (this.isAnnotationBeingEdited && newValue) {
+        if (this.isValueArray(newValue)) {
+          newValue.map((span) => {
+            if (
+              span.offset_string &&
+              span.offset_string !== this.span.offset_string
+            )
+              this.setText(span.offset_string);
+          });
+        } else {
+          if (
+            (newValue.offset_string &&
+              newValue.offset_string !== this.span.offset_string) ||
+            newValue.offset_string !==
+              this.$refs.contentEditable.textContent.trim()
+          )
+            this.setText(newValue.offset_string);
+        }
+      }
+    },
+    editAnnotation(newAnnotation, oldAnnotation) {
+      // verify if new annotation in edit mode is not this one and if this
+      // one was selected before so we set the state to the previous one (like a cancel)
+
+      if (
+        oldAnnotation &&
+        oldAnnotation.id === this.annotation.id &&
+        oldAnnotation.index === this.spanIndex
+      ) {
+        this.handleCancel(true);
+      }
+    },
+    selectedEntities(newValue) {
+      if (!newValue) return;
+
+      if (
+        this.editAnnotation &&
+        this.annotation.id === this.editAnnotation.id
+      ) {
+        this.setText(this.getTextFromEntities());
+      }
+    },
+    saveChanges(newValue) {
+      if (newValue) {
+        this.saveAnnotationChanges();
+      }
+    },
+  },
+  methods: {
+    setText(text) {
+      this.$refs.contentEditable.textContent = text;
+    },
+    handleEditAnnotation(event) {
+      if (this.publicView) return;
+
+      if (event) {
+        event.preventDefault();
+      }
+
+      if (
+        !this.publicView &&
+        !this.isAnnotationBeingEdited &&
+        !this.isLoading
+      ) {
+        this.$store.dispatch("selection/selectElement", this.annotation.id);
+        this.$store
+          .dispatch("document/setEditAnnotation", {
+            id: this.annotation.id,
+            index: this.spanIndex,
+            label: this.label.id,
+            labelSet: this.annotationSet.label_set.id,
+            annotationSet: this.annotationSet.id,
+          })
+          .then(() => {
+            this.$refs.contentEditable.focus();
+          })
+          .catch((error) => {
+            console.log(error);
+          });
+
+        const page = this.pageAtIndex(this.span.page_index);
+        if (page) {
+          const { x, y, width, height } = this.bboxToRect(page, this.span);
+
+          const selection = {
+            start: {
+              x,
+              y,
+            },
+            end: {
+              x: x + width,
+              y: y + height,
+            },
+            pageNumber: page.number,
+            custom: false,
+          };
+
+          this.$store.dispatch("selection/setSelection", {
+            selection,
+            span: this.span,
+          });
+        }
+      }
+    },
+    handleCancel(wasOutsideClick = false) {
+      if (wasOutsideClick) {
+        this.setText(this.span.offset_string);
+      } else {
+        this.$store.dispatch("selection/disableSelection");
+        this.$store.dispatch("document/endLoading");
+      }
+
+      this.isLoading = false;
+      if (this.$refs.contentEditable) {
+        this.$refs.contentEditable.blur();
+      }
+
+      this.$store.dispatch("document/setSelectedEntities", null);
+    },
+    handlePaste(event) {
+      // TODO: modify to only paste plain text
+      event.preventDefault();
+    },
+    saveAnnotationChanges(event) {
+      if (this.publicView) return;
+
+      if (event) {
+        event.preventDefault();
+      }
+
+      // API call handled in parent component - AnnotationRow
+      this.$emit(
+        "save-annotation-changes",
+        this.annotation,
+        this.spanIndex,
+        this.span,
+        this.annotationText
+      );
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_annotations.scss"
+></style>