From c5dfdb480d0a980e559f75e0a0b505b14b0f4a26 Mon Sep 17 00:00:00 2001
From: Mariela <mbonilla.guti@gmail.com>
Date: Mon, 1 Aug 2022 00:31:52 -0600
Subject: [PATCH] listar areas comunes en parte web

---
 .../web-react/src/components/AreasComunes.js  | 250 +++++++++++++++++-
 1 file changed, 248 insertions(+), 2 deletions(-)

diff --git a/web-ui/web-react/src/components/AreasComunes.js b/web-ui/web-react/src/components/AreasComunes.js
index 421c7cc1..51a3746c 100644
--- a/web-ui/web-react/src/components/AreasComunes.js
+++ b/web-ui/web-react/src/components/AreasComunes.js
@@ -36,9 +36,10 @@ const AreasComunes = () => {
         status: '1'
     };
 
-    const [commonAreasList, setCommonAreasList] = useState([]);
+    const [commonAreaList, setCommonAreaList] = useState([]);
     const [commonArea, setCommonArea] = useState(emptyCommonArea);
     const [selectedCommonAreas, setSelectedCommonAreas] = useState(null);
+    const [globalFilter, setGlobalFilter] = useState(null);
     const [deleteCommonAreaDialog, setDeleteCommonAreaDialog] = useState(false);
     const [deleteCommonAreasDialog, setDeleteCommonAreasDialog] = useState(false);
     const [submitted, setSubmitted] = useState(false);
