Skip to content

Instantly share code, notes, and snippets.

@joelibaceta

joelibaceta/app.js

Created January 24, 2022 22:26
Show Gist options
  • Save joelibaceta/3259d3f90dbce245a6ab00cfae52b4a4 to your computer and use it in GitHub Desktop.
Save joelibaceta/3259d3f90dbce245a6ab00cfae52b4a4 to your computer and use it in GitHub Desktop.
Download ZIP
vue-ecommerce
Raw
app.js
const router = new VueRouter({
routes: [
{ path: '/login', component: 'login-form'},
{ path: '/product-list', component: 'product-list'}
]
})
var app = new Vue({
router,
data: {
message: "hello world!",
logged: false
},
methods: {
OnLogin: function(token) {
this.logged=true;
localStorage.setItem("token", token)
console.log("Evento Login recibido en App")
},
DoLogout: function() {
localStorage.removeItem("token")
this.logged = false;
}
},
created() {
if (localStorage.getItem("token") === null) {
this.$router.push('login')
} else {
this.$router.push('product-list')
}
}
}).$mount('#app')
Raw
category_item.js
Vue.component("category-item", {
props: ["category"],
template: `
<li class="nav-item">
<a class="nav-link">
{{ category.name }}
</a>
</li>
`
})
Raw
category_list.js
Vue.component("categories-list", {
data: function() {
return {
categories: [],
isLoading: true,
token: localStorage.getItem("token")
}
},
created: function() {
var self=this
fetch("http://silabuz-api-project.herokuapp.com/products/categories/", {
method: "GET",
header: {
"Content-Type": "application/json",
"Authorization": "Token " + this.token
}
})
.then(function(response){
return response.json()
})
.then(function(data){
self.categories = data;
self.isLoading = false;
})
.catch(function(error) {
console.log("Error: ", error)
})
},
template: `
<div class="row">
<div class="col-12">
<div v-if="isLoading">
<div class="spinner-border text-primary">
<span class="sr-only"> Cargando ... </span>
</div>
</div>
<ul class="nav nav-pills nav-fill" v-else>
<category-item
v-for="category in categories"
v-bind:category="category">
</category-item>
</ul>
</div>
</div>
`
})
Raw
index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<span class="navbar-brand">eCommerce</span>
<button class="navbar-toggler"
type="button" data-bs-toggle="collapse"
data-bs-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item" v-if="logged">
<a class="nav-link" v-on:click="DoLogout">Cerrar Sesion</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid">
<!-- <div v-if="logged"/>
<product-list></product-list>
</div>
<div v-else>
<login-form v-on:on-login="OnLogin"></login-form>
</div>-->
<router-view></router-view>
</div>
</div>
</body>
<script src="components/category_item.js"></script>
<script src="components/category_list.js"></script>
<script src="components/product_item.js"></script>
<script src="components/product_list.js"></script>
<script src="components/login.js"></script>
<script src="app.js"></script>
</html>
Raw
login.js
Vue.component("login-form", {
data: function() {
return {
username: "",
password: "",
hasError: false
}
},
methods: {
DoLogin: function() {
var self = this;
self.hasError = false
fetch("http://silabuz-api-project.herokuapp.com/authentication/login/", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
username: this.username,
password: this.password
})
})
.then(function(response){
return response.json()
})
.then(function(data){
console.log(data)
if (data.hasOwnProperty("token")) {
//self.$emit("on-login", data.token)
localStorage.setItem("token", data.token)
self.$router.push("/product-list")
} else {
self.hasError = true
}
})
.catch(function(error) {
console.log("Error: ", error)
})
}
},
template: `
<form class="form">
<div class="alert alert-danger" v-if="hasError">
Credenciales no validas
</div>
<div class="form-group">
<label>Usuario</label>
<input class="form-control" type="text" v-model="username"></input>
</div>
<div class="form-group">
<label>Contraseña</label>
<input class="form-control" type="password" v-model="password"></input>
</div>
<button class="btn btn-primary col-12" @click.prevent="DoLogin" type="submit">
Iniciar Sesion
</button>
</form>
`
})
Raw
product_item.js
Vue.component("product-item", {
props: ["product"],
template: `
<div class="row">
<div class="col-2">
<img class="img-thumbail" width= "100%" v-bind:src="product.image_url"/>
</div>
<div class="col-6">
<h5>{{product.name}}</h5>
<p>{{product.description}}</p>
<p>{{product.price}}</p>
</div>
<div class="col-4">
<button class="btn btn-primary">
Agregar al carrito
</button>
</div>
</div>
`
})
Raw
product_list.js
Vue.component('product-list', {
data: function() {
return {
products: [],
token: localStorage.getItem("token"),
isLoading: true
}
},
created: function() {
var self = this;
fetch("http://silabuz-api-project.herokuapp.com/products/products/", {
method: "GET",
headers: {
"Content-Type": "application/json",
"Authorization": "Token " + this.token
}
})
.then(function(response){
return response.json()
})
.then(function(data){
self.products = data;
self.isLoading=false;
})
.catch(function(error) {
console.log("Error: " + error)
})
},
template: `
<div class="row">
<div class="col-12">
<div v-if="isLoading">
<div class="spinner-border text-primary">
<span class="sr-only"> Cargando ... </span>
</div>
</div>
<div v-else>
<categories-list></categories-list>
<hr/>
<product-item
v-for="product in products"
v-bind:product="product">
</product-item>
</div>
</div>
</div>
`
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment