@konfuzio/document-validation-ui 0.1.5-styles-refactor → 0.1.6-pre-release-1

package/src/components/DocumentEdit/EditSidebar.vue

@@ -1,75 +1,104 @@
 <template>
   <div class="edit-sidebar">
-    <div class="sidebar-header">
-      <h3 class="sidebar-title">
-        {{ $t("edit_document") }}
-      </h3>
-      <p class="description">
-        {{ $t("edit_early_access") }}
-      </p>
-      <p class="description">
-        {{ $t("select_pages") }}
-      </p>
-    </div>
-
     <div class="buttons-container">
-      <div class="rotate-selected rotate">
+      <div class="rotate-selected edit-buttons">
+        <SidebarButtons
+          :show-rotate-button="true"
+          :button-disabled="buttonDisabled"
+          :button-text="$t('rotate_selected')"
+          :icon="'arrow-rotate-left'"
+          @rotate="rotateLeft"
+        />
+
+        <SidebarButtons
+          :show-rotate-button="true"
+          :button-disabled="buttonDisabled"
+          :button-text="$t('rotate_selected')"
+          :icon="'arrow-rotate-right'"
+          @rotate="rotateRight"
+        />
+
         <p :class="['pages-selected', buttonDisabled && 'disabled']">
           {{ selectedPages.length }} {{ $t("selected") }}
         </p>
-        <b-button
-          class="rotate-button primary-button"
-          :disabled="buttonDisabled"
-          @click="rotateLeft"
-        >
-          <div class="button-content">
-            <b-icon icon="arrow-rotate-left" class="is-small" />
-            <span class="button-text">{{ $t("rotate_selected") }}</span>
-          </div>
-        </b-button>
-        <b-button
-          class="rotate-button primary-button"
-          :disabled="buttonDisabled"
-          @click="rotateRight"
-        >
-          <div class="button-content">
-            <b-icon icon="arrow-rotate-right" class="is-small" />
-            <span class="button-text">{{ $t("rotate_selected") }}</span>
-          </div>
-        </b-button>
       </div>
 
-      <div class="rotate-all rotate">
-        <b-button class="rotate-button primary-button" @click="rotateAllLeft">
-          <b-icon icon="arrow-rotate-left" class="is-small" />
-          <span class="button-text">{{ $t("rotate_all") }}</span>
-        </b-button>
-        <b-button class="rotate-button primary-button" @click="rotateAllRight">
-          <b-icon icon="arrow-rotate-right" class="is-small" />
-          <span class="button-text">{{ $t("rotate_all") }}</span>
-        </b-button>
+      <div class="rotate-all edit-buttons">
+        <SidebarButtons
+          :show-rotate-button="true"
+          :button-disabled="false"
+          :button-text="$t('rotate_all')"
+          :icon="'arrow-rotate-left'"
+          @rotate="rotateAllLeft"
+        />
+
+        <SidebarButtons
+          :show-rotate-button="true"
+          :button-disabled="false"
+          :button-text="$t('rotate_all')"
+          :icon="'arrow-rotate-right'"
+          @rotate="rotateAllRight"
+        />
       </div>
     </div>
+    <div class="split smart-split">
+      <b-tooltip
+        multilined
+        :active="!documentHasProposedSplit(selectedDocument)"
+        position="is-bottom"
+        class="bottom-aligned"
+        :label="tooltipInfo"
+      >
+        <b-field>
+          <b-switch
+            :value="true"
+            size="is-small"
+            v-model="switchStatus"
+            :disabled="!documentHasProposedSplit(selectedDocument)"
+          >
+            <span class="switch-text">{{ $t("smart_split") }}</span>
+            <span
+              v-if="documentHasProposedSplit(selectedDocument)"
+              class="new-badge"
+              >{{ newText }}</span
+            >
+          </b-switch>
+        </b-field>
+      </b-tooltip>
+    </div>
   </div>
 </template>
 
 <script>
+import { mapState, mapGetters } from "vuex";
+import SidebarButtons from "./SidebarButtons";
+
 /**
  * This component renders buttons to rotate single pages or all pages
  * in edit mode
  * */
