cart display works but it's far from finished

front-api/controllers/cart.rb

@@ -31,3 +31,15 @@ update_cart_item = ->() {
 }
 put '/cart/item', &update_cart_item
 post '/cart/item', &update_cart_item
+
+
+# gets list of items in cart without count
+get '/cart/item/display' do 
+  cart = Cart.find_or_create(anonymous_id, -1)
+  item_ids = cart.item_in_carts.map do |x|
+   x.item_id
+  end
+  items = []
+  items = Item.find(item_ids) if cart.item_in_carts.length > 0 
+  prepare_items_for_mass_display(items)
+end

front-api/controllers/item.rb

@@ -71,9 +71,12 @@ get '/item/sub_category/:sub_category_id/offset/:offset/limit/:limit' do |sub_ca
 end
 
 # gets list of items in cart without count
-get '/item/cart' do |cart|
+get '/cart/item_details' do 
-  cart = Cart.find_or_create(anonymous_id, -1).to_json
+  cart = Cart.find_or_create(anonymous_id, -1)
-  item_ids = cart.item_in_carts.map ->(x) { x.item_id }
+  item_ids = cart.item_in_carts.map do |x|
-  items = Item.find(item_ids)
+   x.item_id
+  end
+  items = []
+  items = Item.find(item_ids) if cart.item_in_carts.length > 0 
   prepare_items_for_mass_display(items)
 end

front-api/models/item.rb

@@ -3,10 +3,14 @@ class Item < ActiveRecord::Base
   has_many :multi_media_descriptions
   belongs_to :sub_category
 
+  attr_accessor :count # used for cart
+  def attributes
+    super.merge('count' => self.count)
+  end
+
   # TODO: change "best selling" algorithm when get some data - currently it's only sorted by earnings
   scope :best_selling, -> (offset, limit) { where(:on_display => true).order("(list_price - current_input_price) DESC").limit(limit).offset(offset) }
   scope :best_selling_in_sub_category, -> (sub_category_id, offset, limit) {  best_selling(offset, limit).where(sub_category_id: sub_category_id) }
   scope :best_selling_in_category, -> (category_id, offset, limit) {  best_selling(offset, limit).joins( sub_category: [:category] ).where(["category_id = ?", category_id]) }
   scope :best_selling_in_section, -> (section_id, offset, limit) {  best_selling(offset, limit).joins( sub_category: [category: [ :section ]] ).where( ["section_id = ?", section_id] ) }
-
 end

front-ui/app/actions/navigationActions.js

@@ -50,6 +50,13 @@ var NavigationActions = {
     });
   },
 
+  goToCart: function() {
+     AppDispatcher.handleAction({
+      actionType: NavigationConstants.CHANGE_URL,
+      url: '/korpa'
+    });
+  }
+
 
 };
 

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

@@ -1,6 +1,7 @@
 var React = require('react');
 var CartStore = require('../../stores/cartStore.js');
 var CartActions = require('../../actions/cartActions.js');
+var NavigationActions = require('../../actions/navigationActions.js');
 
 
 
