groups of articles now shown on ribica.ba/group/1/, background is in cloudinary

front-ui/app/actions/itemActions.js

@@ -31,6 +31,13 @@ var ItemActions = {
       actionType : ItemConstants.LOAD_BSI_FOR_SECTION,
       sectionId: sectionId
     });
+  },
+
+  loadBestSellingItemsForGroup: function(groupId) {
+    AppDispatcher.handleAction({
+      actionType : ItemConstants.LOAD_BSI_FOR_ITEM_GROUP,
+      groupId: groupId
+    });
   }
 };
 

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

@@ -0,0 +1,44 @@
+var React = require('react');
+var ItemList = require('./itemList');
+var ItemStore = require('../../stores/itemStore.js');
+var ItemActions = require('../../actions/itemActions.js');
+var ItemCollection = require('../../models/itemCollection');
+var NavigationStore = require('../../stores/navigationStore.js');
+
+var AllItemsInGroup = React.createClass({
+
+  render: function() {  
+      return (
+        <ItemList items={this.state.items} />
+        );
+  },
+
+    // Add change listeners to stores
+    componentDidMount: function() {
+      ItemActions.loadBestSellingItemsForGroup(NavigationStore.getGroupIdFromUrl());
+      ItemStore.addChangeListener(this._onChange);
+    },
+
+
+    componentWillUnmount: function () {
+      ItemStore.removeChangeListener(this._onChange);
+    },
+
+
+    getInitialState: function() {
+      return {
+          items: ItemStore.getItemsForGroup()
+        }
+    },
+
+
+    _onChange: function () {
+      if (this.isMounted()) {
+        this.setState({
+          items: ItemStore.getItemsForGroup()
+        });
+      }
+    },
+});
+
+module.exports = AllItemsInGroup; 

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

@@ -0,0 +1,22 @@
+var React = require('react'),
+    Router = require('react-router'),
+    RouteHandler = Router.RouteHandler,
+    AllItemsInGroup = require('../items/allItemsInGroup');
+
+var ItemGroupPage = React.createClass({
+    render : function() {
+        return (
+            <div>
+
+            <div className='col-md-2'> 
+                
+            </div>
+            <div className='col-md-10'>
+                <AllItemsInGroup />
+            </div>
+            </div>
+            )
+    }
+});
+
+module.exports = ItemGroupPage;

front-ui/app/constants/itemConstants.js

@@ -4,5 +4,6 @@ var keyMirror = require('react/lib/keyMirror');
 module.exports = keyMirror({
   LOAD_FOR_FRONTPAGE: null,
   LOAD_BSI_FOR_SECTION: null,
+  LOAD_BSI_FOR_ITEM_GROUP: null,
   LOAD_BY_CATEGORY: null
 });

front-ui/app/css/main.css

@@ -1,6 +1,6 @@
 body {
     /*background-image: url(https://res.cloudinary.com/lfvt7ps2n/image/upload/v1424608718/http_diapers.q-assets.com_images_body_bg_towkjs.gif);*/
-    background-image : url(http://www.windeln.de/resources/img/bg.svg);
+    background-image : url(https://res.cloudinary.com/lfvt7ps2n/image/upload/v1427091632/http_www.windeln.de_resources_img_bg_s76hro.svg);
     font-family: Arial, Helvetica, sans-serif;
     font-size: 12px;
     height:100%;

front-ui/app/models/itemCollection.js

@@ -31,7 +31,7 @@ var ItemCollection = Backbone.Collection.extend({
         this.offset = offset;
     },
 
-    classificationTypeUrlParts: ['', 'section', 'category', 'sub_category'],
+    classificationTypeUrlParts: ['', 'section', 'category', 'sub_category', 'item_group'],
 
     setClassificationType: function(type) {
         this.classificationType = type;

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 ItemGroupPage = require('./components/items/itemGroupPage');
 var CartPage = require('./components/cart/cartPage');
 var CheckoutPage = require('./components/cart/checkoutPage');
 var RootApp = require('./components/rootApp');
@@ -25,6 +26,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='grupa' path="grupa/:id/*" handler={ItemGroupPage} />
       <Route name='korpa' path="/korpa" handler={CartPage} />
       <Route name='dostava' path="/dostava" handler={CheckoutPage} />
       <Route name='registracija' path="/registracija" handler={Register} />

front-ui/app/stores/itemStore.js

@@ -9,7 +9,8 @@ var _ = require('underscore');
 var _items = new ItemCollection(),
     _itemWithDetails = new ItemWithDetails(),
     _bestSellingForSection = new ItemCollection(),
-    _itemsByCategory = new ItemCollection();
+    _itemsByCategory = new ItemCollection(),
+    _bestSellingForGroup = new ItemCollection();
 
 
 var loadItemsForFrontpage = function() {
@@ -93,6 +94,22 @@ var fetchBestSellingItemsForSection = function(sectionId) {
 };
 
 
+var fetchBestSellingItemsForGroup = function(groupId) {
+  console.log('getting group', groupId);
+    var items = _bestSellingForGroup;
+    items.setClassificationType(4);
+    items.setClassificationId(groupId);
+    items.setLimit(30);
+    items.setOffset(0);
+
+    items.fetch({
+      success: function() {
+        ItemStore.emitChange();
+      }
+    });
+};
+
+
 // Extend ItemStore with EventEmitter to add eventing capabilities
 var ItemStore = _.extend({}, EventEmitter.prototype, {
 
@@ -108,6 +125,10 @@ var ItemStore = _.extend({}, EventEmitter.prototype, {
         return _itemWithDetails;
     },
 
+    getItemsForGroup: function () {
+        return _bestSellingForGroup;
+    },
+
 
     // Return All Items
     getItems: function() {
@@ -148,6 +169,10 @@ AppDispatcher.register(function(payload) {
             fetchBestSellingItemsForSection(action.sectionId);
             break;
 
+        case ItemConstants.LOAD_BSI_FOR_ITEM_GROUP:
+            fetchBestSellingItemsForGroup(action.groupId);
+            break;
+
         case ItemConstants.LOAD_FOR_FRONTPAGE:
             loadItemsForFrontpage();
             break;

front-ui/app/stores/navigationStore.js

@@ -5,10 +5,24 @@ var NavigationConstants = require('../constants/navigationConstants')
 var _ = require('underscore');
 
 
+
+
+var getGroupIdFromUrl = function() {
+    console.log("yeee" , match);
+    // ugly but it seems to me that
+    // router does not want to expose its
+    // state (for phylosophical reasons)
+    var url = document.URL;
+    var itemIdRegex = /grupa\/(\d+)\//g;
+    var match = itemIdRegex.exec(url);
+    console.log(match);
+    return match[1];
+};
+
 // Extend ItemStore with EventEmitter to add eventing capabilities
 var NavigationStore = _.extend({}, EventEmitter.prototype, {
 
- 
+  getGroupIdFromUrl: getGroupIdFromUrl,
 
   // Emit Change event
   emitChange: function() {
@@ -29,6 +43,8 @@ var NavigationStore = _.extend({}, EventEmitter.prototype, {
 });
 
 
+
+
 // Register callback with AppDispatcher
 NavigationStore.dispatchToken = AppDispatcher.register(function(payload) {
   var action = payload.action;