@konfuzio/document-validation-ui 0.1.29-dev.2 → 0.1.29-dev.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.29-dev.2",
+  "version": "0.1.29-dev.4",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/assets/scss/error_page.scss

@@ -0,0 +1,14 @@
+@import "./imports.scss";
+
+.error-page {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 16px;
+  .error-icon {
+    color: $red;
+  }
+}

package/src/assets/scss/theme.scss

@@ -39,6 +39,16 @@
   -ms-text-size-adjust: 100%;
   text-size-adjust: 100%;
   box-sizing: border-box;
+
+  h1 {
+    font-size: 48px;
+    color: $text-color;
+  }
+  h2 {
+    font-size: 24px;
+    color: $text-color;
+  }
+
   button {
     &.is-primary {
       background-color: $primary !important;
@@ -621,6 +631,13 @@
     margin: 0 !important;
   }
 
+  .icon.is-48 {
+    svg {
+      height: 48px;
+      width: 48px;
+    }
+  }
+
   .icon.is-24 {
     svg {
       height: 24px;

package/src/components/App.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="dv-ui-app-container dv-ui-theme">
     <DocumentsList v-if="showDocumentsList" />
-    <DocumentDashboard />
+    <DocumentDashboard v-if="!pageError" />
+    <ErrorPage v-else :error="pageError" />
   </div>
 </template>
 <script>
 import Vue from "vue";
+import { mapState } from "vuex";
 import * as Sentry from "@sentry/vue";
 import DocumentDashboard from "./DocumentDashboard";
+import ErrorPage from "./ErrorPage";
 import { DocumentsList } from "./DocumentsList";
 import { getURLQueryParam, getURLPath } from "../utils/utils";
 import { Integrations } from "@sentry/tracing";
@@ -18,6 +21,7 @@ export default {
   components: {
     DocumentsList,
     DocumentDashboard,
+    ErrorPage,
   },
   props: {
     document: {
@@ -86,6 +90,7 @@ export default {
     },
   },
   computed: {
+    ...mapState("display", ["pageError"]),
     documentId() {
       if (getURLQueryParam("document")) {
         return getURLQueryParam("document");

package/src/components/DocumentPage/DocumentToolbar.vue

@@ -25,7 +25,7 @@
       </b-tooltip>
       <div v-if="isEditModeAvailable" class="toolbar-divider" />
       <div
-        v-if="!publicView"
+        v-if="!publicView && !editMode"
         class="search-document icons"
         @click="toggleSearch"
       >
@@ -115,6 +115,7 @@ export default {
   },
   computed: {
     ...mapState("display", ["scale"]),
+    ...mapState("edit", ["editMode"]),
     ...mapGetters("edit", ["isEditModeAvailable"]),
     ...mapState("document", [
       "selectedDocument",

package/src/components/ErrorPage.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="error-page">
+    <b-icon icon="circle-exclamation" size="is-48" class="error-icon" />
+    <h1>
+      {{ $t("document_error_title") }}
+    </h1>
+    <h2>
+      {{ error ? error : "" }}
+    </h2>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ErrorPage",
+  props: {
+    error: {
+      type: String,
+      required: false,
+      default: null,
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="../assets/scss/error_page.scss"></style>

package/src/icons.js

@@ -21,6 +21,7 @@ import {
   faSearch,
   faTrashArrowUp,
   faFloppyDisk,
+  faCircleExclamation,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as Icons } from "@fortawesome/vue-fontawesome";
 
@@ -45,7 +46,8 @@ library.add(
   faDownload,
   faSearch,
   faTrashArrowUp,
-  faFloppyDisk
+  faFloppyDisk,
+  faCircleExclamation
 );
 
 export default Icons;

package/src/store/display.js

@@ -42,6 +42,7 @@ const state = {
   currentSearchResult: null,
   detailsUrl: null,
   reviewFilter: false,
+  pageError: null,
 };
 
 const getters = {
@@ -342,6 +343,10 @@ const actions = {
     commit("SET_CURRENT_SEARCH", currentSearch);
   },
 
+  setPageError({ commit }, value) {
+    commit("SET_PAGE_ERROR", value);
+  },
+
   setCurrentSearchResult({ commit, state }, n) {
     let newSearchResult = state.currentSearchResult + n;
     const searchResultsMaxIndex = state.searchResults.length - 1;
@@ -425,6 +430,9 @@ const mutations = {
   SET_REVIEW_FILTER: (state, value) => {
     state.reviewFilter = value;
   },
+  SET_PAGE_ERROR: (state, value) => {
+    state.pageError = value;
+  },
 };
 
 export default {

package/src/store/document.js

@@ -907,6 +907,9 @@ const actions = {
       })
       .catch((error) => {
         console.log(error, "Could not fetch document details from the backend");
+        dispatch("display/setPageError", error.response.data.detail, {
+          root: true,
+        });
         return;
       });