Se agregó el campo para seleccionar las categorias (8f5ee3e9) · Commits · Diego Correa / PueblosMagicos

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

+53 −2

Original line number	Diff line number	Diff line
		import { faWindowClose } from "@fortawesome/free-solid-svg-icons";
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { Dispatch, SetStateAction} from "react";
		import { Dispatch, SetStateAction, useState} from "react";
		import "./assets/css/styles.css";
		import { MapComponent } from "../../map/map";
		import { usePlace } from "../../../hooks/usePlace";
		@@ -8,14 +8,16 @@ import { languaguesList } from "../../../constants/languages";
		import { LoadingScreen } from "../../loading_screen/loading_screen";
		import { MultipleImagesDropzone } from "../../multiple_images_dropzone/multiple_images_dropzone";
		import { AvailableDays, availableDaysList } from "../../../infraestructure/entities/place";
		import { Category } from "../../../infraestructure/entities/category";

		interface props {
		setIsWindowActive: Dispatch<SetStateAction<boolean>>;
		categoriesList: Category[];
		idTown: number;
		forceRenderList: () => void;
		}

		export const AdminPanelPlaceRegister = ({setIsWindowActive, idTown, forceRenderList}: props) => {
		export const AdminPanelPlaceRegister = ({setIsWindowActive, idTown, categoriesList, forceRenderList}: props) => {
		const {
		register,
		handleSubmit,
		@@ -31,7 +33,33 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive, idTown, forceRenderL
		availableDays,
		setAvailableDays,
		resetField,
		categoriesId,
		setCategoriesId,
		} = usePlace(idTown, forceRenderList, setIsWindowActive);
		const [clickedCategories, setClickedCategories] = useState<boolean[]>(new Array(categoriesList.length).fill(false));

		const onClickCategory = (idCategory: number, indexList: number) => {
		const index = categoriesId.indexOf(idCategory);
		const clickedCategoriesBackup = clickedCategories.map((clickedCategory, index)=> {
		if(index === indexList){
		return !clickedCategory;
		}else{
		return clickedCategory;
		}
		})
		if(index > -1){
		setCategoriesId(
		categoriesId.filter(cat => cat !== idCategory)
		);
		}else{
		setCategoriesId(
		[...categoriesId,
		idCategory
		]
		)
		}
		setClickedCategories(clickedCategoriesBackup);
		}

		return (
		<div className="place_register_wrap">
		@@ -164,6 +192,29 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive, idTown, forceRenderL
		<p className="error">{errors.available?.message \|\| errors.startDate?.message \|\| errors.endDate?.message}</p>
		</div>

		<div className="input">
		<div className="input_header">
		Categorías
		</div>
		<div className="categories_cnt">
		<div className="categories_grid">
		{
		categoriesList.map((category, index) => {
		return (
		<div className="category_item"
		onClick={() => onClickCategory(category.idCategory, index)}
		style={clickedCategories[index] ? {border: '2px solid blue'} : {border: '1px solid black'}}
		>
		{category.nameES} {clickedCategories[index] ? 'SI': 'NO'}
		</div>
		);
		})
		}
		</div>
		</div>
		<p className="error">{errors.categoriesId?.message}</p>
		</div>

		<MultipleImagesDropzone setValue={setValue}/>
		<p className="error">{errors.imagesList?.message}</p>
		<input type="submit"/>

web/src/components/admin_panel_places/admin_panel_place_register/assets/css/styles.css

+24 −0

Original line number	Diff line number	Diff line
		@@ -133,3 +133,27 @@
		justify-content: center;
		align-items: center;
		}

		.categories_cnt {
		display: flex;
		border: solid 1px black;
		height: 80px;
		}

		.categories_grid {
		height: 100%;
		overflow-x: auto;
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: auto auto;
		}

		.category_item{
		display: flex;
		justify-content: center;
		align-items: center;
		width: auto;
		padding: 0 10px 0 10px;
		margin: 4px;
		cursor: pointer;
		}
		No newline at end of file