#1313 Location preferences

src/components/SelectionInput/RankedChoice.vue

@@ -1,46 +1,48 @@
 <template>
-  <div class="govuk-checkboxes">
-    <div
-      v-for="(answer, index) in answers"
-      :key="index"
-      class="govuk-checkboxes__item"
-    >
-      <input
-        :id="`${id}-answer-${index}`"
-        v-model="selected"
-        :name="`${id}-answer-${index}`"
-        :value="answer.answer"
-        type="checkbox"
-        class="govuk-checkboxes__input"
-        @change="update"
+  <!-- <table class="govuk-table"> -->
+  <table>
+    <tbody class="govuk-table__body">
+      <tr 
+        v-for="(answer, i) in answers"
+        :key="i"
+        class="govuk-table__row"
       >
-      <label
-        :for="`${id}-answer-${index}`"
-        class="govuk-label govuk-checkboxes__label"
-      >
-        {{ answer.answer }}
-      </label>
-      <select 
-        v-if="selected.indexOf(answer.answer) >= 0"
-        v-model="ranking[answer.answer]"
-        class="govuk-select"
-        @change="update"
-      >
-        <option
-          v-for="score in answers.length"
-          :key="score"
-          :value="score"
+        <th
+          class="govuk-table__cell govuk-!-padding-top-0"
         >
-          {{ score }}
-        </option>
-      </select>      
-    </div>
-  </div>
+          <div class="govuk-checkboxes__item">
+            <input
+              v-model="selected"
+              :name="`${id}-answer-${i}`"
+              :value="answer.answer"
+              type="checkbox"
+              class="govuk-checkboxes__input"
+              @change="update"
+            >
+            <label
+              class="govuk-label govuk-checkboxes__label"
+              :for="`${id}-answer-${i}`"
+            >
+              {{ answer.answer }}  
+            </label>
+          </div>
+        </th>
+        <td class="govuk-table__cell">
+          <label
+            class="govuk-heading-s govuk-!-margin-bottom-0"
+          >
+            {{ selected.some(item => item === answer.answer) ? selected.findIndex(item => item === answer.answer) + 1 : '' }} 
+          </label>
+        </td>
+      </tr>
+    </tbody>
+  </table>   
 </template>
 
 <script>
 
 export default {
+  name: 'RankedChoice',
   props: {
     id: {
       type: String,
@@ -73,25 +75,6 @@ export default {
   },
   methods: {
     update() {
-      const rankedSelection = [];
-      const cleanedRanking = {};
-      for (let i = 0, len = this.selected.length; i < len; ++i) {
-        if (!this.ranking[this.selected[i]]) { this.ranking[this.selected[i]] = this.selected.length; }
-        rankedSelection.push({ answer: this.selected[i], rank: this.ranking[this.selected[i]] });
-        cleanedRanking[this.selected[i]] = this.ranking[this.selected[i]];
-      }
-      this.ranking = cleanedRanking;
-      this.selected = rankedSelection.sort(( item1, item2 ) => {
-        if (item1.rank < item2.rank) {
-          return -1;
-        } else if (item1.rank > item2.rank) {
-          return 1;
-        } else {
-          return 0;
-        }
-      }).map((item) => {
-        return item.answer;
-      });
       this.$emit('input', this.selected);
     },
   },  

src/components/SelectionInput/SelectionInput.vue

@@ -11,7 +11,7 @@
         :id="`${id}-hint`"
         class="govuk-hint"
       >
-        {{ hint }}
+        {{ typeHint }}
       </span>
 
       <SingleChoice
@@ -42,13 +42,16 @@
 import SingleChoice from '@/components/SelectionInput/SingleChoice';
 import MultipleChoice from '@/components/SelectionInput/MultipleChoice';
 import RankedChoice from '@/components/SelectionInput/RankedChoice';
+import FormField from '@/components/Form/FormField';
 
 export default {
+  name: 'SelectionInput',
   components: {
     SingleChoice,
     MultipleChoice,
     RankedChoice,
   },  
+  extends: FormField,
   props: {
     id: {
       type: String,
@@ -81,17 +84,11 @@ export default {
         this.$emit('input', val);
       },
     },
-    hint() {
-      switch (this.type) {
-      case 'single-choice':
-        return 'Select one answer';
-      case 'multiple-choice':
-        return 'Select all that apply';
-      case 'ranked-choice':
-        return 'Select and rank all that apply. With 1 being your top choice';
-      default:
-        return '';
-      }
+    typeHint(){
+      return this.type === 'single-choice' ? 'Select one answer' : 
+        this.type === 'multiple-choice' ? 'Select all that apply' :
+        this.type === 'ranked-choice' ? 'Select in your order of preference' :
+        '';
     },
     isSingleChoice() {
       return this.type === 'single-choice';

src/views/Apply/FinalCheck/Review.vue

@@ -558,11 +558,14 @@
                 class="govuk-summary-list__value"
               >
                 <p
-                  v-for="item in application.locationPreferences"
+                  v-for="(item, index) in application.locationPreferences"
                   :key="item.name"
                   class="govuk-body"
                 >
-                  {{ item }}
+                  <strong>
+                    {{ `${index + 1}:` }}
+                  </strong>
+                  {{ `${item}` }}
                 </p>
               </dd>
             </dl>

src/views/Apply/WorkingPreferences/LocationPreferences.vue

@@ -19,9 +19,11 @@
         <SelectionInput
           id="location-preferences"
           v-model="application.locationPreferences"
+          :label="`'${vacancy.locationQuestion}'`"
           :title="vacancy.locationQuestion"
           :answers="vacancy.locationQuestionAnswers"
           :type="vacancy.locationQuestionType"
+          required
         /> 
 
         <button