From d5ef614ee92801c5a2bbfed82ad6a5a0bc5df58a Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Sat, 8 Feb 2025 19:12:28 +0100
Subject: [PATCH] =?UTF-8?q?list=20and=20men=C3=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/MainLayout.vue | 24 +++++++++++++++++++++++-
 src/pages/IndexPage.vue    | 29 +++++++++++++++++++++++++++--
 2 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index b18a167..2a55452 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -7,7 +7,26 @@
           {{ store.user ? store.user.email : '' }}
         </q-toolbar-title>
 
-        <div><q-btn color="secondary" @click="logout">Logout</q-btn></div>
+        <div>
+          <div class="q-pa-md">
+            <div class="q-gutter-md">
+
+              <q-btn color="secondary" label="Menú">
+                <q-menu>
+                  <q-list style="min-width: 100px">
+                    <q-item clickable v-close-popup @click="newLista" v-if="router.currentRoute.value.path">
+                      <q-item-section>Nueva Lista</q-item-section>
+                    </q-item>
+                    <q-separator />
+                    <q-item clickable v-close-popup @click="logout">
+                      <q-item-section>Logout</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+          </div>
+        </div>
       </q-toolbar>
     </q-header>
 
@@ -38,6 +57,9 @@ const logout = async () => {
       alert(error.message)
     }
   }
+}
 
+const newLista = () => {
+  console.log(router.currentRoute.value.path)
 }
 </script>
diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
index aade543..a76949e 100644
--- a/src/pages/IndexPage.vue
+++ b/src/pages/IndexPage.vue
@@ -1,8 +1,31 @@
 <template>
-  <div class="q-pa-md">
+  <div class="bg-blue-grey window-height window-width row justify-center items-center">
     <q-infinite-scroll @load="onLoad" :offset="250">
       <div v-for="(lista, index) in arraylistas" :key="index" class="caption">
-        {{ lista }}
+        <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>
+              <div class="text-h5">{{ lista.nombre }}</div>
+              <div class="text-subtitle1">{{ lista.email_owner }}</div>
+            </q-card-section>
+
+            <q-card-section>
+              Compartido con:
+              <span v-if="lista.profiles.length === 0">Nadie</span>
+              <span v-for="(profile, index) in lista.profiles" :key="index">
+                {{ profile.email }}
+              </span>
+            </q-card-section>
+
+            <q-separator dark />
+
+            <q-card-actions>
+              <q-btn flat>Action 1</q-btn>
+              <q-btn flat>Action 2</q-btn>
+            </q-card-actions>
+          </q-card>
+        </div>
       </div>
       <template v-slot:loading>
         <div class="row justify-center q-my-md">
@@ -17,9 +40,11 @@
 import useSupabase from '../boot/supabase'
 import { useQuasar } from 'quasar'
 import { onMounted } from 'vue'
+import { supabaseStore } from '../stores/supabaseStore'
 
 const { supabase } = useSupabase()
 const $q = useQuasar()
+const store = supabaseStore()
 
 let arraylistas = []