@konfuzio/document-validation-ui 0.1.14 → 0.1.15

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>
@@ -17,6 +21,7 @@
         selectedDocument.is_reviewed && 'disabled',
       ]"
       aria-role="list"
+      scrollable
       :disabled="dropdownIsDisabled"
     >
       <template #trigger>
@@ -29,11 +34,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 +75,11 @@ export default {
     },
     page: {
       type: Object,
+      default: null,
     },
     index: {
       type: Number,
+      default: 0,
     },
   },
   data() {
@@ -84,15 +87,12 @@ export default {
       currentProjectCategories: [],
       categoryError: false,
       tooltipIsShown: false,
-      dropdownIsDisabled: false,
       tooltipCloseDelay: 0,
+      dropdownIsDisabled: false,
     };
   },
   computed: {
-    ...mapGetters("category", {
-      categoryName: "categoryName",
-      projectHasSingleCategory: "projectHasSingleCategory",
-    }),
+    ...mapGetters("category", ["categoryName", "projectHasSingleCategory"]),
     ...mapGetters("document", [
       "documentCannotBeEdited",
       "documentHasCorrectAnnotations",
@@ -100,54 +100,91 @@ export default {
     ...mapState("document", ["selectedDocument", "annotations"]),
     ...mapState("category", ["categories"]),
     ...mapState("edit", ["editMode", "updatedDocument"]),
-  },
-  watch: {
-    categories(newValue) {
-      newValue.map((category) => {
-        if (category.project === this.selectedDocument.project) {
-          const found = this.currentProjectCategories.find(
-            (cat) => cat.id === category.id
+
+    setCategoryDefaultText() {
+      if (!this.splitMode) {
+        return this.categoryName(this.selectedDocument.category);
+      } else {
+        const missingCategory = this.updatedDocument.find(
+          (item) => !item.category
+        );
+
+        // if there is just 1 category in the project,
+        // and one or more sub-documents has no category,
+        // assign the only category by default
+        if (this.projectHasSingleCategory() && missingCategory) {
+          const updatedValuesForDocuments = this.updatedDocument.map(
+            (document) => {
+              if (!document.category && this.categories) {
+                document.category = this.categories[0].id;
+              }
+
+              return document;
+            }
           );
-          if (found) return;
 
-          this.currentProjectCategories.push(category);
+          // update the store state
+          // so that if the changes are saved the data sent to the API is updated
+          // instead of only handling the category name in this component
+          this.$store.dispatch(
+            "edit/setUpdatedDocument",
+            updatedValuesForDocuments
+          );
         }
-      });
-    },
-    annotations(newValue) {
-      if (newValue) {
-        this.showTooltip();
+
+        const categoryName = this.categoryName(
+          this.updatedDocument[this.index].category
+        );
+
+        return categoryName ? categoryName : this.$t("choose_category");
       }
     },
   },
+  watch: {
+    categories() {
+      this.handleCategories();
+    },
+    annotations() {
+      this.checkIfDropdownIsDisabled();
+      this.setTooltipText();
+    },
+  },
   mounted() {
     if (this.categories) {
-      this.categories.map((category) => {
-        if (category.project === this.selectedDocument.project) {
-          const found = this.currentProjectCategories.find(
-            (cat) => cat.id === category.id
-          );
-          if (found) return;
-
-          this.currentProjectCategories.push(category);
-        }
-      });
+      this.handleCategories();
     }
 
     if (this.projectHasSingleCategory()) {
       this.tooltipIsShown = true;
     }
-
-    this.showTooltip();
-
-    this.$nextTick(() => {
-      this.setTooltipText();
-    });
   },
   updated() {
     this.setTooltipText();
+    this.checkIfDropdownIsDisabled();
   },
   methods: {
+    handleCategories() {
+      this.categories.map((category) => {
+        if (category.project === this.selectedDocument.project) {
+          const found = this.currentProjectCategories.find(
+            (cat) => cat.id === category.id
+          );
+          if (found) return;
+          this.currentProjectCategories.push(category);
+        }
+      });
+    },
+    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) {
@@ -159,7 +196,7 @@ export default {
 
     handleChangeCategory(category) {
       // handling the category change will be different based on
-      // the dropdown being on the topbar or the split overview
+      // the dropdown being on the topbar or the Rename and Categorize view
       const updatedCategory = {
         category: category.id,
       };
@@ -183,39 +220,26 @@ export default {
         return;
       }
 
-      // Send the category ID to the split overview
+      // Send the category ID to the Rename and Categorize view
       // to update the new document category
       this.$emit("category-change", this.page, category.id);
     },
 
-    showTooltip() {
-      if (
-        this.documentCannotBeEdited(this.selectedDocument) ||
-        (this.documentHasCorrectAnnotations() && !this.splitMode)
-      ) {
-        this.dropdownIsDisabled = true;
-      } else {
-        this.dropdownIsDisabled = false;
-      }
-    },
-
     setTooltipText() {
       // Text set from innerHTML vs 'label' due to html tag in locales file string
       let tooltipText;
-      if (this.projectHasSingleCategory()) {
-        tooltipText = this.$t("single_category_in_project");
+      let tooltipDelay = 0;
 
-        this.tooltipCloseDelay = 5000;
-      } else {
-        this.tooltipCloseDelay = 0;
-
-        if (this.documentHasCorrectAnnotations()) {
-          tooltipText = this.$t("approved_annotations");
-        } else {
-          tooltipText = this.$t("edit_not_available");
-        }
+      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");
+        tooltipDelay = 5000;
       }
 
+      this.tooltipCloseDelay = tooltipDelay;
       this.$refs.tooltipContent.innerHTML = tooltipText;
     },
   },

package/src/components/DocumentDashboard.vue

@@ -1,22 +1,21 @@
 <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"
+    <div :class="['dashboard-viewer', renameAndCategorize ? 'edit-mode' : '']">
+      <DocumentThumbnails v-if="!editMode" ref="documentPages" />
+      <ScrollingDocument ref="scrollingDocument" class="dashboard-document" />
+      <DocumentAnnotations v-if="!editMode" ref="annotations" />
+      <DocumentEdit v-if="editMode" ref="editView" />
+
+      <MultiAnnotationTableOverlay
+        v-if="showAnnSetTable"
+        :left="documentContainerLeftPadding"
+        :width="documentContainerWidth"
       />
-      <DocumentEdit
-        v-else
-        ref="editView"
+      <ChooseLabelSetModal
+        v-if="showChooseLabelSetModal && showChooseLabelSetModal.show"
+        :is-multiple-annotations="showChooseLabelSetModal.isMultipleAnnotations"
+        @finish="showChooseLabelSetModal.finish"
       />
 
       <transition name="slide-fade">
@@ -29,22 +28,13 @@
         </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>
@@ -57,11 +47,15 @@ import { mapGetters, mapState } from "vuex";
 import { DocumentTopBar } from "./DocumentTopBar";
 import { ScrollingDocument } from "./DocumentPage";
 import { DocumentThumbnails } from "./DocumentThumbnails";
-import { DocumentAnnotations } from "./DocumentAnnotations";
+import {
+  DocumentAnnotations,
+  MultiAnnotationTableOverlay,
+} 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 ChooseLabelSetModal from "../components/DocumentAnnotations/ChooseLabelSetModal";
 
 /**
  * This component shows the PDF pages in a scrolling component and
@@ -77,7 +71,17 @@ export default {
     DocumentEdit,
     ErrorMessage,
     NotOptimizedViewportModal,
-    DocumentError
+    DocumentErrorModal,
+    MultiAnnotationTableOverlay,
+    ChooseLabelSetModal,
+  },
+  data() {
+    return {
+      resizeObserver: null,
+      unwatchSelectedDocument: null,
+      documentContainerLeftPadding: 0,
+      documentContainerWidth: 0,
+    };
   },
   computed: {
     ...mapState("display", [
@@ -85,17 +89,21 @@ export default {
       "fit",
       "optimalResolution",
       "pageWidthScale",
-      "currentPage"
+      "currentPage",
+      "showAnnSetTable",
+      "showChooseLabelSetModal",
     ]),
     ...mapState("document", [
       "showActionError",
       "showDocumentError",
       "errorMessageWidth",
-      "selectedDocument"
+      "selectedDocument",
+      "splittingSuggestions",
     ]),
-    ...mapState("edit", ["editMode"]),
-    ...mapGetters("display", ["isMinimumWidth"])
+    ...mapState("edit", ["editMode", "renameAndCategorize"]),
+    ...mapGetters("display", ["isMinimumWidth"]),
   },
+
   watch: {
     selectedDocument(newDocument, oldDocument) {
       if (newDocument && !oldDocument) {
@@ -104,7 +112,12 @@ export default {
       } else if (newDocument) {
         this.onDocumentResize();
       }
-    }
+    },
+    fit(newFit, oldFit) {
+      if (newFit !== oldFit) {
+        this.onDocumentResize();
+      }
+    },
   },
   mounted() {
     this.resizeObserver = new ResizeObserver(this.onDocumentResize);
@@ -114,12 +127,6 @@ export default {
       this.resizeObserver.unobserve(this.$refs.scrollingDocument.$el);
     }
   },
-  data() {
-    return {
-      resizeObserver: null,
-      unwatchSelectedDocument: null
-    };
-  },
   methods: {
     elementsWidth() {
       let elementsWidth = 1;
@@ -135,6 +142,10 @@ export default {
       return elementsWidth;
     },
     onDocumentResize() {
+      this.documentContainerLeftPadding =
+        this.$refs.scrollingDocument.$el.getBoundingClientRect().left;
+      this.documentContainerWidth =
+        this.$refs.scrollingDocument.$el.offsetWidth;
       this.$store.dispatch(
         "display/updateOptimalResolution",
         this.$el.offsetWidth
@@ -144,16 +155,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>