@konfuzio/document-validation-ui 0.1.5-styles-refactor → 0.1.6-multi-ann-set

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
+            v-model="switchStatus"
+            :value="true"
+            size="is-small"
+            :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,
+  },
+  props: {
+    splitSuggestionsEnabled: {
+      type: Boolean,
+    },
+  },
   data() {
     return {
       buttonDisabled: true,
+      tooltipInfo: null,
+      newText: this.$t("new"),
+      switchStatus: true,
     };
   },
   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/AnnSetTableOptions.vue

@@ -0,0 +1,107 @@
+<template>
+  <div
+    class="ann-set-table-header"
+    :style="{ left: `${coordinates.x}px`, top: `${coordinates.y}px` }"
+  >
+    <b-dropdown
+      aria-role="list"
+      class="ann-set-table-header-dropdown"
+      position="is-top-right"
+    >
+      <template #trigger>
+        <span class="ann-set-label-set-name">{{ labelSetName }}</span>
+        <SettingsIcon />
+      </template>
+      <b-dropdown-item
+        aria-role="listitem"
+        class="delete-action"
+        @click="handleDelete()"
+      >
+        <span>{{ $t("delete_table") }}</span></b-dropdown-item
+      >
+    </b-dropdown>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import SettingsIcon from "../../assets/images/SettingsIcon";
+
+export default {
+  name: "AnnSetTableOptions",
+  components: {
+    SettingsIcon,
+  },
+  props: {
+    page: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters("document", [
+      "annotationSetsInTable",
+      "annotationsInAnnotationsSets",
+    ]),
+    ...mapGetters("display", ["bboxToPoint"]),
+    ...mapState("display", ["showAnnSetTable"]),
+    labelSetName() {
+      return this.showAnnSetTable[0].label_set.name;
+    },
+    coordinates() {
+      let x = 0;
+      let y = 0;
+      const paddingTop = 55;
+
+      this.showAnnSetTable.forEach((annotationSet) => {
+        if (
+          annotationSet.labels &&
+          annotationSet.labels.length > 0 &&
+          annotationSet.labels[0].annotations
+        ) {
+          annotationSet.labels[0].annotations.forEach((annotation) => {
+            annotation.span.forEach((span) => {
+              if (x === 0 || span.x0 < x) {
+                x = span.x0;
+              }
+              if (y === 0 || span.y0 < y) {
+                y = span.y0 + paddingTop;
+              }
+            });
+          });
+        }
+      });
+      return this.bboxToPoint(this.page, { x, y });
+    },
+  },
+  methods: {
+    handleDelete() {
+      const annotationsToDelete = this.annotationsInAnnotationsSets(
+        this.showAnnSetTable
+      );
+
+      for (let i = 0; i < annotationsToDelete.length; i++) {
+        const annotationToDelete = annotationsToDelete[i];
+        this.$store
+          .dispatch("document/deleteAnnotation", {
+            annotationId: annotationToDelete.id,
+          })
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("edit_error"),
+            });
+          });
+      }
+      this.$store.dispatch("display/showAnnSetTable", null);
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/ann_set_table_options.scss"
+></style>

package/src/components/DocumentPage/DocumentPage.vue

@@ -23,6 +23,8 @@
       @close="closePopups"
     />
 
+    <AnnSetTableOptions v-if="showAnnSetTable" :page="page" />
+
     <v-stage
       v-if="image && scale"
       ref="stage"
@@ -70,7 +72,13 @@
           </template>
         </template>
       </v-layer>
-      <v-layer v-if="showFocusedAnnotation && !isSelecting">
+      <v-layer
+        v-if="
+          showFocusedAnnotation &&
+          !isSelecting &&
+          documentAnnotationSelected.labelName !== ''
+        "
+      >
         <v-label
           :key="`label${documentAnnotationSelected.id}`"
           :config="{
@@ -125,6 +133,7 @@ import BoxSelection from "./BoxSelection";
 import MultiAnnSelection from "./MultiAnnSelection";
 import NewAnnotation from "./NewAnnotation";
 import MultiAnnotationTablePopup from "./MultiAnnotationTablePopup";
+import AnnSetTableOptions from "./AnnSetTableOptions";
 
 export default {
   name: "DocumentPage",
@@ -133,6 +142,7 @@ export default {
     MultiAnnSelection,
     NewAnnotation,
     MultiAnnotationTablePopup,
+    AnnSetTableOptions,
   },
 
   props: {
@@ -151,7 +161,7 @@ export default {
   },
 
   computed: {
-    ...mapState("display", ["currentPage"]),
+    ...mapState("display", ["currentPage", "showAnnSetTable"]),
 
     showFocusedAnnotation() {
       return (