updated resume wizard forms

src/components/forms/resume-wizard/FormExperience.vue

 <template>
   <div class="q-pa-md">
-
     <p>Please provide some information about your studies and work experience</p>
     <div class="row">
       <div class="col-12 col-md">
@@ -10,7 +9,7 @@
         >
           <div class="row q-pt-md">
             <div class="col-12 col-md-2">
-              <p class=" text-caption">Education</p>
+              <p class="text-caption">Education</p>
             </div>
             <div class="col-12 col-md">
               <div class="row q-gutter-md">
@@ -24,42 +23,96 @@
 
           <div class="row q-pt-md">
             <div class="col-12 col-md-2">
-              <p class=" text-caption">Work experience</p>
+              <p class="text-caption">Work experience</p>
             </div>
             <div class="col-12 col-md">
-              <div class="row q-gutter-md">
-                <q-markup-table style="width:500px; max-width: 80vw;">
+              <div class="row">
+                <q-markup-table
+                  style="width:700px; max-width: 80vw;"
+                  flat
+                >
                   <tr>
                     <td style="width: 20%;">Year</td>
-                    <td style="width: 40%">Role</td>
+                    <td style="width: 30%">Role</td>
                     <td style="width: 40%">Company</td>
+                    <td style="width: 10%"></td>
+                  </tr>
+                  <tr
+                    v-for="row,idx in rows"
+                    :key="idx"
+                  >
+                    <td>{{row.year}}</td>
+                    <td>{{row.role}}</td>
+                    <td>{{row.company}}</td>
+                    <td>
+                      <q-btn
+                        flat
+                        round
+                        icon="trash"
+                      />
+                    </td>
                   </tr>
                   <tr>
                     <td>
                       <q-select
+                        dense
+                        outlined
                         :options="years"
-                        value="year"
+                        v-model="year"
                       ></q-select>
                     </td>
+                    <td>
+                      <q-input
+                        dense
+                        outlined
+                        label="Role"
+                        v-model="role"
+                      />
+                    </td>
+                    <td>
+                      <q-input
+                        dense
+                        outlined
+                        label="Company or Organization"
+                        v-model="company"
+                      />
+                    </td>
+                    <td>
+                      <q-btn
+                        dense
+                        flat
+                      >Add row</q-btn>
+                    </td>
                   </tr>
                 </q-markup-table>
               </div>
             </div>
           </div>
-
+          <div class="row q-pt-md">
+            <div class="col-12 col-md-2">
+              <p class="text-caption">Languages</p>
+            </div>
+            <div class="col-12 col-md">
+              <q-checkbox
+                v-model="selected_languages"
+                :val="language"
+                :label="language"
+                v-for="language,idx in languages"
+                :key="idx"
+              />
+              <div v-if="selected_languages 
+                       && selected_languages.indexOf('Other') != -1">
+                <q-input
+                  label="Other languages"
+                  v-model="other_languages"
+                />
+              </div>
+            </div>
+          </div>
         </q-form>
       </div>
     </div>
 
-    <pre>
-    Education
-
-    Work experience
-
-    Role Year Company Occupation
-
-    Languages
-</pre>
   </div>
 </template>
 <script>
@@ -67,20 +120,30 @@ export default {
   // name: 'ComponentName',
   data () {
     return {
-      year: '2019',
+      year: "2019",
       education: "",
-      work_experience: ""
+      work_experience: "",
+      languages: [
+        "English",
+        "French",
+        "Spanish",
+        "Chinese",
+        "Russian",
+        "Arabic",
+        "Other"
+      ],
+      selected_languages: [],
+      rows: []
     };
   },
   computed: {
     years () {
-      const _y = []
-      for (var i = 1959; i < 2059; i++)
-        _y.push(`${i}`)
-      return y;
+      const _y = [];
+      for (var i = 1959; i < 2059; i++) _y.push(`${i}`);
+      return _y;
     }
   }
-}
+};
 </script>
 
 <style>

src/components/forms/resume-wizard/FormPortfolio.vue

 <template>
   <div class="q-pa-md">
-    <pre>
-    Portfolio
-
-    Upload your portfolio or resume
-    Max 2Mb
-</pre>
+    <p>Upload your resume or portfolio. Selected recruiters and companies you applied to will be able to download it</p>
+    <div class="row">
+      <div class="col-12 col-md">
+        <q-form
+          class="q-py-md col q-gutter-md"
+          style="max-width: 80vw; width: 700px"
+        >
+          <div class="row q-pb-md q-gutter-sm">
+            <div class="col-12 col-md-auto">
+              <q-uploader
+                label="Resume or portfolio"
+                multiple
+                accept=".pdf, .doc, .docx"
+                style="max-width: 300px"
+                auto-upload
+                :filter="checkFiles"
+              />
+              <div class="text-caption text-grey">Drag &amp; drop a file or click the "plus" icon to select one from your computer</div>
+              <div class="text-caption text-grey">Allowed file types: .pdf, .doc, .docx<br>Max upload size 10Mb</div>
+            </div>
+          </div>
+        </q-form>
+      </div>
+    </div>
   </div>
 </template>
 <script>
@@ -13,6 +31,25 @@ export default {
   // name: 'ComponentName',
   data () {
     return {};
+  },
+  methods: {
+    checkFiles (files) {
+      const filtered = files.filter(file => (
+        file.type === 'application/pdf' || 
+        file.type === 'application/msword' || 
+        file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+      ) && 
+      file.size < 1024 * 1024 * 10
+      ) // pdf, .doc, .docx + 10Mb filter
+      if (filtered.length == 0) {
+        this.$q.notify({
+          lines: 2,
+          message: "Invalid file selected. Please check the file name ends with .pdf or .doc, and the size is below 10Mb"
+          , color: "red"
+        })
+      }
+      return filtered
+    }
   }
 };
 </script>

src/pages/resume-wizard/Start.vue

@@ -45,7 +45,7 @@
           :name="4"
           icon="person"
           title="Profile"
-          :done="step > 3"
+          :done="step > 4"
         >
           <FormExperience />
         </q-step>
@@ -53,7 +53,7 @@
           icon="attachment"
           :name="5"
           title="Attachments"
-          :done="step > 4"
+          :done="step > 5"
         >
           <FormPortfolio />
         </q-step>
@@ -61,7 +61,7 @@
           :name="6"
           icon="lock"
           title="Account"
-          :done="step > 5"
+          :done="step > 6"
         >
           <FormSignUp />
         </q-step>