From d6ea59679feb03dac9bd957768ed801f4edbbe0e Mon Sep 17 00:00:00 2001 From: Eduardo Quiros Date: Wed, 3 Aug 2022 21:55:04 -0600 Subject: [PATCH] format --- web-ui/web-react/src/components/Inquilinos.js | 592 +++++++++++------- 1 file changed, 376 insertions(+), 216 deletions(-) diff --git a/web-ui/web-react/src/components/Inquilinos.js b/web-ui/web-react/src/components/Inquilinos.js index 0715f27b..d994c0be 100644 --- a/web-ui/web-react/src/components/Inquilinos.js +++ b/web-ui/web-react/src/components/Inquilinos.js @@ -1,24 +1,22 @@ -import { Button } from 'primereact/button'; +import { Button } from 'primereact/button' import { InputText } from 'primereact/inputtext' -import React, { useEffect, useState, useRef } from 'react' -import { DataTable } from 'primereact/datatable'; -import { Column } from 'primereact/column'; -import { Dropdown } from 'primereact/dropdown'; -import { Toast } from 'primereact/toast'; -import { Dialog } from 'primereact/dialog'; -import { Toolbar } from 'primereact/toolbar'; +import React, { useEffect, useRef, useState } from 'react' +import { DataTable } from 'primereact/datatable' +import { Column } from 'primereact/column' +import { Dropdown } from 'primereact/dropdown' +import { Toast } from 'primereact/toast' +import { Dialog } from 'primereact/dialog' +import { Toolbar } from 'primereact/toolbar' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faUserAlt } from '@fortawesome/free-solid-svg-icons'; -import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons'; -import { faAt } from '@fortawesome/free-solid-svg-icons'; -import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons'; -import { faHashtag } from '@fortawesome/free-solid-svg-icons'; -import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons'; -import { useCookies } from "react-cookie"; - +import { faUserAlt } from '@fortawesome/free-solid-svg-icons' +import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons' +import { faAt } from '@fortawesome/free-solid-svg-icons' +import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons' +import { faHashtag } from '@fortawesome/free-solid-svg-icons' +import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons' +import { useCookies } from 'react-cookie' const Inquilinos = () => { - let emptyTenant = { _id: null, dni: '', @@ -34,66 +32,65 @@ const Inquilinos = () => { date_entry: new Date(), status: '1', status_text: '', - }; + } - const [tenants, setTenants] = useState([]); - const [tenant, setTenant] = useState(emptyTenant); - const [selectedTentants, setSelectedTenants] = useState(null); - const [globalFilter, setGlobalFilter] = useState(null); - const [deleteTenantDialog, setDeleteTenantDialog] = useState(false); - const [deleteTenantsDialog, setDeleteTenantsDialog,] = useState(false); - const [communitiesList, setCommunitiesList] = useState([]); - const [communityId, setCommunityId] = useState(null); - const [submitted, setSubmitted] = useState(false); - const toast = useRef(null); - const dt = useRef(null); - - const [cookies, setCookie] = useCookies(); - const [changeStatusTenantDialog, setChangeStatusTenantDialog] = useState(false); + const [tenants, setTenants] = useState([]) + const [tenant, setTenant] = useState(emptyTenant) + const [selectedTentants, setSelectedTenants] = useState(null) + const [globalFilter, setGlobalFilter] = useState(null) + const [deleteTenantDialog, setDeleteTenantDialog] = useState(false) + const [deleteTenantsDialog, setDeleteTenantsDialog] = useState(false) + const [communitiesList, setCommunitiesList] = useState([]) + const [communityId, setCommunityId] = useState(null) + const [submitted, setSubmitted] = useState(false) + const toast = useRef(null) + const dt = useRef(null) + const [cookies, setCookie] = useCookies() + const [changeStatusTenantDialog, setChangeStatusTenantDialog] = + useState(false) async function tenantsList() { - await fetch(`http://localhost:4000/user/findTenants/${cookies.community_id}`, { method: 'GET' }) + await fetch( + `http://localhost:4000/user/findTenants/${cookies.community_id}`, + { method: 'GET' }, + ) .then((response) => response.json()) - .then(data => data.message) - .then(data => { - data = data.filter( - (val) => val.status != -1, - ) + .then((data) => data.message) + .then((data) => { + data = data.filter((val) => val.status != -1) data.map((item) => { if (item.status == '1') { - item.status_text = 'Activo'; + item.status_text = 'Activo' } else if (item.status == '0') { - item.status_text = 'Inactivo'; + item.status_text = 'Inactivo' } - - if (item.number_house == "") { - item.number_house = "Sin vivienda asignada"; + if (item.number_house == '') { + item.number_house = 'Sin vivienda asignada' } }) setTenants(data) - }); + }) } - async function getCommunites() { - let response = await fetch('http://localhost:4000/community/allCommunities', { method: 'GET' }); - let resList = await response.json(); - let list = await resList.message; - list = await list.filter( - (val) => val.status != -1, + let response = await fetch( + 'http://localhost:4000/community/allCommunities', + { method: 'GET' }, ) - setCommunitiesList(await list); + let resList = await response.json() + let list = await resList.message + list = await list.filter((val) => val.status != -1) + setCommunitiesList(await list) } useEffect(() => { - tenantsList(); + tenantsList() }, []) - useEffect(() => { - getCommunites(); + getCommunites() }, []) const cList = communitiesList.map((item) => ({ @@ -104,20 +101,20 @@ const Inquilinos = () => { function registrarInquilino() { let data = { _id: null, - dni: "", - name: "", - last_name: "", - email: document.getElementById("correo_electronico").value, - phone: "", - password: "", - community_id: document.getElementById("numero_vivienda").value, - community_name: "", - number_house: "Sin número de vivienda", + dni: '', + name: '', + last_name: '', + email: document.getElementById('correo_electronico').value, + phone: '', + password: '', + community_id: document.getElementById('numero_vivienda').value, + community_name: '', + number_house: 'Sin número de vivienda', date_entry: new Date(), - user_type: "3", - status: "1", - status_text: "", - }; + user_type: '3', + status: '1', + status_text: '', + } fetch('http://localhost:3000/api/createUser', { method: 'POST', @@ -128,140 +125,141 @@ const Inquilinos = () => { }, }).then((response) => { if (response.ok) { - alert('Inquilino registrado correctamente'); + alert('Inquilino registrado correctamente') } else { - alert('Error al registrar inquilino'); + alert('Error al registrar inquilino') } - }); + }) } const deleteTenant = () => { - let _tenants = tenants.filter( - (val) => val._id !== tenant._id, - ); - setTenants(_tenants); - setDeleteTenantDialog(false); - setTenant(emptyTenant); + let _tenants = tenants.filter((val) => val._id !== tenant._id) + setTenants(_tenants) + setDeleteTenantDialog(false) + setTenant(emptyTenant) toast.current.show({ severity: 'success', summary: 'Inquilino Eliminado', life: 3000, - }); - }; + }) + } const deleteSelectedTenants = () => { - let _tenants = tenants.filter( - (val) => !selectedTentants.includes(val), - ); - setTenants(_tenants); - setDeleteTenantsDialog(false); - setSelectedTenants(null); + let _tenants = tenants.filter((val) => !selectedTentants.includes(val)) + setTenants(_tenants) + setDeleteTenantsDialog(false) + setSelectedTenants(null) toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Inquilinos Eliminados', life: 3000, - }); - }; + }) + } const cambiarStatusUser = () => { if (tenant.status == '1') { - tenant.status = '0'; - tenant.status_text = 'Inactivo'; - + tenant.status = '0' + tenant.status_text = 'Inactivo' } else if (tenant.status == '0') { - tenant.status = '1'; - tenant.status_text = 'Activo'; + tenant.status = '1' + tenant.status_text = 'Activo' } var data = { id: tenant._id, status: tenant.status, - }; + } fetch('http://localhost:4000/user/changeStatus', { cache: 'no-cache', method: 'POST', body: JSON.stringify(data), headers: { - 'Content-Type': 'application/json' - } + 'Content-Type': 'application/json', + }, }) .then((response) => { - if(response.status != 201) - console.log('Ocurrió un error con el servicio: ' + response.status); - else - return response.json(); + if (response.status != 201) { + console.log('Ocurrió un error con el servicio: ' + response.status) + } else { + return response.json() + } }) .then((response) => { - setChangeStatusTenantDialog(false); + setChangeStatusTenantDialog(false) toast.current.show({ severity: 'success', summary: 'Éxito', detail: 'Inquilino Actualizado', life: 3000, - }); + }) }) - .catch( - err => console.log('Ocurrió un error con el fetch', err) - ); + .catch((err) => console.log('Ocurrió un error con el fetch', err)) } const hideDeleteTenantDialog = () => { - setDeleteTenantDialog(false); + setDeleteTenantDialog(false) } const hideDeleteTenantsDialog = () => { - setDeleteTenantsDialog(false); + setDeleteTenantsDialog(false) } const confirmDeleteTenant = (tenant) => { - setTenant(tenant); - setDeleteTenantDialog(true); + setTenant(tenant) + setDeleteTenantDialog(true) } const confirmDeleteSelected = () => { - setDeleteTenantsDialog(true); - }; + setDeleteTenantsDialog(true) + } const hideChangeStatusTenantDialog = () => { - setChangeStatusTenantDialog(false); - }; + setChangeStatusTenantDialog(false) + } const confirmChangeStatusTenant = (tenant) => { - setTenant(tenant); - setChangeStatusTenantDialog(true); - }; + setTenant(tenant) + setChangeStatusTenantDialog(true) + } const actionsTenant = (rowData) => { - let icono = ''; - let text = ''; + let icono = '' + let text = '' if (rowData.status == '0') { - icono = "pi pi-eye"; - text = "Activar Inquilino" + icono = 'pi pi-eye' + text = 'Activar Inquilino' } else if (rowData.status == '1') { - icono = "pi pi-eye-slash"; - text = "Inactivar Inquilino" - + icono = 'pi pi-eye-slash' + text = 'Inactivar Inquilino' } return ( -
-
- ); + ) } const leftToolbarTemplate = () => { return ( -
-
) @@ -270,95 +268,141 @@ const Inquilinos = () => { const rightToolbarTemplate = () => { return ( -