Merge pull request #1 from tutorcruncher/enquiry-form

Enquiry form

Author: samuelcolvin

config.js

@@ -46,7 +46,7 @@ module.exports = {
       // SOCKET_API_URL: '"api/"',
       SOCKET_API_URL: '"https://socket.tutorcruncher.com"',
     },
-    port: 8000,
+    port: 5000,
     build_dir: path.resolve(__dirname, 'dev'),
     css_source_map: true,
     public_path: '/',

src/components/con-details.vue

@@ -1,20 +1,5 @@
 <template>
   <div>
-    <div class="tcs-location">
-      <!--
-      this is the svg for map icon straight from
-      https://github.com/encharm/Font-Awesome-SVG-PNG/blob/master/black/svg/map-marker.svg
-      -->
-      <svg class="tcs-svg" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg">
-        <path d="M1152 640q0-106-75-181t-181-75-181 75-75 181 75 181 181 75 181-75 75-181zm256 0q0 109-33
-          179l-364 774q-16 33-47.5 52t-67.5 19-67.5-19-46.5-52l-365-774q-33-70-33-179 0-212 150-362t362-150
-          362 150 150 362z"/>
-      </svg>
-      <span>{{ contractor.town }}, {{ contractor.country }}</span>
-    </div>
-
-    <div class="tcs-aside tcs-md" v-html="to_markdown(contractor.tag_line)"></div>
-
     <div class="tcs-md" v-html="to_markdown(contractor.primary_description)"></div>
 
     <div class="tcs-attr" v-for="attr in contractor_extra.extra_attributes">
@@ -59,45 +44,19 @@ export default {
     contractor_extra: function () {
       return this.$root.contractors_extra[this.$route.params.link] || {}
     },
-  },
-  created: function () {
-    // TODO could do something less ugly here like hide the scroll bar at all times
-    this.body_overflow_before = document.body.style.overflow
-    document.body.style.overflow = 'hidden'
-  },
-  destroyed: function () {
-    document.body.style.overflow = this.body_overflow_before
   }
 }
 </script>
 
 <style lang="scss">
 @import '../conf';
 
-.tcs-location {
-  margin-bottom: 10px;
-  float: right;
-  span {
-    display: inline-block;
-    padding-top: 4px;
-    vertical-align: top;
-    font-weight: 500;
-  }
-}
-
 .tcs-md {
   p {
     margin: 0 0 8px;
   }
 }
 
-.tcs-aside {
-  font-size: 22px;
-  margin-bottom: 10px;
-  color: $hightlight;
-  min-height: 28px;
-}
-
 h3 {
   margin-top: 12px;
   margin-bottom: 4px;

src/components/enquiry.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="tcs-submitted" v-if="submitted" v-html="$root.get_text('enquiry_submitted_thanks', {}, true)"></div>
+    <div v-else>
+      <p class="tcs">
+        {{ $root.get_text('contractor_enquiry_message', {contractor_name: contractor.name}) }}
+      </p>
+      <form class="tcs" @submit.prevent="submit">
+        <div v-for="field in visible_fields">
+          <input_ :field="field"></input_>
+        </div>
+        <div v-for="field in attribute_fields">
+          <input_ :field="field" prefix="attributes"></input_>
+        </div>
+        <div class="tcs-field tcs-submit">
+          <button type="submit">
+            {{ $root.config.submit_enquiry }}
+          </button>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+
+<script>
+var input = require('./input')
+
+export default {
+  name: 'enquiry',
+  props: ['contractor'],
+  components: {
+    'input_': input
+  },
+  computed: {
+    visible_fields: function () {
+      return this.$root.enquiry_form_info.visible || []
+    },
+    attribute_fields: function () {
+      return this.$root.enquiry_form_info.attributes || []
+    }
+  },
+  data: () => ({
+    submitted: false
+  }),
+  methods: {
+    submit: function () {
+      this.$set(this.$root.enquiry_data, 'contractor', this.contractor.id)
+      this.$root.submit_enquiry(this.submission_complete)
+    },
+    submission_complete: function () {
+      this.submitted = true
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../conf';
+
+form.tcs {
+  margin: auto;
+  max-width: 450px;
+}
+
+p.tcs {
+  margin: 0 0 10px;
+}
+
+.tcs-submitted {
+  text-align: center;
+  font-size: 20px;
+  padding: 30px 40px;
+}
+
+.tcs-submit {
+  text-align: right;
+  button {
+    font-size: 17px;
+    padding: 6px 12px;
+    border: none;
+    border-radius: 4px;
+
+    background-color: $button-colour;
+    color: white;
+    transition: all .3s ease;
+    outline: none;
+    cursor: pointer;
+    &:hover {
+      background-color: darken($button-colour, 20%);
+    }
+  }
+}
+</style>

src/components/input.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="tcs-field">
+    <textarea v-if="is_textarea"
+              :name="name"
+              :placeholder="field.label"
+              :required="field.required"
+              :maxlength="field.max_length || 255"
+              :value="value"
+              @input="changed"
+              rows="5">
+    </textarea>
+    <input v-else
+           :type="field.type"
+           :name="name"
+           :placeholder="field.label"
+           :required="field.required"
+           :maxlength="field.max_length || 255"
+           :value="value"
+           @input="changed">
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'input',
+  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'
+    },
+    name: function () {
+      return this.prefix + '.' + this.field.field
+    },
+    value: function () {
+      if (this.prefix === '') {
+        return this.$root.enquiry_data[this.field.field] || ''
+      } else {
+        return (this.$root.enquiry_data[this.prefix] || {})[this.field.field] || ''
+      }
+    }
+  },
+  methods: {
+    changed: function (event) {
+      if (this.prefix === '') {
+        this.$set(this.$root.enquiry_data, this.field.field, event.target.value)
+      } 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)
+      }
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+@import '../conf';
+
+$border-colour: #66afe9;
+.tcs-field {
+  padding: 8px 0;
+  width: 100%;
+  input, textarea {
+    font-size: 16px;
+    width: calc(100% - 26px);
+    padding: 10px 12px;
+    border-radius: 5px;
+    border: 1px solid #aaa;
+    font-family: inherit;
+    outline: none;
+    &:focus {
+      border-color: $border-colour;
+      box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px lighten($border-colour, 20%);
+    }
+  }
+}
+</style>