crear listas

src/pages/ListasPage.vue

@@ -32,9 +32,11 @@
 import { ref, onMounted } from "vue";
 import { useListaStore } from "../stores/lista.js";
 import { useRouter } from "vue-router";
+import { useQuasar } from "quasar";
 
 const $router = useRouter();
 const listaStore = useListaStore();
+const $q = useQuasar();
 
 const listas = ref(null);
 
@@ -49,19 +51,36 @@ const irPerfil = () => {
 };
 
 const crearLista = () => {
-  const data = {
-    nombre: "test3",
-    usuarios: [listaStore.pb.authStore.model.id],
-    items: [],
-  };
-
-  listaStore.pb
-    .collection("lista")
-    .create(data)
-    .then((r) => {
-      console.log("creada");
+  $q.dialog({
+    title: "Nueva lista",
+    message: "Nombre de la lista",
+    prompt: {
+      model: "",
+      isValid: (val) => val.length > 2,
+      type: "text", // optional
+    },
+    cancel: true,
+    persistent: true,
+  })
+    .onOk((nombreLista) => {
+      console.log(">>>> OK, received", nombreLista);
+      const data = {
+        nombre: nombreLista.trim(),
+        usuarios: [listaStore.pb.authStore.model.id],
+        items: [],
+      };
+      listaStore.pb
+        .collection("lista")
+        .create(data)
+        .then((r) => {
+          console.log("creada");
+          listListas();
+        })
+        .catch((e) => {
+          console.log(e);
+        });
     })
-    .catch((e) => {
+    .onCancel((e) => {
       console.log(e);
     });
 };