@konfuzio/document-validation-ui 0.1.2-pre-release-2 → 0.1.2-pre-release-4

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.2-pre-release-2",
+  "version": "0.1.2-pre-release-4",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
+  "main": "src/main.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build --name DocumentValidationUi ./src/main.js",

package/src/assets/scss/variables.scss

@@ -462,6 +462,12 @@ button {
 .b-tooltip {
   .tooltip-content {
     background-color: $dark-blue !important;
+
+    a {
+      color: $white;
+      text-decoration: underline;
+      font-weight: 500;
+    }
   }
 
   &.left-aligned {
@@ -498,6 +504,14 @@ button {
         right: 0 !important;
       }
     }
+
+    &.full-height-tooltip {
+      height: 100%;
+
+      .tooltip-content {
+        right: 0 !important;
+      }
+    }
   }
 
   &.width-184 {
@@ -528,12 +542,6 @@ button {
       &::before {
         border-bottom-color: $dark-blue !important;
       }
-
-      a {
-        color: $white;
-        text-decoration: underline;
-        font-weight: 500;
-      }
     }
   }
 
@@ -649,6 +657,10 @@ button {
     justify-content: center;
     align-items: center;
   }
+
+  &.is-disabled {
+    cursor: not-allowed;
+  }
 }
 
 .b-table {

package/src/components/DocumentAnnotations/CategorizeModal.vue

@@ -20,7 +20,7 @@
 
           <b-tooltip
             multilined
-            :active="singleCategoryInProject"
+            :active="tooltipIsShown"
             size="is-large"
             position="is-bottom"
             class="bottom-aligned"
@@ -34,9 +34,9 @@
               aria-role="list"
               :class="[
                 'categorize-dropdown',
-                singleCategoryInProject && 'dropdown-disabled',
+                projectHasSingleCategory() && 'dropdown-disabled',
               ]"
-              :disabled="singleCategoryInProject"
+              :disabled="tooltipIsShown"
             >
               <template #trigger>
                 <div class="category-dropdown">
@@ -44,7 +44,7 @@
                     <span v-if="selectedCategory">{{
                       selectedCategory.name
                     }}</span>
