is_done my own data

.vscode/settings.json

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

src/layouts/MainLayout.vue

@@ -11,13 +11,18 @@
           <div class="q-pa-md">
             <div class="q-gutter-md">
 
-              <q-btn color="secondary" label="Menú">
+              <q-btn flat>
+                <q-icon name="menu" />
                 <q-menu>
                   <q-list style="min-width: 100px">
                     <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-item clickable v-close-popup @click="newItem"
+                      v-if="router.currentRoute.value.path == `/items/${router.currentRoute.value.params.id}`">
+                      <q-item-section>Nuevo Item</q-item-section>
+                    </q-item>
                     <q-separator />
                     <q-item clickable v-close-popup @click="logout">
                       <q-item-section>Logout</q-item-section>
@@ -42,7 +47,7 @@
       </q-card-section>
 
       <q-card-section class="q-pt-none">
-        <q-input dense v-model="nameList" autofocus @keyup.enter="dialogNewList = false" />
+        <q-input dense v-model="nameList" autofocus @keyup.enter="newLista" />
       </q-card-section>
 
       <q-card-actions align="right" class="text-primary">
@@ -101,9 +106,61 @@ const newLista = async () => {
       })
     }
   }
+  dialogNewList.value = false
 }
 
 const openDialogNewList = () => {
   dialogNewList.value = true
 }
+
+const newItem = () => {
+  const lista = router.currentRoute.value.params.id
+  $q.dialog({
+    title: 'Escriba',
+    message: 'Nuevo item',
+    html: true,
+    prompt: {
+      model: '',
+      isValid: val => val.length > 4, // << here is the magic
+      type: 'text'
+    },
+    ok: {
+      push: true,
+      label: 'Crear',
+      color: 'positive' // << here is the magic
+    },
+    cancel: {
+      push: true,
+      color: 'negative'
+    },
+    persistent: true
+  }).onOk(async (item) => {
+    if (store.items.find(i => i.nombre === item)) {
+      $q.notify({
+        type: 'negative',
+        message: 'Item duplicado'
+      })
+      return
+    }
+    try {
+      console.log(item, lista)
+      const { data, error } = await supabase
+        .from('items')
+        .insert([
+          { nombre: item, lista_id: lista }
+        ])
+        .select()
+      console.log(data)
+      if (error) throw error
+      store.items.push(data[0])
+    } catch (error) {
+      if (error instanceof Error) {
+        $q.notify({
+          type: 'negative',
+          message: error.message
+        })
+      }
+    }
+  })
+}
 </script>

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,8 +11,10 @@
                 {{ 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 }}
-                <q-icon name="edit" @click="openDialogChangeNameList(lista.id)" class="cursor-pointer" />
+
+              <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>
               <div class="text-subtitle1">{{ lista.email_owner }}</div>
             </q-card-section>
@@ -20,18 +23,18 @@
               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" @click="console.log(profile.email)"
-                  class="cursor-pointer" />
+                <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>
             </q-card-section>
 
             <q-separator dark />
 
             <q-card-actions>
-              <q-btn flat>Editar</q-btn>
-              <q-btn flat>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>
@@ -43,51 +46,34 @@
       </template>
     </q-infinite-scroll>
   </div>
-  <q-dialog v-model="dialogChangeNameList" persistent enterConfirm>
-    <q-card style="min-width: 350px">
-      <q-card-section>
-        <div class="text-h6">Nuevo nombre</div>
-      </q-card-section>
-
-      <q-card-section class="q-pt-none">
-        <q-input dense v-model="newNameList" autofocus
-          @keyup.enter="changeNameList(lista_id); dialogChangeNameList = 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="changeNameList(lista_id)" :disable="newNameList.length < 4" />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
 </template>
 
 <script setup>
+import { watchEffect } from 'vue'
 import useSupabase from '../boot/supabase'
 import { useQuasar } from 'quasar'
