ver perfil de la comunidad
This commit is contained in:
		
							parent
							
								
									99ecc65b06
								
							
						
					
					
						commit
						ea3d35158f
					
				| 
						 | 
				
			
			@ -112,6 +112,11 @@ export class AppController {
 | 
			
		|||
    return this.appService.findUser(paramUserDNI);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  @Get('user/findUserById/:id')
 | 
			
		||||
  findUserById(@Param('id') id: string) {
 | 
			
		||||
    return this.appService.findUserById(id);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  @Delete('user/deleteAdminSystem/:id')
 | 
			
		||||
  deleteAdminSystem(@Param('id') id: string) {
 | 
			
		||||
    return this.appService.deleteAdminSystem(id);
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -162,6 +162,17 @@ export class AppService {
 | 
			
		|||
      .pipe(map((message: string) => ({ message })));
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
   //GET parameter from API
 | 
			
		||||
   findUserById(id: string) {
 | 
			
		||||
    const pattern = { cmd: 'findById' };
 | 
			
		||||
    const payload = { id: id };
 | 
			
		||||
    return this.clientUserApp
 | 
			
		||||
      .send<string>(pattern, payload)
 | 
			
		||||
      .pipe(map((message: string) => ({ message })));
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  // ====================== COMMUNITIES ===============================
 | 
			
		||||
 | 
			
		||||
  //POST parameter from API
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -40,6 +40,12 @@ export class UsersController {
 | 
			
		|||
    return this.userService.findOneByDNI(dni);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  @MessagePattern({ cmd: 'findById' })
 | 
			
		||||
  findById(@Payload() id: string) {
 | 
			
		||||
    let _id = id['id'];
 | 
			
		||||
    return this.userService.findOne(_id);
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  @MessagePattern({ cmd: 'findGuardsCommunity' })
 | 
			
		||||
  findGuardsCommunity(@Payload() community_id: string) {
 | 
			
		||||
    let pcommunity_id = community_id['community_id'];
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -7117,4 +7117,13 @@
 | 
			
		|||
 | 
			
		||||
.p-button.p-button-danger:enabled:focus {
 | 
			
		||||
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #f7a2a2, 0 1px 2px 0 black;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
.icon-khaki {
 | 
			
		||||
    color: var(--primary-color);
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.row {
 | 
			
		||||
    display: flex;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -9,10 +9,11 @@ import classNames from 'classnames';
 | 
			
		|||
import { Dialog } from 'primereact/dialog';
 | 
			
		||||
import { Toolbar } from 'primereact/toolbar';
 | 
			
		||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 | 
			
		||||
import { faHome } from '@fortawesome/free-solid-svg-icons';
 | 
			
		||||
import { faHome, faUserAlt } from '@fortawesome/free-solid-svg-icons';
 | 
			
		||||
import { faMapLocationDot } from '@fortawesome/free-solid-svg-icons';
 | 
			
		||||
import { faPhoneAlt } from '@fortawesome/free-solid-svg-icons';
 | 
			
		||||
import { faEllipsis } from '@fortawesome/free-solid-svg-icons';
 | 
			
		||||
import { faHashtag } from '@fortawesome/free-solid-svg-icons';
 | 
			
		||||
 | 
			
		||||
const Communities = () => {
 | 
			
		||||
  let emptyCommunity = {
 | 
			
		||||
| 
						 | 
				
			
			@ -47,6 +48,13 @@ const Communities = () => {
 | 
			
		|||
  const toast = useRef(null);
 | 
			
		||||
  const dt = useRef(null);
 | 
			
		||||
 | 
			
		||||
  //para el perfil de la comunidad
 | 
			
		||||
 | 
			
		||||
  const [communityDialog, setCommunityDialog] = useState(false);
 | 
			
		||||
  const [editcommunityDialog, setEditCommunityDialog] = useState(false);
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  const p = provincesList.map((item) => ({
 | 
			
		||||
    label: item.name,
 | 
			
		||||
    value: item.code,
 | 
			
		||||
| 
						 | 
				
			
			@ -120,7 +128,7 @@ const Communities = () => {
 | 
			
		|||
    fillDistricts();
 | 
			
		||||
  }, [cantonId]);
 | 
			
		||||
 | 
			
		||||
  
 | 
			
		||||
 | 
			
		||||
  const handleProvinces = (event) => {
 | 
			
		||||
    const getprovinciaId = event.target.value;
 | 
			
		||||
    setProvinciaId(getprovinciaId);
 | 
			
		||||
| 
						 | 
				
			
			@ -233,6 +241,22 @@ const Communities = () => {
 | 
			
		|||
    }
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  async function findNameTenant(tenant_id) {
 | 
			
		||||
    let name = '';
 | 
			
		||||
    if (tenant_id == '') {
 | 
			
		||||
      name = 'Sin inquilino';
 | 
			
		||||
    } else {
 | 
			
		||||
      name = await fetch('http://localhost:4000/user/findUserById/' + tenant_id, { method: "GET" });
 | 
			
		||||
      let response = await response.json();
 | 
			
		||||
      let res = await response.message;
 | 
			
		||||
      name = res['name'] + ' ' + res['last_name'];
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    return name;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  const onInputChange = (e, name) => {
 | 
			
		||||
    const val = (e.target && e.target.value) || '';
 | 
			
		||||
    let _community = { ...community };
 | 
			
		||||
| 
						 | 
				
			
			@ -241,6 +265,11 @@ const Communities = () => {
 | 
			
		|||
    setCommunity(_community);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const hideCommunityDialog = () => {
 | 
			
		||||
    setSubmitted(false);
 | 
			
		||||
    setCommunityDialog(false);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const hideDeleteCommunityDialog = () => {
 | 
			
		||||
    setDeleteCommunityDialog(false);
 | 
			
		||||
  };
 | 
			
		||||
| 
						 | 
				
			
			@ -258,6 +287,17 @@ const Communities = () => {
 | 
			
		|||
    setDeleteCommunitiesDialog(true);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  const infoCommunity = (community) => {
 | 
			
		||||
    setCommunity({ ...community });
 | 
			
		||||
    setCommunityDialog(true);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const editCommunity = (community) => {
 | 
			
		||||
    setCommunity({ ...community });
 | 
			
		||||
    setEditCommunityDialog(true);
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
  const deleteCommunity = () => {
 | 
			
		||||
    /*   fetch('http://localhost:4000/community/deleteCommunity/' + community._id, {
 | 
			
		||||
               cache: 'no-cache',
 | 
			
		||||
| 
						 | 
				
			
			@ -330,6 +370,11 @@ const Communities = () => {
 | 
			
		|||
  const actionsCommunity = (rowData) => {
 | 
			
		||||
    return (
 | 
			
		||||
      <div className="actions">
 | 
			
		||||
        <Button
 | 
			
		||||
          icon="pi pi-exclamation-circle"
 | 
			
		||||
          className="p-button-rounded p-button-primary mr-2"
 | 
			
		||||
          onClick={() => infoCommunity(rowData)}
 | 
			
		||||
        />
 | 
			
		||||
        <Button
 | 
			
		||||
          icon="pi pi-trash"
 | 
			
		||||
          className="p-button-rounded p-button-danger mt-2"
 | 
			
		||||
| 
						 | 
				
			
			@ -381,6 +426,18 @@ const Communities = () => {
 | 
			
		|||
    </div>
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  const communityDialogFooter = (
 | 
			
		||||
    <>
 | 
			
		||||
      <Button
 | 
			
		||||
        label="Cerrar"
 | 
			
		||||
        icon="pi pi-times"
 | 
			
		||||
        className="p-button-text"
 | 
			
		||||
        onClick={hideCommunityDialog}
 | 
			
		||||
      />
 | 
			
		||||
 | 
			
		||||
    </>
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
  const deleteCommunityDialogFooter = (
 | 
			
		||||
    <>
 | 
			
		||||
      <Button
 | 
			
		||||
| 
						 | 
				
			
			@ -477,7 +534,7 @@ const Communities = () => {
 | 
			
		|||
    <>
 | 
			
		||||
      <p>
 | 
			
		||||
        {' '}
 | 
			
		||||
        <FontAwesomeIcon icon={faPhoneAlt} style={{ color: '#D7A86E' }} />{' '}
 | 
			
		||||
        <FontAwesomeIcon icon={faHashtag} style={{ color: '#D7A86E' }} />{' '}
 | 
			
		||||
        Número de viviendas
 | 
			
		||||
      </p>
 | 
			
		||||
    </>
 | 
			
		||||
| 
						 | 
				
			
			@ -502,6 +559,27 @@ const Communities = () => {
 | 
			
		|||
    </>
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  //ver perfil comunidad
 | 
			
		||||
  const headerTenant = (
 | 
			
		||||
    <>
 | 
			
		||||
      <p>
 | 
			
		||||
        {' '}
 | 
			
		||||
        <FontAwesomeIcon icon={faUserAlt} style={{ color: '#C08135' }} />{' '}
 | 
			
		||||
        Inquilinos
 | 
			
		||||
      </p>
 | 
			
		||||
    </>
 | 
			
		||||
  );
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  const tenantsBodyTemplate = (rowData) => {
 | 
			
		||||
    let tenants = rowData.tenants;
 | 
			
		||||
    let name = findNameTenant(tenants.tenant_id);
 | 
			
		||||
    console.log(name)
 | 
			
		||||
  };
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
  return (
 | 
			
		||||
    <div className="grid">
 | 
			
		||||
      <div className="col-12">
 | 
			
		||||
| 
						 | 
				
			
			@ -572,6 +650,134 @@ const Communities = () => {
 | 
			
		|||
            ></Column>
 | 
			
		||||
            <Column header={headerOptions} body={actionsCommunity}></Column>
 | 
			
		||||
          </DataTable>
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
          <Dialog
 | 
			
		||||
            visible={communityDialog}
 | 
			
		||||
            style={{ width: '650px' }}
 | 
			
		||||
            header="Información de la Comunidad"
 | 
			
		||||
            modal
 | 
			
		||||
            className="p-fluid"
 | 
			
		||||
            footer={communityDialogFooter}
 | 
			
		||||
            onHide={hideCommunityDialog}>
 | 
			
		||||
            <div className='container text-center'>
 | 
			
		||||
              <div className='row my-4'>
 | 
			
		||||
                <div className=" col-12 md:col-12">
 | 
			
		||||
                  <p>Nombre</p>
 | 
			
		||||
                  <div className="p-0 col-2  md:col-2" style={{ margin: '0 auto' }}>
 | 
			
		||||
                    <div className="p-inputgroup align-items-center justify-content-evenly">
 | 
			
		||||
                      <i className="pi pi-home icon-khaki"></i>
 | 
			
		||||
                      <p>{community.name}</p>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div className='row my-5'>
 | 
			
		||||
                <div className=" col-6 md:col-6">
 | 
			
		||||
                  <p>Administrador</p>
 | 
			
		||||
                  <div className="p-0 col-6  md:col-6" style={{ margin: '0 auto' }}>
 | 
			
		||||
                    <div className="p-inputgroup align-items-center justify-content-evenly">
 | 
			
		||||
                      <i className="pi pi-user icon-khaki"></i>
 | 
			
		||||
                      <p>{community.name_admin}</p>
 | 
			
		||||
                    </div>
 | 
			
		||||
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
                <div className=" col-6 md:col-6">
 | 
			
		||||
                  <p>Teléfono Administrativo</p>
 | 
			
		||||
                  <div className="p-0 col-6  md:col-6" style={{ margin: '0 auto' }}>
 | 
			
		||||
                    <div className="p-inputgroup align-items-center justify-content-evenly">
 | 
			
		||||
                      <i className="pi pi-phone icon-khaki"></i>
 | 
			
		||||
                      <p>{community.phone}</p>
 | 
			
		||||
                    </div>
 | 
			
		||||
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
 | 
			
		||||
              <div className='row my-5'>
 | 
			
		||||
                <div className=" col-4 col-md-4 md:col-4">
 | 
			
		||||
                  <p>Provincia</p>
 | 
			
		||||
                  <div className="p-0 col-10 md:col-10">
 | 
			
		||||
                    <div className="p-inputgroup align-items-center justify-content-evenly">
 | 
			
		||||
                      <i className="pi pi-map-marker icon-khaki"></i>
 | 
			
		||||
                      <p>{community.province}</p>
 | 
			
		||||
                    </div>
 | 
			
		||||
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
                <div className=" col-4 md:col-4">
 | 
			
		||||
                  <p>Cantón</p>
 | 
			
		||||
                  <div className="p-0 col-10 md:col-10">
 | 
			
		||||
                    <div className="p-inputgroup align-items-center justify-content-evenly">
 | 
			
		||||
                      <i className="pi pi-map-marker icon-khaki"></i>
 | 
			
		||||
                      <p>{community.canton}</p>
 | 
			
		||||
                    </div>
 | 
			
		||||
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
                <div className=" col-4 md:col-4">
 | 
			
		||||
                  <p>Distrito</p>
 | 
			
		||||
                  <div className="p-0 col-10 md:col-10">
 | 
			
		||||
                    <div className="p-inputgroup align-items-center justify-content-evenly">
 | 
			
		||||
                      <i className="pi pi-map-marker icon-khaki"></i>
 | 
			
		||||
                      <p>{community.district}</p>
 | 
			
		||||
                    </div>
 | 
			
		||||
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div className='row my-5'>
 | 
			
		||||
                <div className=" col-12 md:col-12">
 | 
			
		||||
                  <p>Número de Viviendas</p>
 | 
			
		||||
                  <div className="p-0 col-2  md:col-2" style={{ margin: '0 auto' }}>
 | 
			
		||||
                    <div className="p-inputgroup justify-content-evenly">
 | 
			
		||||
                      <i className="pi pi-hashtag icon-khaki"></i>
 | 
			
		||||
                      <p>{community.num_houses}</p>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
              <div className='row my-5'>
 | 
			
		||||
                <div className=" col-12 md:col-12">
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
                  <p> <i className="pi pi-home icon-khaki"></i>  Viviendas</p>
 | 
			
		||||
                  <div className="p-0 col-12  md:col-12" style={{ margin: '0 auto' }}>
 | 
			
		||||
                    <div className="p-inputgroup justify-content-evenly">
 | 
			
		||||
                      <DataTable
 | 
			
		||||
                        value={community.houses}
 | 
			
		||||
                        paginator
 | 
			
		||||
                        rows={5}
 | 
			
		||||
                        scrollable
 | 
			
		||||
                        scrollHeight="200px"
 | 
			
		||||
                        scrollDirection="both"
 | 
			
		||||
                        rowsPerPageOptions={[5, 10, 25]}
 | 
			
		||||
                        className="datatable-responsive mt-3"
 | 
			
		||||
                        paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
 | 
			
		||||
                        currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} comunidades de viviendas"
 | 
			
		||||
                        globalFilter={globalFilter}
 | 
			
		||||
                      >
 | 
			
		||||
                        <Column
 | 
			
		||||
                          field="number_house"
 | 
			
		||||
                          header={headerNumberHouses}
 | 
			
		||||
                          style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }}
 | 
			
		||||
                        ></Column>
 | 
			
		||||
                        <Column
 | 
			
		||||
                          field="tenants"
 | 
			
		||||
                          header={headerTenant}
 | 
			
		||||
                          body={tenantsBodyTemplate}
 | 
			
		||||
                          style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px' }}
 | 
			
		||||
                        ></Column>
 | 
			
		||||
                      </DataTable>
 | 
			
		||||
                    </div>
 | 
			
		||||
                  </div>
 | 
			
		||||
                </div>
 | 
			
		||||
              </div>
 | 
			
		||||
            </div>
 | 
			
		||||
 | 
			
		||||
          </Dialog>
 | 
			
		||||
 | 
			
		||||
          <Dialog
 | 
			
		||||
            visible={deleteCommunityDialog}
 | 
			
		||||
            style={{ width: '450px' }}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue