Se quito location reload de los botones, Se mejoro el auth (#23)

Squash

añadirProducto.html

@@ -44,11 +44,11 @@
       >
         <thead>
           <tr>
-            <th class="id_admin"></th>
-            <th scope="col">#</th>
-            <th scope="col">Nombre</th>
-            <th scope="col">Precio</th>
-            <th scope="col">Descripcion</th>
+            <th class="id_admin col"></th>
+            <th class="col" scope="col">#</th>
+            <th class="col" scope="col">Nombre</th>
+            <th class="col" scope="col">Precio</th>
+            <th class="col" scope="col">Descripcion</th>
           </tr>
         </thead>
         <tbody data-lista="1" class="listaProductos"></tbody>
@@ -93,11 +93,11 @@
       >
         <thead>
           <tr>
-            <th class="id_admin"></th>
-            <th scope="col">#</th>
-            <th scope="col">Nombre</th>
-            <th scope="col">Precio</th>
-            <th scope="col">Descripcion</th>
+            <th class="id_admin col"></th>
+            <th class="col" scope="col">#</th>
+            <th class="col" scope="col">Nombre</th>
+            <th class="col" scope="col">Precio</th>
+            <th class="col" scope="col">Descripcion</th>
           </tr>
         </thead>
         <tbody data-lista="2" class="listaProductos"></tbody>

index.html

@@ -665,7 +665,7 @@ <h1 class="carrouselNumero2">Carrousel #2</h1>
     </script>
 
     <!-- Main JS -->
-    <script src="./js/index.js"></script>
+    <script type="module" src="./js/index.js"></script>
     <script src="./js/modulosMain/db.js"></script>
     <script src="./js/modulosMain/swiper.js"></script>
   </body>

js/index.js

@@ -13,69 +13,51 @@ if (userName.displayName === null) {
   nombre = userName.displayName;
 }
 
-// Usuarios normales
-const dNone = document.querySelector(".insertName");
-const dropdown = document.createElement("div");
-
-// Pintar opciones de usuario en index - Usuario normal/admin
-firebase.auth().onAuthStateChanged((user) => {
-  if (user.emailVerified === true) {
-    let words = "";
-    const elimB = document.querySelector("#elimSiUsuarioExist");
-    elimB.style.display = "none";
-    words = nombre.split("@");
-    dropdown.innerHTML = `<div class="dropdown">
-        <button class="btn btn-outline-dark dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
-        <i class="bi bi-person-circle me-1"></i>
-        ${words[0]}
-        </button>
-        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-          <li><a class="dropdown-item" id="logOut">Salir</a></li>
-        </ul>
-        </div>`;
-    dNone.appendChild(dropdown);
-    const logOut = document
-      .querySelector("#logOut")
-      .addEventListener("click", () => {
-        firebase
-          .auth()
-          .signOut()
-          .then(() => {
-            console.log("Salimo");
-            location.reload();
-          })
-          .catch((error) => {});
-      });
-    // Si el usuario es el administrador
-  } else if (user.uid == "t9NLsKRAT0S2ktmEoHANNfqeYhs2") {
-    let words = "";
-    words = nombre.split("@");
+// Usuario logeado
+const generateUser = (admin = "", color ="") => {
+  // Generar usuario
+  words = nombre.split("@");
     const elimB = document.querySelector("#elimSiUsuarioExist");
     elimB.style.display = "none";
     dropdown.innerHTML = dropdown.innerHTML = `<div class="dropdown">
-        <button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+        <button class="btn btn-${color} dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
         <i class="bi bi-person-circle me-1"></i>
         ${words[0]}
         </button>
         <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
-          <li><a class="dropdown-item" href="./añadirProducto.html" style="cursor:pointer">Añadir Producto</a></li>
+          ${admin}
           <li><a class="dropdown-item" style="cursor:pointer" id="logOut">Salir</a></li>
         </ul>
         </div>`;
-    dNone.appendChild(dropdown);
-    const logOut = document
+  // Dropdown
+  dNone.appendChild(dropdown);
+  // Logout
+  const logOut = document
       .querySelector("#logOut")
       .addEventListener("click", () => {
         firebase
           .auth()
           .signOut()
           .then(() => {
-            console.log("Salimo");
-            location.reload();
+            console.log("Saliendo...");
           })
           .catch((error) => {
             console.log(error);
           });
       });
+};
+
+// Usuarios normales
+const dNone = document.querySelector(".insertName");
+const dropdown = document.createElement("div");
+
+// Pintar opciones de usuario en index - Usuario normal/admin
+let words = "";
+firebase.auth().onAuthStateChanged((user) => {
+  if (user.emailVerified) {
+    generateUser("", "outline-dark");
+    // Si el usuario es el administrador
+  } else if (user.uid == "t9NLsKRAT0S2ktmEoHANNfqeYhs2") {
+    generateUser(`<li><a class="dropdown-item" href="./añadirProducto.html" style="cursor:pointer">Añadir Producto</a></li>`, "outline-dark");
   }
-});
+});

js/modulosLogin/crearUsuarios.js

@@ -1,12 +1,12 @@
 import { userEmail, password, grabAlertEmail } from "../modulosLogin/login.js";
 
+// Crear usuario
 export let crearUsuario = (e) => {
   e.preventDefault();
   firebase
     .auth()
     .createUserWithEmailAndPassword(userEmail.value, password.value)
     .then(() => {
-      // Signed in
       firebase
         .auth()
         .currentUser.sendEmailVerification()

js/modulosLogin/login.js

@@ -16,10 +16,13 @@ export let password = document.querySelector("#pass");
 firebase
   .auth()
   .setPersistence(firebase.auth.Auth.Persistence.SESSION)
-  .then(() => {
+  .then((userCredential) => {
     return firebase
       .auth()
       .signInWithEmailAndPassword(userEmail.value, password.value);
+  })
+  .catch((error) => {
+    console.log(error);
   });
 
 //Create login
@@ -43,7 +46,7 @@ googleAcc.addEventListener("click", () => {
   firebase
     .auth()
     .signInWithPopup(provider)
-    .then(() => {
+    .then((result) => {
       location.href = "./index.html";
     })
     .catch((error) => {

js/modulosLogin/loginUsuario.js

@@ -1,5 +1,4 @@
 // Modulos
-
 import { grabAlertVerificar, grabAlertWelcome } from "../modulosLogin/login.js";
 
 export let loginUser = (e) => {

js/modulosLogin/recuperarContraseña.js

@@ -1,5 +1,4 @@
 // Modulos
-
 import { grabAlertRecu, inputRecu } from "../modulosLogin/login.js";
 
 export let recuperarContra = (e) => {

js/modulosProductosAdmin/Botones/btnBorrar.js

@@ -1,5 +1,5 @@
 // Modulos
-import { claseBoton, db, updateCreate } from "../adminPanel.js";
+import { claseBoton, db, updateCreate} from "../adminPanel.js";
 
 // Obtener boton presionado
 const buttonBorrar = document.querySelectorAll(".borrarButton");
@@ -33,7 +33,7 @@ export let btnBorrar = async (coleccion) => {
     const getTR = document.getElementById(idDocumento);
     await db.collection(coleccion).doc(idDocumento).delete(); // Eliminar documento
     getTR.parentNode.remove(); // Eliminar Row
-    updateCreate(coleccion)  // Actualizar boton crear
+    updateCreate(coleccion);
   } catch (error) {
     console.log(error);
   }

js/modulosProductosAdmin/Botones/btnCrear.js

@@ -51,5 +51,8 @@ export let btnCrear = async (coleccion) => {
             }
           });
         });
-    });
+        setTimeout(() => {
+      mostrarOnLoad(coleccion);
+    }, 1000);
+  });
 };

js/modulosProductosAdmin/Botones/btnGuardar.js

@@ -1,5 +1,5 @@
 import { saveName } from "./btnEdit.js";
-import { claseBoton, db} from "../adminPanel.js";
+import { claseBoton, db, mostrarOnLoad} from "../adminPanel.js";
 import { obtenerMetadatos } from "./btnEdit.js";
 
 // Variables globales
@@ -49,5 +49,6 @@ export let btnGuardar = async (coleccion) => {
     // Close modal after 3 seconds
     const cerrarModal = document.querySelector(".cerrarModal");
     cerrarModal.click();
+    mostrarOnLoad(coleccion);
   }, 1000);
 };

js/modulosProductosAdmin/adminPanel.js

@@ -20,14 +20,43 @@ export const modalProdPrice = document.querySelector("#modalProdPrice");
 export const modalProdDesc = document.querySelector("#modalProdDesc");
 export const grabLista = document.querySelectorAll(".listaProductos");
 
+// Limpiar Tabla
+const limpiarTabla = (coleccion) => {
+  switch (coleccion) {
+    case "carrousel":
+      grabLista[0].innerHTML = "";
+    break;
+    case "carrousel2":
+      grabLista[1].innerHTML = "";
+    break;
+  }
+};
+
+// Boton Crear
+const btnCreate = () => {
+  const arrBtn = [];
+  buttonCrear.forEach((btn) => {
+    arrBtn.push(btn);
+  });
+  return arrBtn;
+};
+
+// Boton Borrar
+const botonBorrar = () => {
+  const arrBtn = [];
+  buttonBorrar.forEach((btn) => {
+    arrBtn.push(btn);
+  });
+  return arrBtn;
+};
+
 // Cargar atributos en carga de página
 export const mostrarOnLoad = async (coleccion) => {
-  // Limpiar Tabla
+  limpiarTabla(coleccion);
   await db
     .collection(coleccion)
     .get()
     .then((querySnapshot) => {
-      updateCreate(coleccion); // Actualizar botones crear
       // Valores de los atributos
       let nombreDB = "";
       let descripcionDB = "";
@@ -77,6 +106,7 @@ export const mostrarOnLoad = async (coleccion) => {
           createCheckBock.dataset.numero = "2";
         }
       });
+      updateCreate(coleccion);
       grabRadio();
       btnEdit();
       claseBoton();
@@ -86,38 +116,31 @@ export const mostrarOnLoad = async (coleccion) => {
 mostrarOnLoad("carrousel");
 mostrarOnLoad("carrousel2");
 
+// Carrouseles
+const arrLista = [];
+grabLista.forEach((lista) => {
+  arrLista.push(lista);
+});
+
 // Actualizar Boton Crear
 export const updateCreate = async (coleccion) => {
-  // Botones crear
-  const arrBtn = [];
-  buttonCrear.forEach((btn) => {
-    arrBtn.push(btn);
-  });
-
+  const arrBoton = btnCreate();
   await db
     .collection(coleccion)
     .get()
     .then((querySnapshot) => {
       if (querySnapshot.size <= 7 && coleccion === "carrousel") {
-        arrBtn[0].classList.remove("disabled");
+        arrBoton[0].classList.remove("disabled");
       } else if (querySnapshot.size <= 7 && coleccion === "carrousel2") {
-        arrBtn[1].classList.remove("disabled");
+        arrBoton[1].classList.remove("disabled");
+      } else if (querySnapshot.size > 7 && coleccion === "carrousel") {
+        arrBoton[0].classList.add("disabled");
+      } else if (querySnapshot.size > 7 && coleccion === "carrousel2") {
+        arrBoton[1].classList.add("disabled");
       }
     });
 };
 
-// Carrouseles
-const arrLista = [];
-grabLista.forEach((lista) => {
-  arrLista.push(lista);
-});
-
-// Botones
-const arrBtn = [];
-buttonBorrar.forEach((btn) => {
-  arrBtn.push(btn);
-});
-
 // Cargar ID's
 let idDocumento = "";
 export let claseBoton = () => {
@@ -132,6 +155,7 @@ export let claseBoton = () => {
 
 // Manipular inputs
 const grabRadio = () => {
+  const arrBtn = botonBorrar();
   const grabInputs = document.querySelectorAll(".form-check-input");
   grabInputs.forEach((e) => {
     e.addEventListener("change", () => {

sass/custom.scss

@@ -11,7 +11,7 @@ $imagen-carrousel: 250px;
 }
 
 .imagenProducto, .imagenProducto2 { 
-    max-height: $imagen-carrousel; 
+    max-height: $imagen-carrousel;
     min-width: $imagen-carrousel;
     max-width: $imagen-carrousel;
 }