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

package/src/components/DocumentAnnotations/MultiAnnotationTableOverlay.vue

@@ -21,7 +21,7 @@
       @columndragleave="columndragleave"
     >
       <b-table-column
-        v-for="(item, index) in columns"
+        v-for="(item, index) in isLoading ? [columns[0]] : columns"
         :key="index"
         :field="item.field"
         :label="item.label.name"
@@ -31,14 +31,17 @@
             :ref="getDropdownReference(item)"
             aria-role="list"
             class="header-dropdown"
-            position="is-top-left"
+            position="is-top-right"
             :close-on-click="false"
             @active-change="(e) => onDropdownChange(item, e)"
           >
             <template #trigger="{ active }">
-              <DraggableIcon class="draggable" />
-              <span :class="active ? 'active' : ''">{{ column.label }} </span>
+              <DraggableIcon v-if="!isLoading" class="draggable" />
+              <span v-if="!isLoading" :class="active ? 'active' : ''"
+                >{{ column.label }}
+              </span>
               <b-icon
+                v-if="!isLoading"
                 :icon="active ? 'angle-up' : 'angle-down'"
                 size="is-small"
                 class="arrow"
@@ -63,7 +66,7 @@
                 :key="label.id"
                 aria-role="listitem"
                 :disabled="label.disabled"
-                ><span @click="changeLabel(item, label)">{{
+                ><span @click="!label.disabled && changeLabel(item, label)">{{
                   label.name
                 }}</span></b-dropdown-item
               >
@@ -73,7 +76,9 @@
 
         <template #default="props">
           <div class="annotations-table">
+            <b-skeleton v-if="isLoading" width="98%" height="90%" />
             <AnnotationRow
+              v-if="!isLoading"
               :annotation="props.row[item.field]"
               :label="item.label"
               :annotation-set="item.annotationSet"
@@ -120,6 +125,7 @@ export default {
       editingLabels: [],
       openDropdown: null,
       draggingColumnIndex: null,
+      isLoading: false,
     };
   },
   computed: {
@@ -136,6 +142,13 @@ export default {
       this.handleColumns();
       this.handleRows();
     },
+    columns(columns) {
+      if (!columns || (columns && columns.length === 0)) {
+        this.$store.dispatch("selection/disableSelection");
+        this.$store.dispatch("document/resetEditAnnotation");
+        this.$store.dispatch("display/showAnnSetTable", null);
+      }
+    },
   },
   mounted() {
     this.handleColumns();
@@ -212,6 +225,8 @@ export default {
     },
 
     async changeLabel(column, label) {
+      this.isLoading = true;
+      this.closeDropdown(column);
       for (let i = 0; i < this.rows.length; i++) {
         const annotationToUpdate = this.rows[i][column.label.id];
         await this.$store
@@ -227,12 +242,22 @@ export default {
             });
           });
       }
-      this.closeDropdown(column);
+      this.isLoading = false;
     },
 
     async deleteColumn(column) {
+      this.isLoading = true;
+      this.closeDropdown(column);
+
+      const annotationsToDelete = [];
       for (let i = 0; i < this.rows.length; i++) {
         const annotationToDelete = this.rows[i][column.label.id];
+        if (annotationToDelete && annotationToDelete.id) {
+          annotationsToDelete.push(annotationToDelete);
+        }
+      }
+
+      annotationsToDelete.forEach(async (annotationToDelete) => {
         await this.$store
           .dispatch("document/deleteAnnotation", {
             annotationId: annotationToDelete.id,
@@ -244,8 +269,9 @@ export default {
               defaultErrorMessage: this.$t("edit_error"),
             });
           });
-      }
-      this.closeDropdown(column);
+      });
+
+      this.isLoading = false;
     },
 
     onDropdownChange(column, open) {
@@ -253,7 +279,10 @@ export default {
       this.$store.dispatch("selection/disableSelection");
       this.$store.dispatch("document/resetEditAnnotation");
       if (open) {
-        if (this.openDropdown) {
+        if (
+          this.openDropdown &&
+          this.$refs[this.getDropdownReference(column)].length > 0
+        ) {
           this.$refs[this.openDropdown][0].toggle();
         }
         this.openDropdown = this.getDropdownReference(column);
@@ -265,7 +294,10 @@ export default {
     },
 
     closeDropdown(column) {
-      if (this.openDropdown) {
+      if (
+        this.openDropdown &&
+        this.$refs[this.getDropdownReference(column)].length > 0
+      ) {
         this.$refs[this.getDropdownReference(column)][0].toggle();
         this.openDropdown = null;
       }

package/src/components/DocumentCategory.vue

@@ -4,7 +4,11 @@
     :active="tooltipIsShown || dropdownIsDisabled"
     size="is-large"
     position="is-bottom"
-    :class="[editMode ? 'right-aligned full-height-tooltip' : 'left-aligned']"
+    :class="[
+      editMode
+        ? 'right-aligned full-height-tooltip'
+        : 'left-aligned full-height-tooltip',
+    ]"
     :close-delay="tooltipCloseDelay"
   >
     <template #content>

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -184,17 +184,11 @@ export default {
       if (!this.splittingSuggestions) return;
 
       this.splittingSuggestions.map((item) => {
-        const firstPage = this.selectedDocument.pages.find(
-          (page) => page.id === item.pages[0].id
+        const lastPage = this.selectedDocument.pages.find(
+          (page) => page.id === item.pages[item.pages.length - 1].id
         );
 
-        if (firstPage.number === 1 && item.pages.length > 1) {
-          // only add the active splitting line from the 1st page of the second document
-          // since it's the first splitting point
-          return;
-        }
-
-        this.handleSplittingLines(firstPage.number, "AI");
+        this.handleSplittingLines(lastPage.number, "AI");
       });
     },
     applySplittingSuggestions(value) {
@@ -342,7 +336,7 @@ export default {
       );
 
       const singleSplittingSuggestion = this.splittingSuggestions.find(
-        (item) => item.pages[0].id === foundPage.id
+        (item) => item.pages[item.pages.length - 1].id === foundPage.id
       );
 
       return this.splittingSuggestions.indexOf(singleSplittingSuggestion);

package/src/components/DocumentModals/SplittingSuggestionsModal.vue

@@ -52,6 +52,7 @@ export default {
   },
   computed: {
     ...mapState("document", ["splittingSuggestions", "selectedDocument"]),
+    ...mapState("edit", ["editMode"]),
     ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
   watch: {
@@ -60,6 +61,11 @@ export default {
         this.isModalActive = true;
       }
     },
+    editMode(newValue) {
+      if (!newValue) {
+        this.showModal();
+      }
+    },
     isModalActive(newValue) {
       if (newValue) {
         this.$nextTick(() => {
@@ -80,9 +86,7 @@ export default {
     },
   },
   mounted() {
-    if (this.splittingSuggestions) {
-      this.isModalActive = true;
-    }
+    this.showModal();
 
     this.$nextTick(() => {
       if (this.recommended) {
@@ -91,6 +95,14 @@ export default {
     });
   },
   methods: {
+    showModal() {
+      if (
+        this.splittingSuggestions &&
+        this.waitingForSplittingConfirmation(this.selectedDocument)
+      ) {
+        this.isModalActive = true;
+      }
+    },
     closeModal() {
       const updatedDocument = [
         {

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/main.js

@@ -1,5 +1,6 @@
 import Vue from "vue";
 import Buefy from "buefy";
+import "buefy/dist/buefy.css";
 import VueKonva from "vue-konva";
 import App from "./components/App";
 import * as Sentry from "@sentry/vue";