Merge branch 'main' into 'main' (7d25fe85) · Commits · Lorenzo Trujillo Rojas / PueblosMagicosConIAFK

web/src/components/admin_panel_navbar/admin_navbar.tsx

+114 −7

Original line number	Diff line number	Diff line
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { faSignOut, faUser } from "@fortawesome/free-solid-svg-icons";
		import { faEye, faEyeSlash, faSignOut, faUser, faWindowClose } from "@fortawesome/free-solid-svg-icons";
		import { Link } from "react-router-dom";
		import './assets/styles/style.css';
		import { UserRole } from "../../constants/roles";
		import { useUserData } from "../../hooks/useUserData";
		import { Dispatch, SetStateAction, useState } from "react";
		import { useAdminChangePassword } from "../../hooks/useAdminChangePassword";
		import { usePasswoordVisibility } from "../../hooks/usePasswordVisibility";

		interface props{
		windowActive: boolean;
		isWindowActive: boolean;
		setIsWindowActive: Dispatch<SetStateAction<boolean>>;
		}

		export const AdminPanelNavBar = ({windowActive}:props) => {
		export const AdminPanelNavBar = ({isWindowActive, setIsWindowActive}:props) => {
		const {user, handleLogout, setToggle, toggle, userData} = useUserData();
		const [changePasswordWindowActive, setChangePasswordWindowActive] = useState(false);
		const setChangePasswordWindowVisibility = (visibility: boolean) => {
		setIsWindowActive(visibility);
		setChangePasswordWindowActive(visibility);
		}
		const {register, handleSubmit, errors, onSubmit} = useAdminChangePassword(setChangePasswordWindowVisibility);
		const {
		values: valuesPrevPassword,
		handleClickShowPassword: handleClickShowPrevPassword,
		handleMouseDownPassword: handleMouseDownPrevPassword
		} = usePasswoordVisibility();
		const {
		values: valuesNewPassword,
		handleClickShowPassword: handleClickShowNewPassword,
		handleMouseDownPassword: handleMouseDownNewPassword
		} = usePasswoordVisibility();
		const {
		values: valuesNewPasswordConfirm,
		handleClickShowPassword: handleClickShowNewPasswordConfirm,
		handleMouseDownPassword: handleMouseDownNewPasswordConfirm
		} = usePasswoordVisibility();


		if(!user ){
		return null;
		@@ -25,14 +51,14 @@ export const AdminPanelNavBar = ({windowActive}:props) => {
		<div className="profile">
		<img src={require("./assets/images/Admin-595b40b65ba036ed117d36fe.png")} className="user-pic"
		onClick={() => {
		windowActive
		isWindowActive
		?
		setToggle(false)
		:
		setToggle(!toggle)
		}}
		style={
		windowActive
		isWindowActive
		?
		{cursor: "auto"}
		:
		@@ -48,9 +74,9 @@ export const AdminPanelNavBar = ({windowActive}:props) => {
		</div>
		<hr/>

		<Link to="/" className="sub-menu-link">
		<Link to="/" onClick={() => {setChangePasswordWindowVisibility(true); setToggle(false);}} className="sub-menu-link">
		<FontAwesomeIcon icon={faUser} className="sub-menu-link-icon"/>
		<p>Editar cuenta</p>
		<p>Cambiar contraseña</p>
		</Link>

		<Link onClick={handleLogout} to="/" className="sub-menu-link">
		@@ -61,6 +87,87 @@ export const AdminPanelNavBar = ({windowActive}:props) => {
		</div>
		}
		</div>
		{
		changePasswordWindowActive &&
		<div className="change-password-window">
		<div className="header">
		Cambio de contraseña
		<FontAwesomeIcon icon={faWindowClose} className="close_btn"
		onClick={() => setChangePasswordWindowVisibility(false)}/>
		</div>

		<div className="content">
		<form onSubmit={handleSubmit(onSubmit)}>
		<div className="input_cnt">
		<label>Contraseña actual</label>
		<div className="password_cnt">
		<input
		type={
		valuesPrevPassword.showPassword
		? "text"
		: "password"
		}
		{...register('prevPassword')}
		autoComplete="off"
		/>
		<FontAwesomeIcon className="visibility-button"
		onClick={handleClickShowPrevPassword}
		onMouseDown={handleMouseDownPrevPassword}
		icon={valuesPrevPassword.showPassword ? faEye : faEyeSlash}
		/>
		</div>
		<p className="error">{errors.prevPassword?.message}</p>
		</div>

		<div className="input_cnt">
		<label>Nueva contraseña</label>
		<div className="password_cnt">
		<input
		type={
		valuesNewPassword.showPassword
		? "text"
		: "password"
		}
		{...register('newPassword')}
		autoComplete="off"
		/>
		<FontAwesomeIcon className="visibility-button"
		onClick={handleClickShowNewPassword}
		onMouseDown={handleMouseDownNewPassword}
		icon={valuesNewPassword.showPassword ? faEye : faEyeSlash}
		/>
		</div>
		<p className="error">{errors.newPassword?.message}</p>
		</div>

		<div className="input_cnt">
		<label>Confirmar nueva contraseña</label>
		<div className="password_cnt">
		<input
		type={
		valuesNewPasswordConfirm.showPassword
		? "text"
		: "password"
		}
		{...register('newPasswordConfirm')}
		autoComplete="off"
		/>
		<FontAwesomeIcon className="visibility-button"
		onClick={handleClickShowNewPasswordConfirm}
		onMouseDown={handleMouseDownNewPasswordConfirm}
		icon={valuesNewPasswordConfirm.showPassword ? faEye : faEyeSlash}
		/>
		</div>
		<p className="error">{errors.newPasswordConfirm?.message}</p>
		</div>

		<div className="input_cnt">
		<input className="submit_btn" type="submit" content="Registrar"/>
		</div>
		</form>
		</div>
		</div>
		}
		</div>
		);
		}
		No newline at end of file

web/src/components/admin_panel_navbar/assets/styles/style.css

+137 −47

Original line number	Diff line number	Diff line
		@@ -89,3 +89,93 @@
		padding: 8px;
		margin-right: 15px;
		}

		.change-password-window {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 30vw;
		height: 40vh;
		background: green;
		display: flex;
		flex-direction: column;
		z-index: 5;
		}

		.change-password-window .header {
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		padding: 5px;
		}

		.change-password-window .header .close_btn{
		display: inline-block;
		cursor: pointer;
		height: 5%;
		position: absolute;
		right: 5px;
		}

		.change-password-window .content {
		background: white;
		width: 100%;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		}

		.change-password-window .content form{
		display: flex;
		flex-direction: column;
		flex-grow: 1;
		}

		.change-password-window .content form .input_cnt{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 5px 0;
		}

		.change-password-window .content form .input_cnt input{
		width: 80%;
		padding: 5px 20px;
		border: 1px solid lightgray;
		border-radius: 5px;
		}

		.error{
		color: red;
		font-size: 12px;
		padding: 0;
		margin: 0;
		}

		.change-password-window .content form .input_cnt .submit_btn{
		width: 30%;
		}

		.change-password-window .content form .input_cnt .password_cnt{
		position: relative;
		width: 80%;
		}

		.change-password-window .content form .input_cnt .password_cnt input{
		width: 100%;
		padding-left: 20px;
		padding-right: 30px;
		}

		.change-password-window .content form .input_cnt .password_cnt .visibility-button{
		position: absolute;
		top: 50%;
		right: 5px;
		transform: translateY(-50%);
		cursor: pointer;
		}
		No newline at end of file

web/src/components/admin_panel_places/admin_panel_place_list/admin_panel_place_list.tsx

+3 −3

Original line number	Diff line number	Diff line
		@@ -10,12 +10,12 @@ import { Dispatch, SetStateAction, useEffect } from 'react';
		interface props{
		idTown: number;
		isWindowActive: boolean;
		setIsWindowActive: Dispatch<SetStateAction<boolean>>;
		setWindowVisibility: (visibility: boolean) => void;
		setActualPlace: Dispatch<SetStateAction<Place \| undefined>>;
		setIsRegisterPane: Dispatch<SetStateAction<boolean>>;
		}

		export const AdminPanelPlaceList = ({idTown, isWindowActive, setIsWindowActive, setActualPlace, setIsRegisterPane}: props) => {
		export const AdminPanelPlaceList = ({idTown, isWindowActive, setWindowVisibility, setActualPlace, setIsRegisterPane}: props) => {
		const {
		placeList,
		pending,
		@@ -25,7 +25,7 @@ export const AdminPanelPlaceList = ({idTown, isWindowActive, setIsWindowActive,
		const handleEditSelectedCategory = (place: Place) => {
		setIsRegisterPane(false);
		setActualPlace(place);
		setIsWindowActive(true);
		setWindowVisibility(true);
		}

		useEffect(() => {

web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx

+4 −4

Original line number	Diff line number	Diff line
		@@ -11,7 +11,7 @@ import { AvailableDays, availableDaysList, EmptyPlace, Place } from "../../../in
		import { Category } from "../../../infraestructure/entities/category";

		interface props {
		setIsWindowActive: Dispatch<SetStateAction<boolean>>;
		setWindowVisibility: (visibility: boolean) => void;
		categoriesList: Category[];
		idTown: number;
		forceRenderList: () => void;
		@@ -19,7 +19,7 @@ interface props {
		form?: Place;
		}

		export const AdminPanelPlaceRegister = ({setIsWindowActive, idTown, categoriesList, forceRenderList, isRegister, form}: props) => {
		export const AdminPanelPlaceRegister = ({setWindowVisibility, idTown, categoriesList, forceRenderList, isRegister, form}: props) => {
		const {
		register,
		handleSubmit,
		@@ -39,7 +39,7 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive, idTown, categoriesLi
		onSubmitRegister,
		onSubmitUpdate,
		clearErrors
		} = usePlace(forceRenderList, setIsWindowActive);
		} = usePlace(forceRenderList, setWindowVisibility);
		const [clickedCategories, setClickedCategories] = useState<boolean[]>(new Array(categoriesList.length).fill(false));
		const [isLoading, setIsLoading] = useState(false);
		const [actualPlace, setActualPlace] = useState<Place>(EmptyPlace);
		@@ -112,7 +112,7 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive, idTown, categoriesLi
		<div className="place_register_header">
		Registra el lugar
		<FontAwesomeIcon icon={faWindowClose} className="close_btn"
		onClick={() => setIsWindowActive(false)}/>
		onClick={() => setWindowVisibility(false)}/>
		</div>
		<div className="place_register_body">
		{isLoading

web/src/components/admin_panel_places/admin_panel_place_screen/admin_panel_place_screen.tsx

+10 −4

Original line number	Diff line number	Diff line
		@@ -16,6 +16,7 @@ export const AdminPanelPlaceScreen = ({isWindowActive,setIsWindowActive, town}:
		const [renderCount, setRenderCount] = useState(0);
		const [isRegisterPane, setIsRegisterPane] = useState(true);
		const [actualPlace, setActualPlace] = useState<Place \| undefined>();
		const [isPlaceRegisterWindowActive, setIsPlaceRegisterWindowActive] = useState(false);
		const {
		categoriesList,
		updateCategoriesList,
		@@ -26,6 +27,11 @@ export const AdminPanelPlaceScreen = ({isWindowActive,setIsWindowActive, town}:
		setIsWindowActive(false);
		}

		const setWindowVisibility = (visibility: boolean) => {
		setIsPlaceRegisterWindowActive(visibility);
		setIsWindowActive(visibility);
		}

		useEffect(()=>{
		updateCategoriesList();
		},[]);
		@@ -39,7 +45,7 @@ export const AdminPanelPlaceScreen = ({isWindowActive,setIsWindowActive, town}:
		disabled={isWindowActive \|\| !town}
		onClick={() => {
		setIsRegisterPane(true);
		setIsWindowActive(true);
		setWindowVisibility(true);
		}}
		>
		Registrar lugar
		@@ -47,8 +53,8 @@ export const AdminPanelPlaceScreen = ({isWindowActive,setIsWindowActive, town}:
		</div>
		<div className="panel_place_body">
		{
		isWindowActive && <AdminPanelPlaceRegister
		setIsWindowActive={setIsWindowActive}
		isPlaceRegisterWindowActive && <AdminPanelPlaceRegister
		setWindowVisibility={setWindowVisibility}
		idTown={town?.idTown \|\| -1}
		categoriesList={categoriesList}
		forceRenderList={forceRenderList}
		@@ -57,7 +63,7 @@ export const AdminPanelPlaceScreen = ({isWindowActive,setIsWindowActive, town}:
		/>
		}
		<AdminPanelPlaceList idTown={town?.idTown \|\| -1} key={renderCount}
		isWindowActive={isWindowActive} setIsWindowActive={setIsWindowActive}
		isWindowActive={isWindowActive} setWindowVisibility={setWindowVisibility}
		setActualPlace={setActualPlace} setIsRegisterPane={setIsRegisterPane}/>
		</div>
		</div>