@konfuzio/document-validation-ui 0.1.1

package/src/components/DocumentDashboard.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="dashboard">
+    <DocumentTopBar />
+    <div :class="['dashboard-viewer', editMode ? 'edit-mode' : '']">
+      <DocumentThumbnails
+        v-if="!editMode"
+        ref="documentPages"
+      />
+      <ScrollingDocument
+        ref="scrollingDocument"
+        class="dashboard-document"
+      />
+      <DocumentAnnotations
+        v-if="!editMode"
+        ref="annotations"
+      />
+      <DocumentEdit
+        v-else
+        ref="editView"
+      />
+
+      <transition name="slide-fade">
+        <div
+          v-if="showActionError"
+          class="error-message"
+          :style="{ width: `${errorMessageWidth}px` }"
+        >
+          <ErrorMessage />
+        </div>
+      </transition>
+    </div>
+    <div
+      v-if="showDocumentError"
+      class="error-modal"
+    >
+      <DocumentError />
+    </div>
+    <div
+      v-if="!optimalResolution"
+      class="not-optimized"
+    >
+      <NotOptimizedViewportModal />
+    </div>
+    <div
+      v-if="!isMinimumWidth"
+      class="not-supported"
+    >
+      <div class="text">
+        {{ $t("resolution_not_supported") }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import { DocumentTopBar } from "./DocumentTopBar";
+import { ScrollingDocument } from "./DocumentPage";
+import { DocumentThumbnails } from "./DocumentThumbnails";
+import { DocumentAnnotations } from "./DocumentAnnotations";
+import { DocumentEdit } from "./DocumentEdit";
+import ErrorMessage from "./ErrorMessage";
+import NotOptimizedViewportModal from "./NotOptimizedViewportModal";
+import DocumentError from "./DocumentError";
+
+/**
+ * This component shows the PDF pages in a scrolling component and
+ * the annotations on the side.
+ */
+export default {
+  name: "DocumentDashboard",
+  components: {
+    DocumentTopBar,
+    ScrollingDocument,
+    DocumentThumbnails,
+    DocumentAnnotations,
+    DocumentEdit,
+    ErrorMessage,
+    NotOptimizedViewportModal,
+    DocumentError
+  },
+  computed: {
+    ...mapState("display", [
+      "scale",
+      "fit",
+      "optimalResolution",
+      "pageWidthScale",
+      "currentPage"
+    ]),
+    ...mapState("document", [
+      "showActionError",
+      "showDocumentError",
+      "errorMessageWidth",
+      "selectedDocument"
+    ]),
+    ...mapState("edit", ["editMode"]),
+    ...mapGetters("display", ["isMinimumWidth"])
+  },
+  watch: {
+    selectedDocument(newDocument, oldDocument) {
+      if (newDocument && !oldDocument) {
+        // first time
+        this.resizeObserver.observe(this.$refs.scrollingDocument.$el);
+      } else if (newDocument) {
+        this.onDocumentResize();
+      }
+    }
+  },
+  mounted() {
+    this.resizeObserver = new ResizeObserver(this.onDocumentResize);
+  },
+  destroyed() {
+    if (this.$refs.scrollingDocument) {
+      this.resizeObserver.unobserve(this.$refs.scrollingDocument.$el);
+    }
+  },
+  data() {
+    return {
+      resizeObserver: null,
+      unwatchSelectedDocument: null
+    };
+  },
+  methods: {
+    elementsWidth() {
+      let elementsWidth = 1;
+      if (this.$refs.editView) {
+        elementsWidth += this.$refs.editView.$el.clientWidth;
+      }
+      if (this.$refs.documentPages) {
+        elementsWidth += this.$refs.documentPages.$el.clientWidth;
+      }
+      if (this.$refs.annotations) {
+        elementsWidth += this.$refs.annotations.$el.clientWidth;
+      }
+      return elementsWidth;
+    },
+    onDocumentResize() {
+      this.$store.dispatch(
+        "display/updateOptimalResolution",
+        this.$el.offsetWidth
+      );
+      if (this.selectedDocument.pages[0]) {
+        this.$store.dispatch("display/updateScale", {
+          elementsWidth: this.elementsWidth(),
+          client: {
+            width: this.$el.clientWidth,
+            height: this.$el.clientHeight
+          },
+          viewport: {
+            width: this.selectedDocument.pages[0].size[0],
+            height: this.selectedDocument.pages[0].size[1]
+          }
+        });
+      }
+    }
+  }
+};
+</script>
+<style scoped lang="scss" src="../assets/scss/document_dashboard.scss"></style>

package/src/components/DocumentEdit/DocumentEdit.vue

@@ -0,0 +1,279 @@
+<template>
+  <div :class="['document-edit', splitOverview && 'split-overview-component']">
+    <div
+      v-if="!splitOverview"
+      class="pages-section"
+    >
+      <EditPages
+        :active-splitting-lines="activeSplittingLines"
+        @change-page="changePage"
+        @handle-splitting-lines="handleSplittingLines"
+        @check-move="checkMove"
+        @handle-drag-end="handleDragEnd"
+      />
+    </div>
+    <div
+      v-else
+      class="split-overview-section"
+    >
+      <SplitOverview
+        :file-name="fileName"
+        :file-extension="fileExtension"
+        @change-page="changePage"
+      />
+    </div>
+    <div
+      v-if="!splitOverview"
+      class="sidebar"
+    >
+      <EditSidebar
+        @rotate-left="rotatePage"
+        @rotate-right="rotatePage"
+        @rotate-all-left="handleRotationsToTheLeft"
+        @rotate-all-right="handleRotationsToTheRight"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import EditSidebar from "./EditSidebar";
+import SplitOverview from "./SplitOverview";
+import EditPages from "./EditPages";
+
+/**
+ * This component shows a document thumbnail grid view and sidebar, to be able to edit the document.
+ */
+export default {
+  name: "DocumentEdit",
+  components: {
+    EditSidebar,
+    SplitOverview,
+    EditPages
+  },
+  data() {
+    return {
+      fileName: [],
+      fileExtension: null,
+      activeSplittingLines: [],
+      dragging: false,
+      prevPageAtIndex: null
+    };
+  },
+  computed: {
+    ...mapState("document", ["recalculatingAnnotations", "selectedDocument"]),
+    ...mapState("display", ["currentPage"]),
+    ...mapState("edit", [
+      "editMode",
+      "documentPagesListForEditMode",
+      "updatedDocument",
+      "splitOverview",
+      "selectedPages"
+    ])
+  },
+  watch: {
+    pages() {
+      if (!this.selectedDocument) return;
+      this.setPages();
+    },
+    splitOverview(newValue) {
+      if (newValue) {
+        this.splitFileNameFromExtension();
+      }
+    },
+    documentPagesListForEditMode(newValue) {
+      if (newValue) {
+        this.saveUpdatedDocument();
+      }
+    }
+  },
+  mounted() {
+    this.setPages();
+  },
+  methods: {
+    setPages() {
+      if (!this.selectedDocument) {
+        return;
+      }
+      // set array of pages only with the data we need
+      const pages = this.createDocumentPagesListForEditMode();
+      this.$store.dispatch("edit/setDocumentPagesListForEditMode", pages);
+      // create array to handle the splitting
+      // length - 1 because of how many lines to split we need (last one not necessary)
+      this.activeSplittingLines = new Array(
+        this.selectedDocument.pages.length - 1
+      );
+    },
+    createDocumentPagesListForEditMode() {
+      return this.selectedDocument.pages.map(page => {
+        return {
+          id: page.id,
+          angle: 0,
+          page_number: page.number,
+          thumbnail_url: page.thumbnail_url,
+          image_url: page.image_url,
+          size: page.size,
+          updated_at: this.selectedDocument.downloaded_at
+        };
+      });
+    },
+    changePage(pageNumber) {
+      // This will scroll to the clicked page
+      if (pageNumber != this.currentPage) {
+        this.$store.dispatch(
+          "display/updateCurrentPage",
+          parseInt(pageNumber, 10)
+        );
+      }
+    },
+
+    /** ROTATE */
+    rotatePage(direction) {
+      const page = this.selectedPages.map(page => {
+        return page;
+      });
+
+      this.$store.dispatch("edit/rotatePage", {
+        page,
+        direction
+      });
+    },
+    handleRotationsToTheLeft() {
+      this.$store.dispatch("edit/updateRotationToTheLeft");
+    },
+    handleRotationsToTheRight() {
+      this.$store.dispatch("edit/updateRotationToTheRight");
+    },
+
+    /** SPLIT */
+    splitFileNameFromExtension() {
+      if (!this.selectedDocument) return;
+
+      // Save the file name and the extension in different variables
+      // to be used in the next step of the splitting
+
+      if (this.selectedDocument.data_file_name) {
+        this.fileName = this.selectedDocument.data_file_name
+          .split(".")
+          .slice(0, -1)
+          .join(".");
+      }
+
+      if (this.selectedDocument.data_file_name) {
+        this.fileExtension = this.selectedDocument.data_file_name
+          .split(".")
+          .at(-1);
+      }
+    },
+    handleSplittingLines(page) {
+      // For splitting line purposes
+      // Add page number to specific index
+      // Or replace it with 0 (to keep the same index) if it exists
+      const found = this.activeSplittingLines.find(
+        item => item === page.page_number
+      );
+
+      if (found) {
+        this.activeSplittingLines.splice(page.page_number - 1, 1, 0);
+      } else {
+        this.activeSplittingLines.splice(
+          page.page_number - 1,
+          1,
+          page.page_number
+        );
+      }
+
+      this.saveUpdatedDocument();
+    },
+    saveUpdatedDocument() {
+      this.splitFileNameFromExtension();
+
+      // Check how many sub docs we have
+      const subDocuments = this.activeSplittingLines.filter(item => item !== 0);
+
+      // Create array of objects
+      // with a fixed size based on how many sub documents are currently
+      const pageObjectArray = new Array(subDocuments.length + 1);
+
+      // Loop over the created array
+      // for each iteration we create the page object with the correponding data
+      for (let i = 0; i < pageObjectArray.length; i++) {
+        const pageObject = {
+          name: this.handleFileName(i),
+          category: this.selectedDocument.category,
+          pages: this.handleSubPages(i, subDocuments)
+        };
+
+        // Then we replace the "undefined" with the created object
+        pageObjectArray.splice(i, 1, pageObject);
+      }
+
+      // Set the state to the created array
+      this.$store.dispatch("edit/setUpdatedDocument", pageObjectArray);
+    },
+    handleFileName(index) {
+      let newFileName;
+
+      // Return original file name,
+      // file name + copy,
+      // or file name + copy + number
+      // based on where the object will be located in the array
+      if (index === 0) {
+        newFileName = this.selectedDocument.data_file_name;
+      } else if (index === 1) {
+        newFileName = `${this.fileName}_copy.${this.fileExtension}`;
+      } else {
+        newFileName = `${this.fileName}_copy${index}.${this.fileExtension}`;
+      }
+      return newFileName;
+    },
+    handleSubPages(index, splittingLine) {
+      // assign the correct pages to each object
+      let pages;
+
+      if (index === 0) {
+        pages = this.documentPagesListForEditMode.slice(
+          0,
+          splittingLine[index]
+        );
+      } else {
+        if (!splittingLine[index]) {
+          pages = this.documentPagesListForEditMode.slice(
+            splittingLine[index - 1]
+          );
+        } else {
+          pages = this.documentPagesListForEditMode.slice(
+            splittingLine[index - 1],
+            splittingLine[index]
+          );
+        }
+      }
+      return pages;
+    },
+
+    /** SORT */
+    checkMove(e) {
+      // Save the page placed originally where the page we are dragging will go
+      this.prevPageAtIndex = this.documentPagesListForEditMode.find(
+        page =>
+          this.documentPagesListForEditMode.indexOf(page) ===
+          e.draggedContext.futureIndex
+      );
+    },
+    handleDragEnd() {
+      // Update page numbers
+      const pages = this.documentPagesListForEditMode.map(page => {
+        const index = this.documentPagesListForEditMode.indexOf(page);
+        return {
+          ...page,
+          page_number: index + 1
+        };
+      });
+
+      this.$store.dispatch("edit/setDocumentPagesListForEditMode", pages);
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>

package/src/components/DocumentEdit/EditPages.vue

@@ -0,0 +1,213 @@
+<template>
+  <div class="edit-pages">
+    <draggable
+      v-model="editPages"
+      class="document-grid"
+      easing="cubic-bezier(0.37, 0, 0.63, 1)"
+      @start="dragging = true"
+      @end="handleDragEnd"
+      @move="checkMove"
+    >
+      <div
+        v-for="(page, index) in editPages"
+        :key="page.id"
+        class="image-section"
+        tabindex="0"
+        @focusout="clickOutside"
+      >
+        <div
+          class="image-container"
+          :tabindex="index"
+          @click="selectPage(page)"
+        >
+          <div class="thumbnail">
+            <div
+              :class="[
+                'img-container',
+                selected && isPageSelected(page.id) === page.id && 'selected',
+              ]"
+            >
+              <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>
+            </div>
+            <div class="icon-container">
+              <div class="action-icon">
+                <EyeIcon />
+              </div>
+            </div>
+          </div>
+          <span class="page-number">{{ page.page_number }}</span>
+        </div>
+        <div
+          :class="[
+            'splitting-lines',
+            activeSplittingLines &&
+              activeSplittingLines[index] === page.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.page_number
+            "
+            class="lines"
+          >
+            <SplitZigZag />
+          </div>
+          <div
+            v-else
+            class="lines"
+          >
+            <SplitLines />
+          </div>
+        </div>
+      </div>
+    </draggable>
+  </div>
+</template>
+
+<script>
+/**
+ * This component renders a grid of the document pages
+ * that will be possible to resort, split and/or rotate
+ */
+
+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 draggable from "vuedraggable";
+
+export default {
+  name: "EditPages",
+  components: {
+    ServerImage,
+    SplitLines,
+    SplitZigZag,
+    EyeIcon,
+    draggable,
+  },
+  props: {
+    activeSplittingLines: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      editPages: null,
+      selected: null,
+    };
+  },
+  computed: {
+    ...mapState("document", [
+      "pages",
+      "recalculatingAnnotations",
+      "selectedDocument",
+    ]),
+    ...mapState("edit", [
+      "editMode",
+      "documentPagesListForEditMode",
+      "splitOverview",
+      "selectedPages",
+      "splitOverview",
+    ]),
+  },
+  watch: {
+    documentPagesListForEditMode(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.editPages = newValue;
+      }
+    },
+    editPages(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.$store.dispatch("edit/setDocumentPagesListForEditMode", newValue);
+      }
+    },
+    splitOverview(newValue) {
+      if (newValue) {
+        this.editPages = this.documentPagesListForEditMode;
+      }
+    },
+  },
+  mounted() {
+    this.editPages = this.documentPagesListForEditMode;
+  },
+  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.page_number);
+      const selectedPage = {
+        id: page.id,
+        number: page.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;
+    },
+    handleSplittingLines(page) {
+      this.$emit("handle-splitting-lines", page);
+    },
+    checkMove(event) {
+      this.$emit("check-move", event);
+    },
+    handleDragEnd() {
+      this.draggable = false;
+
+      this.$emit("handle-drag-end");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>