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

package/src/components/DocumentsList/DocumentsList.vue

@@ -1,121 +1,121 @@
-<template>
-  <div
-    v-if="documentsAvailableToReview && documentsAvailableToReview.length > 0"
-    class="documents-list"
-  >
-    <div v-if="showCategoryInfo && selectedCategory" class="documents-list-top">
-      <div class="documents-list-top-left">
-        <h2>{{ selectedCategory.name }}</h2>
-        <p>
-          {{ selectedCategory.description }}
-        </p>
-      </div>
-      <div class="documents-list-top-right">
-        <div class="action-box">
-          <span>{{ $t("upload_documents") }}</span>
-          <b-button
-            class="action-button primary-button"
-            type="is-primary"
-            @click="requestTrialAccess"
-          >
-            {{ $t("request_trial") }}
-          </b-button>
-        </div>
-      </div>
-    </div>
-    <div class="documents-list-bottom">
-      <b-carousel-list :data="documentsAvailableToReview" :items-to-show="5">
-        <template #item="document">
-          <div
-            :class="[
-              'documents-list-thumbnail',
-              selectedDocument.id == document.id && 'selected',
-            ]"
-            @click="changeDocument(document.id)"
-          >
-            <ServerImage
-              :class="[
-                'img-thumbnail',
-                selectedDocument.id == document.id && 'selected',
-              ]"
-              :image-url="`${document.thumbnail_url}?${document.updated_at}`"
-            >
-              <b-skeleton width="20px" height="100%" />
-            </ServerImage>
-            <div
-              :class="[
-                'document-name',
-                selectedDocument.id == document.id && 'selected',
-              ]"
-            >
-              <!-- if is the current document, then we use the store variable to get the file name edits in real time -->
-              {{
-                selectedDocument.id == document.id
-                  ? selectedDocument.data_file_name
-                  : document.data_file_name
-              }}
-            </div>
-            <div
-              v-if="documentHadErrorDuringExtraction(document)"
-              class="error-icon"
-            >
-              <ErrorIcon />
-            </div>
-          </div>
-        </template>
-      </b-carousel-list>
-    </div>
-  </div>
-</template>
-<script>
-import { mapGetters, mapState } from "vuex";
-import ServerImage from "../../assets/images/ServerImage";
-import ErrorIcon from "../../assets/images/ErrorIcon";
-import {
-  getURLQueryParam,
-  navigateToNewDocumentURL,
-  getURLPath,
-} from "../../utils/utils";
-
-/**
- * This component creates a horizontal list of documents
- * with thumbnail pictures which are clickable.
- */
-
-export default {
-  name: "DocumentsList",
-  components: {
-    ServerImage,
-    ErrorIcon,
-  },
-  data() {
-    return {
-      showCategoryInfo: false,
-      selectedCategory: null,
-      documentsList: null,
-    };
-  },
-  computed: {
-    ...mapState("document", ["selectedDocument"]),
-    ...mapState("category", ["documentsAvailableToReview"]),
-    ...mapGetters("category", ["category"]),
-    ...mapGetters("document", ["documentHadErrorDuringExtraction"]),
-  },
-  watch: {
-    showCategoryInfo(newValue) {
-      if (newValue) {
-        this.selectedCategory = this.category(this.selectedDocument.category);
-      }
-    },
-  },
-  methods: {
-    changeDocument(documentId) {
-      this.$store.dispatch("document/changeCurrentDocument", documentId);
-    },
-    requestTrialAccess() {
-      window.open("https://konfuzio.com", "_blank");
-    },
-  },
-};
-</script>
-<style scoped lang="scss" src="../../assets/scss/documents_list.scss"></style>
+<template>
+  <div
+    v-if="documentsAvailableToReview && documentsAvailableToReview.length > 0"
+    class="documents-list"
+  >
+    <div v-if="showCategoryInfo && selectedCategory" class="documents-list-top">
+      <div class="documents-list-top-left">
+        <h2>{{ selectedCategory.name }}</h2>
+        <p>
+          {{ selectedCategory.description }}
+        </p>
+      </div>
+      <div class="documents-list-top-right">
+        <div class="action-box">
+          <span>{{ $t("upload_documents") }}</span>
+          <b-button
+            class="action-button primary-button"
+            type="is-primary"
+            @click="requestTrialAccess"
+          >
+            {{ $t("request_trial") }}
+          </b-button>
+        </div>
+      </div>
+    </div>
+    <div class="documents-list-bottom">
+      <b-carousel-list :data="documentsAvailableToReview" :items-to-show="5">
+        <template #item="document">
+          <div
+            :class="[
+              'documents-list-thumbnail',
+              selectedDocument.id == document.id && 'selected',
+            ]"
+            @click="changeDocument(document.id)"
+          >
+            <ServerImage
+              :class="[
+                'img-thumbnail',
+                selectedDocument.id == document.id && 'selected',
+              ]"
+              :image-url="`${document.thumbnail_url}?${document.updated_at}`"
+            >
+              <b-skeleton width="20px" height="100%" />
+            </ServerImage>
+            <div
+              :class="[
+                'document-name',
+                selectedDocument.id == document.id && 'selected',
+              ]"
+            >
+              <!-- if is the current document, then we use the store variable to get the file name edits in real time -->
+              {{
+                selectedDocument.id == document.id
+                  ? selectedDocument.data_file_name
+                  : document.data_file_name
+              }}
+            </div>
+            <div
+              v-if="documentHadErrorDuringExtraction(document)"
+              class="error-icon"
+            >
+              <ErrorIcon />
+            </div>
+          </div>
+        </template>
+      </b-carousel-list>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters, mapState } from "vuex";
+import ServerImage from "../../assets/images/ServerImage";
+import ErrorIcon from "../../assets/images/ErrorIcon";
+import {
+  getURLQueryParam,
+  navigateToNewDocumentURL,
+  getURLPath,
+} from "../../utils/utils";
+
+/**
+ * This component creates a horizontal list of documents
+ * with thumbnail pictures which are clickable.
+ */
+
+export default {
+  name: "DocumentsList",
+  components: {
+    ServerImage,
+    ErrorIcon,
+  },
+  data() {
+    return {
+      showCategoryInfo: false,
+      selectedCategory: null,
+      documentsList: null,
+    };
+  },
+  computed: {
+    ...mapState("document", ["selectedDocument"]),
+    ...mapState("category", ["documentsAvailableToReview"]),
+    ...mapGetters("category", ["category"]),
+    ...mapGetters("document", ["documentHadErrorDuringExtraction"]),
+  },
+  watch: {
+    showCategoryInfo(newValue) {
+      if (newValue) {
+        this.selectedCategory = this.category(this.selectedDocument.category);
+      }
+    },
+  },
+  methods: {
+    changeDocument(documentId) {
+      this.$store.dispatch("document/changeCurrentDocument", documentId);
+    },
+    requestTrialAccess() {
+      window.open("https://konfuzio.com", "_blank");
+    },
+  },
+};
+</script>
+<style scoped lang="scss" src="../../assets/scss/documents_list.scss"></style>

