Validating selection and sending vote to backend.

chrux · Jul 24, 2019 · cf6a013 · cf6a013
1 parent e7c366d
commit cf6a013
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 28 deletions.
diff --git a/app/Http/Controllers/VoteController.php b/app/Http/Controllers/VoteController.php
@@ -33,6 +33,7 @@ public function create(Request $request)
      */
     public function store(Request $request)
     {
-        //
+        $options = $request['options'];
+        print_r($options);
     }    
 }
diff --git a/resources/js/components/OptionItemComponent.vue b/resources/js/components/OptionItemComponent.vue
@@ -1,14 +1,14 @@
 <template>
-  <!-- .selected -->
-  <div class="choice row mt-2 mb-2">
+  <div class="choice row mt-2 mb-2"
+    :class="{ selected }"
+    @click="handleClick">
     <div class="key col-auto">
       <span>{{ number }}</span>
     </div>
     <div class="title col">{{ option.title }}</div>
-    <div class="check col-auto"></div>
-    <!-- <div class="check col-auto">
-                <i class="icon ion-md-checkmark"></i>
-              </div> -->
+    <div class="check col-auto">
+      <i class="icon ion-md-checkmark" v-if="selected"></i>
+    </div>
   </div>
 </template>
 
@@ -18,6 +18,15 @@ export default {
   props: {
     option: Object,
     number: Number,
+    selected: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  methods: {
+    handleClick() {
+      this.$emit('change', { option: this.option, selected: !this.selected });
+    }
   },
   mounted() {
   }

diff --git a/resources/js/components/SurveyInstanceComponent.vue b/resources/js/components/SurveyInstanceComponent.vue
@@ -1,30 +1,53 @@
 <template>
   <div>
-    <div class="row">
-      <div class="col">
-        <h1 class="display-4 text-center">{{ question.title }}</h1>
+    <div v-if="voted">
+      <div class="row">
+        <div class="col">
+          <h1 class="display-4 text-center">{{ $t('Thanks for your participation!') }}</h1>
+        </div>
       </div>
     </div>
-    <div class="row">
-      <div class="col">
-        <p class="lead text-center">{{ question.description }}</p>
+    <div v-else>
+      <div class="row">
+        <div class="col">
+          <h1 class="display-4 text-center">{{ question.title }}</h1>
+        </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <div class="choices container-fluid">
-          <!-- A. PHP -->
-          <option-item v-for="(option, index) in question.options" :key="index" :option="option" :number="index+1"></option-item>
+      <div class="row">
+        <div class="col">
+          <p class="lead text-center">{{ question.description }}</p>
         </div>
       </div>
-    </div>
-    <div class="row">
-      <div class="col">Please select one</div>
-    </div>
-    <hr />
-    <div class="row">
-      <div class="col-md-3 ml-auto">
-        <button class="btn btn-primary btn-lg btn-block">{{ $t('Send') }}</button>
+      <div class="row">
+        <div class="col">
+          <div class="choices container-fluid">
+            <option-item 
+              v-for="(option, index) in question.options"
+              :key="index"
+              :option="option"
+              :number="index+1"
+              :selected="isSelected(option)"
+              @change="toggleOption"></option-item>
+          </div>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          Please select
+          <span v-if="question.maxCheck === 0">all that applies</span>
+          <span v-else>{{ question.maxCheck || 1 }}</span>
+        </div>
+      </div>
+      <hr />
+      <div class="row">
+        <div class="col-md-3 ml-auto">
+          <button
+            type="button"
+            class="btn btn-primary btn-lg btn-block"
+            :disabled="!isValid"
+            @click="vote"
+            >{{ $t('Send') }}</button>
+        </div>
       </div>
     </div>
   </div>
@@ -36,8 +59,41 @@ export default {
   props: {
     question: Object,
   },
+  data() {
+    return {
+      selectedOptions: [],
+      voted: false
+    }
+  },
+  computed: {
+    isValid() {
+      return this.selectedOptions.length >= 1;
+    }
+  },
+  methods: {
+    isSelected(option) {
+      return this.selectedOptions.indexOf(option.id) !== -1;
+    },
+    toggleOption(e) {
+      const maxCheck = this.question.maxCheck || 1;
+      if (this.selectedOptions.length === maxCheck) {
+        return;
+      }
+
+      if (e.selected) {
+        this.selectedOptions.push(e.option.id);
+      } else {
+        this.selectedOptions = this.selectedOptions.filter(id => id !== e.option.id);
+      }
+    },
+    vote() {
+      const params = Object.assign({}, this.selectedOptions);
+      axios.post('/vote', params)
+        .then(() => this.voted = true);
+        // .catch(e => console.log('e', e));
+    }
+  },
   mounted() {
-    console.log("Component mounted.");
   }
 };
 </script>