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

sidebar design implemented on search by category and by section page

Browse Source
This commit is contained in:
Edin Dazdarevic
2015-04-19 15:58:08 +02:00
parent 2f809cfbcf
commit 0cdf57d4a9
4 changed files with 123 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
front-ui/app/components/browsing/byCategory.js
View File

@@ -61,9 +61,9 @@ var ByCategory = React.createClass({
var self = this; var self = this;
return ( return (
<div> <div>
<div className='col-md-2'> <div
<div className='h4'>{this.state.category.get('name')}</div> style={{height: "100%"}}
<div>Podkategorije</div> className="col-lg-2 col-md-2 col-sm-4 col-xs-4 sidebar ">
<ul> <ul>
{(this.state.category.get('sub_categories') || []).map(function(sc) { {(this.state.category.get('sub_categories') || []).map(function(sc) {
return (<li> <a onClick={self.onSCClick.bind(self, sc)}>{sc.name}</a></li>) return (<li> <a onClick={self.onSCClick.bind(self, sc)}>{sc.name}</a></li>)
@@ -74,7 +74,9 @@ var ByCategory = React.createClass({
</div> </div>
<div className='col-md-10'> <div
style={{height: "100%"}}
className="col-lg-10 col-md-10 col-sm-8 col-xs-8 ">
<LinkBanner locationName="category" locationId={Number(this.getParams().id)} /> <LinkBanner locationName="category" locationId={Number(this.getParams().id)} />

185
front-ui/app/components/browsing/bySection.js
View File

@@ -1,100 +1,121 @@
var React = require('react'), var React = require('react'),
Router = require('react-router'), Router = require('react-router'),
ItemActions = require('../../actions/itemActions.js'), ItemActions = require('../../actions/itemActions.js'),
ItemStore = require('../../stores/itemStore'), ItemStore = require('../../stores/itemStore'),
NavigationStore = require('../../stores/navigationStore'), NavigationStore = require('../../stores/navigationStore'),
ItemList = require('../items/itemList'), ItemList = require('../items/itemList'),
ItemCollection = require('../../models/itemCollection'), ItemCollection = require('../../models/itemCollection'),
SectionStore = require('../../stores/sectionStore'), SectionStore = require('../../stores/sectionStore'),
SectionActions = require('../../actions/sectionActions.js'), SectionActions = require('../../actions/sectionActions.js'),
NavigationActions = require('../../actions/navigationActions'), NavigationActions = require('../../actions/navigationActions'),
Section = require('../../models/section'), Section = require('../../models/section'),
LinkBanner = require('../linkBanner/linkBanner'), LinkBanner = require('../linkBanner/linkBanner'),
Category = require('../../models/category'); Category = require('../../models/category');
var BySection = React.createClass({ var BySection = React.createClass({
mixins: [Router.State], mixins: [Router.State],
getInitialState : function() { getInitialState : function() {
return { return {
items: (new ItemCollection()), items: (new ItemCollection()),
section : (new Section()) section : (new Section())
}; };
}, },
render : function() { render : function() {
var s ={ float: 'left'}; var s ={ float: 'left'};
var self = this; var self = this;
return ( <div> return (
<div>
<div className='col-md-2'>
Here goes section for refining search, by section <div
style={{height: "100%"}}
className="col-lg-2 col-md-2 col-sm-4 col-xs-4 sidebar ">
<ul>
{(this.state.section.get('categories')).map(function(category) {
return (<li><a href="#" onClick={self.onCategoryClick.bind(self, category, self.state.section)}>{category.name}</a></li>)
})}
</ul>
</div> </div>
<div className='col-md-10'> <div
style={{height: "100%"}}
className="col-lg-10 col-md-10 col-sm-8 col-xs-8 ">
<LinkBanner locationName="section" locationId={Number(this.getParams().id)} /> <LinkBanner
<div className='h3'> locationName="section"
Najprodavanije u sekciji {this.state.section.get('name')} locationId={Number(this.getParams().id)} />
</div> <div className='h3'>
<ItemList items={this.state.items} /> Najprodavanije u sekciji {this.state.section.get('name')}
<div className='h3'>Kategorije</div> </div>
<div> <ItemList items={this.state.items} />
{(this.state.section.get('categories') || []).map(function(category){
return (
<div style={s}>
<a onClick={self.onCategoryClick.bind(self, category, self.state.section)}> {/*
<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'}/> <a onClick={self.onCategoryClick.bind(self, category, self.state.section)}>
<div>{category.name}</div>
</a>
<ul>
{category.sub_categories.map(function(sc) {
return (<li>{sc.name}</li>)
})}
</ul>
</div> <img src={category.image_url || 'http://www.windeln.de/resources/img/content/kat_windelnwickeln.jpg'}/>
) <div>
})} {category.name}
</div> </div>
</a>
<ul>
{category.sub_categories.map(function(sc) {
return (
<li>
{sc.name}
</li>
)
})}
</ul>
</div>
)
})}
</div>*/}
</div> </div>
</div> ) </div>
}, )
onCategoryClick: function(category, section) { },
NavigationActions.goToCategory(new Category(category), section); onCategoryClick: function(category, section) {
NavigationActions.goToCategory(new Category(category), section);
}, },
componentWillReceiveProps: function(nextProps) { componentWillReceiveProps: function(nextProps) {
var sectionId = this.getParams().id; var sectionId = this.getParams().id;
ItemActions.loadBestSellingItemsForSection(sectionId); ItemActions.loadBestSellingItemsForSection(sectionId);
SectionActions.loadSectionDetails(sectionId); SectionActions.loadSectionDetails(sectionId);
}, },
componentDidMount: function() { componentDidMount: function() {
console.log('mounting....'); console.log('mounting....');
var sectionId = this.getParams().id; var sectionId = this.getParams().id;
ItemActions.loadBestSellingItemsForSection(sectionId); ItemActions.loadBestSellingItemsForSection(sectionId);
SectionActions.loadSectionDetails(sectionId); SectionActions.loadSectionDetails(sectionId);
SectionStore.addChangeListener(this._onSectionChange); SectionStore.addChangeListener(this._onSectionChange);
ItemStore.addChangeListener(this._onChange); ItemStore.addChangeListener(this._onChange);
}, },
componentWillUnmount: function() { componentWillUnmount: function() {
SectionStore.removeChangeListener(this._onSectionChange); SectionStore.removeChangeListener(this._onSectionChange);
ItemStore.removeChangeListener(this._onChange); ItemStore.removeChangeListener(this._onChange);
}, },
_onSectionChange: function() { _onSectionChange: function() {
if(this.isMounted()) { if(this.isMounted()) {
this.setState({ this.setState({
section: SectionStore.getSectionDetails() section: SectionStore.getSectionDetails()
}); });
}
},
_onChange: function() {
if(this.isMounted()) {
console.log('items store changed! by section');
this.setState({items: ItemStore.getBestSellingForSection()});
}
} }
},
_onChange: function() {
if(this.isMounted()) {
console.log('items store changed! by section');
this.setState({items: ItemStore.getBestSellingForSection()});
}
}
}); });
module.exports = BySection; module.exports = BySection;

3
front-ui/app/models/section.js
View File

@@ -4,7 +4,8 @@ var Globals = require('../globals');
var Section = Backbone.Model.extend({ var Section = Backbone.Model.extend({
urlRoot : Globals.ApiUrl + '/section', urlRoot : Globals.ApiUrl + '/section',
defaults : { defaults : {
name: '' name: '',
categories: []
} }
}); });

1
front-ui/app/stores/sectionStore.js
View File

@@ -30,6 +30,7 @@ var loadSectionDetails = function(sectionId) {
section.fetch({ section.fetch({
success: function() { success: function() {
_sectionDetails = section; _sectionDetails = section;
console.log('section details', _sectionDetails);
SectionStore.emitChange(); SectionStore.emitChange();
} }
}); });