more reorganization

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

@@ -0,0 +1,38 @@
+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 AllItems = React.createClass({
+
+    render: function() {  
+        if(this.state) { 
+        return (
+            <ItemList items={this.state.items} />
+        );
+    } 
+    else {
+        return (
+            <div> Not Loaded ! </div>
+        );
+
+    }
+    },
+    
+     // Add change listeners to stores
+    componentDidMount: function() {
+        ItemActions.loadFrontPageItems();
+        ItemStore.addChangeListener(this._onChange);
+    },
+
+    _onChange: function () {
+      if (this.isMounted()) {
+        this.setState({
+            items: ItemStore.getItems()
+        });
+      }
+    },
+});
+
+module.exports = AllItems; 

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

@@ -0,0 +1,29 @@
+var React = require('react');
+var SingleItem = require('./singleItem');
+var ItemCollection = require('../../models/itemCollection.js');
+
+var ItemList = React.createClass({
+
+    render: function() {
+
+        var items = this.props.items.models.map( function(item) {
+            return  (
+                 <SingleItem item={item} key={item.id}/>
+                 );
+        });
+
+        return (
+            <div className="row-fluid">
+            <div className="span10">
+            <ul className="item_list">
+               {items}
+            </ul>
+            </div> 
+            </div>
+        );
+    }
+
+});
+
+
+module.exports = ItemList; 

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

@@ -0,0 +1,24 @@
+var React = require('react');
+
+var ItemMultimediaDescriptions = React.createClass({
+
+
+    render: function() {
+        var self = this;      
+
+        return (    
+               <div>Multimedia Description!
+                {(this.props.descriptions || []).map(function(des) {
+                return (<img src={des.url} />)
+                                                          })}
+                             </div>
+        );
+    }
+
+    //getInitialState: function () {
+			//return { descriptions: [] }; 
+	//}
+});
+
+
+module.exports = ItemMultimediaDescriptions;  

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

@@ -1,5 +1,5 @@
 var React = require('react')
-    ItemWithDetailsPage = require('../itemWithDetailsPage');
+    ItemWithDetailsPage = require('./itemWithDetailsPage');
 var ItemPage = React.createClass({
     render: function() {
         return (

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

@@ -0,0 +1,75 @@
+var React = require('react'),
+    ItemMultiMediaDescriptions = require('./itemMultiMediaDescriptions'),
+    ItemActions = require('../../actions/itemActions'),
+    ItemStore = require('../../stores/itemStore');
+
+var Item = require('../../models/item');
+
+var Router = require('react-router');
+var Navigation = Router.Navigation;
+
+var ItemWithDetailsPage = React.createClass({
+
+
+    mixins : [Router.State],
+    render: function() {
+
+        return (
+
+
+ <div className="item-with-details row-fluid center">
+            <div className="span3">
+            
+           <h3> {this.state.item.get('name')} </h3>
+           <div>
+
+             <div className='h4'> {this.state.item.get('list_price')} KM</div>
+             <div> {this.state.item.get('description')}</div>
+           </div>
+<ItemMultiMediaDescriptions descriptions={this.state.item.get('multi_media_descriptions')} />
+
+
+
+                            </div>
+            <div className="span4">
+               quantitative descriptions
+            </div>
+            </div>
+        ) ;       
+
+    },
+
+     // Add change listeners to stores
+    componentDidMount: function() {
+        //ItemStore.addChangeListener(this._onChange);
+        //ItemActions.loadFrontPageItems();
+        
+        var self = this;
+        var item = new Item({ id: self.getParams().id });
+        item.fetch({success: function() {
+            if (self.isMounted()) {
+                console.log('article loaded', item);
+                self.setState({
+                    item : item
+                });
+            }
+        }});
+    },
+
+    _onChange: function () {
+        this.setState({
+            item: ItemStore.getSelectedItem()
+        });
+    },
+
+    getInitialState: function () {
+      return { 
+          //item: ItemStore.getSelectedItem() 
+          item : (new Item())
+      }; 
+    }
+
+});
+
+
+module.exports = ItemWithDetailsPage; 

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

@@ -0,0 +1,31 @@
+var React = require('react');
+var ItemActions = require('../../actions/itemActions');
+
+var Router = require('react-router');
+var Navigation = Router.Navigation;
+
+var SingleItem = React.createClass({
+  mixins: [Navigation],
+    render: function() {
+      var self = this;
+      var itemClick = this.itemClick;
+      var firstImage = this.props.item.get('multi_media_descriptions')[0];
+      firstImage = firstImage || { url:  "http://res.cloudinary.com/lfvt7ps2n/image/upload/c_crop,g_center,w_300/v1421732950/http_www.asms.ru_bitrix_templates_main_images_nophoto_irnofq.png" } ;
+      return (    
+        <div className="single_item"  onClick={itemClick}>
+        <img src={firstImage.url} />
+        <h1> { this.props.item.get('name') }</h1>
+        <div> { this.props.item.get('list_price') } KM </div>
+        </div>  
+        );
+    },
+
+    itemClick: function(e) {
+      // no need for this to go through ItemActions
+      //ItemActions.selectItem(this.props.item);
+      this.transitionTo('/artikal/' + this.props.item.get('id') +'/' + this.props.item.get('name'));
+    }
+});
+
+
+module.exports = SingleItem;