@konfuzio/document-validation-ui 0.1.8-pre-release-2 → 0.1.8-pre-release-3

package/src/components/DocumentPage/DocumentPage.vue

@@ -6,7 +6,7 @@
       (categorizeModalIsActive ||
         editMode ||
         publicView ||
-        documentIsReviewed) &&
+        isDocumentReviewed) &&
         'default-cursor',
       page.number === currentPage && 'current-page',
     ]"
@@ -48,7 +48,7 @@
           }"
         />
         <template v-if="pageInVisibleRange && !editMode">
-          <v-group v-if="!publicView || !documentIsReviewed" ref="entities">
+          <v-group v-if="!publicView || !isDocumentReviewed" ref="entities">
             <v-rect
               v-for="(entity, index) in scaledEntities"
               :key="index"
@@ -272,7 +272,6 @@ export default {
       "selectedDocument",
       "publicView",
       "selectedEntities",
-      "documentIsReviewed",
     ]),
     ...mapState("edit", ["editMode"]),
     ...mapGetters("display", ["visiblePageRange", "bboxToRect"]),
@@ -281,6 +280,7 @@ export default {
       "isAnnotationInEditMode",
       "isDocumentReadyToBeReviewed",
       "entitiesOnSelection",
+      "isDocumentReviewed",
     ]),
   },
   watch: {
@@ -330,7 +330,7 @@ export default {
         this.categorizeModalIsActive ||
         this.editMode ||
         this.publicView ||
-        this.documentIsReviewed
+        this.isDocumentReviewed
       )
         return;
 
@@ -401,7 +401,7 @@ export default {
         !entity ||
         this.categorizeModalIsActive ||
         this.publicView ||
-        this.documentIsReviewed
+        this.isDocumentReviewed
       )
         return;
 
@@ -445,7 +445,7 @@ export default {
         !this.categorizeModalIsActive &&
         !this.publicView &&
         !this.editMode &&
-        !this.documentIsReviewed
+        !this.isDocumentReviewed
       ) {
         this.$refs.stage.$el.style.cursor = "pointer";
       }

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -9,7 +9,7 @@
         class="top-aligned"
       >
         <div
-          v-if="!editMode && !publicView && !documentIsReviewed"
+          v-if="!editMode && !publicView && !isDocumentReviewed"
           :class="[
             'icons icons-left',
             editModeDisabled && 'edit-mode-disabled',
@@ -23,7 +23,7 @@
         </div>
       </b-tooltip>
       <div
-        v-if="!editMode && !publicView && !documentIsReviewed"
+        v-if="!editMode && !publicView && !isDocumentReviewed"
         class="toolbar-divider"
       />
       <div class="icons icons-right">
@@ -36,7 +36,10 @@
         >
           <PlusIcon />
         </div>
-        <div class="zoom-out icon" @click.prevent.stop="zoomOut">
+        <div
+          :class="['zoom-out icon', isZoomOutExceeding && 'zoom-disabled']"
+          @click.prevent.stop="zoomOut"
+        >
           <MinusIcon />
         </div>
         <div class="percentage">
@@ -81,14 +84,13 @@ export default {
       "selectedDocument",
       "recalculatingAnnotations",
       "publicView",
-      "documentIsReviewed",
     ]),