-                    <span v-else-if="singleCategoryInProject">{{
+                    <span v-else-if="projectHasSingleCategory()">{{
                       categories[0].name
                     }}</span>
                     <span v-else>{{ $t("choose_category") }}</span>
@@ -100,18 +100,14 @@ export default {
       show: false,
       selectedCategory: null, // category selected in dropdown
       documentCategory: null, // category associated to document
+      tooltipIsShown: false,
     };
   },
   computed: {
     ...mapState("category", ["categories"]),
     ...mapState("document", ["selectedDocument"]),
-    ...mapGetters("category", ["category"]),
+    ...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) {
@@ -138,6 +134,10 @@ export default {
     this.$nextTick(() => {
       this.setTooltipText();
     });
+
+    if (this.projectHasSingleCategory()) {
+      this.tooltipIsShown = true;
+    }
   },
   updated() {
     this.setTooltipText();
@@ -152,7 +152,7 @@ export default {
         if (this.selectedDocument.category) {
           category = this.category(this.selectedDocument.category);
           this.documentCategory = category;
-        } else if (this.categories && this.categories.length === 1) {
+        } else if (this.projectHasSingleCategory()) {
           category = this.category(this.categories[0].id);
         } else {
           category = category;
@@ -174,7 +174,7 @@ export default {
           this.documentCategory &&
           this.selectedCategory.id !== this.documentCategory.id) ||
         (this.selectedCategory && !this.documentCategory) ||
-        (this.selectedCategory && this.singleCategoryInProject)
+        (this.selectedCategory && this.projectHasSingleCategory)
       ) {
         const updatedCategory = {
           category: this.selectedCategory.id,
@@ -194,6 +194,7 @@ export default {
           })
           .finally(() => {
             this.$store.dispatch("document/endRecalculatingAnnotations");
+            this.$store.dispatch("document/setCategorizeModalIsActive", false);
           });
       } else {
         // if same category, then just accept it
@@ -205,7 +206,7 @@ export default {
     },
     setTooltipText() {
       // Text set from innerHTML vs 'label' due to html tag in locales file string
-      if (this.singleCategoryInProject && this.show) {
+      if (this.projectHasSingleCategory() && this.show) {
         this.$refs.tooltipContent.innerHTML = this.$t(
           "single_category_in_project"
         );

package/src/components/DocumentCategory.vue

@@ -1,50 +1,62 @@
 <template>
-  <b-dropdown
-    :class="[
-      'category-chooser',
-      splitMode && 'split-mode',
-      selectedDocument.is_reviewed && 'disabled',
-    ]"
-    aria-role="list"
-    :disabled="selectedDocument.is_reviewed"
+  <b-tooltip
+    multilined
+    :active="tooltipIsShown"
+    size="is-large"
+    position="is-bottom"
+    :class="[editMode ? 'right-aligned full-height-tooltip' : 'left-aligned']"
+    :close-delay="5000"
   >
-    <template #trigger>
-      <div class="category-drop-down">
-        <div class="icon">
-          <CategoryIcon />
-        </div>
-        <div class="category-info">
-          <p v-if="!splitMode" class="category-title">
-            {{ $t("category") }}
-          </p>
-          <div class="category-name">
-            {{
-              !splitMode
-                ? categoryName(selectedDocument.category)
-                : categoryName(updatedDocument[index].category)
-            }}
+    <template #content>
+      <div ref="tooltipContent"></div>
+    </template>
+    <b-dropdown
+      :class="[
+        'category-chooser',
+        splitMode && 'split-mode',
+        selectedDocument.is_reviewed && 'disabled',
+      ]"
+      aria-role="list"
+      :disabled="selectedDocument.is_reviewed || tooltipIsShown"
+    >
+      <template #trigger>
+        <div class="category-drop-down">
+          <div class="icon">
+            <CategoryIcon />
+          </div>
+          <div class="category-info">
+            <p v-if="!splitMode" class="category-title">
+              {{ $t("category") }}
+            </p>
+            <div class="category-name">
+              {{
+                !splitMode
+                  ? categoryName(selectedDocument.category)
+                  : categoryName(updatedDocument[index].category)
+              }}
+            </div>
+          </div>
+          <div :class="[!splitMode && 'caret-section']">
+            <b-icon
+              icon="angle-down"
+              size="is-small"
+              :class="['caret', splitMode && 'split-mode-caret']"
+            />
           </div>
         </div>
-        <div :class="[!splitMode && 'caret-section']">
-          <b-icon
-            icon="angle-down"
-            size="is-small"
-            :class="['caret', splitMode && 'split-mode-caret']"
-          />
-        </div>
-      </div>
-    </template>
+      </template>
 
-    <b-dropdown-item
-      v-for="category in currentProjectCategories"
-      :key="category.id"
-      aria-role="listitem"
-      :disabled="handleOptionInDropdownDisabled(category)"
-      @click="handleChangeCategory(category)"
-    >
-      <span>{{ category.name }}</span>
-    </b-dropdown-item>
-  </b-dropdown>
+      <b-dropdown-item
+        v-for="category in currentProjectCategories"
+        :key="category.id"
+        aria-role="listitem"
+        :disabled="handleOptionInDropdownDisabled(category)"
+        @click="handleChangeCategory(category)"
+      >
+        <span>{{ category.name }}</span>
+      </b-dropdown-item>
+    </b-dropdown>
+  </b-tooltip>
 </template>
 
 <script>
@@ -71,15 +83,17 @@ export default {
     return {
       currentProjectCategories: [],
       categoryError: false,
+      tooltipIsShown: false,
     };
   },
   computed: {
     ...mapGetters("category", {
       categoryName: "categoryName",
+      projectHasSingleCategory: "projectHasSingleCategory",
     }),
     ...mapState("document", ["selectedDocument"]),
     ...mapState("category", ["categories"]),
-    ...mapState("edit", ["updatedDocument"]),
+    ...mapState("edit", ["editMode", "updatedDocument"]),
   },
   watch: {
     categories(newValue) {
@@ -108,6 +122,17 @@ export default {
         }
       });
     }
+
+    if (this.projectHasSingleCategory()) {
+      this.tooltipIsShown = true;
+    }
+
+    this.$nextTick(() => {
+      this.setTooltipText();
+    });
+  },
+  updated() {
+    this.setTooltipText();
   },
   methods: {
     // The current category name will change
@@ -149,6 +174,15 @@ export default {
       // to update the new document category
       this.$emit("category-change", this.page, category.id);
     },
+
+    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"
+        );
+      }
+    },
   },
 };
 </script>

