FEATURE [vue][form] incorporating the timeSpent field in the vue form

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/components/FormEvaluation.vue

@@ -49,6 +49,19 @@
          </div>
       </div>
 
+     <div class="row mb-3">
+       <label class="col-4 col-sm-2 col-md-4 col-lg-2 col-form-label">
+         {{ $t('evaluation_time_spent') }}
+       </label>
+       <div class="col-8 col-sm-4 col-md-8 col-lg-4">
+         <select class="form-control form-control-sm" type="time" v-model="timeSpent">
+           <option v-for="time in timeSpent" :value="new Date(time.value)">
+             {{ time.text }}
+           </option>
+         </select>
+       </div>
+     </div>
+
       <div class="row mb-3">
          <label class="col-sm-4 col-form-label visually-hidden">{{ $t('evaluation_public_comment') }}</label>
          <div class="col-sm-12">
@@ -190,6 +203,7 @@ const i18n = {
          evaluation_choose_a_template: "Choisir un modèle",
          evaluation_add_a_document: "Ajouter un document",
          evaluation_add: "Ajouter une évaluation",
+         evaluation_time_spent: "Temps de rédaction",
          Documents: "Documents",
          document_add: "Générer ou téléverser un document",
          document_upload: "Téléverser un document",
@@ -223,6 +237,22 @@ export default {
             maxPostSize: 15000000,
             required: false,
          },
+         timeSpentChoices: [
+           { text: '1 minute', value: 60 }, { text: '2 minutes', value: 120 },
+           { text: '3 minutes', value: 180 }, { text: '4 minutes', value: 240 },
+           { text: '5 minutes', value: 300 }, { text: '10 minutes', value: 600 },
+           { text: '15 minutes', value: 900 },{ text: '20 minutes', value: 1200 },
+           { text: '25 minutes', value: 1500 }, { text: '30 minutes', value: 1800 },
+           { text: '45 minutes', value: 2700 },{ text: '1 hour', value: 3600 },
+           { text: '1 hour 15 minutes', value: 4500 }, { text: '1 hour 30 minutes', value: 5400 },
+           { text: '1 hour 45 minutes', value: 6300 }, { text: '2 hours', value: 7200 },
+           { text: '2 hours 30 minutes', value: 9000 }, { text: '3 hours', value: 10800 },
+           { text: '3 hours 30 minutes', value: 12600 },{ text: '4 hours', value: 14400 },
+           { text: '4 hours 30 minutes', value: 16200 },{ text: '5 hours', value: 18000 },
+           { text: '5 hours 30 minutes', value: 19800 },{ text: '6 hours', value: 21600 },
+           { text: '6 hours 30 minutes', value: 23400 },{ text: '7 hours', value: 25200 },
+           { text: '7 hours 30 minutes', value: 27000 },{ text: '8 hours', value: 28800 },
+         ]
       }
    },
    computed: {
@@ -264,6 +294,10 @@ export default {
          get() { return this.evaluation.warningInterval; },
          set(v) { this.$store.commit('setEvaluationWarningInterval', { key: this.evaluation.key, days: v }); }
       },
+     timeSpent: {
+        get() { return this.timeSpentChoices },
+        set(v) { this.$store.commit('setEvaluationTimeSpent', { key: this.evaluation.key, time: v}) }
+     },
       comment: {
          get() { return this.evaluation.comment; },
          set(v) { this.$store.commit('setEvaluationComment', { key: this.evaluation.key, comment: v }); }

src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourseWorkEdit/store.js

@@ -286,6 +286,10 @@ const store = createStore({
       state.evaluationsPicked.find(e => e.key === key)
           .warningInterval = days;
     },
+    setEvaluationTimeSpent(state, {key, time}) {
+      state.evaluationsPicked.find(e => e.key === key)
+          .timeSpent = time;
+    },
     setEvaluationComment(state, {key, comment}) {
       state.evaluationsPicked.find(e => e.key === key)
           .comment = comment;