improvements to enquiry form

Author: samuelcolvin

src/components/enquiry.vue

@@ -13,9 +13,6 @@
         <div v-for="field in visible_fields">
           <tcs-input :field="field"></tcs-input>
         </div>
-        <div v-for="field in attribute_fields">
-          <tcs-input :field="field" prefix="attributes"></tcs-input>
-        </div>
 
         <div :id="grecaptcha_container_id" class="grecaptcha"></div>
         <div v-if="grecaptcha_missing" class="error-msg">

src/components/input.vue

@@ -1,58 +1,80 @@
 <template>
-  <div class="tcs-field">
-    <textarea v-if="is_textarea"
+  <div class="tcs-field" :id="'field-' + name">
+    <textarea v-if="field.type === 'text' && field.max_length > 500"
               :name="name"
-              :placeholder="field.label"
+              :placeholder="label"
               :required="field.required"
               :maxlength="field.max_length || 255"
               :value="value"
               @input="changed"
               rows="5">
     </textarea>
+
+    <label v-else-if="field.type === 'checkbox'">
+      <input type="checkbox" :name="name" :required="field.required" :checked="value" @change="changed">
+      {{ label }}
+    </label>
+
+    <label v-else-if="field.type === 'select'">
+      {{ label }}
+      <select :name="name" :required="field.required" @input="changed">
+        <option v-for="choice in field.choices" :value="choice.value" :selected="choice.value === value">
+          {{ choice.display_name }}
+        </option>
+      </select>
+    </label>
+
     <input v-else
            :type="field.type"
            :name="name"
-           :placeholder="field.label"
+           :placeholder="label"
            :required="field.required"
            :maxlength="field.max_length || 255"
            :value="value"
            @input="changed">
+
+    <div :class="'help-text' + (this.field.prefix ? '' : ' muted')">
+      {{ field.help_text }}
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   props: {
     field: Object,
-    prefix: {
-      type: String,
-      default: ''
-    },
   },
   computed: {
     is_textarea: function () {
-      // TODO return this.field.type === 'text' && this.field.max_length > 500
-      return this.field.type === 'text' && this.prefix === 'attributes'
+      return this.field.type === 'text' && this.field.max_length > 500
+    },
+    label: function () {
+      return this.field.label + (this.field.required ? this.$root.get_text('required_message') : '')
     },
     name: function () {
-      return this.prefix + '.' + this.field.field
+      if (this.field.prefix) {
+        return this.field.prefix + '-' + this.field.field
+      } else {
+        return this.field.field
+      }
     },
     value: function () {
-      if (this.prefix === '') {
-        return this.$root.enquiry_data[this.field.field] || ''
+      if (this.field.prefix) {
+        return (this.$root.enquiry_data[this.field.prefix] || {})[this.field.field] || ''
       } else {
-        return (this.$root.enquiry_data[this.prefix] || {})[this.field.field] || ''
+        return this.$root.enquiry_data[this.field.field] || ''
       }
     }
   },
   methods: {
     changed: function (event) {
-      if (this.prefix === '') {
-        this.$set(this.$root.enquiry_data, this.field.field, event.target.value)
+      if (this.field.prefix) {
+        let obj = this.$root.enquiry_data[this.field.prefix] || {}
+        obj[this.field.field] = this.field.type === 'checkbox' ? event.target.checked : event.target.value
+        this.$set(this.$root.enquiry_data, this.field.prefix, obj)
+        this.$root.enquiry_data = Object.assign({}, this.$root.enquiry_data)
       } else {
-        var obj = this.$root.enquiry_data[this.prefix] || {}
-        obj[this.field.field] = event.target.value
-        this.$set(this.$root.enquiry_data, this.prefix, obj)
+        this.$set(this.$root.enquiry_data, this.field.field, event.target.value)
       }
     }
   },
@@ -64,23 +86,46 @@ export default {
 
 $border-colour: #66afe9;
 .tcs-field {
+  &.required {
+    .help-text {
+      content: "Read this: ";
+    }
+  }
+
   padding: 8px 0;
   width: 100%;
-  input, textarea {
+  input, textarea, select {
     font-size: 16px;
     box-sizing: border-box;
     width: 100%;
-    padding: 10px 12px;
+    padding: 8px 12px 10px;
     margin: 0;
     height: inherit;
     border-radius: 5px;
     border: 1px solid #aaa;
     font-family: inherit;
     outline: none;
+    background-color: white;
     &:focus {
       border-color: $border-colour;
       box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px lighten($border-colour, 20%);
     }
+    &:required {
+      border: 1px solid #888;
+    }
+  }
+  label {
+    display: block;
+  }
+  input[type="checkbox"] {
+      width: auto;
+  }
+  .help-text {
+    font-size: 14px;
+    color: #888;
+    &.muted {
+      display: none;
+    }
   }
 }
 </style>

src/main.js

@@ -84,6 +84,7 @@ const STRINGS = {
   enquiry_modal_submitted_thanks: 'Enquiry submitted, thank you.\n\nYou can now close this window.',
   enquiry_button: 'Get in touch',
   grecaptcha_missing: 'This captcha is required',
+  required_message: ' (Required)',
 }
 
 const MODES = ['grid', 'enquiry', 'enquiry-modal']

test/unit/specs/_shared.js

@@ -26,11 +26,9 @@ class TestConsole {
 
 const enquiry_options = {
   visible: [
-    {field: 'first_field', type: 'text', label: 'Foobar', max_length: 255}
+    {field: 'first_field', prefix: null, type: 'text', label: 'Foobar', max_length: 255},
+    {field: 'custom_field', prefix: 'attributes', type: 'text', label: 'Custom Field', max_length: 2047},
   ],
-  attributes: [
-    {field: 'custom_field', type: 'text', label: 'Custom Field', max_length: 2047}
-  ]
 }
 
 const vm_data = () => ({

test/unit/specs/enquiry.js

@@ -11,9 +11,9 @@ describe('con-modal.vue, enquiry.vue', () => {
     await tick()
     await sleep(50)  // wait for transition
     expect(vm.$el.querySelector('input').attributes['placeholder'].value).to.equal('Foobar')
-    expect(vm.$el.querySelector('input').attributes['name'].value).to.equal('.first_field')
+    expect(vm.$el.querySelector('input').attributes['name'].value).to.equal('first_field')
     expect(vm.$el.querySelector('textarea').attributes['placeholder'].value).to.equal('Custom Field')
-    expect(vm.$el.querySelector('textarea').attributes['name'].value).to.equal('attributes.custom_field')
+    expect(vm.$el.querySelector('textarea').attributes['name'].value).to.equal('attributes-custom_field')
   })
 })