@konfuzio/document-validation-ui 0.1.1

package/src/components/DocumentTopBar/DocumentTopBarButtons.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="buttons">
+    <div v-if="editMode" class="edit-mode-buttons">
+      <b-button
+        :label="$t('cancel')"
+        class="button-cancel"
+        type="is-default"
+        @click="closeEditMode"
+      />
+      <b-button
+        :label="
+          editMode &&
+          updatedDocument &&
+          updatedDocument.length > 1 &&
+          !splitOverview
+            ? $t('next')
+            : $t('submit')
+        "
+        type="is-primary"
+        :disabled="false"
+        class="button-next"
+        @click="handleButton"
+      />
+    </div>
+
+    <div
+      v-if="!editMode && !selectedDocument.is_reviewed && !publicView"
+      class="finish-review-button-container"
+    >
+      <ActionButtons
+        :finish-review-btn="finishReviewBtn"
+        :finish-disabled="finishDisabled"
+        :is-loading="isLoading"
+        @finish-review="handleFinishReview"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import ActionButtons from "../DocumentAnnotations/ActionButtons";
+
+export default {
+  name: "DocumentTopBarButtons",
+  components: {
+    ActionButtons,
+  },
+  data() {
+    return {
+      finishReviewBtn: true,
+      finishDisabled: true,
+      emptyLabels: null,
+      isLoading: false,
+    };
+  },
+
+  computed: {
+    ...mapState("document", [
+      "selectedDocument",
+      "publicView",
+      "finishedReview",
+    ]),
+    ...mapState("edit", ["editMode", "splitOverview", "updatedDocument"]),
+  },
+
+  watch: {
+    finishedReview(newValue) {
+      if (newValue) {
+        this.finishDisabled = false;
+      } else {
+        this.finishDisabled = true;
+      }
+    },
+    publicView(newValue) {
+      if (newValue) {
+        this.finishDisabled = true;
+      }
+    },
+  },
+  mounted() {
+    this.finishDisabled = !this.finishedReview;
+  },
+  methods: {
+    /** EDIT MODE */
+    closeEditMode() {
+      this.$store.dispatch("edit/disableEditMode");
+      this.$store.dispatch("edit/setSplitOverview", false);
+      this.$store.dispatch("edit/setUpdatedDocument", null);
+      this.$store.dispatch("edit/setSelectedPages", null);
+      this.$nextTick(() => {
+        // reset to first page
+        this.$store.dispatch("display/updateCurrentPage", 1);
+      });
+    },
+    handleButton() {
+      // Check if we are not in the split overview
+      // and if we have a split document
+      if (!this.splitOverview && this.updatedDocument.length > 1) {
+        // Enable the "next" button to go to the overview
+        this.$store.dispatch("edit/setSplitOverview", true);
+        this.$store.dispatch("edit/setSelectedPages", null);
+      }
+
+      // If we are in the overview (so more than 1 doc)
+      // or in the edit mode (only 1 doc)
+      else if (this.updatedDocument) {
+        // Send update request to the backend
+        this.$store
+          .dispatch("edit/editDocument", this.updatedDocument)
+          .catch((error) => {
+            this.$store.dispatch("document/createErrorMessage", {
+              error,
+              serverErrorMessage: this.$t("server_error"),
+              defaultErrorMessage: this.$t("edit_error"),
+            });
+          });
+
+        // Close edit mode
+        this.closeEditMode();
+      }
+    },
+    handleFinishReview() {
+      // update document
+      const updatedDocumentReviewStatus = {
+        is_reviewed: true,
+      };
+
+      this.isLoading = true;
+
+      this.$store
+        .dispatch("document/updateDocument", updatedDocumentReviewStatus)
+        .catch((error) => {
+          this.$store.dispatch("document/createErrorMessage", {
+            error,
+            serverErrorMessage: this.$t("server_error"),
+            defaultErrorMessage: this.$t("review_error"),
+          });
+        })
+        .finally(() => {
+          this.isLoading = false;
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_top_bar.scss"></style>

package/src/components/DocumentTopBar/KeyboardActionsDescription.vue

@@ -0,0 +1,71 @@
+<template>
+  <div
+    v-if="!publicView && !selectedDocument.is_reviewed && !editMode"
+    class="keyboard-actions-description"
+  >
+    <section class="b-tooltips">
+      <b-tooltip position="is-left" size="is-large" class="left-down-aligned">
+        <KeyboardIcon />
+
+        <template #content>
+          <div class="tooltip-title">
+            {{ $t("use_your_keyboard") }}
+          </div>
+
+          <div class="tooltip-description">
+            <div class="content-line">
+              <div class="action-item">
+                <div class="key"><ArrowUpKey /></div>
+                <div class="key"><ArrowDownKey /></div>
+                <div class="keyboard-action-text">{{ $t("arrow_keys") }}</div>
+              </div>
+
+              <div class="tooltip-divider"></div>
+
+              <div class="action-item">
+                <div class="key">{{ "ESC" }}</div>
+                <div class="keyboard-action-text">{{ $t("esc_key") }}</div>
+              </div>
+            </div>
+
+            <div class="content-line">
+              <div class="action-item">
+                <div class="key">{{ "ENTER" }}</div>
+                <div class="keyboard-action-text">{{ $t("enter_key") }}</div>
+              </div>
+
+              <div class="tooltip-divider"></div>
+
+              <div class="action-item">
+                <div class="key">{{ "DELETE" }}</div>
+                <div class="keyboard-action-text">{{ $t("delete_key") }}</div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </b-tooltip>
+    </section>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import KeyboardIcon from "../../assets/images/KeyboardIcon";
+import ArrowUpKey from "../../assets/images/ArrowUpKey";
+import ArrowDownKey from "../../assets/images/ArrowDownKey";
+
+export default {
+  name: "KeyboardActionsDescription",
+  components: {
+    KeyboardIcon,
+    ArrowUpKey,
+    ArrowDownKey,
+  },
+  computed: {
+    ...mapState("edit", ["editMode"]),
+    ...mapState("document", ["selectedDocument", "publicView"]),
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../../assets/scss/document_top_bar.scss"></style>

package/src/components/DocumentTopBar/index.js

@@ -0,0 +1,5 @@
+export { default as DocumentTopBar } from "./DocumentTopBar";
+export { default as DocumentName } from "./DocumentName";
+export { default as DatasetStatus } from "./DocumentDatasetStatus";
+export { default as Handover } from "./DocumentHandover";
+export { default as DocumentTopBarButtons } from "./DocumentTopBarButtons";

package/src/components/DocumentsList/DocumentsList.vue

@@ -0,0 +1,126 @@
+<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"
+            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";
+
+/**
+ * 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/setDocId", documentId);
+      this.$store.dispatch("document/fetchDocument");
+    },
+    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

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

package/src/components/ErrorMessage.vue

@@ -0,0 +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>

package/src/components/NotOptimizedViewportModal.vue

@@ -0,0 +1,54 @@
+<template>
+  <section class="viewport-modal">
+    <b-modal
+      v-model="isModalActive"
+      class="modal-text-center"
+      :width="500"
+    >
+      <section class="modal-card-body">
+        <div class="image">
+          <Illustration />
+        </div>
+        <div class="content">
+          <h3>{{ $t("small_viewport_title") }}</h3>
+          <p>{{ $t("small_viewport_info") }}</p>
+        </div>
+      </section>
+      <footer class="modal-card-foot">
+        <b-button
+          type="is-primary"
+          @click="handleNotOptimizedModal"
+        >
+          {{ $t("ok") }}
+        </b-button>
+      </footer>
+    </b-modal>
+  </section>
+</template>
+
+<script>
+import Illustration from "../assets/images/NotOptimizedIllustration";
+
+export default {
+  name: "NotOptimizedViewportModal",
+  components: {
+    Illustration
+  },
+  data() {
+    return {
+      isModalActive: true
+    };
+  },
+  methods: {
+    handleNotOptimizedModal() {
+      this.isModalActive = false;
+    }
+  }
+};
+</script>
+
+<style
+  scoped
+  lang="scss"
+  src="../assets/scss/document_viewport_modal.scss"
+></style>

package/src/constants.js

@@ -0,0 +1,4 @@
+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 = 1024;

package/src/directives/scroll.js

@@ -0,0 +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
+};

package/src/i18n.js

@@ -0,0 +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()
+})

package/src/locales/de.json

@@ -0,0 +1,114 @@
+{
+  "no_label_sets_found": "Keine Label Sets vorhanden",
+  "no_label_sets_found_description": "In diesem Dokument sind keine Label Sets vorhanden.",
+  "no_labels_found": "Keine Labels vorhanden",
+  "no_labels_description": "In diesem Label Set sind keine Labels vorhanden.",
+  "resolution_not_supported": "Die App wird bei dieser Auflösung nicht unterstützt",
+  "upload_documents": "Laden Sie Ihre Dokumente hoch",
+  "request_trial": "Fordern Sie Ihren Probezugang an",
+  "warning_message": "Die KI kann nicht trainiert werden, wenn Sie den Text manuell ändern.",
+  "category": "Kategorie",
+  "status": "Status",
+  "preparation": "Vorbereitung",
+  "training": "Training",
+  "test": "Test",
+  "excluded": "Ausgenommen",
+  "set_status": "Setzen Sie bitte einen Status",
+  "category_error": "Die Kategorie kann nicht geändert werden, da bereits akzeptierte Annotationen oder manuell erstellte Annotationen zu diesem Dokument vorhanden sind.",
+  "status_error": "Wir konnten den Status nicht ändern. Bitte versuchen Sie es später erneut.",
+  "edit": "Bearbeiten",
+  "save": "Speichern",
+  "autosaving": "Automatisches Speichern...",
+  "saved": "Gespeichert",
+  "not_saved": "Konnte nicht gespeichert werden. Versuchen Sie es noch einmal",
+  "handover": "Übergeben",
+  "handover_document": "Übergabedokument",
+  "type_email": "Bitte geben Sie eine E-Mail ein",
+  "invalid_email": "Bitte geben Sie eine gültige E-Mail-Adresse ein.",
+  "members": "Mitglieder",
+  "select": "Auswählen",
+  "document_successfully_handed": "Dokument erfolgreich übergeben an",
+  "handover_not_possible": "Eine Übergabe war nicht möglich. Bitte versuchen Sie es später erneut.",
+  "small_viewport_title": "Kleine Ansichtsfenstergröße",
+  "small_viewport_info": "Es tut uns leid, aber Konfuzio ist nicht für diese Ansichtsfenstergröße optimiert. Für eine bessere Bedienbarkeit öffnen Sie es bitte in einem größeren Ansichtsfenster.",
+  "ok": "Ok, verstanden",
+  "no_data_found": "Zum Bearbeiten anklicken...",
+  "draw_box_document": "Find <i>{label_name}</i> in the document",
+  "accuracy": "Genauigkeit",
+  "not_found_in_document": "Im Dokument nicht gefunden",
+  "approved_by": "Genehmigt von",
+  "approved": "Genehmigt",
+  "created_by": "Erstellt von",
+  "edited_by": "Bearbeitet durch",
+  "edited": "Bearbeitet",
+  "created": "Manuell erzeugt",
+  "not_revised_yet": "Noch nicht geprüft",
+  "rotate_pages": "Seiten drehen",
+  "rotate_all": "Alles drehen",
+  "cancel": "Beenden",
+  "apply": "Anwenden",
+  "data_being_extracted": "Neue Daten werden extrahiert",
+  "analysing_document": "Wir analysieren Ihr Dokument.",
+  "few_minutes": "Dies könnte ein paar Minuten dauern.",
+  "reject_label": "Ablehnen",
+  "rejected": "Abgelehnt",
+  "ann_exists": "Eine Annotation für dieses Label und Label-Set existiert bereits.",
+  "lite_mode": "Schreibgeschützt",
+  "limited_functionalities": "Sie verwenden die schreibgeschützte Version mit begrenzten Funktionalitäten.",
+  "split": "Aufteilen",
+  "reorder": "Umsortieren",
+  "edit_error": "Die Änderungen konnten nicht gespeichert werden. Bitte versuchen Sie es später erneut.",
+  "overview": "Übersicht",
+  "select_pages": "Sie können nun Seiten drehen, neu sortieren und Dokumente splitten.",
+  "edit_document": "Dokument bearbeiten (Early Access)",
+  "edit_early_access": "Sie sind einer der Nutzer, die Zugang zu diesen Funktionalitäten vor dem offiziellen Erscheinungstermin erhalten.",
+  "selected": "ausgewählt",
+  "rotate_selected": "Ausgewählte Seite drehen",
+  "edit_not_available": "Dokumente mit dem Status 'Vorbereitung', 'Training' oder 'Test' sowie Dokumente mit dem Status 'Schreibgeschützt' oder 'Geprüft' können nicht bearbeitet werden.",
+  "back_to_edit": "Zurück zum Bearbeiten Modus",
+  "split_document": "Dokument aufteilen",
+  "submit": "Senden",
+  "next": "Weiter",
+  "select_label": "Label auswählen",
+  "select_annotation_set": "Wähle Annotation Set",
+  "accept": "Akzeptieren",
+  "document_error_title": "Dokumentenfehler",
+  "document_error_info": "Es tut uns leid, das Dokument ist auf ein Problem gestoßen und seine Daten können nicht wiederhergestellt werden.",
+  "contact_support": "Support kontaktieren",
+  "finish_review": "Nachprüfung beenden",
+  "review_error": "Beim Abschluss der Überprüfung ist etwas schief gelaufen. Bitte versuchen Sie es später erneut.",
+  "document_reviewed": "Eine Bearbeitung ist nicht mehr möglich, da das Dokument bereits geprüft wurde.",
+  "reviewed_mode": "Geprüft",
+  "error_creating_annotation": "Die Annotation konnte nicht erzeugt werden. Bitte versuchen Sie es später erneut.",
+  "categorize_document_title": "Dokument Kategorisieren",
+  "categorized_as": "Dieses Dokument ist kategorisiert als",
+  "not_categorized": "Nicht kategorisiert. Bitte wählen Sie vor dem Annotieren eine Kategorie aus: ",
+  "choose_category": "Wählen Sie bitte eine Kategorie",
+  "select_category": "Wählen Sie bitte die richtige Kategorie aus.",
+  "categorized_error": "Wenn dies nicht die richtige Kategorie ist, ändern Sie diese bitte und wir fahren mit der erneuten Extraktion fort.",
+  "categorize_document_no_category_description": "Bitten Sie den Projektmanager, eine Beschreibung dieser Kategorie hinzuzufügen, um mehr über diese Kategorie zu erfahren.",
+  "annotations_pending": "Ausstehende Annotationen",
+  "annotations_accepted": "Akzeptierte Annotationen",
+  "reject_all_empty": "Alle fehlenden Annotationen ablehnen",
+  "no_labels_to_choose": "Keine Labels",
+  "accept_group": "Alle akzeptieren",
+  "use_your_keyboard": "Benutze deine Tastatur",
+  "arrow_keys": "Navigieren",
+  "esc_key": "Exit",
+  "enter_key": "Akzeptieren oder Speichern",
+  "delete_key": "Ablehnen",
+  "decline": "Decline",
+  "server_error": "We are currently experiencing a server issue. Please try again later or",
+  "get_support": "Get Support",
+  "no_labels_available": "Das ausgewählte Annotations-Set enthält keine nicht ausgefüllten oder multiplen Labels.",
+  "new_ann_set_title": "Neues Annotations-Set",
+  "new_ann_set_description": "Wählen Sie ein Datenmodell aus den vorhandenen aus. Das neue Annotations-Set enthält dieselben Beschriftungen.",
+  "select_label_set": "Wählen Sie das Label-Set-Modell aus",
+  "new_ann_set_hint": "Das neue Set wird erst in dem Moment erstellt, in dem Sie Ihre Annotationen speichern.",
+  "new": "Neu",
+  "continue": "Weiter",
+  "new_multi_ann_title": "Erstellen Sie mehrere Annotationen",
+  "new_multi_ann_description": "Wählen Sie ein Datenmodell aus den vorhandenen aus und deaktivieren Sie dann die Labels, die in diesem Dokument nicht vorhanden sind.",
+  "drag_drop_columns_multi_ann": "Drag and Drop, um die Reihenfolge der Labels zu ändern",
+  "error_creating_multi_ann": "Nicht alle Annotationen wurden erfolgreich erstellt."
+}