Skip to content

Commit c1b9f4c

Browse files
author
ahmadhussnain
committed
Updated CategoriesEdit.vue component for the delete button.
* Delete functionality has been added.
1 parent 108e62c commit c1b9f4c

File tree

1 file changed

+98
-62
lines changed

1 file changed

+98
-62
lines changed

‎resources/js/components/CategoriesIndex.vue‎

Lines changed: 98 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,109 @@
11
<template>
2-
<div class="container py-5">
3-
<div class="row">
4-
<div class="col-12">
5-
6-
<div v-if="loading" class="text-center">Loading....</div>
7-
<div v-if="Array.isArray(categories) && categories.length > 0" class="table-responsive">
8-
<a href="/categories/create" class="btn btn-primary my-4">Add new Category</a>
9-
<table class="table table-striped">
10-
<thead>
11-
<tr>
12-
<th scope="col">#</th>
13-
<th scope="col">Name</th>
14-
<th scope="col">Photo</th>
15-
<th scope="col">Actions</th>
16-
</tr>
17-
</thead>
18-
<tbody>
19-
20-
<tr v-for="(category, index) in categories" :key="category.id">
21-
<th scope="row">{{ index + 1 }}</th>
22-
<td>{{ _.capitalize(category.name) }}</td>
23-
<!-- Photo -->
24-
<td v-if="category.hasOwnProperty('photo') && category.photo">
25-
<img :src="category.photo" style="width: 80px;height: 80px" alt="Photo"/>
26-
</td>
27-
<td v-else><em>Null</em></td>
28-
<!-- End - Photo -->
29-
<td>
30-
<a :href="`/categories/${category.id}/edit`" class="btn btn-primary mr-2">Edit</a>
31-
<a :href="`/categories/${category.id}`" class="btn btn-danger">Delete</a>
32-
</td>
33-
</tr>
34-
</tbody>
35-
</table>
36-
</div>
37-
</div>
2+
<div class="container py-5">
3+
<div class="row">
4+
<div class="col-12">
5+
<div v-if="loading" class="text-center">Loading....</div>
6+
<div
7+
v-if="Array.isArray(categories) && categories.length > 0"
8+
class="table-responsive"
9+
>
10+
<a href="/categories/create" class="btn btn-primary my-4"
11+
>Add new Category</a
12+
>
13+
<table class="table table-striped">
14+
<thead>
15+
<tr>
16+
<th scope="col">#</th>
17+
<th scope="col">Name</th>
18+
<th scope="col">Photo</th>
19+
<th scope="col">Actions</th>
20+
</tr>
21+
</thead>
22+
<tbody>
23+
<tr v-for="(category, index) in categories" :key="category.id">
24+
<th scope="row">{{ index + 1 }}</th>
25+
<td>{{ _.capitalize(category.name) }}</td>
26+
<!-- Photo -->
27+
<td v-if="category.hasOwnProperty('photo') && category.photo">
28+
<img
29+
:src="category.photo"
30+
style="width: 80px; height: 80px"
31+
alt="Photo"
32+
/>
33+
</td>
34+
<td v-else><em>Null</em></td>
35+
<!-- End - Photo -->
36+
<td>
37+
<a
38+
:href="`/categories/${category.id}/edit`"
39+
class="btn btn-primary mr-2"
40+
>Edit</a
41+
>
42+
<button
43+
type="button"
44+
class="btn btn-danger"
45+
@click="deleteCategory(category.id)"
46+
>
47+
Delete
48+
</button>
49+
</td>
50+
</tr>
51+
</tbody>
52+
</table>
3853
</div>
39-
54+
</div>
4055
</div>
56+
</div>
4157
</template>
4258

4359
<script>
4460
export default {
45-
name: 'CategoriesIndex',
46-
data: function () {
47-
return {
48-
categories: [],
49-
loading: true
50-
}
51-
},
52-
mounted() {
53-
this.loadCategories();
61+
name: 'CategoriesIndex',
62+
data: function () {
63+
return {
64+
categories: [],
65+
loading: true
66+
};
67+
},
68+
mounted() {
69+
this.loadCategories();
70+
},
71+
methods: {
72+
loadCategories: function () {
73+
// Note: Please only destructure those properties which are read only
74+
// e.g. Props are read only and state should not be destructure.
75+
const self = this;
76+
77+
return axios
78+
.get('/api/categories')
79+
.then(function (response) {
80+
self.categories = response.data.data;
81+
self.loading = false;
82+
/* Since `then` already returns a new Promise, you don't need to create a new Promise. */
83+
})
84+
.catch(function (err) {
85+
self.loading = false;
86+
console.log('Error from the GET Request', err);
87+
});
5488
},
55-
methods: {
56-
loadCategories: function () {
57-
// Note: Please only destructure those properties which are read only
58-
// e.g. Props are read only and state should not be destructure.
59-
const self = this;
60-
axios.get('/api/categories').then(function (response) {
61-
setTimeout(function () {
62-
self.categories = response.data.data;
63-
self.loading = false;
64-
}, 2000);
65-
}).catch(function (err) {
66-
self.loading = false;
67-
console.log('Error from the GET Request', err);
89+
deleteCategory: function (id) {
90+
const self = this;
91+
const answer = confirm('Are you sure you want to delete the category?');
92+
if (answer) {
93+
axios
94+
.post(`api/categories/${id}`, { _method: 'DELETE' })
95+
.then(function (response) {
96+
console.log('response', response);
97+
self.loadCategories().then(function () {
98+
alert('The category has been deleted successfully.');
6899
});
69-
}
100+
})
101+
.catch(function (err) {
102+
console.log('Error', err);
103+
alert(`Sorry We can't delete the category. 🥺`);
104+
});
105+
}
70106
}
71-
72-
}
107+
}
108+
};
73109
</script>

0 commit comments

Comments
 (0)