column visibility

This commit is contained in:
TreetopFlyer 2021-05-29 16:04:38 -04:00
parent ba14ee656c
commit ede7f35c87

View File

@ -713,7 +713,6 @@ let ModificationsIcon = ({node}) =>
let PivotBranch = props =>
{
let row = props.node.Meta.Row;
let displayCells = row.map(column=>h("td", null, column));
let displayCellsModify = row.map(column=>false);
props.node.Meta.IndexSum.forEach(i=>
{
@ -727,6 +726,20 @@ let PivotBranch = props =>
}
});
let displayCells = (node, visible) =>
{
let output = [];
node.Meta.Row.forEach((column, i)=>
{
if(visible[i])
{
output.push( h("td", null, column) );
}
}
);
return output;
}
let stylesLeaf = css`
background:#ddd;
color:#333;
@ -741,7 +754,7 @@ let PivotBranch = props =>
<td>
<${ModificationsIcon} node=${props.node}><//>
</td>
${displayCells}
${displayCells(props.node, props.visible)}
</tr>
${(N.Step(props.node, "Leaf")||[]).map(leaf =>
{
@ -749,9 +762,7 @@ let PivotBranch = props =>
<tr class=${stylesLeaf}>
<td></td>
<td><${ModificationsIcon} node=${leaf}><//></td>
${
leaf.Meta.Row.map(column=>h("td", null, column))
}
${displayCells(leaf, props.visible)}
</tr>
`;
}
@ -763,6 +774,9 @@ let PivotBranch = props =>
let PivotRoot = ({pivot}) =>
{
let labels = (N.Step(Pivot.Schema, "all")||[]).map(column => column.Meta.Label);
let [visibleGet, visibleSet] = useState(labels.map(column=>true));
let stylesRoot = css`
display:block;
box-sizing:border-box;
@ -784,13 +798,36 @@ let PivotRoot = ({pivot}) =>
let rows = [];
N.ID.Walk++;
N.Walk(n=>rows.push(h(PivotBranch, {node:n}, null)), pivot, "Hierarchy");
N.Walk(n=>rows.push(h(PivotBranch, {node:n, visible:visibleGet}, null)), pivot, "Hierarchy");
return html`
<div class=${stylesRoot}>
<div key="heading" class=${stylesHeading}>${pivot.Meta.Label}</div>
<${Section} key="settings" label=${`Settings`}>
<h3>pivot</h3>
<button onClick=${handleDelete}>Destroy Pivot</button>
<h3>columns</h3>
<div>
<button onClick=${e =>
{
visibleSet(visibleGet.map(v=>true))
}
}>Show All</button>
<button onClick=${e =>
{
visibleSet(visibleGet.map(v=>false))
}
}>Hide All</button>
</div>
<div>
${visibleGet.map((v, i) => html`<button onClick=${e=>
{
let clone = [...visibleGet];
clone[i] = !v;
visibleSet(clone);
}
}>${labels[i]} ${v ? `visible`:`hidden`}</button>`)}
</div>
<//>
<${Section} key="tree" label=${"Tree"}>
<table>