From 9f31dad26fa6c0d512cf0ce28c220327d984a4a7 Mon Sep 17 00:00:00 2001
From: Senad Uka <senad.uka@gmail.com>
Date: Tue, 3 Feb 2015 06:27:54 +0100
Subject: [PATCH] now displaying traits on item details page

---
 back-office/public/.DS_Store                  | Bin 0 -> 6148 bytes
 front-ui/app/.DS_Store                        | Bin 6148 -> 6148 bytes
 front-ui/app/components/items/.DS_Store       | Bin 6148 -> 6148 bytes
 .../components/items/itemWithDetailsPage.js   |  44 +++++++++---------
 front-ui/app/components/items/traits.js       |  27 +++++++++++
 front-ui/app/css/items.css                    |   6 +++
 6 files changed, 55 insertions(+), 22 deletions(-)
 create mode 100644 back-office/public/.DS_Store
 create mode 100644 front-ui/app/components/items/traits.js

diff --git a/back-office/public/.DS_Store b/back-office/public/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6
GIT binary patch
literal 6148
zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3
zem<@ulZcFPQ@L2!n>{z**<q8>++&mCkOWA81W14cNZ<zv;LbK1Poaz?KmsK2CSc!(
z0ynLxE!0092;Krf2c+FF_Fe*7ECH>lEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ
zLs35+`xjp>T0<F0fCPF1$Cyrb|F7^5{eNG?83~ZUUlGt@xh*qZDeu<Z%US-OSsOPv
j)R!Z4KLME7ReXlK;d!wEw5GODWMKRea10D2@KpjYNUI8I

literal 0
HcmV?d00001

diff --git a/front-ui/app/.DS_Store b/front-ui/app/.DS_Store
index 69e3a4e6452476d7ab4182dc74073f186345c54e..575045652d89b3dcd27f78493c4f746397e5b9e8 100644
GIT binary patch
delta 31
ncmZoMXfc@J&&azmU^g=(?`9sBD@>Dx*uPF}Fxt${@s}R}q1y^>

delta 72
zcmZoMXfc@J&&aniU^g=(-)0_`D@@v)3`Gq245bVu45<vo40;S%48@)~`N>H+`AG~6
Z3<5yx#=yYH0i>BG-(>r<nVsV=KLC%65n=!U

diff --git a/front-ui/app/components/items/.DS_Store b/front-ui/app/components/items/.DS_Store
index a9a49cbe71ad6dbb9aef2150d952c1ac55f07e36..1534571799e1209c64ecb323979df2d09b0453a1 100644
GIT binary patch
delta 31
ncmZoMXfc@J&&awlU^gQp>tr6LlbgAj|FBGKFx$+|@s}R}ptK56

delta 53
zcmZoMXfc@J&&akhU^gQp+hiW5lY-m~nG7WisSLRc0St)@=?tlp6_`Yr7=tz+W8!Ar
J%+B$b9{_Jw4Lkq<

diff --git a/front-ui/app/components/items/itemWithDetailsPage.js b/front-ui/app/components/items/itemWithDetailsPage.js
index 85e558b..4af8846 100644
--- a/front-ui/app/components/items/itemWithDetailsPage.js
+++ b/front-ui/app/components/items/itemWithDetailsPage.js
@@ -1,5 +1,6 @@
 var React = require('react'),
     Carousel = require('../shared/carousel'),
+    Traits = require('../items/traits'),
     ItemDetailsActions = require('../../actions/itemDetailsActions'),
     NavigationStore = require('../../stores/navigationStore'),
     ItemDetailsStore = require('../../stores/itemDetailsStore');
@@ -12,32 +13,26 @@ var ItemWithDetailsPage = React.createClass({
     render: function() {
 
       return (
-
-
         <div className="item-with-details row-fluid center">
-        <div className="col-md-5">
-
-    
-          <Carousel images={this.state.images}
-                  selected={this.state.currentImage}
-                  onClickLeft={this.onClickLeft}
-                  onClickRight={this.onClickRight}
-                  onSelectImage={this.onSelectImage} />
+          <div className="col-md-5">
+            <Carousel images={this.state.images}
+                    selected={this.state.currentImage}
+                    onClickLeft={this.onClickLeft}
+                    onClickRight={this.onClickRight}
+                    onSelectImage={this.onSelectImage} />
         
-        </div>
-        <div className="col-md-7">
-        <h3> {this.state.item.get('name')} </h3>
-        <div>
-        <div className='h4'> {this.state.item.get('list_price')} KM</div>
-        <div className='h5'>{this.state.item.get('pricePerUnit')}</div>
+          </div>
 
+          <div className="col-md-7">
+            <h3> {this.state.item.get('name')}</h3>
+            <div>
+             <div className='h4'> {this.state.item.get('list_price')} KM</div>
+             <div className='h5'>{this.state.item.get('pricePerUnit')}</div>
+             <div> {this.state.item.get('description')}</div>
+            </div>
 
-
-        <div> {this.state.item.get('description')}</div>
-        </div>
-
-        quantitative descriptions
-        </div>
+            <Traits traits={this.state.item.get('traits')} />
+          </div>
         </div>
         );       
 
@@ -50,6 +45,11 @@ var ItemWithDetailsPage = React.createClass({
       ItemDetailsActions.loadItemWithDetails();
     },
 
+    componentWillUnmount: function () {
+      ItemDetailsStore.removeChangeListener(this._onChange);
+      NavigationStore.removeChangeListener(this._onChange);
+    },
+
 
     onClickLeft: function() {
       ItemDetailsActions.previousCarouselImage();
diff --git a/front-ui/app/components/items/traits.js b/front-ui/app/components/items/traits.js
new file mode 100644
index 0000000..8d9d899
--- /dev/null
+++ b/front-ui/app/components/items/traits.js
@@ -0,0 +1,27 @@
+var React = require('react');
+
+var Traits = React.createClass({
+    render: function() {
+
+      var traitsPresentation = [];
+      var traits = (this.props.traits || {});
+      for(var traitKey in traits )  {
+        if(traits.hasOwnProperty(traitKey)) {
+          var traitValue = this.props.traits[traitKey];
+          traitsPresentation.push( <div className="single_trait">{traitKey}: {traitValue}</div>   );
+        }
+      }
+
+      console.log(traitsPresentation); 
+      return (    
+        <div className="row-fluid">
+           <div className="span12"> 
+               {traitsPresentation}
+           </div>        
+        </div>  
+        );
+    }
+});
+
+
+module.exports = Traits;  
diff --git a/front-ui/app/css/items.css b/front-ui/app/css/items.css
index d1ab9f5..3842011 100644
--- a/front-ui/app/css/items.css
+++ b/front-ui/app/css/items.css
@@ -7,6 +7,12 @@
 
 }
 
+.single_trait {
+	display: inline-block;
+	text-align: center;
+	padding-right: 5px;
+}
+
 .single_item img { 
 	padding: 5px;