From 9c9c8cbc67ae10f788a40315a8dec937a7915f14 Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Fri, 30 Aug 2024 19:58:45 +0200
Subject: [PATCH] filtra listas

---
 src/apuntes/LoginView.vue |  32 -------
 src/components/Lista.vue  | 176 ++++++++++++--------------------------
 2 files changed, 55 insertions(+), 153 deletions(-)
 delete mode 100644 src/apuntes/LoginView.vue
diff --git a/src/apuntes/LoginView.vue b/src/apuntes/LoginView.vue
deleted file mode 100644
index 058f668..0000000
--- a/src/apuntes/LoginView.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-    <h1 class="text-3xl font-bold underline">
-      Login Page Gooooo
-    </h1>
-    <router-link to="/about">Go to About</router-link>
-  </template>
-
-<script setup>
-import { useCounterStore } from '@/stores/counter'
-import { computed, ref } from 'vue'
-
-// access the `store` variable anywhere in the component ✨
-const storeCounter = useCounterStore()
-
-let count = ref(0)
-
-console.log(storeCounter.count) // 0
-
-storeCounter.increment()
-console.log(storeCounter.count) // 1
-
-count = computed(() => storeCounter.doubleCount)
-console.log(count.value) // 2
-console.log(storeCounter.count) // 1
-
-storeCounter.changeCount(19)
-console.log(storeCounter.count) // 10
-
-storeCounter.count = computed(() => storeCounter.doubleCount)
-console.log(storeCounter.count) // 20 */
-
-</script>
\ No newline at end of file
diff --git a/src/components/Lista.vue b/src/components/Lista.vue
index b978dd9..67620dc 100644
--- a/src/components/Lista.vue
+++ b/src/components/Lista.vue
@@ -1,135 +1,68 @@
 <template>
-  <head>
-        <link rel="stylesheet" href="https://horizon-tailwind-react-git-tailwind-components-horizon-ui.vercel.app/static/css/main.ad49aa9b.css" />
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
+
+    <head>
+        <link rel="stylesheet"
+            href="https://horizon-tailwind-react-git-tailwind-components-horizon-ui.vercel.app/static/css/main.ad49aa9b.css" />
+        <link rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
     </head>
+
     <body>
         <div class="flex flex-col justify-center items-center h-[100vh]">
-            <div class="!z-5 relative flex flex-col rounded-[20px] max-w-[300px] bg-white bg-clip-border shadow-3xl shadow-shadow-500 flex flex-col w-full !p-4 3xl:p-![18px] bg-white undefined">
-                 
-            <div class="relative flex flex-row justify-between">
-                <div class="flex items-center">
-                <div class="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-100 dark:bg-white/5">
-                   <span class="material-symbols-rounded h-6 w-6 text-brand-500 dark:text-white">
-                        check_circle
-                    </span>  
-                </div>
-                <h4 class="ml-4 text-xl font-bold text-navy-700 dark:text-white">
-                    Tasks
-                </h4>
-                </div>
-                <button 
-                class='flex items-center text-xl hover:cursor-pointer bg-lightPrimary p-2 text-brand-500 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10 rounded-lg'
-                >
-                <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"></path></svg>
-                </button>
-            </div>
- 
-            <div class="h-full w-full">
-                <div class="mt-5 flex items-center justify-between p-2">
-                    <div class="flex items-center justify-center gap-2">
-                        <input
-                            type="checkbox"
-                            class="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center 
-                            justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
-                            checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400"
-                            name="weekly" 
-                        />
-                        <p class="text-base font-bold text-navy-700 dark:text-white">
-                        Landing Page Design
-                        </p>
+            <div
+                class="!z-5 relative flex flex-col rounded-[20px] max-w-[300px] bg-white bg-clip-border shadow-3xl shadow-shadow-500 flex flex-col w-full !p-4 3xl:p-![18px] bg-white undefined">
+
+                <div class="relative flex flex-row justify-between">
+                    <div class="flex items-center">
+                        <div
+                            class="flex h-9 w-9 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-100 dark:bg-white/5">
+                            <span class="material-symbols-rounded h-6 w-6 text-brand-500 dark:text-white">
+                                check_circle
+                            </span>
+                        </div>
+                        <h4 class="ml-4 text-xl font-bold text-navy-700 dark:text-white">
+                            Tasks
+                        </h4>
                     </div>
-                    <span class="material-symbols-rounded h-6 w-6 text-navy-700 dark:text-white cursor-pointer">
-                        drag_indicator
-                    </span>  
+                    <button
+                        class='flex items-center text-xl hover:cursor-pointer bg-lightPrimary p-2 text-brand-500 hover:bg-gray-100 dark:bg-navy-700 dark:text-white dark:hover:bg-white/20 dark:active:bg-white/10 rounded-lg'>
+                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16"
+                            class="h-6 w-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z">
+                            </path>
+                        </svg>
+                    </button>
                 </div>
 