-    ...mapGetters("document", ["documentCannotBeEdited"]),
+    ...mapGetters("document", ["documentCannotBeEdited", "isDocumentReviewed"]),
     isZoomInExceeding() {
-      return (
-        this.currentPercentage + this.defaultPercentage * 100 >
-        this.maxPercentage
-      );
+      return this.currentPercentage === this.maxPercentage;
+    },
+    isZoomOutExceeding() {
+      return this.currentPercentage === this.defaultPercentage * 100;
     },
   },
   watch: {
@@ -120,13 +122,13 @@ export default {
       this.$store.dispatch("edit/enableEditMode");
     },
     zoomIn() {
-      if (this.maxPercentage > this.defaultPercentage * 100) {
-        this.currentPercentage += this.defaultPercentage * 100;
-        this.updateScale((this.defaultScale * this.currentPercentage) / 100);
-      }
+      if (this.currentPercentage === this.maxPercentage) return;
+
+      this.currentPercentage += this.defaultPercentage * 100;
+      this.updateScale((this.defaultScale * this.currentPercentage) / 100);
     },
     zoomOut() {
-      if (this.currentPercentage === 25) {
+      if (this.currentPercentage === this.defaultPercentage * 100) {
         return;
       }
 

package/src/components/DocumentPage/MultiAnnSelection.vue

@@ -106,10 +106,12 @@ export default {
       if (y < this.selection.start.y) {
         y = this.selection.start.y;
       }
+      x = x - this.buttonWidth;
+      y = y + marginTop;
 
       return {
-        x: x - this.buttonWidth,
-        y: y + marginTop,
+        x: x > 0 ? x : 0,
+        y: y > 0 ? y : 0,
         height: this.buttonHeight,
         width: this.buttonWidth,
       };

package/src/components/DocumentTopBar/DocumentName.vue

@@ -22,7 +22,7 @@
     <div
       v-if="
         !publicView &&
-        !documentIsReviewed &&
+        !isDocumentReviewed &&
         showEditBtn &&
         !editMode &&
         !recalculatingAnnotations
@@ -61,7 +61,7 @@
 import ServerImage from "../../assets/images/ServerImage";
 import FileNameSaved from "../../assets/images/FileNameSavedImage";
 import FileNameNotSaved from "../../assets/images/FileNameNotSavedImage";
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "DocumentName",
@@ -95,10 +95,10 @@ export default {
       "selectedDocument",
       "publicView",
       "recalculatingAnnotations",
-      "documentIsReviewed",
     ]),
     ...mapState("display", ["optimalResolution"]),
     ...mapState("edit", ["editMode"]),
+    ...mapGetters("document", ["isDocumentReviewed"]),
     textContent() {
       if (this.isEditable) {
         return this.oldFileName;

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -6,7 +6,7 @@
     >
       <div v-if="!recalculatingAnnotations" class="left-bar-components">
         <DocumentCategory
-          v-if="categories && !editMode && !publicView && !documentIsReviewed"
+          v-if="categories && !editMode && !publicView && !isDocumentReviewed"
         />
       </div>
 
@@ -14,14 +14,14 @@
 
       <div v-if="!recalculatingAnnotations" class="right-bar-components">
         <div
-          v-if="!editMode && (!publicView || !documentIsReviewed)"
+          v-if="!editMode && (!publicView || !isDocumentReviewed)"
           class="keyboard-actions-info"
         >
           <KeyboardActionsDescription />
         </div>
 
         <div
-          v-if="!editMode && (publicView || documentIsReviewed)"
+          v-if="!editMode && (publicView || isDocumentReviewed)"
           class="read-only-info"
         >
           <b-tooltip
@@ -29,7 +29,7 @@
             position="is-bottom"
             class="right-aligned width-184"
           >
-            <span v-if="publicView && !documentIsReviewed">
+            <span v-if="publicView && !isDocumentReviewed">
               {{ $t("lite_mode") }}
             </span>
             <span v-else class="doc-reviewed">
@@ -38,12 +38,12 @@
             <b-icon
               :class="[
                 'info-icon is-small',
-                documentIsReviewed && 'info-reviewed',
+                isDocumentReviewed && 'info-reviewed',
               ]"
               icon="circle-info"
             />
             <template #content>
-              <div v-if="!documentIsReviewed" class="read-only-details">
+              <div v-if="!isDocumentReviewed" class="read-only-details">
                 {{ $t("limited_functionalities") }}
               </div>
               <div v-else class="read-only-details">
@@ -65,7 +65,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import DocumentCategory from "../../components/DocumentCategory";
 import DocumentName from "./DocumentName";
 import DocumentTopBarButtons from "./DocumentTopBarButtons";
@@ -95,10 +95,10 @@ export default {
       "publicView",
       "loading",
       "recalculatingAnnotations",
-      "documentIsReviewed",
     ]),
     ...mapState("category", ["categories"]),
     ...mapState("edit", ["editMode"]),
+    ...mapGetters("document", ["isDocumentReviewed"]),
   },
   created() {
     window.addEventListener("resize", this.handleResize);

package/src/components/DocumentTopBar/DocumentTopBarButtons.vue

@@ -17,18 +17,17 @@
             : $t('submit')
         "
         type="is-primary"
-        :disabled="false"
         class="button-next primary-button"
         @click="handleButton"
       />
     </div>
 
     <div
-      v-if="!editMode && !documentIsReviewed && !publicView"
+      v-if="!editMode && !isDocumentReviewed && !publicView"
       class="finish-review-button-container"
     >
       <b-tooltip
-        :active="finishDisabled"
+        :active="!isReviewButtonActive"
         position="is-bottom"
         multilined
         class="right-aligned finish-review"
@@ -36,7 +35,7 @@
         <b-button
           :class="['finish-review-btn', 'text-btn', 'primary-button']"
           type="is-primary"
-          :disabled="finishDisabled"
+          :disabled="!isReviewButtonActive"
           @click.stop="handleFinishReview"
         >
           <span v-if="!isLoading">
@@ -62,13 +61,12 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 
 export default {
   name: "DocumentTopBarButtons",
   data() {
     return {
-      finishDisabled: true,
       emptyLabels: null,
       isLoading: false,
     };
@@ -78,30 +76,17 @@ export default {
     ...mapState("document", [
       "selectedDocument",
       "publicView",
-      "finishedReview",
       "annotationSets",
-      "documentIsReviewed",
     ]),
     ...mapState("edit", ["editMode", "splitOverview", "updatedDocument"]),
-  },
-
-  watch: {
-    finishedReview(newValue) {
-      if (newValue) {
-        this.finishDisabled = false;
-      } else {
-        this.finishDisabled = true;
-      }
-    },
-    documentIsReviewed(newValue) {
-      if (newValue) {
-        this.finishDisabled = true;
-      }
+    ...mapGetters("document", [
+      "isDocumentReadyToFinishReview",
+      "isDocumentReviewed",
+    ]),
+    isReviewButtonActive() {
+      return this.isDocumentReadyToFinishReview;
     },
   },
-  mounted() {
-    this.finishDisabled = !this.finishedReview;
-  },
   methods: {
     closeEditMode() {
       this.$store.dispatch("edit/disableEditMode");

package/src/components/DocumentTopBar/KeyboardActionsDescription.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="!publicView && !documentIsReviewed && !editMode"
+    v-if="!publicView && !isDocumentReviewed && !editMode"
     class="keyboard-actions-description"
   >
     <section class="b-tooltips">
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapGetters, mapState } from "vuex";
 import KeyboardIcon from "../../assets/images/KeyboardIcon";
 import ArrowUpKey from "../../assets/images/ArrowUpKey";
 import ArrowDownKey from "../../assets/images/ArrowDownKey";
@@ -65,11 +65,8 @@ export default {
   },
   computed: {
     ...mapState("edit", ["editMode"]),
-    ...mapState("document", [
-      "selectedDocument",
-      "publicView",
-      "documentIsReviewed",
-    ]),
+    ...mapState("document", ["selectedDocument", "publicView"]),
+    ...mapGetters("document", ["isDocumentReviewed"]),
   },
 };
 </script>

package/src/store/document.js

@@ -25,12 +25,10 @@ const state = {
   annotationsMarkedAsMissing: null,
   errorMessageWidth: null,
   hoveredAnnotationSet: null,
-  finishedReview: false,
   newAcceptedAnnotations: null,
   selectedEntities: null,
   serverError: false,
   splittingSuggestions: null,
-  documentIsReviewed: false,
 };
 
 const getters = {
@@ -406,13 +404,13 @@ const getters = {
   },
 
   // Check if document is ready to be finished
-  isDocumentReviewFinished: (state) => () => {
+  isDocumentReadyToFinishReview: (state) => {
     // check if all annotations have been revised
     let notRevised;
 
     const emptyAnnotations = [];
 
-    if (state.annotationSets) {
+    if (state.annotationSets && state.annotationSets.length > 0) {
       state.annotationSets.forEach((annSet) => {
         annSet.labels.map((label) => {
           // return only labels with empty annotations
@@ -443,10 +441,13 @@ const getters = {
     ) {
       return true;
     }
-
     return false;
   },
 
+  isDocumentReviewed: (state) => {
+    return state.selectedDocument.is_reviewed;
+  },
+
   /**
    * Get number of annotations pending review per annotation set
    */
@@ -703,9 +704,6 @@ const actions = {
   setSplittingSuggestions: ({ commit }, value) => {
     commit("SET_SPLITTING_SUGGESTIONS", value);
   },
-  setDocumentIsReviewed: ({ commit }, value) => {
-    commit("SET_DOCUMENT_IS_REVIEWED", value);
-  },
 
   /**
    * Actions that use HTTP requests always return the axios promise,
@@ -742,8 +740,6 @@ const actions = {
           commit("SET_ANNOTATIONS", annotations);
           commit("SET_LABELS", labels);
           commit("SET_SELECTED_DOCUMENT", response.data);
-          commit("SET_DOCUMENT_IS_REVIEWED", response.data.is_reviewed);
-          commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
 
           if (rootState.project.projectId) {
             projectId = rootState.project.projectId;
@@ -840,7 +836,6 @@ const actions = {
         .then(async (response) => {
           if (response.status === 201) {
             await dispatch("fetchMissingAnnotations");
-            commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
 
             if (!getters.annotationSetExists(response.data.annotation_set)) {
               const documentData = await dispatch("fetchDocumentData");
@@ -876,7 +871,6 @@ const actions = {
         .then(async (response) => {
           if (response.status === 200) {
             commit("UPDATE_ANNOTATION", response.data);
-            commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
             commit("SET_NEW_ACCEPTED_ANNOTATIONS", null);
 
             resolve(true);
@@ -895,7 +889,6 @@ const actions = {
         .then(async (response) => {
           if (response.status === 204) {
             commit("DELETE_ANNOTATION", annotationId);
-            commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
 
             resolve(true);
           }
@@ -918,7 +911,6 @@ const actions = {
               commit("UPDATE_FILE_NAME", response.data.data_file_name);
             } else {
               commit("SET_SELECTED_DOCUMENT", response.data);
-              commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
 
               dispatch("pollDocumentEndpoint");
             }
@@ -955,7 +947,6 @@ const actions = {
       )
         .then((response) => {
           commit("SET_MISSING_ANNOTATIONS", response.data.results);
-          commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
           resolve(true);
         })
         .catch((error) => {
@@ -972,7 +963,6 @@ const actions = {
           if (response.status === 201) {
             commit("SET_ANNOTATIONS_MARKED_AS_MISSING", null);
             commit("ADD_MISSING_ANNOTATIONS", response.data);
-            commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
           }
 
           resolve(response);
@@ -990,7 +980,6 @@ const actions = {
         .then((response) => {
           if (response.status === 204) {
             commit("DELETE_MISSING_ANNOTATION", id);
-            commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
             resolve(true);
           }
         })
@@ -1226,9 +1215,6 @@ const mutations = {
   SET_EDIT_ANNOTATION: (state, editAnnotation) => {
     state.editAnnotation = editAnnotation;
   },
-  SET_FINISHED_REVIEW: (state, finishedReview) => {
-    state.finishedReview = finishedReview;
-  },
   RESET_EDIT_ANNOTATION: (state) => {
     state.editAnnotation = null;
   },
@@ -1256,9 +1242,6 @@ const mutations = {
     }
   },
   SET_SELECTED_DOCUMENT: (state, document) => {
-    if (document.is_reviewed === true) {
-      state.documentIsReviewed = true;
-    }
     state.selectedDocument = document;
 
     // this is to handle cache when a document is edited or changed
@@ -1327,9 +1310,6 @@ const mutations = {
   SET_SPLITTING_SUGGESTIONS: (state, array) => {
     state.splittingSuggestions = array;
   },
-  SET_DOCUMENT_IS_REVIEWED: (state, value) => {
-    state.documentIsReviewed = value;
-  },
 };
 
 export default {