diff --git a/web/package-lock.json b/web/package-lock.json index efcf50016a199d770751159e26fa77f4820905ac..1a12efab09ca83526645989effdfdc6325f11ef9 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -11,7 +11,6 @@ "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@hookform/resolvers": "^3.3.4", - "@react-google-maps/api": "^2.19.3", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -19,6 +18,7 @@ "@types/node": "^16.18.87", "@types/react": "^18.2.64", "@types/react-dom": "^18.2.21", + "@vis.gl/react-google-maps": "^1.1.0", "axios": "^1.6.8", "react": "^18.2.0", "react-data-table-component": "^7.6.2", @@ -2599,23 +2599,6 @@ "react": ">=16.3" } }, - "node_modules/@googlemaps/js-api-loader": { - "version": "1.16.2", - "resolved": "https://registry.npmjs.org/@googlemaps/js-api-loader/-/js-api-loader-1.16.2.tgz", - "integrity": "sha512-psGw5u0QM6humao48Hn4lrChOM2/rA43ZCm3tKK9qQsEj1/VzqkCqnvGfEOshDbBQflydfaRovbKwZMF4AyqbA==", - "dependencies": { - "fast-deep-equal": "^3.1.3" - } - }, - "node_modules/@googlemaps/markerclusterer": { - "version": "2.5.3", - "resolved": "https://registry.npmjs.org/@googlemaps/markerclusterer/-/markerclusterer-2.5.3.tgz", - "integrity": "sha512-x7lX0R5yYOoiNectr10wLgCBasNcXFHiADIBdmn7jQllF2B5ENQw5XtZK+hIw4xnV0Df0xhN4LN98XqA5jaiOw==", - "dependencies": { - "fast-deep-equal": "^3.1.3", - "supercluster": "^8.0.1" - } - }, "node_modules/@hookform/resolvers": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.3.4.tgz", @@ -3590,33 +3573,6 @@ "url": "https://opencollective.com/popperjs" } }, - "node_modules/@react-google-maps/api": { - "version": "2.19.3", - "resolved": "https://registry.npmjs.org/@react-google-maps/api/-/api-2.19.3.tgz", - "integrity": "sha512-jiLqvuOt5lOowkLeq7d077AByTyJp+s6hZVlLhlq7SBacBD37aUNpXBz2OsazfeR6Aw4a+9RRhAEjEFvrR1f5A==", - "dependencies": { - "@googlemaps/js-api-loader": "1.16.2", - "@googlemaps/markerclusterer": "2.5.3", - "@react-google-maps/infobox": "2.19.2", - "@react-google-maps/marker-clusterer": "2.19.2", - "@types/google.maps": "3.55.2", - "invariant": "2.2.4" - }, - "peerDependencies": { - "react": "^16.8 || ^17 || ^18", - "react-dom": "^16.8 || ^17 || ^18" - } - }, - "node_modules/@react-google-maps/infobox": { - "version": "2.19.2", - "resolved": "https://registry.npmjs.org/@react-google-maps/infobox/-/infobox-2.19.2.tgz", - "integrity": "sha512-6wvBqeJsQ/eFSvoxg+9VoncQvNoVCdmxzxRpLvmjPD+nNC6mHM0vJH1xSqaKijkMrfLJT0nfkTGpovrF896jwg==" - }, - "node_modules/@react-google-maps/marker-clusterer": { - "version": "2.19.2", - "resolved": "https://registry.npmjs.org/@react-google-maps/marker-clusterer/-/marker-clusterer-2.19.2.tgz", - "integrity": "sha512-x9ibmsP0ZVqzyCo1Pitbw+4b6iEXRw/r1TCy3vOUR3eKrzWLnHYZMR325BkZW2r8fnuWE/V3Fp4QZOP9qYORCw==" - }, "node_modules/@remix-run/router": { "version": "1.15.3", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", @@ -4383,9 +4339,9 @@ } }, "node_modules/@types/google.maps": { - "version": "3.55.2", - "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.55.2.tgz", - "integrity": "sha512-JcTwzkxskR8DN/nnX96Pie3gGN3WHiPpuxzuQ9z3516o1bB243d8w8DHUJ8BohuzoT1o3HUFta2ns/mkZC8KRw==" + "version": "3.55.11", + "resolved": "https://registry.npmjs.org/@types/google.maps/-/google.maps-3.55.11.tgz", + "integrity": "sha512-F3VuPtjKj4UGuyym75pqmgPBOHbT/i7I6/D+4DdtSzbeu2aWZG1ENwpbZOd46uO+PSAz9flJEhxxi+b4MVb4gQ==" }, "node_modules/@types/graceful-fs": { "version": "4.1.9", @@ -4845,6 +4801,19 @@ "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==" }, + "node_modules/@vis.gl/react-google-maps": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@vis.gl/react-google-maps/-/react-google-maps-1.1.0.tgz", + "integrity": "sha512-MxDIhCfPRzTQY1c6sS0GFg8Ukl40o13fkIKEaCN0cR1BIrV4LPo+EuCov9WElbe0bOo8MApx5qAbqBKOmLQyKg==", + "dependencies": { + "@types/google.maps": "^3.54.10", + "fast-deep-equal": "^3.1.3" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@webassemblyjs/ast": { "version": "1.11.6", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.11.6.tgz", @@ -9727,14 +9696,6 @@ "node": ">= 0.4" } }, - "node_modules/invariant": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", - "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", - "dependencies": { - "loose-envify": "^1.0.0" - } - }, "node_modules/ipaddr.js": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.1.0.tgz", @@ -12452,11 +12413,6 @@ "node": ">=4.0" } }, - "node_modules/kdbush": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz", - "integrity": "sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==" - }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -16913,14 +16869,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/supercluster": { - "version": "8.0.1", - "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz", - "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==", - "dependencies": { - "kdbush": "^4.0.2" - } - }, "node_modules/supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", diff --git a/web/package.json b/web/package.json index f9d8a871aa57681ffc586c86e6f60ef605cbdf49..887ef2ba68ee5db93c477600ebef4a3df0c64698 100644 --- a/web/package.json +++ b/web/package.json @@ -6,7 +6,6 @@ "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@hookform/resolvers": "^3.3.4", - "@react-google-maps/api": "^2.19.3", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", @@ -14,6 +13,7 @@ "@types/node": "^16.18.87", "@types/react": "^18.2.64", "@types/react-dom": "^18.2.21", + "@vis.gl/react-google-maps": "^1.1.0", "axios": "^1.6.8", "react": "^18.2.0", "react-data-table-component": "^7.6.2", diff --git a/web/src/components/admin_panel_places/admin_panel_place_list/admin_panel_place_list.tsx b/web/src/components/admin_panel_places/admin_panel_place_list/admin_panel_place_list.tsx index d56168fc45c7b6d87ec2ad98389b3a79103f040c..7ded0c77cdc6943cec3ad27ef03f4aed951177bc 100644 --- a/web/src/components/admin_panel_places/admin_panel_place_list/admin_panel_place_list.tsx +++ b/web/src/components/admin_panel_places/admin_panel_place_list/admin_panel_place_list.tsx @@ -3,16 +3,34 @@ import { usePlace } from '../../../hooks/usePlace'; import './assets/css/styles.css'; import { Place } from '../../../infraestructure/entities/place'; import { LoadingSpinner } from '../../loading_spinner/loading_spinner'; +import { faEdit } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { Dispatch, SetStateAction, useEffect } from 'react'; interface props{ idTown: number; + isWindowActive: boolean; + setIsWindowActive: Dispatch>; + setActualPlace: Dispatch>; + setIsRegisterPane: Dispatch>; } -export const AdminPanelPlaceList = ({idTown}: props) => { +export const AdminPanelPlaceList = ({idTown, isWindowActive, setIsWindowActive, setActualPlace, setIsRegisterPane}: props) => { const { placeList, - pending - } = usePlace(idTown); + pending, + updatePlacesByTown + } = usePlace(); + + const handleEditSelectedCategory = (place: Place) => { + setIsRegisterPane(false); + setActualPlace(place); + setIsWindowActive(true); + } + + useEffect(() => { + updatePlacesByTown(idTown); + },[]); const columns : TableColumn[] = [ { @@ -27,6 +45,20 @@ export const AdminPanelPlaceList = ({idTown}: props) => { { name: "Estado", selector: row => row.available + }, + { + name: "Acciones", + cell: (row) => { + return ( + { + if(!isWindowActive){ + handleEditSelectedCategory(row); + } + }} + /> + ); + } } ]; @@ -36,7 +68,7 @@ export const AdminPanelPlaceList = ({idTown}: props) => { progressComponent={ } - columns={columns} data={placeList} selectableRows className="data_table"/> + columns={columns} data={placeList} className="data_table"/> ); } \ No newline at end of file diff --git a/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx index 7f5eda9a251735d4b0f9c8cc1766be7de15de11b..fff742bcca27f9a6cebebee9feacd39c7929f0ee 100644 --- a/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx +++ b/web/src/components/admin_panel_places/admin_panel_place_register/admin_panel_place_register.tsx @@ -1,13 +1,13 @@ import { faWindowClose } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { Dispatch, SetStateAction, useState} from "react"; +import { Dispatch, SetStateAction, useEffect, useState} from "react"; import "./assets/css/styles.css"; import { MapComponent } from "../../map/map"; import { usePlace } from "../../../hooks/usePlace"; 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 { AvailableDays, availableDaysList, EmptyPlace, Place } from "../../../infraestructure/entities/place"; import { Category } from "../../../infraestructure/entities/category"; interface props { @@ -15,31 +15,40 @@ interface props { categoriesList: Category[]; idTown: number; forceRenderList: () => void; + isRegister: boolean; + form?: Place; } -export const AdminPanelPlaceRegister = ({setIsWindowActive, idTown, categoriesList, forceRenderList}: props) => { +export const AdminPanelPlaceRegister = ({setIsWindowActive, idTown, categoriesList, forceRenderList, isRegister, form}: props) => { const { register, handleSubmit, errors, - onSubmit, setValue, languageDescriptionIndexSelected, descriptions, setDescriptions, setLanguageDescriptionIndexSelected, - isLoading, updateTimeForm, availableDays, setAvailableDays, resetField, categoriesId, setCategoriesId, - } = usePlace(idTown, forceRenderList, setIsWindowActive); - const [clickedCategories, setClickedCategories] = useState(new Array(categoriesList.length).fill(false)); + getPlaceById, + onSubmitRegister, + onSubmitUpdate, + clearErrors + } = usePlace(forceRenderList, setIsWindowActive); + const [clickedCategories, setClickedCategories] = useState(new Array(categoriesList.length).fill(false)); + const [isLoading, setIsLoading] = useState(false); + const [actualPlace, setActualPlace] = useState(EmptyPlace); + const [openHourInput, setOpenHourInput] = useState(''); + const [closeHourInput, setCloseHourInput] = useState(''); - const onClickCategory = (idCategory: number, indexList: number) => { + const onClickCategory = (idCategory: number) => { const index = categoriesId.indexOf(idCategory); + const indexList = categoriesList.findIndex(category => category.idCategory === idCategory); const clickedCategoriesBackup = clickedCategories.map((clickedCategory, index)=> { if(index === indexList){ return !clickedCategory; @@ -61,6 +70,43 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive, idTown, categoriesLi setClickedCategories(clickedCategoriesBackup); } + useEffect(() => { + setIsLoading(true); + const fetchData = async () => { + setValue('idTown', idTown); + if (!isRegister && form) { + const placeGetted = await getPlaceById(form.idPlace || 0); + if(placeGetted){ + setActualPlace(placeGetted); + setValue('idPlace', placeGetted.idPlace); + setValue('name', placeGetted.name); + setValue('descriptions', placeGetted.descriptions); + setDescriptions(placeGetted.descriptions || ['', '']); + setValue('openAt', placeGetted.openAt); + setOpenHourInput(placeGetted.openAt < 10 ? `0${placeGetted.openAt}:00` : `${placeGetted.openAt}:00`); + setCloseHourInput(placeGetted.closeAt < 10 ? `0${placeGetted.closeAt}:00` : `${placeGetted.closeAt}:00`); + setValue('closeAt', placeGetted.closeAt); + setValue('available', placeGetted.available); + setAvailableDays(placeGetted.available); + const clickedCategoriesBackup : boolean[] = []; + categoriesList.forEach((category) => { + if(placeGetted.categoriesId.indexOf(category.idCategory) > -1){ + clickedCategoriesBackup.push(true); + }else{ + clickedCategoriesBackup.push(false); + } + }); + setClickedCategories(clickedCategoriesBackup); + setCategoriesId(placeGetted.categoriesId); + } + } else { + setValue('available', availableDays, { shouldValidate: true }); + } + }; + fetchData(); + setIsLoading(false); + },[]); + return (
@@ -69,167 +115,175 @@ export const AdminPanelPlaceRegister = ({setIsWindowActive, idTown, categoriesLi onClick={() => setIsWindowActive(false)}/>
-
- { - isLoading + {isLoading ? : -
-
-
- Nombre del lugar -
- -

{errors.name?.message}

+ +
+
+
+ Nombre del lugar
+ +

{errors.name?.message}

+
-
-
- Descripción del lugar - -
- { - languaguesList.map((language, index) => { - if(index===languageDescriptionIndexSelected){ - return ( -