<script>
	import {Meteor} from "meteor/meteor";
	import TestUsers from "./TestUsers.svelte";
	import {writable} from "svelte/store";

	$: users = Meteor.users.find({});


	const columns = [
		{
			key: "_id",
			title: "ID",
			value: v => v._id,
			minWidth: 20,
			weight: 1,
			cls: "id",
		}, {
			key: "name",
			title: "Name",
			value: v => v.profile.name,
			minWidth: 100,
			weight: 1,
			cls: "name",
		}, {
			key: "roles",
			title: "Roles",
			value: user => {
				return Roles.getRolesForUser(user, {anyScope: true});
			},
			minWidth: 150,
			weight: 2,
			cls: "roles",
		}
	];

	const getRowKey = user => {return user._id;}
	let edited = writable(null);
</script>

{#await Meteor.subscribe('allUsers')}
	Loading...
{:then allUsers}
	<TestUsers bind:rows="{users}" columns="{columns}" rowKey="{getRowKey}" bind:edited={edited}>
		{#if $edited}
		<input type="text" bind:value={$edited.profile.name}/>
		{/if}
	</TestUsers>
{:catch error}
	{error.message}
{/await}
