10.07

app/app.module.js

@@ -1,4 +1,4 @@
-var app = angular.module('fea5', [
+window.app = angular.module('fea5', [
 	'ngRoute',
 	'ui.bootstrap',
 	'cgNotify',

app/controllers/bookslist.controller.js

@@ -46,16 +46,27 @@
                         })
                     })
                 };
+                var searchResult = sessionStorage.getItem('searchResult');
 
-                booksRepository.getBooks()
-                .then(function (response)
-                {
-                    $scope.books = response.data;
-                }, function (error)
-                {
-                    alert(error);
+                if(searchResult){
+                    $scope.books = JSON.parse(searchResult);
+                    sessionStorage.removeItem('searchResult')
+                }else {
+
+                    booksRepository.getBooks()
+                    .then(function (response)
+                    {
+                        $scope.books = response.data;
+                    }, function (error)
+                    {
+                        alert(error);
+                    }
+                    );
                 }
-                );
+                $scope.$on('search', function(event, data){
+                
+                    $scope.books = data;
+                });
             }
         ]);
 

app/controllers/header.controller.js

@@ -2,7 +2,7 @@
 {
     'use strict';
 
-    app.controller('Header', [ '$scope','$translate',function ($scope, $translate){
+    app.controller('Header', [ '$scope','$translate', 'books.repository', '$rootScope','$location',function ($scope, $translate, booksRepository, $rootScope, $location){
         $scope.isLogged = function() {
         	return localStorage.getItem('authToken') ? true : false;
         };
@@ -11,6 +11,14 @@
             var curentleng = lang === 'en'? 'ru' : 'en';
             $translate.use(curentleng);
             localStorage.setItem('preferredLanguage', curentleng);
+        };
+        $scope.search = function() {
+            booksRepository.searchBy($scope.searchString)
+            .then(function(response){
+                sessionStorage.setItem('searchResult', JSON.stringify(response.data))
+                $rootScope.$broadcast('search', response.data);
+                $location.path('/books')
+            })
         }
     }
     ]);

app/directive/lang-swicher/lang-swicher.directive.js

@@ -6,7 +6,7 @@
             restrict: 'E',
             templateUrl: './app/directive/lang-swicher/lang-swicher.template.html',
             scope: {},
-            controller: ['$scope', '$translate', function($scope, $translate){
+            controller: ['$scope', '$translate', '$rootScope', function($scope, $translate, $rootScope){
                 $scope.languages = [
                     {key: 'en', value: 'English'},
                     {key: 'ru', value: 'Russian'}
@@ -26,7 +26,17 @@
                     $scope.showMenu = false;
                     $translate.use(key)
                     localStorage.setItem('preferredLanguage', key);
-                }
+                    
+                    $rootScope.$broadcast('changeLang', key);
+                };
+                $scope.$on('changeLang', function(event, value){
+                    
+                    if($scope.currentLang.key !== value ){
+                        $scope.currentLang = $scope.languages.filter(function(item){
+                            return item.key === value;
+                        })[0];
+                    }
+                })
             }]
 
         }

app/services/books.factory.js

@@ -9,7 +9,8 @@ app.factory('books.repository', ['webApi', '$http', function(webApi, $http) {
 		getAuthors: _getAuthors,
 		updateBookById: _updateBookById,
 		addBook: _addBook,
-		deleteBook: _deleteBook
+		deleteBook: _deleteBook,
+		searchBy: _searchBy
 	};
 
 	function _getBooks() {
@@ -31,6 +32,9 @@ app.factory('books.repository', ['webApi', '$http', function(webApi, $http) {
 	function _deleteBook(id){
 		return $http.delete(webApi.DOMAIN + '/api/v2/books/' + id);
 	}
+	function _searchBy(string){
+		return $http.get(webApi.DOMAIN + '/api/v2/search?string=' + string);
+	}
 }]);
 
 })();

app/views/header.template.html

@@ -16,6 +16,12 @@
                <li class="p-t-5">
                     <lang-switcher></lang-switcher>
                </li>
+               <li>
+                    <form class="form-inline text-right m-t-5" ng-submit="search()">
+                        <input class="form-control" type="text" placeholder="{{'Search' | translate}}" ng-model="searchString">
+                        <button class="btn btn-secondary" type="submit">{{'Search' | translate}}</button>
+                    </form>
+                </li>
             </ul>
         </div>
     </div>

entry.js

@@ -0,0 +1,4 @@
+import './app/app.module.js';
+import './app/app.config.js';
+import './app/app.routes.js';
+// import './css/style.scss';

index.html

@@ -15,7 +15,7 @@
 	    <div ng-include src="'app/views/footer.template.html'"></div>
 	  </div>
 
-	  <script src="node_modules/angular/angular.js"></script> 
+	  <!-- <script src="node_modules/angular/angular.js"></script> 
 		<script src="node_modules/angular-route/angular-route.min.js"></script>
 		<script src="node_modules/@cgross/angular-notify/dist/angular-notify.js"></script>
 		<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
@@ -38,6 +38,6 @@
 	  <script src="app/services/account.factory.js"></script>
 		
 
-		<script src="app/directive/lang-swicher/lang-swicher.directive.js"></script>
+		<script src="app/directive/lang-swicher/lang-swicher.directive.js"></script> -->
 	</body>
 </html>

package.json

@@ -13,8 +13,21 @@
     "html-webpack-plugin": "^3.2.0",
     "webpack": "^3.12.0",
     "webpack-cli": "^2.1.4",
-    "webpack-dev-server": "^2.11.2"
+    "webpack-dev-server": "^2.11.2",
+    "css-loader": "^0.28.11",
+    "node-sass": "^4.9.0",
+    "sass-loader": "^7.0.2",
+    "style-loader": "^0.21.0"
   },
+  "bundleDependencies": [
+    "@cgross/angular-notify",
+    "angular",
+    "angular-route",
+    "angular-translate",
+    "angular-translate-loader-static-files",
+    "angular-ui-bootstrap",
+    "angular-xeditable"
+  ],
   "dependencies": {
     "angular": "^1.6.6",
     "angular-bootstrap": "^0.12.2",
@@ -22,6 +35,8 @@
     "angular-translate": "^2.18.1",
     "angular-translate-loader-static-files": "^2.18.1",
     "angular-ui-bootstrap": "^2.5.6",
+    "angular-xeditable": "^0.8.1",
     "bootstrap": "^3.3.7"
   }
+
 }

webpack.config.js

@@ -1,16 +1,66 @@
-const path = require('path');
-const glob = require('glob');
-
-const config = {
-	context: path.resolve(__dirname, './'),
-	entry: {
-		app: './app/app.module.js',
-	},
-	devServer: {
-		port: 9000,
-		stats: 'errors-only'
-	}
-};
-
-module.exports = config;
-
+const path = require('path');
+const glob = require('glob');
+
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const config = {
+	context: path.resolve(__dirname, './'),
+	entry: {
+		'0_vendor': require('./package.json').bundleDependencies,
+		'1_app': './entry.js',
+		'2_files': toArray(glob.sync('./app/**/*.js'), 'app.module.js'),
+	},
+	output: {
+		filename: '[name].bundle.js'
+	},
+	devServer: {
+		contentBase: path.join(__dirname, './'),
+		compress: true,
+		port: 9000,
+		stats: 'errors-only',
+		watchOptions: { aggregateTimeout: 300, poll: 1000 }
+	},
+	resolve: {
+		alias: {
+			'node_modules': path.join(__dirname, 'node_modules'),
+		}
+	},
+	plugins: [
+		new HtmlWebpackPlugin({
+			template: 'index.html',
+			chunksSortMode: function(a, b) {
+				return (a.names[0] > b.names[0])? 1 : -1;
+			},
+			inject: 'body',
+			extraFiles: {
+				css: './css/style.css'
+			}
+		})
+	],
+	module: {
+		rules: []
+	}
+};
+
+module.exports = config;
+
+function toObject(paths) {
+	var result = {};
+
+	paths.forEach(function(path) {
+		result[path.split('/').slice(-1)[0]] = path;
+	});
+
+	return result;
+}
+
+function toArray(paths, ignorePath) {
+	var result = [];
+
+	paths.forEach(function(path) {
+		if (path.indexOf(ignorePath) !== -1) return;
+		result.push(path);
+	});
+
+	return result;
+}