Implemented client-side for image rotation

edivorce/settings/base.py

@@ -47,6 +47,7 @@ INSTALLED_APPS = (
     'django.contrib.humanize',
     'rest_framework',
     'debug_toolbar',
+    'corsheaders',
     'edivorce.apps.core',
     'compressor',
     'crispy_forms',
@@ -63,6 +64,7 @@ MIDDLEWARE = (
     'edivorce.apps.core.middleware.basicauth_middleware.BasicAuthMiddleware',
     'debug_toolbar.middleware.DebugToolbarMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
+    'corsheaders.middleware.CorsMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',

edivorce/settings/local.py

@@ -26,6 +26,7 @@ PROXY_BASE_URL = ''
 SASS_PROCESSOR_ENABLED = True
 SASS_PROCESSOR_ROOT = PROJECT_ROOT + '/edivorce/apps/core/static'
 SASS_OUTPUT_STYLE = 'compressed'
+CORS_ORIGIN_ALLOW_ALL = True
 
 LOGOUT_URL = '/accounts/logout/'
 

requirements.txt

@@ -4,6 +4,7 @@ clamd==1.0.2
 Django==2.2.15
 django-appconf==1.0.4
 django-compressor==2.4
+django-cors-headers==3.5
 django-crispy-forms==1.9.2
 django-debug-toolbar==2.2
 django-sass-processor==0.8

vue/public/final-filing.html

@@ -13,7 +13,8 @@
           how-to-sign="Together"
           how-to-file="Online"
           sign-file-options-url="https://wwww.google.com"
-          print-form-url="https://wwww.facebook.com">
+          print-form-url="https://wwww.facebook.com"
+          proxy-root-path="http://localhost:8000/">
       </final-filing-uploader>
     </div>
     <!-- built files will be auto injected -->

vue/public/initial-filing.html

@@ -9,7 +9,8 @@
       <initial-filing-uploader 
           signing-location="In-person"
           you-signing-location="In-person"
-          spouse-signing-location="In-person">
+          spouse-signing-location="In-person"
+          proxy-root-path="http://localhost:8000/">
       </initial-filing-uploader>
     </div>
     <!-- built files will be auto injected -->

vue/src/components/ItemTile.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="item-tile" v-if="file.progress === '100.00' || file.error">
     <div class="image-wrap">
-      <img v-if="file.objectURL && !file.error" :src="file.objectURL" height="auto" />
+      <img v-if="file.objectURL && !file.error" :src="file.objectURL" height="auto" :class="imageClass" />
       <button type="button" class="btn-remove" @click.prevent="$emit('remove')" aria-label="Delete">
         <i class="fa fa-times-circle"></i>
       </button>
@@ -18,10 +18,10 @@
           <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">
+          <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">
+          <button type="button" aria-label="Rotate clockwise" @click.prevent="$emit('rotateright')">
             <i class="fa fa-undo fa-flip-horizontal"></i>
           </button>
         </div>
@@ -29,34 +29,44 @@
       </div>
     </div>
   </div>
-  <div class="item-tile" v-else-if="file.progress !== '0.00'"> 
-    <div class="status-wrap">
-      <div>
-      Uploading... {{ file.progress}}%
-      </div>
-      <div class="progress">
-        <div :style="'width:' + file.progress + '%'">
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="item-tile" v-else> 
-    <div class="status-wrap">
-      <div>
-      Waiting...
-      </div>
-      <div class="progress"></div>
-    </div>
+  <div v-else>
+    <ProgressBar :file="file"/>
   </div>
 </template>
 
 <script>
+import ProgressBar from './ProgressBar'
+
 export default {
   props: {
     file: Object,
     index: Number,
     fileCount: Number
-  }
+  },
+  components: {
+    ProgressBar
+  },
+  computed: {
+    imageClass() {
+      let rotation = this.file.rotation;
+      while (rotation < 0) {
+        rotation += 360;
+      }
+      while (rotation > 360) {
+        rotation -= 360;
+      }
+      if (rotation === 90) {
+        return 'rotate-90';
+      }
+      if (rotation === 180) {
+        return 'rotate-180';
+      }
+      if (rotation === 270) {
+        return 'rotate-270';
+      }      
+      return 'rotate-0';
+    }
+  },
 }
 </script>
 
@@ -65,7 +75,7 @@ export default {
       margin-bottom: 5px;
       position: relative;
 
-      .image-wrap, .status-wrap {
+      .image-wrap {
         height: 160px;
         border: 1px solid black;
         border-top-left-radius: 6px;
@@ -77,32 +87,6 @@ export default {
         overflow-y: hidden;
       }
 
-      .status-wrap {
-        border-bottom-left-radius: 6px;
-        border-bottom-right-radius: 6px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        text-align: center;
-      }
-
-      .progress {
-        width: calc(100% - 1.5px);
-        background-color: #F2F2F3;
-        height: 22px;
-        position: absolute;
-        bottom: -19.5px;
-        left: 1px;
-        border-radius: 0;
-        border-bottom-left-radius: 4px;
-        border-bottom-right-radius: 4px;
-
-        > div {
-          background-color: #365EBE;
-          height: 22px;
-        }
-      }
-      
       .item-text {
         text-align: center;
         min-height: 75px;
@@ -125,10 +109,27 @@ export default {
         margin-bottom: 10px;
       }
 
-      img {
+      img.rotate-0 {
         width: 98%;
       }
 
+      img.rotate-90 {
+        transform: rotate(90deg);
+        height: 98%;
+        max-width: 98%;        
+      }
+
+      img.rotate-180 {
+        transform: rotate(180deg);
+        width: 98%;
+      }
+      
+      img.rotate-270 {
+        transform: rotate(270deg);
+        height: 98%;
+        max-width: 98%;
+      }
+
       button {
         position: relative; 
         z-index: 2;

vue/src/components/ProgressBar.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div class="item-tile" v-if="file.progress !== '0.00'"> 
+      <div class="status-wrap">
+        <div>
+        Uploading... {{ file.progress}}%
+        </div>
+        <div class="progress">
+          <div :style="'width:' + file.progress + '%'">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="item-tile" v-else> 
+      <div class="status-wrap">
+        <div>
+        Waiting...
+        </div>
+        <div class="progress"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    file: Object
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  .status-wrap {
+    height: 160px;
+    border: 1px solid black;
+    border-radius: 6px;
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+
+    .progress {
+      width: calc(100% - 1.5px);
+      background-color: #F2F2F3;
+      height: 22px;
+      position: relative;
+      bottom: -59.5px;
+      left: 1px;
+
+      > div {
+        background-color: #365EBE;
+        height: 22px;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+    }
+  }
+</style>

vue/src/components/Uploader.vue

@@ -39,7 +39,9 @@
           :file-count="files.length"
           @remove="remove(file)"
           @moveup="moveUp(index)"
-          @movedown="moveDown(index)"/>
+          @movedown="moveDown(index)"
+          @rotateleft="rotateLeft(index)"
+          @rotateright="rotateRight(index)"/>
       </div>
       <div class="card upload-button">
         <div class="upload-button-wrapper">
@@ -130,6 +132,7 @@ export default {
         let URL = window.URL || window.webkitURL
         if (URL && URL.createObjectURL) {
           newFile.objectURL = URL.createObjectURL(newFile.file)
+          newFile.rotation = 0;
         }
       }
     },
@@ -146,6 +149,12 @@ export default {
         this.files.splice(old_index + 1, 0, this.files.splice(old_index, 1)[0]);
       }
     },
+    rotateLeft(index) {
+      this.files[index].rotation -= 90;
+    },
+    rotateRight(index) {
+      this.files[index].rotation += 90;
+    },    
     draggingOn() {
       this.dragging = true;
     },