Browse Source

Re-formatted Vue code with Prettier

pull/169/head
Michael Olund 5 years ago
parent
commit
82a6d744be
11 changed files with 980 additions and 763 deletions
  1. +97
    -72
      vue/src/components/Uploader/Image.vue
  2. +86
    -56
      vue/src/components/Uploader/ItemTile.vue
  3. +47
    -29
      vue/src/components/Uploader/ModalPreview.vue
  4. +13
    -18
      vue/src/components/Uploader/ProgressBar.vue
  5. +427
    -357
      vue/src/components/Uploader/Uploader.vue
  6. +128
    -78
      vue/src/pages/final-filing/FinalFiling.vue
  7. +4
    -4
      vue/src/pages/final-filing/main.js
  8. +135
    -115
      vue/src/pages/initial-filing/InitialFiling.vue
  9. +4
    -4
      vue/src/pages/initial-filing/main.js
  10. +38
    -29
      vue/src/utils/forms.js
  11. +1
    -1
      vue/src/utils/rotation.js

+ 97
- 72
vue/src/components/Uploader/Image.vue View File

@ -1,74 +1,98 @@
<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="!this.file.error && file.type === 'application/pdf'"></i>
<i class="fa fa-frown-o" v-if="this.file.error"></i>
<button type="button" class="btn-remove" @click.prevent="$emit('removeclick')" aria-label="Delete">
<i class="fa fa-times-circle"></i>
</button>
<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="!this.file.error && file.type === 'application/pdf'"
></i>
<i class="fa fa-frown-o" v-if="this.file.error"></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"
:scale="scale"
:rotate-val="rotateVal"
:show-modal="showModal"
@close="closePreview()"
/>
</div>
<modal-preview :file="file"
:imageStyle="imageStyle"
:rotate-val="rotateVal"
:show-modal="showModal"
@close="closePreview()" />
</div>
</template>
<script>
import ModalPreview from './ModalPreview';
import rotateFix from '../../utils/rotation';
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;
}
}
import ModalPreview from "./ModalPreview";
import rotateFix from "../../utils/rotation";
export default {
props: {
file: Object,
},
closePreview() {
this.showModal = false;
}
},
computed: {
isValidImage() {
return this.file.objectURL && !this.file.error && this.file.type !== 'application/pdf';
components: {
ModalPreview,
},
rotateVal() {
return rotateFix(this.file.rotation);
data: function() {
return {
showModal: false,
};
},
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 '';
}
}
}
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() {
return rotateFix(this.file.rotation);
},
scale() {
if (!this.file.height || this.file.height <= 0) {
return 1;
}
return this.file.width / this.file.height;
},
imageStyle() {
const shift = -100 * this.scale;
if (this.rotateVal === 90) {
return `transform:rotate(90deg) translateY(${shift}%) scale(${this.scale}); transform-origin: top left;`;
}
if (this.rotateVal === 270) {
return `transform:rotate(270deg) translateX(${shift}%) scale(${this.scale}); transform-origin: top left;`;
}
if (this.rotateVal === 180) {
return "transform:rotate(180deg);";
}
return "";
},
},
};
</script>
<style scoped lang="scss">
@ -90,18 +114,19 @@ export default {
left: 0;
}
i.fa-file-pdf-o, i.fa-frown-o {
i.fa-file-pdf-o,
i.fa-frown-o {
display: block;
font-size: 48px;
margin-left: 60px;
}
i.fa-file-pdf-o {
color: #D5D5D5;
color: #d5d5d5;
}
i.fa-frown-o {
color: #EEE;
color: #eee;
}
&::after {
@ -109,11 +134,11 @@ export default {
content: "\f06e";
margin: auto;
font-size: 43px;
color: transparent;
color: transparent;
}
&.valid:hover {
background-color: #365EBE;
background-color: #365ebe;
cursor: pointer;
button.btn-remove {
@ -129,9 +154,9 @@ export default {
color: white;
}
&:hover img {
&:hover img {
opacity: 0.12;
}
}
}
button {
@ -146,7 +171,7 @@ export default {
z-index: 4;
i.fa {
color: #365EBE;
color: #365ebe;
font-size: 23px;
&::before {
@ -157,4 +182,4 @@ export default {
}
}
}
</style>
</style>

+ 86
- 56
vue/src/components/Uploader/ItemTile.vue View File

@ -1,72 +1,103 @@
<template>
<div :class="['item-tile', file.error ? 'error': '']" v-if="file.progress === '100.00' || file.error">
<uploaded-image :file="file" :image-style="imageStyle" @imageclick="showPreview" @removeclick="$emit('remove')" />
<div
:class="['item-tile', file.error ? 'error' : '']"
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">
<div class="filename-text">
{{file.name}}
{{ file.name }}
</div>
<div class="size-text">
({{ Math.round(file.size/1024/1024 * 100) / 100 }} MB)
</div>
({{ Math.round((file.size / 1024 / 1024) * 100) / 100 }} MB)
</div>
</div>
<div class="button-wrapper" v-if="file.error || file.type !== 'application/pdf'">
<div
class="button-wrapper"
v-if="file.error || file.type !== 'application/pdf'"
>
<div v-if="!file.active && file.success && !isPdf">
<button type="button" @click.prevent="$emit('moveup')" :disabled="index === 0" aria-label="Move down one position">
<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">
<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')">
<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')">
<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" v-if="file.error">File Upload Error</div>
<div class="alert alert-danger" v-if="file.error">
File Upload Error
</div>
</div>
</div>
</div>
<div v-else>
<progress-bar :file="file"/>
<progress-bar :file="file" />
</div>
</template>
<script>
import UploadedImage from './Image'
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;
import UploadedImage from "./Image";
import ProgressBar from "./ProgressBar";
export default {
props: {
file: Object,
index: Number,
fileCount: Number,
},
closePreview() {
this.showModal = false;
}
},
computed: {
isPdf() {
return this.file.type === 'application/pdf';
}
}
}
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">
@ -78,20 +109,19 @@ export default {
.item-text {
text-align: center;
padding: 7px 10px;
font-size: 16px;
font-size: 16px;
line-height: 24px;
min-height: 87px;
.filename-text {
min-height: 25px;
max-height: 50px;
overflow: hidden;
overflow-wrap: anywhere;;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
-webkit-box-orient: vertical;
}
.size-text {
min-height: 25px;
@ -110,9 +140,9 @@ export default {
border-bottom-right-radius: 6px;
border: 1px solid silver;
border-top: none;
background-color: #F2F2F2;
background-color: #f2f2f2;
margin-bottom: 10px;
.alert-danger {
background-color: inherit;
border: none;
@ -126,9 +156,9 @@ export default {
&.error {
.bottom-wrapper {
background-color: #F7D4D5;
border: 1px solid #D8292F;
border-top: none;
background-color: #f7d4d5;
border: 1px solid #d8292f;
border-top: none;
}
}
}
@ -137,7 +167,7 @@ export default {
<style lang="scss">
.item-tile {
button {
position: relative;
position: relative;
z-index: 2;
background-color: transparent;
border: none;
@ -172,8 +202,8 @@ export default {
&.error {
button.btn-remove i.fa {
color: #D8292F;
color: #d8292f;
}
}
}
</style>
</style>

+ 47
- 29
vue/src/components/Uploader/ModalPreview.vue View File

@ -1,39 +1,56 @@
<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">
<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"
/>
</modal>
</template>
<script>
import { Modal } from 'uiv';
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;
}
},
}
export default {
props: {
file: Object,
imageStyle: String,
rotateVal: Number,
showModal: Boolean,
scale: Number,
},
components: {
Modal,
},
computed: {
modalImageStyle() {
let extraCss = "";
if (this.rotateVal === 90 || this.rotateVal === 270) {
if (this.scale < 1) {
extraCss = " width: 100%; height: inherit !important;";
} else {
extraCss = ` width: calc(${85 /
this.scale}vh); height: inherit !important;`;
}
} else {
extraCss = " max-height: 85vh;";
}
return this.imageStyle + extraCss;
},
},
};
</script>
<style lang="scss">
.image-preview-modal {
.modal-dialog {
max-width: 780px;
width: inherit;
width: fit-content;
text-align: center;
}
@ -43,13 +60,14 @@ export default {
-webket-box-shadow: none;
border: none;
.modal-body, .modal-header {
.modal-body,
.modal-header {
padding: 0 !important;
}
.modal-body {
img {
max-width: 100%;
max-width: 780px;
}
}
@ -58,6 +76,6 @@ export default {
color: white;
opacity: 1;
}
}
}
}
</style>
</style>

+ 13
- 18
vue/src/components/Uploader/ProgressBar.vue View File

@ -1,21 +1,16 @@
<template>
<div>
<div class="item-tile" v-if="file.progress !== '0.00'">
<div class="item-tile" v-if="file.progress !== '0.00'">
<div class="status-wrap">
<div>
Uploading...<br>{{ file.progress}}%
</div>
<div>Uploading...<br />{{ file.progress }}%</div>
<div class="progress">
<div :style="'width:' + file.progress + '%'">
</div>
<div :style="'width:' + file.progress + '%'"></div>
</div>
</div>
</div>
<div class="item-tile" v-else>
<div class="item-tile" v-else>
<div class="status-wrap">
<div>
Waiting...<br><br>
</div>
<div>Waiting...<br /><br /></div>
<div class="progress"></div>
</div>
</div>
@ -23,11 +18,11 @@
</template>
<script>
export default {
props: {
file: Object
}
}
export default {
props: {
file: Object,
},
};
</script>
<style scoped lang="scss">
@ -44,7 +39,7 @@ export default {
.progress {
width: calc(100% - 1.5px);
background-color: #F2F2F3;
background-color: #f2f2f3;
height: 22px;
position: relative;
bottom: -54px;
@ -53,11 +48,11 @@ export default {
border-top-right-radius: 0;
> div {
background-color: #365EBE;
background-color: #365ebe;
height: 22px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
}
}
</style>
</style>

+ 427
- 357
vue/src/components/Uploader/Uploader.vue View File

@ -1,416 +1,486 @@
<template>
<div>
<h5 class="uploader-label">
{{ formDef.preText }}
<a href="javascript:void(0)" :id="'Tooltip-' + uniqueId">
{{ formDef.name }} <i class="fa fa-question-circle"></i>
</a>
<strong v-if="party === 1"> - For You</strong>
<strong v-if="party === 2"> - For Your Spouse</strong>
</h5>
<tooltip :text="formDef.help" :target="'#Tooltip-' + uniqueId"></tooltip>
<label :for="inputId" class="sr-only">
{{ formDef.preText }} {{ formDef.name }}
<span v-if="party === 1"> - For You</span>
<span v-if="party === 2"> - For Your Spouse</span>
</label>
<div @dragover="dragOn" @dragenter="dragOn" @dragleave="dragOff" @dragend="dragOff" @drop="dragOff">
<file-upload
ref="upload"
v-model="files"
:multiple="true"
:maximum="maxFiles"
:size="maxMegabytes * 1024 * 1024"
:drop="true"
:drop-directory="false"
:post-action="postAction"
:input-id="inputId"
name="file"
:class="['drop-zone', dragging ? 'dragging' : '']"
:data="inputKeys"
@input-file="inputFile"
@input-filter="inputFilter">
<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>
<template v-else>
<div class="text-danger error-top" v-if="fileErrors === 1">
<strong>One file has failed to upload to the server. Please remove the file marked 'File Upload Error' and try uploading it again.</strong>
</div>
<div class="text-danger error-top" v-if="fileErrors > 1">
<strong>Some files have failed to upload to the server. Please remove the files marked 'File Upload Error' and try uploading them again.</strong>
</div>
<div class="text-danger error-top" v-if="tooBig">
<strong>The total of all uploaded files for this form cannot exceed {{ maxMegabytes }} MB.
Please reduce the size of your files so the total is below this limit.</strong>
</div>
<div class="cards">
<div v-for="(file, index) in files" v-bind:key="index" class="card">
<item-tile
:file="file"
:index="index"
:file-count="files.length"
@remove="remove(file)"
@moveup="moveUp(index)"
@movedown="moveDown(index)"
@rotateleft="rotateLeft(index)"
@rotateright="rotateRight(index)"/>
<div>
<h5 class="uploader-label">
{{ formDef.preText }}
<a href="javascript:void(0)" :id="'Tooltip-' + uniqueId">
{{ formDef.name }} <i class="fa fa-question-circle"></i>
</a>
<strong v-if="party === 1"> - For You</strong>
<strong v-if="party === 2"> - For Your Spouse</strong>
</h5>
<tooltip :text="formDef.help" :target="'#Tooltip-' + uniqueId"></tooltip>
<label :for="inputId" class="sr-only">
{{ formDef.preText }} {{ formDef.name }}
<span v-if="party === 1"> - For You</span>
<span v-if="party === 2"> - For Your Spouse</span>
</label>
<div
@dragover="dragOn"
@dragenter="dragOn"
@dragleave="dragOff"
@dragend="dragOff"
@drop="dragOff"
>
<file-upload
ref="upload"
v-model="files"
:multiple="true"
:maximum="maxFiles"
:size="maxMegabytes * 1024 * 1024"
:drop="true"
:drop-directory="false"
:post-action="postAction"
:input-id="inputId"
name="file"
:class="['drop-zone', dragging ? 'dragging' : '']"
:data="inputKeys"
@input-file="inputFile"
@input-filter="inputFilter"
>
<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 class="upload-button" v-if="!tooBig">
<div class="upload-button-wrapper">
<i class="fa fa-plus-circle"></i>
<template v-else>
<div class="text-danger error-top" v-if="fileErrors === 1">
<strong>
One file has failed to upload to the server. Please remove the
file marked 'File Upload Error' and try uploading it again.
</strong>
</div>
</div>
</div>
<div class="text-danger pull-right error-bottom" v-if="tooBig">
<em>
<strong>
(Total {{ Math.round(totalSize/1024/1024 * 100) / 100 }}
MB of {{ maxMegabytes }} MB)
</strong>
</em>
</div>
</template>
</file-upload>
</div>
<div class="pull-right" v-if="!tooBig">
<em>(Maximum {{ maxMegabytes }} MB)</em>
<div class="text-danger error-top" v-if="fileErrors > 1">
<strong>
Some files have failed to upload to the server. Please remove the
files marked 'File Upload Error' and try uploading them again.
</strong>
</div>
<div class="text-danger error-top" v-if="tooBig">
<strong>
The total of all uploaded files for this form cannot exceed
{{ maxMegabytes }} MB. Please reduce the size of your files so the
total is below this limit.
</strong>
</div>
<div class="cards">
<div v-for="(file, index) in files" v-bind:key="index" class="card">
<item-tile
:file="file"
:index="index"
:file-count="files.length"
@remove="remove(file)"
@moveup="moveUp(index)"
@movedown="moveDown(index)"
@rotateleft="rotateLeft(index)"
@rotateright="rotateRight(index)"
/>
</div>
<div class="upload-button" v-if="!tooBig">
<div class="upload-button-wrapper">
<i class="fa fa-plus-circle"></i>
</div>
</div>
</div>
<div class="text-danger pull-right error-bottom" v-if="tooBig">
<em>
<strong>
(Total
{{ Math.round((totalSize / 1024 / 1024) * 100) / 100 }} MB of
{{ maxMegabytes }} MB)
</strong>
</em>
</div>
</template>
</file-upload>
</div>
<div class="pull-right" v-if="!tooBig">
<em>(Maximum {{ maxMegabytes }} MB)</em>
</div>
<modal ref="warningModal" class="warning-modal" v-model="showWarning">
{{ warningText }}
</modal>
</div>
<modal ref="warningModal" class="warning-modal" v-model="showWarning">
{{ warningText }}
</modal>
</div>
</template>
<script>
import VueUploadComponent from 'vue-upload-component'
import { Tooltip, Modal } from 'uiv';
import ItemTile from './ItemTile'
import FormDefinitions from "../../utils/forms";
import rotateFix from '../../utils/rotation';
import axios from 'axios';
import graphQLStringify from 'stringify-object';
import VueUploadComponent from "vue-upload-component";
import { Tooltip, Modal } from "uiv";
import ItemTile from "./ItemTile";
import FormDefinitions from "../../utils/forms";
import rotateFix from "../../utils/rotation";
import axios from "axios";
import graphQLStringify from "stringify-object";
export default {
props: {
docType: String,
party: { type: Number, default: 0 }
},
data: function () {
return {
maxFiles: 30,
maxMegabytes: 10,
files: [],
dragging: false,
showWarning: false,
warningText: "",
isDirty: false
}
},
components: {
FileUpload: VueUploadComponent,
ItemTile,
Tooltip,
Modal
},
computed: {
inputId() {
return "Uploader-" + this.uniqueId;
export default {
props: {
docType: String,
party: { type: Number, default: 0 },
},
inputKeys() {
data: function() {
return {
doc_type: this.docType,
party_code: this.party
maxFiles: 30,
maxMegabytes: 10,
files: [],
dragging: false,
showWarning: false,
warningText: "",
isDirty: false,
};
},
formDef() {
return FormDefinitions[this.docType];
},
postAction() {
return this.$parent.proxyRootPath + "api/documents/"
components: {
FileUpload: VueUploadComponent,
ItemTile,
Tooltip,
Modal,
},
uniqueId() {
if (this.party === 0) {
return this.docType;
}
return this.docType + this.party;
},
totalSize() {
let size = 0;
this.files.forEach((file) => {
if (!file.error) {
size += file.size;
computed: {
inputId() {
return "Uploader-" + this.uniqueId;
},
inputKeys() {
return {
doc_type: this.docType,
party_code: this.party,
};
},
formDef() {
return FormDefinitions[this.docType];
},
postAction() {
return this.$parent.proxyRootPath + "api/documents/";
},
uniqueId() {
if (this.party === 0) {
return this.docType;
}
});
return size;
},
fileErrors() {
let count = 0;
this.files.forEach((file) => {
if (file.error) {
count++;
}
});
return count;
},
tooBig() {
return this.totalSize > this.maxMegabytes * 1024 * 1024;
}
},
methods: {
inputFile(newFile, oldFile) {
// upload is complete
if (newFile && oldFile && !newFile.active && oldFile.active) {
if (newFile.xhr) {
// Error Handling
const statusCode = newFile.xhr.status;
if (statusCode === 400) {
// 400 validation error: show the message returned by the server
const message = JSON.parse(newFile.xhr.responseText)[0];
this.showError(message);
this.$refs.upload.remove(newFile);
} else if (statusCode === 403) {
this.showError('Error: Your user session has expired. Please log in again.');
} else if (statusCode !== 200 && statusCode !== 201 ) {
// 500 server error: show the status text and a generic message
this.showError('Error: ' + newFile.xhr.statusText + '. Please try the upload again. If this doesn\'t work, try again later.');
console.log('status', statusCode)
return this.docType + this.party;
},
totalSize() {
let size = 0;
this.files.forEach((file) => {
if (!file.error) {
size += file.size;
}
}
}
this.$refs.upload.active = true;
});
return size;
},
fileErrors() {
let count = 0;
this.files.forEach((file) => {
if (file.error) {
count++;
}
});
return count;
},
tooBig() {
return this.totalSize > this.maxMegabytes * 1024 * 1024;
},
pdfURL() {
return `${this.$parent.proxyRootPath}pdf-images/${this.docType}/${this.party}/`;
},
},
inputFilter(newFile, oldFile, prevent) {
if (newFile && !oldFile) {
// Filter non-image file
if (!/\.(jpeg|jpg|gif|png|pdf)$/i.test(newFile.name)) {
this.showError('Unsupported file type. Allowed file types are .jpeg, .jpg, .gif, .png and .pdf.');
return prevent()
methods: {
inputFile(newFile, oldFile) {
// upload is complete
if (newFile && oldFile && !newFile.active && oldFile.active) {
if (newFile.xhr) {
// Error Handling
const statusCode = newFile.xhr.status;
if (statusCode === 400) {
// 400 validation error: show the message returned by the server
const message = JSON.parse(newFile.xhr.responseText)[0];
this.showError(message);
this.$refs.upload.remove(newFile);
} else if (statusCode === 403) {
this.showError(
"Error: Your user session has expired. Please log in again."
);
} else if (statusCode !== 200 && statusCode !== 201) {
// 500 server error: show the status text and a generic message
this.showError(
`Error: ${newFile.xhr.statusText}. Please try the upload again. If this doesn't work, try again later.`
);
console.log("status", statusCode);
}
}
}
this.files.forEach((file) => {
// prevent duplicates (based on filename and length)
if (file.name === newFile.name && file.length === newFile.length) {
this.showError('This file appears to have already been uploaded for this document. Duplicate filename: ' + newFile.name);
this.$refs.upload.active = true;
},
inputFilter(newFile, oldFile, prevent) {
if (newFile && !oldFile) {
// Filter non-image file
if (!/\.(jpeg|jpg|gif|png|pdf)$/i.test(newFile.name)) {
this.showError(
"Unsupported file type. Allowed file types are .jpeg, .jpg, .gif, .png and .pdf."
);
return prevent();
}
});
}
if (newFile) {
// make sure the user isn't uploading more MB of files than allowed
if (this.totalSize > this.maxMegabytes * 1024 * 1024) {
this.showError('The total of all uploaded files for this form cannot exceed ' + this.maxMegabytes + ' MB. Please reduce the size of your files so the total is below this limit.');
// only allow one file over the limit (so we can show the red messaging on the screen)
let previousTotalSize = 0;
this.files.forEach((file) => {
if ((file.name !== newFile.name || file.size !== newFile.size) && !file.error) {
previousTotalSize += file.size;
// prevent duplicates (based on filename and length)
if (file.name === newFile.name && file.length === newFile.length) {
this.showError(
`This file appears to have already been uploaded for this document. Duplicate filename: ${newFile.name}`
);
return prevent();
}
});
// if the user is more than one file over the limit, then block the upload
if (previousTotalSize > this.maxMegabytes * 1024 * 1024) {
this.$refs.upload.remove(newFile);
return prevent();
}
}
// 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.showError('Only one PDF is allowed per form, and PDF documents cannot be combined with images.');
if (newFile) {
// make sure the user isn't uploading more MB of files than allowed
if (this.totalSize > this.maxMegabytes * 1024 * 1024) {
this.showError(
`The total of all uploaded files for this form cannot exceed ${this.maxMegabytes} MB. Please reduce the size of your files so the total is below this limit.`
);
// only allow one file over the limit (so we can show the red messaging on the screen)
let previousTotalSize = 0;
this.files.forEach((file) => {
if (
(file.name !== newFile.name || file.size !== newFile.size) &&
!file.error
) {
previousTotalSize += file.size;
}
});
// if the user is more than one file over the limit, then block the upload
if (previousTotalSize > this.maxMegabytes * 1024 * 1024) {
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.showError('PDF documents cannot be combined with images. Only a single PDF or multiple images can be uploaded into one form. ');
this.$refs.upload.remove(newFile);
return prevent();
// 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.showError(
"Only one PDF is allowed per form, and PDF documents cannot be combined with images."
);
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.showError(
"PDF documents cannot be combined with images. Only a single PDF or multiple images can be uploaded into one form. "
);
this.$refs.upload.remove(newFile);
return prevent();
}
});
}
// Add extra data to to the file object
newFile.objectURL = '';
newFile.width = 0;
newFile.height = 0;
newFile.rotation = 0;
let URL = window.URL || window.webkitURL
if (URL && URL.createObjectURL) {
newFile.objectURL = URL.createObjectURL(newFile.file)
const img = new Image();
const self = this;
img.onload = function() {
newFile.width = this.width || 0;
newFile.height = this.height || 0;
self.isDirty = true;
// Add extra data to to the file object
newFile.objectURL = "";
newFile.width = 0;
newFile.height = 0;
newFile.rotation = 0;
let URL = window.URL || window.webkitURL;
if (URL && URL.createObjectURL) {
newFile.objectURL = URL.createObjectURL(newFile.file);
const img = new Image();
const self = this;
img.onload = function() {
newFile.width = this.width || 0;
newFile.height = this.height || 0;
self.isDirty = true;
};
img.src = newFile.objectURL;
}
img.src = newFile.objectURL;
}
}
},
remove(file) {
const urlbase = `${this.$parent.proxyRootPath}api/documents`;
const encFilename = encodeURIComponent(file.name);
if (!file.error) {
// we add an extra 'x' to the file extension so the siteminder proxy doesn't treat it as an image
const url = `${urlbase}/${this.docType}/${this.party}/${encFilename}x/${file.size}/`;
axios.delete(url)
.then(response => {
const pos = this.files.findIndex(f => f.docType === file.docType && f.size === file.size);
},
remove(file) {
const urlbase = `${this.$parent.proxyRootPath}api/documents`;
const encFilename = encodeURIComponent(file.name);
if (!file.error) {
// we add an extra 'x' to the file extension so the siteminder proxy doesn't treat it as an image
const url = `${urlbase}/${this.docType}/${this.party}/${encFilename}x/${file.size}/`;
axios
.delete(url)
.then((response) => {
const pos = this.files.findIndex(
(f) => f.docType === file.docType && f.size === file.size
);
if (pos > -1) {
this.files.splice(pos, 1);
}
})
.catch((error) => {
this.showError('Error deleting document from the server: ' + file.name);
this.showError(
"Error deleting document from the server: " + file.name
);
this.$refs.upload.remove(file);
});
} else {
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]);
}
this.isDirty = true;
},
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]);
}
this.isDirty = true;
},
rotateLeft(index) {
this.files[index].rotation -= 90;
this.isDirty = true;
},
rotateRight(index) {
this.files[index].rotation += 90;
this.isDirty = true;
},
dragOn() {
this.dragging = true;
},
dragOff() {
this.dragging = false;
},
showError(message) {
this.warningText = message;
this.showWarning = true;
},
saveMetaData() {
let allFiles = [];
this.files.forEach((file) => {
allFiles.push({
filename: file.name,
size: file.size,
width: file.width,
height: file.height,
rotation: rotateFix(file.rotation)
} else {
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]
);
}
this.isDirty = true;
},
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]
);
}
this.isDirty = true;
},
rotateLeft(index) {
this.files[index].rotation -= 90;
this.isDirty = true;
},
rotateRight(index) {
this.files[index].rotation += 90;
this.isDirty = true;
},
dragOn() {
this.dragging = true;
},
dragOff() {
this.dragging = false;
},
showError(message) {
this.warningText = message;
this.showWarning = true;
},
saveMetaData() {
let allFiles = [];
this.files.forEach((file) => {
allFiles.push({
filename: file.name,
size: file.size,
width: file.width,
height: file.height,
rotation: rotateFix(file.rotation),
});
});
});
const data = {
docType: this.docType,
partyCode: this.party,
files: allFiles
};
const graphQLData = graphQLStringify(data,{singleQuotes: false, inlineCharacterLimit: 99999});
const url = `${this.$parent.proxyRootPath}api/graphql/`;
axios.post(url, {
query: `
const data = {
docType: this.docType,
partyCode: this.party,
files: allFiles,
};
const graphQLData = graphQLStringify(data, {
singleQuotes: false,
inlineCharacterLimit: 99999,
});
const url = `${this.$parent.proxyRootPath}api/graphql/`;
axios
.post(url, {
query: `
mutation updateMetadata {
updateMetadata(input:${graphQLData}){
documents{filename size width height rotation contentType}
}
}
`})
.then(response => {
// check for errors in the graphQL response
if (response.data.errors && response.data.errors.length) {
response.data.errors.forEach((error) => {
console.log('error', error.message || error);
// if there was an error it's probably because the upload isn't finished yet
// mark the metadata as dirty so it will save metadata again
this.isDirty = true;
})
}
`,
})
.then((response) => {
// check for errors in the graphQL response
if (response.data.errors && response.data.errors.length) {
response.data.errors.forEach((error) => {
console.log("error", error.message || error);
// if there was an error it's probably because the upload isn't finished yet
// mark the metadata as dirty so it will save metadata again
this.isDirty = true;
});
}
})
.catch((error) => {
this.showError('Error saving metadata');
console.log('error', error);
this.showError("Error saving metadata");
console.log("error", error);
});
}
},
created() {
// get saved state from the server
const url = `${this.$parent.proxyRootPath}api/graphql/`;
axios.post(url, {
query: `
},
},
created() {
// get saved state from the server
const url = `${this.$parent.proxyRootPath}api/graphql/`;
axios
.post(url, {
query: `
query getMetadata {
documents(docType:"${this.docType}",partyCode:${this.party}) {
filename size width height rotation contentType
}
}
`,
variables: null})
.then(response => {
response.data.data.documents.forEach((doc) => {
this.files.push({
name: doc.filename,
size: doc.size,
width: doc.width,
height: doc.height,
rotation: doc.rotation,
type: doc.contentType,
error: false,
success: true,
progress: '100.00',
// we add an extra 'x' to the file extension so the siteminder proxy doesn't treat it as an image
objectURL: `${this.$parent.proxyRootPath}api/documents/${this.docType}/${this.party}/${doc.filename}x/${doc.size}/`
});
variables: null,
})
.then((response) => {
response.data.data.documents.forEach((doc) => {
this.files.push({
name: doc.filename,
size: doc.size,
width: doc.width,
height: doc.height,
rotation: doc.rotation,
type: doc.contentType,
error: false,
success: true,
progress: "100.00",
// we add an extra 'x' to the file extension so the siteminder proxy doesn't treat it as an image
objectURL: `${this.$parent.proxyRootPath}api/documents/${this.docType}/${this.party}/${doc.filename}x/${doc.size}/`,
});
});
})
.catch((error) => {
this.showError('Error getting metadata');
console.log('error', error);
this.showError("Error getting metadata");
console.log("error", error);
});
// call the API to update the metadata every second, but only if
// the data has changed (throttling requests because rotating and
// re-ordering images can cause a lot of traffic and possibly
// result in out-of-order requests)
setInterval(() => {
if (this.isDirty) {
this.saveMetaData();
this.isDirty = false;
}
}, 1000);
// call the API to update the metadata every second, but only if
// the data has changed (throttling requests because rotating and
// re-ordering images can cause a lot of traffic and possibly
// result in out-of-order requests)
setInterval(() => {
if (this.isDirty) {
this.saveMetaData();
this.isDirty = false;
}
}, 1000);
// Prevent browser from loading a drag-and-dropped file if it's
// not dropped in the correct area
window.addEventListener("dragover",function(e){
e = e || event;
e.preventDefault();
},false);
// Prevent browser from loading a drag-and-dropped file if it's
// not dropped in the correct area
window.addEventListener(
"dragover",
function(e) {
e = e || event;
e.preventDefault();
},
false
);
window.addEventListener("drop",function(e){
e = e || event;
e.preventDefault();
},false);
}
}
window.addEventListener(
"drop",
function(e) {
e = e || event;
e.preventDefault();
},
false
);
},
};
</script>
<style scoped lang="scss">
@ -419,13 +489,13 @@ export default {
width: 100%;
display: block;
text-align: left;
border: 2px #365EBE dashed;
border: 2px #365ebe dashed;
border-radius: 6px;
padding: 18px 32px 0 18px;
margin-bottom: 5px;
&.dragging {
background-color: #D7DFF2;
background-color: #d7dff2;
}
.cards {
@ -444,13 +514,13 @@ export default {
.upload-button {
position: absolute;
right: 16px;
top: 17px;
}
top: 17px;
}
.fa-plus-circle {
font-size: 3rem;
margin-bottom: 8px;
color: #365EBE;
color: #365ebe;
}
.placeholder {
@ -468,7 +538,7 @@ export default {
}
h5.uploader-label {
display: block;
display: block;
margin-top: 30px;
margin-bottom: 10px;
font-weight: normal;
@ -492,7 +562,7 @@ export default {
}
/* override vue-upload-component styles for IE11 issues */
.file-uploads-html5 input[type=file] {
.file-uploads-html5 input[type="file"] {
height: 0 !important;
padding: 0 !important;
border: none !important;


+ 128
- 78
vue/src/pages/final-filing/FinalFiling.vue View File

@ -2,35 +2,49 @@
<div id="app">
<div class="question-well-border-less" v-if="signingLocation === 'Virtual'">
<div>
<!-- CSA - Child Support Affidavit -->
<Uploader doc-type="CSA"/>
<!-- CSA - Child Support Affidavit -->
<Uploader doc-type="CSA" />
</div>
<div>
<!-- AFDO - Affidavit - Desk Order Divorce -->
<Uploader doc-type="AFDO"/>
<!-- AFDO - Affidavit - Desk Order Divorce -->
<Uploader doc-type="AFDO" />
</div>
</div>
<div class="question-well-border-less" v-else-if="signingLocationYou === 'Virtual' && signingLocationSpouse === 'Virtual'">
<div
class="question-well-border-less"
v-else-if="
signingLocationYou === 'Virtual' && signingLocationSpouse === 'Virtual'
"
>
<div>
<!-- CSA - Child Support Affidavit -->
<Uploader doc-type="CSA" :party="1"/>
<Uploader doc-type="CSA" :party="1" />
</div>
<div>
<!-- AFDO - Affidavit - Desk Order Divorce -->
<Uploader doc-type="AFDO" :party="1"/>
<Uploader doc-type="AFDO" :party="1" />
</div>
<div>
<!-- CSA - Child Support Affidavit -->
<Uploader doc-type="CSA" :party="2"/>
<Uploader doc-type="CSA" :party="2" />
</div>
<div>
<!-- AFDO - Affidavit - Desk Order Divorce -->
<Uploader doc-type="AFDO" :party="2"/>
<!-- AFDO - Affidavit - Desk Order Divorce -->
<Uploader doc-type="AFDO" :party="2" />
</div>
</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>
<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>
@ -38,47 +52,50 @@
</ul>
<div>
<!-- CSA - Child Support Affidavit -->
<Uploader doc-type="CSA"/>
<Uploader doc-type="CSA" />
</div>
<div>
<!-- AFDO - Affidavit - Desk Order Divorce -->
<Uploader doc-type="AFDO"/>
<Uploader doc-type="AFDO" />
</div>
<div>
<!-- OFI - Final Order -->
<Uploader doc-type="OFI"/>
<Uploader doc-type="OFI" />
</div>
<div>
<!-- EFSS - Electronic Filing Statement - Supreme -->
<Uploader doc-type="EFSS"
:party="1"
post-text=" - For You"/>
<!-- EFSS - Electronic Filing Statement - Supreme -->
<Uploader doc-type="EFSS" :party="1" post-text=" - For You" />
</div>
<div>
<!-- EFSS - Electronic Filing Statement - Supreme -->
<Uploader doc-type="EFSS" :party="2"/>
<Uploader doc-type="EFSS" :party="2" />
</div>
<div>
<!-- AAI - Agreement as to Annual Income -->
<Uploader doc-type="AAI"/>
<Uploader doc-type="AAI" />
</div>
<div>
<!-- NCV Name Change Form Vital Statistics -->
<Uploader doc-type="NCV" :party="1"/>
<Uploader doc-type="NCV" :party="1" />
</div>
<div>
<!-- NCV Name Change Form Vital Statistics -->
<Uploader doc-type="NCV" :party="2"/>
<Uploader doc-type="NCV" :party="2" />
</div>
</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>
<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>
<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>
@ -96,56 +113,89 @@
<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>
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>
<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>
<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>
<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>
<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>
<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>
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>
<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>
<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>
<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>
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>
@ -155,31 +205,31 @@
</template>
<script>
import Uploader from '../../components/Uploader/Uploader.vue';
import Uploader from "../../components/Uploader/Uploader.vue";
export default {
name: 'App',
components: {
Uploader
},
props: {
signingLocation: String,
signingLocationYou: String,
signingLocationSpouse: String,
howToSign: String,
howToFile: String,
signFileOptionsUrl: String,
printFormUrl: String,
proxyRootPath: String
}
}
export default {
name: "App",
components: {
Uploader,
},
props: {
signingLocation: String,
signingLocationYou: String,
signingLocationSpouse: String,
howToSign: String,
howToFile: String,
signFileOptionsUrl: String,
printFormUrl: String,
proxyRootPath: String,
},
};
</script>
<style scoped lang="scss">
.question-well-border-less {
padding: 10px 20px 30px 20px;
background-color: #F2F2F2;
border: 1px solid #DDD;
background-color: #f2f2f2;
border: 1px solid #ddd;
border-radius: 6px;
}
</style>
</style>

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

@ -1,9 +1,9 @@
import Vue from 'vue';
import App from './FinalFiling.vue';
import Vue from "vue";
import App from "./FinalFiling.vue";
Vue.config.productionTip = false;
Vue.component("final-filing-uploader", App);
new Vue({
el: '#vue-app'
new Vue({
el: "#vue-app",
});

+ 135
- 115
vue/src/pages/initial-filing/InitialFiling.vue View File

@ -1,143 +1,163 @@
<template>
<div class="question-well-border-less" id="app">
<template v-if="signingLocation === 'In-person' || signingLocationYou === 'In-person'">
<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>
<p>
The Notice of Joint Family Claim Form (F1) will be automatically
filed for you.
</p>
</div>
<div>
<!-- MC - Marriage Certificate -->
<Uploader doc-type="MC"/>
<Uploader doc-type="MC" />
</div>
<div>
<!-- AFTL - Affidavit of Translator -->
<Uploader doc-type="AFTL"/>
<Uploader doc-type="AFTL" />
</div>
<div>
<!-- RDP - Registration of Divorce Proceeding -->
<Uploader doc-type="RDP"/>
<!-- RDP - Registration of Divorce Proceeding -->
<Uploader doc-type="RDP" />
</div>
</div>
</template>
<template v-else-if="signingLocationYou === 'Virtual' && signingLocationSpouse === 'In-person'">
<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>
<!-- MC - Marriage Certificate -->
<Uploader doc-type="MC"/>
</div>
<div>
<!-- AFTL - Affidavit of Translator -->
<Uploader doc-type="AFTL"/>
</div>
<div>
<!-- OFI - Final Order -->
<Uploader doc-type="OFI"/>
</div>
<div>
<!-- EFSS - Electronic Filing Statement - Supreme -->
<Uploader doc-type="EFSS" :party="1"/>
</div>
<div>
<!-- RDP - Registration of Divorce Proceeding -->
<Uploader doc-type="RDP"/>
</div>
<div>
<!-- AAI - Agreement as to Annual Income -->
<Uploader doc-type="AAI"/>
</div>
<div>
<!-- NCV Name Change Form Vital Statistics -->
<Uploader doc-type="NCV" :party="1"/>
</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>
<!-- MC - Marriage Certificate -->
<Uploader doc-type="MC"/>
</div>
<div>
<!-- AFTL - Affidavit of Translator -->
<Uploader doc-type="AFTL"/>
</div>
<div>
<!-- OFI - Final Order -->
<Uploader doc-type="OFI"/>
</div>
<div>
<!-- EFSS - Electronic Filing Statement - Supreme -->
<Uploader doc-type="EFSS" :party="1"/>
</div>
<div>
<!-- EFSS - Electronic Filing Statement - Supreme -->
<Uploader doc-type="EFSS" :party="2"/>
</div>
<div>
<!-- RDP - Registration of Divorce Proceeding -->
<Uploader doc-type="RDP"/>
</div>
<div>
<!-- AAI - Agreement as to Annual Income -->
<Uploader doc-type="AAI"/>
</div>
<div>
<!-- NCV Name Change Form Vital Statistics -->
<Uploader doc-type="NCV" :party="1"/>
</div>
<div>
<!-- NCV Name Change Form Vital Statistics -->
<Uploader doc-type="NCV" :party="2"/>
</div>
</div>
</template>
<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>
<!-- MC - Marriage Certificate -->
<Uploader doc-type="MC" />
</div>
<div>
<!-- AFTL - Affidavit of Translator -->
<Uploader doc-type="AFTL" />
</div>
<div>
<!-- OFI - Final Order -->
<Uploader doc-type="OFI" />
</div>
<div>
<!-- EFSS - Electronic Filing Statement - Supreme -->
<Uploader doc-type="EFSS" :party="1" />
</div>
<div>
<!-- RDP - Registration of Divorce Proceeding -->
<Uploader doc-type="RDP" />
</div>
<div>
<!-- AAI - Agreement as to Annual Income -->
<Uploader doc-type="AAI" />
</div>
<div>
<!-- NCV Name Change Form Vital Statistics -->
<Uploader doc-type="NCV" :party="1" />
</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>
<!-- MC - Marriage Certificate -->
<Uploader doc-type="MC" />
</div>
<div>
<!-- AFTL - Affidavit of Translator -->
<Uploader doc-type="AFTL" />
</div>
<div>
<!-- OFI - Final Order -->
<Uploader doc-type="OFI" />
</div>
<div>
<!-- EFSS - Electronic Filing Statement - Supreme -->
<Uploader doc-type="EFSS" :party="1" />
</div>
<div>
<!-- EFSS - Electronic Filing Statement - Supreme -->
<Uploader doc-type="EFSS" :party="2" />
</div>
<div>
<!-- RDP - Registration of Divorce Proceeding -->
<Uploader doc-type="RDP" />
</div>
<div>
<!-- AAI - Agreement as to Annual Income -->
<Uploader doc-type="AAI" />
</div>
<div>
<!-- NCV Name Change Form Vital Statistics -->
<Uploader doc-type="NCV" :party="1" />
</div>
<div>
<!-- NCV Name Change Form Vital Statistics -->
<Uploader doc-type="NCV" :party="2" />
</div>
</div>
</template>
</div>
</template>
<script>
import Uploader from '../../components/Uploader/Uploader.vue';
import Uploader from "../../components/Uploader/Uploader.vue";
export default {
name: 'App',
components: {
Uploader
},
props: {
signingLocation: String,
signingLocationYou: String,
signingLocationSpouse: String,
proxyRootPath: String
}
}
export default {
name: "App",
components: {
Uploader,
},
props: {
signingLocation: String,
signingLocationYou: String,
signingLocationSpouse: String,
proxyRootPath: String,
},
};
</script>
<style scoped lang="scss">
.question-well-border-less {
padding: 10px 20px 30px 20px;
background-color: #F2F2F2;
border: 1px solid #DDD;
background-color: #f2f2f2;
border: 1px solid #ddd;
border-radius: 6px;
}
</style>
</style>

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

@ -1,9 +1,9 @@
import Vue from 'vue';
import App from './InitialFiling.vue';
import Vue from "vue";
import App from "./InitialFiling.vue";
Vue.config.productionTip = false;
Vue.component("initial-filing-uploader", App);
new Vue({
el: '#vue-app'
new Vue({
el: "#vue-app",
});

+ 38
- 29
vue/src/utils/forms.js View File

@ -1,47 +1,56 @@
export default {
"AAI": {
AAI: {
name: "Agreement as to Annual Income (F9)",
preText: "Complete, scan and upload the",
help: "This form is used if both you and your spouse agree on the income of the person who will be paying child support. It is used instead of a Financial Statement (F8) if you need to provide the court with proof of income. - Does not require signatures."
help:
"This form is used if both you and your spouse agree on the income of the person who will be paying child support. It is used instead of a Financial Statement (F8) if you need to provide the court with proof of income. - Does not require signatures.",
},
"AFDO": {
AFDO: {
name: "Affidavit - Desk Order Divorce Form (F38)",
preText: "Upload the sworn/affirmed and scanned",
help: "This form sets out all the facts of your marriage and separation for the court and gives information about parenting time if you have children. - Required swearing/affirming and signatures by both you and your spouse in front of a commissioner."
},
"AFTL": {
name:"Affidavit of Translation Form",
preText:"Scan and upload the sworn",
help:"The Affidavit of Translation is an affidavit which is sworn by a translator before a notary, lawyer or commissioner for taking Affidavits. The original certificate of marriage should be exhibited to the Affidavit of Translation together with the translation of the translator."
},
"CSA": {
name:"Child Support Affidavit (F37)",
preText:"Upload the sworn/affirmed and scanned",
help:"This form gives facts about your children and child support, including the order you're asking the court for. You must also attach your separation agreement or court orders about children to this form as exhibits. - Required swearing/affiming and signatures by both you and your spouse in front of a commissioner."
},
"EFSS": {
help:
"This form sets out all the facts of your marriage and separation for the court and gives information about parenting time if you have children. - Required swearing/affirming and signatures by both you and your spouse in front of a commissioner.",
},
AFTL: {
name: "Affidavit of Translation Form",
preText: "Scan and upload the sworn",
help:
"The Affidavit of Translation is an affidavit which is sworn by a translator before a notary, lawyer or commissioner for taking Affidavits. The original certificate of marriage should be exhibited to the Affidavit of Translation together with the translation of the translator.",
},
CSA: {
name: "Child Support Affidavit (F37)",
preText: "Upload the sworn/affirmed and scanned",
help:
"This form gives facts about your children and child support, including the order you're asking the court for. You must also attach your separation agreement or court orders about children to this form as exhibits. - Required swearing/affiming and signatures by both you and your spouse in front of a commissioner.",
},
EFSS: {
name: "Electronic Filing Statement (F96)",
preText: "Upload the signed and scanned",
help: "This form is used to confirm that the document you are filing electronically shows your original signature and is a true copy of the original paper version of the document. - Requires signature by both you and your spouse (but not a signature in front of a commissioner)"
help:
"This form is used to confirm that the document you are filing electronically shows your original signature and is a true copy of the original paper version of the document. - Requires signature by both you and your spouse (but not a signature in front of a commissioner)",
},
"MC": {
name:"Proof of Marriage",
preText:"Upload a scan of your",
help:"To get a divorce, you need an original marriage certificate or certified true copy of your registration of marriage to prove you are married. There are other options described in this tool if you can't get a copy of your marriage certificate or registration of marriage. - Does not require signatures."
MC: {
name: "Proof of Marriage",
preText: "Upload a scan of your",
help:
"To get a divorce, you need an original marriage certificate or certified true copy of your registration of marriage to prove you are married. There are other options described in this tool if you can't get a copy of your marriage certificate or registration of marriage. - Does not require signatures.",
},
"NCV": {
NCV: {
name: "Identification of Applicant (VSA 512)",
preText: "Complete, scan and upload the",
help: "This form is used by the Court to notify Vital Statistics of court-ordered legal changes of name. - Does not require signatures."
help:
"This form is used by the Court to notify Vital Statistics of court-ordered legal changes of name. - Does not require signatures.",
},
"OFI": {
OFI: {
name: "Draft Final Order Form (F52)",
preText: "Upload the signed and scanned",
help: "This will be your divorce order once the judge has signed it. It sets out the court order. - Requires signature by both you and your spouse (but not a signature in front of a commissioner)"
help:
"This will be your divorce order once the judge has signed it. It sets out the court order. - Requires signature by both you and your spouse (but not a signature in front of a commissioner)",
},
"RDP": {
RDP: {
name: "Registration of Joint Divorce Proceedings (JUS280)",
preText: "Complete, scan and upload the",
help: "This form is for a central divorce registry in Ottawa. They use the form to check to make sure there is no other divorce proceeding pending in Canada. They also keep track of all divorces in Canada. - Does not require signatures."
}
};
help:
"This form is for a central divorce registry in Ottawa. They use the form to check to make sure there is no other divorce proceeding pending in Canada. They also keep track of all divorces in Canada. - Does not require signatures.",
},
};

+ 1
- 1
vue/src/utils/rotation.js View File

@ -13,4 +13,4 @@ export default function(rotation) {
default:
return 0;
}
};
}

Loading…
Cancel
Save