Adding new options functionality

chrux · Jul 23, 2019 · 2cda45b · 2cda45b
1 parent 78c8df0
commit 2cda45b
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 7 deletions.
diff --git a/resources/js/components/FormOptionItemComponent.vue b/resources/js/components/FormOptionItemComponent.vue
@@ -1,10 +1,18 @@
 <template>
   <div class="form-group row mt-3">
     <div class="col">
-      <input type="text" class="form-control" name="question[options][][title]" :placeholder="$t('Option ') + `${number}`">
+      <input 
+        type="text"
+        class="form-control"
+        name="question[options][][title]"
+        v-model="option.title"
+        ref="title"
+        :placeholder="$t('Option ') + `${number}`"
+        @keyup="handleKey"
+        >
     </div>
     <div class="col-auto" v-if="isRemovable">
-      <button class="btn btn-danger"><i class="icon ion-md-trash"></i></button>
+      <button type="button" class="btn btn-danger" @click="handleRemove"><i class="icon ion-md-trash"></i></button>
     </div>
   </div>
 </template>
@@ -14,12 +22,27 @@ export default {
   name: 'FormOptionItem',
   props: {
     number: Number,
+    option: Object,
     isRemovable: {
       type: Boolean,
       required: false,
     }
   },
+  methods: {
+    handleKey(e) {
+      if (e.keyCode === 13) {
+        this.$emit('enter', this.option);
+      }
+    },
+    handleRemove() {
+      this.$emit('remove', this.option);
+    },
+    focusInput() {
+      this.$refs.title.focus();
+    }
+  },
   mounted() {
+    this.focusInput();
   }
 };
 </script>
diff --git a/resources/js/components/FormQuestionComponent.vue b/resources/js/components/FormQuestionComponent.vue
@@ -6,7 +6,7 @@
         <div class="container-fluid">
           <div class="form-group row mt-3">
             <div class="col">
-              <input type="text" class="form-control" name="question[title]" :placeholder="$t('Question')" v-model="questionTitle">
+              <input type="text" class="form-control" name="question[title]" :placeholder="$t('Question')" v-model="questionTitle" autofocus>
             </div>
           </div>
           <div class="form-group row mt-3">
@@ -28,8 +28,15 @@
             </div>
           </div>
           <div class="options">
-            <form-option-item :number="1"></form-option-item>
-            <form-option-item :number="2"></form-option-item>
+            <form-option-item
+              v-for="(choice, index) in choices"
+              :key="index"
+              :number="index+1"
+              :option="choice.option"
+              :isRemovable="choice.isRemovable"
+              ref="optionInputs"
+              @enter="handleEnter"
+              @remove="removeOption"></form-option-item>
           </div>
           <div class="row mt-3">
             <div class="col">
@@ -58,16 +65,40 @@ export default {
   data() {
     return {
       questionTitle: '',
+      // Show 2 empty options by default
+      choices: [
+        { option: { title: '' } },
+        { option: { title: '' } },
+      ]
     }
   },
   computed: {
     isValid() {
-      return this.questionTitle;
+      return this.questionTitle &&
+        this.choices.filter(choice => choice.option.title.trim().length > 0).length >= 2;
     }
   },
   methods: {
     newQuestion() {
-      alert(this.questionTitle);
+      console.log(this.questionTitle);
+      console.log(this.choices);
+    },
+    addOption() {
+      this.choices.push({ option: { title: '' }, isRemovable: true });
+    },
+    focusOption(idx) {
+      this.$refs.optionInputs[idx].focusInput();
+    },
+    handleEnter(option) {
+      const idx = this.choices.findIndex(choice => choice.option === option);
+      if (this.choices.length-1 === idx) {
+        this.addOption();
+      } else {
+        this.focusOption(idx + 1);
+      }
+    },
+    removeOption(option) {
+      this.choices = this.choices.filter(choice => choice.option !== option);
     }
   }
 };