Skip to content

Commit 230743f

Browse files
nil1729nil1729
committed
add routes
1 parent c603cbc commit 230743f

File tree

7 files changed

+258
-4
lines changed

7 files changed

+258
-4
lines changed

‎vue-noob-4/client/public/index.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
rel="stylesheet"
1111
href="https://bootswatch.com/4/spacelab/bootstrap.min.css"
1212
/>
13+
<script
14+
src="https://kit.fontawesome.com/57aeb32e6c.js"
15+
crossorigin="anonymous"
16+
></script>
1317
</head>
1418
<body>
1519
<noscript>

‎vue-noob-4/client/src/components/pages/About.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<h1 class="display-4">vCustomers MEVN Stack App</h1>
55
<hr class="my-2" />
66
<p
7-
class="lead"
7+
class="lead mb-4"
88
>This is a Simple Application that uses NodeJS to manage backends and VueJS as Frontend</p>
99
<a
1010
target="_blank"

‎vue-noob-4/client/src/components/pages/Home.vue‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,56 @@
11
<template>
22
<div class="container">
33
<h1 class="text-dark">Customers</h1>
4+
<table class="table table-hover mt-4 border">
5+
<thead>
6+
<tr>
7+
<th scope="col">First Name</th>
8+
<th scope="col">Last Name</th>
9+
<th scope="col">Email Address</th>
10+
<th scope="col"></th>
11+
</tr>
12+
</thead>
13+
<tbody>
14+
<tr v-if="$store.state.loading">
15+
<td colspan="4">
16+
<h5 class="text-success text-center">Loading ...</h5>
17+
</td>
18+
</tr>
19+
<tr v-else-if="!$store.state.loading && customers.length === 0">
20+
<td colspan="4">
21+
<h5 class="text-success text-center">No Customers Found to Show</h5>
22+
</td>
23+
</tr>
24+
<tr v-else v-for="customer in customers" :key="customer._id">
25+
<td>{{ customer.firstName }}</td>
26+
<td>{{ customer.lastName }}</td>
27+
<td>{{ customer.email }}</td>
28+
<td>
29+
<router-link class="btn btn-secondary" :to="`/view/${customer._id}`">View</router-link>
30+
</td>
31+
</tr>
32+
</tbody>
33+
</table>
434
</div>
535
</template>
636

737
<script>
838
export default {
939
name: "AppHomePage",
40+
created: async function () {
41+
const err = await this.$store.dispatch("customers");
42+
if (err) {
43+
return this.$store.dispatch("setAlert", {
44+
type: "Error",
45+
msg: err[0].message,
46+
});
47+
}
48+
},
49+
computed: {
50+
customers() {
51+
return this.$store.state.customers;
52+
},
53+
},
1054
};
1155
</script>
1256

‎vue-noob-4/client/src/components/pages/View.vue‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,108 @@
1+
<template>
2+
<div class="container">
3+
<router-link to="/">Back</router-link>
4+
<h3 v-if="$store.state.customerLoading" class="text-center text-success my-3">Loading ...</h3>
5+
<div v-else>
6+
<div class="mt-3 d-flex align-items-center">
7+
<h1 class="text-dark">{{ customer.firstName }} {{ customer.lastName }}</h1>
8+
<div class="ml-auto">
9+
<button class="btn btn-info">Edit</button>
10+
<button
11+
@click="handleDelete"
12+
class="btn btn-danger ml-2"
13+
>{{ dltBtnClicked ? 'Loading ...' : 'Delete' }}</button>
14+
</div>
15+
</div>
16+
<hr class="my-2" />
17+
<ul class="list-group">
18+
<li class="list-group-item">
19+
<p class="lead">
20+
<i class="mr-4 fas fa-phone-alt"></i>
21+
{{ customer.phone }}
22+
</p>
23+
</li>
24+
<li class="list-group-item">
25+
<p class="lead">
26+
<i class="mr-4 fas fa-envelope"></i>
27+
{{ customer.email }}
28+
</p>
29+
</li>
30+
</ul>
31+
<ul class="list-group my-3">
32+
<li class="list-group-item">
33+
<p class="lead">
34+
<i class="mr-4 fas fa-map-marked-alt"></i>
35+
{{ customer.address }}
36+
</p>
37+
</li>
38+
<li class="list-group-item">
39+
<p class="lead">
40+
<i class="mr-4 fas fa-city"></i>
41+
{{ customer.city }}
42+
</p>
43+
</li>
44+
<li class="list-group-item">
45+
<p class="lead">
46+
<i class="mr-4 fas fa-globe-asia"></i>
47+
{{ customer.state }}
48+
</p>
49+
</li>
50+
</ul>
51+
</div>
52+
</div>
53+
</template>
54+
55+
<script>
56+
export default {
57+
name: "AppCustomerViewPage",
58+
data() {
59+
return {
60+
dltBtnClicked: false,
61+
};
62+
},
63+
created: async function () {
64+
const err = await this.$store.dispatch("customer", this.$route.params.id);
65+
if (err) {
66+
return this.$store.dispatch("setAlert", {
67+
type: "Error",
68+
msg: err[0].message,
69+
});
70+
}
71+
},
72+
computed: {
73+
customer() {
74+
return this.$store.state.currentCustomer;
75+
},
76+
},
77+
methods: {
78+
handleDelete: async function () {
79+
this.dltBtnClicked = true;
80+
const err = await this.$store.dispatch(
81+
"deleteCustomer",
82+
this.$route.params.id
83+
);
84+
if (err) {
85+
return this.$store.dispatch("setAlert", {
86+
type: "Error",
87+
msg: err[0].message,
88+
});
89+
}
90+
this.$store.dispatch("setAlert", {
91+
type: "Notification",
92+
msg: `${this.customer.firstName} is Successfully Deleted`,
93+
});
94+
this.$router.push("/");
95+
},
96+
},
97+
beforeRouteLeave(to, from, next) {
98+
this.$store.commit("CLEAR_CURRENT_CUSTOMER");
99+
next();
100+
},
101+
};
102+
</script>
103+
104+
<style scoped>
105+
.lead {
106+
margin-bottom: 0;
107+
}
108+
</style>

