@konfuzio/document-validation-ui 0.1.10-dev.4 → 0.1.10-dev.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.10-dev.4",
+  "version": "0.1.10-dev.6",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/assets/scss/document_edit.scss

@@ -3,7 +3,7 @@
 .document-edit {
   display: flex;
   flex: 1;
-  background-color: $background;
+  background-color: $light-grey-background;
 
   .pages-section {
     width: 100%;
@@ -14,6 +14,22 @@
     flex-direction: column;
     justify-content: space-between;
 
+    .grid-header {
+      height: 60px;
+      background-color: $background;
+      border-bottom: $component-border;
+      display: flex;
+      align-items: center;
+
+      .header-title {
+        color: $text-color;
+        font-weight: 600;
+        font-size: 18px;
+        line-height: 18px;
+        padding-left: 28px;
+      }
+    }
+
     .document-grid {
       padding: 32px;
       display: flex;
@@ -236,18 +252,18 @@
     }
   }
 
-  &.split-overview-component {
+  &.rename-and-categorize-component {
     background-color: $background;
     min-width: 600px;
 
-    .split-overview-section {
+    .rename-and-categorize-section {
       padding-left: 30px;
       padding-right: 10px;
       overflow-y: scroll;
       width: 100%;
     }
 
-    .split-overview {
+    .rename-and-categorize {
       margin-top: 20px;
       img {
         height: 30px !important;
@@ -263,7 +279,7 @@
         cursor: pointer;
 
         .back-btn-section {
-          padding-top: 5px;
+          padding-top: 4px;
         }
 
         .back-text {
@@ -274,7 +290,7 @@
         }
       }
 
-      .overview-title {
+      .rename-and-categorize-title {
         color: $text-color;
         font-size: 16px;
         font-weight: 600;
@@ -291,7 +307,7 @@
           gap: 20px;
           padding-bottom: 40px;
 
-          .overview-thumbnails {
+          .rename-and-categorize-thumbnails {
             display: flex;
             align-items: center;
             justify-content: center;
@@ -318,6 +334,10 @@
                         5px 5px $white, 6px 6px $detail;
                     }
                   }
+
+                  &:hover {
+                    cursor: pointer;
+                  }
                 }
               }
             }

package/src/assets/scss/document_name.scss

@@ -1,7 +1,7 @@
 @import "./imports.scss";
 
 .document-name-component {
-  flex: 3;
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;

package/src/assets/scss/document_top_bar.scss

@@ -119,6 +119,10 @@
           display: flex;
           align-items: center;
           margin-right: 16px;
+
+          .edit-mode-btn {
+            font-size: 14px;
+          }
         }
       }
     }

package/src/assets/scss/main.scss

@@ -520,7 +520,7 @@ body {
           }
         }
 
-        &.finish-review {
+        &.no-right-margin {
           .tooltip-content {
             right: 0 !important;
           }

package/src/assets/scss/variables.scss

@@ -27,6 +27,7 @@ $grey-darker: #101828;
 $grey-hover: #fafafa;
 $grey-blue: #667085;
 $detail: #e2e3e4;
+$light-grey-background: #f7f7f7;
 
 $dark: #2f3032;
 $full-black: #000;

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -14,18 +14,10 @@
 
     <!-- When there's no annotations in the label -->
     <div v-else-if="annotationSets.length === 0">
-      <CategorizeModal
-        v-if="
-          !publicView &&
-          !isDocumentReviewed &&
-          !waitingForSplittingConfirmation(selectedDocument)
-        "
-      />
       <EmptyState />
     </div>
 
     <div v-else :class="['annotation-set-list']">
-      <CategorizeModal v-if="!publicView || !isDocumentReviewed" />
       <div
         v-if="Object.entries(annotationSetsInTable()).length > 0"
         class="annotation-set-group"
@@ -114,7 +106,6 @@ import ExtractingData from "./ExtractingData";
 import AnnotationSetActionButtons from "./AnnotationSetActionButtons";
 import DocumentLabel from "./DocumentLabel";
 import LoadingAnnotations from "./LoadingAnnotations";
-import CategorizeModal from "./CategorizeModal";
 import GridIcon from "../../assets/images/GridIcon";
 
 /**
@@ -127,7 +118,6 @@ export default {
     AnnotationSetActionButtons,
     DocumentLabel,
     LoadingAnnotations,
-    CategorizeModal,
     GridIcon,
   },
   data() {
@@ -157,7 +147,6 @@ export default {
       "numberOfAnnotationSetGroup",
       "emptyLabelsLength",
       "annotationsWithPendingReviewLength",
-      "waitingForSplittingConfirmation",
       "annotationSetsToShowInList",
       "annotationSetsInTable",
       "isDocumentReviewed",

package/src/components/DocumentCategory.vue

@@ -168,7 +168,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,
       };
@@ -192,7 +192,7 @@ 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);
     },

package/src/components/DocumentDashboard.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="dashboard">
     <DocumentTopBar />
-    <div :class="['dashboard-viewer', splitOverview ? 'edit-mode' : '']">
+    <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-else ref="editView" />
+      <DocumentEdit v-if="editMode" ref="editView" />
 
       <MultiAnnotationTableOverlay
         v-if="showAnnSetTable"
@@ -34,15 +34,6 @@
         {{ $t("resolution_not_supported") }}
       </div>
     </div>
-    <div
-      v-if="
-        selectedDocument &&
-        waitingForSplittingConfirmation(selectedDocument) &&
-        !documentBeingSplit
-      "
-    >
-      <SplittingSuggestionsModal />
-    </div>
   </div>
 </template>
 
@@ -59,7 +50,6 @@ import { DocumentEdit } from "./DocumentEdit";
 import ErrorMessage from "./ErrorMessage";
 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
@@ -76,7 +66,6 @@ export default {
     ErrorMessage,
     NotOptimizedViewportModal,
     DocumentErrorModal,
-    SplittingSuggestionsModal,
     MultiAnnotationTableOverlay,
   },
   data() {
@@ -103,9 +92,8 @@ export default {
       "selectedDocument",
       "splittingSuggestions",
     ]),
-    ...mapState("edit", ["editMode", "splitOverview", "documentBeingSplit"]),
+    ...mapState("edit", ["editMode", "renameAndCategorize"]),
     ...mapGetters("display", ["isMinimumWidth"]),
-    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
   },
 
   watch: {

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -1,6 +1,11 @@
 <template>
-  <div :class="['document-edit', splitOverview && 'split-overview-component']">
-    <div v-if="!splitOverview" class="pages-section">
+  <div
+    :class="[
+      'document-edit',
+      renameAndCategorize && 'rename-and-categorize-component',
+    ]"
+  >
+    <div v-if="!renameAndCategorize" class="pages-section">
       <EditPages
         :splitting-lines="splittingLines"
         :split-suggestions-enabled="splitSuggestionsEnabled"
@@ -12,14 +17,14 @@
         <SplitInfoBar v-if="splitSuggestionsEnabled" />
       </div>
     </div>
-    <div v-else class="split-overview-section">
-      <SplitOverview
+    <div v-else class="rename-and-categorize-section">
+      <RenameAndCategorize
         :file-name="fileName"
         :file-extension="fileExtension"
         @change-page="changePage"
       />
     </div>
-    <div v-if="!splitOverview" class="sidebar">
+    <div v-if="!renameAndCategorize" class="sidebar">
       <EditSidebar
         :split-suggestions-enabled="splitSuggestionsEnabled"
         @rotate-left="rotatePage"
@@ -35,9 +40,9 @@
   </div>
 </template>
 <script>
-import { mapState } from "vuex";
+import { mapState, mapGetters } from "vuex";
 import EditSidebar from "./EditSidebar";
-import SplitOverview from "./SplitOverview";
+import RenameAndCategorize from "./RenameAndCategorize";
 import EditPages from "./EditPages";
 import SplitInfoBar from "./SplitInfoBar";
 import EditConfirmationModal from "./EditConfirmationModal";
@@ -49,7 +54,7 @@ export default {
   name: "DocumentEdit",
   components: {
     EditSidebar,
-    SplitOverview,
+    RenameAndCategorize,
     EditPages,
     SplitInfoBar,
     EditConfirmationModal,
@@ -69,28 +74,26 @@ export default {
       "recalculatingAnnotations",
       "selectedDocument",
       "splittingSuggestions",
+      "pages",
     ]),
     ...mapState("display", ["currentPage"]),
     ...mapState("edit", [
       "editMode",
       "pagesForPostprocess",
       "updatedDocument",
-      "splitOverview",
+      "renameAndCategorize",
       "selectedPages",
+      "submitEditChanges",
     ]),
+    ...mapGetters("edit", ["documentShouldBePostprocessed"]),
   },
   watch: {
-    pages() {
-      if (!this.selectedDocument) return;
-
-      this.setPages();
-    },
-    splitOverview(newValue) {
+    renameAndCategorize(newValue) {
       if (newValue) {
         this.splitFileNameFromExtension();
       }
     },
-    pagesForPostprocess(newValue) {
+    pagesForPostprocess(newValue, oldValue) {
       if (newValue) {
         this.saveUpdatedDocuments();
       }
@@ -104,6 +107,11 @@ export default {
         this.splitSuggestionsEnabled = false;
       }
     },
+    submitEditChanges(newValue) {
+      if (!newValue) return;
+
+      this.saveEditChanges();
+    },
   },
   mounted() {
     this.setPages();
@@ -367,24 +375,71 @@ export default {
     /** SUBMIT CHANGES */
     // Send update request to the backend
     saveEditChanges() {
-      this.$store
-        .dispatch("edit/editDocument", this.updatedDocument)
-        .catch((error) => {
-          this.$store.dispatch("document/createErrorMessage", {
-            error,
-            serverErrorMessage: this.$t("server_error"),
-            defaultErrorMessage: this.$t("edit_error"),
+      // Verify if there was splitting, rotating and/or reordering
+      if (this.documentShouldBePostprocessed) {
+        this.$store
+          .dispatch("edit/editDocument", this.updatedDocument)
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("edit_error"),
+            });
           });
-        });
+      } else {
+        // Check if only the category changes:
+        const newCategory = this.updatedDocument[0].category;
+        const newName = this.updatedDocument[0].name;
+        let category = {};
+        let name = {};
+        let revisedCategory = {};
+
+        if (this.selectedDocument.category !== newCategory) {
+          Object.assign(category, {
+            category: newCategory,
+          });
+
+          this.$store.dispatch("document/startLoading");
+        }
+
+        if (!this.selectedDocument.category_is_revised && newCategory) {
+          Object.assign(revisedCategory, {
+            category_is_revised: true,
+          });
+        }
+
+        if (this.selectedDocument.data_file_name !== newName) {
+          Object.assign(name, { data_file_name: newName });
+        }
+
+        if (!category && !name) {
+          return;
+        }
+
+        const updatedValues = Object.assign(category, revisedCategory, name);
+
+        this.$store
+          .dispatch("document/updateDocument", updatedValues)
+          .catch((error) => {
+            this.$store.dispatch("document/endLoading");
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("edit_error"),
+            });
+          });
+      }
 
       this.closeEditMode();
     },
 
     closeEditMode() {
       this.$store.dispatch("edit/disableEditMode");
-      this.$store.dispatch("edit/setSplitOverview", false);
+      this.$store.dispatch("edit/setRenameAndCategorize", false);
       this.$store.dispatch("edit/setUpdatedDocument", null);
       this.$store.dispatch("edit/setSelectedPages", null);
+      this.$store.dispatch("edit/setSubmitEditChanges", false);
+      this.$store.dispatch("edit/setShowEditConfirmationModal", false);
       this.$nextTick(() => {
         // reset to first page
         this.$store.dispatch("display/updateCurrentPage", 1);

package/src/components/DocumentEdit/EditPages.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="edit-pages">
+    <div class="grid-header">
+      <span class="header-title">{{ $t("rotate_split_reorder") }}</span>
+    </div>
     <draggable
       v-model="editPages"
       class="document-grid"
@@ -109,8 +112,7 @@ export default {
     ...mapState("edit", [
       "editMode",
       "pagesForPostprocess",
-      "splitOverview",
-      "splitOverview",
+      "renameAndCategorize",
     ]),
   },
   watch: {
@@ -124,7 +126,7 @@ export default {
         this.$store.dispatch("edit/setPagesForPostprocess", newValue);
       }
     },
-    splitOverview(newValue) {
+    renameAndCategorize(newValue) {
       if (newValue) {
         this.editPages = this.pagesForPostprocess;
       }

package/src/components/DocumentEdit/{SplitOverview.vue → RenameAndCategorize.vue}

@@ -1,19 +1,19 @@
 <template>
-  <div class="split-overview">
+  <div class="rename-and-categorize">
     <div class="back-section" @click="handleBackButton">
       <div class="back-btn-section">
         <b-icon
           icon="arrow-left"
           class="is-small arrow"
-          :style="{ color: '#858C9A', cursor: 'pointer' }"
+          :style="{ color: '#1a1a1a', cursor: 'pointer' }"
         />
       </div>
       <div class="back-text">
-        {{ $t("back_to_edit") }}
+        {{ $t("rotate_split_reorder") }}
       </div>
     </div>
-    <div class="overview-title">
-      {{ $t("split_document") }}
+    <div class="rename-and-categorize-title">
+      {{ $t("rename_and_categorize") }}
     </div>
     <div class="new-documents-container">
       <div
@@ -21,7 +21,7 @@
         :key="index"
         class="document-details"
       >
-        <div class="overview-thumbnails">
+        <div class="rename-and-categorize-thumbnails">
           <div class="split-documents">
             <div
               class="image-container"
@@ -88,7 +88,7 @@ import ServerImage from "../../assets/images/ServerImage";
 import EyeIcon from "../../assets/images/EyeIcon";
 
 export default {
-  name: "SplitOverview",
+  name: "RenameAndCategorize",
   components: {
     DocumentCategory,
     ServerImage,
@@ -114,9 +114,10 @@ export default {
     ...mapState("document", ["selectedDocument", "pages"]),
     ...mapState("edit", ["updatedDocument", "pagesForPostprocess"]),
   },
+
   methods: {
     handleBackButton() {
-      this.$store.dispatch("edit/setSplitOverview", false);
+      this.$store.dispatch("edit/setRenameAndCategorize", false);
     },
     handlePaste(event) {
       // TODO: modify to only paste plain text

package/src/components/DocumentEdit/index.js

@@ -1,4 +1,4 @@
 export { default as DocumentEdit } from "./DocumentEdit";
 export { default as EditSidebar } from "./EditSidebar";
 export { default as EditPages } from "./EditPages";
-export { default as SplitOverview } from "./SplitOverview";
+export { default as RenameAndCategorize } from "./RenameAndCategorize";

package/src/components/DocumentTopBar/DocumentTopBarButtons.vue

@@ -2,24 +2,30 @@
   <div class="buttons">
     <div v-if="editMode" class="edit-mode-buttons">
       <b-button
-        :label="$t('cancel')"
-        class="button-cancel primary-button"
+        :label="$t('back_to_annotations')"
+        class="button-cancel primary-button edit-mode-btn"
         type="is-default"
-        @click="closeEditMode"
-      />
-      <b-button
-        :label="
-          editMode &&
-          updatedDocument &&
-          updatedDocument.length > 1 &&
-          !splitOverview
-            ? $t('next')
-            : $t('submit')
+        :disabled="
+          !documentHasCategory ||
+          waitingForSplittingConfirmation(selectedDocument)
         "
-        type="is-primary"
-        class="button-next primary-button"
-        @click="handleButton"
+        @click="closeEditMode"
       />
+
+      <b-tooltip
+        :active="!enableSubmit"
+        position="is-bottom"
+        :label="$t('select_category')"
+        class="right-aligned no-right-margin"
+      >
+        <b-button
+          :label="editMode && !renameAndCategorize ? $t('next') : $t('submit')"
+          type="is-primary"
+          class="button-next primary-button edit-mode-btn"
+          :disabled="renameAndCategorize && !enableSubmit"
+          @click="handleButton"
+        />
+      </b-tooltip>
     </div>
 
     <div
@@ -30,7 +36,7 @@
         :active="!isReviewButtonActive"
         position="is-bottom"
         multilined
-        class="right-aligned finish-review"
+        class="right-aligned no-right-margin"
       >
         <b-button
           :class="['finish-review-btn', 'text-btn', 'primary-button']"
@@ -69,6 +75,7 @@ export default {
     return {
       emptyLabels: null,
       isLoading: false,
+      enableSubmit: false,
     };
   },
 
@@ -77,20 +84,50 @@ export default {
       "selectedDocument",
       "publicView",
       "annotationSets",
+      "thumbnailIsLoaded",
     ]),
-    ...mapState("edit", ["editMode", "splitOverview", "updatedDocument"]),
+    ...mapState("edit", ["editMode", "renameAndCategorize", "updatedDocument"]),
     ...mapGetters("document", [
       "isDocumentReadyToFinishReview",
       "isDocumentReviewed",
+      "waitingForSplittingConfirmation",
     ]),
+    ...mapGetters("edit", ["documentShouldBePostprocessed"]),
     isReviewButtonActive() {
       return this.isDocumentReadyToFinishReview;
     },
+    documentHasCategory() {
+      return this.selectedDocument.category;
+    },
   },
+
+  watch: {
+    updatedDocument(newValue) {
+      if (!newValue) return;
+
+      this.submitValidation(newValue);
+    },
+  },
+
+  mounted() {
+    if (this.updatedDocument) {
+      this.submitValidation(this.updatedDocument);
+    }
+  },
+
   methods: {
+    submitValidation(document) {
+      const found = document.find((item) => !item.category);
+
+      if (!found) {
+        this.enableSubmit = true;
+      } else {
+        this.enableSubmit = false;
+      }
+    },
     closeEditMode() {
       this.$store.dispatch("edit/disableEditMode");
-      this.$store.dispatch("edit/setSplitOverview", false);
+      this.$store.dispatch("edit/setRenameAndCategorize", false);
       this.$store.dispatch("edit/setUpdatedDocument", null);
       this.$store.dispatch("edit/setSelectedPages", null);
       this.$nextTick(() => {
@@ -99,21 +136,20 @@ export default {
       });
     },
     handleButton() {
-      // Check if we are not in the split overview
+      // Check if we are not in the Rename and Categorize view
       // and if we have a split document
-      if (
-        !this.splitOverview &&
-        this.updatedDocument &&
-        this.updatedDocument.length > 1
-      ) {
-        // Enable the "next" button to go to the overview
-        this.$store.dispatch("edit/setSplitOverview", true);
+      if (!this.renameAndCategorize) {
+        // Enable the "next" button
+        this.$store.dispatch("edit/setRenameAndCategorize", true);
         this.$store.dispatch("edit/setSelectedPages", null);
-      } else {
-        // If we are in the overview (so more than 1 doc)
-        // or in the edit mode (only 1 doc)
-        // Show confirmation modal to user
+      } else if (
+        this.selectedDocument.category_is_revised &&
+        this.documentShouldBePostprocessed
+      ) {
+        // Show confirmation modal to user if the document was split, reordered or rotated
         this.$store.dispatch("edit/setShowEditConfirmationModal", true);
+      } else {
+        this.$store.dispatch("edit/setSubmitEditChanges", true);
       }
     },
     handleFinishReview() {