Integrated Vue.js with Django & started building the uploader component

5 years ago · 1f6694ce99
--- a/edivorce/apps/core/management/commands/npm_build.py
+++ b/edivorce/apps/core/management/commands/npm_build.py
@ -0,0 +1,11 @@
 import os
 from django.contrib.staticfiles.management.commands.runserver import (
    Command as NpmBuildCommand,
 )
 class Command(NpmBuildCommand):
    def run(self, **options):
        os.system("npm --prefix /opt/app-root/src/vue install /opt/app-root/src/vue --loglevel info")
        os.system("npm --prefix /opt/app-root/src/vue run build")        
--- a/edivorce/apps/core/templates/base.html
+++ b/edivorce/apps/core/templates/base.html
@ -18,6 +18,8 @@
        <link rel="stylesheet" type="text/css" href="{% static "css/font-awesome.min.css" %}">
        <link rel="stylesheet" type="text/css" href="{% sass_src "css/main.scss" %}" />
        {% endcompress %}
        {% block extra_css %}
        {% endblock %}
        {% include 'partials/gtm_head.html' %}
        <!--[if lt IE 9]>
@ -217,5 +219,7 @@
        <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
        <script type="text/javascript" src="{% static 'js/signing-filing.js' %}"></script>
        {% endcompress %}
        {% block extra_js %}
        {% endblock %}
    </body>
 </html>
--- a/edivorce/apps/core/templates/dashboard/final_filing.html
+++ b/edivorce/apps/core/templates/dashboard/final_filing.html
@ -1,5 +1,6 @@
 {% extends 'base.html' %}
 {% load input_field %}
 {% load static %}
 {% block title %}{{ block.super }}: Overview{% endblock %}
