From cf99101affeebfbdf77d87a12f4f8b5507021b0c Mon Sep 17 00:00:00 2001
From: Michael Olund <michaelo@openroad.ca>
Date: Tue, 8 Sep 2020 10:50:45 -0700
Subject: [PATCH] Updated layout for uploader and added doc-type metadata

---
 vue/src/components/Uploader.vue               |   4 +
 vue/src/pages/final-filing/FinalFiling.vue    | 126 ++++++++++--------
 .../pages/initial-filing/InitialFiling.vue    | 114 ++++++++--------
 3 files changed, 131 insertions(+), 113 deletions(-)

diff --git a/vue/src/components/Uploader.vue b/vue/src/components/Uploader.vue
index b378b2af..3653ad5f 100644
--- a/vue/src/components/Uploader.vue
+++ b/vue/src/components/Uploader.vue
@@ -38,6 +38,10 @@ import VueUploadComponent from 'vue-upload-component'
 import ItemTile from './ItemTile'
 
 export default {
+  props: {
+    type: String,
+    party: { type: Number, default: 0 }
+  },
   data: function () {
     return {
       files: [],
diff --git a/vue/src/pages/final-filing/FinalFiling.vue b/vue/src/pages/final-filing/FinalFiling.vue
index 03ec91b2..40ff9340 100644
--- a/vue/src/pages/final-filing/FinalFiling.vue
+++ b/vue/src/pages/final-filing/FinalFiling.vue
@@ -1,32 +1,38 @@
 <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>
+            <p>Upload the signed / sworn and scanned Child Support Affidavit (F37)</p>
+            <!-- CSA - Child Support Affidavit -->
+            <Uploader doc-type="CSA"/>
+        </div>
+        <div>
+            <p>Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38)</p>
+            <!-- AFDO - Affidavit - Desk Order Divorce -->
+            <Uploader doc-type="AFDO"/>
+        </div>
     </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>
+            <p>Upload the signed / sworn and scanned Child Support Affidavit (F37) - For You</p>
+            <!-- CSA - Child Support Affidavit -->
+            <Uploader doc-type="CSA" :party="1"/>
+        </div>
+        <div>
+            <p>Upload the signed / sworn and scanned Child Support Affidavit (F37) - For Your Spouse</p>
+            <!-- CSA - Child Support Affidavit -->
+            <Uploader doc-type="CSA" :party="2"/>
+        </div>
+        <div>
+            <p>Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38) - For You</p>
+            <!-- AFDO - Affidavit - Desk Order Divorce -->
+            <Uploader doc-type="AFDO" :party="1"/>
+        </div>
+        <div>
+            <p>Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38) - For Your Spouse</p>
+            <!-- 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)">
@@ -36,38 +42,46 @@
                 <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>
+                <p>Upload the signed / sworn and scanned Child Support Affidavit (F37)</p>
+                <!-- CSA - Child Support Affidavit -->
+                <Uploader doc-type="CSA"/>
+            </div>
+            <div>
+                <p>Upload the signed / sworn and scanned Affidavit - Desk Order Divorce Form (F38)</p>
+                <!-- AFDO - Affidavit - Desk Order Divorce -->
+                <Uploader doc-type="AFDO"/>
+            </div>
+            <div>
+                <p>Upload the signed and scanned Draft Final Order Form (F52)</p>
+                <!-- OFI - Final Order -->
+                <Uploader doc-type="OFI"/>
+            </div>
+            <div>
+                <p>Upload the signed and scanned Electronic Filing Statement (F96) for You</p>
+                <!-- EFSS - Electronic Filing Statement - Supreme -->
+                <Uploader doc-type="EFSS" :party="1"/>
+            </div>
+            <div>
+                <p>Upload the signed and scanned Electronic Filing Statement (F96) for Your Spouse</p>
+                <!-- EFSS - Electronic Filing Statement - Supreme -->
+                <Uploader doc-type="EFSS" :party="2"/>
+            </div>
+            <div>
+                <p>Complete, scan and upload the Agreement as to Annual Income (F9) form</p>
+                <!-- AAI - Agreement as to Annual Income -->
+                <Uploader doc-type="AAI"/>
+            </div>
+            <div>
+                <p>Complete, scan and upload the Identification of Apppcant (VSA 512) for You</p>
+                <!-- ??? - Identification of Applicant -->
+                <Uploader doc-type="???" :party="1"/>
+            </div>
+            <div>
+                <p>Complete, scan and upload the Identification of Apppcant (VSA 512) for Your Spouse</p>
+                <!-- ??? - Identification of Applicant -->
+                <Uploader doc-type="???" :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>
diff --git a/vue/src/pages/initial-filing/InitialFiling.vue b/vue/src/pages/initial-filing/InitialFiling.vue
index af424db2..361a76ef 100644
--- a/vue/src/pages/initial-filing/InitialFiling.vue
+++ b/vue/src/pages/initial-filing/InitialFiling.vue
@@ -6,19 +6,19 @@
           <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>
