From b130983fe9cad3ab62ace6170b806c64c017744b Mon Sep 17 00:00:00 2001
From: Michael Olund <michaelo@openroad.ca>
Date: Mon, 21 Sep 2020 12:14:25 -0700
Subject: [PATCH] Updates to image preview, and added logic to prevent mixing
 of PDFs and images

---
 vue/src/components/ItemTile.vue               | 249 ------------------
 vue/src/components/Uploader/ItemTile.vue      | 131 +++++++++
 .../{Uploader.vue => Uploader/Main.vue}       |  55 ++--
 vue/src/components/Uploader/ModalPreview.vue  |  63 +++++
 .../components/{ => Uploader}/ProgressBar.vue |   0
 vue/src/components/Uploader/UploadedImage.vue | 157 +++++++++++
 vue/src/pages/final-filing/FinalFiling.vue    |   2 +-
 .../pages/initial-filing/InitialFiling.vue    |   2 +-
 8 files changed, 389 insertions(+), 270 deletions(-)
 delete mode 100644 vue/src/components/ItemTile.vue
 create mode 100644 vue/src/components/Uploader/ItemTile.vue
 rename vue/src/components/{Uploader.vue => Uploader/Main.vue} (81%)
 create mode 100644 vue/src/components/Uploader/ModalPreview.vue
 rename vue/src/components/{ => Uploader}/ProgressBar.vue (100%)
 create mode 100644 vue/src/components/Uploader/UploadedImage.vue

