itemsPage

.vscode/settings.json

@@ -14,5 +14,8 @@
   ],
   "[vue]": {
     "editor.defaultFormatter": "Vue.volar"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
   }
 }

src/pages/IndexPage.vue

@@ -3,6 +3,7 @@
     <q-infinite-scroll @load="onLoad" :offset="250">
       <div v-for="(lista, index) in store.listas" :key="index" class="caption">
         <div class="q-pa-md row items-start q-gutter-md">
+
           <q-card class="my-card text-white"
             :class="store.user?.email === lista.email_owner ? 'bg-secondary' : 'bg-green-7'">
             <q-card-section>
@@ -10,7 +11,8 @@
                 {{ lista.items ? lista.items.filter(i => !i.is_done).length : '0' }}/{{ lista.items ?
                   lista.items?.length : '0' }}
               </q-badge>
-              <div class="text-h5">{{ lista.nombre }}
+
+              <div class="text-h5"><router-link :to="{ path: '/items/' + lista.id }">{{ lista.nombre }}</router-link>
                 <q-icon name="edit" @click="changeNameList(lista.id, lista.nombre)" class="cursor-pointer"
                   v-if="store.user?.email === lista.email_owner" />
               </div>
@@ -52,6 +54,7 @@ import useSupabase from '../boot/supabase'
 import { useQuasar } from 'quasar'
 import { onMounted } from 'vue'
 import { supabaseStore } from '../stores/supabaseStore'
+import { RouterLink } from 'vue-router'
 
 const { supabase } = useSupabase()
 const $q = useQuasar()
@@ -284,3 +287,10 @@ onMounted(() => {
   getListas()
 })
 </script>
+
+<style>
+a {
+  text-decoration: none;
+  color: inherit;
+}
+</style>

src/pages/ItemsPage.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="q-pa-md mx-auto">
+        <q-list v-for="item in store.items" :key="item.id" class="shadow-2 rounded-borders q-mx-md">
+            <q-item tag="label">
+                <q-item-section>
+                    <q-item-label class="text-bold text-h5">{{ item.nombre }}<q-btn size="12px" flat dense round
+                            icon="edit" /></q-item-label>
+                    <q-item-label class="text-bold text-h6">{{ item.cantidad }}<q-btn size="12px"
+                            class="q-mb-sm q-ml-xs" flat round icon="↑" /><q-btn size="12px" class="q-mb-sm" flat round
+                            icon="↓" /></q-item-label>
+                </q-item-section>
+                <q-item-section avatar>
+                    <q-toggle color="blue" v-model="item.is_done" />
+                </q-item-section>
+                <q-item-section avatar>
+                    <q-btn size="12px" flat dense round icon="delete" />
+                </q-item-section>
+            </q-item>
+            <q-separator />
+        </q-list>
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { supabaseStore } from '../stores/supabaseStore'
+import useSupabase from '../boot/supabase'
+
+const { supabase } = useSupabase()
+const store = supabaseStore()
+const route = useRoute()
+const getItems = async () => {
+    console.log('getItems', route.params.id)
+    let { data: items, error } = await supabase
+        .from('items')
+        .select('*')
+        .eq('lista_id', route.params.id)
+    if (error) throw error
+    store.items = items
+}
+
+onMounted(() => {
+    getItems()
+})
+</script>

src/router/routes.js

@@ -18,7 +18,8 @@ const routes = [
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      { path: '', component: () => import('pages/IndexPage.vue'), meta: { requiresAuth: true } }
+      { path: '', component: () => import('pages/IndexPage.vue'), meta: { requiresAuth: true } },
+      { path: 'items/:id', component: () => import('pages/ItemsPage.vue'), meta: { requiresAuth: true } }
     ]
   },
 

src/stores/supabaseStore.js

@@ -7,6 +7,7 @@ export const supabaseStore = defineStore('supabaseStore', {
     user: null,
     session: null,
     listas: [],
+    items: []
   }),
 
   getters: {