@konfuzio/document-validation-ui 0.1.4-pre-release-1 → 0.1.5-automatic-document-splitting

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -105,9 +105,18 @@ export default {
   },
   computed: {
     ...mapState("category", ["categories"]),
-    ...mapState("document", ["selectedDocument"]),
+    ...mapState("document", [
+      "selectedDocument",
+      "categorizeModalIsActive",
+      "splittingSuggestions",
+    ]),
     ...mapGetters("category", ["category", "projectHasSingleCategory"]),
     ...mapGetters("document", ["categorizationIsConfirmed"]),
+
+    singleCategoryInProject() {
+      // if only 1 category in the project, we don't enable the dropdown
+      return this.categories && this.categories.length === 1;
+    },
   },
   watch: {
     selectedDocument(newValue) {
@@ -125,7 +134,14 @@ export default {
       }
     },
     show(newValue) {
-      this.$store.dispatch("document/setCategorizeModalIsActive", newValue);
+      this.$store.dispatch("display/setCategorizeModalIsActive", newValue);
+    },
+    categorizeModalIsActive(newValue) {
+      // Show modal after split suggestion modal
+      // if no category confirmed
+      if (newValue) {
+        this.show = newValue && !this.categorizationIsConfirmed;
+      }
     },
   },
   mounted() {
@@ -159,7 +175,11 @@ export default {
         }
 
         this.selectedCategory = category;
-        this.show = !this.categorizationIsConfirmed;
+        this.documentCategory = category;
+
+        // By default, if the document has no category, the categorize modal is shown
+        // But if there is a category, we also need to check if there are splitting suggestions or not
+        this.show = !category || (category && !this.splittingSuggestions);
       }
     },
     canCloseModal() {
@@ -194,7 +214,7 @@ export default {
           })
           .finally(() => {
             this.$store.dispatch("document/endRecalculatingAnnotations");
-            this.$store.dispatch("document/setCategorizeModalIsActive", false);
+            this.$store.dispatch("display/setCategorizeModalIsActive", false);
           });
       } else {
         // if same category, then just accept it

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -14,7 +14,9 @@
 
     <!-- When there's no annotations in the label -->
     <div v-else-if="annotationSets.length === 0">
-      <CategorizeModal v-if="!publicView" />
+      <CategorizeModal
+        v-if="!publicView && !waitingForSplittingConfirmation(selectedDocument)"
+      />
       <EmptyState />
     </div>
 
@@ -25,7 +27,9 @@
         missingAnnotations.length && !publicView && 'showing-rejected',
       ]"
     >
-      <CategorizeModal v-if="!publicView" />
+      <CategorizeModal
+        v-if="!publicView && !waitingForSplittingConfirmation(selectedDocument)"
+      />
       <div
         v-for="(annotationSet, indexGroup) in annotationSets"
         :key="indexGroup"
@@ -123,9 +127,13 @@ export default {
       "loading",
       "labels",
       "selectedDocument",
+      "splittingSuggestions",
     ]),
     ...mapGetters("category", ["category"]),
-    ...mapGetters("document", ["numberOfAnnotationSetGroup"]),
+    ...mapGetters("document", [
+      "numberOfAnnotationSetGroup",
+      "waitingForSplittingConfirmation",
+    ]),
     isAnnotationBeingEdited() {
       return this.editAnnotation && this.editAnnotation.id;
     },

package/src/components/DocumentAnnotations/DocumentLabel.vue

