Tecnicamente eso es todo del tutorial :c
This commit is contained in:
@@ -14,4 +14,32 @@ class UsersController extends Controller
|
||||
{
|
||||
return UserResource::collection(User::paginate(10));
|
||||
}
|
||||
|
||||
public function all()
|
||||
{
|
||||
return UserResource::collection(User::all());
|
||||
}
|
||||
|
||||
public function show(User $user)
|
||||
{
|
||||
return new UserResource($user);
|
||||
}
|
||||
|
||||
public function update(User $user, Request $request)
|
||||
{
|
||||
$data = $request->validate([
|
||||
'name' => 'required',
|
||||
'email' => 'required|email',
|
||||
]);
|
||||
|
||||
$user->update($data);
|
||||
return new UserResource($user);
|
||||
}
|
||||
|
||||
public function delete(User $user)
|
||||
{
|
||||
$user->delete();
|
||||
|
||||
return response(null, 204);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -15,6 +15,7 @@ class UserResource extends JsonResource
|
||||
public function toArray($request)
|
||||
{
|
||||
return [
|
||||
'id' => $this->id,
|
||||
'name' => $this->name,
|
||||
'email' => $this->email,
|
||||
];
|
||||
|
||||
39182
public/js/app.js
vendored
39182
public/js/app.js
vendored
File diff suppressed because it is too large
Load Diff
19
resources/js/api/users.js
vendored
Normal file
19
resources/js/api/users.js
vendored
Normal file
@@ -0,0 +1,19 @@
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
all() {
|
||||
return axios.get('/api/users');
|
||||
},
|
||||
paginated(page) {
|
||||
return axios.get('/api/users', page);
|
||||
},
|
||||
find(id) {
|
||||
return axios.get(`/api/users/${id}`);
|
||||
},
|
||||
edit(id, data) {
|
||||
return axios.put(`/api/users/${id}`, data);
|
||||
},
|
||||
delete(id) {
|
||||
return axios.delete(`/api/users/${id}`);
|
||||
}
|
||||
};
|
||||
16
resources/js/app.js
vendored
16
resources/js/app.js
vendored
@@ -7,6 +7,8 @@ import App from './views/App'
|
||||
import Hello from './views/Hello'
|
||||
import Home from './views/Home'
|
||||
import UserIndex from './views/UserIndex'
|
||||
import UserEdit from './views/UserEdit'
|
||||
import NotFound from './views/NotFound'
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
@@ -26,6 +28,20 @@ const router = new VueRouter({
|
||||
name: 'users.index',
|
||||
component: UserIndex,
|
||||
},
|
||||
{
|
||||
path: '/users/:id/edit',
|
||||
name: 'users.edit',
|
||||
component: UserEdit,
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
name: '404',
|
||||
component: NotFound,
|
||||
},
|
||||
{
|
||||
path: '*',
|
||||
redirect: '/404',
|
||||
}
|
||||
],
|
||||
});
|
||||
|
||||
|
||||
6
resources/js/views/NotFound.vue
Normal file
6
resources/js/views/NotFound.vue
Normal file
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>404 Not Found</h2>
|
||||
<p>Woops, looks like you're lost .w.</p>
|
||||
</div>
|
||||
</template>
|
||||
90
resources/js/views/UserEdit.vue
Normal file
90
resources/js/views/UserEdit.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="message" class="alert">{{ message }}</div>
|
||||
<div v-if="!loaded">Loading...</div>
|
||||
<form @submit.prevent="onSubmit($event)" v-else>
|
||||
<div class="form-group">
|
||||
<label for="username">Name</label>
|
||||
<input id="username" v-model="user.name"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email</label>
|
||||
<input id="email" type="email" v-model="user.email"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<button type="submit" :disabled="saving">Update</button>
|
||||
<button :disabled="saving" @click.prevent="onDelete($event)">Delete</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$red: lighten(red, 30%);
|
||||
$darkRed: darken($red, 50%);
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert {
|
||||
background: $red;
|
||||
color: $darkRed;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
width: 50%;
|
||||
border: 1px solid $darkRed;
|
||||
border-radius: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import api from '../api/users';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
message: null,
|
||||
loaded: false,
|
||||
saving: false,
|
||||
user: {
|
||||
id: null,
|
||||
name: "",
|
||||
email: "",
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onSubmit(event) {
|
||||
this.saving = true;
|
||||
|
||||
api.edit(this.user.id, {
|
||||
name: this.user.name,
|
||||
email: this.user.email,
|
||||
}).then((response) => {
|
||||
this.message = 'User Updated';
|
||||
setTimeout(() => this.message = null, 2000);
|
||||
this.user = response.data.data;
|
||||
}).catch((error) => {
|
||||
console.log(error);
|
||||
}).then(_ => this.saving = false);
|
||||
},
|
||||
onDelete(event) {
|
||||
this.saving = true;
|
||||
api.delete(this.user.id)
|
||||
.then((response) => {
|
||||
this.message = 'User Deleted';
|
||||
setTimeout(() => this.$router.push({ name:'users.index' }), 2000);
|
||||
});
|
||||
}
|
||||
},
|
||||
created() {
|
||||
api.find(this.$route.params.id).then((response) => {
|
||||
this.loaded = true;
|
||||
this.user = response.data.data;
|
||||
}).catch((err) => {
|
||||
this.$router.push({ name:'404' });
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -5,9 +5,10 @@
|
||||
</div>
|
||||
|
||||
<ul v-if="users">
|
||||
<li v-for="{ name, email } in users">
|
||||
<li v-for="{ id, name, email } in users">
|
||||
<strong>Name:</strong> {{ name }},
|
||||
<strong>Email:</strong> {{ email}}
|
||||
<router-link :to="{ name: 'users.edit', params: { id } }">Edit</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="pagination">
|
||||
@@ -20,16 +21,16 @@
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import api from '../api/users';
|
||||
|
||||
const getUsers = (page, callback) => {
|
||||
const params = { page };
|
||||
|
||||
axios
|
||||
.get('/api/users', { params })
|
||||
api.paginated({ params })
|
||||
.then(response => {
|
||||
callback(null, response.data);
|
||||
}).catch(error => {
|
||||
callback(error, err.response.data);
|
||||
callback(error, error.response.data);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@@ -4,5 +4,9 @@ use Illuminate\Http\Request;
|
||||
|
||||
Route::namespace('Api')->group(function() {
|
||||
Route::get('/users', 'UsersController@index');
|
||||
Route::get('/users/all', 'UsersController@all');
|
||||
Route::get('/users/{user}', 'UsersController@show');
|
||||
Route::put('/users/{user}', 'UsersController@update');
|
||||
Route::delete('/users/{user}', 'UsersController@delete');
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user