Work Breakdown Tool

[GordonJones]

I have a plan/hobby to try to configure Wunderbaum as a project breakdown tool to help with estimating project costs. Project Management is a use case that is hinted at in some of the Wunderbaum online examples. The combination of the tree for work breakdowns and the grid for simple spreadsheet functionality fits that usage really well.

I have hit some issues/difficulties, and I hope I can use this discussion forum to get suggestions as to how to overcome them.
The first is that I would like to render a node's first column as "expander + node.type + node.title." I have tried various approaches to try to achieve this, but have failed. So the first question is can I override the render of the first column without triggering a recursive render stack overflow. I have tried using setTitle(), and setting nodeElem.innertext both in the render callback, but both end up triggering a stack overflow.

Suggestions would be welcome. both for the specific render request, but also views on whether the work breakdown is a desirable objective.

[FreeNAYT]

hello Gordon,

The render function loops over all Wunderbaum columns except the 1st column, the title column (renderColInfosById):
for (const col of Object.values(e.renderColInfosById))

Have you tried looping over ALL the columns in the Wunderbaum (allColInfosById):
for (const col of Object.values(e.allColInfosById))
and testing the title column with the value "*"?

    switch (col.id) {
        case "*": // set title column render

For the same need, I did a quick test by first defining a special style:

    .category-text {
        color: #0066cc !important; /* Blue color for categories */
        font-weight: bold !important; /* Bold text for categories */
    }

Then using this style in the render function.

    for (const col of Object.values(e.allColInfosById)) {
    //                                ---------------
    // Get the data value for this column from the node
    const val = node.data[col.id];
                        
    // Handle different columns based on their ID
    switch (col.id) {
        case "*":
            /*
            * TITLE COLUMN (*): Direct control over title rendering
            * Apply blue-bold styling for categories, normal for products
            */
            const title = node.title || "";
                                
            if (isCategory(node)) {
                // Category: Apply blue-bold styling directly
                _//FREE.NAYT: ugly workaround to apply the bold blue style to the table categories
                //FREE.NAYT:    Is there a better solution than replacing character strings in col.elem.innerHTML ?_
                col.elem.innerHTML = col.elem.innerHTML.replace(title, '<span class="category-text">' + title + '</span>');
                console.log(`Rendered category title: ${title} (blue-bold)`);
            }
            break;

As I've written, the workaround I've applied seems pretty ugly to me and could do with some improvement.
Perhaps Martin can offer some good suggestions.

Hope this helps

[mar10]

One obvious alternative would be to pass the constructed string you want to display as node.title in the first place.
You can also send projectName and projectType with the JSON, which then is avaialble as node.data.projectName, ...

If it comes to styling of a row, depending on the node's type, I would rather send a node.type with each node and define type information with CSS classes.
Using types is also a good way to assign icons.

[GordonJones]

Thank you both for your prompt responses. I am going with Martin's suggestion to KeepItSimpleStupid, and manually put the type and name together to form the title. If I need type specific behaviour later, I'll rethink.

[GordonJones]

FREENAYT's suggestion to style cells based on status leads me to my next comments, which are primarily about styling of nodes based on Node states.

I am intending to use the clone features (key (unique id) and refKey). A node belongs to a set of clones all of which have the same refKey. One node's key will be equal to the refKey, and that node I call a "Master". All the other members of the clone set I call "Slaves". All the data values are processed on the Master node, with the data values being visible also through the slaves. Slaves cannot be edited, nor do they have children. My code has different behaviour depending on the state of the nodes, and I want to reflect that state with the node and icon styles.

I am not sure how best to achieve this, but I think adding and removing css classes on the wb-node div would give the desired effect. I have four significant status values:

isMaster
isSlave
isLeaf
hasChildren

A node's cells can only be edited if the node isMaster and isLeaf, and I plan to use just 2 icons to reflect whether a node is editable or not.

I hope this makes sense. I don't really expect any comments at this stage, unless the use of adding and removing classes on the node div is not going to work because its private to WB.

[GordonJones]

I am making good progress in teaching myself JS and implementing my interactive Work/Cost Breakdown tool using The wonderful Wunderbaum treeGrid.
I am a bit stuck on something.
I have a context menu which is triggered by a right click on the page body element. I used the technique described at the bottom of the events documentation to get to the clicked node. The context menu then offers the ability add child/sibling nodes.
I want to offer the same ability with keyboard shortcuts on the currently selected/active node, but when I intercept the keypress event, I cannot work out how to determine which keys have been pressed. I am sure I am missing something obvious, but some pointers would be very welcome?

Incidentally what is the difference between selected and active, and does it matter?

[GordonJones]

Hello Martin and others. I am having some difficulty with event types and typescript, and I would welcome advice on how to proceed. I have copied code examples from the "edit" page in the documentation - for example the "edit" and "apply" event functions. When I run this copied code in a JS file, it all runs OK. But when I transpile in a TS file, I get complaints that fields dont exist on high level event types. I am guessing I need to import some of the lower level event types and declare the parameters to be lower level types. I have temporarily declared the parameters on the event functions to be "any", but this is not in the spirit of using typescript. So my question is: Can the code examples be more specific about event type declarations expected, and how do I know which types I need, and how do I import them. Sorry if this a naive novice question.

Thanks in advance Gordon Jones