crea nueva lista

src/layouts/MainLayout.vue

@@ -14,7 +14,8 @@
               <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 clickable v-close-popup @click="openDialogNewList"
+                      v-if="router.currentRoute.value.path == '/'">
                       <q-item-section>Nueva Lista</q-item-section>
                     </q-item>
                     <q-separator />
@@ -34,16 +35,38 @@
       <router-view />
     </q-page-container>
   </q-layout>
+  <q-dialog v-model="dialogNewList" persistent>
+    <q-card style="min-width: 350px">
+      <q-card-section>
+        <div class="text-h6">Nombre de la lista</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <q-input dense v-model="nameList" autofocus @keyup.enter="dialogNewList = false" />
+      </q-card-section>
+
+      <q-card-actions align="right" class="text-primary">
+        <q-btn flat label="Cancel" v-close-popup />
+        <q-btn flat label="Crear" v-close-popup @click="newLista" :disable="nameList.length < 4" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 import { supabaseStore } from '../stores/supabaseStore'
 import useSupabase from '../boot/supabase'
 import { useRouter } from 'vue-router'
+import { useQuasar } from 'quasar'
 
 const store = supabaseStore()
 const { supabase } = useSupabase()
 const router = useRouter()
+const $q = useQuasar()
+
+const dialogNewList = ref(false)
+const nameList = ref('')
 
 const logout = async () => {
   try {
@@ -59,7 +82,28 @@ const logout = async () => {
   }
 }
 
-const newLista = () => {
-  console.log(router.currentRoute.value.path)
+const newLista = async () => {
+  try {
+    const { data, error } = await supabase
+      .from('listas')
+      .insert([
+        { nombre: nameList.value }
+      ])
+      .select()
+    if (error) throw error
+    store.listas.push(data[0])
+    nameList.value = ''
+  } catch (error) {
+    if (error instanceof Error) {
+      $q.notify({
+        type: 'negative',
+        message: error.message
+      })
+    }
+  }
+}
+
+const openDialogNewList = () => {
+  dialogNewList.value = true
 }
 </script>

src/pages/IndexPage.vue

@@ -1,23 +1,22 @@
 <template>
   <div class="full-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">
+      <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>
-              <q-badge color="orange" class="text-subtitle2" floating trasparent>{{ lista.items.filter(i =>
-                !i.is_done).length
-                }}/{{
-                  lista.items.length
-                }}</q-badge>
+              <q-badge color="orange" class="text-subtitle2" floating trasparent>
+                {{ 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>
               <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-if="!lista.profiles || lista.profiles.length === 0">Nadie</span>
               <span v-for="(profile, index) in lista.profiles" :key="index">
                 {{ profile.email }}
               </span>
@@ -51,7 +50,6 @@ const { supabase } = useSupabase()
 const $q = useQuasar()
 const store = supabaseStore()
 
-let arraylistas = []
 
 const getListas = async () => {
   try {
@@ -60,7 +58,7 @@ const getListas = async () => {
       .select(`*, profiles(*),items(is_done)`)
     if (error) throw error
     console.log('listas', listas)
-    arraylistas = listas
+    store.listas = listas
   } catch (error) {
     if (error instanceof Error) {
       $q.notify({
@@ -73,7 +71,7 @@ const getListas = async () => {
 
 const onLoad = (index, done) => {
   setTimeout(() => {
-    arraylistas.push()
+    store.listas.push()
     done()
   }, 1000)
 }

src/stores/supabaseStore.js

@@ -5,7 +5,8 @@ export const supabaseStore = defineStore('supabaseStore', {
     // counter: 0
     prueba: 'prueba',
     user: null,
-    session: null
+    session: null,
+    listas: [],
   }),
 
   getters: {