<pe:kanban id="kanban" widgetVar="kanbanWidget" value="#{kanbanController.columns}" draggable="true" addItemButton="true" style="height:400px"> <p:ajax event="drop" listener="#{kanbanController.onDrop}" update="growl" /> <p:ajax event="itemAdd" listener="#{kanbanController.onAddItem}" update="kanban growl" /> <p:ajax event="itemClick" listener="#{kanbanController.onItemClick}" update="dialogContent" oncomplete="PF('itemDialog').show()" /> </pe:kanban> <p:dialog id="dialog" header="Task Details" widgetVar="itemDialog" modal="true" responsive="true" width="400"> <h:panelGroup id="dialogContent" layout="block" styleClass="ui-fluid"> <h:panelGroup rendered="#{not empty kanbanController.selectedItem}"> <div class="field mb-3"> <p:outputLabel for="title" value="Title" styleClass="font-bold block mb-1" /> <p:inputText id="title" value="#{kanbanController.selectedItem.title}" required="true" /> </div> <div class="field mb-3"> <p:outputLabel for="desc" value="Description" styleClass="font-bold block mb-1" /> <p:inputTextarea id="desc" value="#{kanbanController.selectedItem.description}" rows="3" /> </div> <div class="flex justify-content-end gap-2 mt-4"> <p:commandButton value="Save" action="#{kanbanController.saveItem}" update="kanban growl" oncomplete="PF('itemDialog').hide()" styleClass="ui-button-primary mr-2" /> <p:commandButton value="Cancel" onclick="PF('itemDialog').hide()" type="button" styleClass="ui-button-secondary" /> </div> </h:panelGroup> </h:panelGroup> </p:dialog>
@Named @ViewScoped public class KanbanController implements Serializable { private static final long serialVersionUID = 1L; private List<KanbanColumn> columns; private KanbanItem selectedItem; private String selectedColumnId; @PostConstruct public void init() { columns = new ArrayList<>(); KanbanColumn todoColumn = new KanbanColumn("todo", "To Do"); todoColumn.setCssClass("kanban-todo"); todoColumn.addItem(new KanbanItem("item1", "Add support for Kanban", "Create a new Kanban component for PrimeFaces Extensions")); todoColumn.addItem(new KanbanItem("item2", "Write documentation", "Document the new component")); KanbanColumn inProgressColumn = new KanbanColumn("inprogress", "In Progress"); inProgressColumn.setCssClass("kanban-inprogress"); inProgressColumn.addItem(new KanbanItem("item3", "Design component", "Design the Kanban board component")); KanbanColumn doneColumn = new KanbanColumn("done", "Done"); doneColumn.setCssClass("kanban-done"); doneColumn.addItem(new KanbanItem("item4", "Research libraries", "Research available Kanban libraries")); columns.add(todoColumn); columns.add(inProgressColumn); columns.add(doneColumn); } public void onDrop(KanbanDragEvent event) { FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Moved", "Item " + event.getItemId() + " moved from " + event.getSourceColumnId() + " to " + event.getTargetColumnId() + " at position " + event.getNewPosition()); FacesContext.getCurrentInstance().addMessage(null, message); } public void onAddItem(KanbanAddEvent event) { for (KanbanColumn column : columns) { if (column.getId().equals(event.getColumnId())) { int count = column.getItems().size() + 1; column.addItem(new KanbanItem("new-" + count, "New Task " + count, "Click to edit this task")); break; } } FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Added", "New item added to column " + event.getColumnId()); FacesContext.getCurrentInstance().addMessage(null, message); } public void onItemClick(KanbanItemClickEvent event) { String itemId = event.getItemId(); String columnId = event.getColumnId(); for (KanbanColumn col : columns) { if (col.getId().equals(columnId)) { for (KanbanItem item : col.getItems()) { if (item.getId().equals(itemId)) { this.selectedItem = item; this.selectedColumnId = columnId; break; } } } } FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Clicked", "Loaded task: " + (selectedItem != null ? selectedItem.getTitle() : itemId)); FacesContext.getCurrentInstance().addMessage(null, message); } public void saveItem() { if (selectedItem != null) { FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Item Updated", "Updated task: " + selectedItem.getTitle()); FacesContext.getCurrentInstance().addMessage(null, message); } } public List<KanbanColumn> getColumns() { return columns; } public void setColumns(List<KanbanColumn> columns) { this.columns = columns; } public KanbanItem getSelectedItem() { return selectedItem; } public void setSelectedItem(KanbanItem selectedItem) { this.selectedItem = selectedItem; } public String getSelectedColumnId() { return selectedColumnId; } public void setSelectedColumnId(String selectedColumnId) { this.selectedColumnId = selectedColumnId; } }