v2.2

_gitignore

@@ -0,0 +1,16 @@
+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;
+

app/controllers/bookdetails.controller.js

@@ -1,16 +1,60 @@
-(function ()
-{
-    'use strict';
-
-    app.controller('BookDetails', ['$scope', 'books.repository', '$routeParams', function ($scope, booksRepository, $routeParams)
-            {
-                booksRepository.getBookById($routeParams.id)
-                .then(function(response) {
+(function() {
+'use strict';
+app.controller('BookDetails', ['$scope', '$routeParams', 'books.repository', function($scope, $routeParams, booksRepository) {
+    var bookId = $routeParams.id,
+        bookModel = {};
+    $scope.isEditMode = false;
+    
+    $scope.datepicker = {
+        format: 'yyyy-MM-dd',
+        opened: false,
+        options: {}
+    };
+
+
+    booksRepository.getBookById($routeParams.id).then(function(response) {
                     console.log(response.data);
-                }, function(error) {
-                    alert(error)}
-                    )
+                }, function(error) {alert(error)});
+
+    booksRepository.getBookById(bookId).then(function(response) {
+        $scope.book = response.data;
+        $scope.book.date = new Date($scope.book.date);
+    }, function(error) {alert(error)});
+
+    booksRepository.getAuthors().then(function(response) {
+        $scope.authors = response.data.map(function(item) {
+            return {
+                id: item.id,
+                name: item.firstname + ' ' + item.lastname
             }
-        ]);
-}
-)();
+        });
+    }, function(error) {alert(error)});
+
+    $scope.getAuthorNameById = function(model, id) {
+        if (!model || !id) return;
+        return model.filter(function(item) {
+            return item.id === id;
+            console.log(item.id);
+        })[0].name;
+    };
+
+    $scope.setEditMode = function() {
+        $scope.isEditMode = true;
+        bookModel = angular.copy($scope.book);
+    };
+
+    $scope.updateBook = function() {
+        booksRepository.updateBookById($scope.book.id, $scope.book).then(function(response) {
+            if (response.data.errors.length) return;
+             $scope.isEditMode = false;
+        }, function(error) {});
+    };
+
+    $scope.cancel = function() {
+        $scope.isEditMode = false;
+        $scope.book = angular.copy(bookModel);
+        };
+}]);
+})();
+
+ 

app/services/books.factory.js

@@ -6,7 +6,9 @@ app.factory('books.repository', ['webApi', '$http', function(webApi, $http) {
 	return {
 		getBooks: _getBooks,
 		getBookById: _getBookById,
-		//updateBookById: _updateBookById
+		getAuthors: _getAuthors,
+		updateBookById: _updateBookById
+
 	};
 
 	function _getBooks() {
@@ -17,6 +19,14 @@ app.factory('books.repository', ['webApi', '$http', function(webApi, $http) {
 		return $http.get(webApi.DOMAIN + '/api/v2/books/' + id);
 	}
 
+	function _getAuthors() {
+		return $http.get(webApi.DOMAIN + '/api/v2/authors');
+	}
+
+	function _updateBookById(bookId, data) {
+		return $http.put(webApi.DOMAIN + '/api/v2/books/' + bookId, data);
+	}
+
 }]);
 
 })();

app/views/books-details.template.html

@@ -1 +1,49 @@
-<h2>Book Details</h2>
+<div class="page-header"><h1>Book details</h1></div>
+ 
+ <!-- Form Edit -->
+ <div class="form-group">
+	<button class="btn btn-primary" ng-click="setEditMode()" ng-if="!isEditMode"><i class="glyphicon glyphicon-pencil"></i></button>
+	<button class="btn btn-success" ng-click="updateBook()" ng-if="isEditMode"><i class="glyphicon glyphicon-floppy-disk"></i></button>
+	<button class="btn btn-danger" ng-click="cancel()" ng-if="isEditMode"><i class="glyphicon glyphicon-ban-circle pull-right"></i></button>
+</div>
+<h2 ng-if="!isEditMode">{{book.title}} 
+<p><small>({{book.date | date: 'yyyy-MM-dd'}}) <i class="glyphicon glyphicon-heart"></i> {{book.rate}} </small> 
+<b class='pull-right'>{{book.cost | currency}}</b></h2></p>
+
+<!-- Edit Mode -->
+
+<div class="row" ng-if="isEditMode">
+	<div class="col-xs-3 form-group">
+		<input type="text" placeholder="Title" class="form-control" ng-model="book.title">
+	</div>
+	<div class="col-xs-3 form-group">
+		<div class="input-group">
+			<input type="text" class="form-control" uib-datepicker-popup="{{datepicker.format}}" ng-model="book.date" is-open="datepicker.opened" datepicker-options="datepicker.options" />
+			<span class="input-group-btn">
+				<button type="button" class="btn btn-default" ng-click="datepicker.opened = !datepicker.opened"><i class="glyphicon glyphicon-calendar"></i></button>
+			</span>
+		</div>
+	</div>
+	<div class="col-xs-3 form-group">
+		<input type="number" placeholder="Rate" class="form-control" ng-model="book.rate">
+	</div>
+	<div class="col-xs-3 form-group">
+		<input type="number" placeholder="Cost" class="form-control" ng-model="book.cost">
+	</div>
+</div>
+
+<!--Authors-->
+
+<h3 ng-if="!isEditMode">{{getAuthorNameById(authors, book.author_id)}}</h3>
+<div class="form-group" ng-if="isEditMode">
+	<select class="form-control" ng-model="book.author_id" ng-options="author.id as author.name for author in authors"></select>
+</div>
+<article ng-if="!isEditMode">
+	<p>
+		<img style="max-width: 300px" ng-src="{{book.image || 'img/noimage.png'}}" alt="{{book.title}}" class="pull-left m-r-15">
+		{{book.intro}}
+	</p>
+</article>
+<div ng-if="isEditMode">
+	<textarea rows="10" placeholder="Intro" class="form-control">{{book.intro}}</textarea>
+</div>

index.html

@@ -10,7 +10,7 @@
 	  <div class="container">	  
 	    <ng-include src="'app/views/header.template.html'"></ng-include>
 	    <div ng-view></div>	
-	    <div ng-include src="'app/views/footer.template.html'"></div>
+	   <!-- <div ng-include src="'app/views/footer.template.html'"></div> -->
 	  </div>
 
 	  <script src="node_modules/angular/angular.js"></script> 
@@ -18,7 +18,7 @@
 	  <script src="app/app.module.js"></script> 
 	  <script src="app/constants/webApi.com.js"></script>
 	  <script src="app/app.config.js"></script> 
-	  <script src="app/app.routes.js"></app>.js"></script> 
+	  <script src="app/app.routes.js"></script> 
 	  <script src="app/controllers/main.controller.js"></script>
 	  <script src="app/controllers/bookslist.controller.js"></script>
 	  <script src="app/controllers/header.controller.js"></script>

webpack.config.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const glob = require('glob');
-
 const config = {
 	context: path.resolve(__dirname, './'),
 	entry: {
@@ -11,6 +10,4 @@ const config = {
 		stats: 'errors-only'
 	}
 };
-
-module.exports = config;
-
+module.exports = config;