New Component: Orgchart

jxmai commented 7 years ago

based on: https://github.com/dabeng/OrgChart (MIT license)

I built this component in my fork (https://github.com/jxmai/core/tree/orgChart ). If you are OK with the concept in general, I need to migrate this component to a separate branch to get to a clean stage before merging since it mixed with another custom component called sDashboard. It will be some work to do on my side.

My goal is to get orgchart to the upstream so that less maintenance work to maintain a custom component.

Any comment is welcome.

tandraschko commented 7 years ago

-1 - we already have a orgchart in PF.

Rapster commented 7 years ago

@jxmai If you have a full working example I'd say +1 then, it's nice to have an alternative

tandraschko commented 7 years ago

We actually decided to minimize duplicate components and better enhance the components directly in PF.

jxmai commented 7 years ago

@Rapster, for the demonstration purpose, I provide a small sample to give you a glimpse of what this orgchart can do.

<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://xmlns.jcp.org/jsf/html"
    xmlns:f="http://xmlns.jcp.org/jsf/core"
    xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:pe="http://primefaces.org/ui/extensions">
<ui:composition>

    <h:head>

    </h:head>

    <h:body>

        <h:form>
            <pe:orgchart id="orgChart"
                        widgetVar="orgChartViewWidget"
                        value="#{orgChartBean.orgChartNode}"
                        draggable="true"
                        exportButton="true"
                        pan="true"
                        parentNodeSymbol="fa-folder-open"
                        zoom="true"
                        exportFileextension="pdf"
                        direction="#{orgChartBean.direction}"
                        toggleSiblingsResp="true"
            >
                <p:ajax event="click" listener="#{orgChartBean.onClick}"></p:ajax>
                <p:ajax event="drop" listener="#{orgChartBean.onDropOver}"></p:ajax>
            </pe:orgchart>
        </h:form>

    </h:body>

</ui:composition>
</html>

import java.io.Serializable;

import javax.annotation.PostConstruct;
import javax.inject.Named;

import org.omnifaces.cdi.ViewScoped;
import org.primefaces.extensions.component.orgchart.DefaultOrgChartNode;
import org.primefaces.extensions.component.orgchart.OrgChartNode;
import org.primefaces.extensions.event.OrgChartClickEvent;
import org.primefaces.extensions.event.OrgChartDropEvent;

@Named("orgChartBean")
@ViewScoped
public class OrgChartBean implements Serializable {

    /**
     * 
     */
    private static final long serialVersionUID = 5030182126944225448L;

    private OrgChartNode orgChartNode;

    private String direction = "t2b";

    @PostConstruct
    public void init() {
        orgChartNode = new DefaultOrgChartNode("id1", "Node1", "content1");
        orgChartNode.addChild(new DefaultOrgChartNode("id2", "Node2", "Content2"));
        orgChartNode.addChild(new DefaultOrgChartNode("id3", "Node3", "Content3"));
        OrgChartNode node = new DefaultOrgChartNode("id4", "Node4", "Content4");
        orgChartNode.addChild(node);
        node.addChild(new DefaultOrgChartNode("id5", "Node5", "Content5"));
        node.addChild(new DefaultOrgChartNode("id6", "Node6", "Content6"));
    }

    public void onClick(OrgChartClickEvent event) {

        System.out.println("clicked ID: " + event.getId());
        System.out.println("hierachy: " + event.getHierarchy().toString());
    }

    public void onDropOver(OrgChartDropEvent event) {

        System.out.println("hierachy: " + event.getHierarchy().toString());
        System.out.println("dragged node id " + event.getDraggedNodeId());
        System.out.println("dropped node id " + event.getDroppedZoneId());
    }

    public OrgChartNode getOrgChartNode() {
        return orgChartNode;
    }

    public void setOrgChartNode(OrgChartNode orgChartNode) {
        this.orgChartNode = orgChartNode;
    }

    public String getDirection() {
        return direction;
    }

    public void setDirection(String direction) {
        this.direction = direction;
    }

}

you can collapse node in all direction.

From demo:

687474703a2f2f646162656e672e6769746875622e696f2f4f726743686172742f6c6f63616c2d64617461736f757263652f7265636f726465722e676966

You can export tree

You can display the tree in different directions.

Left to right

Bottom to top:

And of course, you can always drag and drop as the basic function.

and many more...

@tandraschko I guess the orgchart in PF you mentioned is organigram (https://www.primefaces.org/showcase/ui/data/organigram.xhtml) which is based on the other donated JS library I believe.

Aside from orgchart is more powerful than organigram in many ways, As a PF user, The biggest problem we faced is not to display children as a stack which is really confusing.

and here is your post:

https://forum.primefaces.org/viewtopic.php?f=3&t=50707

What seems to be not a big deal in developer's eye might be actually a showstopper for us, so we decided to integrate a better solution and hopefully get into Primefaces extension library to benefit us and hopefully others in the similar situation.

tandraschko commented 7 years ago

The stacking is by design as it was requested by my customer as displaying it in a row takes to many space. We could also add a flag to control this behavior.

I have no problem to enhance the component but as i said, we should avoid duplicate components.

melloware commented 7 years ago

Just my two cents...

I agree with @tandraschko that we should prevent duplication with PF components however....
sometimes PFE components can be more robust that main PF components only because in PFE we tend to rely on existing mature JQuery plugins where PF has a goal of trying to own and maintain the components 100%
In this case the org chart component @jxmai is using seems REALLY full featured compared to the PF component so that leaves us two choices...

Create the PFE component and just have it as a "different" component than the PF component since it provides more features.
Not create the PFE component and update the PF Organigram to have all the features the https://github.com/dabeng/OrgChart libray has. The problem with that is capacity to do that work and also the skill. Trying to replace an open source API that has had input by many users and has matured over time is never easy to implement yourself from scratch without a lot of time.

So I don't know if that helps or hurts but I like to use PFE as an incubator for PF. Or provide components that aren't license friendly with PF such as CKEditor.

As long as a component is well written and thoughtful i have no problem supporting it in PFE.

jxmai commented 7 years ago

Just to share my thought: I consider PFE as a community driven project that can provide supplement to PF. I don't agree on orgchart and orgranigram are duplicate since they only serve a similar purpose with different feature set. By taking a look at the orgchart created by dabeng https://github.com/dabeng/OrgChart, you will notice it is a really nice jquery library.

Sometimes enhancment is not possible if PF is based on another js library since you can only do so much for what the JS API can provide (For example organigram is donated by http://commercebay.de/ and I am not sure we are allowed to change any of the code ). You can also argue that we should not change js library that might be broken in the next release. By saying enhancement only when I already have another library in use, if you think the other way around, you will see there is little chance to get enhancement but only to force my custom component to spin off from PF community.

Rapster commented 6 years ago

Why don't you make a PR @jxmai?

jxmai commented 6 years ago

@Rapster I thought this component won't be accepted. Alright, I will find some time to finish it regardless.

melloware commented 6 years ago

I did some minor code cleanup and added "extender" property to allow people to configure the OrgChart with the extender similar to Sheet and how PF Charts works. it allows for customization before the Org Chart plugin gets initialized.

primefaces-extensions / primefaces-extensions.github.com

New Component: Orgchart #480