new Item

src/layouts/MainLayout.vue

@@ -19,6 +19,10 @@
                       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>
@@ -108,4 +112,55 @@ const newLista = async () => {
 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/ItemsPage.vue

@@ -1,23 +1,33 @@
 <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 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">
+                        <q-card-section>
+                            <div class="text-h6">{{ item.nombre }}
+                                <q-icon name="edit" class="cursor-pointer" />
+                            </div>
+                            <div class="text-subtitle1">{{ item.cantidad }}</div>
+                        </q-card-section>
+
+                        <q-separator dark />
+
+                        <q-card-actions>
+                            <q-btn flat class="cursor-pointer" />
+                            <q-space></q-space>
+                            <q-btn class="bg-negative q-mr-md" flat>Borrar</q-btn>
+                        </q-card-actions>
+                    </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>
 
@@ -30,6 +40,13 @@ import useSupabase from '../boot/supabase'
 const { supabase } = useSupabase()
 const store = supabaseStore()
 const route = useRoute()
+
+const onLoad = (index, done) => {
+    setTimeout(() => {
+        store.listas.push()
+        done()
+    }, 1000)
+}
 const getItems = async () => {
     console.log('getItems', route.params.id)
     let { data: items, error } = await supabase