package/src/components/DocumentEdit/SplitOverview.vue

@@ -25,7 +25,7 @@
           <div class="split-documents">
             <div
               class="image-container"
-              @click="handlePageChange(page.pages[0].page_number)"
+              @click="handlePageChange(page.pages[0].number)"
             >
               <div
                 :class="['thumbnail', page.pages.length > 1 && 'page-stack']"
@@ -165,7 +165,7 @@ export default {
       // returns the first thumbnail in the pages array
       // for each new document
       const image = this.documentPagesListForEditMode.find(
-        (p) => p.page_number === page.pages[0].page_number
+        (p) => p.number === page.pages[0].number
       );
 
       return `${image.thumbnail_url}?${image.updated_at}`;

package/src/components/DocumentPage/DocumentPage.vue

@@ -1,7 +1,10 @@
 <template>
   <div
     ref="pdfContainer"
-    :class="['pdf-page-container', categorizeModalIsActive && 'pointer-cursor']"
+    :class="[
+      'pdf-page-container',
+      (categorizeModalIsActive || editMode) && 'pointer-cursor',
+    ]"
   >
     <NewAnnotation
       v-if="newAnnotation && newAnnotation.length && !editAnnotation"
@@ -273,6 +276,11 @@ export default {
         this.closePopups(true);
       }
     },
