@konfuzio/document-validation-ui 0.1.13-dev.4 → 0.1.13

package/package.json

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

package/src/assets/scss/document_annotations.scss

@@ -99,245 +99,261 @@
           line-height: 20px;
         }
       }
-    }
-
-    .labels {
-      .label {
-        .label-group {
-          display: flex;
-          flex-direction: row;
-          justify-content: space-between;
-          align-items: center;
-          border-bottom: 1px solid $grey-lightest;
-          min-height: 44px;
-          cursor: pointer;
 
-          .label-group-left {
+      .labels {
+        .label {
+          .label-group {
             display: flex;
             flex-direction: row;
-            padding-left: 28px;
-            color: $text-lighter;
+            justify-content: space-between;
             align-items: center;
+            border-bottom: 1px solid $grey-lightest;
+            min-height: 44px;
+            cursor: pointer;
 
-            .label-name {
-              padding-left: 20px;
-            }
-          }
-
-          .label-group-right {
-            display: flex;
-            flex-direction: row;
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 20px;
-            padding-right: 16px;
-            cursor: default;
-
-            .label-annotations-pending {
-              padding: 0px 8px;
-              border-radius: 20px;
-              background: $grey-lighter-low-opacity;
+            .label-group-left {
+              display: flex;
+              flex-direction: row;
+              padding-left: 28px;
               color: $text-lighter;
-              margin-right: 4px;
-            }
+              align-items: center;
 
-            .label-annotations-accepted {
-              padding: 0px 8px;
-              border-radius: 20px;
-              background: $green-low-opacity;
-              color: $green;
+              .label-name {
+                padding-left: 20px;
+              }
             }
-          }
-        }
 
-        .label-group-annotation-list {
-          background-color: $grey-hover;
+            .label-group-right {
+              display: flex;
+              flex-direction: row;
+              font-weight: 400;
+              font-size: 14px;
+              line-height: 20px;
+              padding-right: 16px;
+              cursor: default;
+
+              .label-annotations-pending {
+                padding: 0px 8px;
+                border-radius: 20px;
+                background: $grey-lighter-low-opacity;
+                color: $text-lighter;
+                margin-right: 4px;
+              }
 
-          .annotation-row {
-            padding-left: 16px;
+              .label-annotations-accepted {
+                padding: 0px 8px;
+                border-radius: 20px;
+                background: $green-low-opacity;
+                color: $green;
+              }
+            }
           }
-        }
-
-        .label-name {
-          color: $text-lighter;
-          word-break: break-word;
-          font-size: 14px;
-          line-height: 20px;
-          font-weight: 400;
-        }
 
-        .annotation-row {
-          width: 100%;
-          border-bottom: 1px solid $grey-lightest;
-          transition: background-color 0.2s ease-out;
-          display: flex;
-          align-items: center;
-          padding-right: 5px;
-
-          .annotation-row-left {
-            flex: 1;
-            padding-left: 8px;
-            display: flex;
-            align-items: center;
+          .label-group-annotation-list {
+            background-color: $grey-hover;
 
-            .annotation-icon {
-              height: 40px;
-              padding: 0 15px;
+            .annotation-row {
+              padding-left: 16px;
             }
+          }
 
-            .label-name {
-              padding: 10px 0;
-              padding-right: 4px;
-            }
+          .label-name {
+            color: $text-lighter;
+            word-break: break-word;
+            font-size: 14px;
+            line-height: 20px;
+            font-weight: 400;
           }
 
-          .annotation-row-right {
-            width: 60%;
+          .annotation-row {
+            width: 100%;
+            border-bottom: 1px solid $grey-lightest;
+            transition: background-color 0.2s ease-out;
             display: flex;
             align-items: center;
+            padding-right: 5px;
 
-            .notification {
-              background-color: transparent;
-            }
-
-            .annotation-content {
-              width: 100%;
-              font-size: 14px;
-              line-height: 20px;
-              font-weight: 400;
-
-              .annotation,
-              .empty-annotation {
-                min-height: 36px;
-                display: flex;
-                align-items: center;
-              }
-
-              .loading-container {
-                height: 20px;
-                display: flex;
-                align-items: center;
+            .annotation-row-left {
+              flex: 1;
+              padding-left: 8px;
+              display: flex;
+              align-items: center;
 
-                .loading-icon-size {
-                  width: 13px;
-                  height: 13px;
-                }
+              .annotation-icon {
+                height: 40px;
+                padding: 0 15px;
               }
 
-              .spinner {
-                color: $grey;
+              .label-name {
+                padding: 10px 0;
+                padding-right: 4px;
               }
             }
 
-            .buttons-container {
+            .annotation-row-right {
+              width: 60%;
               display: flex;
-              gap: 8px;
-            }
+              align-items: center;
 
-            .annotation-value {
-              display: inline-block;
-              color: $text;
-              padding: 0 8px;
-              border: none;
-              background-color: transparent;
-              inline-size: 100%;
-              overflow-wrap: break-word;
-              word-break: break-all;
-
-              &:focus {
-                outline: none;
+              .notification {
+                background-color: transparent;
               }
 
-              &.label-empty {
-                font-weight: 500;
+              .annotation-content {
+                width: 100%;
                 font-size: 14px;
-                color: $primary;
+                line-height: 20px;
+                font-weight: 400;
+
+                .annotation,
+                .empty-annotation {
+                  min-height: 36px;
+                  display: flex;
+                  align-items: center;
+                }
+
+                .loading-container {
+                  height: 20px;
+                  display: flex;
+                  align-items: center;
+
+                  .loading-icon-size {
+                    width: 13px;
+                    height: 13px;
+                  }
+                }
 
-                &.clicked-ann {
-                  font-weight: 400;
-                  color: $text-lighter;
+                .spinner {
+                  color: $grey;
                 }
               }
-            }
-          }
 
-          .empty-annotation {
-            display: flex;
-            width: 100%;
-            justify-content: space-between;
-          }
+              .buttons-container {
+                display: flex;
+                gap: 8px;
+              }
 
-          &:hover,
-          &.selected {
-            background-color: $grey-lightest;
-          }
+              .annotation-value {
+                display: inline-block;
+                color: $text;
+                padding: 0 8px;
+                border: none;
+                background-color: transparent;
+                inline-size: 100%;
+                overflow-wrap: break-word;
+                word-break: break-all;
+
+                &:focus {
+                  outline: none;
+                }
 
-          &.hovered-empty-labels {
-            background-color: $grey-lightest;
-            border-bottom-color: $grey-detail;
-          }
+                &.label-empty {
+                  font-weight: 500;
+                  font-size: 14px;
+                  color: $primary;
 
-          &.hovered-pending-annotations {
-            position: relative;
-            border-bottom-color: $primary;
+                  &.clicked-ann {
+                    font-weight: 400;
+                    color: $text-lighter;
+                  }
+                }
+              }
+            }
 
-            &:before {
-              display: block;
-              content: "";
+            .empty-annotation {
+              display: flex;
               width: 100%;
-              height: 100%;
-              background: $primary;
-              opacity: 0.1;
-              position: absolute;
-              top: 0;
-              left: 0;
+              justify-content: space-between;
             }
-          }
 
-          &.editing {
-            background-color: $background;
-            border-bottom: 1px solid $primary;
-          }
+            &:hover,
+            &.selected {
+              background-color: $grey-lightest;
+            }
 
-          .not-found-text {
-            color: $grey;
-            opacity: 0.3;
-          }
+            &.hovered-empty-labels {
+              background-color: $grey-lightest;
+              border-bottom-color: $grey-detail;
+            }
 
-          .saving-changes {
-            color: $grey;
-          }
+            &.hovered-pending-annotations {
+              position: relative;
+              border-bottom-color: $primary;
+
+              &:before {
+                display: block;
+                content: "";
+                width: 100%;
+                height: 100%;
+                background: $primary;
+                opacity: 0.1;
+                position: absolute;
+                top: 0;
+                left: 0;
+              }
+            }
 
-          .error-editing {
-            color: $red;
-            animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
-            transform: translate3d(0, 0, 0);
-          }
+            &.editing {
+              background-color: $background;
+              border-bottom: 1px solid $primary;
+            }
 
-          @keyframes shake {
-            10%,
-            90% {
-              transform: translate3d(-1px, 0, 0);
+            .not-found-text {
+              color: $grey;
+              opacity: 0.3;
             }
 
-            20%,
-            80% {
-              transform: translate3d(2px, 0, 0);
+            .saving-changes {
+              color: $grey;
             }
 
-            30%,
-            50%,
-            70% {
-              transform: translate3d(-4px, 0, 0);
+            .error-editing {
+              color: $red;
+              animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+              transform: translate3d(0, 0, 0);
             }
 
-            40%,
-            60% {
-              transform: translate3d(4px, 0, 0);
+            @keyframes shake {
+              10%,
+              90% {
+                transform: translate3d(-1px, 0, 0);
+              }
+
+              20%,
+              80% {
+                transform: translate3d(2px, 0, 0);
+              }
+
+              30%,
+              50%,
+              70% {
+                transform: translate3d(-4px, 0, 0);
+              }
+
+              40%,
+              60% {
+                transform: translate3d(4px, 0, 0);
+              }
             }
           }
         }
       }
+
+      .no-labels {
+        display: flex;
+        gap: 5px;
+        padding-left: 28px;
+        color: $text-lighter;
+        font-size: 14px;
+        line-height: 20px;
+        min-height: 44px;
+
+        a {
+          color: $white;
+          text-decoration: underline;
+          font-weight: 500;
+        }
+      }
     }
   }
 

package/src/assets/scss/theme.scss

@@ -508,6 +508,7 @@
   .b-tooltip {
     height: 100%;
     align-items: center;
+
     .tooltip-content {
       background-color: $text-color !important;
 
@@ -785,4 +786,16 @@
       }
     }
   }
+
+  .no-labels {
+    a {
+      color: (var(--primary-color));
+      text-decoration: underline;
+      font-weight: 500;
+
+      &:hover {
+        filter: brightness(0.8) contrast(160%) grayscale(0.4);
+      }
+    }
+  }
 }

package/src/components/DocumentAnnotations/AnnotationDetails.vue

@@ -84,7 +84,7 @@
             >{{ Math.floor(confidence(annotation) * 100) / 100 }}</span
           >
         </div>
-        <div v-if="!publicView" class="revision">
+        <div class="revision" v-if="!publicView">
           <div class="detail-icons">
             <div v-if="created(annotation) || edited(annotation)">
               <div

package/src/components/DocumentAnnotations/DocumentAnnotations.vue

@@ -54,7 +54,10 @@
               )}`
             }}
           </div>
-          <div class="labelset-action-buttons">
+          <div
+            class="labelset-action-buttons"
+            v-if="annotationSet.labels.length !== 0"
+          >
             <AnnotationSetActionButtons
               :number-of-empty-labels-in-annotation-set="
                 emptyLabelsLength(annotationSet)
@@ -82,19 +85,33 @@
           </div>
         </div>
 
-        <div v-for="label in annotationSet.labels" :key="label.id">
-          <div
-            v-if="!(label.annotations.length === 0 && publicView)"
-            class="labels"
-          >
-            <DocumentLabel
-              :label="label"
-              :annotation-set="annotationSet"
-              :index-group="indexGroup"
-              @handle-missing-annotation="markAnnotationsAsMissing"
-            />
+        <div v-if="annotationSet.labels.length > 0">
+          <div v-for="label in annotationSet.labels" :key="label.id">
+            <div
+              v-if="!(label.annotations.length === 0 && publicView)"
+              class="labels"
+            >
+              <DocumentLabel
+                :label="label"
+                :annotation-set="annotationSet"
+                :index-group="indexGroup"
+                @handle-missing-annotation="markAnnotationsAsMissing"
+              />
+            </div>
           </div>
         </div>
+
+        <div v-if="annotationSet.labels.length === 0" class="no-labels">
+          <span> {{ $t("no_labels_in_set") }}</span>
+          <span v-if="!publicView" v-html="$t('link_to_add_labels')"></span>
+        </div>
+
+        <div
+          v-else-if="!annotationSetHasAnnotations(annotationSet) && publicView"
+          class="no-labels"
+        >
+          <span> {{ $t("no_annotations_in_annotation_set") }}</span>
+        </div>
       </div>
     </div>
   </div>
@@ -175,6 +192,14 @@ export default {
     window.removeEventListener("keydown", this.keyDownHandler);
   },
   methods: {
+    annotationSetHasAnnotations(annotationSet) {
+      const found = annotationSet.labels.find(
+        (label) => label.annotations.length > 0
+      );
+
+      return found;
+    },
+
     focusOnNextAnnotation() {
       const annotations = this.createArray("keyboard-nav");
 

package/src/components/DocumentAnnotations/DocumentLabel.vue

@@ -15,14 +15,14 @@
           </div>
         </div>
         <div class="label-group-right">
-          <div v-if="!publicView" class="label-annotations-pending">
+          <div class="label-annotations-pending" v-if="!publicView">
             {{
               `${
                 label.annotations.length - acceptedAnnotationsGroupCounter
               } ${$t("annotations_pending")}`
             }}
           </div>
-          <div v-if="!publicView" class="label-annotations-accepted">
+          <div class="label-annotations-accepted" v-if="!publicView">
             {{
               `${acceptedAnnotationsGroupCounter} ${$t("annotations_accepted")}`
             }}

package/src/components/DocumentAnnotations/ExtractingData.vue

@@ -9,21 +9,33 @@
     </div>
     <div class="data-extraction-text">
       <p class="title">
-        {{ $t("data_being_extracted") }}
+        <span v-if="redirectingUser"> {{ $t("wait_title") }}</span>
+        <span v-else>
+          {{ $t("data_being_extracted") }}
+        </span>
       </p>
       <div class="description">
-        <p>{{ $t("analysing_document") }}</p>
-        <p>{{ $t("few_minutes") }}</p>
+        <span v-if="redirectingUser">
+          <p>{{ $t("redirecting_to_documents_list") }}</p>
+        </span>
+        <span v-else>
+          <p>{{ $t("analysing_document") }}</p>
+          <p>{{ $t("few_minutes") }}</p>
+        </span>
       </div>
     </div>
   </div>
 </template>
 <script>
+import { mapState } from "vuex";
 import AnnotationActionButtons from "./AnnotationActionButtons";
 
 export default {
   name: "ExtractingData",
   components: { AnnotationActionButtons },
+  computed: {
+    ...mapState("edit", ["redirectingUser"]),
+  },
 };
 </script>
 <style scoped lang="scss" src="../../assets/scss/extracting_data.scss"></style>

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -390,11 +390,15 @@ export default {
             });
           });
 
-        navigateToDocumentsList(
+        const redirection = navigateToDocumentsList(
           this.documentsListPath,
           this.projectId,
           this.currentUser.id
         );
+
+        if (redirection) {
+          this.$store.dispatch("edit/setRedirectingUser", true);
+        }
       } else {
         // Check if only the category and/or name changes:
         const newCategory = this.updatedDocument[0].category;

package/src/components/DocumentModals/DocumentErrorModal.vue

@@ -3,7 +3,7 @@
     <b-modal
       v-model="isModalActive"
       :width="400"
-      can-cancel="['x']"
+      :can-cancel="['x']"
       :on-cancel="closeModal"
     >
       <section class="modal-card-body">

package/src/locales/de.json

@@ -135,5 +135,10 @@
   "delete_table": "Tabelle löschen",
   "error_downloading_file": "Die Datei konnte nicht heruntergeladen werden.",
   "original_file": "Originaldatei",
-  "pdf_file": "PDF Datei"
+  "pdf_file": "PDF Datei",
+  "no_labels_in_set": "Dieser Annotationssatz hat keine Beschriftungen.",
+  "link_to_add_labels": "Sehen Sie <a href='https://help.konfuzio.com/modules/labels/index.html#add-a-label' target='_blank'>hier</a>, wie Sie sie hinzufügen.",
+  "no_annotations_in_annotation_set": "Dieser Annotationssatz enthält keine extrahierten Annotationen für die jeweiligen Beschriftungen.",
+  "wait_title": "Bitte warten...",
+  "redirecting_to_documents_list": "Wir führen Sie zur Dokumentenliste, sodass Sie Ihre Dokumente weiter überprüfen können, während wir die vorgenommenen Änderungen verarbeiten."
 }

package/src/locales/en.json

@@ -135,5 +135,10 @@
   "delete_table": "Delete table",
   "error_downloading_file": "The file could not be downloaded.",
   "original_file": "Original file",
-  "pdf_file": "PDF file"
+  "pdf_file": "PDF file",
+  "no_labels_in_set": "This annotation set has no labels.",
+  "link_to_add_labels": "See how to add them <a href='https://help.konfuzio.com/modules/labels/index.html#add-a-label' target='_blank'>here</a>.",
+  "no_annotations_in_annotation_set": "This annotation set has no annotations extracted for its respective labels.",
+  "wait_title": "Please wait...",
+  "redirecting_to_documents_list": "We are taking you to the documents list, so you can continue reviewing your documents while we process the changes made."
 }