filtra listas
This commit is contained in:
@@ -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>
|
||||
@@ -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>
|
||||
Reference in New Issue
Block a user