pivot-editor/components.js

import { h, render, createContext, Fragment } from 'https://cdn.skypack.dev/preact';
import { useReducer, useState } from 'https://cdn.skypack.dev/preact/hooks';
import { css, cx } from 'https://cdn.skypack.dev/@emotion/css';
import htm from 'https://unpkg.com/htm?module';
const html = htm.bind(h);

let FormPivot = props =>
{
    let pivotColumns = N.Step(Pivot.Schema, "label")||[];
    let pivotColumnsUsed = N.Step(Pivot.Proto, "used-pivot")||[];

    let sumColumns = N.Step(Pivot.Schema, "sum")||[];
    let sumColumnsUsed = N.Step(Pivot.Proto, "used-sum")||[];

    let indiciesPivot = pivotColumnsUsed.map(node=>node.Meta.Index);
    let indiciesSum = sumColumnsUsed.map(node=>node.Meta.Index);
    
    var action;
    if(indiciesPivot.length)
    {
        action = h("p", null, [
            h("span", null, "Build"),
            h("button", {onClick:e=>
            {
                N.Disconnect(Pivot.Proto, null, "used-pivot");
                N.Disconnect(Pivot.Proto, null, "used-sum");
                Pivot.Create(indiciesPivot, indiciesSum);
                Render();
            }
            }, "Create Pivot")
        ]);
    }
    else
    {
        action = h("p", null, "(select columns)")
    }

    return h("div", {}, [
        h("p", null, [

            h("span", null, "Pivot Columns"),
            ...pivotColumns.map( columnLabel =>
            {
                let attributes = {};
                if(N.Step(columnLabel, "used-pivot", false))
                {
                    attributes.disabled = true;
                }
                else
                {
                    attributes.onClick = e=>
                    {
                        N.Connect(Pivot.Proto, columnLabel, "used-pivot");
                        Render();
                    }
                }
                return h("button", attributes, columnLabel.Meta.Label);
            }),

            h("span", null, "Summation Columns"),
            ...sumColumns.map( columnSum =>
            {
                let attributes = {};
                if(N.Step(columnSum, "used-sum", false))
                {
                    attributes.disabled = true;
                }
                else
                {
                    attributes.onClick = e=>
                    {
                        N.Connect(Pivot.Proto, columnSum, "used-sum");
                        Render();
                    }
                }
                return h("button", attributes, columnSum.Meta.Label);
            })
        ]),
        h("p", null, [
            h("span", null, "Current Pivot"),
            ...pivotColumnsUsed.map( columnLabel =>
            {
                return h("button", {onClick:e=>
                {
                    N.Disconnect(Pivot.Proto, columnLabel, "used-pivot");
                    Render();
                }
                }, columnLabel.Meta.Label);
            }),
            h("span", null, "Current Summation"),
            ...sumColumnsUsed.map( columnSum =>
            {
                return h("button", {onClick:e=>
                {
                    N.Disconnect(Pivot.Proto, columnSum, "used-sum");
                    Render();
                }
                }, columnSum.Meta.Label);
            }),
        ]),
        action
    ]);
}

let Section = props =>
{
    let styles = css`
        border-top:1px solid #aaa;
        .Heading
        {
            padding:6px 0 6px 0;
            color:#666;
            font-weight:900;
            font-size:12px;
            text-transform:uppercase;
            cursor:pointer;

            span
            {
                display:inline-block;
                width:20px;
                height:20px;
                margin-right:10px;
                border-radius:20px;
                background:black;
                color:white;
                text-align:center;
            }
        }
        .Heading:hover
        {
            color:black;
        }
        .Body
        {
            margin:10px 0 10px 0;
        }
    `;

    let [openGet, openSet] = useState(false);
    return html`
        <div class=${styles}>
            <div class="Heading" onClick=${e=>openSet(!openGet)}>
                <span>${openGet ? `−` : `+`}</span>
                ${props.label}
            </div>
            ${ openGet ? html`<div class="Body">${props.children}</div>` : null }
        </div>
    `;
}

let Modifier = props =>
{
    let refNode = N.Step(props.modifier, "ModifyAt")[0];

    let handlerClick = () =>
    {
        Pivot.Unmodify(props.modifier);
        Render();
    };

    return html`
    <div>
        <div>${refNode.Meta.Label}</div>
        <button onClick=${handlerClick}>delete</button>
    </div>
    `;
}

let PivotRoot = ({pivot, children}) =>
{

    let stylesRoot = css`
        display:block;
        box-sizing:border-box;
        padding:15px;
        font-family:sans-serif;
    `;
    let stylesHeading = css`
        margin: 0 0 15px 0;
        font-weight:0;
        font-size:24px;
    `;

    let modifiers = N.Step(pivot, "Modifier") || [];

    let handleDelete = ()=>
    {
        Pivot.Delete(pivot);
        Render();
    };

    return html`
    <div class=${stylesRoot}>
        <div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
        <${Section} key="settings" label=${`Settings`}>
            <button onClick=${handleDelete}>Destroy Pivot</button>
        <//>
        <${Section} key="modifiers" label=${`Modifiers (${modifiers.length})`}>
            ${ !modifiers.length ? html`<em>No modifiers</em>` : modifiers.map( m => html`<${Modifier} modifier=${m}/>`)}
        <//>
        <${Section} key="tree" label=${"Tree"}>
            ${children}
        <//>
    </div>
    `;
};

export {Section, PivotRoot};