Create Vue feedback form

update google-form link and routers
lint fixes
revert uneeded style changes

package.json

@@ -94,7 +94,8 @@
       "expect",
       "jest",
       "test",
-      "beforeEach"
+      "beforeEach",
+      "FormData"
     ]
   }
 }

src/components/ask-detail.vue

@@ -1,30 +1,31 @@
 <template>
-  <a :href="href">{{ label }}</a>
+  <router-link :to="feedbackLink">{{ label }}</router-link>
 </template>
 
 <script>
-import qs from 'query-string'
-
-const FEEDBACK_URL = 'http://form.jotform.us/form/50926595605160'
 
 export default {
   props: {
     fullName: { type: String },
     detail: { type: String },
-    label: { type: String, default: 'Know it?' }
+    label: { type: String, default: 'Know it?' },
+    defaultValue: { type: String, default: '' }
   },
   computed: {
-    href () {
+    feedbackLink () {
       const opts = {
         thePage: this.fullName,
-        whatHappened: 'I found a content or data error'
+        defaultValue: this.defaultValue,
+        selectedOption: this.detail ? '3' : null
       }
-      if (this.detail) {
-        opts.tellUs = `${this.detail} should be: `
+      return {
+        name: 'feedback',
+        query: opts
       }
-      const query = qs.stringify(opts)
-      return `${FEEDBACK_URL}?${query}`
     }
   }
 }
 </script>
+
+
+

src/components/nav-bar.vue

@@ -30,9 +30,9 @@
         <router-link to="/about" class="navbar-item">
           About
         </router-link>
-        <a class="navbar-item" href="https://form.jotform.us/form/50926595605160">
+        <router-link to="/feedback" class="navbar-item">
           Feedback
-        </a>
+        </router-link>
       </div>
     </div>
   </nav>

src/router/index.js

@@ -6,6 +6,7 @@ import WardLeaderList from '../views/ward-leader-list.vue'
 import WardLeader from '../views/ward-leader.vue'
 import CityMap from '../views/city-map.vue'
 import ContentPage from '../views/content-page.vue'
+import Feedback from '../views/feedback.vue'
 
 Vue.use(VueRouter)
 
@@ -36,6 +37,11 @@ const routes = [
     name: 'city-map',
     component: CityMap
   },
+  {
+    path: '/feedback',
+    name: 'feedback',
+    component: Feedback
+  },
   {
     path: '/:slug',
     name: 'content-page',

src/views/feedback.vue

@@ -0,0 +1,175 @@
+<template>
+  <section class="hero is-info">
+    <div class="container">
+      <div class="box">
+        <div class="hero-body">
+          <div class="feedback">
+            <h1 class="title">Feedback Form</h1>
+            <h1>{{ msg }}</h1>
+            <br>
+            <form v-if="!submitted">
+              <div class="radio-form">
+                <div v-for="radio in radioList" :key="radio.id">
+                  <input :name="radio.id" required v-model="formData.selectedOption" type="radio" :id="radio.id"
+                    :value="radio.id" />
+                  <label :for="radio.id">{{ radio.label }}</label>
+                </div>
+              </div>
+              <div class="form-text" v-if="formData.selectedOption === '6'">
+                <label for="otherText">Please specify</label>
+                <input type="text" id="otherText" name="otherText" v-model="formData.otherText" />
+              </div>
+              <br>
+              <div class="form-text">
+                <label for="tellUsAboutIt">Tell us about it <span aria-label="Required question">*</span></label>
+                <textarea name="tellUsAboutIt" id="tellUsAboutIt" v-model="formData.tellUsAboutIt" cols="40"
+                  rows="4"></textarea>
+              </div>
+              <div class="form-text">
+                <label for="howDoYouKnow">How do you know</label>
+                <textarea name="howDoYouKnow" id="howDoYouKnow" v-model="formData.howDoYouKnow" cols="40"
+                  rows="2"></textarea>
+              </div>
+              <div class="form-text">
+                <label for="thePageWhereItHappened">The page where it happened</label>
+                <input type="text" id="thePageWhereItHappened" name="thePageWhereItHappened"
+                  v-model="formData.thePageWhereItHappened" />
+              </div>
+              <div class="form-text">
+                <label for="yourEmail">Your email</label>
+                <input type='text' id='yourEmail' name='yourEmail' v-model="formData.yourEmail" />
+              </div>
+              <br>
+              <div class="form-text">
+                <button :disabled="noInput" class="button is-primary is-small" type="submit"
+                  @click.prevent="submitFormPost">Submit
+                  Feedback</button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import axios from 'axios'
+export default {
+  name: 'Feedback',
+  data () {
+    return {
+      submitted: false,
+      msg: 'What happened?',
+      radioList: [
+        { id: '1', label: 'Something went wrong', entryId: 'entry.564578111' },
+        { id: '2', label: 'I have a suggestion', entryId: 'entry.564578111' },
+        { id: '3', label: 'I found a content or data error', entryId: 'entry.564578111' },
+        { id: '4', label: 'Something is confusing', entryId: 'entry.564578111' },
+        { id: '5', label: 'Nothing, I just want to say something nice', entryId: 'entry.564578111' },
+        { id: '6', label: 'Other', entryId: 'entry.564578111' }
+      ],
+
+      formData: {
+        selectedOption: null,
+        otherText: '',
+        tellUsAboutIt: '',
+        howDoYouKnow: '',
+        thePageWhereItHappened: '',
+        yourEmail: ''
+      }
+    }
+  },
+  mounted () {
+    if (this.$route.query.selectedOption) {
+      this.formData.selectedOption = this.$route.query.selectedOption
+    }
+    if (this.$route.query.thePage) {
+      this.formData.thePageWhereItHappened = this.$route.query.thePage
+    }
+    if (this.$route.query.defaultValue) {
+      this.formData.tellUsAboutIt = this.$route.query.defaultValue
+    }
+  },
+  computed: {
+    formParams () {
+      const selectedRadio = this.radioList.find(radio => radio.id === this.formData.selectedOption)
+      const currTime = Date.now()
+      const params = {
+        submit: 'Submit',
+        'entry.843445704': this.formData.tellUsAboutIt,
+        'entry.584749072': this.formData.howDoYouKnow,
+        'entry.1794541886': this.formData.thePageWhereItHappened,
+        'entry.1040622557': this.formData.yourEmail,
+        'entry.852279778': currTime.toString()
+      }
+
+      if (selectedRadio) {
+        if (selectedRadio.label === 'Other') {
+          params[selectedRadio.entryId] = '__other_option__'
+          params[`${selectedRadio.entryId}.other_option_response`] = this.formData.otherText
+        } else {
+          params[selectedRadio.entryId] = selectedRadio.label
+        }
+      }
+      return params
+    },
+
+    noInput () {
+      return this.formData.tellUsAboutIt.length === 0
+    },
+    formUrl () {
+      return 'https://docs.google.com/forms/d/e/1FAIpQLSf5gGHLck-Uv6WayZjgEYysfLxe_xpPxB9jiB9qv7LWEpbjZg/formResponse'
+    }
+  },
+  methods: {
+    submitFormPost () {
+      const bodyFormData = new FormData()
+      Object.entries(this.formParams).forEach(([key, value]) => {
+        bodyFormData.append(key, value)
+      })
+      axios.post(this.formUrl, bodyFormData)
+        .catch(function (error) {
+          console.log(error)
+        })
+      this.submitted = true
+      this.msg = 'Thank you for your feedback!'
+    }
+  }
+}
+</script>
+
+<style scoped lang="sass">
+.hero.is-info
+  display: flex
+  justify-content: center
+  align-items: center
+  min-height: 100vh
+
+.container
+  max-width: 600px
+
+.box
+  background-color: rgba(255, 255, 255, 0.7)
+  border-radius: 8px
+  padding: 30px
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08)
+
+.feedback
+  width: 100%
+
+.form-text label
+  display: block
+  margin-top: 5px
+
+.button
+  min-width: 250px
+  margin-bottom: 15px
+
+p
+  margin-bottom: 15px
+
+abbr
+  border-bottom: dotted 1px #333
+  cursor: help
+</style>

src/views/ward-leader.vue

@@ -168,27 +168,6 @@
                   detail="Social media"
                   label="Know a link?"></ask-detail>
               </dd>
-
-              <dt>
-                Sample Ballots
-              </dt>
-              <dd>
-                <ul v-if="sampleBallots.length > 0" class="sample-ballots">
-                  <li
-                    v-for="ballot in sampleBallots"
-                    :key="ballot.id">
-                    <a @click.prevent="modalUrl = ballot.url">
-                      <figure class="image is-48x48">
-                        <img :src="ballot.url" height="48"/>
-                      </figure>
-                    </a>
-                  </li>
-                </ul>
-                <a :href="sampleBallotFormPrefilled">
-                  Upload a sample ballot
-                </a>
-              </dd>
-
               <dt v-if="leader.campaignFinanceReports && leader.campaignFinanceReports.length > 0">
                 Campaign Finance Reports
               </dt>
@@ -261,7 +240,7 @@ import CommitteePerson from '../components/committee-person.vue'
 import WardMap from '../components/ward-map.vue'
 import AskDetail from '../components/ask-detail.vue'
 import { formatNumber, ordinalize } from '../util'
-import { SAMPLE_BALLOT_FORM, TURNOUT_ELECTION } from '../config'
+import { TURNOUT_ELECTION } from '../config'
 
 export default {
   props: [