You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

180 lines
12 KiB

4 months ago
<?xml version='1.0' encoding='UTF-8' ?>
<!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://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<body>
<ui:composition template="./template/templatePlantilla.xhtml">
<ui:define name="top">
INVETARIO
</ui:define>
<ui:define name="content">
<div class="card crud-demo">
<h:form id="form">
<p:growl id="messages" showDetail="true" />
<p:toolbar>
<p:toolbarGroup>
<p:commandButton value="Nuevo Usuario 👥" icon="pi pi-plus" actionListener="#{usuariosBean.prepararNuevoUsuario()}"
update=":dialogs:manage-product-content" oncomplete="PF('manageProductDialog').show()"
styleClass="ui-button-raised ui-button-flat" style="margin-right: 0.5rem">
<p:resetInput target=":dialogs:manage-product-content" />
</p:commandButton>
</p:toolbarGroup>
</p:toolbar>
<p:dataTable id="dt-usuario" widgetVar="dtusuario" var="usuario" value="#{usuariosBean.usuarios}"
reflow="true" styleClass="products-table"
rowKey="#{usuariosBean.usuario.idUsuarios}" paginator="true" rows="10" rowSelectMode="add" paginatorPosition="bottom">
<f:facet name="header">
<div class="products-table-header">
<span style="font-weight: bold">Usuarios</span>
<span class="filter-container ui-input-icon-left"> <i class="pi pi-search"></i>
<p:inputText id="globalFilter" onkeyup="PF('dtusuario').filter()" placeholder="Search" />
</span>
</div>
</f:facet>
<p:column headerText="Usuario" sortBy="#{usuario.usuario}" filterBy="#{usuario.usuario}">
<h:outputText value="#{usuario.usuario}" />
</p:column>
<p:column headerText="Nombre" sortBy="#{usuario.nombre }" filterBy="#{usuario.nombre}">
<h:outputText value="#{usuario.nombre} #{usuario.apaterno} #{usuario.amaterno}" />
</p:column>
<p:column headerText="Domicilio" sortBy="#{usuario.domicilio}" filterBy="#{usuario.domicilio}">
<h:outputText value="#{usuario.domicilio}" />
</p:column>
<p:column headerText="Telefono" sortBy="#{usuario.telefono}" filterBy="#{usuario.telefono}">
<h:outputText value="#{usuario.telefono}" />
</p:column>
<p:column headerText="F.Nacimiento" sortBy="#{usuario.fechanacimiento}" filterBy="#{usuario.fechanacimiento}">
<h:outputText value="#{usuario.fechanacimiento}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText>
</p:column>
<p:column headerText="T. Sangre" sortBy="#{usuario.tiposangre}" filterBy="#{usuario.tiposangre}">
<h:outputText value="#{usuario.tiposangre}" />
</p:column>
<p:column headerText="Rol" sortBy="#{usuario.rolidRol.nombreRol}" filterBy="#{usuario.rolidRol.nombreRol}">
<h:outputText value="#{usuario.rolidRol.nombreRol}" />
</p:column>
<p:column headerText="Acciones">
<p:commandButton icon="pi pi-pencil" update=":dialogs:manage-product-content"
oncomplete="PF('manageProductDialog').show()"
styleClass="rounded-button ui-button-info" process="@this"
actionListener="#{usuariosBean.prepararEditarUsuario(usuario)}">
<p:resetInput target=":dialogs:manage-product-content" />
</p:commandButton>
<p:commandButton styleClass="rounded-button ui-button-danger" icon="pi pi-trash"
process="@this"
actionListener="#{usuariosBean.prepararEditarUsuario(usuario)}"
oncomplete="PF('deleteProductDialog').show()">
</p:commandButton>
</p:column>
</p:dataTable>
</h:form>
<h:form id="dialogs">
<p:dialog header="Detalles de Usuario" showEffect="fade" modal="true" widgetVar="manageProductDialog"
responsive="true">
<p:outputPanel id="manage-product-content" styleClass="ui-fluid">
<p:outputPanel>
<h:panelGrid columns="2">
<p:outputLabel value="Usuario:" for="usuario" />
<p:inputText id="usuario" value="#{usuariosBean.usuario.usuario}" title="Usuario" required="true" requiredMessage="El usuario es requerdio." validatorMessage="Solo se pueden introducir letras y numeros">
<f:validateRegex pattern="[A-Za-z0-9]+" for="usuario"></f:validateRegex>
</p:inputText>
<p:outputLabel value="Contraseña" for="password" />
<p:inputText id="password" value="#{usuariosBean.usuario.password}" title="Contraseña" required="true" requiredMessage="La Contraseña es requerida." validatorMessage="La contraseña debe tener entre 8 y 10 caracteres, al menos una letra mayúscula, un número y un caracter especial (@$!%*?).">
<f:validateRegex pattern="^(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?])[A-Za-z\d@$!%*?]{8,10}$+" for="password"></f:validateRegex>
</p:inputText>
<p:outputLabel value="Nombre:" for="nombre" />
<p:inputText id="nombre" value="#{usuariosBean.usuario.nombre}" title="Nombre" required="true" requiredMessage="El usuario es requerdio." validatorMessage="Solo se pueden introducir letras">
<f:validateRegex pattern="[A-Za-z\s]+" for="nombre"></f:validateRegex>
</p:inputText>
<p:outputLabel value="Apellido Paterno" for="apaterno" />
<p:inputText id="apaterno" value="#{usuariosBean.usuario.apaterno}" title="Apellido Paterno" required="true" requiredMessage="El Apellido es requerido" validatorMessage="Solo se pueden introducir letras">
<f:validateRegex pattern="[A-Za-z\s]+" for="apaterno"></f:validateRegex>
</p:inputText>
<p:outputLabel value="Apellido Materno" for="amaterno" />
<p:inputText id="amaterno" value="#{usuariosBean.usuario.amaterno}" title="Apellido Materno" required="true" requiredMessage="El Apellido es requerido" validatorMessage="Solo se pueden introducir letras">
<f:validateRegex pattern="[A-Za-z\s]+" for="amaterno"></f:validateRegex>
</p:inputText>
<p:outputLabel value="Domicilio:" for="domicilio" />
<p:inputText id="domicilio" value="#{usuariosBean.usuario.domicilio}" title="Domicilio" required="true" requiredMessage="El domicilio es requerido" validatorMessage="El domicilio solo puede contener letras, números y ciertos caracteres especiales como -, ., #, y espacios." >
<f:validateRegex pattern="^[A-Za-z0-9\s\-,.#áéíóúÁÉÍÓÚñÑ]+$" for="domicilio"></f:validateRegex>
</p:inputText>
<p:outputLabel value="Telefono:" for="telefono" />
<p:inputMask id="telefono" value="#{usuariosBean.usuario.telefono}" mask="(999) 999-9999" validateMask="true" >
</p:inputMask>
<p:outputLabel value="Fecha de nacimiento" for="fechanacimiento" />
<p:inputMask id="fechanacimiento" value="#{usuariosBean.usuario.fechanacimiento}" mask="99/99/9999" required="true" >
<f:convertDateTime pattern="dd/MM/yyyy" />
</p:inputMask>
<p:outputLabel value="Tipo de sangre" for="tiposangre" />
<p:inputText id="tiposangre" value="#{usuariosBean.usuario.tiposangre}" title="Tipo de sangre" required="true" requiredMessage="El tipo de sangre es requerdio"/>
<p:outputLabel value="Rol" for="rolidRol" />
<p:selectOneMenu id="rolidRol" value="#{usuariosBean.usuario.rolidRol}" required="true" converter="selectOneMenuConverter" requiredMessage="El rol es requerido">
<!-- TODO: update below reference to list of available items-->
<f:selectItem itemLabel="Selecciona una" itemValue="" />
<f:selectItems value="#{rolBean.roles}" var="item" itemLabel="#{item.nombreRol}" itemValue="#{item}"/>
</p:selectOneMenu>
</h:panelGrid>
</p:outputPanel>
</p:outputPanel>
<f:facet name="footer">
<div style="text-align: center;">
<p:commandButton value="Guardar" icon="pi pi-save"
styleClass="ui-button-raised ui-button-flat" actionListener="#{usuariosBean.agregarUsuario()}"
update="manage-product-content" process="manage-product-content @this" />
</div>
</f:facet>
</p:dialog>
<p:confirmDialog widgetVar="deleteProductDialog" showEffect="fade" width="300"
message="¿Deseas eliminar este elemento?" header="Eliminar" severity="warn">
<div style="display: flex; justify-content: space-between;">
<p:commandButton value="Eliminar" icon="pi pi-trash"
styleClass="ui-button-raised ui-button-danger ui-button-flat"
actionListener="#{usuariosBean.eliminaUsuario()}" process="@this"
oncomplete="PF('deleteProductDialog').hide()" />
<p:commandButton value="Cancelar" type="button"
styleClass="ui-button-raised ui-button-danger-success ui-button-flat" icon="pi pi-times"
onclick="PF('deleteProductDialog').hide()" />
</div>
</p:confirmDialog>
</h:form>
</div>
</ui:define>
</ui:composition>
</body>
</html>