@ -17,164 +18,26 @@
        <div><label>Court Filing #</label>{% input_field type="text" name="court_filing_no" id="court_filing_no" class="input-inline form-control" %}
        </div>
    {% endif %}
    {% if signing_location == 'Virtual' %}
        <div class="question-well-border-less">
            <p>
                Upload the signed / sworn and scanned Child Support Affidavit (F37)
                {% include 'partials/upload.html' %}
            </p>
            <p>
                Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38)
                {% include 'partials/upload.html' %}
            </p>
        </div>
    {% elif signing_location_you == 'Virtual' and signing_location_spouse == 'Virtual' %}
        <div class="question-well-border-less">
            <p>
                Upload the signed / sworn and scanned Child Support Affidavit (F37) - For You
                {% include 'partials/upload.html' %}
            </p>
            <p>
                Upload the signed / sworn and scanned Child Support Affidavit (F37) - For Your Spouse
                {% include 'partials/upload.html' %}
            </p>
            <p>
                Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38) - For You
                {% include 'partials/upload.html' %}
            </p>
            <p>
                Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38) - For Your Spouse
                {% include 'partials/upload.html' %}
            </p>
        </div>
    {% elif how_to_file == 'Online' %}
        {% if signing_location or signing_location_you and signing_location_spouse %}
            <div class="question-well-border-less">
                <p>Missing a form required on this page? Check the <a href="{% url 'dashboard_nav' 'print_form' %}">Review Forms</a> step.</p>
                <p>The following forms will be automatically filed for you:</p>
                <ul>
                    <li>Requisition Form (F35)</li>
                    <li>Certificate of Pleadings Form (F36)</li>
                </ul>
                <p>
                    Upload the signed / sworn and scanned Child Support Affidavit (F37)
                    {% include 'partials/upload.html' %}
                </p>
                <p>
                    Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38)
                    {% include 'partials/upload.html' %}
                </p>
                <p>
                    Upload the signed and scanned Draft Final Order Form (F52)
                    {% include 'partials/upload.html' %}
                </p>
                <p>
                    Upload the signed and scanned Electronic Fipng Statement (F96) for You
                    {% include 'partials/upload.html' %}
                </p>
                <p>
                    Upload the signed and scanned Electronic Fipng Statement (F96) for Your Spouse
                    {% include 'partials/upload.html' %}
                </p>
                <p>
                    Complete, scan and upload the Agreement as to Annual Income (F9) form
                    {% include 'partials/upload.html' %}
                </p>
                <p>
                    Complete, scan and upload the Identification of Apppcant (VSA 512) for You
                    {% include 'partials/upload.html' %}
                </p>
                <p>
                    Complete, scan and upload the Identification of Apppcant (VSA 512) for Your Spouse
                    {% include 'partials/upload.html' %}
                </p>
            </div>
        {% else %}
            <div class="question-well-border-less">
                <h2>You need to select a signing method in the <a href="{% url 'dashboard_nav' 'sign_file_options' %}">Signing & Filing Options</a>
                    step.</h2>
            </div>
        {% endif %}
    {% elif how_to_sign == 'Together' %}
        <div>
            <p>Staple each form together and then fasten all forms with a paper clip, in the following order:</p>
            <ul>
                <li>Notice of Joint Family Claim Form (F1)</li>
                <li>Requisition Form (F35)</li>
                <li>Draft Final Order Form (F52)</li>
                <li>Certificate of Pleadings Form (F36)</li>
                <li>Child Support Affidavit (F37) signed by claimants</li>
                <li>Affidavit Desk Order Divorce (F38) signed by both claimants</li>
                <li>Agreement as to Annual Income (F9)</li>
            </ul>
            <p>Also ensure you bring the following additional documentation:</p>
            <ul>
                <li>Proof of marriage</li>
                <li>Registration of Joint Divorce Proceedings (JUS280)</li>
                <li>Identification of Applicant (VSA 512) for Claimant 1 ([Name])</li>
                <li>Identification of Applicant (VSA 512) for Claimant 2 ([Name])</li>
                <li>Agreement as to Annual Income (F9)</li>
            </ul>
            <p>If you have other court orders or a written separation agreement, they should also be attached to your Affidavit — Desk Order Divorce
                Form</p>
            <p>(F38). Note that these agreements or orders must not contradict what's in your divorce application.</p>
            <p>You have indicated that you will file at the following court registry:</p>
            <p>[City]</p>
            <p>[Address]</p>
            <p>[Postal Code]</p>
            <p>Once sign / sworn and filed, you will receive a Court Filing Number (?). This number will be used if you need to file any
                additional documentation.</p>
        </div>
    {% elif how_to_sign == 'Separately' %}
        <div class="question-well-border-less">
            <p>Staple each form together and then fasten all forms with a paper clip, in the following order:</p>
            <ul>
                <li> Notice of Joint Family Claim Form (F1)</li>
                <li> Requisition Form (F35)</li>
                <li> Draft Final Order Form (F52)</li>
                <li> Certificate of Pleadings Form (F36)</li>
                <li> Child Support Affidavit (F37) signed by you</li>
                <li> Affidavit Desk Order Divorce (F38) signed by you</li>
                <li> Agreement as to Annual Income (F9)</li>
            </ul>
            <br>
            <p>Also ensure you bring the following additional documentation:</p>
            <ul>
                <li> Proof of marriage</li>
                <li> Registration of Joint Divorce Proceedings (JUS280)</li>
                <li> Identification of Applicant (VSA 512) for Claimant 1 ([Name])</li>
                <li> Agreement as to Annual Income (F9)</li>
            </ul>
            <p>If you have other court orders or a written separation agreement, they should also be attached to your Affidavit — Desk Order Divorce
                Form</p>
            <p>(F38). Note that these agreements or orders must not contradict what's in your divorce application.</p>
            <p>You have indicated that you will file at the following court registry:</p>
            <p>[City]</p>
            <p>[Address]</p>
            <p>[Postal Code]</p>
            <p>Once sign / sworn and filed, you will receive a Court Filing Number (?). This number will be used if you need to file any
                additional documentation.</p>
            <h2>Spousal Documentation Requirements</h2>
            <p>The following sworn / affirmed affidavits still remains to be filed:</p>
            <ul>
                <li> Child Support Affidavit (F37) - signed by your spouse</li>
                <li> Affidavit - Desk Order Divorce Form (F38) - signed by your spouse</li>
                <li> Identification of Applicant (VSA 512) - for your Spouse</li>
            </ul>
            <p>Either you or your spouse must file this documentation using the Court Filing Number (?) that you received via e-mail. If you have
                not received a Court Filing Number then please check to the Wait for Court Filing Number step.</p>
            <p>You have indicated that you will file at the following court registry:</p>
            <p>[City]</p>
            <p>[Address]</p>
            <p>[Postal Code]</p>
        </div>
    {% endif %}
    <div id="vue-app">
        <final-filing-uploader 
            signing-location="{{ signing_location }}"
            signing-location-you="{{ signing_location_you }}"
            signing-location-spouse="{{ signing_location_spouse }}"
            how-to-sign="{{ how_to_sign }}"
            how-to-file="{{ how_to_file }}"
            sign-file-options-url="{% url 'dashboard_nav' 'sign_file_options' %}"
            print-form-url="{% url 'dashboard_nav' 'print_form' %}">
        </final-filing-uploader>
    </div>
    {% if how_to_file == 'Online' %}
        <h3>Filing with Court Services Online</h3>
        <p>When you click Next, you will be taken to the Court Services Online e-filing hub. In the next few steps you will be able to do a final
            review of your filed documentation, pay for your filing and (if completed successfully) receive a Package Number. This final step will
            complete your divorce filing.</p>
    {% endif %}
 {% endblock %}
 {% block backToDashboard %}