@@ -15,7 +16,7 @@ var CartIcon = React.createClass({
   	  var textNotificationStyle = (this.state.count > 0)  ? { display: 'inline-block'} : { display: 'none'} ;
 
       return (
-      	  <div className="shopping-cart-icon">
+      	  <div className="shopping-cart-icon" onClick={this._onClick}>
           	<i style={cartStyle} className="fa fa-shopping-cart"></i>
           	<div style={textNotificationStyle} className="shopping-cart-notification-text">{this.state.count}</div>
           </div>
@@ -42,6 +43,10 @@ var CartIcon = React.createClass({
 
     componentWillUnmount: function () {
       CartStore.removeChangeListener(this._onChange);
+    },
+
+    _onClick: function() {
+      NavigationActions.goToCart();
     }
 
 

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

@@ -1,5 +1,8 @@
 var React = require('react'),
     CartStore = require('../../stores/cartStore'),
+    AddToCart = require('../cart/addToCart'),
+    CartActions = require('../../actions/cartActions'),
+    SingleItem = require('../items/singleItem'),
     AddToCart = require('../cart/addToCart');
 
 var Router = require('react-router');
@@ -9,11 +12,19 @@ var ItemWithDetailsPage = React.createClass({
 
     render: function() {
 
+      var displayedItems = this.state.items.map(function (i) {
+        return (
+           <div key={i.get('id')} className="row">
+              <div className="col-md-3"><SingleItem item={i} /> </div>
+              <div className="col-md-6"> <AddToCart itemId={i.get('id')} /> </div>
+           </div> 
+          )
+      });
+
       return (
      
-        <div className="cart-page row-fluid center">
+        <div className="cart-page center">
-          This is the cart page!
+           {displayedItems}
-         
         </div>
         );       
 
@@ -22,7 +33,7 @@ var ItemWithDetailsPage = React.createClass({
     // Add change listeners to stores
     componentDidMount: function() {
       CartStore.addChangeListener(this._onChange);
-      
+      CartActions.load();
     },
 
     componentWillUnmount: function () {
@@ -30,15 +41,14 @@ var ItemWithDetailsPage = React.createClass({
     },
 
     _onChange: function () {
-
          if (this.isMounted()) {
-             this.setState(ItemDetailsStore.getState());
+             this.setState(CartStore.getWholeCartState());
         }
 
     },
 
     getInitialState: function () {
-      return CartStore.getState();
+      return CartStore.getWholeCartState();
     }
 
 });

front-ui/app/css/cart.css

@@ -6,6 +6,7 @@
 	display: inline-block;
 	position: relative;
 	border-radius: 25px;
+	cursor: pointer;
 }
 
 .shopping-cart-notification-text {

front-ui/app/models/itemCollection.js

@@ -4,55 +4,74 @@ var Backbone = require('backbone'),
 
 var ItemCollection = Backbone.Collection.extend({
 
-  addFilter : function(name, value) {
+    initialize: function() {
-    this.filters = this.filters || {};
+        $.ajaxPrefilter(
-    this.filters[name] = value;
+            function(options, originalOptions, jqXHR) {
-  },
+                options.xhrFields = {
-    clearFilter: function() {
+                    withCredentials: true
-      this.filters = [];
+                }
+            }
+        );
     },
-	setLimit: function(limit) {
+
+    addFilter: function(name, value) {
+        this.filters = this.filters || {};
+        this.filters[name] = value;
+    },
+    clearFilter: function() {
+        this.filters = [];
+    },
+    setLimit: function(limit) {
         this.queryLimit = limit;
     },
 
     setOffset: function(offset) {
-    	this.offset = offset;
+        this.offset = offset;
     },
 
-    classificationTypeUrlParts: ['','section','category','sub_category'],
+    classificationTypeUrlParts: ['', 'section', 'category', 'sub_category'],
 
     setClassificationType: function(type) {
-    	this.classificationType = type;
+        this.classificationType = type;
-    } , 
+    },
 
     setClassificationId: function(id) {
-    	this.classificationId = id;
+        this.classificationId = id;
+    },
+
+    setFromCart: function(fromCart) {
+        this.fromCart = fromCart;
     },
 
     model: Item,
     url: function() {
-      var path = '/item'
+        if (this.fromCart === true) {
-        if(this.classificationType > 0) {
+            return Globals.ApiUrl + "/cart/item/display";
-          // eg. http://localhost:4567/item/section/1/offset/0/limit/10
-          var urlPart = this.classificationTypeUrlParts[this.classificationType];
-          path += "/" + urlPart + "/" + this.classificationId;
-        } // else eg. http://localhost:4567/item/offset/0/limit/10
-      path += "/offset/" + this.offset + "/limit/" + this.queryLimit;
-
-      var queryParts = [];
-
-      for(var key in this.filters) {
-        if (this.filters.hasOwnProperty(key)) {
-          queryParts.push(key + '=' + this.filters[key]);
         }
-      }
-      var query = '';
 
-      if (queryParts.length > 0) {
+        var path = '/item';
-        query = '?' + queryParts.join('&');
-      }
 
-      return Globals.ApiUrl + path + query;
+        if (this.classificationType > 0) {
+            // eg. http://localhost:4567/item/section/1/offset/0/limit/10
+            var urlPart = this.classificationTypeUrlParts[this.classificationType];
+            path += "/" + urlPart + "/" + this.classificationId;
+        } // else eg. http://localhost:4567/item/offset/0/limit/10
+        path += "/offset/" + this.offset + "/limit/" + this.queryLimit;
+
+        var queryParts = [];
+
+        for (var key in this.filters) {
+            if (this.filters.hasOwnProperty(key)) {
+                queryParts.push(key + '=' + this.filters[key]);
+            }
+        }
+        var query = '';
+
+        if (queryParts.length > 0) {
+            query = '?' + queryParts.join('&');
+        }
+
+        return Globals.ApiUrl + path + query;
     }
 });
 

front-ui/app/router.js

@@ -8,6 +8,7 @@ var ItemWithDetailsPage = require('./components/items/itemWithDetailsPage');
 var ItemList = require('./components/items/itemList');
 var SectionsListComponent = require('./components/shared/sectionsListComponent');
 var AllItems = require('./components/items/allItems');
+var CartPage = require('./components/cart/cartPage');
 var RootApp = require('./components/rootApp');
 var StartPage = require('./components/startPage/startPage');
 var ByCategory = require('./components/browsing/byCategory');
@@ -18,6 +19,7 @@ var routes = (
     <Route name='app' path='/' handler={RootApp}>
       <Route name='sekcija' path='sekcija/:id/:name' handler={BySection} />
       <Route name='artikal' path="artikal/:id/*" handler={ItemWithDetailsPage} />
+      <Route name='korpa' path="/korpa" handler={CartPage} />
       <Route name='byCat' path="sekcija/:sekcijaName/kategorija/:id/*" handler={ByCategory} />
       <DefaultRoute handler={StartPage}/>
     </Route>

front-ui/app/stores/cartStore.js

@@ -4,11 +4,15 @@ var CartConstants = require('../constants/cartConstants');
 var CartActions = require('../actions/cartActions');
 var ItemInCart = require('../models/itemInCart');
 var ItemInCartCollection = require('../models/itemInCartCollection');
+var ItemCollection = require('../models/itemCollection');
+
 var _ = require('underscore');
 
 var states = {}
 
 var _itemsInCart = new ItemInCartCollection();
+var _itemsForDisplay = new ItemCollection();
+_itemsForDisplay.setFromCart(true);
 
 
 var loadCart = function() {
@@ -21,9 +25,16 @@ var loadCart = function() {
             }
             CartActions.dataLoaded();
         }
+    });
+
+    _itemsForDisplay.fetch({
+         success: function() {
+            CartActions.dataLoaded();
+        }
     })
 };
 
+
 var addItem = function(itemId) {
     
     var state = states[itemId] || new ItemInCart({
@@ -56,6 +67,10 @@ var saveCartStateForItem = function(itemId) {
         }
     });
 }
+/*
+var syncCountsWithDetails = function() {
+    for(i in )
+}*/
 
 
 
@@ -86,7 +101,8 @@ var CartStore = _.extend({}, EventEmitter.prototype, {
         }; 
 
         var state = {
-            count: numberOfItems
+            count: numberOfItems,
+            items: _itemsForDisplay
         };
         return state;
     },
@@ -129,10 +145,10 @@ AppDispatcher.register(function(payload) {
             takeItemOut(action.itemId);
             break;
         case CartConstants.CART_DATA_LOADED:
-            // just emit change
+            // do nothing - jsut emmit change
             break;
         case CartConstants.SAVE_CART_STATE_FOR_ITEM:
-            saveCartStateForItem(action.itemId);
+           // saveCartStateForItem(action.itemId);
             break;
         default:
             return true;