Se agrega el componente para visualizar el pdf generado (28512b93) · Commits · Lorenzo Trujillo Rojas / PueblosMagicosConIAFK

web/src/components/admin_panel_poi/admin_panel_poi_list/admin_panel_poi_list.tsx

+67 −29

Original line number	Diff line number	Diff line
		@@ -7,16 +7,52 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
		import { Dispatch, SetStateAction, useEffect, useState } from 'react';
		import { usePointOfInterest } from '../../../hooks/usePointOfInterest';
		import { PointOfInterest } from '../../../infraestructure/entities/poi';
		import { LoadingScreen } from '../../loading_screen/loading_screen';

		interface props{
		idTown: number;
		isWindowActive: boolean;
		setActualPoint: Dispatch<SetStateAction<PointOfInterest \| undefined>>;
		setWindowVisibilityViewer: (visibility: boolean) => void;
		setBinaryData: Dispatch<SetStateAction<string>>;
		setIsPDFViewerActive: Dispatch<SetStateAction<boolean>>;
		}

		export const AdminPanelPoiList = ({idTown, isWindowActive, setActualPoint, setWindowVisibilityViewer}: props) => {
		export const AdminPanelPoiList = ({idTown, isWindowActive, setActualPoint, setWindowVisibilityViewer, setBinaryData,
		setIsPDFViewerActive
		}: props) => {
		const [isLoading, setIsLoading] = useState(false);
		const [isPDFLoading, setIsPDFLoading] = useState(false);
		const [printButtonActive, setPrintButtonActive] = useState(false);
		const [selectedRows, setSelectedRows] = useState<number[]>([]);
		const [actualPlaceId, setActualPlaceId] = useState(0);
		const {getPdfById} = usePointOfInterest();

		const handleRowSelected = (selected: { allSelected: boolean; selectedCount: number; selectedRows: PointOfInterest[];}) => {
		setSelectedRows(selected.selectedRows.map((element)=>{return element.idPoint \|\| -1}));
		}

		useEffect(()=>{
		if(selectedRows.length>0){
		setPrintButtonActive(true);
		}else{
		setPrintButtonActive(false);
		}
		},[selectedRows]);

		const handleClickPrintButton = () => {
		const fetchPdf = async () => {
		setIsPDFLoading(true);
		const res = await getPdfById(actualPlaceId, selectedRows);
		if(res!==null){
		setIsPDFViewerActive(true);
		setBinaryData(res);
		}
		setIsPDFLoading(false);
		}
		fetchPdf();
		}

		const {
		placeList,
		updatePlacesByTown
		@@ -41,12 +77,7 @@ export const AdminPanelPoiList = ({idTown, isWindowActive, setActualPoint, setWi
		},
		{
		name: "Nombre",
		selector: row => row.name,
		sortable: true
		},
		{
		name: "Descripción",
		selector: row => row.contentES,
		selector: row => row.name.substring(0,40),
		sortable: true
		},
		{
		@@ -88,10 +119,12 @@ export const AdminPanelPoiList = ({idTown, isWindowActive, setActualPoint, setWi
		onChange={(event) => {
		const index = Number(event.target.value);
		const place = placeList[index];
		setActualPlaceId(place.idPlace \|\| 0);
		refreshList(place.idPlace \|\| 0);
		}}
		>
		{placeList === null \|\| placeList.length===0 ?
		{
		placeList === null \|\| placeList.length===0 ?
		<option disabled defaultValue="" value="">No hay lugares</option>
		:
		<>
		@@ -104,6 +137,7 @@ export const AdminPanelPoiList = ({idTown, isWindowActive, setActualPoint, setWi
		</>
		}
		</select>
		<button disabled={!printButtonActive} onClick={handleClickPrintButton} className='print_btn'>Imprimir</button>
		</div>
		<div className="poi_list_body">
		<DataTable noDataComponent="No hay puntos de interés que mostrar" progressPending={pending}
		@@ -111,9 +145,13 @@ export const AdminPanelPoiList = ({idTown, isWindowActive, setActualPoint, setWi
		progressComponent={
		<LoadingSpinner style={{display: 'flex'}}/>
		}
		columns={columns} data={poiList} selectableRows
		onSelectedRowsChange={handleRowSelected}
		columns={columns} data={poiList} selectableRows className="data_table"
		/>
		</div>
		{
		isPDFLoading && <LoadingScreen/>
		}
		</div>
		);
		}
		No newline at end of file

web/src/components/admin_panel_poi/admin_panel_poi_list/assets/css/styles.css

+5 −0

Original line number	Diff line number	Diff line
		@@ -13,6 +13,11 @@
		align-items: center;
		}

		.print_btn{
		position: absolute;
		right: 20px;
		}

		.poi_list_body{
		display: flex;
		width: 100%;

web/src/components/admin_panel_poi/admin_panel_poi_screen/admin_panel_poi_screen.tsx

+20 −1

Original line number	Diff line number	Diff line
		@@ -5,6 +5,8 @@ import { AdminPanelPoiList } from "../admin_panel_poi_list/admin_panel_poi_list"
		import { Town } from "../../../infraestructure/entities/town";
		import { PointOfInterest } from "../../../infraestructure/entities/poi";
		import { AdminPanelPoiViewer } from "../admin_panel_poi_viewer/admin_panel_poi_viewer";
		import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
		import { faWindowClose } from "@fortawesome/free-solid-svg-icons";

		interface props {
		isWindowActive: boolean;
		@@ -18,6 +20,8 @@ export const AdminPanelPoiScreen = ({isWindowActive,setIsWindowActive, town}: pr
		const [actualPoint, setActualPoint] = useState<PointOfInterest \| undefined>();
		const [isRegisterWindowActive, setIsRegisterWindowActive] = useState(false);
		const [isViewerWindowActive, setIsViewerWindowActive] = useState(false);
		const [isPDFViewerActive, setIsPDFViewerActive] = useState(false);
		const [binaryData, setBinaryData] = useState('');

		const forceRenderList = () =>{
		setRenderCount(prevCount => prevCount + 1);
		@@ -63,7 +67,22 @@ export const AdminPanelPoiScreen = ({isWindowActive,setIsWindowActive, town}: pr
		}
		<AdminPanelPoiList idTown={town?.idTown \|\| -1} key={renderCount}
		setActualPoint={setActualPoint} setWindowVisibilityViewer={setWindowVisibilityViewer}
		isWindowActive={isWindowActive}/>
		isWindowActive={isWindowActive} setBinaryData={setBinaryData} setIsPDFViewerActive={setIsPDFViewerActive}/>
		{
		isPDFViewerActive &&
		<div className="pdf_viewer">
		<div className="pdf_viewer_header">
		<FontAwesomeIcon icon={faWindowClose} className="close_btn"
		onClick={() => {
		setIsPDFViewerActive(false);
		setBinaryData('');
		}}/>
		</div>
		<div className="pdf_viewer_body">
		<iframe src={"data:application/pdf;base64,"+binaryData} height="100%" width="100%"/>
		</div>
		</div>
		}
		</div>
		</div>
		);

web/src/components/admin_panel_poi/admin_panel_poi_screen/assets/css/styles.css

+39 −0

Original line number	Diff line number	Diff line
		@@ -27,3 +27,42 @@
		width: 100%;
		background: white;
		}

		.pdf_viewer{
		position: absolute;
		z-index: 100;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 75vw;
		height: 90vh;
		display: flex;
		flex-direction: column;
		background: white;
		border: solid 2px black;
		}

		.pdf_viewer_header{
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
		padding: 5px;
		background: #ccc;
		height: 7%;
		}

		.close_btn{
		display: inline-block;
		cursor: pointer;
		height: 3%;
		position: absolute;
		right: 5px;
		}

		.pdf_viewer_body{
		height: 93%;
		width: 100%;
		}
		No newline at end of file