+    page(newValue, oldValue) {
+      if (newValue.image_url !== oldValue.image_url) {
+        this.drawPage(true);
+      }
+    },
   },
   mounted() {
     if (
@@ -297,7 +305,7 @@ export default {
     },
 
     onMouseDown(event) {
-      if (this.categorizeModalIsActive) return;
+      if (this.categorizeModalIsActive || this.editMode) return;
 
       this.closePopups();
 

package/src/components/DocumentPage/ScrollingPage.vue

@@ -1,8 +1,7 @@
 <template>
   <div>
-    <DocumentPage v-if="editMode" :page="page" />
     <DummyPage
-      v-else-if="!loadedPage || !pageInVisibleRange(page)"
+      v-if="!loadedPage || !pageInVisibleRange(page)"
       :width="page.size[0]"
       :height="page.size[1]"
     />
@@ -53,6 +52,9 @@ export default {
     ...mapGetters("document", ["scrollDocumentToAnnotation"]),
 
     loadedPage() {
+      if (this.editMode) {
+        return this.page;
+      }
       let loadedPage = null;
       if (this.page && this.pages) {
         loadedPage = this.pages.find((p) => p.number === this.page.number);

package/src/components/DocumentTopBar/DocumentName.vue

@@ -10,7 +10,7 @@
     </div>
     <span class="file-name-section">
       <span
-        :class="['document-name', isEditable ? 'is-editable' : '']"
+        :class="['document-name', isEditable && 'is-editable']"
         :contenteditable="isEditable"
         @input="handleInput"
         @paste="handlePaste"

package/src/components/DocumentTopBar/DocumentTopBar.vue

@@ -12,7 +12,7 @@
 
       <DocumentName :data-file-name="selectedDocument.data_file_name" />
 
-      <div class="right-bar-components">
+      <div v-if="!recalculatingAnnotations" class="right-bar-components">
         <div
           v-if="!editMode && (!publicView || !selectedDocument.is_reviewed)"
           class="keyboard-actions-info"

package/src/locales/de.json

@@ -113,5 +113,5 @@
   "error_creating_multi_ann": "Nicht alle Annotationen wurden erfolgreich erstellt.",
   "disabled_finish_review": "Der Abschluss der Dokumentenprüfung ist erst möglich, nachdem alle Annotationen überarbeitet wurden, unabhängig davon, ob sie akzeptiert oder abgelehnt wurden.",
   "no_multi_ann_labelset_model": "Es gibt keine verfügbaren Label Sets, die mehrfach in diesem Dokument zu finden sind. Weitere Informationen finden Sie unter <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>diesem Link</a>.",
-  "single_category_in_project": "Das aktuelle Projekt hat nur eine Kategorie, die diesem Dokument bereits zugeordnet ist. Um sie ändern zu können, sollte die neue zuerst dem Projekt hinzugefügt werden. Einzelheiten dazu finden Sie unter <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>diesem Link</a>."
+  "single_category_in_project": "Das aktuelle Projekt hat nur eine Kategorie. Um sie ändern zu können, sollte die neue zuerst dem Projekt hinzugefügt werden. Einzelheiten dazu finden Sie unter <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>diesem Link</a>."
 }

package/src/locales/en.json

@@ -113,5 +113,5 @@
   "error_creating_multi_ann": "Not all annotation sets were created successfully.",
   "disabled_finish_review": "Finishing the document review is only possible after all annotations have been revised, whether they are accepted or rejected.",
   "no_multi_ann_labelset_model": "There are no available label sets that can be found multiple times in this document. For more details, you can visit <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>this link</a>.",
-  "single_category_in_project": "The current project has only one category, which is already assigned to this document. To be able to change it, the new one should be first added to the project. For details on how to do this, visit <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>this link</a>."
+  "single_category_in_project": "The current project has only one category. To be able to change it, the new one should be first added to the project. For details on how to do this, visit <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>this link</a>."
 }

package/src/locales/es.json

@@ -112,5 +112,5 @@
   "error_creating_multi_ann": "No todos los grupos de anotaciones fueron creados de manera exitosa.",
   "disabled_finish_review": "Solo es posible finalizar la revisión del documento si todas las anotaciones han sido revisadas, ya sea aceptadas o rechazadas.",
   "no_multi_ann_labelset_model": "En este documento no hay grupos de etiquetas múltiples disponibles. Para más información, haz clic en <a href='https://help.konfuzio.com/tutorials/advanced-document-extraction/index.html#multiple-annotation-sets' target='_blank'>este enlace</a>.",
-  "single_category_in_project": "Este proyecto solo tiene una categoría, la cual se ha asignado a este documento. Para poder modificarla, es necesario agregar esta nueva categoría al proyecto. Para más información, visita <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>este enlace</a>."
+  "single_category_in_project": "Este proyecto solo tiene una categoría. Para poder modificarla, es necesario agregar esta nueva categoría al proyecto. Para más información, visita <a href='https://help.konfuzio.com/modules/categories/index.html#add-a-category' target='_blank'>este enlace</a>."
 }

package/src/store/category.js

@@ -32,6 +32,10 @@ const getters = {
     }
     return null;
   },
+
+  projectHasSingleCategory: (state) => () => {
+    return state.categories && state.categories.length === 1;
+  },
 };
 
 const actions = {

package/src/store/document.js

@@ -760,10 +760,16 @@ const actions = {
       HTTP.patch(`/documents/${state.documentId}/`, updatedDocument)
         .then((response) => {
           if (response.status === 200) {
-            commit("SET_SELECTED_DOCUMENT", response.data);
-            commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
+            if (updatedDocument.data_file_name) {
+              // if the only change was the file name, don't reload the page
+              // only update the file name for the selectedDocument
+              commit("UPDATE_FILE_NAME", response.data.data_file_name);
+            } else {
+              commit("SET_SELECTED_DOCUMENT", response.data);
+              commit("SET_FINISHED_REVIEW", getters.isDocumentReviewFinished());
 
-            dispatch("pollDocumentEndpoint");
+              dispatch("pollDocumentEndpoint");
+            }
 
             resolve(true);
           }
@@ -1125,6 +1131,9 @@ const mutations = {
   SET_CATEGORIZE_MODAL_IS_ACTIVE: (state, value) => {
     state.categorizeModalIsActive = value;
   },
+  UPDATE_FILE_NAME: (state, value) => {
+    state.selectedDocument.data_file_name = value;
+  },
 };
 
 export default {

package/src/store/edit.js

@@ -94,7 +94,7 @@ const actions = {
       if (direction === "left") {
         state.documentPagesListForEditMode.push({
           id: page.id,
-          page_number: page.number,
+          number: page.number,
           angle: -90,
           thumbnail_url: page.thumbnail_url,
           updated_at: page.updated_at,
@@ -104,7 +104,7 @@ const actions = {
       if (direction === "right") {
         state.documentPagesListForEditMode.push({
           id: page.id,
-          page_number: page.number,
+          number: page.number,
           angle: 90,
           thumbnail_url: page.thumbnail_url,
           updated_at: page.updated_at,