front: add book

Author: YahiaDev

. gitignore

@@ -11,7 +11,7 @@ front/node_modules/*
 
 ### Java ###
 *.class
-
+bin/
 # BlueJ files
 *.ctxt
 

back/bin/main/application.properties

@@ -1,9 +1,14 @@
 
 <section class="home">
   <div class="home__card">
-    
-    <b-form-input v-model="bookTitle" type="text" placeholder="Enter book title" />
-      
+    <b-row class="my-1">
+      <b-col sm="10">
+        <b-form-input v-model="bookTitle" type="text" placeholder="Enter book title" />
+      </b-col>
+      <b-col sm="2">
+        <b-button variant="success" @click="showAddBookModal">Add Book</b-button>
+      </b-col>
+    </b-row>
     <b-card v-for="(book, index) in selectedBooks" :key="book.id">
       <b-media>
         <b-img slot="aside" blank blank-color="#ccc" width="64" alt="placeholder" />
@@ -14,6 +19,44 @@ <h5 class="mt-0 home__card__text">{{ book.title }}</h5>
         </p>
       </b-media>
     </b-card>
+
+    <b-modal ref="add-book-modal" 
+             title="Add new Book"
+             @show="resetModal"
+             @hidden="resetModal"
+             @ok="handleOk">
+             <form ref="form" @submit.stop.prevent="handleSubmit">
+              <b-form-group
+                ref="bookTitleInput"
+                :state="bookTitleState"
+                label="Title"
+                label-for="book-title-input"
+                invalid-feedback="Name is required"
+                class="text-left">
+                <b-form-input
+                  id="book-title-input"
+                  v-model="newBook.title"
+                  :state="bookTitleState"
+                  required
+                ></b-form-input>
+              </b-form-group>
+
+              <b-form-group
+                :state="bookDescriptionState"
+                label="Description"
+                label-for="book-description-input"
+                invalid-feedback="Description is required"
+                class="text-left"
+              >
+                <b-form-textarea
+                  id="book-description-input"
+                  v-model="newBook.description"
+                  :state="bookDescriptionState"
+                  required
+                ></b-form-textarea>
+              </b-form-group>
+            </form>
+    </b-modal>
   </div>
 </section>
 

back/bin/main/com/books/com/books/controller/BooksController.class

@@ -8,7 +8,10 @@ export default {
     return {
       books: [],
       bookTitle: '',
-      selectedBooksData: []
+      selectedBooksData: [],
+      newBook: {title: '', description: ''},
+      bookTitleState: null,
+      bookDescriptionState: null
     }
   },
   computed: {
@@ -36,7 +39,47 @@ export default {
 
   },
   methods: {
-    
+    showAddBookModal() {
+      this.$refs['add-book-modal'].show();
+    },
+    handleSubmit() {
+      // Exit when the form isn't valid
+      if (!this.checkFormValidity()) {
+        return;
+      }
+
+      console.log('book title is' + this.newBook.title);
+      
+
+      axios.post("http://localhost:8090/book/add", this.newBook).then(response => { 
+        /* eslint-disable */ 
+        console.log(response.data);
+        this.books = response.data;
+       });
+
+      // Hide the modal manually
+      this.$nextTick(() => {
+        // this.$refs.modal.hide();
+        this.$refs['add-book-modal'].hide();
+      });
+    },
+    handleOk(bvModalEvt) {
+      // Prevent modal from closing
+      bvModalEvt.preventDefault();
+      // Trigger submit handler
+      this.handleSubmit();
+    },
+    checkFormValidity() {
+      this.bookTitleState  = this.newBook.title === '' ? 'invalid': 'valid';
+      this.bookDescriptionState  = this.newBook.title === '' ? 'invalid': 'valid';
+      return this.newBook.title !== '' && this.newBook.title !== '';
+    },
+    resetModal() {
+      this.newBook.title = '';
+      this.newBook.description = '';
+      this.bookTitleState = null;
+      this.bookDescriptionState  = null;
+    },
 
   }
 }