Guardar y cargar datos

src/pages/IndexPage.vue

@@ -1,7 +1,7 @@
 <template>
   <q-page class="flex flex-center">
     <div class="column q-pa-md q-gutter-sm">
-      <div class="row">
+      <div class="row flex-center q-pb-md">
         <q-avatar size="96px">
           <img
             :src="
@@ -32,12 +32,42 @@
           disable
         />
       </div>
-      <div class="row">
-        <div class="col">
-          <q-btn round color="primary" icon="cancel" />
+      <div class="row q-pt-md">
+        <div class="col text-center">
+          <q-btn round color="primary" icon="cancel" @click="cargarDatos()" />
         </div>
-        <div class="col">
-          <q-btn round color="secondary" icon="save" @click="updateUser()" />
+        <div class="col text-center">
+          <q-btn
+            round
+            color="secondary"
+            icon="save"
+            @click="alertSave = true"
+          />
+          <q-dialog v-model="alertSave" persistent>
+            <q-card>
+              <q-card-section class="row items-center">
+                <q-avatar icon="warning" color="warning" text-color="white" />
+                <span class="q-ml-sm">Está seguro de guardar los datos?</span>
+              </q-card-section>
+
+              <q-card-actions align="right">
+                <q-btn
+                  flat
+                  label="No"
+                  color="negative"
+                  v-close-popup
+                  @click="cargarDatos()"
+                />
+                <q-btn
+                  flat
+                  label="Guardar"
+                  color="accent"
+                  v-close-popup
+                  @click="updateUser()"
+                />
+              </q-card-actions>
+            </q-card>
+          </q-dialog>
         </div>
       </div>
     </div>
@@ -49,26 +79,31 @@ import { useListaStore } from "../stores/lista.js";
 
 const listaStore = useListaStore();
 
-const imagen = ref(listaStore.pb.authStore.model.username.avatar);
+const imagen = ref(null);
 const username = ref(listaStore.pb.authStore.model.username);
 const name = ref(listaStore.pb.authStore.model.name);
-const updateUser = () => {
+const alertSave = ref(false);
+const updateUser = async () => {
   const formData = new FormData();
-  if (username.value) {
+  if (username.value.trim().length > 0) {
     formData.append("username", username.value);
   }
-  if (name.value) {
+  if (name.value.trim().length > 0) {
     formData.append("name", name.value);
   }
   if (imagen.value != null) {
     formData.append("avatar", imagen.value);
   }
-  const record = listaStore.pb
+  await listaStore.pb
     .collection("users")
     .update(listaStore.pb.authStore.model.id, formData)
     .then((r) => {
-      imagen.value = listaStore.pb.authStore.model.username.avatar;
+      cargarDatos();
     });
-  console.log(record);
+};
+const cargarDatos = () => {
+  imagen.value = null;
+  username.value = listaStore.pb.authStore.model.username.trim();
+  name.value = listaStore.pb.authStore.model.name.trim();
 };
 </script>