Merge pull request #825 from jac-uk/feature/812-qt-solutions

#812 Add and edit question solutions

src/components/Form/Select.vue

@@ -0,0 +1,61 @@
+<template>
+  <div
+    class="govuk-form-group"
+    :class="{'govuk-form-group--error': hasError}"
+  >
+    <label
+      :for="id"
+      class="govuk-heading-m govuk-!-margin-bottom-2"
+    >
+      {{ label }}
+    </label>
+    <span
+      v-if="hint"
+      class="govuk-hint"
+    >
+      {{ hint }}
+    </span>
+    <FormFieldError
+      :id="id"
+      :error-message="errorMessage"
+    />
+    <select
+      :id="id"
+      v-model="localModel"
+      class="govuk-select"
+      :class="{'govuk-input--error': hasError}"
+      :required="required"
+      @change="validate"
+    >
+      <slot />
+    </select>    
+  </div>
+</template>
+
+<script>
+import FormField from '@/components/Form/FormField';
+import FormFieldError from '@/components/Form/FormFieldError';
+
+export default {
+  components: {
+    FormFieldError,
+  },
+  extends: FormField,
+  props: {
+    value: {
+      default: '',
+      type: [String, Number],
+    },
+  },
+  computed: {
+    localModel: {
+      get() {
+        return this.value;
+      },
+      set(val) {
+        this.$emit('input', val);
+      },
+    },
+  },
+};
+</script>

src/components/RepeatableFields.vue

@@ -14,6 +14,7 @@
         :index="index"
         :path="path"
         :type="type"
+        :label="typeName"
       >
         <template v-slot:removeButton>
           <button
@@ -34,7 +35,7 @@
       class="govuk-button govuk-button--secondary govuk-!-margin-bottom-6"
       @click.prevent="addRow"
     >
-      {{ addLabel }}
+      {{ addLabel }} {{ typeName }}
     </button>
   </div>
 </template>
@@ -76,6 +77,11 @@ export default {
       required: false,
       default: '',
     },
+    typeName: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   data() {
     return {

src/components/RepeatableFields/Answer.vue

@@ -3,7 +3,7 @@
     <TextField
       :id="`answer_${id}_${index}`"
       v-model="row.answer"
-      :label="`Answer option ${1 + index}`"
+      :label="`${label} ${1 + index}`"
     />
     <slot name="removeButton" />
   </div>
@@ -30,7 +30,12 @@ export default {
       required: false,
       type: String,
       default: '',
-    },    
+    },
+    label: {
+      required: false,
+      type: String,
+      default: 'Answer option',
+    },
   },
 };
 </script>

src/components/RepeatableFields/QualifyingTests/CriticalAnalysis.vue

@@ -1,10 +1,5 @@
 <template>
   <div>
-    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-      <h3 class="govuk-fieldset__heading">
-        Critical Analysis
-      </h3>
-    </legend>
     <TextField
       id="critical-analysis-question-input"
       v-model="text"

src/components/RepeatableFields/QualifyingTests/QualifyingTestQuestion.vue

@@ -1,5 +1,19 @@
 <template>
   <fieldset class="govuk-fieldset govuk-!-margin-bottom-5">
+    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
+      <h3
+        v-if="isScenario"
+        class="govuk-fieldset__heading"
+      >
+        Scenario {{ index + 1 }}
+      </h3>
+      <h3
+        v-else
+        class="govuk-fieldset__heading"
+      >
+        Question {{ index + 1 }}
+      </h3>
+    </legend>
     <CriticalAnalysis
       v-if="isCriticalAnalysis"
       v-model="row.details"
@@ -13,22 +27,85 @@
       v-model="row.details"
     />
 
-    <h3 class="govuk-heading-m">
+    <h3
+      v-if="isSituationalJudgement || isCriticalAnalysis"
+      class="govuk-heading-m"
+    >
       Options
     </h3>
 
     <RepeatableFields
       v-model="row.options"
       :component="repeatableFields.Answer"
       :ident="`questions-input-${id}`"
-      :allow-empty="true"
+      :type-name="typeName"
       required
     />
