Merge pull request #14 from tutorcruncher/datetime-fields

supporting date and datetime fields

Author: samuelcolvin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "tutorcruncher-socket",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "TutorCruncher socket",
   "author": "Samuel Colvin <[email protected]>",
   "private": false,

public/simple/index.html

@@ -32,6 +32,9 @@
     </main>
   </body>
   <script>
-    window.socket = socket('9c79f14df986a1ec693c')
+    window.socket = socket('f028073b6cfeb13223cb', {
+      mode: 'enquiry',
+      api_root: 'https://socket-beta.tutorcruncher.com',
+    })
   </script>
 </html>

src/components/shared/Input.js

@@ -1,14 +1,120 @@
 import React, { Component } from 'react'
-import { If, Switch } from './Tools'
+
+const GeneralInput = ({field, name, value, field_label, on_change}) => (
+  <input type={field.type}
+         name={name}
+         placeholder={field_label}
+         required={field.required}
+         maxLength={field.max_length || 255}
+         value={value}
+         onChange={on_change}/>
+)
+
+const TextInput = ({field, name, value, field_label, on_change}) => (
+  field.max_length > 500 ? (
+    <textarea name={name}
+            placeholder={field_label}
+            required={field.required}
+            maxLength={field.max_length || 255}
+            value={value}
+            onChange={on_change}
+            rows="5"/>
+  ) : (
+    <GeneralInput field={field} name={name} value={value} field_label={field_label} on_change={on_change}/>
+  )
+)
+
+const Checkbox = ({field, name, value, field_label, on_change}) => (
+  <label>
+    <input type="checkbox"
+           name={name}
+           required={field.required}
+           checked={value}
+           onChange={on_change}/>
+    {field_label}
+  </label>
+)
+
+const Select = ({field, name, value, field_label, on_change}) => (
+  <label>
+    {field_label}
+    <select name={name} required={field.required} value={value} onChange={on_change}>
+      <option value="">---------</option>
+      {field.choices && field.choices.map((choice, i) => (
+        <option key={i} value={choice.value}>
+          {choice.display_name}
+        </option>
+      ))}
+    </select>
+  </label>
+)
+
+const DateInput = ({field, name, value, field_label, on_change}) => (
+  <label>
+    {field_label}
+    <GeneralInput field={field} name={name} value={value} field_label={field_label} on_change={on_change}/>
+  </label>
+)
+
+const DatetimeInput = ({field, name, value, field_label, on_change}) => {
+  // could use https://stackoverflow.com/a/31162426/949890
+  const re_match = value.match(/(.*?)T(.*)/)
+  const render_values = {
+    date: re_match ? re_match[1] : '',
+    time: re_match ? re_match[2] : '',
+  }
+
+  const on_change_ = (event) => {
+    render_values[event.target.getAttribute('type')] = event.target.value
+    on_change({target: {value: render_values.date + 'T' + render_values.time}})
+  }
+  const required = field.required || render_values.date !== '' || render_values.time !== ''
+  return (
+    <label>
+      {field_label}
+      <div className="tcs-datetime">
+        <input type="date"
+               name={name + '-date'}
+               required={required}
+               value={render_values.date}
+               onChange={on_change_}/>
+        <input type="time"
+               step="300"
+               name={name + '-time'}
+               required={required}
+               value={render_values.time}
+               onChange={on_change_}/>
+      </div>
+    </label>
+  )
+}
+
+const IntegerInput = ({field, name, value, field_label, on_change}) => (
+  <input type="number"
+         step="1"
+         name={name}
+         placeholder={field_label}
+         required={field.required}
+         value={value}
+         onChange={on_change}/>
+)
+
+const INPUT_LOOKUP = {
+  'text': TextInput,
+  'checkbox': Checkbox,
+  'select': Select,
+  'date': DateInput,
+  'datetime': DatetimeInput,
+  'integer': IntegerInput,
+}
 
 class Input extends Component {
   constructor (props) {
     super(props)
-    this.changed = this.changed.bind(this)
+    this.on_change = this.on_change.bind(this)
   }
 
-  changed (event) {
-    // this.setState({value: event.target.value})
+  on_change (event) {
     const field = this.props.field
     const value = field.type === 'checkbox' ? event.target.checked : event.target.value
     if (field.prefix) {
@@ -31,52 +137,11 @@ class Input extends Component {
       value = this.props.enquiry_data[field.field] || ''
     }
 
+    const Input = INPUT_LOOKUP[field.type] || GeneralInput
+
     return (
       <div className="tcs-field" id={'field-' + name}>
-        <Switch>
-          <If v={field.type === 'text' && field.max_length > 500}>
-            <textarea name={name}
-                      placeholder={field_label}
-                      required={field.required}
-                      maxLength={field.max_length || 255}
-                      value={value}
-                      onChange={this.changed}
-                      rows="5"/>
-          </If>
-
-          <If v={field.type === 'checkbox'}>
-            <label>
-              <input type="checkbox"
-                     name={name}
-                     required={field.required}
-                     checked={value}
-                     onChange={this.changed}/>
-              {field_label}
-            </label>
-          </If>
-
-          <If v={field.type === 'select'}>
-            <label>
-              {field_label}
-              <select name={name} required={field.required} value={value} onChange={this.changed}>
-                <option value="">---------</option>
-                {field.choices && field.choices.map((choice, i) => (
-                  <option key={i} value={choice.value}>
-                    {choice.display_name}
-                  </option>
-                ))}
-              </select>
-            </label>
-          </If>
-
-          <input type={field.type}
-                 name={name}
-                 placeholder={field_label}
-                 required={field.required}
-                 maxLength={field.max_length || 255}
-                 value={value}
-                 onChange={this.changed}/>
-        </Switch>
+        <Input field={field} name={name} value={value} field_label={field_label} on_change={this.on_change}/>
         <div className={'help-text' + (field.prefix ? '' : ' muted')}>
           {field.help_text}
         </div>

src/components/shared/Modal.js

@@ -38,7 +38,7 @@ class Modal extends Component {
   close () {
     this.setState({show: false})
     const h = this.props.history
-    const next_url = this.props.last_url ? this.props.last_url : h.location.pathname.replace(/\/[^/]+$/, '')
+    const next_url = this.props.last_url ? this.props.last_url : h.location.pathname.replace(/\/[^/]+$/, '/')
     setTimeout(() => h.push(next_url), 200)
   }
 

src/components/shared/Tools.js

@@ -57,16 +57,6 @@ export const IfElse = ({v, children}) => {
   }
 }
 
-export const Switch = ({children}) => {
-  // All but the last child of a Switch component must be "If" components
-  for (let c of children.slice(0, children.length - 1)) {
-    if (c.props.v) {
-      return c.props.children
-    }
-  }
-  return children[children.length - 1]
-}
-
 export const Markdown = ({content}) => (
   <div className="tcs-md" dangerouslySetInnerHTML={{__html: to_markdown(content)}}/>
 )

src/styles/input.scss

@@ -43,4 +43,13 @@ $border-colour: #66afe9;
       display: none;
     }
   }
+  .tcs-datetime input {
+    width: calc(50% - 5px);
+   &:first-child {
+     margin-right: 5px
+   }
+   &:last-child {
+     margin-left: 5px;
+   }
+  }
 }