Skip to content

Commit 108e62c

Browse files
author
ahmadhussnain
committed
Added CategoriesEdit.vue component
* web.php route added for the edit categories. * index.blade.php renders the CategoriesEdit.vue component. * Added CategoriesEdit.vue component to render the edit fields.
1 parent e980793 commit 108e62c

File tree

5 files changed

+173
-3
lines changed

5 files changed

+173
-3
lines changed

‎app/Http/Controllers/Api/CategoryController.php‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,9 @@ public function store(StoreCategoryRequest $request)
5656
// Update method
5757
public function update(Category $category, StoreCategoryRequest $request) {
5858
try {
59-
$category->update($request->all());
60-
return new CategoryResource($category);
59+
$data = $this->storeUpdateCategoryPhoto($request, $category, true);
60+
$category->update($data);
61+
return (new CategoryResource($category))->response()->setStatusCode(201);
6162
} catch (Exception $e) {
6263
abort(500,'Could not update category');
6364
}

‎resources/js/app.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ Vue.component('front-page', require('./components/FrontPage.vue').default);
1111
// id app
1212
let categoriesIndex = Vue.component('categories-index', require('./components/CategoriesIndex.vue').default);
1313
let categoriesCreate = Vue.component('categories-create', require('./components/CategoriesCreate.vue').default);
14+
let categoriesEdit = Vue.component('categories-edit', require('./components/CategoriesEdit.vue').default);
1415

1516
// Load third party vue component `laravel-vue-pagination`
1617
Vue.component('pagination', require('laravel-vue-pagination'));
@@ -20,6 +21,7 @@ new Vue({
2021
el: '#app',
2122
components: {
2223
categoriesIndex: categoriesIndex,
23-
categoriesCreate: categoriesCreate
24+
categoriesCreate: categoriesCreate,
25+
categoriesEdit: categoriesEdit
2426
}
2527
});

‎resources/js/components/CategoriesEdit.vue‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<template>
2+
<div class="container py-5">
3+
<div class="row">
4+
<div class="col-lg-12">
5+
<div v-if="loading" class="text-center">Loading...</div>
6+
<div v-else-if="isValidId">
7+
<div class="mb-3">
8+
<form v-on:submit.prevent="submitForm">
9+
<label for="name" class="form-label">Name:</label>
10+
<input
11+
type="text"
12+
v-model="form.name"
13+
name="name"
14+
class="form-control"
15+
id="name"
16+
placeholder="Category Name"
17+
autocomplete="off"
18+
/>
19+
<hr />
20+
<p class="form-label">Photo:</p>
21+
<div :class="'api' + (form.photo ? ' api--opacity' : '')">
22+
<img
23+
v-if="form.photo"
24+
:src="form.photo"
25+
:alt="form.name"
26+
style="width: 100px; height: 100px"
27+
/>
28+
<div class="api__overlay">
29+
<div class="api-file">
30+
<label class="api-file__label">
31+
<input
32+
type="file"
33+
accept="image/*"
34+
name="photo"
35+
@change="onHandleUpload($event)"
36+
class="api-file__input"
37+
/>
38+
<span class="api-file__btn">
39+
<span class="api-file__text">Upload</span>
40+
</span>
41+
</label>
42+
</div>
43+
</div>
44+
</div>
45+
46+
<hr />
47+
48+
<button
49+
class="btn btn-primary"
50+
type="button"
51+
:disabled="isSubmitted"
52+
@click="submitForm"
53+
>
54+
<span
55+
v-if="isSubmitted"
56+
class="spinner-border spinner-border-sm"
57+
role="status"
58+
aria-hidden="true"
59+
></span>
60+
<span class="visually-hidden">{{
61+
isSubmitted ? 'Loading' : 'Submit'
62+
}}</span>
63+
</button>
64+
</form>
65+
</div>
66+
</div>
67+
<div v-else class="text-center">404 not found!</div>
68+
</div>
69+
</div>
70+
</div>
71+
</template>
72+
73+
<script>
74+
import { onSingleFileUpload, uploadProgress } from '../utils';
75+
76+
export default {
77+
name: 'CategoriesEdit',
78+
props: ['id'],
79+
data: function () {
80+
return {
81+
loading: true, // Before the form display on the screen, just show the loading text
82+
isValidId: false, // Check if the following id is a valid category id
83+
isSubmitted: false, // To check whether the form is in the submitted
84+
form: {
85+
name: '',
86+
photo: ''
87+
},
88+
selectedFile: null
89+
};
90+
},
91+
mounted() {
92+
this.loadInitialData();
93+
},
94+
methods: {
95+
loadInitialData: function () {
96+
const self = this;
97+
const { id } = self;
98+
99+
axios
100+
.get(`/api/categories/${id}`)
101+
.then(function (response) {
102+
self.loading = false;
103+
self.isValidId = true;
104+
self.form.name = response.data.data.name;
105+
self.form.photo = response.data.data.photo;
106+
})
107+
.catch(function (_) {
108+
self.loading = false;
109+
self.isValidId = false;
110+
});
111+
},
112+
onHandleUpload: function (event) {
113+
const file = onSingleFileUpload(event);
114+
if (file) {
115+
this.selectedFile = file;
116+
}
117+
},
118+
submitForm: function () {
119+
const self = this;
120+
const { id } = self;
121+
// Check if the string is not empty
122+
if (typeof self.form.name === 'string' && self.form.name.length > 0) {
123+
self.isSubmitted = true;
124+
125+
const formData = new FormData();
126+
127+
// Append formData fields
128+
formData.append('_method', 'PUT');
129+
formData.append('name', self.form.name);
130+
if (self.selectedFile) {
131+
formData.append('photo', self.selectedFile);
132+
}
133+
134+
axios
135+
.post(`/api/categories/${id}`, formData, {
136+
headers: { 'Content-Type': 'multipart/form-data' },
137+
onUploadProgress: uploadProgress
138+
})
139+
.then(function (response) {
140+
console.log('response', response.data);
141+
self.isSubmitted = false;
142+
self.form.name = response.data.data.name;
143+
self.form.photo = response.data.data.photo;
144+
alert('Data is successfully updated');
145+
})
146+
.catch(function (_) {
147+
self.isSubmitted = false;
148+
alert('Oops! Something went wrong during posting the form. 🥺');
149+
});
150+
} else {
151+
alert(
152+
`Sorry We can't submit the form. The category 'name' is required. 🥺`
153+
);
154+
}
155+
}
156+
}
157+
};
158+
</script>

‎resources/views/edit.blade.php‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@php $val = (int) request()->route('category'); @endphp
2+
@extends('master')
3+
@section('vue')
4+
<div id="app">
5+
<categories-edit :id="{{ $val ? $val : 0 }}"></categories-edit>
6+
</div>
7+
@endsection
8+

‎routes/web.php‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,3 +20,4 @@
2020
// Categories create.blade.php file for the form creation.
2121
Route::view('/categories', 'index')->name('categories.index');
2222
Route::view('/categories/create', 'create')->name('categories.create');
23+
Route::view('/categories/{category}/edit', 'edit')->name('categories.edit');

0 commit comments

Comments
 (0)