@ -189,4 +52,18 @@
 {% endblock %}
 {% block sidebarText %}
    {% include "dashboard/partials/sidebar_help.html" %}
 {% endblock %}
 {% block extra_css %}
    <link rel="preload" as="style" href="{% static 'dist/vue/css/finalFiling.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'dist/vue/css/finalFiling.css' %}"/>
    <link rel="preload" as="script" href="{% static 'dist/vue/js/chunk-vendors.js' %}"/>
    <link rel="preload" as="script" href="{% static 'dist/vue/js/chunk-common.js' %}"/>
    <link rel="preload" as="script" href="{% static 'dist/vue/js/finalFiling.js' %}"/>
 {% endblock %}
 {% block extra_js %}
    <script type="text/javascript" src="{% static 'dist/vue/js/chunk-vendors.js' %}"></script>
    <script type="text/javascript" src="{% static 'dist/vue/js/chunk-common.js' %}"></script>
    <script type="text/javascript" src="{% static 'dist/vue/js/finalFiling.js' %}"></script>
 {% endblock %}
--- a/edivorce/apps/core/templates/dashboard/initial_filing.html
+++ b/edivorce/apps/core/templates/dashboard/initial_filing.html
@ -1,4 +1,5 @@
 {% extends 'base.html' %}
 {% load static %}
 {% block title %}{{ block.super }}: Overview{% endblock %}
@ -16,117 +17,15 @@
        </p>
        <p>Missing a form required on this page? Check the <a href="{% url 'dashboard_nav' 'print_form' %}">Review Forms</a> step.</p>
        <p><a>Need help with Scanning your documents?</a></p>
        <div class="question-well-border-less">
            {% if signing_location == 'In-person' or signing_location_you == 'In-person' %}
                <div>
                    <p>The Notice of Joint Family Claim Form (F1) will be automatically filed for you.</p>
                </div>
                <div>
                    <p>Upload a scan of your Proof of Marriage (?)
                        {% include 'partials/upload.html' %}</p>
                </div>
                <div>
                    <p>Scan and upload the sworn Affidavit of Interpreter Form (?)
                        {% include 'partials/upload.html' %}</p>
                </div>
                <div>
                    <p>Complete, scan and upload the Registration of Divorce Proceedings (?) form
                        {% include 'partials/upload.html' %}</p>
                </div>
            {% elif signing_location_you == 'Virtual' and signing_location_spouse == 'In-person' %}
                <p>The following forms will be automatically filed for you:</p>
                <ul>
                    <li>Notice of Joint Family Claim Form (F1)</li>
                    <li>Requisition Form (F35)</li>
                    <li>Certificate of Pleadings Form (F36)</li>
                </ul>
                <p>The following forms will be submitted for you but require swearing / affirming (?) before filing (see next step for details)</p>
                <ul>
                    <li>Child Support Affidavit (F37)</li>
                    <li>Affidavit - Desk Order Divorce Form (F38)</li>
                </ul>
                <div class="question-well-border-less">
                    <div>
                        <p>Upload a scan of your Proof of Marriage (?)
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Scan and upload the sworn Affidavit of Interpreter Form (?)
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Upload the signed and scanned Draft Final Order Form (F52)
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Upload the signed and scanned Electronic Filing Statement (F96) for You
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Complete, scan and upload the Registration of Divorce Proceedings form
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Complete, scan and upload the Agreement as to Annual Income (F9) form
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Complete, scan and upload the Identification of Applicant (VSA 512) for You
                            {% include 'partials/upload.html' %}
                        </p></div>
                </div>
            {% else %}
                <p>The following forms will be automatically filed for you:</p>
                <ul>
                    <li>Notice of Joint Family Claim Form (F1)</li>
                    <li>Requisition Form (F35)</li>
                    <li>Certificate of Pleadings Form (F36)</li>
                </ul>
                <p>The following forms will be submitted for you but require swearing / affirming (?) before filing (see next step for details)</p>
                <ul>
                    <li>Child Support Affidavit (F37)</li>
                    <li>Affidavit - Desk Order Divorce Form (F38)</li>
                </ul>
                <div class="question-well-border-less">
                    <div>
                        <p>Upload a scan of your Proof of Marriage (?)
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Scan and upload the sworn Affidavit of Interpreter Form (?)
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Upload the signed and scanned Draft Final Order Form (F52)
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Upload the signed and scanned Electronic Filing Statement (F96) for You
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Upload the signed and scanned Electronic Filing Statement (F96) for Your Spouse
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Complete, scan and upload the Registration of Divorce Proceedings form
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Complete, scan and upload the Agreement as to Annual Income (F9) form
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Complete, scan and upload the Identification of Applicant (VSA 512) for You
                            {% include 'partials/upload.html' %}
                        </p></div>
                    <div>
                        <p>Complete, scan and upload the Identification of Applicant (VSA 512) for Your Spouse
                            {% include 'partials/upload.html' %}
                        </p></div>
                </div>
            {% endif %}
        <div id="vue-app">
            <initial-filing-uploader 
                signing-location="{{ signing_location }}"
                signing-location-you="{{ signing_location_you }}"
                signing-location-spouse="{{ signing_location_spouse }}">
            </initial-filing-uploader>
        </div>
        <h3>Filing with Court Services Online</h3>
        <p>When you click Next, you will be taken to the Court Services Online e-filing hub. In the next few steps you will be able to do a final
            review of your filed documentation, pay for your filing and (if completed successfully) receive a Package Number.</p>
@ -158,4 +57,18 @@
 {% endblock %}
 {% block sidebarText %}
    {% include "dashboard/partials/sidebar_help.html" %}
 {% endblock %}
 {% block extra_css %}
    <link rel="preload" as="style" href="{% static 'dist/vue/css/initialFiling.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'dist/vue/css/initialFiling.css' %}"/>
    <link rel="preload" as="script" href="{% static 'dist/vue/js/chunk-vendors.js' %}"/>
    <link rel="preload" as="script" href="{% static 'dist/vue/js/chunk-common.js' %}"/>
    <link rel="preload" as="script" href="{% static 'dist/vue/js/initialFiling.js' %}"/>
 {% endblock %}
 {% block extra_js %}
    <script type="text/javascript" src="{% static 'dist/vue/js/chunk-vendors.js' %}"></script>
    <script type="text/javascript" src="{% static 'dist/vue/js/chunk-common.js' %}"></script>
    <script type="text/javascript" src="{% static 'dist/vue/js/initialFiling.js' %}"></script>
 {% endblock %}
--- a/edivorce/apps/core/templates/partials/upload.html
+++ b/edivorce/apps/core/templates/partials/upload.html
@ -1,3 +0,0 @@
 <div style="padding: 30px; border: 1px dashed grey">
    <p>Drag and Drop the PDF document or JPG pages here or click here to Browse for files</p>
 </div>
--- a/manage.py
+++ b/manage.py
@ -4,12 +4,17 @@ import sys
 if __name__ == "__main__":
    from django.core.management import execute_from_command_line
    # check if the app is running on OpenShift
    if not os.environ.get('OPENSHIFT_BUILD_NAMESPACE', False):
        os.environ.setdefault("DJANGO_SETTINGS_MODULE", "edivorce.settings.local")
    else:
        os.environ.setdefault("DJANGO_SETTINGS_MODULE", "edivorce.settings.openshift")
    from django.core.management import execute_from_command_line
        # run npm_build (custom management command) when collectstatic is called in 
        # the S2I assemble script
        if sys.argv[1] == 'collectstatic':
            execute_from_command_line(['manage.py','npm_build'])
    execute_from_command_line(sys.argv)
--- a/vue/.browserslistrc
+++ b/vue/.browserslistrc
@ -0,0 +1,3 @@
 > 1%
 last 2 versions
 not dead
--- a/vue/.gitignore
+++ b/vue/.gitignore
@ -0,0 +1,23 @@
 .DS_Store
 node_modules
 /dist
 # local env files
 .env.local
 .env.*.local
 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 # Editor directories and files
 .idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/vue/README.md
+++ b/vue/README.md
@ -0,0 +1,19 @@
 # edivorce-uploader
 ## Project setup
 ```
 npm install
 ```
 ### Compiles and hot-reloads for development
 ```
 npm run serve
 ```
 ### Compiles and minifies for production
 ```
 npm run build
 ```
 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/vue/babel.config.js
+++ b/vue/babel.config.js
@ -0,0 +1,5 @@
 module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
 }
--- a/vue/package-lock.json
+++ b/vue/package-lock.json
--- a/vue/package.json
+++ b/vue/package.json
@ -0,0 +1,21 @@
 {
  "name": "edivorce-uploader",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-upload-component": "^2.8.20"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.0.2",
    "vue-template-compiler": "^2.6.11"
  }
 }
