@konfuzio/document-validation-ui 0.1.19-dev.1 → 0.1.19

package/src/components/DocumentThumbnails/DocumentThumbnails.cy.js

@@ -1,67 +1,67 @@
-import DocumentThumbnails from "./DocumentThumbnails.vue";
-
-describe("Document Thumbnails", () => {
-  beforeEach(() => {
-    cy.fetchDocument();
-    cy.mount(DocumentThumbnails);
-  });
-
-  it("shows thumbnails for all document pages", () => {
-    cy.get("#document-pages")
-      .find(".document-thumbnail")
-      .then(($elements) => {
-        cy.getStore("document")
-          .then($document => {
-            expect($document.selectedDocument.pages)
-              .to.have.lengthOf($elements.length);
-          });
-      });
-  });
-
-  it("loads thumbnail pictures that are shown on screen", () => {
-    cy.intercept("GET", "**/page/show-thumbnail/**").as("getThumbnail");
-
-    cy.get("#document-pages")
-      .find(".document-thumbnail")
-      .then((elements) => {
-        cy.get("@getThumbnail.all")
-          .its("length")
-          .should("equal", elements.length);
-      });
-  });
-
-  it("displays page number correctly", () => {
-    cy.get("#document-pages")
-      .find(".document-thumbnail")
-      .each(($row, index) => {
-        cy.wrap($row)
-          .find(".number-thumbnail")
-          .contains(index + 1);
-        cy.wait(1000);
-      });
-  });
-
-  it("navigates to every document thumbnail", () => {
-    cy.get("#document-pages")
-      .find(".document-thumbnail")
-      .each(($row, index) => {
-        cy.wrap($row).click();
-        cy.getStore("display")
-          .then($display => {
-            expect($display.currentPage)
-              .to.equal(index + 1);
-          });
-
-        cy.wait(1000);
-      });
-  });
-
-  it("show loading when a document is not set", () => {
-    cy.mount(DocumentThumbnails);
-    cy.dispatchAction("document", "setSelectedDocument", null);
-    cy.get("#document-pages")
-      .find(".document-thumbnail-loading")
-      .its("length")
-      .should("equal", 1);
-  });
-});
+import DocumentThumbnails from "./DocumentThumbnails.vue";
+
+describe("Document Thumbnails", () => {
+  beforeEach(() => {
+    cy.fetchDocument();
+    cy.mount(DocumentThumbnails);
+  });
+
+  it("shows thumbnails for all document pages", () => {
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .then(($elements) => {
+        cy.getStore("document")
+          .then($document => {
+            expect($document.selectedDocument.pages)
+              .to.have.lengthOf($elements.length);
+          });
+      });
+  });
+
+  it("loads thumbnail pictures that are shown on screen", () => {
+    cy.intercept("GET", "**/page/show-thumbnail/**").as("getThumbnail");
+
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .then((elements) => {
+        cy.get("@getThumbnail.all")
+          .its("length")
+          .should("equal", elements.length);
+      });
+  });
+
+  it("displays page number correctly", () => {
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .each(($row, index) => {
+        cy.wrap($row)
+          .find(".number-thumbnail")
+          .contains(index + 1);
+        cy.wait(1000);
+      });
+  });
+
+  it("navigates to every document thumbnail", () => {
+    cy.get("#document-pages")
+      .find(".document-thumbnail")
+      .each(($row, index) => {
+        cy.wrap($row).click();
+        cy.getStore("display")
+          .then($display => {
+            expect($display.currentPage)
+              .to.equal(index + 1);
+          });
+
+        cy.wait(1000);
+      });
+  });
+
+  it("show loading when a document is not set", () => {
+    cy.mount(DocumentThumbnails);
+    cy.dispatchAction("document", "setSelectedDocument", null);
+    cy.get("#document-pages")
+      .find(".document-thumbnail-loading")
+      .its("length")
+      .should("equal", 1);
+  });
+});

package/src/components/DocumentThumbnails/DocumentThumbnails.vue

