@konfuzio/document-validation-ui 0.1.14 → 0.1.16-dev.0

package/src/components/DocumentEdit/EditPageThumbnail.vue

@@ -0,0 +1,114 @@
+<template>
+  <div
+    class="edit-page-thumbnail"
+    :tabindex="index"
+    @mouseenter="isHover = true"
+    @mouseleave="isHover = false"
+  >
+    <div
+      :class="[
+        'page-thumbnail',
+        isVisible && 'visible',
+        checkboxValue && 'selected',
+      ]"
+      :style="`rotate:${rotation}deg`"
+      @click="selectPage()"
+    >
+      <ServerImage :image-url="`${page.thumbnail_url}?${page.updated_at}`">
+        <b-skeleton width="80px" height="80px" />
+      </ServerImage>
+
+      <div v-if="isVisible" class="action-icon">
+        <EyeIcon />
+      </div>
+    </div>
+    <b-checkbox
+      v-show="isHover || checkboxValue"
+      v-model="checkboxValue"
+      class="action-checkbox"
+      @input="checkboxInput"
+    />
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import ServerImage from "../../assets/images/ServerImage";
+import EyeIcon from "../../assets/images/EyeIcon";
+
+export default {
+  name: "EditPageThumbnail",
+  components: {
+    ServerImage,
+    EyeIcon,
+  },
+  props: {
+    page: {
+      required: true,
+      type: Object,
+      default: null,
+    },
+    index: {
+      required: true,
+      type: Number,
+      default: 0,
+    },
+    rotation: {
+      required: false,
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      isHover: false,
+      checkboxValue: false,
+    };
+  },
+  computed: {
+    ...mapState("display", ["currentPage"]),
+    ...mapState("edit", ["selectedPages"]),
+    ...mapGetters("edit", ["isPageSelected"]),
+    isVisible() {
+      return this.currentPage === this.page.number;
+    },
+    isSelected() {
+      return this.isPageSelected(this.page.id) !== undefined;
+    },
+  },
+  watch: {
+    isSelected() {
+      this.checkboxValue = this.isSelected;
+    },
+  },
+  mounted() {
+    this.checkboxValue = this.isSelected;
+  },
+  methods: {
+    selectPage(value = !this.isSelected) {
+      this.changePage();
+      this.$store.dispatch(
+        value ? "edit/selectPage" : "edit/unselectPage",
+        this.page
+      );
+    },
+    checkboxInput(value) {
+      this.selectPage(value);
+    },
+    changePage() {
+      if (!this.isVisible) {
+        this.$store.dispatch(
+          "display/updateCurrentPage",
+          parseInt(this.page.number, 10)
+        );
+      }
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/edit_page_thumbnail.scss"
+></style>

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"
@@ -13,62 +16,49 @@
         :key="page.id"
         class="image-section"
         tabindex="0"
-        @focusout="clickOutside"
       >
-        <div
-          class="image-container"
-          :tabindex="index"
-          @click="selectPage(page)"
-        >
-          <div class="thumbnail">
+        <div class="top-section">
+          <EditPageThumbnail
+            :page="page"
+            :index="index"
+            :rotation="getRotation(page.id)"
+          />
+          <div
+            :class="[
+              'splitting-lines',
+              splittingLines &&
+                splittingLines[index].page === page.number &&
+                'active-split',
+            ]"
+            @click="handleSplittingLines(page.number, 'manual')"
+          >
+            <div class="scissors-icon">
+              <b-icon icon="scissors" class="is-small" />
+            </div>
             <div
-              :class="[
-                'img-container',
-                selected && isPageSelected(page.id) === page.id && 'selected',
-              ]"
+              v-if="
+                splittingLines && splittingLines[index].page === page.number
+              "
+              class="lines"
             >
-              <ServerImage
-                class="img-thumbnail"
-                :image-url="`${page.thumbnail_url}?${page.updated_at}`"
-                :style="{
-                  transform: 'rotate(' + getRotation(page.id) + 'deg)',
-                }"
-              >
-                <b-skeleton width="57px" height="57px" />
-              </ServerImage>
+              <SplitZigZag
+                :color="
+                  splittingLines &&
+                  splittingLines[index].origin &&
+                  splittingLines[index].origin === 'AI' &&
+                  splitSuggestionsEnabled
+                    ? 'green'
+                    : 'dark'
+                "
+              />
             </div>
-            <div class="icon-container">
-              <div class="action-icon">
-                <EyeIcon />
-              </div>
+            <div v-else class="lines">
+              <SplitLines />
             </div>
           </div>
-          <span class="page-number">{{ page.number }}</span>
         </div>
-        <div
-          :class="[
-            'splitting-lines',
-            activeSplittingLines &&
-              activeSplittingLines[index] === page.number &&
-              'active-split',
-          ]"
-          @click="handleSplittingLines(page)"
-        >
-          <div class="scissors-icon">
-            <b-icon icon="scissors" class="is-small" />
-          </div>
-          <div
-            v-if="
-              activeSplittingLines &&
-              activeSplittingLines[index] === page.number
-            "
-            class="lines"
-          >
-            <SplitZigZag />
-          </div>
-          <div v-else class="lines">
-            <SplitLines />
-          </div>
+        <div class="bottom-section">
+          <span class="page-number">{{ page.number }}</span>
         </div>
       </div>
     </draggable>
@@ -82,112 +72,79 @@
  */
 
 import { mapState } from "vuex";
-import ServerImage from "../../assets/images/ServerImage";
 import SplitLines from "../../assets/images/SplitLines";
 import SplitZigZag from "../../assets/images/SplitZigZag";
-import EyeIcon from "../../assets/images/EyeIcon";
+import EditPageThumbnail from "./EditPageThumbnail";
+
 import draggable from "vuedraggable";
 
 export default {
   name: "EditPages",
   components: {
-    ServerImage,
     SplitLines,
     SplitZigZag,
-    EyeIcon,
+    EditPageThumbnail,
     draggable,
   },
   props: {
-    activeSplittingLines: {
+    splittingLines: {
       type: Array,
+      default: null,
+    },
+    splitSuggestionsEnabled: {
+      type: Boolean,
+      default: false,
     },
   },
   data() {
     return {
       editPages: null,
-      selected: null,
     };
   },
+
   computed: {
     ...mapState("document", [
       "pages",
       "recalculatingAnnotations",
       "selectedDocument",
+      "splittingSuggestions",
     ]),
     ...mapState("edit", [
       "editMode",
-      "documentPagesListForEditMode",
-      "splitOverview",
-      "selectedPages",
-      "splitOverview",
+      "pagesForPostprocess",
+      "renameAndCategorize",
     ]),
   },
   watch: {
-    documentPagesListForEditMode(newValue, oldValue) {
+    pagesForPostprocess(newValue, oldValue) {
       if (newValue !== oldValue) {
         this.editPages = newValue;
       }
     },
     editPages(newValue, oldValue) {
       if (newValue !== oldValue) {
-        this.$store.dispatch("edit/setDocumentPagesListForEditMode", newValue);
+        this.$store.dispatch("edit/setPagesForPostprocess", newValue);
       }
     },
-    splitOverview(newValue) {
+    renameAndCategorize(newValue) {
       if (newValue) {
-        this.editPages = this.documentPagesListForEditMode;
+        this.editPages = this.pagesForPostprocess;
       }
     },
   },
   mounted() {
-    this.editPages = this.documentPagesListForEditMode;
+    this.editPages = this.pagesForPostprocess;
   },
   methods: {
-    handlePageChange(pageNumber) {
-      this.$emit("change-page", pageNumber);
-    },
-    isPageSelected(id) {
-      if (this.selectedPages.length === 0) return;
-      const selectedPage = this.selectedPages.find((page) => page.id === id);
-      if (selectedPage) return selectedPage.id;
-    },
-    selectPage(page) {
-      if (!page) return;
-      this.$emit("change-page", page.number);
-      const selectedPage = {
-        id: page.id,
-        number: page.number,
-        thumbnail_url: page.thumbnail_url,
-      };
-      this.selected = true;
-
-      this.$store.dispatch("edit/setSelectedPages", selectedPage);
-    },
-    clickOutside(event) {
-      if (!event || this.selectedPages.length === 0) return;
-
-      // Check if user clicks in any element other than thumbnail or buttons to deselect the thumbnail
-      if (
-        event.target.className.includes("button") ||
-        event.target.className.includes("image-container") ||
-        event.target.className.includes("icon")
-      ) {
-        return;
-      }
-
-      this.deselect();
-    },
     deselect() {
-      this.selected = null;
       this.$store.dispatch("edit/setSelectedPages");
     },
     getRotation(pageId) {
       // rotate page
-      return this.documentPagesListForEditMode?.find((p) => p.id === pageId)
-        ?.angle;
+      return this.pagesForPostprocess?.find((p) => p.id === pageId)?.angle;
     },
-    handleSplittingLines(page) {
-      this.$emit("handle-splitting-lines", page);
+    handleSplittingLines(page, origin) {
+      this.$emit("handle-splitting-lines", page, origin);
     },
     checkMove(event) {
       this.$emit("check-move", event);

package/src/components/DocumentEdit/EditSidebar.vue

@@ -1,75 +1,105 @@
 <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)"
+          />
+          <div class="switch-info">
+            <span class="switch-text">{{ $t("smart_split") }}</span>
+            <span
+              v-if="documentHasProposedSplit(selectedDocument)"
+              class="new-badge"
+              >{{ newText }}</span
+            >
+          </div>
+        </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("edit", ["selectedPages", "updatedDocument"]),
+    ...mapState("document", ["splittingSuggestions", "selectedDocument"]),
+    ...mapGetters("document", ["documentHasProposedSplit"]),
   },
   watch: {
     selectedPages(newValue) {
@@ -79,13 +109,36 @@ 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;
+      }
+    },
+    updatedDocument(newValue) {
+      if (newValue && newValue.length === 1) {
+        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() {
-      this.$emit("rotate-left", "left");
+      this.$emit("rotate", "left");
     },
     rotateRight() {
-      this.$emit("rotate-right", "right");
+      this.$emit("rotate", "right");
     },
     rotateAllLeft() {
       this.$emit("rotate-all-left");

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,
@@ -97,9 +97,11 @@ export default {
   props: {
     fileName: {
       type: String,
+      default: "",
     },
     fileExtension: {
       type: String,
+      default: "",
     },
   },
   data() {
@@ -110,11 +112,12 @@ export default {
   },
   computed: {
     ...mapState("document", ["selectedDocument", "pages"]),
-    ...mapState("edit", ["updatedDocument", "documentPagesListForEditMode"]),
+    ...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
@@ -160,11 +163,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
       );
 
@@ -172,8 +175,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/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>