@konfuzio/document-validation-ui 0.1.1

package/src/components/DocumentEdit/EditSidebar.vue

@@ -0,0 +1,118 @@
+<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">
+        <p :class="['pages-selected', buttonDisabled && 'disabled']">
+          {{ selectedPages.length }} {{ $t("selected") }}
+        </p>
+        <b-button
+          class="rotate-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"
+          :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"
+          @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"
+          @click="rotateAllRight"
+        >
+          <b-icon
+            icon="arrow-rotate-right"
+            class="is-small"
+          />
+          <span class="button-text">{{ $t("rotate_all") }}</span>
+        </b-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * This component renders buttons to rotate single pages or all pages
+ * in edit mode
+ * */
+
+import { mapState } from "vuex";
+
+export default {
+  name: "EditSidebar",
+  data() {
+    return {
+      buttonDisabled: true
+    };
+  },
+  computed: {
+    ...mapState("edit", ["selectedPages"])
+  },
+  watch: {
+    selectedPages(newValue) {
+      if (newValue.length > 0) {
+        this.buttonDisabled = false;
+      } else {
+        this.buttonDisabled = true;
+      }
+    }
+  },
+  methods: {
+    rotateLeft() {
+      this.$emit("rotate-left", "left");
+    },
+    rotateRight() {
+      this.$emit("rotate-right", "right");
+    },
+    rotateAllLeft() {
+      this.$emit("rotate-all-left");
+    },
+    rotateAllRight() {
+      this.$emit("rotate-all-right");
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>

package/src/components/DocumentEdit/SplitOverview.vue

@@ -0,0 +1,182 @@
+<template>
+  <div class="split-overview">
+    <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' }"
+        />
+      </div>
+      <div class="back-text">
+        {{ $t("back_to_edit") }}
+      </div>
+    </div>
+    <div class="overview-title">
+      {{ $t("split_document") }}
+    </div>
+    <div class="new-documents-container">
+      <div
+        v-for="(page, index) in updatedDocument"
+        :key="index"
+        class="document-details"
+      >
+        <div class="overview-thumbnails">
+          <div class="split-documents">
+            <div
+              class="image-container"
+              @click="handlePageChange(page.pages[0].page_number)"
+            >
+              <div
+                :class="['thumbnail', page.pages.length > 1 && 'page-stack']"
+              >
+                <ServerImage
+                  ref="image"
+                  :style="{
+                    transform:
+                      'rotate(' + getRotation(page.pages[0].id) + 'deg)',
+                  }"
+                  :image-url="getImageUrl(page)"
+                  class="page-thumbnail"
+                />
+                <div class="icon-container">
+                  <div class="action-icon">
+                    <EyeIcon />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="doc-info">
+          <div class="file-name-section">
+            <input
+              type="text"
+              class="name-input"
+              :value="getFileName(page.name)"
+              @input="handleInput"
+              @paste="handlePaste"
+              @blur="handleChanges(page)"
+            />
+            <div class="file-extension-container">
+              <span>{{ `.${fileExtension}` }}</span>
+            </div>
+          </div>
+          <div class="category">
+            <DocumentCategory
+              :selected-document="selectedDocument"
+              :split-mode="splitMode"
+              :page="page"
+              :index="index"
+              @category-change="handleChanges"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+/**
+ * This component will only be rendered if document pages were split
+ */
+
+import { mapState } from "vuex";
+import DocumentCategory from "../../components/DocumentCategory";
+import ServerImage from "../../assets/images/ServerImage";
+import EyeIcon from "../../assets/images/EyeIcon";
+
+export default {
+  name: "SplitOverview",
+  components: {
+    DocumentCategory,
+    ServerImage,
+    EyeIcon,
+  },
+  props: {
+    fileName: {
+      type: String,
+    },
+    fileExtension: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      splitMode: true,
+      updatedFileName: null,
+    };
+  },
+  computed: {
+    ...mapState("document", ["selectedDocument", "pages"]),
+    ...mapState("edit", ["updatedDocument", "documentPagesListForEditMode"]),
+  },
+  methods: {
+    handleBackButton() {
+      this.$store.dispatch("edit/setSplitOverview", false);
+    },
+    handlePaste(event) {
+      // TODO: modify to only paste plain text
+      event.preventDefault();
+    },
+    handleInput(event) {
+      this.updatedFileName = event.target.value.trim();
+    },
+    handleChanges(page, category) {
+      // This function handles file name or category changes
+      const updatedPages = this.updatedDocument.map((splitPage) => {
+        if (splitPage.pages[0].id === page.pages[0].id) {
+          if (this.updatedFileName) {
+            return {
+              ...splitPage,
+              name: `${this.updatedFileName}.${this.fileExtension}`,
+            };
+          } else if (category) {
+            return {
+              ...splitPage,
+              category: category,
+            };
+          } else {
+            return splitPage;
+          }
+        }
+        return splitPage;
+      });
+
+      this.$store.dispatch("edit/setUpdatedDocument", updatedPages);
+
+      if (this.updatedFileName) {
+        this.updatedFileName = null;
+      }
+    },
+    handlePageChange(pageNumber) {
+      this.$emit("change-page", pageNumber);
+    },
+    getFileName(name) {
+      if (!name) return;
+
+      // Do not show file extension
+      return name.split(".").slice(0, -1).join(".");
+    },
+    getImageUrl(page) {
+      if (!this.documentPagesListForEditMode || !this.pages || !page) return;
+
+      // 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
+      );
+
+      return `${image.thumbnail_url}?${image.updated_at}`;
+    },
+    getRotation(pageId) {
+      // rotate page
+      return this.documentPagesListForEditMode?.find((p) => p.id === pageId)
+        ?.angle;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>

package/src/components/DocumentEdit/index.js

@@ -0,0 +1,4 @@
+export { default as DocumentEdit } from "./DocumentEdit";
+export { default as EditSidebar } from "./EditSidebar";
+export { default as EditPages } from "./EditPages";
+export { default as SplitOverview } from "./SplitOverview";

package/src/components/DocumentError.vue

@@ -0,0 +1,53 @@
+<template>
+  <section class="document-error-modal">
+    <b-modal v-model="isModalActive" :width="400">
+      <section class="modal-card-body">
+        <div class="header">
+          <div class="error-icon">
+            <ErrorIcon class="icon" />
+          </div>
+          <div class="btn-container" type="button" @click="closeModal">
+            <b-icon icon="xmark" class="close-btn" size="is-small" />
+          </div>
+        </div>
+        <div class="content">
+          <h3>{{ $t("document_error_title") }}</h3>
+          <p>{{ $t("document_error_info") }}</p>
+        </div>
+      </section>
+      <footer class="modal-card-foot">
+        <b-button type="is-primary" @click="handleContactSupport">
+          {{ $t("contact_support") }}
+        </b-button>
+      </footer>
+    </b-modal>
+  </section>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import ErrorIcon from "../assets/images/ErrorIcon";
+
+export default {
+  name: "DocumentError",
+  components: {
+    ErrorIcon,
+  },
+  data() {
+    return {
+      isModalActive: true,
+    };
+  },
+  methods: {
+    handleContactSupport() {
+      const documentError = "Document error";
+      this.$store.dispatch("document/contactSupport", documentError);
+    },
+    closeModal() {
+      this.$store.dispatch("document/setDocumentError", false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../assets/scss/document_error.scss"></style>

package/src/components/DocumentPage/ActionBar.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="action-bar">
+    <div class="action-bar-elements">
+      <div v-if="documentActionBar.icon" class="action-icon">
+        <ActionIcon :icon="documentActionBar.icon" class="icon" />
+      </div>
+      <div v-if="documentActionBar.text" class="action-text">
+        {{ documentActionBar.text }}
+      </div>
+      <div v-if="documentActionBar.action" class="action-button">
+        <ActionButtons
+          :save-btn="documentActionBar.action !== null"
+          :is-loading="documentActionBar.loading"
+          :action-bar="true"
+          @save="handleSave()"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import ActionButtons from "../DocumentAnnotations/ActionButtons";
+import ActionIcon from "../../assets/images/ActionIcon";
+
+export default {
+  name: "ActionBar",
+  components: {
+    ActionIcon,
+    ActionButtons,
+  },
+  computed: {
+    ...mapState("display", ["documentActionBar"]),
+  },
+  methods: {
+    handleSave() {
+      this.documentActionBar.action();
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_action_bar.scss"
+></style>

package/src/components/DocumentPage/BoxSelection.vue

@@ -0,0 +1,149 @@
+<template>
+  <v-group>
+    <v-rect
+      v-if="isSelectionValid"
+      ref="boxSelection"
+      :config="config"
+      :stroke-scale-enabled="false"
+      @dragend="onChange"
+      @transformend="onChange"
+    />
+    <v-transformer ref="boxTransformer" :config="transformerConfig" />
+  </v-group>
+</template>
+
+<script>
+import { mapGetters, mapState, mapActions } from "vuex";
+
+export default {
+  props: {
+    page: {
+      required: true,
+      type: Object,
+    },
+  },
+  computed: {
+    /**
+     * Konva options of the selection rectangle, based on the
+     * `selection` object.
+     */
+    config() {
+      return {
+        x: this.selection.start.x,
+        y: this.selection.start.y,
+        width: this.selection.end.x - this.selection.start.x,
+        height: this.selection.end.y - this.selection.start.y,
+        fill: this.isSelecting ? "#7B61FFB3" : "transparent",
+        stroke: this.isSelecting ? "transparent" : "#7B61FFB3",
+        strokeWidth: 1,
+        globalCompositeOperation: "multiply",
+        shadowForStrokeEnabled: false,
+        name: "boxSelection",
+        draggable: true,
+      };
+    },
+    transformerConfig() {
+      return {
+        borderEnabled: false,
+        rotateEnabled: false,
+        ignoreStroke: true,
+        keepRatio: false,
+        anchorStroke: "#7B61FF",
+        anchorSize: 6,
+      };
+    },
+    ...mapState("selection", ["selection", "isSelecting"]),
+    ...mapGetters("display", ["clientToBbox"]),
+    ...mapGetters("selection", ["isSelectionValid"]),
+  },
+  mounted() {
+    this.updateTransformer();
+
+    if (this.selection.custom) {
+      this.getBoxSelectionContent();
+    }
+  },
+  methods: {
+    updateTransformer() {
+      // here we need to manually attach or detach Transformer node
+      const transformer = this.$refs.boxTransformer;
+
+      // maybe we're out of sync and the transformer is not available, just return
+      if (!transformer) {
+        return;
+      }
+
+      const transformerNode = transformer.getNode();
+      const stage = transformerNode.getStage();
+      let selectedNode;
+      if (stage) {
+        selectedNode = stage.findOne(".boxSelection");
+      }
+
+      // do nothing if selected node is already attached
+      if (selectedNode === transformerNode.node()) {
+        return;
+      }
+
+      if (selectedNode) {
+        // attach to another node
+        transformerNode.nodes([selectedNode]);
+      } else {
+        // remove transformer
+        transformerNode.nodes([]);
+      }
+
+      transformerNode.getLayer().batchDraw();
+    },
+
+    getBoxSelectionContent() {
+      const box = this.clientToBbox(
+        this.page,
+        this.selection.start,
+        this.selection.end
+      );
+      this.$store.dispatch("selection/getTextFromBboxes", box);
+    },
+
+    /**
+     * This method is used for both transforms and drags since it just
+     * retrieves the rect's new attributes from the event and uses those
+     * to set the new selection state.
+     */
+    onChange(event) {
+      const { x, y, scaleX, scaleY, skewX, width, height } = event.target.attrs;
+      const realWidth = width * scaleX;
+      const realHeight = height * scaleY;
+      let start;
+      let end;
+
+      // we need to figure out if there's skewing going on, to fix start/end points
+      // (other cases appear to fix themselves automatically)
+      if (skewX >= 0) {
+        start = { x, y };
+        end = {
+          x: start.x + realWidth,
+          y: start.y + realHeight,
+        };
+      } else {
+        end = { x, y };
+        start = { x: end.x - realWidth, y: end.y - realHeight };
+      }
+
+      this.moveSelection({ start, end });
+
+      // reset node's everything after transform (we don't want to deal with that,
+      // just with regular x/y/width/height)
+      const node = this.$refs.boxSelection.getNode();
+      node.skewX(0);
+      node.skewY(0);
+      node.rotation(0);
+      node.scaleX(1);
+      node.scaleY(1);
+
+      this.getBoxSelectionContent();
+    },
+    ...mapActions("selection", ["moveSelection"]),
+  },
+};
+</script>