skrd/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mate a vue y le dare con html plano

Browse Source
This commit is contained in:
Daniel Cortés
2019-06-20 22:21:24 -04:00
parent 0d30626baa
commit a3a974d750
37 changed files with 1263 additions and 30125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
resources/js/api/users.js vendored
View File

@@ -1,19 +0,0 @@
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}`);
}
};

53
resources/js/app.js vendored
View File

@@ -1,52 +1 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
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',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/hello',
name: 'hello',
component: Hello,
},
{
path: '/users',
name: 'users.index',
component: UserIndex,
},
{
path: '/users/:id/edit',
name: 'users.edit',
component: UserEdit,
},
{
path: '/404',
name: '404',
component: NotFound,
},
{
path: '*',
redirect: '/404',
}
],
});
const app = new Vue({
el: '#app',
components: { App },
router,
});
console.log('oli');

55
resources/js/bootstrap.js vendored
View File

@@ -1,55 +0,0 @@
window._ = require('lodash');
/**
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
* for JavaScript based Bootstrap features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
/**
* We'll load the axios HTTP library which allows us to easily issue requests
* to our Laravel back-end. This library automatically handles sending the
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });

24
resources/js/components/ExampleComponent.vue
View File

@@ -1,24 +0,0 @@
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Example Component</div>
<div class="card-body">
I'm an example component.
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
console.log('HOLA! funciono <3');
</script>

18
resources/js/views/App.vue
View File

@@ -1,18 +0,0 @@
<template>
<div>
<h1>Vue Router Demo App</h1>
<p>
<router-link :to="{ name: 'home' }">Home</router-link>
<router-link :to="{ name: 'hello' }">Hello World</router-link>
<router-link :to="{ name: 'users.index' }">Users</router-link>
</p>
<div class="container">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {}
</script>

3
resources/js/views/Hello.vue
View File

@@ -1,3 +0,0 @@
<template>
<p>Hello!</p>
</template>

3
resources/js/views/Home.vue
View File

@@ -1,3 +0,0 @@
<template>
<p>This is the homepage</p>
</template>

6
resources/js/views/NotFound.vue
View File

@@ -1,6 +0,0 @@
<template>
<div>
<h2>404 Not Found</h2>
<p>Woops, looks like you're lost .w.</p>
</div>
</template>

90
resources/js/views/UserEdit.vue
View File

@@ -1,90 +0,0 @@
<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>

114
resources/js/views/UserIndex.vue
View File

@@ -1,114 +0,0 @@
<template>
<div class="users">
<div v-if="error" class="error">
<p>{{ error }}</p>
</div>
<ul v-if="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">
<button :disabled="!prevPage" @click.prevent="goToPrev">Previous</button>
{{ paginationCount }}
<button :disabled="!nextPage" @click.prevent="goToNext">Next</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
import api from '../api/users';
const getUsers = (page, callback) => {
const params = { page };
api.paginated({ params })
.then(response => {
callback(null, response.data);
}).catch(error => {
callback(error, error.response.data);
});
};
export default {
data() {
return {
users: null,
meta: null,
links: {
first: null,
last: null,
next: null,
prev: null,
},
error: null,
};
},
computed: {
nextPage() {
if( !this.meta || this.meta.current_page === this.meta.last_page ) {
return;
}
return this.meta.current_page + 1;
},
prevPage() {
if( !this.meta || this.meta.current_page === 1 ) {
return;
}
return this.meta.current_page - 1;
},
paginationCount() {
if( !this.meta ) {
return;
}
const { current_page, last_page } = this.meta;
return `${current_page} of ${last_page}`
}
},
beforeRouteEnter(to, from, next) {
getUsers(to.query.page, (err, data) => {
next(vm => vm.setData(err, data));
});
},
beforeRouteUpdate(to, from, next) {
this.users = this.links = this.meta = null;
getUsers(to.query.page, (err, data) => {
this.setData(err, data);
next();
});
},
methods: {
goToNext() {
this.$router.push({
query: {
page: this.nextPage,
},
});
},
goToPrev() {
this.$router.push({
name: 'users.index',
query: {
page: this.prevPage,
}
});
},
setData(err, { data: users, links, meta }) {
if(err) {
this.error = err.toString();
} else {
this.users = users;
this.links = links;
this.meta = meta;
}
},
}
}
</script>