- removed our copy jquery & bootstrap. using cdn instead

- added search box to the header
- made reindex rake task

back-office/Gemfile

@@ -56,4 +56,4 @@ group :development, :test do
   gem 'spring'
 end
 
-
+gem 'elasticsearch'

back-office/Gemfile.lock

@@ -67,8 +67,18 @@ GEM
     columnize (0.9.0)
     debug_inspector (0.0.2)
     debugger-linecache (1.2.0)
+    elasticsearch (1.0.9)
+      elasticsearch-api (= 1.0.9)
+      elasticsearch-transport (= 1.0.9)
+    elasticsearch-api (1.0.9)
+      multi_json
+    elasticsearch-transport (1.0.9)
+      faraday
+      multi_json
     erubis (2.7.0)
     execjs (2.2.2)
+    faraday (0.9.1)
+      multipart-post (>= 1.2, < 3)
     font-awesome-rails (4.3.0.0)
       railties (>= 3.2, < 5.0)
     globalid (0.3.0)
@@ -98,6 +108,7 @@ GEM
     mini_portile (0.6.2)
     minitest (5.5.1)
     multi_json (1.10.1)
+    multipart-post (2.0.0)
     nested_form (0.3.2)
     netrc (0.10.2)
     nokogiri (1.6.5)
@@ -205,6 +216,7 @@ DEPENDENCIES
   byebug
   cloudinary
   coffee-rails (~> 4.1.0)
+  elasticsearch
   jbuilder (~> 2.0)
   jquery-rails
   jquery-ui-rails

back-office/lib/tasks/ribica.rake

@@ -333,3 +333,32 @@ namespace :ribica do
     do_import false
   end
 end
+
+namespace :ribica do
+  task reindex: :environment do
+    es_client = Elasticsearch::Client.new log: true
+
+    # first delete the index
+    begin
+        es_client.indices.delete index: 'ribica'
+    rescue
+        logger.warn "Ribica index could not be deleted. Continuing with indexing operation..."
+    end
+
+    # now index items
+    all_items = Item.includes(sub_category: { category: :section }).all.to_a
+    all_items.each do |item|
+        es_client.index  index: 'ribica', type: 'items', id: item.id, body: {
+            title: 'Test',
+            name: item.name,
+            code: item.code,
+            description: item.description,
+            sub_category: item.sub_category.name,
+            category: item.sub_category.category.name,
+            section: item.sub_category.category.section.name
+        }
+    end
+
+    puts "ok!"
+  end
+end

front-api/controllers/search.rb

@@ -1,32 +1,3 @@
-# TODO: make this private, not-public facing.
-# for now we keep this here for simplicity reasons
-get '/search/index' do
-  es_client = Elasticsearch::Client.new log: true
-
-  # first delete the index
-  begin
-      es_client.indices.delete index: 'ribica'
-  rescue
-      logger.warn "Ribica index could not be deleted. Continuing with indexing operation..."
-  end
-
-  # now index items
-  all_items = Item.includes(sub_category: { category: :section }).all.to_a
-  all_items.each do |item|
-      es_client.index  index: 'ribica', type: 'items', id: item.id, body: { 
-          title: 'Test',
-          name: item.name,
-          code: item.code,
-          description: item.description,
-          sub_category: item.sub_category.name,
-          category: item.sub_category.category.name,
-          section: item.sub_category.category.section.name
-      }
-  end
-
-  "ok".to_json
-end
-
 get '/search' do
   es_client = Elasticsearch::Client.new log: true
   q = params[:q]

front-ui/Gruntfile.js

