Skip to content

Commit cd04125

Browse files
nil1729nil1729
committed
add filter
1 parent 230743f commit cd04125

File tree

17 files changed

+481
-37
lines changed

17 files changed

+481
-37
lines changed

‎vue-noob-4/.gitignore‎

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,24 @@
11
node_modules
2-
/config
2+
.env
3+
.DS_Store
4+
node_modules
5+
/dist
6+
7+
# local env files
8+
.env.local
9+
.env.*.local
10+
11+
# Log files
12+
npm-debug.log*
13+
yarn-debug.log*
14+
yarn-error.log*
15+
pnpm-debug.log*
16+
17+
# Editor directories and files
18+
.idea
19+
.vscode
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎vue-noob-4/client/src/App.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ export default {
2222

2323
<style>
2424
button,
25-
input {
25+
input,
26+
.btn {
2627
box-shadow: none !important;
2728
outline: none !important;
2829
}

‎vue-noob-4/client/src/components/layouts/Alerts.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<span aria-hidden="true">&times;</span>
88
</button>
99
</div>
10-
<div class="toast-body">{{ $store.state.alerts && $store.state.alerts.msg }}</div>
10+
<div class="toast-body" v-html="$store.state.alerts && $store.state.alerts.msg"></div>
1111
</div>
1212
</div>
1313
</template>

‎vue-noob-4/client/src/components/layouts/FilterInput.vue‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div class="form-group my-3">
3+
<input
4+
v-model="text"
5+
type="text"
6+
class="form-control"
7+
placeholder="Enter Something here ... eg. John Doe"
8+
/>
9+
</div>
10+
</template>
11+
12+
<script>
13+
export default {
14+
name: "AppFilterInput",
15+
data() {
16+
return {
17+
text: "",
18+
};
19+
},
20+
watch: {
21+
text() {
22+
if (this.text === "") {
23+
this.$store.commit("CLEAR_FILTER");
24+
} else {
25+
this.$store.commit("FILTER_LIST", this.text);
26+
}
27+
},
28+
},
29+
};
30+
</script>
31+
32+
<style>
33+
</style>

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

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<template>
2+
<div class="container">
3+
<h1
4+
class="text-primary"
5+
>Edit {{ $store.state.customerLoading ? 'Customer' : $store.state.currentCustomer.firstName }}</h1>
6+
<hr class="my-2" />
7+
<h3 v-if="$store.state.customerLoading" class="text-center text-success my-3">Loading ...</h3>
8+
<form v-else @submit.prevent="handleSubmit">
9+
<div class="jumbotron my-3 p-4">
10+
<h4>Customer Info</h4>
11+
<div class="form-group">
12+
<label>First Name</label>
13+
<input
14+
required
15+
v-model="customer.firstName"
16+
type="text"
17+
class="form-control"
18+
placeholder="Enter Fisrt Name"
19+
/>
20+
</div>
21+
<div class="form-group">
22+
<label>Last Name</label>
23+
<input
24+
required
25+
v-model="customer.lastName"
26+
type="text"
27+
class="form-control"
28+
placeholder="Enter Last Name"
29+
/>
30+
</div>
31+
</div>
32+
<div class="jumbotron my-3 p-4">
33+
<h4>Customer Contact</h4>
34+
<div class="form-group">
35+
<label>Email Address</label>
36+
<input
37+
required
38+
v-model="customer.email"
39+
type="email"
40+
class="form-control"
41+
placeholder="Enter Email Address"
42+
/>
43+
</div>
44+
<div class="form-group">
45+
<label>Phone Number</label>
46+
<input
47+
required
48+
v-model="customer.phone"
49+
type="tel"
50+
class="form-control"
51+
placeholder="Enter Phone Number"
52+
/>
53+
</div>
54+
</div>
55+
<div class="jumbotron my-3 p-4">
56+
<h4>Customer location</h4>
57+
<div class="form-group">
58+
<label>Address</label>
59+
<input
60+
required
61+
v-model="customer.address"
62+
type="text"
63+
class="form-control"
64+
placeholder="Enter Full Address"
65+
/>
66+
</div>
67+
<div class="form-group">
68+
<label>City</label>
69+
<input
70+
required
71+
v-model="customer.city"
72+
type="text"
73+
class="form-control"
74+
placeholder="Enter City"
75+
/>
76+
</div>
77+
<div class="form-group">
78+
<label>State</label>
79+
<input
80+
v-model="customer.state"
81+
type="text"
82+
class="form-control"
83+
placeholder="Enter State"
84+
/>
85+
</div>
86+
<div class="text-center">
87+
<button class="btn btn-success">{{ submitted ? 'Loading ...' : 'Submit' }}</button>
88+
</div>
89+
</div>
90+
</form>
91+
</div>
92+
</template>
93+
94+
<script>
95+
export default {
96+
name: "AppAddPage",
97+
data() {
98+
return {
99+
customer: {
100+
firstName: "",
101+
lastName: "",
102+
email: "",
103+
phone: "",
104+
city: "",
105+
address: "",
106+
state: "",
107+
},
108+
submitted: false,
109+
};
110+
},
111+
created: async function () {
112+
if (!this.$store.state.currentCustomer) {
113+
const err = await this.$store.dispatch("customer", this.$route.params.id);
114+
if (err) {
115+
return this.$store.dispatch("setAlert", {
116+
type: "Error",
117+
msg: err[0].message,
118+
});
119+
}
120+
}
121+
this.customer = this.$store.state.currentCustomer;
122+
},
123+
methods: {
124+
handleSubmit: async function () {
125+
this.submitted = true;
126+
if (!this.validateEmail(this.customer.email)) {
127+
this.submitted = false;
128+
return this.$store.dispatch("setAlert", {
129+
type: "Error",
130+
msg: "Please enter a valid Email Address",
131+
});
132+
}
133+
const err = await this.$store.dispatch("updateCustomer", {
134+
customer: this.customer,
135+
_id: this.$route.params.id,
136+
});
137+
if (err) {
138+
this.submitted = false;
139+
return this.$store.dispatch("setAlert", {
140+
type: "Error",
141+
msg: err[0].message,
142+
});
143+
}
144+
this.submitted = false;
145+
this.$store.dispatch("setAlert", {
146+
type: "Notification",
147+
msg: `${this.customer.firstName} is Successfully Updated with Email <em>${this.customer.email}</em>`,
148+
});
149+
this.$router.push("/");
150+
},
151+
validateEmail(email) {
152+
const reg = new RegExp(
153+
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
154+
);
155+
return reg.test(email);
156+
},
157+
},
158+
beforeRouteLeave(to, from, next) {
159+
this.$store.commit("CLEAR_CURRENT_CUSTOMER");
160+
next();
161+
},
162+
};
163+
</script>
164+
165+
<style>
166+
</style>

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div class="container">
33
<h1 class="text-dark">Customers</h1>
4+
<app-filter-input />
45
<table class="table table-hover mt-4 border">
56
<thead>
67
<tr>
@@ -16,11 +17,21 @@
1617
<h5 class="text-success text-center">Loading ...</h5>
1718
</td>
1819
</tr>
19-
<tr v-else-if="!$store.state.loading && customers.length === 0">
20+
<tr
21+
v-else-if="!$store.state.loading && ( customers.length === 0 || filtered && filtered.length === 0)"
22+
>
2023
<td colspan="4">
2124
<h5 class="text-success text-center">No Customers Found to Show</h5>
2225
</td>
2326
</tr>
27+
<tr v-else-if="filtered" v-for="customer in filtered" :key="customer._id">
28+
<td>{{ customer.firstName }}</td>
29+
<td>{{ customer.lastName }}</td>
30+
<td>{{ customer.email }}</td>
31+
<td>
32+
<router-link class="btn btn-secondary" :to="`/view/${customer._id}`">View</router-link>
33+
</td>
34+
</tr>
2435
<tr v-else v-for="customer in customers" :key="customer._id">
2536
<td>{{ customer.firstName }}</td>
2637
<td>{{ customer.lastName }}</td>
@@ -35,8 +46,12 @@
3546
</template>
3647

3748
<script>
49+
import FilterInput from "../layouts/FilterInput";
3850
export default {
3951
name: "AppHomePage",
52+
components: {
53+
appFilterInput: FilterInput,
54+
},
4055
created: async function () {
4156
const err = await this.$store.dispatch("customers");
4257
if (err) {
@@ -50,6 +65,13 @@ export default {
5065
customers() {
5166
return this.$store.state.customers;
5267
},
68+
filtered() {
69+
return this.$store.state.filteredList;
70+
},
71+
},
72+
beforeRouteLeave(to, from, next) {
73+
this.$store.commit("CLEAR_FILTER");
74+
next();
5375
},
5476
};
5577
</script>

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<div class="mt-3 d-flex align-items-center">
77
<h1 class="text-dark">{{ customer.firstName }} {{ customer.lastName }}</h1>
88
<div class="ml-auto">
9-
<button class="btn btn-info">Edit</button>
9+
<router-link :to="`/edit/${$route.params.id}`" class="btn btn-info">Edit</router-link>
1010
<button
1111
@click="handleDelete"
1212
class="btn btn-danger ml-2"
@@ -95,8 +95,12 @@ export default {
9595
},
9696
},
9797
beforeRouteLeave(to, from, next) {
98-
this.$store.commit("CLEAR_CURRENT_CUSTOMER");
99-
next();
98+
if (to.name === "EditCustomer") {
99+
next();
100+
} else {
101+
this.$store.commit("CLEAR_CURRENT_CUSTOMER");
102+
next();
103+
}
100104
},
101105
};
102106
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export default {
126126
this.submitted = false;
127127
this.$store.dispatch("setAlert", {
128128
type: "Notification",
129-
msg: `${this.customer.firstName} is Successfully added with Email ${this.customer.email}`,
129+
msg: `${this.customer.firstName} is Successfully added with Email <em>${this.customer.email}</em>`,
130130
});
131131
this.$router.push("/");
132132
},

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import Home from './components/pages/Home.vue';
22
import About from './components/pages/About.vue';
33
import AddCustomer from './components/pages/addCustomer.vue';
44
import ViewCustomer from './components/pages/View.vue';
5+
import EditCustomer from './components/pages/Edit.vue';
56
const routes = [
67
{
78
path: '/',
@@ -23,6 +24,11 @@ const routes = [
2324
component: ViewCustomer,
2425
name: 'ViewCustomer',
2526
},
27+
{
28+
path: '/edit/:id',
29+
component: EditCustomer,
30+
name: 'EditCustomer',
31+
},
2632
];
2733

2834
export default routes;

0 commit comments

Comments
 (0)