diff --git a/client/src/app.service.js b/client/src/app.service.js index 6582459..5fc67eb 100644 --- a/client/src/app.service.js +++ b/client/src/app.service.js @@ -19,30 +19,42 @@ axios.interceptors.request.use(function (config) { const appService = { getPing() { - return new Promise((resolve) => { + return new Promise((resolve, reject) => { axios.get('/ping') .then(response => { resolve(response.data) }) - .catch(error => {alert(error)}) + .catch(error => { reject(error.status)} ) }) }, getAllBooks() { - return new Promise((resolve) => { + return new Promise((resolve, reject) => { axios.get('/books') .then(response => { resolve(response.data) }) - .catch(error => {alert(error)}) + .catch(error => { reject(error.status)} ) }) }, addBook(payload) { return new Promise((resolve, reject) => { axios.post('/books', payload) .then(response => { resolve(response.data)}) - .catch(response => { reject(response.status)} ) + .catch(error => { reject(error.status)} ) + }) + }, + updateBook(book) { + return new Promise((resolve, reject) => { + axios.put(`/books/${book.id}`, book) + .then(response => { + resolve(response.data) + }) + .catch(error => { + console.log(`Error in book update: ${error}`) + reject(error.status) }) + }) }, } -export default appService \ No newline at end of file +export default appService diff --git a/client/src/components/Alert.vue b/client/src/components/Alert.vue index e1c660b..6b3a886 100644 --- a/client/src/components/Alert.vue +++ b/client/src/components/Alert.vue @@ -1,6 +1,6 @@ @@ -96,21 +130,37 @@ export default { read: [], }, message: '', + alertVariant: '', showMessage: false, + editForm: { + id: '', + title: '', + author: '', + read: [], + }, } }, methods:{ - ...mapActions(['LOAD_BOOKS_LIST', 'POST_BOOK']), + ...mapActions(['LOAD_BOOKS_LIST', 'POST_BOOK', 'PUT_BOOK']), initForm(){ this.addBookForm.title = '' this.addBookForm.author = '' this.addBookForm.read = [] + this.addBookForm.read = []; + this.editForm.id = ''; + this.editForm.title = ''; + this.editForm.author = ''; + this.editForm.read = []; + }, + editBook(book){ + Object.assign(this.editForm, book) }, onSubmit(){ this.$refs.addBookModal.hide() let read = false if (this.addBookForm.read[0]) read = true const payload = { + id: this.addBookForm.id, title: this.addBookForm.title, author: this.addBookForm.author, read,// property shorthand @@ -118,15 +168,49 @@ export default { // this is an alternative way to call actions // this.$store.dispatch('POST_BOOK', payload) this.POST_BOOK(payload) - this.message = 'book added!' - this.showMessage = true + .then((response) => { + this.message = "Book added!" + this.alertVariant = "success" + this.showMessage = true + }) + .catch(error => { + this.message = "Error in adding book" + this.alertVariant = "danger" + this.showMessage = true + }) this.initForm() }, onReset() { //alternatively capture the event and evt.preventDefault() this.$refs.addBookModal.hide() this.initForm() - } + }, + onSubmitUpdate() { + this.$refs.editBookModal.hide() + let read = false + if (this.editForm.read[0]) read = true + const payload = { + id: this.editForm.id, + title: this.editForm.title, + author: this.editForm.author, + read, + } + this.PUT_BOOK(payload) + .then((response) => { + this.message = "Book updated" + this.alertVariant = "success" + this.showMessage = true + }) + .catch(error => { + this.message = "Error in updating book" + this.alertVariant = "danger" + this.showMessage = true + }) + }, + onResetUpdate() { + this.$refs.editBookModal.hide() + this.initForm() + }, }, computed:{ @@ -135,6 +219,13 @@ export default { created() { //this.$store.dispatch(' this.LOAD_BOOKS_LIST() + .then((response) => { + }) + .catch(error => { + this.message = "Error in fetching book list" + this.alertVariant = "danger" + this.showMessage = true + }) } } diff --git a/client/src/store.js b/client/src/store.js index a53db15..5dd8b59 100644 --- a/client/src/store.js +++ b/client/src/store.js @@ -17,16 +17,31 @@ export default new Vuex.Store({ }, ADD_BOOK: (state, book) => { state.books.push(book) - } + }, + UPDATE_BOOK: (state, book) => { + for (let item of state.books) { + if (item.id == book.id) { + Object.assign(item, book) + return + } + } + throw "No book was found by that id" + + }, }, //mutations actions: { LOAD_BOOKS_LIST({commit}) { return new Promise((resolve, reject) => { - appService.getAllBooks(). - then((data) => { commit('SET_BOOK_LIST', data.books)}) - resolve() - } + appService.getAllBooks() + .then((data) => { + commit('SET_BOOK_LIST', data.books) + resolve(data) + }) + .catch(error => { + reject(error) + }) + } ) }, POST_BOOK(context, book){ @@ -42,5 +57,18 @@ export default new Vuex.Store({ }) }) }, + PUT_BOOK(context, book){ + return new Promise((resolve, reject) => { + appService.updateBook(book) + .then(data => { + context.commit('UPDATE_BOOK', book) + resolve() + }) + .catch(data => { + console.log(data) + reject() + }) + }) + } },//actions }) diff --git a/server/booker/app.py b/server/booker/app.py index 9ab15f4..54718ed 100644 --- a/server/booker/app.py +++ b/server/booker/app.py @@ -1,21 +1,25 @@ from flask import Flask, jsonify, request from flask_cors import CORS +import uuid # config DEBUG = True BOOKS = [ { + 'id': uuid.uuid4().hex, 'title': 'On the Road', 'author': 'Jack Kerouac', 'read': True }, { + 'id': uuid.uuid4().hex, 'title': 'Harry Potter and the Philosopher\'s Stone', 'author': 'J. K. Rowling', 'read': False }, { + 'id': uuid.uuid4().hex, 'title': 'Green Eggs and Ham', 'author': 'Dr. Seuss', 'read': True @@ -23,6 +27,14 @@ BOOKS = [ ] +def remove_book(book_id): + for book in BOOKS: + if book['id'] == book_id: + BOOKS.remove(book) + return True + return False + + # app init app = Flask(__name__) app.config.from_object(__name__) @@ -43,6 +55,7 @@ def all_books(): if request.method == 'POST': post_data = request.get_json() BOOKS.append({ + 'id': uuid.uuid4().hex, 'title': post_data.get('title'), 'author': post_data.get('author'), 'read': post_data.get('read') @@ -53,5 +66,27 @@ def all_books(): return jsonify(response_object) +@app.route('/books/', methods=['PUT']) +def single_book(book_id): + response_object = {'status': 'success'} + if request.method == 'PUT': + post_data = request.get_json() + # print(post_data) + #remove_book(book_id) + # BOOKS.append({ + # 'id': uuid.uuid4().hex, + # 'title': post_data.get('title'), + # 'author': post_data.get('author'), + # 'read': post_data.get('read') + # }) + for item in BOOKS: + print(item['id']) + if item['id'] == post_data['id']: + item.update(**post_data) + break + response_object['message'] = 'Book updated!' + return jsonify(response_object) + + if __name__ == '__main__': app.run()