+
+    <Select 
+      v-if="isSituationalJudgement"
+      id="mostAppropriate"
+      v-model="row.mostAppropriate"
+      label="Most appropriate answer"
+      required
+    >
+      <option>
+        Select an answer option
+      </option>
+      <option 
+        v-for="(option, optionIndex) in row.options" 
+        :key="optionIndex" 
+        :value="optionIndex"
+      >
+        {{ option.answer }}
+      </option>
+    </Select>
+
+    <Select
+      v-if="isSituationalJudgement"
+      id="leastAppropriate"
+      v-model="row.leastAppropriate"
+      label="Least appropriate answer"
+      required
+    >
+      <option>
+        Select an answer option
+      </option>
+      <option 
+        v-for="(option, optionIndex) in row.options" 
+        :key="optionIndex" 
+        :value="optionIndex"
+      >
+        {{ option.answer }}
+      </option>
+    </Select>
+
+    <Select
+      v-if="isCriticalAnalysis"
+      id="correct"
+      v-model="row.correct"
+      label="Correct answer"
+      required
+    >
+      <option>
+        Select an answer option
+      </option>
+      <option 
+        v-for="(option, optionIndex) in row.options" 
+        :key="optionIndex" 
+        :value="optionIndex"
+      >
+        {{ option.answer }}
+      </option>
+    </Select>
+
     <slot name="removeButton" />
+    <hr class="govuk-section-break govuk-section-break--visible">
   </fieldset>
 </template>
 
 <script>
+import Select from '@/components/Form/Select';
 import RepeatableFields from '@/components/RepeatableFields';
 import Answer from '@/components/RepeatableFields/Answer';
 import CriticalAnalysis from '@/components/RepeatableFields/QualifyingTests/CriticalAnalysis';
@@ -39,6 +116,7 @@ import { QUALIFYING_TEST } from '@/helpers/constants';
 export default {
   name: 'QualifyingTestQuestion',
   components: {
+    Select,
     CriticalAnalysis,
     Scenario,
     RepeatableFields,
@@ -88,6 +166,9 @@ export default {
     isSituationalJudgement() {
       return this.type === QUALIFYING_TEST.TYPE.SITUATIONAL_JUDGEMENT ? true : false;
     },
+    typeName() {
+      return this.isScenario ? 'question' : 'answer option';
+    },
   },
 };
 </script>

src/components/RepeatableFields/QualifyingTests/Scenario.vue

@@ -1,11 +1,5 @@
 <template>
   <div>
-    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-      <h3 class="govuk-fieldset__heading">
-        Scenarios
-      </h3>
-    </legend>
-
     <RichTextInput
       id="scenario-question-input"
       v-model="text"

src/components/RepeatableFields/QualifyingTests/SituationalJudgement.vue

@@ -1,10 +1,5 @@
 <template>
   <div>
-    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
-      <h3 class="govuk-fieldset__heading">
-        Situational Judgement
-      </h3>
-    </legend>
     <TextField
       id="situational-judgement-question-input"
       v-model="text"

src/views/Exercises/Tasks/QualifyingTests/Cover.vue

@@ -16,7 +16,8 @@
       <template #row="{row}">
         <TableCell>
           <RouterLink
-            :to="{ name: 'qualifying-test-view', params: { qualifyingTestId: row.id } }"
+            class="govuk-link"
+            :to="{ name: getViewName(row), params: { qualifyingTestId: row.id } }"
           >
             {{ row.title | showAlternative(row.id) }}
           </RouterLink>
@@ -37,7 +38,8 @@
 
 <script>
 import Table from '@/components/Page/Table/Table'; 
-import TableCell from '@/components/Page/Table/TableCell'; 
+import TableCell from '@/components/Page/Table/TableCell';
+import { QUALIFYING_TEST } from '@/helpers/constants';
 
 export default {
   components: {
@@ -63,6 +65,18 @@ export default {
     btnCreate() {
       this.$router.push({ name: 'qualifying-test-new' });
     },
+    getViewName(qualifyingTest) {
+      if (
+        qualifyingTest.status === QUALIFYING_TEST.STATUS.CREATED
+        || qualifyingTest.status === QUALIFYING_TEST.STATUS.SUBMITTED
+        || qualifyingTest.status === QUALIFYING_TEST.STATUS.APPROVED
+      ) {
+        return 'qualifying-test-review';
+      } else {
+        return 'qualifying-test-view';
+      }
+      // 
+    },
   },
 };
 </script>