dietpi/pocketbase-vue-listas-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

listas items

Browse Source
This commit is contained in:
Clonbg
2024-08-30 01:12:26 +02:00
parent 0d4e5e5cfd
commit f4bd38e5a2
9 changed files with 330 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/404.vue Normal file
View File

@@ -0,0 +1,17 @@
<template>
<div class="h-screen w-screen bg-gray-50 flex items-center">
<div class="container flex flex-col md:flex-row items-center justify-between px-5 text-gray-700">
<div class="w-full lg:w-1/2 mx-8">
<div class="text-7xl text-green-500 font-dark font-extrabold mb-8"> 404</div>
<p class="text-2xl md:text-3xl font-light leading-normal mb-8">
Sorry we couldn't find the page you're looking for
</p>
<a href="/" class="px-5 inline py-3 text-sm font-medium leading-5 shadow-2xl text-white transition-all duration-400 border border-transparent rounded-lg focus:outline-none bg-green-600 active:bg-red-600 hover:bg-red-700">back to homepage</a>
</div>
<div class="w-full lg:flex lg:justify-end lg:w-1/2 mx-5 my-12">
<img src="https://user-images.githubusercontent.com/43953425/166269493-acd08ccb-4df3-4474-95c7-ad1034d3c070.svg" class="" alt="Page not found">
</div>
</div>
</div></template>

152
src/components/Lista.vue Normal file
View File

@@ -0,0 +1,152 @@
<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>
<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>
<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">
Mobile App 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"
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>
</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>
<script setup>
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import PocketBase from 'pocketbase';
const route = useRoute()
let id_lista = route.params.id
let items = ref()
let pb = null
onMounted(async()=>{
pb = new PocketBase('http://127.0.0.1:8090');
items.value = await pb.collection('item').getFullList({
sort: '-created',
});
console.log(items.value)
})
</script>

33
src/router/index.js
View File

@@ -1,4 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router'
import { useUserStore } from '@/stores/user'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
@@ -8,15 +10,36 @@ const router = createRouter({
name: 'Login',
component: () => import('../views/LoginView.vue')
},
{
path: '/about',
name: 'about',
{
path: '/listas',
name: 'listas',
// route level code-splitting
// this generates a separate chunk (About.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue')
}
component: () => import('../views/ListasView.vue'),
meta: { requiresAuth: true },
},
{
path: '/lista/:id',
name: 'lista',
component: () => import('../components/Lista.vue'),
meta: { requiresAuth: true }
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('../components/404.vue')
},
]
})
router.beforeEach((to) => {
// ✅ This will work because the router starts its navigation after
// the router is installed and pinia will be installed too
const storeUser = useUserStore()
console.log(storeUser.isValid)
if (to.meta.requiresAuth && !storeUser.isValid) return '/'
})
export default router

9
src/stores/user.js Normal file
View File

@@ -0,0 +1,9 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', () => {
const user = ref()
const isValid = ref()
return { user, isValid }
})

14
src/views/AboutView.vue
View File

@@ -1,14 +0,0 @@
<template>
<h1 class="text-3xl font-bold underline">
About Page Gooooo
{{ storeCounter.count }}
</h1>
<router-link to="/">Go to Login</router-link>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'
// access the `store` variable anywhere in the component ✨
const storeCounter = useCounterStore()
</script>

51
src/views/ListasView.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div class="bg-gray-200 flex flex-col gap-4 h-screen items-center justify-center">
<h1 class="text-2xl font-bold mb-6">
Las listas de {{ storeUser.user.name }}
</h1>
<!-- Card 1 -->
<template v-for="lista in listas">
<router-link :to="`/lista/${lista.id}`" class="rounded-sm w-1/2 grid grid-cols-12 bg-white shadow p-3 gap-2 items-center hover:shadow-lg transition delay-150 duration-300 ease-in-out hover:scale-105 transform">
<!-- Icon -->
<div class="col-span-12 md:col-span-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor"
className="size-6">
<path strokeLinecap="round" strokeLinejoin="round"
d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
</svg>
</div>
<!-- Title -->
<div class="col-span-11 xl:-ml-5">
<p class="text-blue-600 font-semibold">{{ lista.nombre }}</p>
</div>
<!-- Description -->
<div class="md:col-start-2 col-span-11 xl:-ml-5">
<p class="text-sm text-gray-800 font-light">{{lista.descripcion}}</p>
</div>
</router-link>
</template>
</div>
</template>
<script setup>
import { useUserStore } from '@/stores/user'
import { onMounted, ref } from 'vue'
import PocketBase from 'pocketbase';
// access the `store` variable anywhere in the component ✨
const storeUser = useUserStore()
let pb = ref()
let listas = ref()
onMounted(async () => {
pb = new PocketBase('http://127.0.0.1:8090');
listas.value = await pb.collection('listas').getFullList({
sort: '-created',
});
})
</script>

115
src/views/LoginView.vue
View File

@@ -1,64 +1,79 @@
<!-- <template>
<h1 class="text-3xl font-bold underline">
Login Page Gooooo
</h1>
<router-link to="/about">Go to About</router-link>
</template> -->
<template>
<!-- https://www.creative-tim.com/twcomponents/component/simple-login-form-3 -->
<div class="min-h-screen flex items-center justify-center w-full dark:bg-gray-950">
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg px-8 py-6 max-w-md">
<h1 class="text-2xl font-bold text-center mb-4 dark:text-gray-200">Welcome Back!</h1>
<form action="#">
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
<input type="email" id="email" class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="your@email.com" required>
</div>
<div class="mb-4">
<label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Password</label>
<input type="password" id="password" class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500" placeholder="Enter your password" required>
<a href="#"
class="text-xs text-gray-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Forgot
Password?</a>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" id="remember" class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 focus:outline-none" checked>
<label for="remember" class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Remember me</label>
<template>
<!-- https://www.creative-tim.com/twcomponents/component/simple-login-form-3 -->
<div class="min-h-screen flex items-center justify-center w-full dark:bg-gray-950">
<div class="bg-white dark:bg-gray-900 shadow-md rounded-lg px-8 py-6 max-w-md">
<h1 class="text-2xl font-bold text-center mb-4 dark:text-gray-200">Bienvenido!</h1>
<form action="#">
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Correo
electrónico</label>
<input type="email" id="email" v-model="email"
class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
placeholder="your@email.com" required>
</div>
<a href="#"
class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Create
Account</a>
</div>
<button onclick="alert('hello')" type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Login</button>
</form>
<div class="mb-4">
<label for="password"
class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Contraseña</label>
<input type="password" id="password" v-model="password"
class="shadow-sm rounded-md w-full px-3 py-2 border border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
placeholder="Enter your password" required>
<a href="#"
class="text-xs text-gray-600 hover:text-indigo-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Olvidó
la contraseña?</a>
</div>
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<input type="checkbox" id="remember"
class="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 focus:outline-none"
checked>
<label for="remember"
class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Recuérdame</label>
</div>
<a href="#"
class="text-xs text-indigo-500 hover:text-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Crear
cuenta</a>
</div>
<button @click="login" type="button"
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Login</button>
</form>
</div>
</div>
</div>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'
import { computed, ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { onMounted, ref } from 'vue'
import PocketBase from 'pocketbase';
import router from '@/router';
// access the `store` variable anywhere in the component ✨
const storeCounter = useCounterStore()
const storeUser = useUserStore()
let count = ref(0)
let pb = null
let email = ref('p40store@gmail.com')
let password = ref('p40store')
console.log(storeCounter.count) // 0
onMounted(() => {
pb = new PocketBase('http://127.0.0.1:8090');
})
storeCounter.increment()
console.log(storeCounter.count) // 1
const login = async () => {
const authData = await pb.collection('users').authWithPassword(
email.value,
password.value,
).then(function (result) {
console.log(pb.authStore.isValid);
storeUser.user = pb.authStore.model
storeUser.isValid = pb.authStore.isValid
console.log(storeUser.user)
if (storeUser.isValid) {
router.push('listas')
}
}).catch(function () {
alert('Parámetros incorrectos')
})
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>