josee9988 / im-in-list-frontend Goto Github PK

'I'm in list' list application. Made by Angular as an SPA

Home Page: http://iminlist.grupo04.ddaw.site/

License: GNU General Public License v3.0

JavaScript 0.77% TypeScript 55.35% HTML 27.86% CSS 15.20% Shell 0.81%

im-in-list-frontend's Introduction

ImInList - Tu aplicación de listas

I'm In List es una aplicación la cual se ha desarrollado para facilitar la gestión y organización de todos los usuarios, creando una aplicación sencilla y amigable para que todo el publico pueda hacer uso de ella.

Desarrollada por alumnos de 2ºDAW para el proyecto final integrador 2019-2020 con un plazo de 3 semanas lectivas de desarrollo (31 Enero al 21 de Febrero).

API 🔩

El proyecto consume datos de una API hecha por el tercer integrante del proyecto integrador. Revisa la documentación de la API

Servidor de desarrollo 🚀

Primero deberemos clonar el repositorio e instalar todas las dependencias con npm i. A continuación para crear un entorno de desarrollo local donde probar nuestra aplicación, será necesario ejecutar el comando ng serve para así obtener un servidor de desarrollo. Una vez se estén compilados todos los módulos y configuraciones, en su navegador preferido podrá acceder a http://127.0.0.1:4200/ y la aplicación estará funcionando.

En caso de realizar alguna modificación en los archivos, la aplicación se recargará de forma automática.

Requisitos para poder ejecutar el entorno de desarrollo 📋

Deberá de tener instalado los node_modules para poder realizar el entorno de desarrollo. Para obtenerlos, se debe ejecutar npm i y automáticamente se instalarán todos los componentes necesarios.

Estructuración de los componentes ⌨️

Para generar un nuevo componente en la aplicación, se deberá ejecutar el comando ng g c components/nombre-componente para así generar un nuevo componente. Este aparecerá dentro de una carpeta Components para mantener el código de forma organizada.

Compilación 🛠️

Una vez haya finalizado el desarollo del código, se ejecutará el comando ng build el cual compilara el proyecto.

El proyecto compilado se almacenará en la carpeta dist/. Utiliza el flag --prod para una compilación de producción.

Ejecutar pruebas unitarias ⚙️

Para ejecutar las pruebas unitarias, ejecute el comando ng test para realizar las pruebas vía Karma.

Despliegue

Se ha realizado el despliegue utilizando un script sh, el cual permite desplegar en nuestro servidor staging con un usuario front el cual tiene permisos para desplegar en la carpeta /var/www/html/ImInList

El mismo script, nos da la opción de desplegarlo para producción por lo que se compila en modo de producción y se despliega en el otro servidor.

Los datos de los servidres son:

Servidor staging:

IP: 54.243.26.179

URL: iminlist.staging.grupo04.ddaw.site

Usuario: front

Servidor produción:

IP: 54.165.254.46

URL: iminlist.grupo04.ddaw.site

Usuario: front

Wiki 📖

La principal fuente de información ha sido obtenida de la documentación oficial de Angular.

Para los estilos, se han utilizando componentes que facilita Angular Material.

Ayuda ❓

Puedes ponerte en contacto con nosotros e intentaremos resolver tus dudas con la mayor brevedad posible.

Si quieres obtener más información del funcionamiento de Angular CLI puedes ejecutar el comando ng help o si lo prefieres puedes acceder a su documento oficial Angular CLI README.

Contacto ✒️

Esta aplicación ha sido desarrollado por:

Jose Gracia → [email protected]
Borja Pérez → [email protected]
Alejandro Ortega → [email protected]

Información extra

El proyecto final ha concluido con un total de 3841 líneas de código de TypeScript, 2061 de scss y 1137 de HTML en un plazo de 22 días naturales.

Apoya el proyecto 🥰 🎉

Hecho con mucho ❤️❤️ por @Josee9988 y @borj17

im-in-list-frontend's People

Contributors

Stargazers

Watchers

Forkers

littletelx360

im-in-list-frontend's Issues

24 Variables could be converted to 2 arrays

En vez de registradosEnero, registradosFebrero...
Y premiumEnero, premiumFebrero...
Un array con 12 posiciones que cada una referencie a cada mes.

backoffice.component.ts

Admin: usuarios registrados/premium

Tabla de registrados y de premium salen los mismo usuarios, no hay distinción de si un usuario es registrado o premium. Salen los mismos usuarios, y debería de salir solo los registrados en la tabla de registrados y los premium y alomejor admin en la tabla de premium.

Home button not responsive

When the width px are inferior to 300px the yellow button background starts to shrink faster than the text.

Hide the password from List when editing

If there is an user editing the list, the password part must not appear

Change button title of lists

If user is editing the list, button says "Crear lista". Must say "Actualizar lista"

Bad backwards link fixes

Cuando te registras, el botón arriba a la izquierda, te lleva siempre al panel de control de admin, si no eres admin te redirige a la página de not allowed.

Hacer que el botón redirija literalmente a tu último link y ya.

  /**
   * Redirects to the last URL used.
   */
  goBack(): void {
    this.location.back();
  }

Al hacer esto, también eliminamos el mat-tooltip o lo arreglamos para que muestre al link al que va a ir.

En editar perfil también debería de mostrarse el botón de ir atrás, ya que rompe el estilo, que en el primer botón de ver tus listas lo tengas y aquí en editar tus cosas no.

Error msg on captcha shouldn't appear if not submit

Cuando se va a crear una lista nueva, por defecto ya aparece un mensaje en rojo avisando al usuario de que debe seleccionar la casilla.

Eso debe de aparecer si le da a submit y no ha verificado que sea un humano

Profile styling

El perfil se ha quedado vacío sin la gráfica. Añadir algo y que el espaciado que tiene con respecto al navbar sea el mismo que "Sobre nosotros".

El espaciado entre navbar y el elemento debe ser el mismo que el de la ruta "Sobre nosotros"

Not allow

Instead of not-allow: not-allowed.

Edit not working

Cuando edito un usuario me lleva a la página de perfil pero realmente no sé si estoy editando el mío o el suyo, no hay una aclaración. A parte en los textos pone: edita libremente tu perfil, y realmente estoy editando el de otro.

Y lo más importante, que funcione el editar, que cuando le de a guardar los cambios pueda editar, ya que ahora mismo, me da un mensaje de éxito, pero me vuelvo al admin users y son los mismos usuarios sin los cambios que les he hecho.

EditProfileComponent forms

EditProfileComponent extender de 'Forms' class.

Al tener varias opciones en este formulario, solo cambiar contraseña o solo cambiar email o password...

Tenemos que comprobar cuál de ellas estamos efectuando y en el array de inputs añadir los FormControl que necesitemos para realizar la validación correcta.