‎vue-noob-4/client/src/components/pages/addCustomer.vue‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,13 +109,26 @@ export default {
109109
handleSubmit: async function () {
110110
this.submitted = true;
111111
if (!this.validateEmail(this.customer.email)) {
112+
this.submitted = false;
112113
return this.$store.dispatch("setAlert", {
113114
type: "Error",
114115
msg: "Please enter a valid Email Address",
115116
});
116117
}
117-
const res = await this.$store.dispatch("addCustomer", this.customer);
118-
console.log(res, "FROM COMPONENT");
118+
const err = await this.$store.dispatch("addCustomer", this.customer);
119+
if (err) {
120+
this.submitted = false;
121+
return this.$store.dispatch("setAlert", {
122+
type: "Error",
123+
msg: err[0].message,
124+
});
125+
}
126+
this.submitted = false;
127+
this.$store.dispatch("setAlert", {
128+
type: "Notification",
129+
msg: `${this.customer.firstName} is Successfully added with Email ${this.customer.email}`,
130+
});
131+
this.$router.push("/");
119132
},
120133
validateEmail(email) {
121134
const reg = new RegExp(

‎vue-noob-4/client/src/routes.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import Home from './components/pages/Home.vue';
22
import About from './components/pages/About.vue';
33
import AddCustomer from './components/pages/addCustomer.vue';
4+
import ViewCustomer from './components/pages/View.vue';
45
const routes = [
56
{
67
path: '/',
@@ -17,6 +18,11 @@ const routes = [
1718
component: AddCustomer,
1819
name: 'AddCustomer',
1920
},
21+
{
22+
path: '/view/:id',
23+
component: ViewCustomer,
24+
name: 'ViewCustomer',
25+
},
2026
];
2127

2228
export default routes;

‎vue-noob-4/client/src/store.js‎

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,57 @@ const store = new Vuex.Store({
2525
state: {
2626
customers: [],
2727
alerts: null,
28+
loading: false,
29+
customerLoading: false,
30+
currentCustomer: null,
2831
},
2932
getters: {},
3033
actions: {
34+
customers: async context => {
35+
const query = JSON.stringify({
36+
query: `
37+
query {
38+
customers {
39+
email
40+
_id
41+
firstName
42+
lastName
43+
}
44+
}
45+
`,
46+
});
47+
context.commit('SET_LOADING', true);
48+
const res = await sendRequest(query);
49+
context.commit('SET_LOADING', false);
50+
if (res.errors) {
51+
return res.errors;
52+
}
53+
context.commit('SET_CUSTOMERS', res.data.customers);
54+
},
55+
customer: async (context, payload) => {
56+
context.commit('SET_CUSTOMER_LOADING', true);
57+
const query = JSON.stringify({
58+
query: `
59+
query {
60+
customer (_id: "${payload}") {
61+
email
62+
phone
63+
firstName
64+
lastName
65+
address
66+
state
67+
city
68+
}
69+
}
70+
`,
71+
});
72+
const res = await sendRequest(query);
73+
context.commit('SET_CUSTOMER_LOADING', false);
74+
if (res.errors) {
75+
return res.errors;
76+
}
77+
context.commit('VIEW_CUSTOMER', res.data.customer);
78+
},
3179
addCustomer: async (context, customer) => {
3280
const query = JSON.stringify({
3381
query: `
@@ -54,6 +102,22 @@ const store = new Vuex.Store({
54102
}
55103
context.commit('ADD_CUSTOMER', res.data.createCustomer);
56104
},
105+
deleteCustomer: async (context, payload) => {
106+
const query = JSON.stringify({
107+
query: `
108+
mutation {
109+
deleteCustomer(_id: "${payload}") {
110+
email
111+
firstName
112+
}
113+
}
114+
`,
115+
});
116+
const res = await sendRequest(query);
117+
if (res.errors) {
118+
return res.errors;
119+
}
120+
},
57121
setAlert: async (context, payload) => {
58122
context.commit('SET_ALERT', payload);
59123
setTimeout(() => {
@@ -71,7 +135,22 @@ const store = new Vuex.Store({
71135
return (state.alerts = null);
72136
},
73137
ADD_CUSTOMER(state, payload) {
74-
return (state.customers = [...state.customers, ...payload]);
138+
return (state.customers = [...state.customers, payload]);
139+
},
140+
SET_LOADING(state, payload) {
141+
return (state.loading = payload);
142+
},
143+
SET_CUSTOMERS(state, payload) {
144+
return (state.customers = payload);
145+
},
146+
SET_CUSTOMER_LOADING(state, payload) {
147+
return (state.customerLoading = payload);
148+
},
149+
VIEW_CUSTOMER(state, payload) {
150+
return (state.currentCustomer = payload);
151+
},
152+
CLEAR_CURRENT_CUSTOMER(state) {
153+
return (state.currentCustomer = null);
75154
},
76155
},
77156
});

0 commit comments

Comments
 (0)