Skip to content

Commit d12c042

Browse files
committed
front: add book
1 parent 858ceb7 commit d12c042

File tree

5 files changed

+92
-27
lines changed

5 files changed

+92
-27
lines changed

. gitignore

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ front/node_modules/*
1111

1212
### Java ###
1313
*.class
14-
14+
bin/
1515
# BlueJ files
1616
*.ctxt
1717

back/bin/main/application.properties

Lines changed: 0 additions & 21 deletions
This file was deleted.
-1.75 KB
Binary file not shown.
Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11

22
<section class="home">
33
<div class="home__card">
4-
5-
<b-form-input v-model="bookTitle" type="text" placeholder="Enter book title" />
6-
4+
<b-row class="my-1">
5+
<b-col sm="10">
6+
<b-form-input v-model="bookTitle" type="text" placeholder="Enter book title" />
7+
</b-col>
8+
<b-col sm="2">
9+
<b-button variant="success" @click="showAddBookModal">Add Book</b-button>
10+
</b-col>
11+
</b-row>
712
<b-card v-for="(book, index) in selectedBooks" :key="book.id">
813
<b-media>
914
<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>
1419
</p>
1520
</b-media>
1621
</b-card>
22+
23+
<b-modal ref="add-book-modal"
24+
title="Add new Book"
25+
@show="resetModal"
26+
@hidden="resetModal"
27+
@ok="handleOk">
28+
<form ref="form" @submit.stop.prevent="handleSubmit">
29+
<b-form-group
30+
ref="bookTitleInput"
31+
:state="bookTitleState"
32+
label="Title"
33+
label-for="book-title-input"
34+
invalid-feedback="Name is required"
35+
class="text-left">
36+
<b-form-input
37+
id="book-title-input"
38+
v-model="newBook.title"
39+
:state="bookTitleState"
40+
required
41+
></b-form-input>
42+
</b-form-group>
43+
44+
<b-form-group
45+
:state="bookDescriptionState"
46+
label="Description"
47+
label-for="book-description-input"
48+
invalid-feedback="Description is required"
49+
class="text-left"
50+
>
51+
<b-form-textarea
52+
id="book-description-input"
53+
v-model="newBook.description"
54+
:state="bookDescriptionState"
55+
required
56+
></b-form-textarea>
57+
</b-form-group>
58+
</form>
59+
</b-modal>
1760
</div>
1861
</section>
1962

front/src/components/home/home.js

Lines changed: 45 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ export default {
88
return {
99
books: [],
1010
bookTitle: '',
11-
selectedBooksData: []
11+
selectedBooksData: [],
12+
newBook: {title: '', description: ''},
13+
bookTitleState: null,
14+
bookDescriptionState: null
1215
}
1316
},
1417
computed: {
@@ -36,7 +39,47 @@ export default {
3639

3740
},
3841
methods: {
39-
42+
showAddBookModal() {
43+
this.$refs['add-book-modal'].show();
44+
},
45+
handleSubmit() {
46+
// Exit when the form isn't valid
47+
if (!this.checkFormValidity()) {
48+
return;
49+
}
50+
51+
console.log('book title is' + this.newBook.title);
52+
53+
54+
axios.post("http://localhost:8090/book/add", this.newBook).then(response => {
55+
/* eslint-disable */
56+
console.log(response.data);
57+
this.books = response.data;
58+
});
59+
60+
// Hide the modal manually
61+
this.$nextTick(() => {
62+
// this.$refs.modal.hide();
63+
this.$refs['add-book-modal'].hide();
64+
});
65+
},
66+
handleOk(bvModalEvt) {
67+
// Prevent modal from closing
68+
bvModalEvt.preventDefault();
69+
// Trigger submit handler
70+
this.handleSubmit();
71+
},
72+
checkFormValidity() {
73+
this.bookTitleState = this.newBook.title === '' ? 'invalid': 'valid';
74+
this.bookDescriptionState = this.newBook.title === '' ? 'invalid': 'valid';
75+
return this.newBook.title !== '' && this.newBook.title !== '';
76+
},
77+
resetModal() {
78+
this.newBook.title = '';
79+
this.newBook.description = '';
80+
this.bookTitleState = null;
81+
this.bookDescriptionState = null;
82+
},
4083

4184
}
4285
}

0 commit comments

Comments
 (0)