Now, let's implement the create board and create team pop up windows. Since these two popup windows are similar, we will only go through the details of implementing a create board popup window. We will create it in front-end/src/modals/CreateBoardModal.vue, and all of the popup windows will also be placed inside this modals folder.

Before implementing this component, we need to figure out answers to the following questions first:

• What are the responsibilities of HomePage.vue and CreateBoardModal.vue?
• How does HomePage.vue communicate with CreateBoardModal.vue?

To the first question, since the create board window shows up on the home page, it is naturally the responsibility of HomePage.vue to open the window. So, we will need to import CreateBoardModal.vue into HomePage.vue, bootstrap it, and open it up once the Create New Board button is clicked. HomePage.vue should redirect the user to the board page once the board is created. CreateBoardModal.vue is responsible for calling the boardService.create() method to save the board and then dispatch an addBoard action to the Vuex store when the request succeeds or display an error message on the window when the request fails.

For the second question, inside HomePage.Vue, the value of teamId will be passed to CreateBoardModal.vue via its properties. And HomePage.vue will listen to the created event that CreateBoardModal.vue emits.

The following is the change we make to HomePage.vue:

<template>
  <div>
    ...
    <CreateBoardModal
      :teamId="selectedTeamId"
      @created="onBoardCreated" />
  </div>
</template>

<script>
...
import CreateBoardModal from '@/modals/CreateBoardModal.vue'

export default {
  name: 'HomePage',
  ...
  components: {
    ...
    CreateBoardModal
  },
  methods: {
    ...
    createBoard (team) {
      this.selectedTeamId = team ? team.id : 0
      $('#createBoardModal').modal('show')
    },
    ...
    onBoardCreated (boardId) {
      this.$router.push({name: 'board', params: {boardId: boardId}})
    }
  }
}
</script>

As you can see, we import CreateBoardModal.vue, add it to the components list and then bootstrap it in the view. The createBoard() method is simply to open the window. Inside the onBaordCreated() method, we redirect the user to the board page.

Here is how CreateBoardModal.vue looks. For simplicity, <template> and <style> are not listed:

<script>
...
export default {
  name: 'CreateBoardModal',
  props: ['teamId'],
  ...
  mounted () {
    $('#createBoardModal').on('shown.bs.modal', () => {
      $('#boardNameInput').trigger('focus')
    })
  },
  methods: {
    saveBoard () {
      this.$v.$touch()
      if (this.$v.$invalid) { return }

      const board = {
        teamId: this.teamId,
        name: this.board.name,
        description: this.board.description
      }

      boardService.create(board).then((createdBoard) => {
        this.$store.dispatch('addBoard', createdBoard)
        this.$emit('created', createdBoard.id)
        this.close()
      }).catch(error => { this.errorMessage = error.message })
    },
    close () { ... },
  }
}
</script>

As you can see, we define a teamId property for this component. We make the boardNameInput field focused once the window is open inside the mouted() life cycle hook. Inside the saveBoard() method, we perform data validation using Vuelidate. When all the fields are valid, we call the boardService to save the board. Once the board is saved, we dispatch the action to put it into the Vuex store and then tell the HomePage.vue that the ID of the new board by emitting the created event. Then, we close the modal window. Inside the close() method, we will need to clean up, such as by resetting the data model to the initial values. When things go wrong, we will show the error message in the same way we did in LoginPage.vue.

Since CreateTeamModal.vue is similar to CreateBoardModal.vue, we won't list it here. The following is the commit history of creating these two windows: