fix filter display

Author: samuelcolvin

src/components/contractors/Contractors.js

@@ -87,10 +87,10 @@ class Contractors extends Component {
     const args = Object.assign({}, this.props.config.contractor_filter, {
       subject: selected_subject ? selected_subject.id : null,
       pagination: this.props.config.pagination,
+      sort: this.props.config.sort_on,
       page: page,
       location: location_str,
     })
-    console.log(args)
     const contractor_response = await this.props.root.requests.get('contractors', args)
     this.props.config.event_callback('updated_contractors', contractor_response)
     this.setState({contractor_response: {results: []}})
@@ -132,13 +132,13 @@ class Contractors extends Component {
         <If v={this.state.contractor_response}>
           <div className="tcs-filters-container">
             <LocationInput get_text={this.props.root.get_text}
-                           show={this.props.config.location_input}
+                           show={this.props.config.show_location_search}
                            loc_raw={this.state.location_str}
                            loc_change={this.location_change}
                            submit={this.submit_location}/>
 
             <SubjectSelect get_text={this.props.root.get_text}
-                           show={this.props.config.subject_filter}
+                           show={this.props.config.show_subject_filter}
                            subjects={this.state.subjects}
                            selected_subject={this.state.selected_subject}
                            subject_change={this.subject_change}/>

src/components/contractors/Filters.js

@@ -22,19 +22,21 @@ export const SubjectSelect = ({get_text, show, subjects, selected_subject, subje
 
 export const LocationInput = ({get_text, show, loc_raw, loc_change, submit}) => {
   return (
-    <div className="tcs-contractor-filter tcs-location-filter">
+    <div className="tcs-contractor-filter">
       <If v={show}>
-        <input className="tcs-location-input"
-               type="text"
-               value={loc_raw || ''}
-               onChange={v => loc_change(v.target.value || null)}
-               onKeyPress={v => v.key === 'Enter' && submit()}
-               placeholder={get_text('location_input_placeholder')}/>
-        <span className="tcs-location-clear"
-              style={{visibility: loc_raw === null ? 'hidden' : 'visible'}}
-              onClick={() => loc_change(null) || submit(null)}>
-          ×
-        </span>
+        <div className="tcs-location-filter">
+          <input className="tcs-location-input"
+                 type="text"
+                 value={loc_raw || ''}
+                 onChange={v => loc_change(v.target.value || null)}
+                 onKeyPress={v => v.key === 'Enter' && submit()}
+                 placeholder={get_text('location_input_placeholder')}/>
+          <span className="tcs-location-clear"
+                style={{visibility: loc_raw === null ? 'hidden' : 'visible'}}
+                onClick={() => loc_change(null) || submit(null)}>
+            ×
+          </span>
+        </div>
       </If>
     </div>
   )

src/index.js

@@ -69,11 +69,8 @@ window.socket = async function (public_key, config) {
     }
   }
 
-  let options_required = false
   let error = null
-  if (!config.mode) {
-    options_required = true
-  } else if (MODES.indexOf(config.mode) === -1) {
+  if (config.mode && MODES.indexOf(config.mode) === -1) {
     error = `invalid mode "${config.mode}", options are: ${MODES.join(', ')}`
     config.mode = 'grid'
   }
@@ -97,8 +94,6 @@ window.socket = async function (public_key, config) {
     // use history mode with enquiry so it doesn't add the hash
     if (config.mode === 'enquiry') {
       config.router_mode = 'history'
-    } else {
-      options_required = true
     }
   } else if (ROUTER_MODES.indexOf(config.router_mode) === -1) {
     error = `invalid router mode "${config.router_mode}", options are: ${ROUTER_MODES.join(', ')}`
@@ -119,14 +114,6 @@ window.socket = async function (public_key, config) {
     delete config.labels_exclude
   }
 
-  if (config.subject_filter === undefined) {
-    config.subject_filter = true
-  }
-
-  if (config.location_input === undefined) {
-    config.location_input = true
-  }
-
   if (!config.event_callback) {
     config.event_callback = () => null
   }
@@ -137,7 +124,6 @@ window.socket = async function (public_key, config) {
     return
   }
 
-  config.pagination = config.pagination || 100
   config.messages = config.messages || {}
   for (let k of Object.keys(STRINGS)) {
     if (!config.messages[k]) {
@@ -147,20 +133,31 @@ window.socket = async function (public_key, config) {
   config.random_id = Math.random().toString(36).substring(2, 10)
   config.grecaptcha_key = process.env.REACT_APP_GRECAPTCHA_KEY
 
-  if (options_required) {
-    let company_options
-    try {
-      company_options = await get_company_options(public_key, config)
-    } catch(e) {
-        error = e.toString()
-      company_options = {
-        display_mode: 'grid',
-        router_mode: 'hash',
-      }
+  let company_options
+  try {
+    company_options = await get_company_options(public_key, config)
+  } catch(e) {
+    error = e.toString()
+    // these are the default values
+    company_options = {
+      display_mode: 'grid',
+      pagination: 100,
+      router_mode: 'hash',
+      show_hours_reviewed: true,
+      show_labels: true,
+      show_location_search: true,
+      show_stars: true,
+      show_subject_filter: true,
+      sort_on: 'name',
+    }
+  }
+
+  company_options.mode = company_options.display_mode
+  console.debug('company options:', company_options)
+  for (let [k, v] of Object.entries(company_options)) {
+    if (config[k] === undefined) {
+      config[k] = v
     }
-    console.debug('company options:', company_options)
-    config.mode = config.mode || company_options.display_mode
-    config.router_mode = config.router_mode || company_options.router_mode
   }
 
   console.debug('using config:', config)

src/styles/contractor-filters.scss

@@ -14,41 +14,25 @@
   background: darken($brand-colour, 10%);
 }
 
-//.cross {
-//  position: absolute;
-//  top: 1px;
-//  right: 1px;
-//  margin: 5px 4px;
-//  padding: 4px 4px;
-//  cursor: pointer;
-//  z-index: 10;
-//  svg.tcs-svg {
-//    transition: all .4s ease;
-//    opacity: 0.5;
-//    width: 18px;
-//    height: 18px;
-//  }
-//  &:hover {
-//    svg.tcs-svg {
-//      opacity: 1;
-//    }
-//  }
-//}
-
 .tcs-filters-container {
   display: flex;
 }
 
 .tcs-contractor-filter {
   width: 50%;
-  padding: 0 2px;
   box-sizing: border-box;
 }
 
+.Select {
+  margin-left: 4px;
+}
+
 .tcs-location-filter {
+  margin-right: 4px;
   border-radius: 4px;
   border: 1px solid #ccc;
   height: 36px;
+  padding: 0 2px;
 }
 
 .tcs-location-input {