added validation for delivery destination

front-ui/app/components/cart/checkoutPage.js

@@ -5,7 +5,8 @@ var React = require('react'),
     NavigationActions = require('../../actions/navigationActions'),
     SingleItem = require('../items/singleItem'),
     Globals = require('../../globals'),
-    CartTotal = require('./cartTotal');
+    CartTotal = require('./cartTotal'), 
+    RibicaFormError = require('../shared/ribicaFormError');
     
 
 var Router = require('react-router');
@@ -21,8 +22,10 @@ var CheckoutPage = React.createClass({
             <fieldset>
                   <legend>Dostava</legend>
                   <div className="form-group">
+
                         <label className="col-md-4 control-label" htmlFor="name">Prezime i Ime</label>
                         <div className="col-md-4">
+                              <RibicaFormError componentName="name" errorMessagesObject={this.state.deliveryDestinationErrors} />
                               <input id="name" name="name" type="text" placeholder="Prezime Ime" className="form-control input-md" required="" value={this.state.deliveryDestination.get('name')}  onChange={this._onFieldChange} />
                               <span className="help-block">ime osobe koja prima pošiljku</span>
                         </div>
@@ -30,6 +33,7 @@ var CheckoutPage = React.createClass({
                   <div className="form-group">
                         <label className="col-md-4 control-label" htmlFor="name">Adresa</label>
                         <div className="col-md-4">
+                              <RibicaFormError componentName="address" errorMessagesObject={this.state.deliveryDestinationErrors} />
                               <input id="address" name="address" type="text" placeholder="Ulica i broj" className="form-control input-md" required="" value={this.state.deliveryDestination.get('address')}  onChange={this._onFieldChange} />
                               <span className="help-block">adresa na koju će roba biti isporučena</span>
                         </div>
@@ -38,6 +42,7 @@ var CheckoutPage = React.createClass({
             <div className="form-group">
                   <label className="col-md-4 control-label" htmlFor="place">Mjesto</label>
                   <div className="col-md-4">
+                        <RibicaFormError componentName="place" errorMessagesObject={this.state.deliveryDestinationErrors} />
                         <select id="place" name="place" className="form-control" value={this.state.deliveryDestination.get('place')}  onChange={this._onFieldChange} >
                               <option value=" 71000">Sarajevo</option>
                               <option value=" 71103">Sarajevo, Centar</option>
@@ -66,7 +71,7 @@ var CheckoutPage = React.createClass({
                               <option value="76204">Bijela</option>
                               <option value="76300">Bijeljina</option>
                               <option value="73263">Bijelo Brdo</option>
-                              <option value="89230">Bileca</option> ++++++++
+                              <option value="89230">Bileca</option> 
                               <option value="72248">Biljesevo</option>
                               <option value="88407">Bjelimici</option>
                               <option value="88201">Blagaj</option>
@@ -569,6 +574,7 @@ var CheckoutPage = React.createClass({
             <div className="form-group">
                   <label className="col-md-4 control-label" htmlFor="phone">Telefon</label>
                   <div className="col-md-4">
+                        <RibicaFormError componentName="phone" errorMessagesObject={this.state.deliveryDestinationErrors} />
                         <div className="input-group">
                               <span className="input-group-addon">06</span>
                               <input id="phone" name="phone" className="form-control" placeholder="1 222 333" type="text" required="" value={this.state.deliveryDestination.get('phone')}  onChange={this._onFieldChange}  />
@@ -579,6 +585,7 @@ var CheckoutPage = React.createClass({
             <div className="form-group">
                   <label className="col-md-4 control-label" htmlFor="email">E - mail</label>
                   <div className="col-md-4">
+                        <RibicaFormError componentName="email" errorMessagesObject={this.state.deliveryDestinationErrors} />
                         <input id="email" name="email" type="text" placeholder="ime@nekimail.com" className="form-control input-md" required="" value={this.state.deliveryDestination.get('email')}  onChange={this._onFieldChange}  />
                         <span className="help-block">E - mail adresa na koju će vam biti poslano obavještenje o narudžbi</span>
                   </div>
@@ -592,7 +599,7 @@ var CheckoutPage = React.createClass({
             <div className="form-group">
                   <label className="col-md-4 control-label" htmlFor="order"></label>
                   <div className="col-md-8">
-                        <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} />  <button id="order" name="order" className="btn btn-success" onClick={this._onOrderClick}>Naruči</button>
+                        <CartTotal items={this.state.items} itemCounts={this.state.itemCounts} />  <button id="order" name="order" className="btn btn-success" disabled={!this.state.isDeliveryDestinationValid} onClick={this._onOrderClick}>Naruči</button>
                   </div>
             </div>
       </fieldset>

front-ui/app/components/items/singleItem.js

@@ -33,8 +33,7 @@ var SingleItem = React.createClass({
 
     itemClick: function(e) {
       NavigationActions.goToItemDetails(this.props.item);
-      console.log(this.props.item)
-      
+      console.log(this.props.item)      
     }
 });
 

front-ui/app/components/shared/mixins/ribicaValidationMixin (mehmedpasa's conflicted copy 2015-03-07).js

@@ -1,76 +0,0 @@
-var RibicaValidationMixin = {
-  _updateState: function(prop, value, callback) {
-    var newState = {};
-    newState[prop] = value;
-    this.setState(newState, function(){
-      if(callback) {
-        callback();
-      }
-    }.bind(this));
-  },
-  _validate: function(prop, value) {
-    if(this.validations && this.validations[prop]) {
-      var cb = function(err, revalidateFields) {
-        var errors = this.state.errors || {};
-        if (err !== undefined) {
-          if(err.length > 0) {
-            errors[prop] = err;
-          } else {
-            delete errors[prop];
-          }
-        } else {
-          delete errors[prop];
-        }
-        this.setState({errors: errors});
-        if (revalidateFields) {
-          for(var i = 0; i < revalidateFields.length; i++) {
-            this.validateField(revalidateFields[i], this.state[revalidateFields[i]]);
-          }
-        }
-      }.bind(this);
-
-      var immediateErrors = this.validations[prop](value, cb);
-      cb(immediateErrors);
-    }
-  },
-  handleChange: function(prop) {
-    return function(event) {
-      event.preventDefault();
-      var target = event.target;
-      this._updateState(prop, target.value, function(){
-        this._validate(prop, target.value);
-      }.bind(this));
-    }.bind(this);
-
-  },
-  getValidationMessages:function(prop) {
-    var errors = this.state.errors || {};
-    return (errors[prop] || []);
-  },
-  validateField: function(field) {
-    this._validate(field, this.state[field]);
-  },
-  validate: function() {
-    for (var key in this.state) {
-      if (this.state.hasOwnProperty(key)) {
-        this._validate(key, this.state[key]);
-      }
-    }
-    return this.isValid();
-  },
-  isValid: function() {
-    var errors = this.state.errors || {};
-    return Object.keys(errors).length === 0;
-  },
-  componentDidMount : function(){
-    this.setState({errors: {}});
-    if (this.validations) {
-      var self = this;
-      this.validations.getState = function() {
-        return self.state;
-      };
-    }
-  },
-};
-
-module.exports = RibicaValidationMixin;

front-ui/app/components/shared/ribicaFormError.js

@@ -0,0 +1,17 @@
+var React = require('react');
+
+
+var RibicaFormError = React.createClass({
+    render: function() {
+            var errorMessages = this.props.errorMessagesObject || {};
+            var componentName = this.props.componentName;
+            var message = errorMessages[componentName];
+            if (message !== undefined && message !== null && message !== "") {
+            return(<div className='error-message'>{message}</div>)
+            }
+            else return (<span></span>);
+    }
+});
+
+
+module.exports = RibicaFormError;