authors

app/app.module.js

@@ -1,3 +1,4 @@
 var app = angular.module('fea5', [
-	'ngRoute'
+	'ngRoute',
+	'ui.bootstrap'
 	]);

app/app.routes.js

@@ -18,5 +18,9 @@ app.config(function($routeProvider, $locationProvider) {
 		templateUrl: 'app/views/books-details.template.html',
 		controller: 'BookDetails'
 	})
+	.when('/authors', {
+		templateUrl: 'app/views/authors.template.html',
+		controller: 'Authors'
+	})
 	.otherwise('/');
 })

app/controllers/addBook.controller.js

@@ -0,0 +1,39 @@
+(function(){
+    'use strict';
+    app.controller('AddBook', addBookController);
+    function addBookController($scope, $uibModalInstance, booksRepository){
+        $scope.newBook = {
+            title: '',
+            author_id: null,
+            date: "",
+            cost: '',
+            rate: '',
+            intro: ''
+        }
+        booksRepository.getAuthors()
+        .then(function(response){
+            $scope.authors = response.data.map(function(author){
+                return {
+                    id: author.id,
+                    name: author.firstname + ' ' + author.lastname
+                }
+            })
+        });
+        $scope.cancel = function(){
+            $uibModalInstance.dismiss('cancel'); 
+            // $uibModalInstance.close(false);  
+        };
+        $scope.ok = function(){
+            $uibModalInstance.close($scope.newBook);
+        }
+
+    }
+    
+
+    addBookController.$inject = [
+        '$scope',
+        '$uibModalInstance',
+        'books.repository',
+        '$uibModalInstance'
+    ];   
+})()

app/controllers/authors.controller.js

@@ -0,0 +1,11 @@
+(function(){
+    app.controller('Authors', ['$scope', 'books.repository', '$routeParams', function ($scope, booksRepository, $routeParams){
+        booksRepository.getAuthors()
+        .then(function(respons){
+            $scope.authors = respons.data
+        })
+        $scope.deleteAuthor = function(id){
+            $scope.authors.splice($scope.authors.indexOf(id), 1)
+        }
+    }])
+})();

app/controllers/bookslist.controller.js

