@konfuzio/document-validation-ui 0.1.5-pre-release-1 → 0.1.5-styles-refactor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.5-pre-release-1",
+  "version": "0.1.5-styles-refactor",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {

package/src/api.js

@@ -1,7 +1,5 @@
 import axios from "axios";
-import {
-  cacheAdapterEnhancer
-} from 'axios-extensions';
+import { cacheAdapterEnhancer } from "axios-extensions";
 
 let HTTP, IMG_REQUEST, authToken;
 const DEFAULT_URL = "https://app.konfuzio.com";
@@ -10,40 +8,52 @@ axios.defaults.xsrfCookieName = "csrftoken";
 axios.defaults.xsrfHeaderName = "X-CSRFToken";
 
 HTTP = axios.create({
-  baseURL: process.env.VUE_APP_API_URL || `${DEFAULT_URL}/api/v3/`
+  baseURL: process.env.VUE_APP_API_URL || `${DEFAULT_URL}/api/v3/`,
 });
 
 IMG_REQUEST = axios.create({
   baseURL: process.env.VUE_APP_DOCUMENT_IMAGES_URL || `${DEFAULT_URL}`,
   responseType: "blob",
-  adapter: cacheAdapterEnhancer(axios.defaults.adapter)
+  adapter: cacheAdapterEnhancer(axios.defaults.adapter),
 });
 
 const setAuthToken = (token) => {
   authToken = token;
-}
+};
 
 const getInterceptorConfig = (config) => {
   if (authToken) {
-    config.headers['Authorization'] = `Token ${authToken}`;
+    config.headers["Authorization"] = `Token ${authToken}`;
   }
   return config;
-}
+};
 
-HTTP.interceptors.request.use(getInterceptorConfig,
-  error => {
-    return Promise.reject(error);
-  }
-);
+HTTP.interceptors.request.use(getInterceptorConfig, (error) => {
+  return Promise.reject(error);
+});
 
-IMG_REQUEST.interceptors.request.use(getInterceptorConfig,
-  error => {
-    return Promise.reject(error);
-  }
-);
+IMG_REQUEST.interceptors.request.use(getInterceptorConfig, (error) => {
+  return Promise.reject(error);
+});
+
+const makeImageRequest = (imageURL) => {
+  return new Promise((resolve, reject) => {
+    if (process.env.NODE_ENV === "test") {
+      reject("Running unit tests!");
+      return;
+    }
+    IMG_REQUEST.get(imageURL)
+      .then((response) => {
+        return response.data;
+      })
+      .then((myBlob) => {
+        resolve(myBlob);
+      });
+  });
+};
 
 export default {
   HTTP,
-  IMG_REQUEST,
-  setAuthToken
-};
+  makeImageRequest,
+  setAuthToken,
+};

package/src/assets/images/ServerImage.vue

@@ -17,11 +17,11 @@ export default {
     },
     height: {
       default: null,
-      type: Number,
+      type: String,
     },
     width: {
       default: null,
-      type: Number,
+      type: String,
     },
   },
   data() {
@@ -40,10 +40,8 @@ export default {
   methods: {
     loadImage() {
       if (!this.imageUrl) return;
-      return api.IMG_REQUEST.get(this.imageUrl)
-        .then((response) => {
-          return response.data;
-        })
+      return api
+        .makeImageRequest(this.imageUrl)
         .then((myBlob) => {
           this.$refs.imgTag.src = URL.createObjectURL(myBlob);
           if (this.height) {
@@ -53,6 +51,9 @@ export default {
             this.$refs.imgTag.style.width = this.width;
           }
           this.loaded = true;
+        })
+        .catch((error) => {
+          this.loaded = false;
         });
     },
   },