@@ -1,132 +1,132 @@
-<template>
-  <div id="document-pages" ref="documentThumbnails">
-    <div v-if="selectedDocument">
-      <div
-        v-for="page in selectedDocument.pages"
-        ref="docPage"
-        :key="page.id"
-        :class="[
-          'document-thumbnail',
-          currentPage == page.number && 'selected',
-        ]"
-        @click="changePage(page.number)"
-      >
-        <div class="image-section">
-          <div class="image-container">
-            <ServerImage
-              v-if="!loading && !recalculatingAnnotations"
-              :class="[
-                'img-thumbnail',
-                currentPage == page.number && 'selected',
-              ]"
-              :width="'40px'"
-              :image-url="`${page.thumbnail_url}?${selectedDocument.downloaded_at}`"
-            >
-              <LoadingThumbnail />
-            </ServerImage>
-            <LoadingThumbnail v-else />
-          </div>
-        </div>
-        <div class="number-thumbnail">
-          {{ page.number }}
-        </div>
-      </div>
-    </div>
-    <div v-else class="document-thumbnail-loading">
-      <div class="document-thumbnail">
-        <div class="image-section">
-          <div class="image-container">
-            <LoadingThumbnail />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { mapState } from "vuex";
-import ServerImage from "../../assets/images/ServerImage";
-import LoadingThumbnail from "./LoadingThumbnail.vue";
-
-/**
- * This component creates a vertical list of the document pages
- * with thumbnail pictures of it which are also clickable.
- * It also creates a grid list of the pages in the toolbar modal
- * to allow the user to rotate them.
- */
-export default {
-  name: "DocumentThumbnails",
-  components: {
-    ServerImage,
-    LoadingThumbnail,
-  },
-  data() {
-    return {
-      thumbnailClicked: null,
-      previousScrollPosition: 0,
-    };
-  },
-  computed: {
-    ...mapState("document", [
-      "selectedDocument",
-      "recalculatingAnnotations",
-      "loading",
-    ]),
-    ...mapState("display", ["currentPage"]),
-  },
-  watch: {
-    currentPage(newPage) {
-      if (!newPage) return;
-
-      // handle thumbnail selection when scrolling the document
-      this.scrollToThumbnail(newPage);
-    },
-  },
-  mounted() {
-    const scrollingPage = document.querySelector(".scrolling-document");
-
-    if (scrollingPage) {
-      scrollingPage.addEventListener("scroll", () => {
-        this.scrollToThumbnail();
-      });
-    }
-  },
-
-  methods: {
-    /* Change page if not the currently open and not in modal */
-    changePage(pageNumber) {
-      this.thumbnailClicked = pageNumber;
-
-      if (
-        !this.loading &&
-        !this.recalculatingAnnotations &&
-        pageNumber != this.currentPage
-      ) {
-        this.$store.dispatch("display/setPageChangedFromThumbnail", true);
-        this.$store.dispatch("display/updateCurrentPage", pageNumber);
-      }
-    },
-
-    scrollToThumbnail(page) {
-      // select only the active thumbnail
-      const selectedPage = this.$refs.docPage.filter((image) =>
-        image.className.includes("selected")
-      );
-
-      if (page == this.thumbnailClicked) {
-        this.thumbnailClicked = null;
-      }
-
-      if (!this.thumbnailClicked && selectedPage && selectedPage[0]) {
-        selectedPage[0].scrollIntoView();
-      }
-    },
-  },
-};
-</script>
-
-<style
-  scoped
-  lang="scss"
-  src="../../assets/scss/document_thumbnails.scss"
-></style>
+<template>
+  <div id="document-pages" ref="documentThumbnails">
+    <div v-if="selectedDocument">
+      <div
+        v-for="page in selectedDocument.pages"
+        ref="docPage"
+        :key="page.id"
+        :class="[
+          'document-thumbnail',
+          currentPage == page.number && 'selected',
+        ]"
+        @click="changePage(page.number)"
+      >
+        <div class="image-section">
+          <div class="image-container">
+            <ServerImage
+              v-if="!loading && !recalculatingAnnotations"
+              :class="[
+                'img-thumbnail',
+                currentPage == page.number && 'selected',
+              ]"
+              :width="'40px'"
+              :image-url="`${page.thumbnail_url}?${selectedDocument.downloaded_at}`"
+            >
+              <LoadingThumbnail />
+            </ServerImage>
+            <LoadingThumbnail v-else />
+          </div>
+        </div>
+        <div class="number-thumbnail">
+          {{ page.number }}
+        </div>
+      </div>
+    </div>
+    <div v-else class="document-thumbnail-loading">
+      <div class="document-thumbnail">
+        <div class="image-section">
+          <div class="image-container">
+            <LoadingThumbnail />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import ServerImage from "../../assets/images/ServerImage";
+import LoadingThumbnail from "./LoadingThumbnail.vue";
+
+/**
+ * This component creates a vertical list of the document pages
+ * with thumbnail pictures of it which are also clickable.
+ * It also creates a grid list of the pages in the toolbar modal
+ * to allow the user to rotate them.
+ */
+export default {
+  name: "DocumentThumbnails",
+  components: {
+    ServerImage,
+    LoadingThumbnail,
+  },
+  data() {
+    return {
+      thumbnailClicked: null,
+      previousScrollPosition: 0,
+    };
+  },
+  computed: {
+    ...mapState("document", [
+      "selectedDocument",
+      "recalculatingAnnotations",
+      "loading",
+    ]),
+    ...mapState("display", ["currentPage"]),
+  },
+  watch: {
+    currentPage(newPage) {
+      if (!newPage) return;
+
+      // handle thumbnail selection when scrolling the document
+      this.scrollToThumbnail(newPage);
+    },
+  },
+  mounted() {
+    const scrollingPage = document.querySelector(".scrolling-document");
+
+    if (scrollingPage) {
+      scrollingPage.addEventListener("scroll", () => {
+        this.scrollToThumbnail();
+      });
+    }
+  },
+
+  methods: {
+    /* Change page if not the currently open and not in modal */
+    changePage(pageNumber) {
+      this.thumbnailClicked = pageNumber;
+
+      if (
+        !this.loading &&
+        !this.recalculatingAnnotations &&
+        pageNumber != this.currentPage
+      ) {
+        this.$store.dispatch("display/setPageChangedFromThumbnail", true);
+        this.$store.dispatch("display/updateCurrentPage", pageNumber);
+      }
+    },
+
+    scrollToThumbnail(page) {
+      // select only the active thumbnail
+      const selectedPage = this.$refs.docPage.filter((image) =>
+        image.className.includes("selected")
+      );
+
+      if (page == this.thumbnailClicked) {
+        this.thumbnailClicked = null;
+      }
+
+      if (!this.thumbnailClicked && selectedPage && selectedPage[0]) {
+        selectedPage[0].scrollIntoView();
+      }
+    },
+  },
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_thumbnails.scss"
+></style>

package/src/components/DocumentThumbnails/LoadingThumbnail.vue

@@ -1,25 +1,25 @@
-<template>
-  <div>
-    <b-skeleton
-      width="40px"
-      height="57px"
-    />
-  </div>
-</template>
-
-<script>
-/**
- * This component shows a skeleton instead of the thumbnails
- *  while some document data is still loading
- */
-
-export default {
-  name: "LoadingThumbnail"
-};
-</script>
-
-<style
-  scoped
-  lang="scss"
-  src="../../assets/scss/document_thumbnails.scss"
-></style>
+<template>
+  <div>
+    <b-skeleton
+      width="40px"
+      height="57px"
+    />
+  </div>
+</template>
+
+<script>
+/**
+ * This component shows a skeleton instead of the thumbnails
+ *  while some document data is still loading
+ */
+
+export default {
+  name: "LoadingThumbnail"
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../../assets/scss/document_thumbnails.scss"
+></style>

package/src/components/DocumentThumbnails/index.js

@@ -1 +1 @@
-export { default as DocumentThumbnails } from "./DocumentThumbnails";
+export { default as DocumentThumbnails } from "./DocumentThumbnails";