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

package/src/store/edit.js

@@ -1,4 +1,5 @@
 import myImports from "../api";
+import { getURLQueryParam, navigateToNewDocumentURL } from "../utils/utils";
 
 const HTTP = myImports.HTTP;
 
@@ -6,9 +7,10 @@ const state = {
   editMode: false,
   splitOverview: false,
   isMultipleSelection: false,
-  documentPagesListForEditMode: [], // TODO: change name
+  pagesForPostprocess: [],
   selectedPages: [],
   updatedDocument: [],
+  showEditConfirmationModal: false,
 };
 
 const actions = {
@@ -25,8 +27,8 @@ const actions = {
     commit("SET_SPLIT_OVERVIEW", overview);
   },
 
-  setDocumentPagesListForEditMode: ({ commit }, pages) => {
-    commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", pages);
+  setPagesForPostprocess: ({ commit }, pages) => {
+    commit("SET_PAGES_FOR_POSTPROCESS", pages);
   },
 
   setUpdatedDocument: ({ commit }, updatedDocument) => {
@@ -57,42 +59,41 @@ const actions = {
   },
 
   rotatePage: ({ state, commit }, { page, direction }) => {
-    if (state.documentPagesListForEditMode.find((p) => p.id === page[0].id)) {
-      const documentPagesListForEditMode =
-        state.documentPagesListForEditMode.map((p) => {
-          let rotatedAngle;
-          if (direction === "left") {
-            rotatedAngle = p.angle - 90;
-            if (p.id === page[0].id) {
-              if (rotatedAngle === -270) {
-                rotatedAngle = 90;
-              }
-              return {
-                ...p,
-                angle: rotatedAngle,
-              };
+    if (state.pagesForPostprocess.find((p) => p.id === page[0].id)) {
+      const pagesForPostprocess = state.pagesForPostprocess.map((p) => {
+        let rotatedAngle;
+        if (direction === "left") {
+          rotatedAngle = p.angle - 90;
+          if (p.id === page[0].id) {
+            if (rotatedAngle === -270) {
+              rotatedAngle = 90;
             }
-            return p;
+            return {
+              ...p,
+              angle: rotatedAngle,
+            };
           }
-          if (direction === "right") {
-            rotatedAngle = p.angle + 90;
-            if (p.id === page[0].id) {
-              if (rotatedAngle === 270) {
-                rotatedAngle = -90;
-              }
-              return {
-                ...p,
-                angle: rotatedAngle,
-              };
+          return p;
+        }
+        if (direction === "right") {
+          rotatedAngle = p.angle + 90;
+          if (p.id === page[0].id) {
+            if (rotatedAngle === 270) {
+              rotatedAngle = -90;
             }
-            return p;
+            return {
+              ...p,
+              angle: rotatedAngle,
+            };
           }
-        });
+          return p;
+        }
+      });
 
-      commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", documentPagesListForEditMode);
+      commit("SET_PAGES_FOR_POSTPROCESS", pagesForPostprocess);
     } else {
       if (direction === "left") {
-        state.documentPagesListForEditMode.push({
+        state.pagesForPostprocess.push({
           id: page.id,
           number: page.number,
           angle: -90,
@@ -102,7 +103,7 @@ const actions = {
       }
 
       if (direction === "right") {
-        state.documentPagesListForEditMode.push({
+        state.pagesForPostprocess.push({
           id: page.id,
           number: page.number,
           angle: 90,
@@ -115,7 +116,7 @@ const actions = {
 
   updateRotationToTheLeft: ({ state, commit }) => {
     // updated the angles that will be sent to the backend
-    const array = state.documentPagesListForEditMode.map((p) => {
+    const array = state.pagesForPostprocess.map((p) => {
       let rotatedAngle = p.angle - 90;
       if (rotatedAngle === -270) {
         rotatedAngle = 90;
@@ -126,12 +127,12 @@ const actions = {
       };
     });
 
-    commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", array);
+    commit("SET_PAGES_FOR_POSTPROCESS", array);
   },
 
   updateRotationToTheRight: ({ state, commit }) => {
     // updated the angles that will be sent to the backend
-    const array = state.documentPagesListForEditMode.map((p) => {
+    const array = state.pagesForPostprocess.map((p) => {
       let rotatedAngle = p.angle + 90;
       if (rotatedAngle === 270) {
         rotatedAngle = -90;
@@ -142,13 +143,16 @@ const actions = {
       };
     });
 
-    commit("SET_DOCUMENT_PAGES_FOR_EDIT_MODE", array);
+    commit("SET_PAGES_FOR_POSTPROCESS", array);
   },
 
   editDocument: ({ rootState, dispatch }, editedDocument) => {
     dispatch("document/startRecalculatingAnnotations", null, {
       root: true,
     });
+
+    const oldId = rootState.document.documentId;
+
     return new Promise((resolve, reject) => {
       HTTP.post(
         `/documents/${rootState.document.documentId}/postprocess/`,
@@ -156,15 +160,23 @@ const actions = {
       )
         .then(async (response) => {
           if (response && response.status === 200) {
-            const newDocument = response.data[0];
-            const newId = newDocument.id;
-
-            await dispatch("document/setDocId", newId, {
-              root: true,
-            });
-            dispatch("document/pollDocumentEndpoint", null, {
-              root: true,
-            });
+            const newId = response.data[0].id;
+            dispatch("document/setSplittingSuggestions", null, { root: true });
+
+            if (newId !== oldId) {
+              if (getURLQueryParam("document")) {
+                navigateToNewDocumentURL(oldId, newId);
+              } else {
+                await dispatch("document/setDocId", newId, {
+                  root: true,
+                });
+
+                dispatch("document/pollDocumentEndpoint", null, {
+                  root: true,
+                });
+              }
+            }
+
             resolve(null);
           } else {
             resolve(response);
@@ -176,6 +188,10 @@ const actions = {
         });
     });
   },
+
+  setShowEditConfirmationModal: ({ commit }, value) => {
+    commit("SET_SHOW_EDIT_CONFIRMATION_MODAL", value);
+  },
 };
 
 const mutations = {
@@ -187,8 +203,8 @@ const mutations = {
     state.splitOverview = overview;
   },
 
-  SET_DOCUMENT_PAGES_FOR_EDIT_MODE: (state, pages) => {
-    state.documentPagesListForEditMode = pages;
+  SET_PAGES_FOR_POSTPROCESS: (state, pages) => {
+    state.pagesForPostprocess = pages;
   },
 
   SET_UPDATED_DOCUMENT: (state, updatedDocument) => {
@@ -200,6 +216,9 @@ const mutations = {
   ADD_SELECTED_PAGE: (state, selectedPage) => {
     state.selectedPages.push(selectedPage);
   },
+  SET_SHOW_EDIT_CONFIRMATION_MODAL: (state, value) => {
+    state.showEditConfirmationModal = value;
+  },
 };
 
 export default {

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/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>