rules username perfil

src/pages/IndexPage.vue

@@ -26,23 +26,35 @@
           />
         </q-avatar>
       </div>
-      <div class="row" style="max-width: 200px">
-        <q-file class="full-width" outlined v-model="imagen" label="Avatar" />
-      </div>
-      <div class="row">
-        <q-input outlined v-model="name" label="Name" />
-      </div>
-      <div class="row">
-        <q-input outlined v-model="username" label="Username" />
-      </div>
-      <div class="row">
-        <q-input
-          outlined
-          v-model="listaStore.pb.authStore.model.email"
-          label="email"
-          disable
-        />
-      </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>
+        <div class="row">
+          <q-input outlined v-model="name" label="Name" />
+        </div>
+        <div class="row">
+          <q-input
+            outlined
+            v-model="username"
+            label="Username"
+            :rules="[
+              (val) =>
+                (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
+              (val) => comprobarUsername || 'Ya existe en la BD',
+              (val) => /^[A-Z0-9]+$/i.test(val) || 'Sólo letras o números',
+            ]"
+          />
+        </div>
+        <div class="row">
+          <q-input
+            outlined
+            v-model="listaStore.pb.authStore.model.email"
+            label="email"
+            disable
+          />
+        </div>
+      </q-form>
       <div class="row q-pt-md">
         <div class="col text-center">
           <q-btn round color="primary" icon="cancel" @click="cargarDatos()" />
@@ -85,7 +97,7 @@
   </q-page>
 </template>
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import { useListaStore } from "../stores/lista.js";
 
 const listaStore = useListaStore();
@@ -94,13 +106,15 @@ const imagen = ref(null);
 const username = ref(listaStore.pb.authStore.model.username);
 const name = ref(listaStore.pb.authStore.model.name);
 const alertSave = ref(false);
+const usuarios = ref([]);
+
 const updateUser = async () => {
   const formData = new FormData();
   if (username.value.trim().length > 0) {
-    formData.append("username", username.value);
+    formData.append("username", username.value.trim());
   }
   if (name.value.trim().length > 0) {
-    formData.append("name", name.value);
+    formData.append("name", name.value.trim());
   }
   if (imagen.value != null) {
     formData.append("avatar", imagen.value);
@@ -117,4 +131,25 @@ const cargarDatos = () => {
   username.value = listaStore.pb.authStore.model.username.trim();
   name.value = listaStore.pb.authStore.model.name.trim();
 };
+
+const recibeDatos = () => {
+  listaStore.getUsers().then(function (item) {
+    usuarios.value = item;
+  });
+};
+
+const comprobarUsername = computed(() => {
+  let filtro = usuarios.value?.filter(
+    (user) => user.username.toLowerCase() == username.value.trim().toLowerCase()
+  );
+  if (filtro.length == 0) {
+    return true;
+  } else if (
+    filtro.length == 1 &&
+    filtro[0].username == listaStore.pb.authStore.model.username
+  ) {
+    return true;
+  }
+  return false;
+});
 </script>