@@ -66,9 +66,11 @@ export default {
   components: { AnnotationRow },
   props: {
     label: {
+      type: Object,
       required: true,
     },
     annotationSet: {
+      type: Object,
       required: true,
     },
   },

package/src/components/DocumentAnnotations/EmptyAnnotation.vue

@@ -37,17 +37,22 @@ export default {
   name: "EmptyAnnotation",
   props: {
     label: {
+      type: Object,
       required: true,
     },
     annotationSet: {
+      type: Object,
       required: true,
     },
-
     span: {
+      type: Object,
+      default: null,
       required: false,
     },
     spanIndex: {
+      type: Number,
       required: false,
+      default: 0,
     },
     saveChanges: {
       type: Boolean,

package/src/components/DocumentCategory.vue

@@ -1,11 +1,11 @@
 <template>
   <b-tooltip
     multilined
-    :active="tooltipIsShown"
+    :active="tooltipIsShown || dropdownIsDisabled"
     size="is-large"
     position="is-bottom"
     :class="[editMode ? 'right-aligned full-height-tooltip' : 'left-aligned']"
-    :close-delay="5000"
+    :close-delay="tooltipCloseDelay"
   >
     <template #content>
       <div ref="tooltipContent"></div>
@@ -17,7 +17,7 @@
         selectedDocument.is_reviewed && 'disabled',
       ]"
       aria-role="list"
-      :disabled="selectedDocument.is_reviewed || tooltipIsShown"
+      :disabled="dropdownIsDisabled"
     >
       <template #trigger>
         <div class="category-drop-down">
@@ -29,11 +29,7 @@
               {{ $t("category") }}
             </p>
             <div class="category-name">
-              {{
-                !splitMode
-                  ? categoryName(selectedDocument.category)
-                  : categoryName(updatedDocument[index].category)
-              }}
+              {{ setCategoryDefaultText }}
             </div>
           </div>
           <div :class="[!splitMode && 'caret-section']">
@@ -74,9 +70,11 @@ export default {
     },
     page: {
       type: Object,
+      default: null,
     },
     index: {
       type: Number,
+      default: 0,
     },
   },
   data() {
@@ -84,6 +82,8 @@ export default {
       currentProjectCategories: [],
       categoryError: false,
       tooltipIsShown: false,
+      tooltipCloseDelay: 0,
+      dropdownIsDisabled: false,
     };
   },
   computed: {
@@ -91,9 +91,25 @@ export default {
       categoryName: "categoryName",
       projectHasSingleCategory: "projectHasSingleCategory",
     }),
-    ...mapState("document", ["selectedDocument"]),
+    ...mapGetters("document", [
+      "documentCannotBeEdited",
+      "documentHasCorrectAnnotations",
+    ]),
+    ...mapState("document", ["selectedDocument", "annotations"]),
     ...mapState("category", ["categories"]),
     ...mapState("edit", ["editMode", "updatedDocument"]),
+
+    setCategoryDefaultText() {
+      if (!this.splitMode) {
+        return this.categoryName(this.selectedDocument.category);
+      } else {
+        const categoryName = this.categoryName(
+          this.updatedDocument[this.index].category
+        );
+
+        return categoryName ? categoryName : this.$t("choose_category");
+      }
+    },
   },
   watch: {
     categories(newValue) {
@@ -108,6 +124,10 @@ export default {
         }
       });
     },
