Se agregan los campos para el horario y los días disponible del lugar (223f6201) · Commits · Diego Correa / PueblosMagicos

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

+88 −33

Original line number	Diff line number	Diff line
		@@ -8,6 +8,7 @@ import { languaguesList } from "../../../constants/languages";
		import { ToastContainer, toast } from "react-toastify";
		import { LoadingScreen } from "../../loading_screen/loading_screen";
		import { MultipleImagesDropzone } from "../../multiple_images_dropzone/multiple_images_dropzone";
		import { AvailableDays, availableDaysList } from "../../../infraestructure/entities/place";

		interface props {
		setIsWindowActive: Dispatch<SetStateAction<boolean>>;
		@@ -20,11 +21,7 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
		errors,
		onSubmit,
		setValue,
		languageNameIndexSelected,
		setLanguageNameIndexSelected,
		languageDescriptionIndexSelected,
		setNames,
		names,
		descriptions,
		setDescriptions,
		setLanguageDescriptionIndexSelected,
		@@ -32,6 +29,10 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
		statesList,
		updateTownsList,
		townsList,
		updateTimeForm,
		availableDays,
		setAvailableDays,
		resetField,
		} = usePlaceRegister();

		return (
		@@ -52,38 +53,19 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
		<div className="input">
		<div className="input_header">
		Nombre del lugar
		<select onChange={(e) => setLanguageNameIndexSelected(Number(e.target.value))}>
		{languaguesList.map((language, index) => {
		return (
		<option key={index} value={index}>{language}</option>
		);
		})}
		</select>
		</div>
		{
		languaguesList.map((language, index) => {
		if(index===languageNameIndexSelected){
		return (
		<input type="text"
		value={names[index]}
		onChange={(e) => {
		const updatedNamesList = [...names];
		updatedNamesList[index] = e.target.value;
		setNames(updatedNamesList);
		setValue("names", updatedNamesList, {shouldValidate: true});
		}}
		<input
		type="text"
		{...register('name')}
		autoComplete="off"
		/>
		);
		}
		})
		}
		<p className="error">{errors.names?.message}</p>
		<p className="error">{errors.name?.message}</p>
		</div>

		<div className="input">
		<div className="input_header">
		Descripción del lugar
		<select onChange={(e) => setLanguageDescriptionIndexSelected(Number(e.target.value))}>
		<select name="language_description_select" onChange={(e) => setLanguageDescriptionIndexSelected(Number(e.target.value))}>
		{languaguesList.map((language, index) => {
		return (
		<option key={index} value={index}>{language}</option>
		@@ -98,6 +80,7 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
		<textarea id={index.toString()}
		className="place_description"
		value={descriptions[index]}
		key={language}
		onChange={(e) => {
		const updatedDescriptionsList = [...descriptions];
		updatedDescriptionsList[index] = e.target.value;
		@@ -112,6 +95,77 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
		<p className="error">{errors.descriptions?.message}</p>
		</div>

		<div className="input">
		<div className="input_header">
		Horario
		</div>
		<div className="input_body">
		<div>
		Hora de apertura
		<input
		type="time"
		autoComplete="off"
		onChange={(event) => {
		updateTimeForm(event.target.value, true);
		}}
		/>
		</div>

		<div>
		Hora de cierre
		<input
		type="time"
		autoComplete="off"
		onChange={(event) => {
		updateTimeForm(event.target.value, false);
		}}
		/>
		</div>
		</div>
		<p className="error">{errors.openAt?.message \|\| errors.closeAt?.message}</p>
		Dias disponibles
		<div style={{width: '100%', display: 'flex', justifyContent: 'center'}}>
		<div>
		<select name="days_select"
		onChange={(e) => {
		const selectedOption = availableDaysList[Number(e.target.value)];
		setAvailableDays(selectedOption.option);
		resetField('startDate');
		resetField('endDate');
		setValue('available', selectedOption.option,{shouldValidate:true});
		}}
		>
		{availableDaysList.map((option, index) => {
		return (
		<option key={index} value={index}>{option.name}</option>
		);
		})}
		</select>
		</div>

		<div>
		{
		availableDays === AvailableDays.CUSTOM
		&&
		<div style={{width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
		Inicio
		<input
		type="date"
		{...register('startDate')}
		/>
		Cierre
		<input
		type="date"
		{...register('endDate')}
		/>
		</div>

		}
		</div>
		</div>
		<p className="error">{errors.available?.message \|\| errors.startDate?.message \|\| errors.endDate?.message}</p>
		</div>

		<div className="input">
		<div className="input_header">
		Pueblo mágico al que pertenece el lugar
		@@ -120,13 +174,14 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
		<div>
		Estado
		<select
		name="state_select"
		onChange={(event) => {
		updateTownsList(Number(event.target.value),
		event.target.options[event.target.selectedIndex].text);
		}}
		>
		{statesList === null \|\| statesList.length===0 ?
		<option disabled selected value="">No hay estados</option>
		<option disabled defaultValue="" value="">No hay estados</option>
		:
		<>
		<option disabled selected value="">Selecciona el estado</option>
		@@ -144,7 +199,7 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive}: props) => {
		<select {...register("idTown")}>
		{
		townsList === null \|\| townsList.length===0 ?
		<option disabled selected value="">No hay pueblos</option>
		<option disabled defaultValue="" value="">No hay pueblos</option>
		:
		townsList.map((towns) => {
		return (