@@ -48,9 +49,254 @@ const AreasComunes = () => {
     const [cookies, setCookie] = useCookies();
 
     async function getCommonAreas() {
-        
+        await fetch(`http://localhost:4000/commonArea/findByCommunity/${cookies.community_id}`, { method: 'GET' })
+            .then((response) => response.json())
+            .then(data => data.message)
+            .then(data => {
+                setCommonAreaList(data)
+            });
     }
 
+    useEffect(() => {
+        getCommonAreas();
+    }, []);
+
+
+    const deleteCommonArea = () => {
+        /*   fetch('http://localhost:4000/community/deleteCommunity/' + community._id, {
+               cache: 'no-cache',
+               method: 'DELETE',
+               headers: {
+                   'Content-Type': 'application/json'
+               }
+           })
+               .then(
+                   function (response) {
+                       if (response.status != 201)
+                           console.log('Ocurrió un error con el servicio: ' + response.status);
+                       else
+                           return response.json();
+                   }
+               )
+               .then(
+                   function (response) {
+                       
+                       let _community = communities.filter(val => val._id !== community._id);
+                       setCommunities(_community);
+                       setDeleteCommunityDialog(false);
+                       setCommunity(emptyCommunity);
+                       toast.current.show({ severity: 'success', summary: 'Exito', detail: 'Comunidad de Viviendas Eliminada', life: 3000 });
+                   }
+               )
+               .catch(
+                   err => {
+                       console.log('Ocurrió un error con el fetch', err)
+                       toast.current.show({ severity: 'danger', summary: 'Error', detail: 'Comunidad de Viviendas no se pudo eliminar', life: 3000 });
+                   }
+               ); 
+        */
+        let _common_areas = commonAreaList.filter(
+            (val) => val._id !== commonArea._id,
+        );
+        setCommonAreaList(_common_areas);
+        setDeleteCommonAreaDialog(false);
+        setCommonArea(emptyCommonArea);
+        toast.current.show({
+            severity: 'success',
+            summary: 'Área Común Eliminada',
+            life: 3000,
+        });
+    };
+
+    const deleteSelectedCommonAreas = () => {
+        let _commonareas = commonAreaList.filter(
+            (val) => !selectedCommonAreas.includes(val),
+        );
+        /*  selectedCommunities.map((item) => {
+                 fetch('http://localhost:4000/user/deleteCommunity/' + item._id, {
+                     cache: 'no-cache',
+                     method: 'DELETE',
+                     headers: {
+                         'Content-Type': 'application/json'
+                     }
+                 })
+             })*/
+        setCommonAreaList(_commonareas);
+        setDeleteCommonAreasDialog(false);
+        setSelectedCommonAreas(null);
+        toast.current.show({
+            severity: 'success',
+            summary: 'Éxito',
+            detail: 'Áreas Comúnes Eliminadas',
+            life: 3000,
+        });
+    };
+
+    const hideDeleteCommonAreaDialog = () => {
+        setDeleteCommonAreaDialog(false);
+    }
+
+    const hideDeleteCommonAreasDialog = () => {
+        setDeleteCommonAreasDialog(false);
+    }
+
+    const confirmDeleteCommonArea = (commonArea) => {
+        setCommonArea(commonArea);
+        setDeleteCommonAreaDialog(true);
+    }
+
+    const confirmDeleteSelected = () => {
+        setDeleteCommonAreasDialog(true);
+    };
+
+
+
+    const actionsCommonArea = (rowData) => {
+        return (
+            <div className="actions">
+                <Button
+                    icon="pi pi-trash"
+                    className="p-button-rounded p-button-danger mt-2"
+                    onClick={() => confirmDeleteCommonArea(rowData)}
+                />
+            </div>
+        );
+    };
+
+
+    const deleteCommonAreaDialogFooter = (
+        <>
+            <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteCommonAreaDialog} />
+            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteCommonArea} />
+        </>
+    );
+
+    const deleteCommonAreasDialogFooter = (
+        <>
+            <Button label="No" icon="pi pi-times" className="p-button-text" onClick={hideDeleteCommonAreasDialog} />
+            <Button label="Yes" icon="pi pi-check" className="p-button-text" onClick={deleteSelectedCommonAreas} />
+        </>
+    );
+
+
+    const leftToolbarTemplate = () => {
+        return (
+            <React.Fragment>
+                <div className="my-2">
+                    <Button label="Eliminar" icon="pi pi-trash" className="p-button-danger" onClick={confirmDeleteSelected} disabled={!selectedCommonAreas || !selectedCommonAreas.length} />
+                </div>
+            </React.Fragment>
+        )
+    }
+
+    const rightToolbarTemplate = () => {
+        return (
+            <React.Fragment>
+                <Button label="Exportar" icon="pi pi-upload" className="p-button-help" />
+            </React.Fragment>
+        )
+    }
+
+
+    const header = (
+        <React.Fragment>
+
+            <div className="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+                <h5 className="m-0">Áreas Comunes</h5>
+                <span className="block mt-2 md:mt-0 p-input-icon-left">
+                    <i className="pi pi-search" />
+                    <InputText type="search" onInput={(e) => setGlobalFilter(e.target.value)} placeholder="Buscar..." />
+                </span>
+            </div>
+        </React.Fragment>
+    );
+
+    const headerName = (
+        <>
+            <p>{' '}
+                <FontAwesomeIcon icon={faUserAlt} style={{ color: "#C08135" }} /> {' '}
+                Nombre
+            </p>
+        </>
+    )
+
+    const headerHourMin = (
+        <>
+            <p>
+                {' '}
+                <FontAwesomeIcon icon={faUserAlt} style={{ color: "#D7A86E" }} />{' '}
+                Hora de apertura
+            </p>
+        </>
+    )
+
+    const headerHourMax = (
+        <>
+            <p> {' '}
+                <FontAwesomeIcon icon={faIdCardAlt} style={{ color: "#C08135" }} />{' '}
+                Hora de cierre
+            </p>
+        </>
+    )
+
+    const headerBookable = (
+        <>
+            <p> {' '}
+                <FontAwesomeIcon icon={faAt} style={{ color: "#D7A86E" }} />{' '}
+                Reservable
+            </p>
+        </>
+    )
+
+    const headerCommuntiy = (
+        <>
+            <p>
+                {' '}
+                <FontAwesomeIcon icon={faHomeAlt} style={{ color: "#C08135" }} />{' '}
+                Comunidad</p>
+        </>
+    )
+
+
+    return (
+
+
+        <div className="grid">
+            <div className="col-12">
+                <Toast ref={toast} />
+                <div className="card">
+                    <Toolbar className="mb-4" left={leftToolbarTemplate} right={rightToolbarTemplate}></Toolbar>
+                    <DataTable ref={dt} value={commonAreaList} dataKey="_id" paginator rows={5} selection={selectedCommonAreas} onSelectionChange={(e) => setSelectedCommonAreas(e.value)}
+                        scrollable scrollHeight="400px" scrollDirection="both" header={header}
+                        rowsPerPageOptions={[5, 10, 25]} className="datatable-responsive mt-3"
+                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
+                        currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} administradores de comunidades de viviendas"
+                        globalFilter={globalFilter} emptyMessage="No hay administradores de comunidades registrados.">
+                        <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
+                        <Column field="name" sortable header={headerName} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
+                        <Column field="hour_min"  header={headerHourMin} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }} alignFrozen="left"></Column>
+                        <Column field="hour_max"  header={headerHourMax} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>                    </Column>
+                        <Column field="bookable" sortable header={headerBookable} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
+                        <Column field="community_name" sortable header={headerCommuntiy} style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}></Column>
+                        <Column style={{ flexGrow: 1, flexBasis: '130px', minWidth: '130px' }} body={actionsCommonArea}></Column>
+                    </DataTable>
+                    <Dialog visible={deleteCommonAreaDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteCommonAreaDialogFooter} onHide={hideDeleteCommonAreaDialog}>
+                        <div className="flex align-items-center justify-content-center">
+                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                            {commonArea && <span>¿Estás seguro que desea eliminar a <b>{commonArea.name}</b>?</span>}
+                        </div>
+                    </Dialog>
+                    <Dialog visible={deleteCommonAreasDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteCommonAreasDialogFooter} onHide={hideDeleteCommonAreasDialog}>
+                        <div className="flex align-items-center justify-content-center">
+                            <i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />
+                            {selectedCommonAreas && <span>¿Está seguro eliminar las áreas comunes seleccionadas?</span>}
+                        </div>
+                    </Dialog>
+                </div>
+            </div>
+        </div>
+    );
+
 };