comenzando a trabajar con vista de productos

This commit is contained in:
nat 2022-01-12 12:04:02 -03:00
parent b79ea6d1ed
commit 5d47636280
5 changed files with 36 additions and 34 deletions

3
public/css/app.css vendored Normal file
View File

@ -0,0 +1,3 @@
p.navbar-item:empty {
display: none;
}

View File

@ -11,10 +11,10 @@ Vue.component('categorias-container', {
</div> </div>
</div> </div>
</div> </div>
</div> </div><!-- END CARD -->
</div> </div><!-- END BLOCK COLUMN -->
</div> </div><!-- END COLUMNS -->
</div>`, </div><!-- END CONTAINER -->`,
data() { data() {
return { return {
categorias: null categorias: null
@ -29,38 +29,37 @@ Vue.component('categorias-container', {
Vue.component('productos-container', { Vue.component('productos-container', {
template: ` template: `
<div class="productos-container"> <div class="container">
<div v-for="producto in productos" class="card"> <div class="columns is-multiline is-mobile">
<div class="card-image"> <div v-for="producto in productos" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
<figure class="image is-4by3"> <div class="card" style="height:100%">
<img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image"> <div class="card-image">
</figure> <figure class="image is-4by3">
</div> <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
<div class="card-content"> </figure>
<div class="media">
</div> </div>
<div class="media-content"> <div class="card-content">
<p class="title is-4">John Smith</p> <div class="media">
<p class="subtitle is-6">@johnsmith</p> <div class="media-content">
<p class="title is-6" v-text="producto.nombre"></p>
<p class="subtitle is-7" v-text="producto.proveedor_id"></p>
<p class="subtitle is-7" v-text="producto.precio"></p>
</div>
</div>
</div> </div>
</div> </div><!-- END CARD -->
</div><!-- END BLOCK COLUMN -->
<div class="content"> </div><!-- END COLUMNS -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div><!-- END CONTAINER -->`,
Phasellus nec iaculis mauris. <a>@bulmaio</a>.
<a href="#">#css</a> <a href="#">#responsive</a>
<br>
<time datetime="2016-1-1">11:09 PM - 1 Jan 2016</time>
</div>
</div>
</div>
</div>`,
data() { data() {
return { return {
productos: null productos: []
} }
}, },
mounted() { mounted() {
axios.get("/api/productos").then(response => this.productos = response.data); axios.get("/api/productos").then(response => {
console.log(response.data);
this.productos = response.data.data;
});
} }
}); });

View File

@ -20,14 +20,12 @@ Vue.component('subpedido-select', {
nombre: this.subpedido, nombre: this.subpedido,
grupo_de_compra_id: this.gdcid grupo_de_compra_id: this.gdcid
}).then(response => { }).then(response => {
//se creo el subpedido, guardamos el subpedido en sesion
axios.post("/subpedidos/guardar_sesion", { axios.post("/subpedidos/guardar_sesion", {
subpedido: response.data subpedido: response.data
}).then(response => { }).then(response => {
if (response.status == 200) {
window.location.href = 'productos'; window.location.href = 'productos';
} else {
console.log(response);
}
}); });
}); });
} }

View File

@ -15,6 +15,7 @@
<!-- Styles --> <!-- Styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head> </head>
<body> <body>

View File

@ -2,6 +2,7 @@
@section('content') @section('content')
<categorias-container></categorias-container> <categorias-container></categorias-container>
<productos-container></productos-container>
@endsection @endsection
@section('scripts') @section('scripts')