Skip to content

Commit 05a97aa

Browse files
tgralltgrall
committed
add home page, edit and comments - #33 #22 #21 
1 parent c4af317 commit 05a97aa

File tree

13 files changed

+942
-29
lines changed

13 files changed

+942
-29
lines changed

‎sample-app/front-end/src/App.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<b-collapse id="nav-collapse" is-nav>
1414
<b-navbar-nav >
1515
<b-nav-item active >|</b-nav-item>
16-
<b-nav-item active to="/" >Basic Search</b-nav-item>
16+
<b-nav-item active to="/search" >Basic Search</b-nav-item>
1717
<b-nav-item active >|</b-nav-item>
1818
<b-nav-item active to="/faceted-search" >Faceted Search</b-nav-item>
1919
</b-navbar-nav>

‎sample-app/front-end/src/components/Comments.vue

+167
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
<template>
2+
<div class="about">
3+
<h5>Comments</h5>
4+
5+
<div class="text-left">
6+
<b-card v-for="item in comments" :key="item.id" class="mt-2">
7+
<template #header>
8+
<h5 class="mb-0 small">
9+
<b-row>
10+
<b-col>{{ item.user_id }} on {{ item.dateAsString }}</b-col>
11+
<b-col class="text-right">Rating: {{ item.rating }}</b-col>
12+
</b-row>
13+
</h5>
14+
</template>
15+
<b-card-text>{{ item.comment }}</b-card-text>
16+
<template #footer>
17+
<span class="text-right">
18+
<b-button v-on:click="deleteComment(item.id)" size="sm"
19+
>Delete</b-button
20+
>
21+
</span>
22+
</template>
23+
</b-card>
24+
25+
<hr />
26+
<div>Add new comment</div>
27+
28+
<b-form @submit="saveComment">
29+
<b-container>
30+
<b-row>
31+
<b-col class="text-right" cols="1">Name:</b-col>
32+
<b-col>
33+
<b-form-input
34+
id="input_user_id"
35+
v-model="newComment.user_id"
36+
required
37+
></b-form-input>
38+
</b-col>
39+
40+
<b-col class="text-right">Rating:</b-col>
41+
<b-col>
42+
<b-form-select
43+
v-model="newComment.rating"
44+
:options="optionsRating"
45+
></b-form-select>
46+
</b-col>
47+
</b-row>
48+
49+
<b-row class="mt-2">
50+
<b-col cols="1">Comment:</b-col>
51+
<b-col>
52+
<b-form-textarea
53+
id="input_comment"
54+
v-model="newComment.comment"
55+
required
56+
>
57+
</b-form-textarea>
58+
</b-col>
59+
</b-row>
60+
61+
<b-row class="mt-2">
62+
<b-col class="text-center">
63+
<b-button v-on:click="saveComment()" size="sm"
64+
>Save Comment</b-button
65+
>
66+
</b-col>
67+
</b-row>
68+
</b-container>
69+
</b-form>
70+
</div>
71+
</div>
72+
</template>
73+
74+
<script>
75+
import { SearchClient } from "./../lib/SearchClient";
76+
77+
export default {
78+
name: "comments-component",
79+
props: {
80+
item_type: {
81+
type: String,
82+
default: "movie",
83+
},
84+
item_id: {
85+
type: String,
86+
required: true,
87+
},
88+
},
89+
data() {
90+
return {
91+
apiServer : "node",
92+
isLoading: false,
93+
comments: [],
94+
newComment: {
95+
movie_id: this.item_id,
96+
user_id: null,
97+
comment: null,
98+
rating: null,
99+
},
100+
optionsRating: [
101+
{ value: "1", text: "1" },
102+
{ value: "2", text: "2" },
103+
{ value: "3", text: "3" },
104+
{ value: "4", text: "4" },
105+
{ value: "5", text: "5" },
106+
{ value: "6", text: "6" },
107+
{ value: "7", text: "7" },
108+
{ value: "8", text: "8" },
109+
{ value: "9", text: "9" },
110+
{ value: "10", text: "10" },
111+
],
112+
};
113+
},
114+
created() {
115+
this.fetch();
116+
},
117+
methods: {
118+
async fetch() {
119+
this.isLoading = true;
120+
const { data } = await SearchClient.getMovieComment(
121+
this.apiServer,
122+
this.item_id
123+
);
124+
this.isLoading = false;
125+
// get comments, simple layout
126+
if (data && data.docs) {
127+
this.comments = data.docs.map((comment) => {
128+
const value = {
129+
id: comment.meta.id,
130+
timestamp: comment.fields.timestamp,
131+
dateAsString: comment.fields.timestamp,
132+
user_id: comment.fields.user_id,
133+
comment: comment.fields.comment,
134+
rating: comment.fields.rating,
135+
};
136+
return value;
137+
});
138+
} else {
139+
this.comments = [];
140+
}
141+
},
142+
async deleteComment(id) {
143+
const { data } = await SearchClient.deleteCommentById(
144+
this.apiServer,
145+
id
146+
);
147+
console.log(data);
148+
this.fetch();
149+
},
150+
async saveComment() {
151+
const { data } = await SearchClient.saveNewComment(
152+
this.apiServer,
153+
this.item_id,
154+
this.newComment
155+
);
156+
console.log(data);
157+
this.newComment = {
158+
movie_id: this.item_id,
159+
user_id: null,
160+
comment: null,
161+
rating: null,
162+
};
163+
this.fetch();
164+
},
165+
},
166+
};
167+
</script>

‎sample-app/front-end/src/lib/SearchClient.js

+84-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,90 @@ export const SearchClient = {
5959
let url = `${restServer}/api/1.0/movies/group_by/${field}`;
6060
console.log(`Calling (${server}) : ${url}`);
6161
return axios.get(url);
62-
}
62+
},
63+
64+
async getMovie(server, id) {
65+
let restServer = nodeRestApiServer;
66+
67+
if (server) {
68+
if (server.toLowerCase() == "java") {
69+
restServer = javaRestApiServer
70+
} else if (server.toLowerCase() == "node") {
71+
restServer = nodeRestApiServer
72+
} if (server.toLowerCase() == "python") {
73+
restServer = pythonRestApiServer
74+
}
75+
}
76+
77+
let url = `${restServer}/api/1.0/movies/${id}`;
78+
console.log(`Calling (${server}) : ${url}`);
79+
return axios.get(url);
80+
},
6381

82+
async updateMovie(server, id, movie) {
83+
let restServer = nodeRestApiServer;
84+
if (server) {
85+
if (server.toLowerCase() == "java") {
86+
restServer = javaRestApiServer
87+
} else if (server.toLowerCase() == "node") {
88+
restServer = nodeRestApiServer
89+
} if (server.toLowerCase() == "python") {
90+
restServer = pythonRestApiServer
91+
}
92+
}
93+
let url = `${restServer}/api/1.0/movies/${id}`;
94+
return axios.post(url, movie);
95+
},
96+
97+
async getMovieComment(server, movieId) {
98+
let restServer = nodeRestApiServer;
99+
if (server) {
100+
if (server.toLowerCase() == "java") {
101+
restServer = javaRestApiServer
102+
} else if (server.toLowerCase() == "node") {
103+
restServer = nodeRestApiServer
104+
} if (server.toLowerCase() == "python") {
105+
restServer = pythonRestApiServer
106+
}
107+
}
108+
let url = `${restServer}/api/1.0/movies/${movieId}/comments`;
109+
console.log(`Calling ${url}`);
110+
return axios.get(url);
111+
},
112+
113+
async saveNewComment(server, movieId, comment) {
114+
let restServer = nodeRestApiServer;
115+
if (server) {
116+
if (server.toLowerCase() == "java") {
117+
restServer = javaRestApiServer
118+
} else if (server.toLowerCase() == "node") {
119+
restServer = nodeRestApiServer
120+
} if (server.toLowerCase() == "python") {
121+
restServer = pythonRestApiServer
122+
}
123+
}
124+
let url = `${restServer}/api/1.0/movies/${movieId}/comments`;
125+
console.log(`Calling POST ${url}`);
126+
return axios.post(url, comment);
127+
},
128+
129+
async deleteCommentById(server, commentId) {
130+
let restServer = nodeRestApiServer;
131+
if (server) {
132+
if (server.toLowerCase() == "java") {
133+
restServer = javaRestApiServer
134+
} else if (server.toLowerCase() == "node") {
135+
restServer = nodeRestApiServer
136+
} if (server.toLowerCase() == "python") {
137+
restServer = pythonRestApiServer
138+
}
139+
}
140+
let url = `${restServer}/api/1.0/comments/${commentId}`;
141+
console.log(`Calling DELETE ${url}`);
142+
return axios.delete(url);
143+
},
144+
145+
146+
64147

65148
}

‎sample-app/front-end/src/router/index.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import Vue from 'vue'
22
import VueRouter from 'vue-router'
33
import Search from '../views/Search.vue'
44
import FacetedSearch from '../views/FacetedSearch.vue'
5+
import Home from '../views/Home.vue'
6+
import MovieForm from '../views/MovieForm.vue'
57

68
Vue.use(VueRouter)
79

810
const routes = [
911
{
1012
path: '/',
1113
name: 'Home',
12-
component: Search
14+
component: Home
1315
},
1416
{
1517
path: '/search',
@@ -20,6 +22,11 @@ Vue.use(VueRouter)
2022
path: '/faceted-search',
2123
name: 'FacetedSearch',
2224
component: FacetedSearch
25+
},
26+
{
27+
path: '/movies/:id',
28+
name: 'MovieForm',
29+
component: MovieForm
2330
}
2431
]
2532

‎sample-app/front-end/src/views/FacetedSearch.vue

+7
Original file line numberDiff line numberDiff line change
@@ -142,6 +142,9 @@
142142
<b-col>
143143
{{ doc.fields.genre }}
144144
</b-col>
145+
<b-col>
146+
<b-button size="sm" @click="goToMovie( doc.meta.id)">View</b-button>
147+
</b-col>
145148
<b-col class="text-right">
146149
{{ doc.fields.rating }}
147150
</b-col>
@@ -262,6 +265,10 @@ export default {
262265
}
263266
},
264267
268+
goToMovie(id) {
269+
this.$router.push({ name: 'MovieForm', params: { id: id }});
270+
},
271+
265272
changePage(page) {
266273
this.searchOffset = page;
267274
this.search();

0 commit comments

Comments
 (0)