8000 Implemented second phase of users CRUD · vs0uz4/l5vueka-laravel-vuejs@9c25789 · GitHub
[go: up one dir, main page]
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

+8
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

+1
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

+770-15
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

+914
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/build/rev-manifest.json

+1-1
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

+775-22
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

+57
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

+21-85
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

+100
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

+4
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

‎resources/views/users/index.blade.php

+1-5
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,7 @@
1111
</head>
1212
<body>
1313
<div class="container" id="app">
14-
{{--<h1>Gerenciamento de Usuários</h1>
15-
<div class="well">
16-
{{ $users }}
17-
</div>--}}
18-
<vd-users list="{{ $users }}"></vd-users>
14+
<vd-users success="{{ Session::get('success') }}" token="{{ csrf_token() }}" list="{{ $users }}"></vd-users>
1915
</div>
2016

2117
<script src="{{ elixir('js/app.js') }}"></script>

‎yarn.lock

+4
Original file line numberDiff line numberDiff line change
@@ -3995,6 +3995,10 @@ module-deps@^4.0.8:
39953995
through2 "^2.0.0"
39963996
xtend "^4.0.0"
39973997

3998+
moment@^2.18.1:
3999+
version "2.18.1"
4000+
resolved "https://registry.yarnpkg.com/moment/-/moment-2.18.1.tgz#c36193dd3ce1c2eed2adb7c802dbbc77a81b1c0f"
4001+
39984002
ms@0.7.1:
39994003
version "0.7.1"
40004004
resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098"

0 commit comments

Comments
 (0)
0