--- a/vue/public/final-filing.html
+++ b/vue/public/final-filing.html
@ -0,0 +1,21 @@
 <!DOCTYPE html>
 <html>
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="https://kit.fontawesome.com/bc96869e8a.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="vue-app">
      <final-filing-uploader 
          signing-location="Virtual"
          signing-location-you="Virtual"
          signing-location-spouse="Virtual"
          how-to-sign="Together"
          how-to-file="Online"
          sign-file-options-url="https://wwww.google.com"
          print-form-url="https://wwww.facebook.com">
      </final-filing-uploader>
    </div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/vue/public/initial-filing.html
+++ b/vue/public/initial-filing.html
@ -0,0 +1,17 @@
 <!DOCTYPE html>
 <html>
  <head>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <script src="https://kit.fontawesome.com/bc96869e8a.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <div id="vue-app">
      <initial-filing-uploader 
          signing-location="In-person"
          you-signing-location="In-person"
          spouse-signing-location="In-person">
      </initial-filing-uploader>
    </div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/vue/src/components/ItemTile.vue
+++ b/vue/src/components/ItemTile.vue
@ -0,0 +1,91 @@
 <template>
  <div class="item-tile">
    <div class="image-wrap">
      <img v-if="file.blob" :src="file.blob" height="auto" />
      <button type="button"class="btn-remove" @click.prevent="$emit('remove')" aria-label="Delete">
        <i class="fa fa-times-circle"></i>
      </button>
    </div>
    <div class="item-text">
    {{file.name}} ({{ Math.round(file.size/1024 * 100) / 100 }}KB)
    </div>
    <div class="button-wrapper">
      <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">
        <i class="fa fa-undo"></i>
      </button>
      <button type="button" aria-label="Rotate clockwise">
        <i class="fa fa-redo"></i>
      </button>    
    </div>
  </div>
 </template>
 <script>
 export default {
  props: {
    file: Object,
    index: Number,
    fileCount: Number
  }
 }
 </script>
 <style scoped lang="scss">
    .item-tile {
      margin-bottom: 5px;
      position: relative;
      .image-wrap {
        height: 160px;
        overflow-y: hidden;
        border: 1px solid black;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        background-color: white;
      }
      .item-text {
        text-align: center;
        min-height: 50px;
        overflow-y: hidden;
        padding: 5px;
      }
      .button-wrapper {
        text-align: center;
      }
      img {
        width: 98%;
      }
      button {
        position: relative; 
        z-index: 2;
        background-color: transparent;
        border: none;
        outline: none;
        font-size: 1.4rem;
        padding: 0;
        margin-right: 16px;
        color: #003366;
        &:last-of-type {
          margin-right: 0;
        }
        &.btn-remove {
          position: absolute;
          top: 125px;
          left: 130px;
          color: #365EBE;
        }
      }
    }
 </style>
