Skip to content

Commit 9c25789

Browse files
vs0uz4vs0uz4
committed
Implemented second phase of users CRUD
- Created create method in UsersControllers; - Changed users index view; - Changed VdUsers vue component; - Created VdUsersTable vue component; - Created VdUserForm vue component; - Registered VdUsersTable and VdUserForm; - Created bus.js for events; - Added moment.js;
1 parent 758ed74 commit 9c25789

File tree

12 files changed

+2656
-128
lines changed

12 files changed

+2656
-128
lines changed

‎app/Http/Controllers/UsersController.php

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,15 @@ public function index()
1515

1616
public function create()
1717
{
18+
$input = \Request::only('name', 'email', 'password');
1819

20+
$user = new User();
21+
$user->name = $input['name'];
22+
$user->email = $input['email'];
23+
$user->password = bcrypt($input['password']);
24+
$user->save();
25+
26+
return redirect()->route('user.index')->with('success', 'Usuário Cadastrado com Sucesso!');
1927
}
2028

2129
public function update()

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"laravel-elixir-vue-2": "^0.2.0",
1616
"laravel-elixir-webpack-official": "^1.0.2",
1717
"lodash": "^4.16.2",
18+
"moment": "^2.18.1",
1819
"vue": "^2.0.1",
1920
"vue-resource": "^1.0.3"
2021
}

‎public/build/js/app-efa76df45f.js renamed to ‎public/build/js/app-927eb91d34.js

Lines changed: 770 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/build/js/app-bc3d901cc2.js

Lines changed: 914 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/build/rev-manifest.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"css/app.css": "css/app-ad87f36536.css",
33
"css/vendor.css": "css/vendor-0634183a17.css",
4-
"js/app.js": "js/app-efa76df45f.js"
4+
"js/app.js": "js/app-bc3d901cc2.js"
55
}

‎public/js/app.js

Lines changed: 775 additions & 22 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/assets/js/app/users/form.vue

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<script>
2+
import bus from '../utils/events/bus'
3+
export default {
4+
props: ['token'],
5+
mounted () {
6+
jQuery(this.$refs.userFormModal).on('hidden.bs.modal', () => {
7+
this.$refs.userForm.reset()
8+
})
9+
10+
bus.$on('open-form', () => {
11+
jQuery(this.$refs.userFormModal).modal('show')
12+
})
13+
}
14+
}
15+
</script>
16+
17+
<template>
18+
<div>
19+
<!-- /.modal -->
20+
<div ref="userFormModal" class="modal fade" tabindex="-1" role="dialog">
21+
<!-- /.modal-dialog -->
22+
<div class="modal-dialog" role="document">
23+
<!-- /.modal-content -->
24+
<div class="modal-content">
25+
<div class="modal-header">
26+
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
27+
<h4 class="modal-title">Criar Novo Usuário</h4>
28+
</div>
29+
<div class="modal-body">
30+
<form ref="userForm" method="post" action="/usuarios/criar">
31+
<input id="_token" name="_token" type="hidden" :value="token">
32+
<div class="form-group">
33+
<label for="name" class="control-label">Nome</label>
34+
<input id="name" name="name" type="text" class="form-control">
35+
</div>
36+
<div class="form-group">
37+
<label for="email" class="control-label">E-mail</label>
38+
<input id="email" name="email" type="email" class="form-control">
39+
</div>
40+
<div class="form-group">
41+
<label for="password" class="control-label">Senha</label>
42+
<input id="password" name="password" type="password" class="form-control">
43+
</div>
44+
<div class="modal-footer">
45+
<button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
46+
<button type="submit" class="btn btn-primary">Salvar</button>
47+
</div>
48+
</form>
49+
</div>
50+
</div>
51+
<!-- /.modal-content -->
52+
</div>
53+
<!-- /.modal-dialog -->
54+
</div>
55+
<!-- /.modal -->
56+
</div>
57+
</template>

‎resources/assets/js/app/users/main.vue

Lines changed: 21 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,98 +1,34 @@
11
<script>
2+
import VdUsersTable from './table.vue'
3+
import VdUserForm from './form.vue'
4+
import bus from '../utils/events/bus'
25
export default {
3-
props: ['list'],
4-
data() {
5-
return {
6-
details: [],
7-
}
8-
},
9-
computed: {
10-
users () {
11-
return JSON.parse(this.list)
12-
},
6+
props: ['list', 'token', 'success'],
7+
components: {
8+
VdUsersTable,
9+
VdUserForm
1310
},
1411
methods: {
15-
toggle (id) {
16-
if (id === undefined) {
17-
this.toggleAll()
18-
} else {
19-
this.toggleOne(id)
20-
}
21-
},
22-
toggleAll () {
23-
if (this.details.length > 0) {
24-
this.details = []
25-
} else {
26-
this.details = this.users.map(user => user.id)
27-
}
28-
},
29-
toggleOne (id){
30-
if (this.details.includes(id)) {
31-
const index = this.details.indexOf(id)
32-
this.details.splice(index, 1)
33-
} else {
34-
this.details.push(id)
35-
}
36-
},
12+
form (){
13+
bus.$emit('open-form')
14+
}
3715
}
3816
}
3917
</script>
4018

4119
<template>
4220
<div>
43-
<h1><i class="fa fa-w fa-users" aria-hidden="true"></i> Gerenciamento de Usuários</h1>
44-
<div class="well">
45-
<table class="table table-bordered table-striped">
46-
<thead>
47-
<tr>
48-
<th class="text-center">
49-
<a href="#" @click.prevent="toggle()">
50-
<i class="fa fa-fw" :class="{
51-
'fa-plus-circle red' : details.length === 0,
52-
'fa-minus-circle green' : details.length > 0
53-
}" aria-hidden="true"></i>
54-
</a>
55-
</th>
56-
<th>Nome</th>
57-
<th>E-mail</th>
58-
<th class="text-center">Data</th>
59-
<th class="text-center">Ações</th>
60-
</tr>
61-
</thead>
62-
<tbody v-for="user in users">
63-
<tr>
64-
<td class="text-center">
65-
<a href="#" @click.prevent="toggle(user.id)">
66-
<i class="fa fa-fw" :class="{
67-
'fa-plus-circle red' : !details.includes(user.id),
68-
'fa-minus-circle green' : details.includes(user.id)
69-
}" aria-hidden="true"></i>
70-
</a>
71-
</td>
72-
<td>{{ user.name }}</td>
73-
<td>{{ user.email }}</td>
74-
<td class="text-center">{{ user.created_at }}</td>
75-
<td class="text-center">
76-
<a href="#"><i class="fa fa-fw fa-pencil" aria-hidden="true"></i></a>
77-
<a href="#"><i class="fa fa-fw fa-trash-o" aria-hidden="true"></i></a>
78-
</td>
79-
</tr>
80-
<tr v-show="details.includes(user.id)">
81-
<td colspan="5">
82-
<i class="fa fa-fw fa-map-marker" aria-hidden="true"></i>Placeholder para Endereço
83-
</td>
84-
</tr>
85-
</tbody>
86-
</table>
21+
<h1>
22+
<i class="fa fa-w fa-users" aria-hidden="true"></i> Gerenciamento de Usuários
23+
<a href="#" @click.prevent="form" class="btn btn-default"><i class="fa fa-fw fa-plus" aria-hidden="true"></i> Novo Usuário</a>
24+
</h1>
25+
<div class="alert alert-success" v-show="success != ''">
26+
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
27+
<span aria-hidden="true">&times;</span>
28+
</button>
29+
{{ success }}
8730
</div>
31+
<vd-user-form :token="token"></vd-user-form>
32+
<vd-users-table :list="list"></vd-users-table>
8833
</div>
8934
</template>
90-
91-
<style>
92-
.green {
93-
color: red;
94-
}
95-
.red {
96-
color: green;
97-
}
98-
</style>

‎resources/assets/js/app/users/table.vue

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<script>
2+
import moment from 'moment'
3+
4+
export default {
5+
props: ['list'],
6+
data() {
7+
return {
8+
details: [],
9+
}
10+
},
11+
computed: {
12+
users () {
13+
return JSON.parse(this.list)
14+
},
15+
},
16+
methods: {
17+
toggle (id) {
18+
if (id === undefined) {
19+
this.toggleAll()
20+
} else {
21+
this.toggleOne(id)
22+
}
23+
},
24+
toggleAll () {
25+
if (this.details.length > 0) {
26+
this.details = []
27+
} else {
28+
this.details = this.users.map(user => user.id)
29+
}
30+
},
31+
toggleOne (id){
32+
if (this.details.includes(id)) {
33+
const index = this.details.indexOf(id)
34+
this.details.splice(index, 1)
35+
} else {
36+
this.details.push(id)
37+
}
38+
},
39+
formatDate (date) {
40+
return moment(date).format('DD/MM/YYYY')
41+
}
42+
}
43+
}
44+
</script>
45+
46+
<template>
47+
<div>
48+
<table class="table table-bordered table-striped">
49+
<thead>
50+
<tr>
51+
<th class="text-center">
52+
<a href="#" @click.prevent="toggle()">
53+
<i class="fa fa-fw" :class="{
54+
'fa-plus-circle red' : details.length === 0,
55+
'fa-minus-circle green' : details.length > 0
56+
}" aria-hidden="true"></i>
57+
</a>
58+
</th>
59+
<th>Nome</th>
60+
<th>E-mail</th>
61+
<th class="text-center">Data de Criação</th>
62+
<th class="text-center">Ações</th>
63+
</tr>
64+
</thead>
65+
<tbody v-for="user in users">
66+
<tr>
67+
<td class="text-center">
68+
<a href="#" @click.prevent="toggle(user.id)">
69+
<i class="fa fa-fw" :class="{
70+
'fa-plus-circle red' : !details.includes(user.id),
71+
'fa-minus-circle green' : details.includes(user.id)
72+
}" aria-hidden="true"></i>
73+
</a>
74+
</td>
75+
<td>{{ user.name }}</td>
76+
<td>{{ user.email }}</td>
77+
<td class="text-center">{{ formatDate(user.created_at) }}</td>
78+
<td class="text-center">
79+
<a href="#"><i class="fa fa-fw fa-pencil" aria-hidden="true"></i></a>
80+
<a href="#"><i class="fa fa-fw fa-trash-o" aria-hidden="true"></i></a>
81+
</td>
82+
</tr>
83+
<tr v-show="details.includes(user.id)">
84+
<td colspan="5">
85+
<i class="fa fa-fw fa-map-marker" aria-hidden="true"></i>Placeholder para Endereço
86+
</td>
87+
</tr>
88+
</tbody>
89+
</table>
90+
</div>
91+
</template>
92+
93+
<style>
94+
.green {
95+
color: red;
96+
}
97+
.red {
98+
color: green;
99+
}
100+
</style>

‎resources/assets/js/app/utils/events/bus.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import Vue from 'vue'
2+
const bus = new Vue()
3+
4+
export default bus

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy