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

package/src/components/DocumentEdit/EditSidebar.vue

@@ -1,154 +1,154 @@
-<template>
-  <div class="edit-sidebar">
-    <div class="buttons-container">
-      <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>
-      </div>
-
-      <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 split-tooltip"
-        :label="tooltipInfo"
-      >
-        <b-field>
-          <b-switch
-            v-model="switchStatus"
-            :value="true"
-            size="is-small"
-            :disabled="!documentHasProposedSplit(selectedDocument)"
-            class="split-switch"
-          />
-          <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
- * */
-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", "updatedDocument"]),
-    ...mapState("document", ["splittingSuggestions", "selectedDocument"]),
-    ...mapGetters("document", ["documentHasProposedSplit"]),
-  },
-  watch: {
-    selectedPages(newValue) {
-      if (newValue.length > 0) {
-        this.buttonDisabled = false;
-      } else {
-        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");
-    },
-    rotateRight() {
-      this.$emit("rotate", "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>
+<template>
+  <div class="edit-sidebar">
+    <div class="buttons-container">
+      <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>
+      </div>
+
+      <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 split-tooltip"
+        :label="tooltipInfo"
+      >
+        <b-field>
+          <b-switch
+            v-model="switchStatus"
+            :value="true"
+            size="is-small"
+            :disabled="!documentHasProposedSplit(selectedDocument)"
+            class="split-switch"
+          />
+          <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
+ * */
+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", "updatedDocument"]),
+    ...mapState("document", ["splittingSuggestions", "selectedDocument"]),
+    ...mapGetters("document", ["documentHasProposedSplit"]),
+  },
+  watch: {
+    selectedPages(newValue) {
+      if (newValue.length > 0) {
+        this.buttonDisabled = false;
+      } else {
+        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");
+    },
+    rotateRight() {
+      this.$emit("rotate", "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/RenameAndCategorize.vue

@@ -1,184 +1,184 @@
-<template>
-  <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: '#1a1a1a', cursor: 'pointer' }"
-        />
-      </div>
-      <div class="back-text">
-        {{ $t("rotate_split_reorder") }}
-      </div>
-    </div>
-    <div class="rename-and-categorize-title">
-      {{ $t("rename_and_categorize") }}
-    </div>
-    <div class="new-documents-container">
-      <div
-        v-for="(page, index) in updatedDocument"
-        :key="index"
-        class="document-details"
-      >
-        <div class="rename-and-categorize-thumbnails">
-          <div class="split-documents">
-            <div
-              class="image-container"
-              @click="handlePageChange(page.pages[0].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: "RenameAndCategorize",
-  components: {
-    DocumentCategory,
-    ServerImage,
-    EyeIcon,
-  },
-  props: {
-    fileName: {
-      type: String,
-      default: "",
-    },
-    fileExtension: {
-      type: String,
-      default: "",
-    },
-  },
-  data() {
-    return {
-      splitMode: true,
-      updatedFileName: null,
-    };
-  },
-  computed: {
-    ...mapState("document", ["selectedDocument", "pages"]),
-    ...mapState("edit", ["updatedDocument", "pagesForPostprocess"]),
-  },
-
-  methods: {
-    handleBackButton() {
-      this.$store.dispatch("edit/setRenameAndCategorize", 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.pagesForPostprocess || !this.pages || !page) return;
-
-      // returns the first thumbnail in the pages array
-      // for each new document
-      const image = this.pagesForPostprocess.find(
-        (p) => p.number === page.pages[0].number
-      );
-
-      return `${image.thumbnail_url}?${image.updated_at}`;
-    },
-    getRotation(pageId) {
-      // rotate page
-      return this.pagesForPostprocess?.find((p) => p.id === pageId)?.angle;
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>
+<template>
+  <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: '#1a1a1a', cursor: 'pointer' }"
+        />
+      </div>
+      <div class="back-text">
+        {{ $t("rotate_split_reorder") }}
+      </div>
+    </div>
+    <div class="rename-and-categorize-title">
+      {{ $t("rename_and_categorize") }}
+    </div>
+    <div class="new-documents-container">
+      <div
+        v-for="(page, index) in updatedDocument"
+        :key="index"
+        class="document-details"
+      >
+        <div class="rename-and-categorize-thumbnails">
+          <div class="split-documents">
+            <div
+              class="image-container"
+              @click="handlePageChange(page.pages[0].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: "RenameAndCategorize",
+  components: {
+    DocumentCategory,
+    ServerImage,
+    EyeIcon,
+  },
+  props: {
+    fileName: {
+      type: String,
+      default: "",
+    },
+    fileExtension: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      splitMode: true,
+      updatedFileName: null,
+    };
+  },
+  computed: {
+    ...mapState("document", ["selectedDocument", "pages"]),
+    ...mapState("edit", ["updatedDocument", "pagesForPostprocess"]),
+  },
+
+  methods: {
+    handleBackButton() {
+      this.$store.dispatch("edit/setRenameAndCategorize", 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.pagesForPostprocess || !this.pages || !page) return;
+
+      // returns the first thumbnail in the pages array
+      // for each new document
+      const image = this.pagesForPostprocess.find(
+        (p) => p.number === page.pages[0].number
+      );
+
+      return `${image.thumbnail_url}?${image.updated_at}`;
+    },
+    getRotation(pageId) {
+      // rotate page
+      return this.pagesForPostprocess?.find((p) => p.id === pageId)?.angle;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_edit.scss"></style>