package/src/components/DocumentsList/index.js

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

package/src/components/ErrorMessage.vue

@@ -1,40 +1,40 @@
-<template>
-  <b-message>
-    <div v-if="serverError" class="message-container">
-      <span class="server-error">
-        {{ errorMessage }}
-        <span class="contact-support" @click="handleGetSupport">
-          {{ $t("get_support") }} <b-icon icon="arrow-right" size="is-small"
-        /></span>
-      </span>
-    </div>
-    <div v-else class="message-container">
-      {{ errorMessage }}
-    </div>
-    <div class="btn-container" type="button" @click="handleErrorClose">
-      <b-icon icon="xmark" class="close-btn error-icon" size="is-small" />
-    </div>
-  </b-message>
-</template>
-
-<script>
-import { mapState } from "vuex";
-
-export default {
-  name: "ErrorMessage",
-  computed: {
-    ...mapState("document", ["errorMessage", "serverError"]),
-  },
-  methods: {
-    handleGetSupport() {
-      const error = "Server error";
-      this.$store.dispatch("document/contactSupport", error);
-    },
-    handleErrorClose() {
-      this.$store.dispatch("document/setErrorMessage", null);
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss" src="../assets/scss/variables.scss"></style>
+<template>
+  <b-message>
+    <div v-if="serverError" class="message-container">
+      <span class="server-error">
+        {{ errorMessage }}
+        <span class="contact-support" @click="handleGetSupport">
+          {{ $t("get_support") }} <b-icon icon="arrow-right" size="is-small"
+        /></span>
+      </span>
+    </div>
+    <div v-else class="message-container">
+      {{ errorMessage }}
+    </div>
+    <div class="btn-container" type="button" @click="handleErrorClose">
+      <b-icon icon="xmark" class="close-btn error-icon" size="is-small" />
+    </div>
+  </b-message>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "ErrorMessage",
+  computed: {
+    ...mapState("document", ["errorMessage", "serverError"]),
+  },
+  methods: {
+    handleGetSupport() {
+      const error = "Server error";
+      this.$store.dispatch("document/contactSupport", error);
+    },
+    handleErrorClose() {
+      this.$store.dispatch("document/setErrorMessage", null);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../assets/scss/variables.scss"></style>

package/src/components/index.js

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

package/src/constants.js

@@ -1,5 +1,5 @@
-export const PIXEL_RATIO = window.devicePixelRatio || 1;
-export const VIEWPORT_RATIO = 0.98;
-export const MINIMUM_APP_WIDTH = 600;
-export const MINIMUM_OPTIMIZED_APP_WIDTH = 950;
-export const MULTI_ANN_TABLE_FEATURE = false;
+export const PIXEL_RATIO = window.devicePixelRatio || 1;
+export const VIEWPORT_RATIO = 0.98;
+export const MINIMUM_APP_WIDTH = 600;
+export const MINIMUM_OPTIMIZED_APP_WIDTH = 950;
+export const MULTI_ANN_TABLE_FEATURE = false;

package/src/directives/scroll.js

@@ -1,28 +1,28 @@
-function inserted(el, binding) {
-  const callback = binding.value;
-  if (binding.modifiers.immediate) {
-    callback();
-  }
-  const throttledScroll = throttle(callback, 300);
-  el.addEventListener("scroll", throttledScroll, true);
-}
-
-function throttle(callback, limit) {
-  var waiting = false; // Initially, we're not waiting
-  return function() {
-    // We return a throttled function
-    if (!waiting) {
-      // If we're not waiting
-      callback.apply(this, arguments); // Execute users function
-      waiting = true; // Prevent future invocations
-      setTimeout(function() {
-        // After a period of time
-        waiting = false; // And allow future invocations
-      }, limit);
-    }
-  };
-}
-
-export default {
-  inserted
-};
+function inserted(el, binding) {
+  const callback = binding.value;
+  if (binding.modifiers.immediate) {
+    callback();
+  }
+  const throttledScroll = throttle(callback, 300);
+  el.addEventListener("scroll", throttledScroll, true);
+}
+
+function throttle(callback, limit) {
+  var waiting = false; // Initially, we're not waiting
+  return function() {
+    // We return a throttled function
+    if (!waiting) {
+      // If we're not waiting
+      callback.apply(this, arguments); // Execute users function
+      waiting = true; // Prevent future invocations
+      setTimeout(function() {
+        // After a period of time
+        waiting = false; // And allow future invocations
+      }, limit);
+    }
+  };
+}
+
+export default {
+  inserted
+};

package/src/i18n.js

@@ -1,23 +1,23 @@
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
-
-Vue.use(VueI18n)
-
-function loadLocaleMessages() {
-  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
-  const messages = {}
-  locales.keys().forEach(key => {
-    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
-    if (matched && matched.length > 1) {
-      const locale = matched[1]
-      messages[locale] = locales(key)
-    }
-  })
-  return messages
-}
-
-export default new VueI18n({
-  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
-  fallbackLocale: 'en',
-  messages: loadLocaleMessages()
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+
+Vue.use(VueI18n)
+
+function loadLocaleMessages() {
+  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
+  const messages = {}
+  locales.keys().forEach(key => {
+    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
+    if (matched && matched.length > 1) {
+      const locale = matched[1]
+      messages[locale] = locales(key)
+    }
+  })
+  return messages
+}
+
+export default new VueI18n({
+  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
+  fallbackLocale: 'en',
+  messages: loadLocaleMessages()
 })

package/src/icons.js

@@ -1,45 +1,45 @@
-// internal icons
-import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-  faArrowUp,
-  faAngleRight,
-  faAngleLeft,
-  faAngleUp,
-  faAngleDown,
-  faSpinner,
-  faPlus,
-  faXmark,
-  faEllipsisVertical,
-  faCircleInfo,
-  faArrowRotateLeft,
-  faArrowRotateRight,
-  faScissors,
-  faRepeat,
-  faArrowLeft,
-  faArrowRight,
-  faDownload,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon as Icons } from "@fortawesome/vue-fontawesome";
-
-library.add(
-  faArrowUp,
-  faAngleRight,
-  faAngleLeft,
-  faAngleUp,
-  faAngleDown,
-  faSpinner,
-  faXmark,
-  faSpinner,
-  faPlus,
-  faEllipsisVertical,
-  faCircleInfo,
-  faArrowRotateLeft,
-  faArrowRotateRight,
-  faScissors,
-  faRepeat,
-  faArrowLeft,
-  faArrowRight,
-  faDownload
-);
-
-export default Icons;
+// internal icons
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+  faArrowUp,
+  faAngleRight,
+  faAngleLeft,
+  faAngleUp,
+  faAngleDown,
+  faSpinner,
+  faPlus,
+  faXmark,
+  faEllipsisVertical,
+  faCircleInfo,
+  faArrowRotateLeft,
+  faArrowRotateRight,
+  faScissors,
+  faRepeat,
+  faArrowLeft,
+  faArrowRight,
+  faDownload,
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon as Icons } from "@fortawesome/vue-fontawesome";
+
+library.add(
+  faArrowUp,
+  faAngleRight,
+  faAngleLeft,
+  faAngleUp,
+  faAngleDown,
+  faSpinner,
+  faXmark,
+  faSpinner,
+  faPlus,
+  faEllipsisVertical,
+  faCircleInfo,
+  faArrowRotateLeft,
+  faArrowRotateRight,
+  faScissors,
+  faRepeat,
+  faArrowLeft,
+  faArrowRight,
+  faDownload
+);
+
+export default Icons;