From 468be5aa69da9c7a932a3d205a6203df2fb04aca Mon Sep 17 00:00:00 2001
From: Michael Olund <michaelo@openroad.ca>
Date: Fri, 18 Sep 2020 16:55:13 -0700
Subject: [PATCH] Implemented image preview using uiv modal

---
 vue/src/components/ItemTile.vue               | 31 +++++++++++++++++--
 .../pages/initial-filing/InitialFiling.vue    |  1 -
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/vue/src/components/ItemTile.vue b/vue/src/components/ItemTile.vue
index 4edfd187..21fc6ca4 100644
--- a/vue/src/components/ItemTile.vue
+++ b/vue/src/components/ItemTile.vue
@@ -29,6 +29,9 @@
         <div class="alert alert-danger" style="padding: 4px; margin-bottom: 0" v-if="file.error">Upload Error</div>
       </div>
     </div>
+    <modal v-model="showModal" ref="modal" :footer="false">
+      <img v-if="file.objectURL  && !file.error && file.type !== 'application/pdf'" :src="file.objectURL" :style="imageStyle">
+    </modal>
   </div>
   <div v-else>
     <ProgressBar :file="file"/>
@@ -37,6 +40,7 @@
 
 <script>
 import ProgressBar from './ProgressBar'
+import { Modal } from 'uiv';
 
 export default {
   props: {
@@ -44,13 +48,19 @@ export default {
     index: Number,
     fileCount: Number
   },
+  data: function () {
+    return {
+      showModal: false,
+    }
+  },
   components: {
-    ProgressBar
+    ProgressBar,
+    Modal
   },
   methods: {
     showImage($event) {
       if ($event.target.tagName !== 'I' && $event.target.tagName !== 'BUTTON') {
-        alert(this.file.objectURL);
+        this.showModal = true;
       }
     }
   },
@@ -123,7 +133,7 @@ export default {
           content: "\f06e";
           position: absolute;
           left: 58px;
-          top: 65px; 
+          top: 52px; 
           font-size: 43px;
           color: transparent;        
         }
@@ -222,3 +232,18 @@ export default {
       }
     }
 </style>
+
+<style lang="css">
+    .modal-content {
+      background-color: inherit;
+      box-shadow: none;
+      -webket-box-shadow: none;
+      border: none;
+    } 
+
+    .modal-content button.close {
+      font-size: 80px;
+      margin-right: 75px;
+      margin-bottom: -100px;
+    }
+</style>
diff --git a/vue/src/pages/initial-filing/InitialFiling.vue b/vue/src/pages/initial-filing/InitialFiling.vue
index 3957857e..830717b7 100644
--- a/vue/src/pages/initial-filing/InitialFiling.vue
+++ b/vue/src/pages/initial-filing/InitialFiling.vue
@@ -118,7 +118,6 @@
 
 <script>
 import Uploader from '../../components/Uploader.vue';
-import Forms from "../../utils/forms";
 
 export default {
   name: 'App',