+    annotations() {
+      this.checkIfDropdownIsDisabled();
+      this.setTooltipText();
+    },
   },
   mounted() {
     if (this.categories) {
@@ -129,12 +149,24 @@ export default {
 
     this.$nextTick(() => {
       this.setTooltipText();
+      this.checkIfDropdownIsDisabled();
     });
   },
   updated() {
     this.setTooltipText();
   },
   methods: {
+    checkIfDropdownIsDisabled() {
+      if (
+        this.projectHasSingleCategory() ||
+        this.documentCannotBeEdited(this.selectedDocument) ||
+        (this.documentHasCorrectAnnotations() && !this.splitMode)
+      ) {
+        this.dropdownIsDisabled = true;
+      } else {
+        this.dropdownIsDisabled = false;
+      }
+    },
     // The current category name will change
     // depending on if we are on edit mode or not
     handleOptionInDropdownDisabled(category) {
@@ -177,11 +209,20 @@ export default {
 
     setTooltipText() {
       // Text set from innerHTML vs 'label' due to html tag in locales file string
-      if (this.projectHasSingleCategory()) {
-        this.$refs.tooltipContent.innerHTML = this.$t(
-          "single_category_in_project"
-        );
+      let tooltipText;
+      let tooltipDelay = 0;
+
+      if (this.documentCannotBeEdited(this.selectedDocument)) {
+        tooltipText = this.$t("edit_not_available");
+      } else if (this.documentHasCorrectAnnotations()) {
+        tooltipText = this.$t("approved_annotations");
+      } else if (this.projectHasSingleCategory()) {
+        tooltipText = this.$t("single_category_in_project");
+        this.tooltipCloseDelay = 5000;
       }
+
+      this.tooltipCloseDelay = tooltipDelay;
+      this.$refs.tooltipContent.innerHTML = tooltipText;
     },
   },
 };

package/src/components/DocumentDashboard.vue

@@ -1,23 +1,11 @@
 <template>
   <div class="dashboard">
     <DocumentTopBar />
-    <div :class="['dashboard-viewer', editMode ? 'edit-mode' : '']">
-      <DocumentThumbnails
-        v-if="!editMode"
-        ref="documentPages"
-      />
-      <ScrollingDocument
-        ref="scrollingDocument"
-        class="dashboard-document"
-      />
-      <DocumentAnnotations
-        v-if="!editMode"
-        ref="annotations"
-      />
-      <DocumentEdit
-        v-else
-        ref="editView"
-      />
+    <div :class="['dashboard-viewer', splitOverview ? 'edit-mode' : '']">
+      <DocumentThumbnails v-if="!editMode" ref="documentPages" />
+      <ScrollingDocument ref="scrollingDocument" class="dashboard-document" />
+      <DocumentAnnotations v-if="!editMode" ref="annotations" />
+      <DocumentEdit v-else ref="editView" />
 
       <transition name="slide-fade">
         <div
@@ -29,26 +17,24 @@
         </div>
       </transition>
     </div>
-    <div
-      v-if="showDocumentError"
-      class="error-modal"
-    >
-      <DocumentError />
+    <div v-if="showDocumentError" class="error-modal">
+      <DocumentErrorModal />
     </div>
-    <div
-      v-if="!optimalResolution"
-      class="not-optimized"
-    >
+    <div v-if="!optimalResolution" class="not-optimized">
       <NotOptimizedViewportModal />
     </div>
-    <div
-      v-if="!isMinimumWidth"
-      class="not-supported"
-    >
+    <div v-if="!isMinimumWidth" class="not-supported">
       <div class="text">
         {{ $t("resolution_not_supported") }}
       </div>
     </div>
+    <div
+      v-if="
+        selectedDocument && waitingForSplittingConfirmation(selectedDocument)
+      "
+    >
+      <SplittingSuggestionsModal />
+    </div>
   </div>
 </template>
 
@@ -60,8 +46,9 @@ import { DocumentThumbnails } from "./DocumentThumbnails";
 import { DocumentAnnotations } from "./DocumentAnnotations";
 import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
-import NotOptimizedViewportModal from "./NotOptimizedViewportModal";
-import DocumentError from "./DocumentError";
+import NotOptimizedViewportModal from "../components/DocumentModals/NotOptimizedViewportModal";
+import DocumentErrorModal from "../components/DocumentModals/DocumentErrorModal";
+import SplittingSuggestionsModal from "../components/DocumentModals/SplittingSuggestionsModal";
 
 /**
  * This component shows the PDF pages in a scrolling component and
@@ -77,7 +64,14 @@ export default {
     DocumentEdit,
     ErrorMessage,
     NotOptimizedViewportModal,
-    DocumentError
+    DocumentErrorModal,
+    SplittingSuggestionsModal,
+  },
+  data() {
+    return {
+      resizeObserver: null,
+      unwatchSelectedDocument: null,
+    };
   },
   computed: {
     ...mapState("display", [
@@ -85,16 +79,18 @@ export default {
       "fit",
       "optimalResolution",
       "pageWidthScale",
-      "currentPage"
+      "currentPage",
     ]),
     ...mapState("document", [
       "showActionError",
       "showDocumentError",
       "errorMessageWidth",
-      "selectedDocument"
+      "selectedDocument",
+      "splittingSuggestions",
     ]),
-    ...mapState("edit", ["editMode"]),
-    ...mapGetters("display", ["isMinimumWidth"])
+    ...mapState("edit", ["editMode", "splitOverview"]),
+    ...mapGetters("display", ["isMinimumWidth"]),
+    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
   watch: {
     selectedDocument(newDocument, oldDocument) {
@@ -104,7 +100,7 @@ export default {
       } else if (newDocument) {
         this.onDocumentResize();
       }
-    }
+    },
   },
   mounted() {
     this.resizeObserver = new ResizeObserver(this.onDocumentResize);
@@ -114,12 +110,6 @@ export default {
       this.resizeObserver.unobserve(this.$refs.scrollingDocument.$el);
     }
   },
-  data() {
-    return {
-      resizeObserver: null,
-      unwatchSelectedDocument: null
-    };
-  },
   methods: {
     elementsWidth() {
       let elementsWidth = 1;
@@ -144,16 +134,16 @@ export default {
           elementsWidth: this.elementsWidth(),
           client: {
             width: this.$el.clientWidth,
-            height: this.$el.clientHeight
+            height: this.$el.clientHeight,
           },
           viewport: {
             width: this.selectedDocument.pages[0].size[0],
-            height: this.selectedDocument.pages[0].size[1]
-          }
+            height: this.selectedDocument.pages[0].size[1],
+          },
         });
       }
-    }
-  }
+    },
+  },
 };
 </script>
 <style scoped lang="scss" src="../assets/scss/document_dashboard.scss"></style>