Merge branch 'dev' into US-48-Activar-Desactivarguardadeseguridad

This commit is contained in:
Mariela 2022-08-03 08:44:54 -06:00
commit 25924201b2
3 changed files with 338 additions and 24 deletions

View File

@ -269,6 +269,7 @@ export class AppService {
hourMax: hourMax,
bookable: bookable,
community_id: community_id,
status: '1'
};
return this.clientCommonAreaApp
.send<string>(pattern, payload)

View File

@ -15,16 +15,15 @@ import { faIdCardAlt } from '@fortawesome/free-solid-svg-icons';
import { faClipboardCheck } from '@fortawesome/free-solid-svg-icons';
import classNames from 'classnames';
import { useCookies } from "react-cookie";
import { RadioButton } from 'primereact/radiobutton';
const AreasComunes = () => {
let emptyCommonArea = {
_id: null,
dni: '',
name: '',
hourMin: '',
hourMax: '',
hourMin: '00:00',
hourMax: '01:00',
community_id: '',
bookable: '1',
bookable_text: '',
@ -32,6 +31,7 @@ const AreasComunes = () => {
status_text: '',
};
const [commonAreaList, setCommonAreaList] = useState([]);
const [commonArea, setCommonArea] = useState(emptyCommonArea);
const [selectedCommonAreas, setSelectedCommonAreas] = useState(null);
@ -44,6 +44,8 @@ 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())
@ -78,6 +80,74 @@ const AreasComunes = () => {
getCommonAreas();
}, []);
const saveCommonArea = () => {
if (
commonArea.name &&
commonArea.hourMin < commonArea.hourMax
) {
let _common_areas = [...commonAreaList];
let _common_area = { ...commonArea };
_common_area.community_id = cookies.community_id;
// console.log(houses)
fetch('http://localhost:4000/commonArea/createCommonArea', {
cache: 'no-cache',
method: 'POST',
body: JSON.stringify(_common_area),
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 (data) {
return data.message;
})
.then((data) => {
if (data) {
if (data.bookable == '1') {
data.bookable_text = 'Necesaria';
} else {
data.bookable_text = 'No es necesaria';
}
if (data.status == '1') {
data.status_text = 'Activo';
} else if (data.status == '0') {
data.status_text = 'Inactivo';
} else {
data.status_text = 'Eliminado';
}
}
_common_areas.push(data);
toast.current.show({
severity: 'success',
summary: 'Registro exitoso',
detail: 'Área Común Creada',
life: 3000,
});
setCommonAreaList(_common_areas);
setCommonArea(emptyCommonArea);
})
.catch((err) => {
console.log('Ocurrió un error con el fetch', err);
toast.current.show({
severity: 'danger',
summary: 'Error',
detail: 'No se pudo registrar el área común',
life: 3000
});
});
} else {
setSubmitted(true);
}
};
const deleteCommonArea = () => {
fetch('http://localhost:4000/commonArea/deleteCommonArea/' + commonArea._id, {
@ -167,8 +237,6 @@ const AreasComunes = () => {
setDeleteCommonAreasDialog(true);
};
const actionsCommonArea = (rowData) => {
return (
<div className="actions">
@ -181,6 +249,18 @@ const AreasComunes = () => {
);
};
const onBookableChange = (e) => {
let _commonArea = { ...commonArea };
_commonArea['bookable'] = e.value;
setCommonArea(_commonArea);
};
const onInputChange = (e, name) => {
const val = (e.target && e.target.value) || '';
let _commonArea = { ...commonArea };
_commonArea[`${name}`] = val;
setCommonArea(_commonArea);
};
const deleteCommonAreaDialogFooter = (
<>
@ -278,7 +358,7 @@ const AreasComunes = () => {
const bookableBodyTemplate = (rowData) => {
let class_color = '';
if(rowData.bookable == '1') {
if (rowData.bookable == '1') {
class_color = '0';
} else {
class_color = '1';
@ -307,6 +387,18 @@ const AreasComunes = () => {
);
};
function compareTimesMinRequired(hour1, hour2) {
var timeFormat1 = Number(hour1.replace(/[:]/g, ''));
var timeFormat2 = Number(hour2.replace(/[:]/g, ''));
if (timeFormat1 <= timeFormat2) {
return true;
} else {
return false;
}
}
return (
<div className="grid">
<div className="col-12">
@ -341,6 +433,124 @@ const AreasComunes = () => {
</Dialog>
</div>
</div>
<div className="col-12">
<div className="card">
<h5>Registro de área común</h5>
<div className="p-fluid formgrid grid">
<div className="field col-12 md:col-6">
<label htmlFor="name">Nombre</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText id="name"
type="text"
onChange={(e) => onInputChange(e, 'name')}
value={commonArea.name}
required
autoFocus
className={classNames({
'p-invalid': submitted && commonArea.name === '',
})}
/>
</div>
{submitted && commonArea.name === '' && (
<small className="p-invalid">Nombre es requirido.</small>
)}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="hourMin">Hora apertura</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText id="hourMin"
type="time"
min="00:00" max="23:59"
step="3600000"
onChange={(e) => onInputChange(e, 'hourMin')}
value={commonArea.hourMin}
required
autoFocus
className={classNames({
'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin),
})}
/>
</div>
{submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && (
<small className="p-invalid">La hora de apertura debe ser menor que la hora de cierre.</small>
)}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="hourMax">Hora de cierre</label>
<div className="p-0 col-12 md:col-12">
<div className="p-inputgroup">
<span className="p-inputgroup-addon p-button p-icon-input-khaki">
<i className="pi pi-home"></i>
</span>
<InputText id="hourMax"
type="time"
min="00:00" max="23:59"
step="3600000"
onChange={(e) => onInputChange(e, 'hourMax')}
value={commonArea.hourMax}
required
autoFocus
className={classNames({
'p-invalid': submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin),
})}
/>
</div>
{submitted && compareTimesMinRequired(commonArea.hourMax, commonArea.hourMin) && (
<small className="p-invalid">La hora de cierre debe ser mayor que la hora de apertura</small>
)}
</div>
</div>
<div className="field col-12 md:col-6">
<label htmlFor="bookable">¿Necesita Reservación?</label>
<div className="formgrid grid align-items-end" style={{marginTop: '12px', width: '300px'}}>
<div className="field-radiobutton col-6">
<RadioButton
inputId="bookable1"
name="bookable"
value="1"
onChange={onBookableChange}
checked={commonArea.bookable === '1'}
/>
<label htmlFor="bookable1">
<span className="p-icon-input-khaki">
<i className="pi pi-check status status-1"></i> Sí
</span>
</label>
</div>
<div className="field-radiobutton col-6">
<RadioButton
inputId="bookable2"
name="bookable"
value="0"
onChange={onBookableChange}
checked={commonArea.bookable === '0'}
/>
<label htmlFor="bookable2">
<span className="p-icon-input-khaki">
<i className="pi pi-times status status-0"></i> No
</span>
</label>
</div>
</div>
</div>
<Button label="Registrar" onClick={saveCommonArea}></Button>
</div>
</div>
</div>
</div>
);

View File

@ -15,8 +15,23 @@ import { faCircleQuestion } from '@fortawesome/free-solid-svg-icons';
import { useCookies } from "react-cookie";
const GuardasSeguridad = () => {
let emptyGuarda = {
_id: null,
dni: '',
name: '',
last_name: '',
email: '',
phone: '',
password: '',
user_type: '1',
status: '1',
status_text: '',
};
const [listaGuardas, setListaGuardas] = useState([]);
const [urlFetch, setUrlFetch] = useState('http://localhost:4000/user/findGuards/62be68215692582bbfd77134');
const [urlFetch, setUrlFetch] = useState('http://localhost:4000/user/findGuards/');
const [guarda, setGuarda] = useState(emptyGuarda);
const [selectedGuardas, setSelectedGuardas] = useState(null);
const [globalFilter, setGlobalFilter] = useState(null);
@ -28,23 +43,12 @@ const GuardasSeguridad = () => {
const [cookies, setCookie] = useCookies();
const [changeStatusGuardDialog, setChangeStatusGuardDialog] = useState(false);
let emptyGuarda = {
_id: null,
dni: '',
name: '',
last_name: '',
email: '',
phone: '',
password: '',
user_type: '1',
status: '',
status_text: '',
};
const [guardDialog, setGuardDialog] = useState(false);
const [submitted, setSubmitted] = useState(false);
async function listaGuardasF() {
let nombres = await fetch(urlFetch, { method: 'GET' });
let nombres = await fetch((urlFetch + cookies.community_id), { method: 'GET' });
let listaGuardasRes = await nombres.json();
let data = await listaGuardasRes.message.filter(
(val) => val.status != -1,
@ -58,6 +62,7 @@ const GuardasSeguridad = () => {
})
setListaGuardas(await data);
}
useEffect(() => {
listaGuardasF();
}, [])
@ -236,8 +241,18 @@ const GuardasSeguridad = () => {
setChangeStatusGuardDialog(true);
};
const hideGuardDialog = () => {
setSubmitted(false);
setGuardDialog(false);
};
const actionsAdmin = (rowData) => {
const infoGuard = (guard) => {
setGuarda(guard);
setGuardDialog(true);
};
const actionsGuard = (rowData) => {
let icono = '';
let text = '';
if (rowData.status == '0') {
@ -250,6 +265,11 @@ const GuardasSeguridad = () => {
}
return (
<div className="actions">
<Button
icon="pi pi-exclamation-circle"
className="p-button-rounded p-button-info mt-2 mx-2"
onClick={() => infoGuard(rowData)}
/>
<Button
icon={`${icono}`}
className="p-button-rounded p-button-warning mt-2 mx-2"
@ -328,6 +348,19 @@ const GuardasSeguridad = () => {
</>
);
const guardDialogFooter = (
<>
<Button
label="Cerrar"
icon="pi pi-times"
className="p-button-text"
onClick={hideGuardDialog}
/>
</>
);
const headerName = (
<>
<p>{' '}
@ -420,8 +453,78 @@ const GuardasSeguridad = () => {
body={statusBodyTemplate}
style={{ flexGrow: 1, flexBasis: '160px', minWidth: '160px', wordBreak: 'break-word' }}>
</Column>
<Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsAdmin}></Column>
<Column style={{ flexGrow: 1, flexBasis: '80px', minWidth: '80px' }} body={actionsGuard}></Column>
</DataTable>
<Dialog
visible={guardDialog}
style={{ width: '650px' }}
header="Información del Guarda de Seguridad"
modal
className="p-fluid"
footer={guardDialogFooter}
onHide={hideGuardDialog}>
<div className='container text-center'>
<div className='row my-4'>
<div className=" col-4 md:col-4">
<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-user icon-khaki"></i>
<p>{guarda.name}</p>
</div>
</div>
</div>
<div className=" col-4 md:col-4">
<p>Apellido(s)</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>{guarda.last_name}</p>
</div>
</div>
</div>
<div className=" col-4 col-md-4 md:col-4">
<p>Identificación</p>
<div className="p-0 col-10 md:col-10" style={{ margin: '0 auto' }}>
<div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-id-card icon-khaki"></i>
<p>{guarda.dni}</p>
</div>
</div>
</div>
</div>
<div className='row my-5 justify-content-center'>
</div>
<div className='row my-5 justify-content-center'>
<div className=" col-4 md:col-4">
<p>Teléfono</p>
<div className="p-0 col-10 md:col-10">
<div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-phone icon-khaki"></i>
<p>{guarda.phone}</p>
</div>
</div>
</div>
<div className=" col-6 md:col-6">
<p>Correo Electrónico</p>
<div className="p-0 col-10 md:col-10" style={{ margin: '0 auto' }}>
<div className="p-inputgroup align-items-center justify-content-evenly">
<i className="pi pi-envelope icon-khaki"></i>
<p>{guarda.email}</p>
</div>
</div>
</div>
</div>
</div>
</Dialog>
<Dialog visible={deleteGuardaDialog} style={{ width: '450px' }} header="Confirmar" modal footer={deleteAdminSystemDialogFooter} onHide={hideDeleteGuardaDialog}>
<div className="flex align-items-center justify-content-center">
<i className="pi pi-exclamation-triangle mr-3" style={{ fontSize: '2rem' }} />