Cambiadas todas las listas deplegables fijas, a listas con búsqueda AJAX

integrada (Estilo typeahead). Permite búsquedas en tiempo real.
* Se muestra información organizada por columnas de datos.
* Identificadores basados en Ids autogenerados.
* Nuevos métodos en EJB común para poder realizar búsquedas de datos con
filtro y paginadas (para los comboBox).
* Varias correcciones de interfaz de usuario.
* Nueva clase de utilidades.
This commit is contained in:
Marcos Garcia Nuñez
2019-12-11 00:37:26 +01:00
parent 1be6cfd72c
commit 3e315f866a
25 changed files with 607 additions and 335 deletions

View File

@@ -2,48 +2,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
xmlns:p="http://primefaces.org/ui" xmlns:o="http://omnifaces.org/ui">
<ui:composition template="../header.xhtml">
<ui:define name="content">
<h:form id="frmRegisterUserResult" rendered="#{RegisterUser.registered}">
<div class="ui-g-3 ui-md-3" />
<div class="ui-g-6 ui-md-6">
<h:panelGroup id="globalPage">
<h:form id="frmRegisterUserResult" rendered="#{RegisterUser.registered}">
<div class="ui-g-3 ui-md-3" />
<div class="ui-g-6 ui-md-6">
<p:panel id="DatosPersonales" header="El registro se ha realizado correctamente">
<div class="ui-g ui-fluid">
<p:panel id="ResultadoAccion" header="El registro se ha realizado correctamente">
<div class="ui-g ui-fluid">
<div class="ui-g-12">
Enhorabuena
<p:outputLabel value="#{RegisterUser.name}" />
, se ha registrado correctamente, el sistema le ha asignado un <b> <p:outputLabel value="Código de Identificación Personal (CIP)" rendered="#{RegisterUser.patient}" />
<p:outputLabel value="Número de Profesional" rendered="#{RegisterUser.familyDoctor or RegisterUser.specialistDoctor}" />
</b> , por favor recuerdelo ya que deberá utilizarlo para logearse en el sistema.
<div class="ui-g-12">
Enhorabuena
<p:outputLabel value="#{RegisterUser.name}" />
, se ha registrado correctamente, el sistema le ha asignado un <b> <p:outputLabel value="Código de Identificación Personal (CIP)" rendered="#{RegisterUser.patient}" />
<p:outputLabel value="Número de Profesional" rendered="#{RegisterUser.familyDoctor or RegisterUser.specialistDoctor}" />
</b> , por favor recuerdelo ya que deberá utilizarlo para logearse en el sistema.
</div>
<div class="ui-g-12">
<p:outputLabel value="Su Código de Identificación Personal (CIP) es el siguiente:" rendered="#{RegisterUser.patient}" />
<p:outputLabel value="Número de Profesional es el siguiente:" rendered="#{RegisterUser.familyDoctor or RegisterUser.specialistDoctor}" />
</div>
<div class="ui-g-12" style="font-size: larger; font-weight: bold; text-align: center;">
<p:outputLabel value="#{RegisterUser.id}" />
</div>
<div class="ui-g-3"></div>
<div class="ui-g-6">
<p:button value="Ir a la página principal" outcome="/home" icon="pi pi-home" />
</div>
<div class="ui-g-3"></div>
</div>
<div class="ui-g-12">
<p:outputLabel value="Su Código de Identificación Personal (CIP) es el siguiente:" rendered="#{RegisterUser.patient}" />
<p:outputLabel value="Número de Profesional es el siguiente:" rendered="#{RegisterUser.familyDoctor or RegisterUser.specialistDoctor}" />
</div>
</p:panel>
</div>
<div class="ui-g-3 ui-md-3" />
</h:form>
<div class="ui-g-12" style="font-size: larger; font-weight: bold; text-align: center;">
<p:outputLabel value="#{RegisterUser.id}" />
</div>
<div class="ui-g-3"></div>
<div class="ui-g-6">
<p:button value="Ir a la página principal" outcome="/home" icon="pi pi-home" />
</div>
<div class="ui-g-3"></div>
</div>
</p:panel>
</div>
<div class="ui-g-3 ui-md-3" />
</h:form>
<h:form id="frmRegisterUser" rendered="#{not RegisterUser.registered}">
<h:outputScript>
<h:form id="frmRegisterUser" rendered="#{not RegisterUser.registered}">
<h:outputScript>
function handleRequest(xhr, status, args) {
if(args.specs) {
$('#panCentros').slideUp();
@@ -58,134 +59,142 @@
}
}
</h:outputScript>
<p:messages id="mesgs" showDetail="true" closable="true" autoupdate="true" />
<p:panel id="tipoUsuario" header="Especifique el tipo de usuario que desea registrarse">
<div class="ui-g ui-fluid">
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Tipo de usuario:" for="selUsertype" />
</div>
<div class="ui-g-6 ui-md-6">
<p:selectOneButton id="selUsertype" value="#{RegisterUser.userType}" required="true" unselectable="false" requiredMessage="Debe especificar un tipo de usuario">
<f:selectItems value="#{RegisterUser.userTypes}" var="item" itemLabel="#{item.userTypename}" itemValue="#{item.name}" />
<p:ajax listener="#{RegisterUser.onUserTypeChange}" update="selMS,selPHC" oncomplete="handleRequest(xhr, status, args)" />
</p:selectOneButton>
</div>
<div class="ui-g-4 ui-md-4"></div>
</div>
</p:panel>
<br />
<p:panel id="DatosPersonales" header="Especifique el tipo de usuario que desea registrarse">
<div class="ui-g ui-fluid">
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="NIF:" for="nif" />
</div>
<div class="ui-g-4 ui-md-4">
<p:inputText id="nif" value="#{RegisterUser.nif}" required="true" requiredMessage="Por favor, indque su NIF" />
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="nif" display="text" />
</div>
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Nombre:" for="name" />
</div>
<div class="ui-g-4 ui-md-4">
<p:inputText id="name" value="#{RegisterUser.name}" required="true" requiredMessage="Por favor, indique su nombre" />
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="name" />
</div>
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Apellidos:" for="surname" />
</div>
<div class="ui-g-4 ui-md-4">
<p:inputText id="surname" value="#{RegisterUser.surname}" required="true" requiredMessage="Por favor, indique sus apellidos" />
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="surname" />
</div>
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Correo electrónico:" for="email" />
</div>
<div class="ui-g-4 ui-md-4">
<p:inputText id="email" value="#{RegisterUser.email}" required="true" requiredMessage="Por favor, especifique su correo electrónico" />
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="email" />
</div>
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Contraseña" for="password" />
</div>
<div class="ui-g-4 ui-md-4">
<p:password id="password" value="#{RegisterUser.password}" match="passwordRepeat" required="true" requiredMessage="Por favor, especifique una contraseña" maxlength="50"
feedback="true" promptLabel="Especifique una contraseña segura" weakLabel="La contraseña es débil" goodLabel="La contraseña es buena" strongLabel="La contraseña es segura"
validatorMessage="La contraseña y su verificación deben ser iguales" />
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="password" />
</div>
<div class="ui-g-2">
<p:outputLabel value="Verificación de contraseña:" for="passwordRepeat" />
</div>
<div class="ui-g-4">
<p:password id="passwordRepeat" value="#{RegisterUser.password}" required="true" requiredMessage="Por favor, escriba la verificación de su contraseña" maxlength="50" />
</div>
<div class="ui-g-6">
<p:message for="passwordRepeat" />
</div>
<div id="panCentros" class="ui-g-12 ui-g-nopad hide">
<p:messages id="mesgs" showDetail="true" closable="true" autoupdate="true" />
<p:panel id="tipoUsuario" header="Especifique el tipo de usuario que desea registrarse">
<div class="ui-g ui-fluid">
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Centro:" for="selPHC" />
</div>
<div class="ui-g-4 ui-md-4">
<p:selectOneMenu id="selPHC" value="#{RegisterUser.primaryHealthCareCenter}" converter="omnifaces.SelectItemsConverter" required="#{RegisterUser.familyDoctor}"
requiredMessage="Por favor, selecciona un centro de antención primaria">
<f:selectItem itemLabel="Seleccione un centro de antención primario..." itemValue="" noSelectionOption="true" />
<f:selectItems value="#{RegisterUser.phcList}" var="phc" itemLabel="#{phc.location}" itemValue="#{phc}" />
<p:column>#{phc.name}</p:column>
<p:column>#{phc.location}</p:column>
</p:selectOneMenu>
<p:outputLabel value="Tipo de usuario:" for="selUsertype" />
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="selPHC" />
</div>
</div>
<div id="panEspecialidades" class="ui-g-12 ui-g-nopad hide">
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Especialidad médica:" for="selMS" />
</div>
<div class="ui-g-4 ui-md-4">
<p:selectOneMenu id="selMS" value="#{RegisterUser.medicalSpecialty}" converter="omnifaces.SelectItemsConverter" required="#{RegisterUser.specialistDoctor}"
requiredMessage="Por favor, seleccione una especialidad médica">
<f:selectItem itemLabel="Seleccione una especialidad médica..." itemValue="" noSelectionOption="true" />
<f:selectItems value="#{RegisterUser.medicalSpecialtiesList}" var="ms" itemLabel="#{ms.description}" itemValue="#{ms}" />
<p:column>#{ms.name}</p:column>
<p:column>#{ms.description}</p:column>
</p:selectOneMenu>
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="selMS" />
</div>
</div>
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-4 ui-md-4"></div>
<div class="ui-g-2 ui-md-2 ">
<p:commandButton validateClient="true" value="Registrarse" ajax="false" update="frmRegisterUserResult, frmRegisterUser" action="#{RegisterUser.addNewUser}" icon="pi pi-check" />
</div>
<div class="ui-g-2 ui-md-2">
<p:button value="Volver" outcome="/home" icon="pi pi-home" />
<p:selectOneButton id="selUsertype" value="#{RegisterUser.userType}" required="true" unselectable="false" requiredMessage="Debe especificar un tipo de usuario">
<f:selectItems value="#{RegisterUser.userTypes}" var="item" itemLabel="#{item.userTypename}" itemValue="#{item.name}" />
<p:ajax listener="#{RegisterUser.onUserTypeChange}" update="DatosPersonales" oncomplete="handleRequest(xhr, status, args)" />
<!-- <p:ajax listener="#{RegisterUser.onUserTypeChange}" update="panEspecialidades, panCentros" oncomplete="handleRequest(xhr, status, args)" /> -->
</p:selectOneButton>
</div>
<div class="ui-g-4 ui-md-4"></div>
</div>
</div>
</p:panel>
<br />
<p:panel id="DatosPersonales" header="Especifique el tipo de usuario que desea registrarse">
<div class="ui-g ui-fluid">
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="NIF:" for="nif" />
</div>
<div class="ui-g-4 ui-md-4">
<p:inputText id="nif" value="#{RegisterUser.nif}" required="true" requiredMessage="Por favor, indque su NIF" />
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="nif" display="text" />
</div>
</p:panel>
</h:form>
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Nombre:" for="name" />
</div>
<div class="ui-g-4 ui-md-4">
<p:inputText id="name" value="#{RegisterUser.name}" required="true" requiredMessage="Por favor, indique su nombre" />
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="name" />
</div>
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Apellidos:" for="surname" />
</div>
<div class="ui-g-4 ui-md-4">
<p:inputText id="surname" value="#{RegisterUser.surname}" required="true" requiredMessage="Por favor, indique sus apellidos" />
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="surname" />
</div>
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Correo electrónico:" for="email" />
</div>
<div class="ui-g-4 ui-md-4">
<p:inputText id="email" value="#{RegisterUser.email}" required="true" requiredMessage="Por favor, especifique su correo electrónico" />
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="email" />
</div>
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Contraseña" for="password" />
</div>
<div class="ui-g-4 ui-md-4">
<p:password id="password" value="#{RegisterUser.password}" match="passwordRepeat" required="true" requiredMessage="Por favor, especifique una contraseña" maxlength="50"
feedback="true" promptLabel="Especifique una contraseña segura" weakLabel="La contraseña es débil" goodLabel="La contraseña es buena" strongLabel="La contraseña es segura"
validatorMessage="La contraseña y su verificación deben ser iguales" />
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="password" />
</div>
<div class="ui-g-2">
<p:outputLabel value="Verificación de contraseña:" for="passwordRepeat" />
</div>
<div class="ui-g-4">
<p:password id="passwordRepeat" value="#{RegisterUser.password}" required="true" requiredMessage="Por favor, escriba la verificación de su contraseña" maxlength="50" />
</div>
<div class="ui-g-6">
<p:message for="passwordRepeat" />
</div>
<h:panelGroup id="panCentros" layout="block" styleClass="ui-g-12" rendered="#{RegisterUser.familyDoctor}">
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Centro:" for="selPHC" />
</div>
<div class="ui-g-4 ui-md-4">
<p:autoComplete id="selPHC" dropdown="true" value="#{RegisterUser.primaryHealthCareCenter}" completeMethod="#{RegisterUser.completePrimaryHealCareCenter}" var="phc"
itemLabel="#{phc.displayName}" itemValue="#{phc}" forceSelection="true" requiredMessage="Por favor, selecciona un nuevo centro de antención primaria">
<o:converter converterId="omnifaces.ListConverter" list="#{RegisterUser.phcList}" />
<p:column headerText="Nombre">
<h:outputText value="#{phc.name}" />
</p:column>
<p:column headerText="Localización">
<h:outputText value="#{phc.location}" />
</p:column>
</p:autoComplete>
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="selPHC" />
</div>
</h:panelGroup>
<h:panelGroup id="panEspecialidades" layout="block" styleClass="ui-g-12" rendered="#{RegisterUser.specialistDoctor}">
<div class="ui-g-2 ui-md-2">
<p:outputLabel value="Especialidad médica:" for="selMS" />
</div>
<div class="ui-g-4 ui-md-4">
<p:autoComplete id="selMS" dropdown="true" value="#{RegisterUser.medicalSpecialty}" completeMethod="#{RegisterUser.completeMedicalSpecialty}" var="ms"
itemLabel="#{ms.displayName}" itemValue="#{ms}" forceSelection="true" requiredMessage="Por favor, selecciona una especialidad médica">
<o:converter converterId="omnifaces.ListConverter" list="#{RegisterUser.medicalSpecialtiesList}" />
<p:column headerText="Nombre">
<h:outputText value="#{ms.name}" />
</p:column>
<p:column headerText="Localización">
<h:outputText value="#{ms.description}" />
</p:column>
</p:autoComplete>
</div>
<div class="ui-g-6 ui-md-6">
<p:message for="selMS" />
</div>
</h:panelGroup>
<div class="ui-g-12 ui-g-nopad">
<div class="ui-g-4 ui-md-4"></div>
<div class="ui-g-2 ui-md-2 ">
<p:commandButton validateClient="true" value="Registrarse" update="globalPage" action="#{RegisterUser.addNewUser}" icon="pi pi-check" />
</div>
<div class="ui-g-2 ui-md-2">
<p:button value="Volver" outcome="/home" icon="pi pi-home" />
</div>
<div class="ui-g-4 ui-md-4"></div>
</div>
</div>
</p:panel>
</h:form>
</h:panelGroup>
</ui:define>
</ui:composition>
</html>