-
-import { mapState } from "vuex";
-
 export default {
   name: "EditSidebar",
+  components: {
+    SidebarButtons,
+  },
   data() {
     return {
       buttonDisabled: true,
+      tooltipInfo: null,
+      newText: this.$t("new"),
+      switchStatus: true,
     };
   },
+  props: {
+    splitSuggestionsEnabled: {
+      type: Boolean,
+    },
+  },
   computed: {
     ...mapState("edit", ["selectedPages"]),
+    ...mapState("document", ["splittingSuggestions", "selectedDocument"]),
+    ...mapGetters("document", ["documentHasProposedSplit"]),
   },
   watch: {
     selectedPages(newValue) {
@@ -79,6 +108,24 @@ export default {
         this.buttonDisabled = true;
       }
     },
+    switchStatus(newValue) {
+      if (this.splittingSuggestions && this.splittingSuggestions.length > 0)
+        this.$emit("handle-splitting-suggestions", newValue);
+    },
+    splitSuggestionsEnabled(newValue) {
+      if (!newValue) {
+        this.switchStatus = false;
+      }
+    },
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.switchStatus = this.splitSuggestionsEnabled;
+      this.tooltipInfo = this.$t("no_splitting_suggestions");
+      if (this.newText) {
+        this.newText = this.$t("new").toUpperCase();
+      }
+    });
   },
   methods: {
     rotateLeft() {

package/src/components/DocumentEdit/SidebarButtons.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="sidebar-buttons">
+    <!-- Rotate buttons -->
+    <div v-if="showRotateButton" class="rotate-button-container">
+      <b-button
+        class="rotate-button edit-mode-btn primary-button"
+        :disabled="buttonDisabled"
+        @click="rotateButton"
+      >
+        <div class="button-content">
+          <b-icon :icon="icon" class="is-small" />
+          <span class="button-text">{{ buttonText }}</span>
+        </div>
+      </b-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SidebarButtons",
+  props: {
+    showRotateButton: {
+      type: Boolean,
+      default: false,
+    },
+    buttonDisabled: {
+      type: Boolean,
+      default: true,
+    },
+    buttonText: {
+      type: String,
+      default: null,
+    },
+    icon: {
+      type: String,
+      default: null,
+    },
+    tooltipInfo: {
+      type: String,
+      default: null,
+    },
+  },
+
+  methods: {
+    rotateButton() {
+      this.$emit("rotate");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>

package/src/components/DocumentEdit/SplitInfoBar.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="split-info-bar">
+    <StarIcon />
+    <span> {{ $t("smart_split_suggestions") }}</span>
+  </div>
+</template>
+
+<script>
+import StarIcon from "../../assets/images/StarIcon";
+
+export default {
+  name: "SplitInfoBar",
+  components: {
+    StarIcon,
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>

package/src/components/DocumentEdit/SplitOverview.vue

@@ -112,7 +112,7 @@ export default {
   },
   computed: {
     ...mapState("document", ["selectedDocument", "pages"]),
-    ...mapState("edit", ["updatedDocument", "documentPagesListForEditMode"]),
+    ...mapState("edit", ["updatedDocument", "pagesForPostprocess"]),
   },
   methods: {
     handleBackButton() {
@@ -162,11 +162,11 @@ export default {
       return name.split(".").slice(0, -1).join(".");
     },
     getImageUrl(page) {
-      if (!this.documentPagesListForEditMode || !this.pages || !page) return;
+      if (!this.pagesForPostprocess || !this.pages || !page) return;
 
       // returns the first thumbnail in the pages array
       // for each new document
-      const image = this.documentPagesListForEditMode.find(
+      const image = this.pagesForPostprocess.find(
         (p) => p.number === page.pages[0].number
       );
 
@@ -174,8 +174,7 @@ export default {
     },
     getRotation(pageId) {
       // rotate page
-      return this.documentPagesListForEditMode?.find((p) => p.id === pageId)
-        ?.angle;
+      return this.pagesForPostprocess?.find((p) => p.id === pageId)?.angle;
     },
   },
 };

package/src/components/{DocumentError.vue → DocumentModals/DocumentErrorModal.vue}

@@ -29,11 +29,10 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
-import ErrorIcon from "../assets/images/ErrorIcon";
+import ErrorIcon from "../../assets/images/ErrorIcon";
 
 export default {
-  name: "DocumentError",
+  name: "DocumentErrorModal",
   components: {
     ErrorIcon,
   },
@@ -54,4 +53,4 @@ export default {
 };
 </script>
 
-<style scoped lang="scss" src="../assets/scss/document_error.scss"></style>
+<style scoped lang="scss" src="../../assets/scss/document_error.scss"></style>

package/src/components/{NotOptimizedViewportModal.vue → DocumentModals/NotOptimizedViewportModal.vue}

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import Illustration from "../assets/images/NotOptimizedIllustration";
+import Illustration from "../../assets/images/NotOptimizedIllustration";
 
 export default {
   name: "NotOptimizedViewportModal",
@@ -47,5 +47,5 @@ export default {
 <style
   scoped
   lang="scss"
-  src="../assets/scss/document_viewport_modal.scss"
+  src="../../assets/scss/document_viewport_modal.scss"
 ></style>

package/src/components/DocumentModals/SplittingSuggestionsModal.vue

@@ -0,0 +1,120 @@
+<template>
+  <section ref="splittingModal" class="splitting-confirmation-modal">
+    <b-modal
+      v-model="isModalActive"
+      class="modal-400"
+      :width="500"
+      :can-cancel="[]"
+    >
+      <section class="modal-card-body split-modal">
+        <div class="header">
+          <StarIcon />
+          <p class="modal-title">
+            {{
+              splittingSuggestions && splittingSuggestions.length > 0
+                ? $t("split_modal_title")
+                : $t("prepare_document")
+            }}
+          </p>
+        </div>
+        <div ref="bodyText" class="content"></div>
+      </section>
+      <footer class="modal-card-foot">
+        <b-button @click="closeModal">
+          {{ $t("do_it_later") }}
+        </b-button>
+        <b-button type="is-primary" @click="handleReviewNow">
+          {{ $t("review_now") }}
+          <span class="recommended">{{ recommended }}</span>
+        </b-button>
+      </footer>
+    </b-modal>
+  </section>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import StarIcon from "../../assets/images/StarIcon";
+
+/**
+ * This component shows a modal to inform the user about auto-splitting suggestions
+ */
+export default {
+  name: "SplittingSuggestionsModal",
+  components: {
+    StarIcon,
+  },
+  data() {
+    return {
+      isModalActive: false,
+      recommended: this.$t("recommended"),
+    };
+  },
+  computed: {
+    ...mapState("document", ["splittingSuggestions", "selectedDocument"]),
+    ...mapGetters("document", ["waitingForSplittingConfirmation"]),
+  },
+  watch: {
+    splittingSuggestions(newValue) {
+      if (newValue) {
+        this.isModalActive = true;
+      }
+    },
+    isModalActive(newValue) {
+      if (newValue) {
+        this.$nextTick(() => {
+          if (
+            this.splittingSuggestions &&
+            this.splittingSuggestions.length > 0
+          ) {
+            this.$refs.bodyText.innerHTML = this.$t("split_modal_body", {
+              number_of_split_documents: this.splittingSuggestions.length,
+            });
+          } else {
+            this.$refs.bodyText.innerHTML = this.$t(
+              "split_modal_no_suggestions"
+            );
+          }
+        });
+      }
+    },
+  },
+  mounted() {
+    if (this.splittingSuggestions) {
+      this.isModalActive = true;
+    }
+
+    this.$nextTick(() => {
+      if (this.recommended) {
+        this.recommended = this.recommended.toUpperCase();
+      }
+    });
+  },
+  methods: {
+    closeModal() {
+      const updatedDocument = [
+        {
+          name: this.selectedDocument.data_file_name,
+          category: this.selectedDocument.category,
+          pages: this.selectedDocument.pages,
+        },
+      ];
+
+      this.$store.dispatch("edit/editDocument", updatedDocument);
+
+      this.$store.dispatch("display/setCategorizeModalIsActive", false);
+      this.isModalActive = false;
+    },
+    handleReviewNow() {
+      this.$store.dispatch("edit/enableEditMode");
+      this.isModalActive = false;
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/splitting_confirmation_modal.scss"
+></style>

package/src/components/DocumentPage/ActionBar.vue

@@ -8,7 +8,7 @@
         {{ documentActionBar.text }}
       </div>
       <div v-if="documentActionBar.action" class="action-button">
-        <ActionButtons
+        <AnnotationActionButtons
           :save-btn="documentActionBar.action !== null"
           :is-loading="documentActionBar.loading"
           :action-bar="true"
@@ -21,14 +21,14 @@
 
 <script>
 import { mapState } from "vuex";
-import ActionButtons from "../DocumentAnnotations/ActionButtons";
+import AnnotationActionButtons from "../DocumentAnnotations/AnnotationActionButtons";
 import ActionIcon from "../../assets/images/ActionIcon";
 
 export default {
   name: "ActionBar",
   components: {
     ActionIcon,
-    ActionButtons,
+    AnnotationActionButtons,
   },
   computed: {
     ...mapState("display", ["documentActionBar"]),

package/src/components/DocumentPage/ScrollingDocument.vue

@@ -11,12 +11,12 @@
         "
       >
         <ScrollingPage
-          v-for="page in editMode ? documentPagesListForEditMode : pages"
+          v-for="page in editMode ? pagesForPostprocess : pages"
           :key="page.number"
-          ref="scrollingPage"
           :page="page"
           :client-height="clientHeight"
           :scroll-top="scrollTop"
+          ref="scrollingPage"
           class="scrolling-page"
           @page-jump="onPageJump"
         />
@@ -61,7 +61,11 @@ export default {
       "selectedDocument",
       "loading",
     ]),
-    ...mapState("edit", ["editMode", "documentPagesListForEditMode"]),
+    ...mapState("edit", [
+      "editMode",
+      "documentPagesListForEditMode",
+      "pagesForPostprocess",
+    ]),
     ...mapState("display", [
       "scale",
       "documentActionBar",

package/src/components/DocumentTopBar/DocumentTopBarButtons.vue

@@ -27,28 +27,47 @@
       v-if="!editMode && !selectedDocument.is_reviewed && !publicView"
       class="finish-review-button-container"
     >
-      <ActionButtons
-        :finish-review-btn="annotationSets && annotationSets.length > 0"
-        :finish-disabled="finishDisabled"
-        :is-loading="isLoading"
-        @finish-review="handleFinishReview"
-      />
+      <b-tooltip
+        :active="finishDisabled"
+        position="is-bottom"
+        multilined
+        class="right-aligned finish-review"
+      >
+        <b-button
+          :class="['finish-review-btn', 'text-btn', 'primary-button']"
+          type="is-primary"
+          :disabled="finishDisabled"
+          @click.stop="handleFinishReview"
+        >
+          <span v-if="!isLoading">
+            {{ $t("finish_review") }}
+          </span>
+
+          <div v-else>
+            <b-notification :closable="false" :class="['loading-background']">
+              <b-loading :active="isLoading" :is-full-page="loadingOnFullPage">
+                <b-icon
+                  icon="spinner"
+                  class="fa-spin loading-icon-size spinner"
+                />
+              </b-loading>
+            </b-notification>
+          </div>
+        </b-button>
+
+        <template #content> {{ $t("disabled_finish_review") }} </template>
+      </b-tooltip>
     </div>
   </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
-import ActionButtons from "../DocumentAnnotations/ActionButtons";
 
 export default {
   name: "DocumentTopBarButtons",
-  components: {
-    ActionButtons,
-  },
   data() {
     return {
-      finishReviewBtn: true,
       finishDisabled: true,
       emptyLabels: null,
       isLoading: false,
@@ -83,7 +102,6 @@ export default {
     this.finishDisabled = !this.finishedReview;
   },
   methods: {
-    /** EDIT MODE */
     closeEditMode() {
       this.$store.dispatch("edit/disableEditMode");
       this.$store.dispatch("edit/setSplitOverview", false);
@@ -105,24 +123,11 @@ export default {
         // Enable the "next" button to go to the overview
         this.$store.dispatch("edit/setSplitOverview", true);
         this.$store.dispatch("edit/setSelectedPages", null);
-      }
-
-      // If we are in the overview (so more than 1 doc)
-      // or in the edit mode (only 1 doc)
-      else if (this.updatedDocument) {
-        // Send update request to the backend
-        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"),
-            });
-          });
-
-        // Close edit mode
-        this.closeEditMode();
+      } 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
+        this.$store.dispatch("edit/setShowEditConfirmationModal", true);
       }
     },
     handleFinishReview() {

package/src/components/DocumentTopBar/KeyboardActionsDescription.vue

@@ -38,7 +38,9 @@
 
               <div class="action-item">
                 <div class="key">{{ "DELETE" }}</div>
-                <div class="keyboard-action-text">{{ $t("delete_key") }}</div>
+                <div class="keyboard-action-text">
+                  {{ $t("missing_annotation") }}
+                </div>
               </div>
             </div>
           </div>

package/src/locales/de.json

@@ -49,8 +49,7 @@
   "data_being_extracted": "Neue Daten werden extrahiert",
   "analysing_document": "Wir analysieren Ihr Dokument.",
   "few_minutes": "Dies könnte ein paar Minuten dauern.",
-  "reject_label": "Ablehnen",
-  "rejected": "Abgelehnt",
+  "missing_annotation": "Als fehlend markieren",
   "ann_exists": "Eine Annotation für dieses Label und Label-Set existiert bereits.",
   "lite_mode": "Schreibgeschützt",
   "limited_functionalities": "Sie verwenden die schreibgeschützte Version mit begrenzten Funktionalitäten.",
@@ -88,14 +87,13 @@
   "categorize_document_no_category_description": "Bitten Sie den Projektmanager, eine Beschreibung dieser Kategorie hinzuzufügen, um mehr über diese Kategorie zu erfahren.",
   "annotations_pending": "Ausstehende Annotationen",
   "annotations_accepted": "Akzeptierte Annotationen",
-  "reject_all_empty": "Alle fehlenden Annotationen ablehnen",
+  "mark_all_missing": "Alle leeren als fehlend markieren",
   "no_labels_to_choose": "Keine Labels",
   "accept_group": "Alle akzeptieren",
   "use_your_keyboard": "Benutze deine Tastatur",
   "arrow_keys": "Navigieren",
   "esc_key": "Exit",
   "enter_key": "Akzeptieren oder Speichern",
-  "delete_key": "Ablehnen",
   "decline": "Decline",
   "server_error": "Wir haben derzeit ein Serverproblem. Bitte versuchen Sie es später noch einmal oder",
   "get_support": "Hole dir Unterstützung",
@@ -110,8 +108,23 @@
   "new_multi_ann_description": "Wählen Sie ein Datenmodell aus den vorhandenen aus und deaktivieren Sie dann die Labels, die in diesem Dokument nicht vorhanden sind.",
   "drag_drop_columns_multi_ann": "Drag and Drop, um die Reihenfolge der Labels zu ändern",
   "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. 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>.",
-  "approved_annotations": "Die Kategorie kann nicht geändert werden, da bereits akzeptierte Annotationen oder manuell erstellte Annotationen zu diesem Dokument vorhanden sind."
+  "approved_annotations": "Die Kategorie kann nicht geändert werden, da bereits akzeptierte Annotationen oder manuell erstellte Annotationen zu diesem Dokument vorhanden sind.",
+  "restore": "Restore",
+  "disabled_finish_review": "Das Beenden der Dokumentenprüfung ist erst möglich, nachdem alle Annotationen überarbeitet wurden, unabhängig davon, ob sie akzeptiert oder als fehlend markiert wurden.",
+  "split_modal_title": "Dokument aufteilen",
+  "split_modal_body": "Wir haben Ihre Datei gescannt und <strong>{number_of_split_documents}</strong> verschiedene Dokumente gefunde. <strong>Wir empfehlen dringend,</strong> sie zu diesem Zeitpunkt aufzuteilen, da sonst alle Fortschritte, die Sie gemacht haben, aufgrund der erneuten Extraktion der Dokumentdaten verloren gehen.",
+  "do_it_later": "Ich werde es später machen",
+  "review_now": "Jetzt reviewen",
+  "recommended": "Empfohlen",
+  "smart_split": "Smart Split",
+  "smart_split_suggestions": "Unsere Smart Split-Vorschläge sind grün hervorgehoben",
+  "no_splitting_suggestions": "Dieses Dokument enthält keine Split-Vorschläge",
+  "confirm_splitting": "Sind Sie sicher, dass Sie die Änderungen bestätigen möchten?",
+  "splitting_warning": "Beachten Sie bitte, dass alle Annotationen, die Sie in diesem Dokument gemacht haben, nicht gespeichert werden, wenn Sie fortfahren.",
+  "no": "Nein",
+  "yes": "Ja",
+  "split_modal_no_suggestions": "Do you need to split the document? <strong>We strongly recommend</strong> splitting it at this stage, otherwise all the progress you’ve made will be lost in the future.",
+  "missing_from_document": "Fehlt im Dokument"
 }