@@ -78,16 +78,13 @@ module.exports = function(grunt) {
         concat: {
             css: {
                 src: [
-                    'node_modules/bootstrap/dist/css/bootstrap.min.css',
                     'app/css/*.css'
 
                 ],
                 dest: 'build/ribica.css'
             },
             js: {
-                src: ['node_modules/jquery/dist/jquery.min.js',
+                src: ['build/ribica.bundle.js'],
-                'app/js/bootstrap.min.js',
-                'build/ribica.bundle.js'],
                 dest: 'build/ribica.js'
             }
         }

front-ui/app/components/cart/addToCart.js

@@ -3,18 +3,14 @@ var CartStore = require('../../stores/cartStore.js');
 var CartActions = require('../../actions/cartActions.js');
 var Globals = require('../../globals');
 
-
-
 var buttonHolderStyle = {
   display: 'inline-block'
 };
 
 var AddToCart = React.createClass({
-
+  INITIAL_ITEM_COUNT: 1,
-  render: function() {  
+  render: function() {
-
       var itemCount = this.state.count;
-
       var amountAndAddButton = (
           <div className="row-fluid add-to-cart">
             <div className="span12">
@@ -25,16 +21,14 @@ var AddToCart = React.createClass({
             <div>
             <div style={buttonHolderStyle}><button className="btn mybutton" onClick={this._addToCartClick}>Dodaj na popis za kupovinu</button></div>
             </div>
-          </div> 
+          </div>
         );
-
-
       return amountAndAddButton;
-  }, 
+  },
 
     // Add change listeners to stores
     componentDidMount: function() {
-      CartStore.addChangeListener(this._onChange); 
+      CartStore.addChangeListener(this._onChange);
 
       if(!CartStore.dataStartedLoading()) {
         CartActions.load();
@@ -44,9 +38,9 @@ var AddToCart = React.createClass({
 
     getInitialState: function() {
       var itemInCart  = CartStore.getStateFor(this.props.item.get('id'));
-      return  { 
+      return  {
         item: itemInCart,
-        count: 0
+        count: this.INITIAL_ITEM_COUNT
       }
     },
 
@@ -54,12 +48,12 @@ var AddToCart = React.createClass({
     _onChange: function () {
       if (this.isMounted()) {
         var item = CartStore.getStateFor(this.props.item.get('id'));
-        this.setState({ item: item, count: 0 });         
+        this.setState({ item: item, count: this.INITIAL_ITEM_COUNT });
       }
     },
 
     _onIncreaseClick: function () {
-   
+
       if (this.state.count < Globals.MaxNumberOfItemsToBeAdded ) {
         this.state.count = this.state.count + 1;
         this.setState(this.state);
@@ -67,8 +61,8 @@ var AddToCart = React.createClass({
     },
 
     _onDecreaseClick: function () {
-    
+
-      if (this.state.count > 0) {
+      if (this.state.count > 1) {
         this.state.count = this.state.count - 1;
         this.setState(this.state);
       }
@@ -81,7 +75,7 @@ var AddToCart = React.createClass({
     componentWillUnmount: function () {
       CartStore.removeChangeListener(this._onChange);
     }
-    
+
 });
 
-module.exports = AddToCart; 
+module.exports = AddToCart;

front-ui/app/components/cart/cartIcon.js

@@ -5,16 +5,16 @@ var NavigationActions = require('../../actions/navigationActions.js');
 var LoginStatus = require('../shared/loginStatus');
 CartTotal = require('./cartTotal');
 
-  
- 
 
-var cartStyle = { 
+
+
+var cartStyle = {
   fontSize: '50px'
 };
 
 var normalizeCount = function(count) {
   if (count >= 0 && count < 10) {
-    return "\u00a0" + count; 
+    return "\u00a0" + count;
   }  else {
     return count;
   }
@@ -22,24 +22,33 @@ var normalizeCount = function(count) {
 
 var CartIcon = React.createClass({
 
-  render: function() {  
+  render: function() {
 
   	  var textNotificationStyle = (this.state.count > 0)  ? { display: 'inline-block'} : { display: 'none'} ;
 
-      return ( 
+      return (
+        <div>
+         <ul className="nav navbar-nav navbar-right hidden-md hidden-sm hidden-xs">
+            <li><LoginStatus /></li>
+            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
+            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', paddingBottom: 2}}><a href="#" style={{ paddingRight: '5px'}}><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} justMerchandise={true}/> </a></li>
+            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderRight: 'solid lightgray 1px'}}>
+              <a style={{marginBottom: 10, marginRight: 10}} className="mybutton" href="#">Završi narudžbu</a></li>
 
-         <ul className="nav navbar-nav navbar-right">
-                            <li><LoginStatus /></li>
-                            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
-                            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', paddingBottom: 2}}><a href="#"><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} justMerchandise={true}/> </a></li>
-                            <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderRight: 'solid lightgray 1px'}}><a style={{marginLeft: 20, marginBottom: 10, marginRight: 15}} className="mybutton" href="#">Završi narudžbu</a></li>                            
           </ul>
+
+          <ul className="nav navbar-nav navbar-right hidden-lg">
+             <li><LoginStatus /></li>
+             <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px', borderLeft: 'solid lightgray 1px', paddingBottom: 22}}><a ><div className="mycart"><span>{normalizeCount(this.state.count)}</span></div></a></li>
+             <li onClick={this._onClick} style={{borderTop: 'solid lightgray 1px', borderBottom: 'solid lightgray 1px',borderRight: 'solid lightgray 1px', paddingBottom: 2}}><a href="#" style={{ paddingRight: '5px'}}><CartTotal items={this.state.items} itemCounts={this.state.itemCounts} deliveryCosts={this.state.deliveryCosts} justMerchandise={true}/> </a></li>
+           </ul>
+          </div>
         );
   },
 
     // Add change listeners to stores
     componentDidMount: function() {
-      CartStore.addChangeListener(this._onChange); 
+      CartStore.addChangeListener(this._onChange);
       if(!CartStore.dataStartedLoading()) {
         CartActions.load();
       };
@@ -54,7 +63,7 @@ var CartIcon = React.createClass({
     _onChange: function () {
       if (this.isMounted()) {
 
-        this.setState(CartStore.getWholeCartState());         
+        this.setState(CartStore.getWholeCartState());
       }
     },
 
@@ -69,7 +78,4 @@ var CartIcon = React.createClass({
 
 });
 
-module.exports = CartIcon; 
+module.exports = CartIcon;
-
-
-

front-ui/app/components/rootApp.js

@@ -42,14 +42,20 @@ var RootApp = React.createClass({
             return (<div>loading...</div>);
         }
 
-        return ( 
+        return (
 <div className="container">
     <div>
         <div className="col-lg-12 hidden-sm hidden-xs " style={{height: 80, background: 'none', marginBottom: '0px !important'}} id="mybody">
-            <div style={{padding: '15px 15px'}} className="col-lg-3 col-md-3 col-sm-3 col-xs-3">
+
+            <div style={{padding: '15px 15px'}} className="col-lg-2 col-md-2 col-sm-2 col-xs-2">
                 <Link to="app"><img height={50} src="https://res.cloudinary.com/du5pdibul/image/upload/v1428813560/logo_h5f9yp.png" /></Link>
             </div>
-            <div style={{padding: '15px 15px'}} className="col-lg-9 col-md-9 hidden-sm hidden-xs">
+
+            <div style={{padding: '30px 15px'}} className="col-lg-5 col-md-5 col-sm-4 col-xs-4">
+                <SearchBox />
+            </div>
+
+            <div style={{padding: '15px 15px'}} className="col-lg-5 col-md-5 hidden-sm hidden-xs">
                 <nav style={{background: 'none', border: 'none', marginBottom: '0px !important'}} className="navbar mytopnav">
                     <div className="container-fluid">
                         <CartIcon />

front-ui/app/components/shared/breadCrumbs.js

@@ -0,0 +1,11 @@
+var React = require('react');
+
+var Breadcrumbs = React.createClass({
+  render: function() {
+    var bcText = "Ribica.ba -> " + this.props.text;
+
+    return (<div>{bcText}</div>);
+  }
+});
+
+module.exports = Breadcrumbs;

front-ui/app/components/shared/loginStatus.js

@@ -33,13 +33,13 @@ var LoginStatus = React.createClass({
     },
   render : function() {
 
-      
+
-      var content; 
+      var content;
 
       if(this.state.loggedIn){
-          content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '30px'}}>{this.state.user.first_name} {this.state.user.last_name}  <a onClick={this.logout} style={{ paddingLeft: '30px' }}>Odjavite se</a></div>)
+          content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '10px'}}>{this.state.user.first_name} {this.state.user.last_name}  <a onClick={this.logout} style={{ paddingLeft: '10px' }}>Odjavite se</a></div>)
       } else {
-          content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '30px'}}><Link to="registracija" style={{ paddingRight: '30px' }}>Registracija</Link>  <Link to="login">Prijava</Link></div>)      
+          content = (<div style={{display: 'inline-block', paddingTop: '18px', paddingRight: '10px'}}><Link to="registracija" style={{ paddingRight: '10px' }}>Registracija</Link>  <Link to="login">Prijava</Link></div>)
       }
 
       return content;

front-ui/app/components/shared/searchBox.js

@@ -36,15 +36,25 @@ var SearchBox = React.createClass({
         var enterKeyCode = 13;
         if(e.which == enterKeyCode) {
             this.doSearch();
+            e.preventDefault();
         }
     },
     render: function() {
-   return (<div className="input-group">
+   return (<form style={ {marginLeft: '60px', width: '100%'} } className="form-inline">
-      <input type="text" onKeyPress={this.onKeyPress} className="form-control" value={this.state.q} onChange={this.onSearchBoxChange} placeholder="Pretraga"> </input>
+        <div className="left-inner-addon">
-      <span className="input-group-btn">
+            <i className="glyphicon glyphicon-search"></i>
-        <button className="btn btn-default" type="button" onClick={this.onSearchClick}>Traži</button>
+              <input style={{width: '75%'}} type="search" onKeyPress={this.onKeyPress}
-      </span>
+                className="search-box form-control"
-    </div>)
+                value={this.state.q} onChange={this.onSearchBoxChange}
+                    aria-hidden="true">
+
+               </input>
+
+             <button className="btn btn-default search-button" type="button"
+               onClick={this.onSearchClick}>Traži</button>
+
+        </div>
+    </form>)
     }
 });
 

front-ui/app/css/main.css

@@ -45,7 +45,7 @@ h1 h2 h3 h4 h5{
 
 .mybutton{
     background-color: #00a8a8;
-    padding: 6px 22px !important;
+    padding: 6px 11px !important;
     display: block;
     border-radius: 3px;
     margin-top: 8px;
@@ -57,7 +57,6 @@ h1 h2 h3 h4 h5{
 .mybutton:hover  {
     background-color: #06c3c3 !important;
     color: black !important;
-    padding: 6px 22px !important;
     margin-top: 8px;
     display: block;
     border-radius: 3px;
@@ -473,7 +472,35 @@ text-decoration: none;
     display: block;
     border-radius: 1px;
     margin-top: 8px;
-    border: solid #cccccc 1px; 
+    border: solid #cccccc 1px;
     color: #4d4d4d !important;
     font-size: 16px;
 }
+
+.search-box {
+  background-color: #efefef;
+  border-radius: 0px;
+  border: 1px solid #cccccc;
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.search-button {
+  background-color: #f9f9f9;
+  color: #31b8b8;
+  border: 1px solid #cccccc;
+  border-radius: 0px;
+  margin-left: 5px;
+}
+
+.left-inner-addon {
+    position: relative;
+}
+.left-inner-addon input {
+    padding-left: 30px;
+}
+.left-inner-addon i {
+    position: absolute;
+    padding: 10px 12px;
+    pointer-events: none;
+}

front-ui/build/index.html

@@ -6,6 +6,11 @@
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+        <!-- Latest compiled and minified CSS -->
+        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+        <script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
+        <!-- Latest compiled and minified JavaScript -->
+        <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
         <link rel='stylesheet' type='text/css' href='/ribica.css'>
         <meta charset="UTF-8">
         <meta name="fragment" content="!">

front-ui/package.json

@@ -28,8 +28,6 @@
   "dependencies": {
     "react": "~0.12.2",
     "backbone": "~1.1.2",
-    "bootstrap": "~3.3.1",
-    "jquery": "~2.1.3",
     "react-router": "~0.11.6",
     "superagent": "~0.21.0"
   }