@@ -2,10 +2,23 @@
 {
     'use strict';
 
-    app.controller('BooksList', ['$scope', 'books.repository', function ($scope, booksRepository)
+    app.controller('BooksList', ['$scope', 'books.repository', '$uibModal', function ($scope, booksRepository, $uibModal)
             {
                 $scope.sortField = 'title';
 
+                $scope.addBook = function(){
+                    var modalInstance =  $uibModal.open({
+                        templateUrl : 'app/modals/add-book.template.html',
+                        controller: 'AddBook',
+                        size: 'lg'
+                    })
+                    modalInstance.result
+                    .then(function(data){
+                        booksRepository.addBook(data);
+                        $scope.books.push(data)
+                    }, function(){})
+                }
+
                 $scope.sortBy = function (field)
                 {
                     if ($scope.sortField == field)
@@ -18,9 +31,20 @@
                     }
                 };
 
-                $scope.deleteBook = function (book)
-                {
-                    $scope.books.splice($scope.books.indexOf(book), 1);
+                $scope.deleteBook = function (book){
+                    var modalInstance = $uibModal.open({
+                        templateUrl: 'app/modals/confirm/confirm.template.html',
+                        controller: 'Confirm',
+                        size: 'sm'
+                    });
+                    modalInstance.result
+                    .then(function(result){
+                        if(!result) return;
+                        booksRepository.deleteBook(book.id)
+                        .then(function(response){
+                            $scope.books.splice($scope.books.indexOf(book), 1)
+                        })
+                    })
                 };
 
                 booksRepository.getBooks()

app/modals/add-book.template.html

@@ -0,0 +1,28 @@
+<div class="modal-header">
+	<h3 class="modal-title">Add new book</h3>
+</div>
+<div class="modal-body">
+	<form>
+		<div class="form-group">
+			<input type="text" placeholder="Title" class="form-control" ng-model="newBook.title">
+		</div>
+		<div class="form-group">
+			<select class="form-control" ng-model="newBook.author_id" ng-options="author.id as author.name for author in authors">
+				<option value="" disabled>-- Select author --</option>
+			</select>
+		</div>
+		<div class="form-group">
+			<input type="number" placeholder="Cost" class="form-control" ng-model="newBook.cost">
+		</div>
+		<div class="form-group">
+			<input type="number" placeholder="Rate" class="form-control" min="0" max="10" ng-model="newBook.rate">
+		</div>
+		<div class="form-group">
+			<textarea rows="10" placeholder="Intro" class="form-control" ng-model="newBook.intro"></textarea>
+		</div>
+	</form>
+</div>
+<div class="modal-footer">
+	<button class="btn btn-danger" ng-click="cancel()">Cancel</button>
+	<button class="btn btn-success" ng-click="ok()">Ok</button>
+</div>

app/modals/confirm/confirm.controller.js

@@ -0,0 +1,16 @@
+app.controller('Confirm', confirmController);
+
+function confirmController($scope, $uibModalInstance) {
+	$scope.cancel = function() {
+		$uibModalInstance.close(false);
+	};
+
+	$scope.ok = function() {
+		$uibModalInstance.close(true);
+	}
+}
+
+confirmController.$inject = [
+	'$scope',
+	'$uibModalInstance',
+];

app/modals/confirm/confirm.template.html

@@ -0,0 +1,10 @@
+<div class="modal-header">
+	<h3 class="modal-title">Confirm</h3>
+</div>
+<div class="modal-body">
+	Are you sure?
+</div>
+<div class="modal-footer">
+	<button class="btn btn-danger" ng-click="cancel()">Cancel</button>
+	<button class="btn btn-success" ng-click="ok()">Ok</button>
+</div>

app/services/books.factory.js

@@ -7,7 +7,9 @@ app.factory('books.repository', ['webApi', '$http', function(webApi, $http) {
 		getBooks: _getBooks,
 		getBookById: _getBookById,
 		getAuthors: _getAuthors,
-		updateBookById: _updateBookById
+		updateBookById: _updateBookById,
+		addBook: _addBook,
+		deleteBook: _deleteBook
 	};
 
 	function _getBooks() {
@@ -23,6 +25,12 @@ app.factory('books.repository', ['webApi', '$http', function(webApi, $http) {
 	function _updateBookById(id, book) {
 		return $http.put(webApi.DOMAIN + '/api/v2/books/' + id, book);
 	};
+	function _addBook(data){
+		return $http.post(webApi.DOMAIN + '/api/v2/books', data);
+	}
+	function _deleteBook(id){
+		return $http.delete(webApi.DOMAIN + '/api/v2/books/' + id);
+	}
 }]);
 
 })();

app/views/authors.template.html

@@ -0,0 +1,16 @@
+<h2 class="page-header">Athors</h2>
+<table class="table table-hover">
+    <thead>
+        <th>Firstname</th>
+        <th>Lastname</th>
+    </thead>
+    <tbody ng-repeat="author in authors">
+        <th>{{author.firstname}}</th>
+        <th>{{author.lastname}}</th>
+        <th class="float-right">
+            <button  class="btn-danger btn-xs pull-right" ng-click="deteteAuthor(author)"><i class="glyphicon glyphicon-trash"></i></button>
+            <button  class="btn-warning btn-xs pull-right"><i class="glyphicon glyphicon-pencil"></i></button>
+            
+        </th>
+    </tbody>
+</table>

app/views/books-list.template.html

@@ -1,6 +1,7 @@
 <div class="page-header">
   <h1>Books list</h1>
 </div>
+<button class="btn btn-primary pull-right" style="margin-bottom: 20px" ng-click="addBook()"><i class="glyphicon glyphicon-plus"></i>Add Book</button>
 <input type="text" placeholder="Filter" class="form-control" ng-model="searchString" /><br />
 <table class="table table-hover">
   <thead>

app/views/header.template.html

@@ -7,6 +7,7 @@
             <ul class="nav navbar-nav">
                <li ng-class="{active: currentMenuItem === '/'}"><a href="#/">Home</a></li>
                <li ng-class="{active: currentMenuItem === '/books'}"><a href="#/books">Books</a></li>
+               <li ng-class="{active: currentMenuItem === '/authors'}"><a href="#/authors">Authors</a></li>
             </ul>
             <ul class="nav navbar-nav navbar-right">
                <li ng-if="!isLogged()" ng-class="{active: currentMenuItem == '/login'}">

index.html

@@ -14,18 +14,22 @@
 	  </div>
 
 	  <script src="node_modules/angular/angular.js"></script> 
-	  <script src="node_modules/angular-route/angular-route.min.js"></script>
+		<script src="node_modules/angular-route/angular-route.min.js"></script>
+		<script src="node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
 	  <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>
+		<script src="app/controllers/header.controller.js"></script>
+		<script src="app/controllers/authors.controller.js"></script>
 	  <script src="app/services/books.factory.js"></script>
 	  <script src="app/controllers/bookdetails.controller.js"></script>
-	  <script src="app/controllers/login.controller.js"></script>
+		<script src="app/controllers/login.controller.js"></script>
+		<script src="app/controllers/addBook.controller.js"></script>
+		<script src="app/modals/confirm/confirm.controller.js"></script>
 	  <script src="app/services/account.factory.js"></script>
-
+		
 	</body>
 </html>

package.json

@@ -17,7 +17,9 @@
   },
   "dependencies": {
     "angular": "^1.6.6",
+    "angular-bootstrap": "^0.12.2",
     "angular-route": "^1.7.1",
+    "angular-ui-bootstrap": "^2.5.6",
     "bootstrap": "^3.3.7"
   }
 }