senaduka/old-ribica
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cart display works but it's far from finished

Browse Source
This commit is contained in:
Senad Uka
2015-02-13 06:51:58 +01:00
parent b0469d634e
commit 62f6249e4c
10 changed files with 130 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
front-api/controllers/cart.rb
View File

@@ -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

11
front-api/controllers/item.rb
View File

@@ -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|
cart = Cart.find_or_create(anonymous_id, -1).to_json
item_ids = cart.item_in_carts.map ->(x) { x.item_id }
items = Item.find(item_ids)
get '/cart/item_details' 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

6
front-api/models/item.rb
View File

@@ -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

7
front-ui/app/actions/navigationActions.js
View File

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

7
front-ui/app/components/cart/cartIcon.js
View File

@@ -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();
}

24
front-ui/app/components/cart/cartPage.js
View File

@@ -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">
This is the cart page!
<div className="cart-page center">
{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();
}
});

1
front-ui/app/css/cart.css
View File

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

89
front-ui/app/models/itemCollection.js
View File

@@ -4,56 +4,75 @@ var Backbone = require('backbone'),
var ItemCollection = Backbone.Collection.extend({
addFilter : function(name, value) {
this.filters = this.filters || {};
this.filters[name] = value;
},
clearFilter: function() {
this.filters = [];
initialize: function() {
$.ajaxPrefilter(
function(options, originalOptions, jqXHR) {
options.xhrFields = {
withCredentials: true
}
}
);
},
setLimit: function(limit) {
this.queryLimit = 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.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]);
url: function() {
if (this.fromCart === true) {
return Globals.ApiUrl + "/cart/item/display";
}
}
var query = '';
if (queryParts.length > 0) {
query = '?' + queryParts.join('&');
}
var path = '/item';
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;
}
});
module.exports = ItemCollection;
module.exports = ItemCollection;

2
front-ui/app/router.js
View File

@@ -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>

22
front-ui/app/stores/cartStore.js
View File

@@ -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;