-                <div class="mt-2 flex items-center justify-between p-2">
-                    <div class="flex items-center justify-center gap-2">
-                        <input
-                            type="checkbox"
-                            class="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center 
+                <div class="h-full w-full">
+                    <div class="mt-2 flex items-center justify-between" v-for="item in items">
+                        <div class="flex items-center justify-center gap-7">
+                            <input type="checkbox"
+                                class="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center 
                             justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
                             checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400"
-                            name="weekly"
-                            checked
-                        />
-                        <p class="text-base font-bold text-navy-700 dark:text-white">
-                        Mobile App Design
-                        </p>
+                                name="weekly" />
+                            <p class="text-base font-bold text-navy-700 dark:text-white">
+                               {{ item.nombre }}
+                            </p>
+                        </div>
+                        <span class="material-symbols-rounded h-6 w-6 text-navy-700 dark:text-white cursor-pointer">
+                            drag_indicator
+                        </span>
                     </div>
-                    <span class="material-symbols-rounded h-6 w-6 text-navy-700 dark:text-white cursor-pointer">
-                        drag_indicator
-                    </span>  
-                </div>
 
-                <div class="mt-2 flex items-center justify-between p-2">
-                    <div class="flex items-center justify-center gap-2">
-                        <input
-                            type="checkbox"
-                            class="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center 
-                            justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
-                            checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400"
-                            name="weekly" 
-                            checked
-                        />
-                        <p class="text-base font-bold text-navy-700 dark:text-white">
-                        Dashboard Builder
-                        </p>
-                    </div>
-                    <span class="material-symbols-rounded h-6 w-6 text-navy-700 dark:text-white cursor-pointer">
-                        drag_indicator
-                    </span>  
-                </div>
-
-                <div class="mt-2 flex items-center justify-between p-2">
-                    <div class="flex items-center justify-center gap-2">
-                        <input
-                            type="checkbox"
-                            class="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center 
-                            justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
-                            checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400"
-                            name="weekly" 
-                        />
-                        <p class="text-base font-bold text-navy-700 dark:text-white">
-                        Landing Page Design
-                        </p>
-                    </div>
-                    <span class="material-symbols-rounded h-6 w-6 text-navy-700 dark:text-white cursor-pointer">
-                        drag_indicator
-                    </span>  
-                </div>
-
-                <div class="mt-2 flex items-center justify-between p-2">
-                    <div class="flex items-center justify-center gap-2">
-                        <input
-                            type="checkbox"
-                            class="defaultCheckbox relative flex h-[20px] min-h-[20px] w-[20px] min-w-[20px] appearance-none items-center 
-                            justify-center rounded-md border border-gray-300 text-white/0 outline-none transition duration-[0.2s]
-                            checked:border-none checked:text-white hover:cursor-pointer dark:border-white/10 checked:bg-brand-500 dark:checked:bg-brand-400"
-                            name="weekly" 
-                        />
-                        <p class="text-base font-bold text-navy-700 dark:text-white">
-                        Dashboard Builder
-                        </p>
-                    </div>
-                    <span class="material-symbols-rounded h-6 w-6 text-navy-700 dark:text-white cursor-pointer">
-                        drag_indicator
-                    </span>  
+                    
                 </div>
             </div>
-            </div>
-            <p class="font-normal text-navy-700 mt-20 mx-auto w-max">Notifications Card component from <a href="https://horizon-ui.com?ref=tailwindcomponents.com" target="_blank" class="text-brand-500 font-bold">Horizon UI Tailwind React</a></p>  
+            <p class="font-normal text-navy-700 mt-20 mx-auto w-max">Notifications Card component from <a
+                    href="https://horizon-ui.com?ref=tailwindcomponents.com" target="_blank"
+                    class="text-brand-500 font-bold">Horizon UI Tailwind React</a></p>
         </div>
     </body>
     <div>
-      <!-- The current route is accessible as $route in the template -->
-      Lista {{ $route.params.id }}
-      <template v-for="item in items">
-        {{item.nombre}}
-      </template>
     </div>
-  </template>
+</template>
 
 <script setup>
 import { onMounted, ref } from 'vue'
@@ -141,12 +74,13 @@ let id_lista = route.params.id
 let items = ref()
 let pb = null
 
-onMounted(async()=>{
-  pb = new PocketBase('http://127.0.0.1:8090');
+onMounted(async () => {
+    pb = new PocketBase('http://127.0.0.1:8090');
 
-  items.value = await pb.collection('item').getFullList({
-    sort: '-created',
-});
-  console.log(items.value)
+    items.value = await pb.collection('item').getFullList( {
+        sort: '-created',
+    });
+    items.value = items.value.filter((item) => item.field == id_lista);
 })
+
 </script>
\ No newline at end of file
