deleteList

src/pages/IndexPage.vue

@@ -21,7 +21,7 @@
               Compartido con:
               <span v-if="!lista.profiles || lista.profiles.length === 0">Nadie</span>
               <span v-for="(profile, index) in lista.profiles" :key="index">
-                <br>- {{ profile.email }} <q-icon name="delete"
+                <br>➛ {{ profile.email }} <q-icon name="delete"
                   @click="unShareUser(profile.id, lista.id, profile.email)" class="cursor-pointer"
                   v-if="store.user?.email === lista.email_owner" />
               </span>
@@ -30,10 +30,9 @@
             <q-separator dark />
 
             <q-card-actions>
-              <q-btn flat>Editar</q-btn>
-              <q-btn flat @click="shareUser(lista.id)">Compartir</q-btn>
+              <q-btn flat @click="shareUser(lista.id)"><q-icon name="share" class="cursor-pointer" /></q-btn>
               <q-space></q-space>
-              <q-btn class="bg-negative q-mr-md" flat>Borrar</q-btn>
+              <q-btn class="bg-negative q-mr-md" flat @click="deleteList(lista.id)">Borrar</q-btn>
             </q-card-actions>
           </q-card>
         </div>
@@ -244,6 +243,40 @@ const shareUser = async (id) => {
   })
 }
 
+const deleteList = async (id) => {
+  $q.dialog({
+    title: 'Confirm',
+    message: 'Está seguro que quiere eliminar esta lista?',
+    html: true,
+    ok: {
+      push: true,
+      color: 'negative'
+    },
+    cancel: {
+      push: true,
+      color: 'positive'
+    },
+    persistent: true
+  }).onOk(async () => {
+    try {
+      const { error } = await supabase
+        .from('listas')
+        .delete()
+        .eq('id', id)
+      if (error) throw error
+      store.listas = store.listas.filter(l => l.id !== id)
+    } catch (error) {
+      if (error instanceof Error) {
+        $q.notify({
+          type: 'negative',
+          message: error.message
+        })
+      }
+    }
+  })
+
+}
+
 onMounted(() => {
   getListas()
 })