Add select on number key press to OptionNumberScale

Author: EkaterinaVu

src/assets/css/common.css

@@ -789,6 +789,14 @@ header.vff-header svg.f-logo {
   flex: 0 0 calc(10% - 8px);
 }
 
+.vff .field-opinionnumberscale ul.f-radios.f-numbers li .f-label-wrap {
+  justify-content: center;
+}
+
+.vff .field-opinionnumberscale ul.f-radios.f-numbers li .f-label {
+  margin: 0;
+}
+
 /* 
   field matrix
 */

src/components/QuestionTypes/OpinionNumberScaleType.vue

@@ -6,7 +6,7 @@
   */
 
   import OpinionScaleType from './OpinionScaleType.vue'
-  import { QuestionType } from '../../models/QuestionModel'
+  import { ChoiceOption, QuestionType } from '../../models/QuestionModel'
 
   export default {
     extends: OpinionScaleType,
@@ -16,6 +16,46 @@
       return {
         isNumberScale: true
       }
-    }
+    },
+
+    beforeMount() {
+      if (this.question.max && !this.question.options.length) {
+        const 
+          min = this.question.min || 1,
+          max = this.question.max 
+
+        for (let i = min; i <= max; i++) {
+          this.question.options.push(new ChoiceOption({value: i.toString()}))
+        }
+      }
+    },
+
+    methods: {
+
+      /**
+       * Listens for keyboard events (1, 2, 3, ...)
+       */
+      onKeyListener($event) {
+        if (this.active && $event.key && $event.key.length === 1) {
+          let keyCode = $event.key.toUpperCase().charCodeAt(0)
+          console.log(keyCode)
+          if (keyCode >= 48 && keyCode <= 57) {
+            let index = keyCode - 49
+
+            if (index > -1) {
+              let option = this.question.options[index]
+
+              if (option) {
+                this.toggleAnswer(option)
+              } 
+            }
+          }
+        }
+      },
+
+      getToggleKey(num) {
+        return num
+      },
+    },
   }
 </script>

src/components/QuestionTypes/OpinionScaleType.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="f-radios-wrap">
-    <ul class="f-radios" v-bind:class="{'f-numbers': question.max}" role="listbox">
+    <ul class="f-radios" v-bind:class="{'f-numbers': isNumberScale}" role="listbox">
       <li
         v-for="(option, index) in question.options"
         v-on:click.prevent="toggleAnswer(option)"
@@ -10,7 +10,7 @@
         role="option"
       >
         <div class="f-label-wrap">
-          <span class="f-key">{{ getToggleKey(index) }}</span>
+          <span v-if="!isNumberScale" class="f-key">{{ getToggleKey(index) }}</span>
           <span v-if="option.choiceLabel()" class="f-label">{{ option.choiceLabel() }}</span>
         </div>
       </li> 
@@ -38,17 +38,6 @@
       }
     },
 
-    beforeMount() {
-      if (this.question.max && !this.question.options.length) {
-        const 
-          min = this.question.min || 1,
-          max = this.question.max 
-        for (let i = min; i <= max; i++) {
-          this.question.options.push(new ChoiceOption({value: i.toString()}))
-        }
-      }
-    },
-
     mounted() {
       this.addKeyListener()
     },
@@ -103,6 +92,7 @@
       },
 
       getToggleKey(index) {
+        console.log(index)
         const key = 65 + index
 
         if (key <= 90) {
@@ -126,7 +116,6 @@
 
       _toggleAnswer(option) {
         const optionValue = option.choiceValue() 
-           console.log(option, optionValue)
 
         option.toggle()