Commit b6f9ed29 authored by Lorenzo Trujillo Rojas's avatar Lorenzo Trujillo Rojas
Browse files

Merge branch 'main' into 'main' 

Adición de las categorías

See merge request ltrpro/pueblosmagicosconia!46
parents fad0cbba bb5fd03a

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}

                          </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

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

+15 −1
Original line number Diff line number Diff line 
import { Dispatch, SetStateAction, useState } from "react";

import { Dispatch, SetStateAction, useEffect, useState } from "react";

import { AdminPanelPlaceRegister } from "../admin_panel_place_register/admin_panel_place_register";

import "./assets/css/styles.css";

import { AdminPanelPlaceList } from "../admin_panel_place_list/admin_panel_place_list";

import { Town } from "../../../infraestructure/entities/town";

import { useCategory } from "../../../hooks/useCategory";

import { LoadingScreen } from "../../loading_screen/loading_screen";



interface props {

  isWindowActive: boolean;
@@ -12,11 +14,22 @@ interface props { 


export const AdminPanelPlaceScreen = ({isWindowActive,setIsWindowActive, town}: props) => {

  const [renderCount, setRenderCount] = useState(0);

  const {

    categoriesList,

    updateCategoriesList,

    pending

  } = useCategory();



  const forceRenderList = () =>{

    setRenderCount(prevCount => prevCount + 1);

  }



  useEffect(()=>{

    updateCategoriesList();

  },[]);



  if(pending) return <LoadingScreen/>



  return (

    <div className="admin_panel_place_content">

      <div className="panel_place_header">
@@ -33,6 +46,7 @@ export const AdminPanelPlaceScreen = ({isWindowActive,setIsWindowActive, town}: 
          isWindowActive && <AdminPanelPlaceRegister 

            setIsWindowActive={setIsWindowActive} 

            idTown={town?.idTown || -1}

            categoriesList={categoriesList}

            forceRenderList={forceRenderList}

            />

        }

web/src/components/admin_town_info/assets/css/styles.css

+5 −0
Original line number Diff line number Diff line
@@ -31,6 +31,11 @@ 
  width: 50%;

}



.town_image_cnt img{

  max-height: 100%;

  max-width: 100%;

}



.info_fields_cnt{

  width: 50%;

  height: 100%;

web/src/components/confirmation_dialog_box/assets/css/styles.css

0 → 100644
+35 −0
Original line number Diff line number Diff line 
.confirmation_dialog_wrap{

  position: absolute;

  z-index: 99;

  left: 0;

  right: 0;

  margin: auto;

  width: 25vw;

  display: flex;

  flex-direction: column;

  background: white;

  border: solid 2px black;

}



.confirmation_dialog_wrap .header{

  background: #ccc;

}



.confirmation_dialog_wrap .body{

  display: flex;

  flex-direction: column;

  width: 100%;

  align-items: center;

  justify-content: center;

}



.confirmation_dialog_wrap .buttons{

  display: flex;

  justify-content: center;

  align-items: center;

}



.confirmation_dialog_wrap .buttons button{

  margin: 5px;

  width: 60px;

}