--- a/vue/src/components/Uploader.vue
+++ b/vue/src/components/Uploader.vue
@ -0,0 +1,146 @@
 <template>
 <div>
  <div @dragover="draggingOn" @dragenter="draggingOn" @dragleave="draggingOff" @dragend="draggingOff" @drop="draggingOff">
    <file-upload
      ref="upload"
      v-model="files"
      :multiple="true"
      :drop="true"
      :drop-directory="false"
      post-action="/post.method"
      put-action="/put.method"
      @input-file="inputFile"
      @input-filter="inputFilter"
      :class="['drop-zone', dragging ? 'dragging' : '']"
    >
    <div v-if="files.length === 0" class="placeholder">
    <i class="fa fa-plus-circle"></i><br>
    <em>Drag and Drop the PDF document or JPG pages here,<br>or click here to Browse for files.</em>
    </div>
    <div v-else class="items">
  <div v-for="(file, index) in files" v-bind:key="index" class="item">
    <item-tile 
      :file="file" 
      :index="index" 
      :file-count="files.length"
      @remove="remove(file)"
      @moveup="moveUp(index)"
      @movedown="moveDown(index)"/>
  </div>    
  </div>
    </file-upload>
  </div>
 </div>
 </template>
 <script>
 import VueUploadComponent from 'vue-upload-component'
 import ItemTile from './ItemTile'
 export default {
  data: function () {
    return {
      files: [],
      dragging: false
    }
  },
  components: {
    FileUpload: VueUploadComponent,
    ItemTile
  },
  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
        console.log('response', newFile.response)
        if (newFile.xhr) {
          //  Get the response status code
          console.log('status', newFile.xhr.status)
        }
      }
    },
    /**
     * 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)) {
          return prevent()
        }
      }
      // Create a blob field
      if (newFile) {
        newFile.blob = ''
        let URL = window.URL || window.webkitURL
        if (URL && URL.createObjectURL) {
          newFile.blob = URL.createObjectURL(newFile.file)
        }
      }
    },
    remove(file) {
      this.$refs.upload.remove(file)
    },
    moveUp(old_index) {
      if (old_index >= 1 && this.files.length > 1) {
        this.files.splice(old_index - 1, 0, this.files.splice(old_index, 1)[0]);
      }
    },
    moveDown(old_index) {
      if (old_index <= this.files.length && this.files.length > 1) {
        this.files.splice(old_index + 1, 0, this.files.splice(old_index, 1)[0]);
      }
    },
    draggingOn() {
      this.dragging = true;
    },
    draggingOff() {
      this.dragging = false;
    }    
  }
 }
 </script>
 <style scoped lang="scss">
  .drop-zone {
    width: 95%;
    display: block;
    text-align: left;
    border: 2px #365EBE dashed;
    border-radius: 6px;
    padding: 18px;
    &.dragging {
      background-color: #F2F2F2;
    }
    .item {
      margin-bottom: 20px;
      background-color: #F2F2F2;
      width: 160px;
      display: inline-block;
      margin-right: 20px;
    }
    .fa-plus-circle {
      font-size: 2rem;
      margin-bottom: 8px;
      color: #365EBE;
    }
    .placeholder {
      text-align: center;
    }
  }
 </style>
--- a/vue/src/pages/final-filing/FinalFiling.vue
+++ b/vue/src/pages/final-filing/FinalFiling.vue
@ -0,0 +1,176 @@
 <template>
  <div id="app">
    <div class="question-well-border-less" v-if="signingLocation === 'Virtual'">
        <p>
            Upload the signed / sworn and scanned Child Support Affidavit (F37)
            <Uploader/>
        </p>
        <p>
            Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38)
            <Uploader/>
        </p>
    </div>
    <div class="question-well-border-less" v-else-if="signingLocationYou === 'Virtual' && signingLocationSpouse === 'Virtual'">
        <p>
            Upload the signed / sworn and scanned Child Support Affidavit (F37) - For You
            <Uploader/>
        </p>
        <p>
            Upload the signed / sworn and scanned Child Support Affidavit (F37) - For Your Spouse
            <Uploader/>
        </p>
        <p>
            Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38) - For You
            <Uploader/>
        </p>
        <p>
            Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38) - For Your Spouse
            <Uploader/>
        </p>
    </div>
    <template v-else-if="howToFile === 'Online'">
        <div class="question-well-border-less" v-if="signingLocation.length || (signingLocationYou.length && signingLocationSpouse.length)">
            <p>Missing a form required on this page? Check the <a :href="printFormUrl">Review Forms</a> step.</p>
            <p>The following forms will be automatically filed for you:</p>
            <ul>
                <li>Requisition Form (F35)</li>
                <li>Certificate of Pleadings Form (F36)</li>
            </ul>
            <p>
                Upload the signed / sworn and scanned Child Support Affidavit (F37)
                <Uploader/>
            </p>
            <p>
                Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38)
                <Uploader/>
            </p>
            <p>
                Upload the signed and scanned Draft Final Order Form (F52)
                <Uploader/>
            </p>
            <p>
                Upload the signed and scanned Electronic Fipng Statement (F96) for You
                <Uploader/>
            </p>
            <p>
                Upload the signed and scanned Electronic Fipng Statement (F96) for Your Spouse
                <Uploader/>
            </p>
            <p>
                Complete, scan and upload the Agreement as to Annual Income (F9) form
                <Uploader/>
            </p>
            <p>
                Complete, scan and upload the Identification of Apppcant (VSA 512) for You
                <Uploader/>
            </p>
            <p>
                Complete, scan and upload the Identification of Apppcant (VSA 512) for Your Spouse
                <Uploader/>
            </p>
        </div>
        <div class="question-well-border-less" v-else>
            <h2>You need to select a signing method in the <a :href="signFileOptionsUrl">Signing & Filing Options</a>
                step.</h2>
        </div>
    </template>
    <template v-else-if="howToSign === 'Together'">
        <div>
            <p>Staple each form together and then fasten all forms with a paper clip, in the following order:</p>
            <ul>
                <li>Notice of Joint Family Claim Form (F1)</li>
                <li>Requisition Form (F35)</li>
                <li>Draft Final Order Form (F52)</li>
                <li>Certificate of Pleadings Form (F36)</li>
                <li>Child Support Affidavit (F37) signed by claimants</li>
                <li>Affidavit Desk Order Divorce (F38) signed by both claimants</li>
                <li>Agreement as to Annual Income (F9)</li>
            </ul>
            <p>Also ensure you bring the following additional documentation:</p>
            <ul>
                <li>Proof of marriage</li>
                <li>Registration of Joint Divorce Proceedings (JUS280)</li>
                <li>Identification of Applicant (VSA 512) for Claimant 1 ([Name])</li>
                <li>Identification of Applicant (VSA 512) for Claimant 2 ([Name])</li>
                <li>Agreement as to Annual Income (F9)</li>
            </ul>
            <p>If you have other court orders or a written separation agreement, they should also be attached to your Affidavit — Desk Order Divorce
                Form</p>
            <p>(F38). Note that these agreements or orders must not contradict what's in your divorce application.</p>
            <p>You have indicated that you will file at the following court registry:</p>
            <p>[City]</p>
            <p>[Address]</p>
            <p>[Postal Code]</p>
            <p>Once sign / sworn and filed, you will receive a Court Filing Number <i class="fa fa-question-circle"></i>. This number will be used if you need to file any
                additional documentation.</p>
        </div>
    </template>
    <template v-else-if="howToSign === 'Separately'">
        <div class="question-well-border-less">
            <p>Staple each form together and then fasten all forms with a paper clip, in the following order:</p>
            <ul>
                <li> Notice of Joint Family Claim Form (F1)</li>
                <li> Requisition Form (F35)</li>
                <li> Draft Final Order Form (F52)</li>
                <li> Certificate of Pleadings Form (F36)</li>
                <li> Child Support Affidavit (F37) signed by you</li>
                <li> Affidavit Desk Order Divorce (F38) signed by you</li>
                <li> Agreement as to Annual Income (F9)</li>
            </ul>
            <br>
            <p>Also ensure you bring the following additional documentation:</p>
            <ul>
                <li> Proof of marriage</li>
                <li> Registration of Joint Divorce Proceedings (JUS280)</li>
                <li> Identification of Applicant (VSA 512) for Claimant 1 ([Name])</li>
                <li> Agreement as to Annual Income (F9)</li>
            </ul>
            <p>If you have other court orders or a written separation agreement, they should also be attached to your Affidavit — Desk Order Divorce
                Form</p>
            <p>(F38). Note that these agreements or orders must not contradict what's in your divorce application.</p>
            <p>You have indicated that you will file at the following court registry:</p>
            <p>[City]</p>
            <p>[Address]</p>
            <p>[Postal Code]</p>
            <p>Once sign / sworn and filed, you will receive a Court Filing Number <i class="fa fa-question-circle"></i>. This number will be used if you need to file any
                additional documentation.</p>
            <h2>Spousal Documentation Requirements</h2>
            <p>The following sworn / affirmed affidavits still remains to be filed:</p>
            <ul>
                <li> Child Support Affidavit (F37) - signed by your spouse</li>
                <li> Affidavit - Desk Order Divorce Form (F38) - signed by your spouse</li>
                <li> Identification of Applicant (VSA 512) - for your Spouse</li>
            </ul>
            <p>Either you or your spouse must file this documentation using the Court Filing Number <i class="fa fa-question-circle"></i> that you received via e-mail. If you have
                not received a Court Filing Number then please check to the Wait for Court Filing Number step.</p>
            <p>You have indicated that you will file at the following court registry:</p>
            <p>[City]</p>
            <p>[Address]</p>
            <p>[Postal Code]</p>
        </div>
    </template>
  </div>
 </template>
 <script>
 import Uploader from '../../components/Uploader.vue'
 export default {
  name: 'App',
  components: {
    Uploader
  },
  props: {
    signingLocation: String, 
    signingLocationYou: String, 
    signingLocationSpouse: String, 
    howToSign: String, 
    howToFile: String, 
    signFileOptionsUrl: String, 
    printFormUrl: String
  }
 }
 </script>
 <style>
 </style>
--- a/vue/src/pages/final-filing/main.js
+++ b/vue/src/pages/final-filing/main.js
@ -0,0 +1,9 @@
 import Vue from 'vue';
 import App from './FinalFiling.vue';
 Vue.config.productionTip = false;
 Vue.component("final-filing-uploader", App);
 new Vue({ 
  el: '#vue-app' 
 });
--- a/vue/src/pages/initial-filing/InitialFiling.vue
+++ b/vue/src/pages/initial-filing/InitialFiling.vue
@ -0,0 +1,159 @@
 <template>
  <div class="question-well-border-less" id="app">
    <template v-if="signingLocation === 'In-person' || signingLocationYou === 'In-person'">
      <div>
        <div>
          <p>The Notice of Joint Family Claim Form (F1) will be automatically filed for you.</p>
        </div>
        <div>
          <p>Upload a scan of your Proof of Marriage <i class="fa fa-question-circle"></i>
            <Uploader/>
          </p>
        </div>
        <div>
          <p>Scan and upload the sworn Affidavit of Interpreter Form <i class="fa fa-question-circle"></i>
            <Uploader/>
          </p>
        </div>
        <div>
          <p>Complete, scan and upload the Registration of Divorce Proceedings <i class="fa fa-question-circle"></i> form
            <Uploader/>
          </p>
        </div>
      </div>
    </template>
    <template v-else-if="signingLocationYou === 'Virtual' && signingLocationSpouse === 'In-person'">
      <div>
          <p>The following forms will be automatically filed for you:</p>
          <ul>
            <li>Notice of Joint Family Claim Form (F1)</li>
            <li>Requisition Form (F35)</li>
            <li>Certificate of Pleadings Form (F36)</li>
          </ul>
          <p>The following forms will be submitted for you but require swearing / affirming <i class="fa fa-question-circle"></i> before filing (see next step for details)</p>
          <ul>
            <li>Child Support Affidavit (F37)</li>
            <li>Affidavit - Desk Order Divorce Form (F38)</li>
          </ul>
          <div class="question-well-border-less">
            <div>
              <p>Upload a scan of your Proof of Marriage <i class="fa fa-question-circle"></i>
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Scan and upload the sworn Affidavit of Interpreter Form <i class="fa fa-question-circle"></i>
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Upload the signed and scanned Draft Final Order Form (F52)
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Upload the signed and scanned Electronic Filing Statement (F96) for You
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Complete, scan and upload the Registration of Divorce Proceedings form
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Complete, scan and upload the Agreement as to Annual Income (F9) form
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Complete, scan and upload the Identification of Applicant (VSA 512) for You
                <Uploader/>
              </p>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div>
          <p>The following forms will be automatically filed for you:</p>
          <ul>
            <li>Notice of Joint Family Claim Form (F1)</li>
            <li>Requisition Form (F35)</li>
            <li>Certificate of Pleadings Form (F36)</li>
          </ul>
          <p>The following forms will be submitted for you but require swearing / affirming <i class="fa fa-question-circle"></i> before filing (see next step for details)</p>
          <ul>
            <li>Child Support Affidavit (F37)</li>
            <li>Affidavit - Desk Order Divorce Form (F38)</li>
          </ul>
          <div class="question-well-border-less">
            <div>
              <p>Upload a scan of your Proof of Marriage <i class="fa fa-question-circle"></i>
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Scan and upload the sworn Affidavit of Interpreter Form <i class="fa fa-question-circle"></i>
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Upload the signed and scanned Draft Final Order Form (F52)
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Upload the signed and scanned Electronic Filing Statement (F96) for You
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Upload the signed and scanned Electronic Filing Statement (F96) for Your Spouse
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Complete, scan and upload the Registration of Divorce Proceedings form
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Complete, scan and upload the Agreement as to Annual Income (F9) form
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Complete, scan and upload the Identification of Applicant (VSA 512) for You
                <Uploader/>
              </p>
            </div>
            <div>
              <p>Complete, scan and upload the Identification of Applicant (VSA 512) for Your Spouse
                <Uploader/>
              </p>
            </div>
          </div>
        </div>
      </template>
  </div>
 </template>
 <script>
 import Uploader from '../../components/Uploader.vue'
 export default {
  name: 'App',
  components: {
    Uploader
  },
  props: {
    signingLocation: String,
    signingLocationYou: String,
    signingLocationSpouse: String
  }
 }
 </script>
 <style>
 </style>
--- a/vue/src/pages/initial-filing/main.js
+++ b/vue/src/pages/initial-filing/main.js
@ -0,0 +1,9 @@
 import Vue from 'vue';
 import App from './InitialFiling.vue';
 Vue.config.productionTip = false;
 Vue.component("initial-filing-uploader", App);
 new Vue({ 
  el: '#vue-app' 
 });
--- a/vue/vue.config.js
+++ b/vue/vue.config.js
@ -0,0 +1,19 @@
 module.exports = {
  outputDir: '../edivorce/apps/core/static/dist/vue',
  filenameHashing: false,
  runtimeCompiler: true,
  pages: {
    initialFiling: {
      entry: 'src/pages/initial-filing/main.js',
      template: 'public/initial-filing.html',
      filename: 'index.html',
      chunks: ['chunk-vendors', 'chunk-common', 'initialFiling']
    },
    finalFiling: {
      entry: 'src/pages/final-filing/main.js',
      template: 'public/final-filing.html',
      filename: 'final-filing.html',
      chunks: ['chunk-vendors', 'chunk-common', 'finalFiling']
    }
  }
 }