Skip to content

Instantly share code, notes, and snippets.

@PilotBob
Created July 25, 2018 18:58
Show Gist options
  • Save PilotBob/337a16e1207ed349cdacaa5609c88791 to your computer and use it in GitHub Desktop.
Save PilotBob/337a16e1207ed349cdacaa5609c88791 to your computer and use it in GitHub Desktop.
{#each perms as node}
<li class="folder {node.Granted}">
<a on:click="event.preventDefault()"
href="/#"
title={node.Description}
id={node.RuntimeName}
role="treeitem"
tabindex="0"
aria-selected="true"
aria-level="0" aria-posinset="1" aria-setsize="13" class="hide-focus">
<svg class="icon-tree icon" focusable="false" aria-hidden="true" role="presentation">
<use xlink:href="{node.children ? '#icon-closed-folder' : '#icon-tree-node'}"></use>
</svg>
<span class="tree-checkbox"></span>
<span class="tree-text">{node.Name}</span>
</a>
{#if node.children}
<ul class="folder" role="group">
<svelte:self node='{node.children}' />
</ul>
{/if}
</li>
{/each}
Shape of data like this:
var data = {
perms: [
{
Id: 'Decision.Decision',
Name: 'Decision for Property Management',
RuntimeName: 'Decision.Decision',
Description: 'User can access decision for Property Management',
Granted: '',
children: [],
},
{
Id: 'DecisionJC.Decision',
Name: 'Decision for Construction Management',
RuntimeName: 'DecisionJC.Decision',
Description: 'User can access decision for Construction Management',
Granted: 'is-selected',
children: [{
Id: 'DecisionJC.Decision.Child',
Name: 'Decision Child for Construction Management',
RuntimeName: 'DecisionJC.Decision.Child',
Description: 'User can access decision child for Construction Management',
Granted: '',
},
],
},
]
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment