From 0cdf57d4a925f7f3b009843adafb811d1c1f4e3b Mon Sep 17 00:00:00 2001 From: Edin Dazdarevic Date: Sun, 19 Apr 2015 15:58:08 +0200 Subject: [PATCH] sidebar design implemented on search by category and by section page --- .../app/components/browsing/byCategory.js | 14 +- front-ui/app/components/browsing/bySection.js | 193 ++++++++++-------- front-ui/app/models/section.js | 3 +- front-ui/app/stores/sectionStore.js | 11 +- 4 files changed, 123 insertions(+), 98 deletions(-) diff --git a/front-ui/app/components/browsing/byCategory.js b/front-ui/app/components/browsing/byCategory.js index fcc5100..073629d 100644 --- a/front-ui/app/components/browsing/byCategory.js +++ b/front-ui/app/components/browsing/byCategory.js @@ -61,9 +61,9 @@ var ByCategory = React.createClass({ var self = this; return (
-
-
{this.state.category.get('name')}
-
Podkategorije
+
    {(this.state.category.get('sub_categories') || []).map(function(sc) { return (
  • {sc.name}
    • ) @@ -71,10 +71,12 @@ var ByCategory = React.createClass({
- +
-
+
@@ -82,7 +84,7 @@ var ByCategory = React.createClass({ Number of items in this category: {this.state.items.length}
- +
diff --git a/front-ui/app/components/browsing/bySection.js b/front-ui/app/components/browsing/bySection.js index bf88606..164d506 100644 --- a/front-ui/app/components/browsing/bySection.js +++ b/front-ui/app/components/browsing/bySection.js @@ -1,100 +1,121 @@ var React = require('react'), - 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'), - LinkBanner = require('../linkBanner/linkBanner'), - Category = require('../../models/category'); +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'), +LinkBanner = require('../linkBanner/linkBanner'), +Category = require('../../models/category'); 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 (
+ getInitialState : function() { + return { + items: (new ItemCollection()), + section : (new Section()) + }; + }, + render : function() { + var s ={ float: 'left'}; + var self = this; + return ( +
-
- Here goes section for refining search, by section -
-
- -
- Najprodavanije u sekciji {this.state.section.get('name')} -
- -
Kategorije
-
- {(this.state.section.get('categories') || []).map(function(category){ - return ( -
- - - - -
{category.name}
- -
    - {category.sub_categories.map(function(sc) { - return (
  • {sc.name}
    • ) - })} -
- -
- ) - })} +
+
    + {(this.state.section.get('categories')).map(function(category) { + return (
  • {category.name}
    • ) + })} +
+
+ + +
+ Najprodavanije u sekciji {this.state.section.get('name')} +
+ + + {/* +
Kategorije
+
+ {(this.state.section.get('categories') || []).map(function(category){ + return ( +
+ + + + +
+ {category.name} +
+ +
    + {category.sub_categories.map(function(sc) { + return ( +
  • + {sc.name} +
    • + ) + })} +
+ +
+ ) + })} +
*/}
-
) - }, - onCategoryClick: function(category, section) { - NavigationActions.goToCategory(new Category(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); +
+ ) + }, + onCategoryClick: function(category, section) { + NavigationActions.goToCategory(new Category(category), section); - SectionStore.addChangeListener(this._onSectionChange); - ItemStore.addChangeListener(this._onChange); - }, - componentWillUnmount: function() { - SectionStore.removeChangeListener(this._onSectionChange); - ItemStore.removeChangeListener(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()}); - } + }, + 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); + }, + componentWillUnmount: function() { + SectionStore.removeChangeListener(this._onSectionChange); + ItemStore.removeChangeListener(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()}); + } + } }); module.exports = BySection; diff --git a/front-ui/app/models/section.js b/front-ui/app/models/section.js index a1453bf..c57c86f 100644 --- a/front-ui/app/models/section.js +++ b/front-ui/app/models/section.js @@ -4,7 +4,8 @@ var Globals = require('../globals'); var Section = Backbone.Model.extend({ urlRoot : Globals.ApiUrl + '/section', defaults : { - name: '' + name: '', + categories: [] } }); diff --git a/front-ui/app/stores/sectionStore.js b/front-ui/app/stores/sectionStore.js index d2614d7..4fa8924 100644 --- a/front-ui/app/stores/sectionStore.js +++ b/front-ui/app/stores/sectionStore.js @@ -12,16 +12,16 @@ var sectionState = { }; -var loadSections = function() { +var loadSections = function() { var sections = new SectionCollection(); sections.fetch({success: function() { sectionState.sections = sections.models; // change will be called automatically when // 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. // "true philosophy" would be to run another "data arrived" action - SectionStore.emitChange(); + SectionStore.emitChange(); }}); }; @@ -30,6 +30,7 @@ var loadSectionDetails = function(sectionId) { section.fetch({ success: function() { _sectionDetails = section; + console.log('section details', _sectionDetails); SectionStore.emitChange(); } }); @@ -43,7 +44,7 @@ var setHovered = function(id) { // Extend SectionStore with EventEmitter to add eventing capabilities var SectionStore = _.extend({}, EventEmitter.prototype, { - // Return Single Item With Details + // Return Single Item With Details getState: function() { return sectionState; }, @@ -77,7 +78,7 @@ AppDispatcher.register(function(payload) { // Respond to SELECT_ITEM action case SectionConstants.LOAD_SECTIONS: - loadSections(); + loadSections(); break; case SectionConstants.SET_SECTION_HOVER: