From 2c2b921919fabc9d8d43acad016f87eb48b578a7 Mon Sep 17 00:00:00 2001
From: nat <nat@delcita.nathaliehc.uy>
Date: Tue, 11 Jan 2022 18:45:00 -0300
Subject: [PATCH] Mostrar lista de categorias de productos

---
 public/js/app.js                            |  2 -
 public/js/productos.js                      | 66 +++++++++++++++++++++
 resources/views/layouts/app.blade.php       |  1 +
 resources/views/productos.blade.php         | 24 ++------
 resources/views/subpedidos_create.blade.php |  1 -
 5 files changed, 72 insertions(+), 22 deletions(-)
 create mode 100644 public/js/productos.js

diff --git a/public/js/app.js b/public/js/app.js
index f825045..16e7d43 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1,5 +1,3 @@
-window.Event = new Vue();
-
 Vue.component('nav-bar', {
 	template: `
 		<nav class="navbar" role="navigation" aria-label="main navigation">
diff --git a/public/js/productos.js b/public/js/productos.js
new file mode 100644
index 0000000..ed799c4
--- /dev/null
+++ b/public/js/productos.js
@@ -0,0 +1,66 @@
+Vue.component('categorias-container', {
+  template: `
+    <div class="container">
+      <div class="columns is-multiline is-mobile">
+        <div v-for="catego in categorias" class="block column is-one-quarter-desktop is-one-third-tablet is-half-mobile">
+          <div class="card" style="height:100%">
+            <div class="card-content">
+              <div class="media">
+                <div class="media-content" style="overflow:hidden">
+                  <p class="title is-6" v-text="catego"></p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>`,
+  data() {
+    return {
+      categorias: null
+    }
+  },
+  mounted() {
+    axios.get("/api/categorias").then(response => {
+      this.categorias = response.data;
+    });
+  }
+});
+
+Vue.component('productos-container', {
+  template: `
+    <div class="productos-container">
+      <div v-for="producto in productos" class="card">
+        <div class="card-image">
+          <figure class="image is-4by3">
+            <img src="https://bulma.io/images/placeholders/1280x960.png" alt="Placeholder image">
+          </figure>
+        </div>
+        <div class="card-content">
+          <div class="media">
+            </div>
+            <div class="media-content">
+              <p class="title is-4">John Smith</p>
+              <p class="subtitle is-6">@johnsmith</p>
+            </div>
+          </div>
+
+          <div class="content">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            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() {
+    return {
+      productos: null
+    }
+  },
+  mounted() {
+    axios.get("/api/productos").then(response => this.productos = response.data);
+  }
+});
\ No newline at end of file
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 89beb25..7f6655c 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -35,6 +35,7 @@
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
     <script src="{{ asset('js/app.js') }}" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
     @yield('scripts')
 </body>
 </html>
diff --git a/resources/views/productos.blade.php b/resources/views/productos.blade.php
index 1f34466..754f2b4 100644
--- a/resources/views/productos.blade.php
+++ b/resources/views/productos.blade.php
@@ -1,23 +1,9 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="container">
-    <div class="row justify-content-center">
-        <div class="col-md-8">
-            <div class="card">
-                <div class="card-header">{{ __('Dashboard') }}</div>
-
-                <div class="card-body">
-                    @if (session('status'))
-                        <div class="alert alert-success" role="alert">
-                            {{ session('status') }}
-                        </div>
-                    @endif
-
-                    {{ __('You are logged in!') }}
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+<categorias-container></categorias-container>
+@endsection
+
+@section('scripts')
+<script src="{{ asset('js/productos.js') }}"></script>
 @endsection
diff --git a/resources/views/subpedidos_create.blade.php b/resources/views/subpedidos_create.blade.php
index c29ebcb..2753bc2 100644
--- a/resources/views/subpedidos_create.blade.php
+++ b/resources/views/subpedidos_create.blade.php
@@ -37,6 +37,5 @@
 @endsection
 
 @section('scripts')
-<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 <script src="{{ asset('js/subpedidos-create.js') }}"></script>
 @endsection
\ No newline at end of file