@konfuzio/document-validation-ui 0.1.1

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -0,0 +1,292 @@
+<template>
+  <b-tooltip
+    type="is-dark"
+    :animated="false"
+    position="is-bottom"
+    class="left-aligned annotation-details"
+  >
+    <div class="label-icon">
+      <div v-if="created || edited">
+        <div
+          v-if="accepted"
+          :class="[
+            'annotation-details-icon',
+            animate ? 'animated-ripple' : '',
+            'user-icon',
+          ]"
+        >
+          <AcceptedUser />
+        </div>
+        <div
+          v-else
+          :class="[
+            'annotation-details-icon',
+            animate ? 'animated-ripple' : '',
+            'user-icon',
+          ]"
+        >
+          <UserIcon />
+        </div>
+      </div>
+      <div
+        v-else-if="notFound"
+        :class="[
+          'annotation-details-icon',
+          animate ? 'animated-ripple' : '',
+          'question-icon',
+        ]"
+      >
+        <QuestionMark />
+      </div>
+      <div v-else>
+        <div
+          v-if="accepted"
+          :class="['annotation-details-icon', animate ? 'animated-ripple' : '']"
+        >
+          <AcceptedCheckMark />
+        </div>
+        <div
+          v-else
+          :class="['annotation-details-icon', animate ? 'animated-ripple' : '']"
+        >
+          <CheckMark class="pending" />
+        </div>
+      </div>
+    </div>
+
+    <template #content>
+      <div class="label-details">
+        <div v-if="description" class="label-description">
+          <span>{{ description }}</span>
+        </div>
+        <div v-if="accuracy" class="accuracy">
+          <span>{{ $t("accuracy") }}</span
+          ><span
+            :class="[
+              'value',
+              accuracy <= 0.2 ? 'red' : accuracy <= 0.5 ? 'yellow' : '',
+            ]"
+            >{{ Math.floor(accuracy * 100) / 100 }}</span
+          >
+        </div>
+        <div class="revision">
+          <div class="detail-icons">
+            <div v-if="created || edited">
+              <div
+                v-if="accepted"
+                :class="[
+                  'annotation-details-icon',
+                  animate ? 'animated-ripple' : '',
+                  'user-icon',
+                ]"
+              >
+                <AcceptedUser />
+              </div>
+              <div
+                v-else
+                :class="[
+                  'annotation-details-icon',
+                  animate ? 'animated-ripple' : '',
+                  'user-icon',
+                ]"
+              >
+                <UserIcon />
+              </div>
+            </div>
+            <div
+              v-else-if="notFound"
+              :class="[
+                'annotation-details-icon',
+                animate ? 'animated-ripple' : '',
+                'question-icon',
+              ]"
+            >
+              <QuestionMark />
+            </div>
+            <div v-else>
+              <div
+                v-if="accepted"
+                :class="[
+                  'annotation-details-icon',
+                  animate ? 'animated-ripple' : '',
+                ]"
+              >
+                <AcceptedCheckMark />
+              </div>
+              <div
+                v-else
+                :class="[
+                  'annotation-details-icon',
+                  animate ? 'animated-ripple' : '',
+                ]"
+              >
+                <CheckMark />
+              </div>
+            </div>
+            {{ getText() }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </b-tooltip>
+</template>
+<script>
+import CheckMark from "../../assets/images/CheckMark";
+import AcceptedCheckMark from "../../assets/images/AcceptedCheckMark";
+import QuestionMark from "../../assets/images/QuestionMark";
+import AcceptedUser from "../../assets/images/AcceptedUser";
+import UserIcon from "../../assets/images/UserIcon";
+
+export default {
+  name: "AnnotationDetails",
+  components: {
+    CheckMark,
+    QuestionMark,
+    AcceptedCheckMark,
+    AcceptedUser,
+    UserIcon,
+  },
+  props: {
+    description: {
+      type: String,
+      default: null,
+      required: false,
+    },
+    annotation: {
+      type: Object,
+      default: null,
+    },
+  },
+  data() {
+    return {
+      animate: false,
+    };
+  },
+  computed: {
+    accuracy() {
+      // TODO: add this verification to store
+      if (this.annotation) {
+        return this.annotation.confidence;
+      } else {
+        return null;
+      }
+    },
+    notFound() {
+      // TODO: add this verification to store
+      if (this.annotation) {
+        return !this.annotation.span;
+      } else {
+        return true;
+      }
+    },
+    created() {
+      // TODO: add this verification to store
+      if (this.annotation) {
+        return (
+          this.annotation.created_by &&
+          !this.annotation.revised &&
+          this.annotation.is_correct
+        );
+      } else {
+        return null;
+      }
+    },
+    edited() {
+      // TODO: add this verification to store
+      if (this.annotation) {
+        if (
+          this.annotation.offset_string !==
+          this.annotation.offset_string_original
+        ) {
+          return true;
+        } else if (this.annotation.created_by) {
+          return true;
+        } else {
+          return false;
+        }
+      } else {
+        return null;
+      }
+    },
+    accepted() {
+      // TODO: add this verification to store
+      if (this.annotation) {
+        return this.annotation.revised && this.annotation.is_correct;
+      } else {
+        return null;
+      }
+    },
+    declined() {
+      // TODO: add this verification to store
+      if (this.annotation) {
+        return this.annotation.revised && !this.annotation.is_correct;
+      } else {
+        return null;
+      }
+    },
+    user() {
+      // TODO: add this verification to store
+      if (this.annotation) {
+        if (this.annotation.created_by && !this.annotation.revised) {
+          // If the annotation was created but not yet revised
+          // we show who created it
+          return this.annotation.created_by;
+        } else if (this.annotation.revised && this.annotation.revised_by) {
+          return this.annotation.revised_by;
+        } else {
+          // If both revised_by and created_by are null, we don't show any user
+          return null;
+        }
+      } else {
+        return null;
+      }
+    },
+  },
+  watch: {
+    annotation(newAnnotation, oldAnnotation) {
+      // animate an annotation being accepted
+      // TODO: add this accepted check to store
+      const accepted = (ann) => {
+        return ann && ann.id && ann.revised && ann.is_correct;
+      };
+      if (
+        newAnnotation &&
+        newAnnotation.id &&
+        accepted(newAnnotation) &&
+        !accepted(oldAnnotation)
+      ) {
+        this.animate = true;
+        setTimeout(() => {
+          this.animate = false;
+        }, 2000);
+      }
+    },
+  },
+  methods: {
+    getText() {
+      if (this.notFound) {
+        return this.$t("not_found_in_document");
+      } else if (this.created) {
+        return this.user
+          ? `${this.$t("created_by")} ${this.user}`
+          : this.$t("created");
+      } else if (this.accepted) {
+        return this.user
+          ? `${this.$t("approved_by")} ${this.user}`
+          : this.$t("approved");
+      } else if (this.declined) {
+        return this.user
+          ? `${this.$t("declined_by")} ${this.user}`
+          : this.$t("declined");
+      } else {
+        return this.$t("not_revised_yet");
+      }
+    },
+  },
+};
+</script>
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/annotation_details.scss"
+></style>