The problem is a issue in the RowEditor component displayed in the Edit modal for save the edited columns is sollaped with the button “Cancelar” if the edit modal not support the RowEditor what is the alternative to fix this?
allSupplierUsers.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template.xhtml">
<ui:define name="content">
<div class="ui-g">
<div class="ui-g-12">
<div class="feature-intro" style="color:#495057;">
<h1>Proveedores del sistema</h1>
</div>
<div class="card card-w-title">
<h:form id="form">
<p:growl id="msgs" showDetail="true"/>
<p:dataTable var="supplier" value="#{supplierUsers.suppliers}" selectionMode="single" reflow="true" editable="true"
emptyMessage="No se han encontrado registros."
selection="#{supplierUsers.selectedSupplier}" rowKey="#{supplier.supplierId}" paginator="true" paginatorPosition="bottom" rows="10">
<p:ajax event="rowEdit" listener="#{supplierUsers.onRowEdit}" update=":form:msgs"/>
<p:ajax event="rowEditCancel" listener="#{supplierUsers.onRowCancel}" update=":form:msgs"/>
<p:column headerText="Id" filterBy="#{supplier.supplierId}" filterMatchMode="contains" sortBy="#{supplier.supplierId}">
<h5>#{supplier.supplierId}</h5>
</p:column>
<p:column headerText="Nombre legal" sortBy="#{supplier.legalName}" filterBy="#{supplier.legalName}" filterMatchMode="contains">
<h:outputText value="#{supplier.legalName}" />
</p:column>
<p:column headerText="Nombre fantasía" sortBy="#{supplier.fantasyName}" filterBy="#{supplier.fantasyName}" filterMatchMode="contains">
<h:outputText value="#{supplier.fantasyName}" />
</p:column>
<p:column headerText="Descripción" sortBy="#{supplier.descprov}" filterBy="#{supplier.descprov}" filterMatchMode="contains">
<h:outputText value="#{supplier.descprov}" />
</p:column>
<p:column headerText="Departamento" sortBy="#{supplier.deptoprov}" filterBy="#{supplier.deptoprov}" filterMatchMode="contains">
<h:outputText value="#{supplier.deptoprov}" />
</p:column>
<p:column headerText="Teléfono" sortBy="#{supplier.phone}" filterBy="#{supplier.phone}" filterMatchMode="contains">
<h:outputText value="#{supplier.phone}" />
</p:column>
<p:column headerText="Email" sortBy="#{supplier.emailprov}" filterBy="#{supplier.emailprov}" filterMatchMode="contains">
<h:outputText value="#{supplier.emailprov}" />
</p:column>
<p:column headerText="RUT" sortBy="#{supplier.rutprov}" filterBy="#{supplier.rutprov}" filterMatchMode="contains">
<h:outputText value="#{supplier.rutprov}" />
</p:column>
<p:column headerText="Dirección" sortBy="#{supplier.address}" filterBy="#{supplier.address}" filterMatchMode="contains">
<h:outputText value="#{supplier.address}" />
</p:column>
<p:column headerText="Estado" sortBy="#{supplier.deleted}" filterBy="#{supplier.deleted}" filterMatchMode="contains">
<p:badge value="#{supplier.deleted ? 'Inactivo' : 'Activo'}"
severity="#{order.deleted ? 'danger' : 'success'}" />
</p:column>
<p:column>
<p:commandButton icon="pi pi-pencil"
update=":dialogs"
styleClass="edit-button rounded-button ui-button-flat"
process="@this"
action="#{supplierUsers.updateDlgEdit()}">
<f:setPropertyActionListener value="#{supplier}" target="#{supplierUsers.selectedSupplier}" />
<p:resetInput target="dialogs:supplier-content" />
</p:commandButton>
<p:commandButton icon="pi pi-trash"
update="form"
styleClass="rounded-button ui-button-info ui-button-flat"
process="@this"
action="#{supplierUsers.updateDlgDelete()}">
<f:setPropertyActionListener value="#{supplier}" target="#{supplierUsers.selectedSupplier}" />
</p:commandButton>
</p:column>
</p:dataTable>
<h:form id="dlgDelete">
<p:confirmDialog id="delete" widgetVar="dlgDelete" showEffect="fade" responsive="true" message="¿Esta seguro que desea eliminar a #{supplierUsers.selectedSupplierConfirm.legalName} #{supplierUsers.selectedSupplierConfirm.fantasyName}?" header="Confirmacion" severity="warn">
<p:commandButton value="Si" icon="pi pi-check"
action="#{supplierUsers.deleteSupplier()}"
ajax="false"
styleClass="ui-button"
process="@this"
update="form"
oncomplete="PF('dlgDelete').hide()" />
<p:commandButton value="No" type="button"
styleClass="ui-button-secondary"
icon="pi pi-times"
onclick="PF('dlgDelete').hide()" />
</p:confirmDialog>
</h:form>
</h:form>
<h:form id="dialogs">
<p:dialog header="Editar Proveedor" showEffect="fade" hideEffect="fade" modal="true" widgetVar="dlgEdit" responsive="true" styleClass="edit-dialog">
<p:panelGrid id="supplier-content" columns="2" layout="grid" columnClasses="labelColumn,valueColumn" class="ui-fluid">
<p:cellEditor>
<f:facet name="output">
<p:outputLabel id="legalName" value="Nombre legal" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{supplierUsers.selectedSupplier.legalName}" style="width: 100%" />
</f:facet>
</p:cellEditor>
<p:cellEditor>
<f:facet name="output">
<p:outputLabel id="fantasyName" value="Nombre fantasia" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{supplierUsers.selectedSupplier.fantasyName}" style="width: 100%" />
</f:facet>
</p:cellEditor>
<p:cellEditor>
<f:facet name="output">
<p:outputLabel id="descprov" value="Descripcion" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{supplierUsers.selectedSupplier.descprov}" style="width: 100%" />
</f:facet>
</p:cellEditor>
<p:cellEditor>
<f:facet name="output">
<p:outputLabel id="deptoprov" value="Departamento" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{supplierUsers.selectedSupplier.deptoprov}" style="width: 100%" />
</f:facet>
</p:cellEditor>
<p:cellEditor>
<f:facet name="output">
<p:outputLabel id="phone" value="Telefono" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{supplierUsers.selectedSupplier.phone}" style="width: 100%" />
</f:facet>
</p:cellEditor>
<p:cellEditor>
<f:facet name="output">
<p:outputLabel id="emailprov" value="Email" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{supplierUsers.selectedSupplier.emailprov}" style="width: 100%" />
</f:facet>
</p:cellEditor>
<p:cellEditor>
<f:facet name="output">
<p:outputLabel id="rutprov" value="RUT" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{supplierUsers.selectedSupplier.rutprov}" style="width: 100%" />
</f:facet>
</p:cellEditor>
<p:cellEditor>
<f:facet name="output">
<p:outputLabel id="address" value="Direccion" />
</f:facet>
<f:facet name="input">
<p:inputText value="#{supplierUsers.selectedSupplier.address}" style="width: 100%" />
</f:facet>
</p:cellEditor>
</p:panelGrid>
<f:facet name="footer">
<p:rowEditor editTitle="Editar Proveedor" cancelTitle="Cancelar Edicion" saveTitle="Guardar proveedor"
styleClass="ui-button"/>
<p:commandButton value="Cancelar" icon="pi pi-times" onclick="PF('dlgEdit').hide()"
class="ui-button-secondary" type="button" />
</f:facet>
</p:dialog>
</h:form>
</div>
</div>
</div>
</ui:define>
</ui:composition>
SupplierUsers.java
@Named(value = "supplierUsers")
@RequestScoped
public class SupplierUsers {
private static final Logger logger = Logger.getLogger(SupplierUsers.class.getName());
@Inject
private IOrderController orderController;
@Inject
private IUserController userController;
@Inject
private SessionPage sessionPage;
private List<SupplierVO> suppliers;
private SupplierVO selectedSupplier;
private SupplierVO selectedSupplierConfirm;
private final String SHOW_DLG_CONFIRM_DELETE = "PF('dlgDelete').show();";
private final String SHOW_DLG_CONFIRM_EDIT = "PF('dlgEdit').show();";
private final String MAIN_FORM_KEY = "form";
public SupplierUsers() {
}
@PostConstruct
public void init() {
suppliers = this.orderController.findAllSuppliers();
}
public void updateDlgDelete() {
this.selectedSupplierConfirm = this.selectedSupplier;
PrimeFaces.current().ajax().update(MAIN_FORM_KEY);
PrimeFaces.current().executeScript(SHOW_DLG_CONFIRM_DELETE);
}
public void updateDlgEdit() {
this.selectedSupplierConfirm = this.selectedSupplier;
PrimeFaces.current().ajax().update(MAIN_FORM_KEY);
PrimeFaces.current().executeScript(SHOW_DLG_CONFIRM_EDIT);
}
public void onRowEdit(RowEditEvent event) {
if (isUserAllowedtoEditOrders()) {
try {
SupplierVO supplier = (SupplierVO) event.getObject();
UserVO user = this.userController.findUserById(sessionPage.getUserVO().getUserID());
orderController.updateSupplier(supplier);
WebUtils.getInstance().displayInfoMessage(
Message.SEVERITY_INFO,
"Éxito",
"El proveedor " + supplier.getLegalName() + " fue actualizado correctamente.");
// Agrega log de usuario
PersonLogVO userLog = new PersonLogVO(
selectedSupplier.getSupplierId(),
LogType.UPDATED_SUPPLIER,
"Se editó un proveedor con RUT: " + selectedSupplier.getRutprov(),
LocalDateTime.now(),
user
);
userController.addUserLog(userLog);
} catch (SupplierNotFoundException ex) {
WebUtils.getInstance().displayInfoMessage(
Message.ERROR,
"Error",
ex.getMessage());
} catch (Exception ex) {
WebUtils.getInstance().displayInfoMessage(
Message.ERROR,
"Error",
"Ocurrió un error al actualizar el proveedor. Por favor, inténtelo de nuevo.");
logger.log(Level.WARNING, "Selected provider: {0}", ex.getMessage());
}
} else {
this.editSuppliersNotAllowed();
}
}
public void onRowCancel(RowEditEvent event) {
SupplierVO supplier = (SupplierVO) event.getObject();
WebUtils.getInstance().displayInfoMessage(
Message.SEVERITY_INFO,
"Edicion cancelada",
"Edicion cancelada para: " + supplier.getLegalName());
}
public void deleteSupplier() {
if (this.isUserAllowedtoDeleteSupplier()) {
try {
this.selectedSupplierConfirm = this.orderController.findSupplierByRut(this.selectedSupplier.getRutprov());
UserVO user = this.userController.findUserById(sessionPage.getUserVO().getUserID());
orderController.deleteSupplier(this.selectedSupplierConfirm.getSupplierId());
WebUtils.getInstance().displayInfoMessage(
Message.SEVERITY_INFO,
"Éxito",
"El proveedor " + selectedSupplierConfirm.getLegalName()
+ " " + selectedSupplierConfirm.getFantasyName() + " fue dado de baja.");
suppliers = orderController.findAllSuppliers();
// Agrega log de usuario
PersonLogVO userLog = new PersonLogVO(
selectedSupplier.getSupplierId(),
LogType.DELETED_SUPPLIER,
"Se da de baja un proveedor con RUT: " + selectedSupplier.getRutprov(),
LocalDateTime.now(),
user
);
userController.addUserLog(userLog);
} catch (SupplierNotFoundException | UserNotFoundException ex) {
WebUtils.getInstance().displayInfoMessage(
Message.ERROR,
"Error",
ex.getMessage());
} catch (Exception ex) {
WebUtils.getInstance().displayInfoMessage(
Message.ERROR,
"Error",
"Ocurrió un error, por favor verifique haber seleccionado correctamente el proveedor");
}
} else {
this.deleteSuppliersNotAllowed();
}
}
private Boolean isUserAllowedtoDeleteSupplier() {
return this.sessionPage.userHasAdminRol() || this.sessionPage.userHasOrderRol();
}
private Boolean isUserAllowedtoEditOrders() {
return this.sessionPage.userHasAdminRol() || this.sessionPage.userHasOrderRol();
}
private void editSuppliersNotAllowed() {
WebUtils.getInstance().displayInfoMessage(
Message.ERROR,
"Error",
"No tiene permisos para editar proveedores.");
}
private void deleteSuppliersNotAllowed() {
WebUtils.getInstance().displayInfoMessage(
Message.ERROR,
"Error",
"No tiene permisos para eliminar proveedores.");
}
public List<SupplierVO> getSuppliers() {
return suppliers;
}
public void setSuppliers(List<SupplierVO> suppliers) {
this.suppliers = suppliers;
}
public SupplierVO getSelectedSupplier() {
return selectedSupplier;
}
public void setSelectedSupplier(SupplierVO selectedSupplier) {
this.selectedSupplier = selectedSupplier;
}
public SupplierVO getSelectedSupplierConfirm() {
return selectedSupplierConfirm;
}
public void setSelectedSupplierConfirm(SupplierVO selectedSupplierConfirm) {
this.selectedSupplierConfirm = selectedSupplierConfirm;
}
}
I change to move the RowEditor in the principal dataTable to the new Edit modal for user experience but the component inside the modal not show correctly.show only a border blue in the left side of the Cancelar button but if the Cancelar button is eliminated the border when run with click not happen nothing.
enter image description here
enter image description here