delete comment

src/pages/IndexPage.vue

@@ -11,8 +11,8 @@
     />
   </div>
   <q-page class="flex flex-center">
-    <div class="column q-pa-md q-gutter-sm">
-      <div class="row flex-center q-pb-md">
+    <div class="column q-gutter-sm">
+      <div class="row flex-center q-pb-md q-mb-md">
         <q-avatar size="96px">
           <img
             :src="
@@ -27,11 +27,24 @@
         </q-avatar>
       </div>
       <q-form class="q-gutter-md" @click.once="recibeDatos()">
-        <div class="row" style="max-width: 200px">
-          <q-file class="full-width" outlined v-model="imagen" label="Avatar" />
+        <div class="row" style="max-width: 198px">
+          <q-file
+            class="full-width q-mb-md"
+            outlined
+            v-model="imagen"
+            label="Avatar"
+          />
         </div>
         <div class="row">
-          <q-input outlined v-model="name" label="Name" />
+          <q-input
+            outlined
+            v-model="name"
+            label="Name"
+            :rules="[
+              (val) =>
+                (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
+            ]"
+          />
         </div>
         <div class="row">
           <q-input
@@ -55,44 +68,43 @@
           />
         </div>
       </q-form>
-      <div class="row q-pt-md">
-        <div class="col text-center">
-          <q-btn round color="primary" icon="cancel" @click="cargarDatos()" />
-        </div>
-        <div class="col text-center">
+      <div class="row q-mt-md q-mx-auto">
+        <div class="col">
+          <q-btn flat color="primary" label="Cancelar" @click="cargarDatos()" />
           <q-btn
-            round
+            flat
+            :disable="btnSaveDisable()"
             color="secondary"
-            icon="save"
+            label="Guardar"
             @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>
+      <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>
   </q-page>
 </template>
@@ -125,6 +137,7 @@ const updateUser = async () => {
     .then((r) => {
       cargarDatos();
     });
+  recibeDatos();
 };
 const cargarDatos = () => {
   imagen.value = null;
@@ -152,4 +165,18 @@ const comprobarUsername = computed(() => {
   }
   return false;
 });
+
+const btnSaveDisable = () => {
+  if (
+    username.value == null ||
+    username.value.length < 3 ||
+    !comprobarUsername.value ||
+    !/^[A-Z0-9]+$/i.test(username.value) ||
+    name.value == null ||
+    name.value.length < 3
+  ) {
+    return true;
+  }
+  return false;
+};
 </script>

src/stores/lista.js

@@ -46,30 +46,3 @@ export const useListaStore = defineStore("lista", () => {
     register,
   };
 });
-
-/*
---- Pinia
-
-export const useListaStore = defineStore("lista", () => {
-  const counter = ref(3);
-  function increment() {
-    counter.value++;
-  }
-  function doubleCount() {
-    return counter.value * 2;
-  }
-  return { counter, increment, doubleCount };
-});
-
-
---- vue
-
-listaStore.counter = 9;
-console.log(listaStore.counter);
-console.log(listaStore.doubleCount());
-console.log(listaStore.counter);
-listaStore.increment();
-console.log(listaStore.counter);
-
-
-*/