fixed conflict

front-api/db/migrate/20150131134330_add_image_to_categories.rb

@@ -0,0 +1,5 @@
+class AddImageToCategories < ActiveRecord::Migration
+  def change
+    add_column :categories, :image_url, :string
+  end
+end

front-api/db/schema.rb

@@ -11,6 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
+
 ActiveRecord::Schema.define(version: 20150131061353) do
 
   # These are extensions that must be enabled in order to support this database
@@ -19,6 +20,7 @@ ActiveRecord::Schema.define(version: 20150131061353) do
   create_table "categories", force: :cascade do |t|
     t.string  "name"
     t.integer "section_id"
+    t.string  "image_url"
   end
 
   create_table "items", force: :cascade do |t|
@@ -55,10 +57,8 @@ ActiveRecord::Schema.define(version: 20150131061353) do
   end
 
   create_table "sub_categories", force: :cascade do |t|
-    t.string   "name"
+    t.string  "name"
-    t.integer  "category_id"
+    t.integer "category_id"
-    t.datetime "created_at",  null: false
-    t.datetime "updated_at",  null: false
   end
 
   create_table "units", force: :cascade do |t|

front-ui/app/actions/itemActions.js

@@ -8,15 +8,21 @@ var ItemActions = {
   loadFrontPageItems: function() {
      AppDispatcher.handleAction({
       actionType: ItemConstants.LOAD_FOR_FRONTPAGE
-    })
+    });
   },
 
   loadItemWithDetails: function() {
      AppDispatcher.handleAction({
       actionType: ItemConstants.LOAD_ITEM_WITH_DETAILS,
-    })
+    });
-  }
+  },
 
+  loadBestSellingItemsForSection: function(sectionId) {
+    AppDispatcher.handleAction({
+      actionType : ItemConstants.LOAD_BSI_FOR_SECTION,
+      sectionId: sectionId
+    });
+  }
 };
 
 module.exports = ItemActions;

front-ui/app/actions/sectionActions.js

@@ -15,13 +15,20 @@ var SectionActions = {
     AppDispatcher.handleAction({
       actionType: SectionConstants.SET_SECTION_HOVER,
       section: section
-    })
+    });
   },
 
   unsetSectionHover: function() {
     AppDispatcher.handleAction({
       actionType: SectionConstants.UNSET_SECTION_HOVER
-    })
+    });
+  },
+
+  loadSectionDetails: function(sectionId) {
+    AppDispatcher.handleAction({
+      actionType: SectionConstants.LOAD_SECTION_DETAILS,
+      sectionId: sectionId
+    });
   }
 
 };

front-ui/app/components/browsing/bySection.js

@@ -1,18 +1,88 @@
 var React = require('react'),
-    Router = require('react-router');
+    Router = require('react-router'),
+    ItemActions = require('../../actions/itemActions.js'),
+    ItemStore = require('../../stores/itemStore'),
+    NavigationStore = require('../../stores/navigationStore'),
+    ItemList = require('../items/itemList'),
+    ItemCollection = require('../../models/itemCollection'),
+    SectionStore = require('../../stores/sectionStore'),
+    SectionActions = require('../../actions/sectionActions.js'),
+    NavigationActions = require('../../actions/navigationActions'),
+    Section = require('../../models/section');
 
 var BySection = React.createClass({
   mixins: [Router.State],
+    getInitialState : function() {
+      return {
+        items: (new ItemCollection()),
+        section : (new Section())
+      };
+    },
     render : function() {
+      var s ={ float: 'left'};
+      var self = this;
       return ( <div>
 
         <div className='col-md-2'> 
         Here goes section for refining search, by section
         </div>
         <div className='col-md-10'>
-        <h2> Welcome to section {this.getParams().id} </h2>
+        <div className='h3'>
+                 Najprodavanije u sekciji {this.state.section.get('name')} 
+</div>
+        <ItemList items={this.state.items} />
+        <div className='h3'>Kategorije</div>
+        <div>
+        {(this.state.section.get('categories') || []).map(function(category){
+                                                                      return (
+                                                                        <div style={s}>
+                                                                        
+                                                                        <img src={category.image_url || 'http://www.windeln.de/resources/img/content/kat_windelnwickeln.jpg'}/>
+                                                                     <div onClick={self.onCategoryClick.bind(self, category, self.state.section)}>   {category.name}</div>
+                                                                     <ul>
+                                                                     {category.sub_categories.map(function(sc) {
+                                                                                                                 return (<li>{sc.name}</li>)
+                                                                                                               })}
+                                                                     </ul>
+                                                                        
+                                                                        </div>
+                                                                        )
+                                                                    })}
+        </div>
+
         </div>
         </div> )
+    },
+    onCategoryClick: function(category, section) {
+      NavigationActions.goToCategory(category, section);
+       
+    },
+    componentWillReceiveProps: function(nextProps) {
+      var sectionId = this.getParams().id;
+      ItemActions.loadBestSellingItemsForSection(sectionId);
+      SectionActions.loadSectionDetails(sectionId);
+    },
+    componentDidMount: function() {
+      console.log('mounting....');
+      var sectionId = this.getParams().id;
+      ItemActions.loadBestSellingItemsForSection(sectionId);
+      SectionActions.loadSectionDetails(sectionId);
+
+      SectionStore.addChangeListener(this._onSectionChange);
+      ItemStore.addChangeListener(this._onChange);
+    },
+    _onSectionChange: function() {
+      if(this.isMounted()) {
+        this.setState({
+          section: SectionStore.getSectionDetails()
+        });
+      }
+    },
+    _onChange: function() {
+      if(this.isMounted()) {
+        console.log('items store changed! by section');
+        this.setState({items: ItemStore.getBestSellingForSection()});
+      }
     }
 });
 

front-ui/app/constants/itemConstants.js

@@ -2,5 +2,6 @@ var keyMirror = require('react/lib/keyMirror');
 
 // Define action constants
 module.exports = keyMirror({
-  LOAD_FOR_FRONTPAGE: null
+  LOAD_FOR_FRONTPAGE: null,
+  LOAD_BSI_FOR_SECTION: null
 });

front-ui/app/constants/sectionConstants.js

@@ -4,5 +4,6 @@ var keyMirror = require('react/lib/keyMirror');
 module.exports = keyMirror({
   LOAD_SECTIONS: null,
   SET_SECTION_HOVER: null,
-  UNSET_SECTION_HOVER: null
+  UNSET_SECTION_HOVER: null,
+  LOAD_SECTION_DETAILS: null
 });

front-ui/app/models/itemCollection.js

@@ -18,7 +18,7 @@ var ItemCollection = Backbone.Collection.extend({
     	this.classificationType = type;
     } , 
 
-    setClassificatonId: function(id) {
+    setClassificationId: function(id) {
     	this.classificationId = id;
     }, 
 

front-ui/app/stores/itemStore.js

@@ -7,7 +7,8 @@ var _ = require('underscore');
 
 // Define initial data points
 var _items = new ItemCollection(),
-    _itemWithDetails = new ItemWithDetails();
+    _itemWithDetails = new ItemWithDetails(),
+    _bestSellingForSection = new ItemCollection();
 
 
 var loadItemsForFrontpage = function() {
@@ -49,10 +50,30 @@ var fetchItemWithDetails = function() {
     }
 }
 
+var fetchBestSellingItemsForSection = function(sectionId) {
+  console.log('getting section', sectionId);
+    var items = _bestSellingForSection;
+    items.setClassificationType(1);
+    items.setClassificationId(sectionId);
+    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, {
 
+    getBestSellingForSection: function() {
+
+      return _bestSellingForSection;
+    },
     // item with details
     getLoadedItemWithDetails: function() {
         return _itemWithDetails;
@@ -94,6 +115,9 @@ AppDispatcher.register(function(payload) {
             fetchItemWithDetails();
             break;
 
+        case ItemConstants.LOAD_BSI_FOR_SECTION:
+            fetchBestSellingItemsForSection(action.sectionId);
+            break;
 
         case ItemConstants.LOAD_FOR_FRONTPAGE:
             loadItemsForFrontpage();

front-ui/app/stores/sectionStore.js

@@ -1,27 +1,38 @@
 var AppDispatcher = require('../dispatcher/appDispatcher');
 var EventEmitter = require('events').EventEmitter;
 var SectionCollection = require('../models/sectionCollection');
+var Section = require('../models/section');
 var SectionConstants = require('../constants/sectionConstants');
 var _ = require('underscore');
 
-
+var _sectionDetails = new Section();
 var sectionState = {
-        sections : [],
+  sections : [],
-    hoveredSection : ''
+  hoveredSection : ''
 };
 
 
 var loadSections = function() { 
-      var sections = new SectionCollection();
+  var sections = new SectionCollection();
-      sections.fetch({success: function() {
+  sections.fetch({success: function() {
-        sectionState.sections = sections.models;
+    sectionState.sections = sections.models;
-        // change will be called automatically when
+    // change will be called automatically when
-        // action is run but we need to emit it again
+    // action is run but we need to emit it again
-        // when the data arive 
+    // when the data arive 
-        // it's a bit "unfluxy" but convenient.
+    // it's a bit "unfluxy" but convenient.
-        // "true philosophy" would be to run another "data arrived" action
+    // "true philosophy" would be to run another "data arrived" action
-        SectionStore.emitChange(); 
+    SectionStore.emitChange(); 
-      }});
+  }});
+};
+
+var loadSectionDetails = function(sectionId) {
+  var section = new Section({id : sectionId});
+  section.fetch({
+    success: function() {
+      _sectionDetails = section;
+      SectionStore.emitChange();
+    }
+  });
 };
 
 var setHovered  = function(id) {
@@ -36,23 +47,24 @@ var SectionStore = _.extend({}, EventEmitter.prototype, {
   getState: function() {
     return sectionState;
   },
+    getSectionDetails: function() {
+      return _sectionDetails;
+    },
+    // Emit Change event
+    emitChange: function() {
+      console.log("Emmiting Section change!");
+      this.emit('change');
+    },
 
-  // Emit Change event
+    // Add change listener
-  emitChange: function() {
+    addChangeListener: function(callback) {
-    console.log("Emmiting Section change!");
+      this.on('change', callback);
-    this.emit('change');
+    },
-  },
-
-  // Add change listener
-  addChangeListener: function(callback) {
-    this.on('change', callback);
-  },
-
-  // Remove change listener
-  removeChangeListener: function(callback) {
-    this.removeListener('change', callback);
-  }
 
+    // Remove change listener
+    removeChangeListener: function(callback) {
+      this.removeListener('change', callback);
+    }
 });
 
 
@@ -76,6 +88,10 @@ AppDispatcher.register(function(payload) {
       setHovered('');
       break;
 
+    case SectionConstants.LOAD_SECTION_DETAILS:
+      loadSectionDetails(action.sectionId);
+      break;
+
     default:
       return true;
   }