-import { ref, onMounted } from 'vue'
+import { onMounted } from 'vue'
 import { supabaseStore } from '../stores/supabaseStore'
+import { RouterLink } from 'vue-router'
 
 const { supabase } = useSupabase()
 const $q = useQuasar()
 const store = supabaseStore()
 
-const dialogChangeNameList = ref(false)
-const newNameList = ref('')
-const lista_id = ref(0)
-
 const ordenarArray = (array) => {
   array.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
 }
+
+watchEffect(() => {
+  ordenarArray(store.listas)
+})
 const getListas = async () => {
   try {
     let { data: listas, error } = await supabase
       .from('listas')
       .select(`*, profiles(*),items(is_done)`)
     if (error) throw error
-    console.log('listas', listas)
     store.listas = listas
-    ordenarArray(store.listas)
   } catch (error) {
     if (error instanceof Error) {
       $q.notify({
@@ -105,18 +91,42 @@ const onLoad = (index, done) => {
   }, 1000)
 }
 
-const changeNameList = async (id) => {
+const changeNameList = async (id, nombre) => {
   try {
-    const ahora = new Date()
-    const { error } = await supabase
-      .from('listas')
-      .update({ nombre: newNameList.value, updated_at: ahora })
-      .eq('id', id)
-      .select()
-    if (error) throw error
-    store.listas.filter(l => l.id === id)[0].nombre = newNameList.value
-    store.listas.filter(l => l.id === id)[0].updated_at = ahora
-    ordenarArray(store.listas)
+    $q.dialog({
+      title: 'Escriba',
+      message: 'Nuevo nombre de la lista',
+      html: true,
+      prompt: {
+        model: nombre,
+        isValid: val => val.length > 4, // << here is the magic
+        type: 'text'
+      },
+      ok: {
+        push: true,
+
+      },
+      cancel: {
+        push: true,
+      },
+      persistent: true
+    }).onOk(async (data) => {
+      const ahora = new Date()
+      const { error } = await supabase
+        .from('listas')
+        .update({ nombre: data, updated_at: ahora })
+        .eq('id', id)
+        .select()
+      if (error) {
+        $q.notify({
+          type: 'negative',
+          message: error.message
+        })
+        throw error
+      }
+      store.listas.filter(l => l.id === id)[0].nombre = data
+      store.listas.filter(l => l.id === id)[0].updated_at = ahora
+    })
   } catch (error) {
     if (error instanceof Error) {
       $q.notify({
@@ -127,13 +137,160 @@ const changeNameList = async (id) => {
   }
 }
 
-const openDialogChangeNameList = (id) => {
-  dialogChangeNameList.value = true
-  lista_id.value = id
-  newNameList.value = ''
+const unShareUser = async (user_id, lista_id, email) => {
+  try {
+    $q.dialog({
+      title: 'Confirm',
+      message: 'Está seguro que quiere dejar de compartir esta lista con <span class="text-negative">' + email + '</span>?',
+      html: true,
+      ok: {
+        push: true,
+        color: 'negative'
+      },
+      cancel: {
+        push: true,
+        color: 'positive'
+      },
+      persistent: true
+    }).onOk(async () => {
+      const { error } = await supabase
+        .from('share')
+        .delete()
+        .eq('user_id', user_id)
+        .eq('lista_id', lista_id)
+      if (error) {
+        $q.notify({
+          type: 'negative',
+          message: error.message
+        })
+        throw error
+      }
+      store.listas.filter(l => l.id === lista_id)[0].profiles = store.listas.filter(l => l.id === lista_id)[0].profiles.filter(p => p.id !== user_id)
+    })
+
+  } catch (error) {
+    if (error instanceof Error) {
+      $q.notify({
+        type: 'negative',
+        message: error.message
+      })
+    }
+  }
+}
+
+const getProfileByEmail = async (email) => {
+  try {
+    const { data, error } = await supabase
+      .from('profiles')
+      .select()
+      .eq('email', email.trim())
+    if (error) throw error
+    return data[0]
+  } catch (error) {
+    if (error instanceof Error) {
+      $q.notify({
+        type: 'negative',
+        message: error.message
+      })
+    }
+  }
+}
+const shareUser = async (id) => {
+  $q.dialog({
+    title: 'Escriba',
+    message: 'Email del usuario',
+    html: true,
+    prompt: {
+      model: '',
+      isValid: val => val.length > 5, // << here is the magic
+      type: 'text'
+    },
+    ok: {
+      push: true,
+
+    },
+    cancel: {
+      push: true,
+    },
+    persistent: true
+  }).onOk(async (email) => {
+    try {
+      const profile = await getProfileByEmail(email)
+      if (profile.email === store.user.email) {
+        $q.notify({
+          type: 'negative',
+          message: 'No puede compartir la lista con usted mismo'
+        })
+        return
+      }
+      const { error } = await supabase
+        .from('share')
+        .insert([
+          { user_id: profile.id, lista_id: id },
+        ])
+        .select()
+      if (error) throw error
+      store.listas.filter(l => l.id === id)[0].profiles.push(profile)
+    } catch (error) {
+      if (error instanceof Error) {
+        if (error.message.includes('profile is undefined')) {
+          $q.notify({
+            type: 'negative',
+            message: 'El email no existe en la base de datos'
+          })
+        } else {
+          $q.notify({
+            type: 'negative',
+            message: error.message
+          })
+        }
+      }
+    }
+  })
+}
+
+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()
 })
 </script>
+
+<style>
+a {
+  text-decoration: none;
+  color: inherit;
+}
+</style>

src/pages/ItemsPage.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="full-height window-width row justify-center items-center">
+        <q-infinite-scroll @load="onLoad" :offset="250">
+            <div v-for="(item, index) in store.items" :key="index" class="caption">
+                <div class="q-pa-md row items-start q-gutter-md">
+                    <q-card class="my-card text-white bg-teal-9 text-h6">
+                        <q-card-section>
+                            <q-toggle :false-value="false" :label="item.nombre" :true-value="true" color="red"
+                                v-model="item.is_done" @click="updateItemDone(item)" />
+                            <q-icon name="edit" class="cursor-pointer q-ml-xs" />
+                            <q-icon name="delete" class="cursor-pointer float-right q-mt-md text-red" />
+                            <q-item-label caption class="q-ml-md"><span class="blue text-h6">
+                                    {{ item.cantidad }}</span>
+                                <q-btn flat dense icon="arrow_upward" size="sm" class="cursor-pointer" />
+                                <q-btn flat dense icon="arrow_downward" size="sm" />
+                            </q-item-label>
+                        </q-card-section>
+                    </q-card>
+
+                </div>
+            </div>
+            <template v-slot:loading>
+                <div class="row justify-center q-my-md">
+                    <q-spinner-dots color="primary" size="40px" />
+                </div>
+            </template>
+        </q-infinite-scroll>
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { supabaseStore } from '../stores/supabaseStore'
+import useSupabase from '../boot/supabase'
+import { useQuasar } from 'quasar'
+
+const { supabase } = useSupabase()
+const store = supabaseStore()
+const route = useRoute()
+const $q = useQuasar()
+
+//TODO los items de listas compartidas falta policy update
+const updateItemDone = async (item) => {
+    console.log(item)
+    try {
+        const { data, error } = await supabase
+            .from('items')
+            .update({ is_done: item.is_done })
+            .eq('id', item.id)
+            .select()
+        if (error) throw error
+        store.items = store.items.filter(i => i.id !== item.id)
+        store.items.push(data[0])
+    } catch (error) {
+        if (error instanceof Error) {
+            $q.notify({
+                type: 'negative',
+                message: error.message
+            })
+        }
+    }
+}
+
+const onLoad = (index, done) => {
+    setTimeout(() => {
+        store.listas.push()
+        done()
+    }, 1000)
+}
+const getItems = async () => {
+    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: {