<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<>();
// To Do column
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"));
// In Progress column
KanbanColumn inProgressColumn = new KanbanColumn("inprogress", "In Progress");
inProgressColumn.setCssClass("kanban-inprogress");
inProgressColumn.addItem(new KanbanItem("item3", "Design component",
"Design the Kanban board component"));
// Done column
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;
}
}