Improvements

- Multiple choice, dropdown and checkbox options are retrieved in an array instead of JSON - Improved and fixed vue example
Graphicito · Oct 20, 2020 · e746912 · e746912
1 parent 50ac1bf
commit e746912
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 24 deletions.
diff --git a/examples/vue-bootstrap.vue b/examples/vue-bootstrap.vue
@@ -26,8 +26,38 @@
           :name="i.entry"
         ></b-form-input>
 
+        <b-form-radio-group
+          v-else-if="i.type === 'multiple-choice'"
+          :options="i.choices"
+          v-model="formData[i.title]"
+          :required="i.required"
+          :name="i.entry"
+        >
+        </b-form-radio-group>
+
+        <b-form-checkbox-group
+          v-else-if="i.type === 'checkbox'"
+          :options="i.choices"
+          v-model="formData[i.title]"
+          :required="i.required"
+          :name="i.entry"
+        >
+        </b-form-checkbox-group>
+
+        <b-form-select
+          v-else-if="i.type === 'dropdown'"
+          :options="i.choices"
+          text="--Select--"
+          v-model="formData[i.title]"
+          :required="i.required"
+          :name="i.entry"
+        >
+        </b-form-select>
+
         <!-- 
-            handle other type of inputs below... 
+          linear-scale is essentially a group of radio buttons..
+
+          handle other type of inputs below... 
         -->
       </b-form-group>
 
@@ -38,7 +68,7 @@
 
 <script>
 import axios from "axios";
-import gform from "custom-google-form";
+import { get } from "custom-gform";
 
 export default {
   data() {
@@ -52,14 +82,15 @@ export default {
   },
   methods: {
     async getForm() {
-      this.gFormData = await gform.get(
-        "https://docs.google.com/forms/d/1arkMnCT_O8c1KO6-vcrMRGikzVZsOzwJCL82ZM8RJOw/edit"
+      this.gFormData = await get(
+        "https://docs.google.com/forms/d/e/1FAIpQLSc5LAweF5HoptCrQ0FLEqA5ehUlMog1vki_NXxaXDYPH8q_QA/viewform"
       );
 
       // Dynamically sets v-model from title
       // Not necessary but useful for form validation
+      // Must set if form contains selective inputs (combobox, dropdrop, multiplechoice..)
       // Each form input v-model is declared using its title
-      const dynamicVModel = this.gFormData.questions.map((i) => i.title);
+      const dynamicVModel = this.gFormData.questions.map(i => i.title);
 
       dynamicVModel.forEach((i) => {
         this.$set(this.formData, i, null);
@@ -73,7 +104,7 @@ export default {
       await ax
         .post(this.gFormData.formAction, formData)
         .then((rsp) => {
-          // Do something here...
+          // Handle success here...
         })
         .catch((err) => {
           console.log(err);

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "custom-gform",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -20,6 +20,8 @@
     "google form",
     "custom google form",
     "free form",
-    "quick form create"
+    "quick form create",
+    "customize google form",
+    "style google form"
   ]
 }
diff --git a/src/extractData.js b/src/extractData.js
@@ -49,14 +49,10 @@ const getMultipleChoice = (formQuestions) => {
 
         choices = choices.map(choice => {
             if(choice[4] === 1){
-                return {
-                    title: 'Others'
-                }
+                return 'Others';
             }
 
-            return {
-                title: choice[0]
-            }
+            return choice[0];
         })
 
         return {
@@ -78,11 +74,7 @@ const getDropDown = (formQuestions) => {
     dropDown = dropDown.map(q => {
         let choices = q[4][0][1];
 
-        choices = choices.map(choice => {
-            return {
-                title: choice[0]
-            }
-        })
+        choices = choices.map(choice => choice[0])
 
         return {
             type: 'dropdown',
@@ -103,11 +95,7 @@ const getCheckBoxes = (formQuestions) => {
     checkBoxes = checkBoxes.map(q => {
         let choices = q[4][0][1];
 
-        choices = choices.map(choice => {
-            return {
-                title: choice[0]
-            }
-        })
+        choices = choices.map(choice => choice[0]);
 
         return {
             type: 'checkbox',