Use select box of countries rather than text field for "Origin Countr…

…y" (#1967)
reactioncommerce · Mar 13, 2017 · 2dc1b05 · 2dc1b05
1 parent d683786
commit 2dc1b05
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/imports/plugins/included/product-admin/client/components/productAdmin.js b/imports/plugins/included/product-admin/client/components/productAdmin.js
@@ -1,3 +1,4 @@
+import { isEqual } from "lodash";
 import React, { Component, PropTypes } from "react";
 import Velocity from "velocity-animate";
 import "velocity-animate/velocity.ui";
@@ -13,7 +14,6 @@ import {
 } from "/imports/plugins/core/ui/client/components";
 import { Router } from "/client/api";
 import { TagListContainer } from "/imports/plugins/core/ui/client/containers";
-import { isEqual } from "lodash";
 import update from "react/lib/update";
 
 const fieldNames = [
@@ -149,7 +149,7 @@ class ProductAdmin extends Component {
     });
   }
 
-  handleTemplateChange = (value, field) => {
+  handleSelectChange = (value, field) => {
     if (this.props.onProductFieldSave) {
       this.props.onProductFieldSave(this.product._id, field, value);
     }
@@ -241,7 +241,7 @@ class ProductAdmin extends Component {
               i18nKeyPlaceholder="productDetailEdit.templateSelectPlaceholder"
               label="Template"
               name="template"
-              onChange={this.handleTemplateChange}
+              onChange={this.handleSelectChange}
               options={this.props.templates}
               placeholder="Select a template"
               value={this.product.template}
@@ -307,16 +307,17 @@ class ProductAdmin extends Component {
               ref="descriptionInput"
               value={this.product.description}
             />
-            <TextField
+            <Select
+              clearable={false}
               i18nKeyLabel="productDetailEdit.originCountry"
               i18nKeyPlaceholder="productDetailEdit.originCountry"
               label="Origin Country"
               name="originCountry"
-              onBlur={this.handleFieldBlur}
-              onChange={this.handleFieldChange}
-              placeholder="Country of Origin"
+              onChange={this.handleSelectChange}
+              placeholder="Select a Country"
               ref="countryOfOriginInput"
               value={this.product.originCountry}
+              options={this.props.countries}
             />
           </CardBody>
         </Card>
@@ -418,6 +419,7 @@ class ProductAdmin extends Component {
 }
 
 ProductAdmin.propTypes = {
+  countries: PropTypes.arrayOf(PropTypes.object),
   editFocus: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
   handleFieldBlur: PropTypes.func,
   handleFieldChange: PropTypes.func,

diff --git a/imports/plugins/included/product-admin/client/containers/productAdminContainer.js b/imports/plugins/included/product-admin/client/containers/productAdminContainer.js
@@ -4,6 +4,7 @@ import { Reaction } from "/client/api";
 import { composeWithTracker } from "/lib/api/compose";
 import { ReactionProduct } from "/lib/api";
 import { Tags, Media, Templates } from "/lib/collections";
+import { Countries } from "/client/collections";
 import { ProductAdmin } from "../components";
 
 class ProductAdminContainer extends Component {
@@ -144,13 +145,16 @@ function composer(props, onData) {
       };
     });
 
+    const countries = Countries.find({}).fetch();
+
     onData(null, {
       editFocus: Reaction.state.get("edit/focus"),
       product: product,
       media,
       tags,
       revisonDocumentIds,
-      templates
+      templates,
+      countries
     });
   } else {
     onData(null, {});