@konfuzio/document-validation-ui 0.1.19 → 0.1.20-dev.0

package/src/components/DocumentEdit/EditConfirmationModal.vue

@@ -1,55 +1,55 @@
-<template>
-  <section class="edit-confirmation-modal">
-    <b-modal v-model="isModalActive" :can-cancel="[]" class="edit-modal">
-      <section class="modal-card-body">
-        <div class="header">
-          <p class="modal-title">{{ $t("confirm_splitting") }}</p>
-        </div>
-        <div class="content">{{ $t("splitting_warning") }}</div>
-      </section>
-      <footer class="modal-card-foot">
-        <b-button @click="closeModal">
-          {{ $t("no") }}
-        </b-button>
-        <b-button type="is-primary" @click="confirmChanges">
-          {{ $t("yes") }}
-        </b-button>
-      </footer>
-    </b-modal>
-  </section>
-</template>
-
-<script>
-import { mapState } from "vuex";
-/**
- * This component shows a modal to confirm the edit changes in the document
- */
-export default {
-  name: "EditConfirmationModal",
-  data() {
-    return {
-      isModalActive: false,
-    };
-  },
-  computed: {
-    ...mapState("edit", ["showEditConfirmationModal"]),
-  },
-  watch: {
-    showEditConfirmationModal(newValue) {
-      this.isModalActive = newValue;
-    },
-  },
-  methods: {
-    closeModal() {
-      this.isModalActive = false;
-      this.$store.dispatch("edit/setShowEditConfirmationModal", false);
-    },
-    confirmChanges() {
-      this.$emit("save-changes");
-      this.isModalActive = false;
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>
+<template>
+  <section class="edit-confirmation-modal">
+    <b-modal v-model="isModalActive" :can-cancel="[]" class="edit-modal">
+      <section class="modal-card-body">
+        <div class="header">
+          <p class="modal-title">{{ $t("confirm_splitting") }}</p>
+        </div>
+        <div class="content">{{ $t("splitting_warning") }}</div>
+      </section>
+      <footer class="modal-card-foot">
+        <b-button @click="closeModal">
+          {{ $t("no") }}
+        </b-button>
+        <b-button type="is-primary" @click="confirmChanges">
+          {{ $t("yes") }}
+        </b-button>
+      </footer>
+    </b-modal>
+  </section>
+</template>
+
+<script>
+import { mapState } from "vuex";
+/**
+ * This component shows a modal to confirm the edit changes in the document
+ */
+export default {
+  name: "EditConfirmationModal",
+  data() {
+    return {
+      isModalActive: false,
+    };
+  },
+  computed: {
+    ...mapState("edit", ["showEditConfirmationModal"]),
+  },
+  watch: {
+    showEditConfirmationModal(newValue) {
+      this.isModalActive = newValue;
+    },
+  },
+  methods: {
+    closeModal() {
+      this.isModalActive = false;
+      this.$store.dispatch("edit/setShowEditConfirmationModal", false);
+    },
+    confirmChanges() {
+      this.$emit("save-changes");
+      this.isModalActive = false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>

package/src/components/DocumentEdit/EditPageThumbnail.vue

@@ -1,114 +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>
+<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,161 +1,161 @@
-<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"
-      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"
-      >
-        <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
-              v-if="
-                splittingLines && splittingLines[index].page === page.number
-              "
-              class="lines active-split"
-            >
-              <SplitZigZag
-                :color="
-                  splittingLines &&
-                  splittingLines[index].origin &&
-                  splittingLines[index].origin === 'AI' &&
-                  splitSuggestionsEnabled
-                    ? 'green'
-                    : 'dark'
-                "
-              />
-            </div>
-            <div v-else class="lines not-active-split">
-              <SplitLines />
-            </div>
-          </div>
-        </div>
-        <div class="bottom-section">
-          <span class="page-number">{{ page.number }}</span>
-        </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 SplitLines from "../../assets/images/SplitLines";
-import SplitZigZag from "../../assets/images/SplitZigZag";
-import EditPageThumbnail from "./EditPageThumbnail";
-
-import draggable from "vuedraggable";
-
-export default {
-  name: "EditPages",
-  components: {
-    SplitLines,
-    SplitZigZag,
-    EditPageThumbnail,
-    draggable,
-  },
-  props: {
-    splittingLines: {
-      type: Array,
-      default: null,
-    },
-    splitSuggestionsEnabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      editPages: null,
-    };
-  },
-
-  computed: {
-    ...mapState("document", [
-      "pages",
-      "recalculatingAnnotations",
-      "selectedDocument",
-      "splittingSuggestions",
-    ]),
-    ...mapState("edit", [
-      "editMode",
-      "pagesForPostprocess",
-      "renameAndCategorize",
-    ]),
-  },
-  watch: {
-    pagesForPostprocess(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this.editPages = newValue;
-      }
-    },
-    editPages(newValue, oldValue) {
-      if (newValue !== oldValue) {
-        this.$store.dispatch("edit/setPagesForPostprocess", newValue);
-      }
-    },
-    renameAndCategorize(newValue) {
-      if (newValue) {
-        this.editPages = this.pagesForPostprocess;
-      }
-    },
-  },
-  mounted() {
-    this.editPages = this.pagesForPostprocess;
-  },
-  methods: {
-    deselect() {
-      this.$store.dispatch("edit/setSelectedPages");
-    },
-    getRotation(pageId) {
-      // rotate page
-      return this.pagesForPostprocess?.find((p) => p.id === pageId)?.angle;
-    },
-    handleSplittingLines(page, origin) {
-      this.$emit("handle-splitting-lines", page, origin);
-    },
-    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>
+<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"
+      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"
+      >
+        <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
+              v-if="
+                splittingLines && splittingLines[index].page === page.number
+              "
+              class="lines active-split"
+            >
+              <SplitZigZag
+                :color="
+                  splittingLines &&
+                  splittingLines[index].origin &&
+                  splittingLines[index].origin === 'AI' &&
+                  splitSuggestionsEnabled
+                    ? 'green'
+                    : 'dark'
+                "
+              />
+            </div>
+            <div v-else class="lines not-active-split">
+              <SplitLines />
+            </div>
+          </div>
+        </div>
+        <div class="bottom-section">
+          <span class="page-number">{{ page.number }}</span>
+        </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 SplitLines from "../../assets/images/SplitLines";
+import SplitZigZag from "../../assets/images/SplitZigZag";
+import EditPageThumbnail from "./EditPageThumbnail";
+
+import draggable from "vuedraggable";
+
+export default {
+  name: "EditPages",
+  components: {
+    SplitLines,
+    SplitZigZag,
+    EditPageThumbnail,
+    draggable,
+  },
+  props: {
+    splittingLines: {
+      type: Array,
+      default: null,
+    },
+    splitSuggestionsEnabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      editPages: null,
+    };
+  },
+
+  computed: {
+    ...mapState("document", [
+      "pages",
+      "recalculatingAnnotations",
+      "selectedDocument",
+      "splittingSuggestions",
+    ]),
+    ...mapState("edit", [
+      "editMode",
+      "pagesForPostprocess",
+      "renameAndCategorize",
+    ]),
+  },
+  watch: {
+    pagesForPostprocess(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.editPages = newValue;
+      }
+    },
+    editPages(newValue, oldValue) {
+      if (newValue !== oldValue) {
+        this.$store.dispatch("edit/setPagesForPostprocess", newValue);
+      }
+    },
+    renameAndCategorize(newValue) {
+      if (newValue) {
+        this.editPages = this.pagesForPostprocess;
+      }
+    },
+  },
+  mounted() {
+    this.editPages = this.pagesForPostprocess;
+  },
+  methods: {
+    deselect() {
+      this.$store.dispatch("edit/setSelectedPages");
+    },
+    getRotation(pageId) {
+      // rotate page
+      return this.pagesForPostprocess?.find((p) => p.id === pageId)?.angle;
+    },
+    handleSplittingLines(page, origin) {
+      this.$emit("handle-splitting-lines", page, origin);
+    },
+    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>