@konfuzio/document-validation-ui 0.1.5 → 0.1.6-multi-ann-set-2

package/src/store/project.js

@@ -3,7 +3,7 @@ const HTTP = myImports.HTTP;
 
 const state = {
   projectId: null,
-  currentUser: null
+  currentUser: null,
 };
 
 const getters = {
@@ -11,13 +11,13 @@ const getters = {
    * Gets label sets for an annotation set creation
    */
   labelSetsFilteredForAnnotationSetCreation:
-    state => (labelsSet, annotationSets) => {
+    (state) => (labelsSet, annotationSets) => {
       let returnLabels = [];
       if (labelsSet) {
-        returnLabels = labelsSet.filter(labelSet => {
+        returnLabels = labelsSet.filter((labelSet) => {
           // check if label set has multiple and if not, if there's already an annotation set created
           if (!labelSet.has_multiple_annotation_sets) {
-            const existingAnnotationSet = annotationSets.find(annSet => {
+            const existingAnnotationSet = annotationSets.find((annSet) => {
               return annSet.id === labelSet.id;
             });
             return existingAnnotationSet;
@@ -27,7 +27,7 @@ const getters = {
         });
       }
       return returnLabels;
-    }
+    },
 };
 
 const actions = {
@@ -38,10 +38,10 @@ const actions = {
   fetchLabelSetDetails: ({ commit, state }, labelSetId) => {
     return new Promise((resolve, reject) => {
       HTTP.get(`label-sets/${labelSetId}/`)
-        .then(response => {
+        .then((response) => {
           return resolve(response.data);
         })
-        .catch(error => {
+        .catch((error) => {
           reject(error);
           console.log(error);
         });
@@ -52,10 +52,10 @@ const actions = {
   fetchLabelSets: ({ state }) => {
     return new Promise((resolve, reject) => {
       HTTP.get(`label-sets/?project=${state.projectId}`)
-        .then(response => {
+        .then((response) => {
           return resolve(response.data.results);
         })
-        .catch(error => {
+        .catch((error) => {
           reject(error);
           console.log(error);
         });
@@ -64,17 +64,17 @@ const actions = {
 
   fetchCurrentUser: ({ commit }) => {
     return HTTP.get(`/auth/me/`)
-      .then(response => {
+      .then((response) => {
         commit("SET_CURRENT_USER", response.data.username);
       })
-      .catch(error => {
+      .catch((error) => {
         console.log(error);
       });
   },
 
   setCurrentUser: ({ commit }, currentUser) => {
     commit("SET_CURRENT_USER", currentUser);
-  }
+  },
 };
 
 const mutations = {
@@ -83,7 +83,7 @@ const mutations = {
   },
   SET_CURRENT_USER: (state, currentUser) => {
     state.currentUser = currentUser;
-  }
+  },
 };
 
 export default {
@@ -91,5 +91,5 @@ export default {
   state,
   actions,
   mutations,
-  getters
+  getters,
 };

package/src/utils/utils.js

@@ -5,12 +5,25 @@ export function sleep(duration) {
 export function getURLQueryParam(param) {
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
+
   if (urlParams.has(param)) {
     return urlParams.get(param);
   }
   return undefined;
 }
 
+export function getURLPath(value) {
+  const path = window.location.pathname;
+
+  if (!path.includes(value)) return;
+
+  const id = path.split(value)[1].split("/")[1];
+
+  if (id === "") return;
+
+  return id;
+}
+
 export function navigateToNewDocumentURL(oldId, newId) {
   const url = window.location.href;
   const newUrl = url.replace(oldId, newId);

package/src/components/DocumentAnnotations/ActionButtons.vue

@@ -1,257 +0,0 @@
-<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 && !publicView"
-      :class="[
-        'annotation-save-btn text-btn',
-        actionBar && 'action-bar-save-btn',
-        actionBar ? 'tertiary-button' : 'primary-button',
-      ]"
-      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 && !publicView"
-      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 && !publicView"
-      class="annotation-accept-btn primary-button"
-      type="is-primary"
-      @click.stop="accept"
-    >
-      {{ $t("accept") }}
-    </b-button>
-
-    <!-- reject button -->
-    <div
-      v-if="showReject && !isLoading && !cancelBtn && !saveBtn && !publicView"
-      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-tooltip
-      :active="finishDisabled"
-      position="is-bottom"
-      multilined
-      class="right-aligned finish-review"
-    >
-      <b-button
-        v-if="finishReviewBtn && !publicView"
-        :class="['finish-review-btn', 'text-btn', 'primary-button']"
-        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>
-
-      <template #content> {{ $t("disabled_finish_review") }} </template>
-    </b-tooltip>
-  </div>
-</template>
-<script>
-/* Component for showing actions for each annotation row */
-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,
-    },
-    // TODO: finishReviewBtn should not be here (see comment above for purpose of this component)
-    finishReviewBtn: {
-      type: Boolean,
-    },
-    // TODO: finishDisabled should not be here
-    finishDisabled: {
-      type: Boolean,
-    },
-    // TODO: handleReject should not be here
-    handleReject: {
-      type: Function,
-      default: null,
-    },
-    // TODO: rejectAllEmptyBtn should not be here
-    rejectAllEmptyBtn: {
-      type: Boolean,
-    },
-    // TODO: annotationSet should not be needed on a UI only component
-    annotationSet: {
-      type: Object,
-      default: null,
-    },
-    // TODO: acceptAllBtn should not be here
-    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/RejectedLabels.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="rejected-label-container">
-    <p class="title">
-      {{ `${$t("rejected")} (${missingAnnotations.length})` }}
-    </p>
-    <section class="rejected-tag-container">
-      <b-taglist
-        v-for="missingAnnotation in missingAnnotations"
-        :key="missingAnnotation.id"
-      >
-        <b-tag
-          attached
-          closable
-          aria-close-label="Close tag"
-          :class="[
-            isLoading && closedTag === missingAnnotation.id && 'loading-active',
-          ]"
-          @close="removeRejectedLabel(missingAnnotation.id)"
-        >
-          <span
-            :class="[
-              'label-name',
-              isLoading && closedTag === missingAnnotation.id && 'loading',
-            ]"
-          >
-            {{ getLabelName(missingAnnotation.label) }}
-          </span>
-        </b-tag>
-        <div class="tag-loading-container">
-          <ActionButtons
-            :is-loading="isLoading && closedTag === missingAnnotation.id"
-          />
-        </div>
-      </b-taglist>
-    </section>
-  </div>
-</template>
-
-<script>
-import { mapState } from "vuex";
-import ActionButtons from "./ActionButtons.vue";
-
-export default {
-  name: "RejectedLabels",
-  components: { ActionButtons },
-  props: {
-    missingAnnotations: {
-      default: null,
-      type: Array,
-    },
-  },
-
-  data() {
-    return {
-      isLoading: false,
-      closedTag: null,
-    };
-  },
-  computed: {
-    ...mapState("document", ["labels"]),
-  },
-  methods: {
-    removeRejectedLabel(id) {
-      this.isLoading = true;
-      this.closedTag = id;
-
-      this.$store
-        .dispatch("document/deleteMissingAnnotation", id)
-        .catch((error) => {
-          this.$store.dispatch("document/createErrorMessage", {
-            error,
-            serverErrorMessage: this.$t("server_error"),
-            defaultErrorMessage: this.$t("edit_error"),
-          });
-        })
-        .finally(() => {
-          this.isLoading = false;
-          this.closedTag = null;
-        });
-    },
-    getLabelName(label) {
-      if (!this.labels) return;
-      const found = this.labels.find((l) => l.id === label);
-      if (found) {
-        return found.name;
-      }
-    },
-  },
-};
-</script>
-
-<style
-  scoped
-  lang="scss"
-  src="../../assets/scss/document_annotations.scss"
-></style>