From 0da30c0563135175aedc4f97a9a766657804a428 Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Mon, 13 Mar 2023 19:24:02 +0100
Subject: [PATCH] pagina de listas individuales

---
 src/pages/ListasPage.vue       | 29 +++++++++++++++--------------
 src/pages/listas/indexPage.vue | 32 ++++++++++++++++++++++++++++++++
 src/router/routes.js           |  5 +++++
 3 files changed, 52 insertions(+), 14 deletions(-)
 create mode 100644 src/pages/listas/indexPage.vue

diff --git a/src/pages/ListasPage.vue b/src/pages/ListasPage.vue
index ad904dd..e692f13 100644
--- a/src/pages/ListasPage.vue
+++ b/src/pages/ListasPage.vue
@@ -22,20 +22,21 @@
       v-for="lista in listas"
       :key="lista.id"
     >
-      <p class="bg-cyan-7 q-pa-md text-weight-bold text-h6 rounded-borders">
-        {{ lista.nombre
-        }}<q-icon
-          class="float-right cursor-pointer q-mt-xs"
-          name="delete"
-          @click="eliminarLista(lista)"
-        />
-        <q-badge
-          color="cyan-5"
-          text-color="black"
-          :label="lista.items.length"
-          class="float-right q-ma-sm"
-        />
-      </p>
+      <router-link :to="`/lista/${lista.id}`">
+        <p class="bg-cyan-7 q-pa-md text-weight-bold text-h6 rounded-borders">
+          {{ lista.nombre
+          }}<q-icon
+            class="float-right cursor-pointer q-mt-xs"
+            name="delete"
+            @click="eliminarLista(lista)"
+          />
+          <q-badge
+            color="cyan-5"
+            text-color="black"
+            :label="lista.items.length"
+            class="float-right q-ma-sm"
+          /></p
+      ></router-link>
     </div>
   </div>
 </template>
diff --git a/src/pages/listas/indexPage.vue b/src/pages/listas/indexPage.vue
new file mode 100644
index 0000000..1d21aa6
--- /dev/null
+++ b/src/pages/listas/indexPage.vue
@@ -0,0 +1,32 @@
+<template>
+  <div v-for="item in items" :key="item.id">
+    <p class="bg-cyan-7 q-pa-md text-weight-bold text-h6 rounded-borders">
+      {{ item.nombre }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { useListaStore } from "../../stores/lista.js";
+import { useRouter } from "vue-router";
+
+const listaStore = useListaStore();
+const $router = useRouter();
+
+const lista = ref(null);
+const items = ref(null);
+
+onMounted(async () => {
+  console.log($router.currentRoute.value.params.id);
+  lista.value = await listaStore.pb
+    .collection("lista")
+    .getOne($router.currentRoute.value.params.id);
+  const arrayIdItem = lista.value.items;
+  console.log(arrayIdItem);
+  items.value = await listaStore.pb.collection("items").getFullList();
+  items.value = items.value.filter(
+    (element) => arrayIdItem.indexOf(element.id) != -1
+  );
+});
+</script>
diff --git a/src/router/routes.js b/src/router/routes.js
index e14764c..173c2a3 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -13,6 +13,11 @@ const routes = [
         component: () => import("pages/IndexPage.vue"),
         meta: { auth: true },
       },
+      {
+        path: 'lista/:id',
+        component: () => import("pages/listas/indexPage.vue"),
+        meta: { auth: true },
+      },
     ],
   },
   {