+          <p>Upload a scan of your Proof of Marriage <i class="fa fa-question-circle"></i></p>
+          <!-- MC - Marriage Certificate -->
+          <Uploader doc-type="MC"/>
         </div>
         <div>
-          <p>Scan and upload the sworn Affidavit of Interpreter Form <i class="fa fa-question-circle"></i>
-            <Uploader/>
-          </p>
+          <p>Scan and upload the sworn Affidavit of Interpreter Form <i class="fa fa-question-circle"></i></p>
+          <!-- AFTL - Affidavit of Translator -->
+          <Uploader doc-type="AFTL"/>
         </div>
         <div>
-          <p>Complete, scan and upload the Registration of Divorce Proceedings <i class="fa fa-question-circle"></i> form
-            <Uploader/>
-          </p>
+          <p>Complete, scan and upload the Registration of Divorce Proceedings <i class="fa fa-question-circle"></i> form</p>
+          <!-- RDP - Registration of Divorce Proceeding -->
+          <Uploader doc-type="RDP"/>
         </div>
       </div>
     </template>
@@ -37,39 +37,39 @@
           </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>
+              <p>Upload a scan of your Proof of Marriage <i class="fa fa-question-circle"></i></p>
+              <!-- MC - Marriage Certificate -->
+              <Uploader doc-type="MC"/>
             </div>
             <div>
-              <p>Scan and upload the sworn Affidavit of Interpreter Form <i class="fa fa-question-circle"></i>
-                <Uploader/>
-              </p>
+              <p>Scan and upload the sworn Affidavit of Interpreter Form <i class="fa fa-question-circle"></i></p>
+              <!-- AFTL - Affidavit of Translator -->
+              <Uploader doc-type="AFTL"/>
             </div>
             <div>
-              <p>Upload the signed and scanned Draft Final Order Form (F52)
-                <Uploader/>
-              </p>
+              <p>Upload the signed and scanned Draft Final Order Form (F52)</p>
+              <!-- OFI - Final Order -->
+              <Uploader doc-type="OFI"/>
             </div>
             <div>
-              <p>Upload the signed and scanned Electronic Filing Statement (F96) for You
-                <Uploader/>
-              </p>
+              <p>Upload the signed and scanned Electronic Filing Statement (F96) for You</p>
+              <!-- EFSS - Electronic Filing Statement - Supreme -->
+              <Uploader doc-type="EFSS" :party="1"/>
             </div>
             <div>
-              <p>Complete, scan and upload the Registration of Divorce Proceedings form
-                <Uploader/>
-              </p>
+              <p>Complete, scan and upload the Registration of Divorce Proceedings form</p>
+              <!-- RDP - Registration of Divorce Proceeding -->
+              <Uploader doc-type="RDP"/>
             </div>
             <div>
-              <p>Complete, scan and upload the Agreement as to Annual Income (F9) form
-                <Uploader/>
-              </p>
+              <p>Complete, scan and upload the Agreement as to Annual Income (F9) form</p>
+              <!-- AAI - Agreement as to Annual Income -->
+              <Uploader doc-type="AAI"/>
             </div>
             <div>
-              <p>Complete, scan and upload the Identification of Applicant (VSA 512) for You
-                <Uploader/>
-              </p>
+              <p>Complete, scan and upload the Identification of Applicant (VSA 512) for You</p>
+              <!-- ??? - Identification of Applicant -->
+              <Uploader doc-type="???" :party="1"/>
             </div>
           </div>
         </div>
@@ -89,49 +89,49 @@
           </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>
+              <p>Upload a scan of your Proof of Marriage <i class="fa fa-question-circle"></i></p>
+              <!-- MC - Marriage Certificate -->
+              <Uploader doc-type="MC"/>
             </div>
             <div>
-              <p>Scan and upload the sworn Affidavit of Interpreter Form <i class="fa fa-question-circle"></i>
-                <Uploader/>
-              </p>
+              <p>Scan and upload the sworn Affidavit of Interpreter Form <i class="fa fa-question-circle"></i></p>
+              <!-- AFTL - Affidavit of Translator -->
+              <Uploader doc-type="AFTL"/>
             </div>
             <div>
-              <p>Upload the signed and scanned Draft Final Order Form (F52)
-                <Uploader/>
-              </p>
+              <p>Upload the signed and scanned Draft Final Order Form (F52)</p>
+              <!-- OFI - Final Order -->
+              <Uploader doc-type="OFI"/>
             </div>
             <div>
-              <p>Upload the signed and scanned Electronic Filing Statement (F96) for You
-                <Uploader/>
-              </p>
+              <p>Upload the signed and scanned Electronic Filing Statement (F96) for You</p>
+              <!-- EFSS - Electronic Filing Statement - Supreme -->
+              <Uploader doc-type="EFSS" :party="1"/>
             </div>
             <div>
-              <p>Upload the signed and scanned Electronic Filing Statement (F96) for Your Spouse
-                <Uploader/>
-              </p>
+              <p>Upload the signed and scanned Electronic Filing Statement (F96) for Your Spouse</p>
+              <!-- EFSS - Electronic Filing Statement - Supreme -->
+              <Uploader doc-type="EFSS" :party="2"/>
             </div>
             <div>
-              <p>Complete, scan and upload the Registration of Divorce Proceedings form
-                <Uploader/>
-              </p>
+              <p>Complete, scan and upload the Registration of Divorce Proceedings form</p>
+              <!-- RDP - Registration of Divorce Proceeding -->
+              <Uploader doc-type="RDP"/>
             </div>
             <div>
-              <p>Complete, scan and upload the Agreement as to Annual Income (F9) form
-                <Uploader/>
-              </p>
+              <p>Complete, scan and upload the Agreement as to Annual Income (F9) form</p>
+              <!-- AAI - Agreement as to Annual Income -->
+              <Uploader doc-type="AAI"/>
             </div>
             <div>
-              <p>Complete, scan and upload the Identification of Applicant (VSA 512) for You
-                <Uploader/>
-              </p>
+              <p>Complete, scan and upload the Identification of Applicant (VSA 512) for You</p>
+              <!-- ??? - Identification of Applicant -->
+              <Uploader doc-type="???" :party="1"/>
             </div>
             <div>
-              <p>Complete, scan and upload the Identification of Applicant (VSA 512) for Your Spouse
-                <Uploader/>
-              </p>
+              <p>Complete, scan and upload the Identification of Applicant (VSA 512) for Your Spouse</p>
+              <!-- ??? - Identification of Applicant -->
+              <Uploader doc-type="???" :party="2"/>
             </div>
           </div>
         </div>