diff --git a/vue/src/components/ItemTile.vue b/vue/src/components/ItemTile.vue
deleted file mode 100644
index 21fc6ca4..00000000
--- a/vue/src/components/ItemTile.vue
+++ /dev/null
@@ -1,249 +0,0 @@
-<template>
-  <div class="item-tile" v-if="file.progress === '100.00' || file.error">
-    <div class="image-wrap" @click.prevent="showImage($event)">
-      <img v-if="file.objectURL  && !file.error && file.type !== 'application/pdf'" :src="file.objectURL" :style="imageStyle"/>
-      <i class="fa fa-file-pdf-o" v-if="file.type === 'application/pdf'"></i>
-      <button type="button" class="btn-remove" @click.prevent="$emit('remove')" aria-label="Delete">
-        <i class="fa fa-times-circle"></i>
-      </button>
-    </div>
-    <div class="bottom-wrapper">
-      <div class="item-text">
-        {{file.name}} ({{ Math.round(file.size/1024 * 100) / 100 }}KB)
-      </div>
-      <div class="button-wrapper">
-        <div v-if="!file.active && file.success">
-          <button type="button" @click.prevent="$emit('moveup')" :disabled="index === 0" aria-label="Move down one position">
-            <i class="fa fa-chevron-circle-left"></i>
-          </button>
-          <button type="button" @click.prevent="$emit('movedown')" :disabled="index >= (fileCount - 1)" aria-label="Move up one position">
-            <i class="fa fa-chevron-circle-right"></i>
-          </button>
-          <button type="button" aria-label="Rotate counter-clockwise" @click.prevent="$emit('rotateleft')">
-            <i class="fa fa-undo"></i>
-          </button>
-          <button type="button" aria-label="Rotate clockwise" @click.prevent="$emit('rotateright')">
-            <i class="fa fa-undo fa-flip-horizontal"></i>
-          </button>
-        </div>
-        <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"/>
-  </div>
-</template>
-
-<script>
-import ProgressBar from './ProgressBar'
-import { Modal } from 'uiv';
-
-export default {
-  props: {
-    file: Object,
-    index: Number,
-    fileCount: Number
-  },
-  data: function () {
-    return {
-      showModal: false,
-    }
-  },
-  components: {
-    ProgressBar,
-    Modal
-  },
-  methods: {
-    showImage($event) {
-      if ($event.target.tagName !== 'I' && $event.target.tagName !== 'BUTTON') {
-        this.showModal = true;
-      }
-    }
-  },
-  computed: {
-    rotateVal() {
-      let rotation = this.file.rotation;
-      while (rotation < 0) {
-        rotation += 360;
-      }
-      while (rotation > 360) {
-        rotation -= 360;
-      }
-      if (rotation === 90) {
-        return 90;
-      }
-      if (rotation === 180) {
-        return 180;
-      }
-      if (rotation === 270) {
-        return 270;
-      }      
-      return 0;
-    },
-    imageStyle() {
-      if (this.rotateVal === 90) {
-        let scale = this.file.width / this.file.height;
-        let yshift = -100 * scale;
-        return "transform:rotate(90deg) translateY("+yshift+"%) scale("+scale+"); transform-origin: top left;";
-      }
-      if (this.rotateVal === 270) {
-        let scale = this.file.width / this.file.height;
-        let xshift = -100 * scale;
-        return "transform:rotate(270deg) translateX("+xshift+"%) scale("+scale+"); transform-origin: top left;";
-      }
-      if (this.rotateVal === 180) {
-        return "transform:rotate(180deg);";
-      }      
-      return '';
-    }
-  },
-}
-</script>
-
-<style scoped lang="scss">
-    .item-tile {
-      margin-bottom: 5px;
-      position: relative;
-
-      .image-wrap {
-        height: 160px;
-        border: 1px solid black;
-        border-top-left-radius: 6px;
-        border-top-right-radius: 6px;
-        background-color: white;
-        overflow: hidden;
-        position: relative;
-        z-index: 2;
-
-        i.fa-file-pdf-o {
-          color: silver;
-          display: block;
-          font-size: 50px;
-          margin-left: 15px;
-          margin-top: 15px;
-          opacity: 0.75;
-        }
-
-        &::after {
-          font-family: FontAwesome;
-          content: "\f06e";
-          position: absolute;
-          left: 58px;
-          top: 52px; 
-          font-size: 43px;
-          color: transparent;        
-        }
-
-        &:hover {
-          background-color: #6484d3;
-          cursor: pointer;
-
-          button.btn-remove {
-            background-color: transparent;
-
-            i.fa {
-              color: white;
-            }
-          }
-        }
-
-        &:hover::after {
-          color: white;
-        }
-
-        &:hover img { 
-          opacity: 0.3;
-        } 
-      }
-
-      .item-text {
-        text-align: center;
-        min-height: 75px;
-        max-height: 75px;
-        overflow: hidden;
-        padding: 5px;
-        line-height: 1.05;
-        font-size: 0.95em;
-      }
-
-      .button-wrapper {
-        text-align: center;
-      }
-
-      .bottom-wrapper {
-        border-bottom-left-radius: 6px;
-        border-bottom-right-radius: 6px;
-        border: 1px solid silver;
-        background-color: #F2F2F2;
-        margin-bottom: 10px;
-      }
-
-      button {
-        position: relative; 
-        z-index: 2;
-        background-color: transparent;
-        border: none;
-        outline: none;
-        font-size: 22px;
-        padding: 0;
-        margin-right: 16px;
-
-        &:disabled {
-          i.fa {
-            opacity: 0.15;
-          }
-        }
-
-        &:hover {
-          cursor: pointer !important;
-        }
-
-        i.fa {
-          color: #003366;
-        }
-
-        &:last-of-type {
-          margin-right: 0;
-        }
-
-        &:nth-of-type(2) {
-          margin-right: 32px;
-        }
-
-        &.btn-remove {
-          position: absolute;
-          top: 130px;
-          left: 130px;
-          background-color: white;
-          border-radius: 10px;
-          height: 22px;
-          line-height: 1;
-          z-index: 4;
-
-          i.fa {
-            color: #365EBE;
-            font-size: 23px;
-          }
-        }
-      }
-    }
-</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/components/Uploader/ItemTile.vue b/vue/src/components/Uploader/ItemTile.vue
new file mode 100644
index 00000000..72146c81
--- /dev/null
+++ b/vue/src/components/Uploader/ItemTile.vue
@@ -0,0 +1,131 @@
+<template>
+  <div class="item-tile" v-if="file.progress === '100.00' || file.error">
+    <uploaded-image :file="file" :image-style="imageStyle" @imageclick="showPreview" @removeclick="$emit('remove')" />
+    <div class="bottom-wrapper">
+      <div class="item-text">
+        {{file.name}} ({{ Math.round(file.size/1024 * 100) / 100 }}KB)
+      </div>
+      <div class="button-wrapper">
+        <div v-if="!file.active && file.success && !isPdf">
+          <button type="button" @click.prevent="$emit('moveup')" :disabled="index === 0" aria-label="Move down one position">
+            <i class="fa fa-chevron-circle-left"></i>
+          </button>
+          <button type="button" @click.prevent="$emit('movedown')" :disabled="index >= (fileCount - 1)" aria-label="Move up one position">
+            <i class="fa fa-chevron-circle-right"></i>
+          </button>
+          <button type="button" aria-label="Rotate counter-clockwise" @click.prevent="$emit('rotateleft')">
+            <i class="fa fa-undo"></i>
+          </button>
+          <button type="button" aria-label="Rotate clockwise" @click.prevent="$emit('rotateright')">
+            <i class="fa fa-undo fa-flip-horizontal"></i>
+          </button>
+        </div>
+        <div class="alert alert-danger" style="padding: 4px; margin-bottom: 0" v-if="file.error">Upload Error</div>
+      </div>
+    </div>
+  </div>
+  <div v-else>
+    <progress-bar :file="file"/>
+  </div>
+</template>
+
+<script>
+import UploadedImage from './UploadedImage'
+import ProgressBar from './ProgressBar'
+
+export default {
+  props: {
+    file: Object,
+    index: Number,
+    fileCount: Number
+  },
+  data: function () {
+    return {
+      showModal: false,
+    }
+  },
+  components: {
+    ProgressBar,
+    UploadedImage
+  },
+  methods: {
+    showPreview() {
+       this.showModal = true;
+    },
+    closePreview() {
+      this.showModal = false;
+    }
+  },
+  computed: {
+    isPdf() {
+      return this.file.type === 'application/pdf';
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .item-tile {
+    margin-bottom: 5px;
+    position: relative;
+
+    .item-text {
+      text-align: center;
+      min-height: 75px;
+      max-height: 75px;
+      overflow: hidden;
+      padding: 5px;
+      line-height: 1.05;
+      font-size: 0.95em;
+    }
+
+    .button-wrapper {
+      text-align: center;
+    }
+
+    .bottom-wrapper {
+      border-bottom-left-radius: 6px;
+      border-bottom-right-radius: 6px;
+      border: 1px solid silver;
+      background-color: #F2F2F2;
+      margin-bottom: 10px;
+    }
+  }
+</style>
+
+<style lang="scss">
+  .item-tile {
+    button {
+      position: relative; 
+      z-index: 2;
+      background-color: transparent;
+      border: none;
+      outline: none;
+      font-size: 22px;
+      padding: 0;
+      margin-right: 16px;
+
+      &:disabled {
+        i.fa {
+          opacity: 0.15;
+        }
+      }
+
+      &:hover {
+        cursor: pointer !important;
+      }
+
+      i.fa {
+        color: #003366;
+      }
+
+      &:last-of-type {
+        margin-right: 0;
+      }
+
+      &:nth-of-type(2) {
+        margin-right: 32px;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/vue/src/components/Uploader.vue b/vue/src/components/Uploader/Main.vue
similarity index 81%
rename from vue/src/components/Uploader.vue
rename to vue/src/components/Uploader/Main.vue
index ef3a9656..0a0bc269 100644
--- a/vue/src/components/Uploader.vue
+++ b/vue/src/components/Uploader/Main.vue
@@ -52,14 +52,17 @@
     </div>
     </file-upload>
   </div>
+  <modal ref="warningModal" v-model="showWarning">
+    {{ warningText }}
+  </modal>
 </div>
 </template>
 
 <script>
 import VueUploadComponent from 'vue-upload-component'
-import { Tooltip } from 'uiv';
+import { Tooltip, Modal } from 'uiv';
 import ItemTile from './ItemTile'
-import Forms from "../utils/forms";
+import Forms from "../../utils/forms";
 
 export default {
   props: {
@@ -69,13 +72,16 @@ export default {
   data: function () {
     return {
       files: [],
-      dragging: false
+      dragging: false,
+      showWarning: false,
+      warningText: ""
     }
   },
   components: {
     FileUpload: VueUploadComponent,
     ItemTile,
-    Tooltip
+    Tooltip,
+    Modal
   },
   computed: {
     uniqueId() {
@@ -101,12 +107,6 @@ export default {
     }
   },
   methods: {
-    /**
-     * Has changed
-     * @param  Object|undefined   newFile   Read only
-     * @param  Object|undefined   oldFile   Read only
-     * @return undefined
-     */
     inputFile(newFile, oldFile) {
       if (newFile && oldFile && !newFile.active && oldFile.active) {
         // Get response data
@@ -126,17 +126,10 @@ export default {
         console.log('inputFile oldFile=' + oldFile.name);
       }
     },
-    /**
-     * Pretreatment
-     * @param  Object|undefined   newFile   Read and write
-     * @param  Object|undefined   oldFile   Read only
-     * @param  Function           prevent   Prevent changing
-     * @return undefined
-     */
     inputFilter(newFile, oldFile, prevent) {
       if (newFile && !oldFile) {
         // Filter non-image file
-        if (!/\.(jpeg|jpg|png|pdf)$/i.test(newFile.name)) {
+        if (!/\.(jpeg|jpg|gif|png|pdf)$/i.test(newFile.name)) {
           return prevent()
         }
 
@@ -146,10 +139,34 @@ export default {
             return prevent();
           }
         });
+  
       }
 
-      // Add extra data to to the file object
       if (newFile) {
+        // if it's a PDF, make sure it's the only item being uploaded
+        if (newFile.type === 'application/pdf') {
+          if (this.files.length > 0) {
+            if (this.files[0].name != newFile.name || this.files[0].length != newFile.length) {
+              this.warningText = 'Only one PDF is allowed per form, and PDF documents cannot be combined with images.';
+              this.showWarning = true;
+              this.$refs.upload.remove(newFile);
+              return prevent();
+            }
+          }
+
+        } else {
+          // if it's not a PDF, make sure there are no PDFs already uplaoded
+          this.files.forEach((file) => {
+            if (file.type === 'application/pdf') {
+              this.warningText = 'PDF documents cannot be combined with images.';
+              this.showWarning = true;
+              this.$refs.upload.remove(newFile);
+              return prevent();
+            }
+          });
+        } 
+
+        // Add extra data to to the file object
         newFile.objectURL = ''
         let URL = window.URL || window.webkitURL
         if (URL && URL.createObjectURL) {
diff --git a/vue/src/components/Uploader/ModalPreview.vue b/vue/src/components/Uploader/ModalPreview.vue
new file mode 100644
index 00000000..46b5d537
--- /dev/null
+++ b/vue/src/components/Uploader/ModalPreview.vue
@@ -0,0 +1,63 @@
+<template>
+  <modal v-model="showModal" class="image-preview-modal" ref="modal" :footer="false" @hide="$emit('close')">
+    <img v-if="file.objectURL  && !file.error && file.type !== 'application/pdf'" :src="file.objectURL" :style="modalImageStyle" :data-rotate="rotateVal">
+  </modal>
+</template>
+
+<script>
+import { Modal } from 'uiv';
+
+export default {
+  props: {
+    file: Object,
+    imageStyle: String,
+    rotateVal: Number,
+    showModal: Boolean
+  },
+  components: {
+    Modal
+  },
+  computed: {
+    modalImageStyle() {
+      let extraCss = '';
+      if (this.rotateVal === 90 || this.rotateVal === 270) {
+        extraCss = ' width: 100%; height: inherit !important;';
+      }
+      return this.imageStyle + extraCss;
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+  .image-preview-modal {
+    .modal-dialog {
+      max-width: 780px;
+      width: inherit;
+      text-align: center;
+    }
+
+    .modal-content {
+      background-color: transparent;
+      box-shadow: none;
+      -webket-box-shadow: none;
+      border: none;
+
+      .modal-body, .modal-header {
+        padding: 0 !important;
+      }
+
+      .modal-body {
+        img {
+          max-width: 100%;
+        }
+      }
+
+      button.close {
+        font-size: 40px;
+        color: white;
+        opacity: 1;
+      }
+    } 
+  }
+</style>
\ No newline at end of file
diff --git a/vue/src/components/ProgressBar.vue b/vue/src/components/Uploader/ProgressBar.vue
similarity index 100%
rename from vue/src/components/ProgressBar.vue
rename to vue/src/components/Uploader/ProgressBar.vue
diff --git a/vue/src/components/Uploader/UploadedImage.vue b/vue/src/components/Uploader/UploadedImage.vue
new file mode 100644
index 00000000..fbb320c1
--- /dev/null
+++ b/vue/src/components/Uploader/UploadedImage.vue
@@ -0,0 +1,157 @@
+<template>
+<div>
+  <div :class="['image-wrap', isValidImage ? 'valid' : '']" @click.prevent="showPreview($event)">
+    <img v-if="isValidImage" :src="file.objectURL" :style="imageStyle"/>
+    <i class="fa fa-file-pdf-o" v-if="file.type === 'application/pdf'"></i>
+    <button type="button" class="btn-remove" @click.prevent="$emit('removeclick')" aria-label="Delete">
+      <i class="fa fa-times-circle"></i>
+    </button>
+  </div>
+    <modal-preview :file="file" 
+      :imageStyle="imageStyle" 
+      :rotate-val="rotateVal" 
+      :show-modal="showModal" 
+      @close="closePreview()" />  
+</div>
+</template>
+
+<script>
+import ModalPreview from './ModalPreview'
+
+export default {
+  props: {
+    file: Object
+  },
+  components: {
+    ModalPreview
+  },
+  data: function () {
+    return {
+      showModal: false,
+    }
+  },
+  methods: {
+    showPreview($event) {
+      if (this.isValidImage) {
+        if ($event.target.tagName !== 'I' && $event.target.tagName !== 'BUTTON') {
+          this.showModal = true;
+        } 
+      }
+    },
+    closePreview() {
+      this.showModal = false;
+    }
+  },
+  computed: {
+    isValidImage() {
+      return this.file.objectURL  && !this.file.error && this.file.type !== 'application/pdf';
+    },
+    rotateVal() {
+      let rotation = this.file.rotation;
+      while (rotation < 0) {
+        rotation += 360;
+      }
+      while (rotation > 360) {
+        rotation -= 360;
+      }
+      if (rotation === 90) {
+        return 90;
+      }
+      if (rotation === 180) {
+        return 180;
+      }
+      if (rotation === 270) {
+        return 270;
+      }      
+      return 0;
+    },
+    imageStyle() {
+      if (this.rotateVal === 90) {
+        let scale = this.file.width / this.file.height;
+        let yshift = -100 * scale;
+        return "transform:rotate(90deg) translateY("+yshift+"%) scale("+scale+"); transform-origin: top left;";
+      }
+      if (this.rotateVal === 270) {
+        let scale = this.file.width / this.file.height;
+        let xshift = -100 * scale;
+        return "transform:rotate(270deg) translateX("+xshift+"%) scale("+scale+"); transform-origin: top left;";
+      }
+      if (this.rotateVal === 180) {
+        return "transform:rotate(180deg);";
+      }      
+      return '';
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .image-wrap {
+    height: 160px;
+    border: 1px solid black;
+    border-top-left-radius: 6px;
+    border-top-right-radius: 6px;
+    background-color: white;
+    overflow: hidden;
+    position: relative;
+    z-index: 2;
+
+    i.fa-file-pdf-o {
+      color: silver;
+      display: block;
+      font-size: 50px;
+      margin-left: 15px;
+      margin-top: 15px;
+      opacity: 0.75;
+    }
+
+    &::after {
+      font-family: FontAwesome;
+      content: "\f06e";
+      position: absolute;
+      left: 58px;
+      top: calc(50% - 30px);
+      font-size: 43px;
+      color: transparent;        
+    }
+
+    &.valid:hover {
+      background-color: #6484d3;
+      cursor: pointer;
+
+      button.btn-remove {
+        background-color: transparent;
+
+        i.fa {
+          color: white;
+        }
+      }
+    }
+
+    &:hover::after {
+      color: white;
+    }
+
+    &:hover img { 
+      opacity: 0.3;
+    } 
+  }
+
+  button {
+    &.btn-remove {
+      position: absolute;
+      top: 130px;
+      left: 130px;
+      background-color: white;
+      border-radius: 10px;
+      height: 22px;
+      line-height: 1;
+      z-index: 4;
+
+      i.fa {
+        color: #365EBE;
+        font-size: 23px;
+      }
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/vue/src/pages/final-filing/FinalFiling.vue b/vue/src/pages/final-filing/FinalFiling.vue
index 83a98d14..3869fb7c 100644
--- a/vue/src/pages/final-filing/FinalFiling.vue
+++ b/vue/src/pages/final-filing/FinalFiling.vue
@@ -155,7 +155,7 @@
 </template>
 
 <script>
-import Uploader from '../../components/Uploader.vue';
+import Uploader from '../../components/Uploader/Main.vue';
 
 export default {
   name: 'App',
diff --git a/vue/src/pages/initial-filing/InitialFiling.vue b/vue/src/pages/initial-filing/InitialFiling.vue
index 830717b7..014e5688 100644
--- a/vue/src/pages/initial-filing/InitialFiling.vue
+++ b/vue/src/pages/initial-filing/InitialFiling.vue
@@ -117,7 +117,7 @@
 </template>
 
 <script>
-import Uploader from '../../components/Uploader.vue';
+import Uploader from '../../components/Uploader/Main.vue';
 
 export default {
   name: 'App',