booker/client/src/components/Books.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-sm-10">
                <h1>Books</h1>
                <hr>
                <br><br>
                <alert :variant="alertVariant" :message="message" v-if="showMessage" v-on:alert-closed="showMessage = !showMessage"></alert>
                <button type="button" class="btn btn-success btn-sm" v-b-modal.book-modal>Add Book</button>
                <br><br>
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th scope="col">Title</th>
                        <th scope="col">Author</th>
                        <th scope="col">Read?</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(book, index) in books" :key="index">
                        <td>{{ book.title }}</td>
                        <td>{{ book.author }}</td>
                        <td>
                            <span v-if="book.read">Yes</span>
                            <span v-else>No</span>
                        </td>
                        <td>
                            <button type="button" class="btn btn-warning btn-sm" v-b-modal.book-update-modal @click="editBook(book)">Update</button>
                            <button type="button" class="btn btn-danger btn-sm">Delete</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <b-modal ref="addBookModal"
                 id="book-modal"
                 title="Add a new book"
                 hide-footer>
            <b-form @submit.prevent="onSubmit" @reset.prevent="onReset" class="w-100">
                <b-form-group id="form-title-group"
                              label="Title:"
                              label-for="form-title-input">
                    <b-form-input id="form-title-input"
                                  type="text"
                                  v-model="addBookForm.title"
                                  required
                                  placeholder="Enter title">
                    </b-form-input>
                </b-form-group>
                <b-form-group id="form-author-group"
                              label="Author:"
                              label-for="form-author-input">
                    <b-form-input id="form-author-input"
                                  type="text"
                                  v-model="addBookForm.author"
                                  required
                                  placeholder="Enter author">
                    </b-form-input>
                </b-form-group>
                <b-form-group id="form-read-group">
                    <b-form-checkbox-group v-model="addBookForm.read" id="form-checks">
                        <b-form-checkbox value="true">Read?</b-form-checkbox>
                    </b-form-checkbox-group>
                </b-form-group>
                <b-button type="submit" variant="primary">Submit</b-button>
                <b-button type="reset" variant="danger">Reset</b-button>
            </b-form>
        </b-modal>
        <b-modal ref="editBookModal"
         id="book-update-modal"
         title="Update"
         hide-footer>
          <b-form @submit.prevent="onSubmitUpdate" @reset.prevent="onResetUpdate" class="w-100">
          <b-form-group id="form-title-edit-group"
                        label="Title:"
                        label-for="form-title-edit-input">
              <b-form-input id="form-title-edit-input"
                            type="text"
                            v-model="editForm.title"
                            required
                            placeholder="Enter title">
              </b-form-input>
            </b-form-group>
            <b-form-group id="form-author-edit-group"
                          label="Author:"
                          label-for="form-author-edit-input">
                <b-form-input id="form-author-edit-input"
                              type="text"
                              v-model="editForm.author"
                              required
                              placeholder="Enter author">
                </b-form-input>
              </b-form-group>
            <b-form-group id="form-read-edit-group">
              <b-form-checkbox-group v-model="editForm.read" id="form-checks">
                <b-form-checkbox value="true">Read?</b-form-checkbox>
              </b-form-checkbox-group>
            </b-form-group>
            <b-button type="submit" variant="primary">Update</b-button>
            <b-button type="reset" variant="danger">Cancel</b-button>
          </b-form>
        </b-modal>
    </div>
</template>

<style scoped lang="scss">
    .btn {
    margin-right: 10px;
    }

</style>

<script>

import Alert from '@/components/Alert'
import { mapState, mapActions} from 'vuex'

export default {
    name: 'Books',
    components: {
      alert: Alert,
    },
    data() {
        return {
            addBookForm: {
                title: '',
                author: '',
                read: [],
            },
            message: '',
            alertVariant: '',
            showMessage: false,
            editForm: {
              id: '',
              title: '',
              author: '',
              read: [],
            },
        }
    },
    methods:{
        ...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
           }
           // this is an alternative way to call actions
           // this.$store.dispatch('POST_BOOK', payload)
           this.POST_BOOK(payload)
             .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:{
        ...mapState(['books'])
    },
    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
          })
    }
}


</script>