creylopez
/
django-ex
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 2 Wiki Activity
Browse Source

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

pull/170/head
Michael Olund 5 years ago
parent
8a2ee54707
commit
1f6694ce99
21 changed files with 12610 additions and 266 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +11
    -0
      edivorce/apps/core/management/commands/npm_build.py
  2. +4
    -0
      edivorce/apps/core/templates/base.html
  3. +29
    -152
      edivorce/apps/core/templates/dashboard/final_filing.html
  4. +23
    -110
      edivorce/apps/core/templates/dashboard/initial_filing.html
  5. +0
    -3
      edivorce/apps/core/templates/partials/upload.html
  6. +6
    -1
      manage.py
  7. +3
    -0
      vue/.browserslistrc
  8. +23
    -0
      vue/.gitignore
  9. +19
    -0
      vue/README.md
  10. +5
    -0
      vue/babel.config.js
  11. +11819
    -0
      vue/package-lock.json
  12. +21
    -0
      vue/package.json
  13. +21
    -0
      vue/public/final-filing.html
  14. +17
    -0
      vue/public/initial-filing.html
  15. +91
    -0
      vue/src/components/ItemTile.vue
  16. +146
    -0
      vue/src/components/Uploader.vue
  17. +176
    -0
      vue/src/pages/final-filing/FinalFiling.vue
  18. +9
    -0
      vue/src/pages/final-filing/main.js
  19. +159
    -0
      vue/src/pages/initial-filing/InitialFiling.vue
  20. +9
    -0
      vue/src/pages/initial-filing/main.js
  21. +19
    -0
      vue/vue.config.js

+ 11
- 0
edivorce/apps/core/management/commands/npm_build.py View File

@ -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")

+ 4
- 0
edivorce/apps/core/templates/base.html View File

@ -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>

+ 29
- 152
edivorce/apps/core/templates/dashboard/final_filing.html View File

@ -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 %}

+ 23
- 110
edivorce/apps/core/templates/dashboard/initial_filing.html View File

@ -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 %}

+ 0
- 3
edivorce/apps/core/templates/partials/upload.html View File

@ -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>

+ 6
- 1
manage.py View File

@ -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)

+ 3
- 0
vue/.browserslistrc View File

@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

+ 23
- 0
vue/.gitignore View File

@ -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?

+ 19
- 0
vue/README.md View File

@ -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/).

+ 5
- 0
vue/babel.config.js View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

+ 11819
- 0
vue/package-lock.json
File diff suppressed because it is too large
View File


+ 21
- 0
vue/package.json View File

@ -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"
}
}

+ 21
- 0
vue/public/final-filing.html View File

@ -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>

+ 17
- 0
vue/public/initial-filing.html View File

@ -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>

+ 91
- 0
vue/src/components/ItemTile.vue View File

@ -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>

+ 146
- 0
vue/src/components/Uploader.vue View File

@ -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>

+ 176
- 0
vue/src/pages/final-filing/FinalFiling.vue View File

@ -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>

+ 9
- 0
vue/src/pages/final-filing/main.js View File

@ -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'
});

+ 159
- 0
vue/src/pages/initial-filing/InitialFiling.vue View File

@ -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>

+ 9
- 0
vue/src/pages/initial-filing/main.js View File

@ -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'
});

+ 19
- 0
vue/vue.config.js View File

@ -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']
}
}
}

Write Preview
Loading…
Cancel
Save