62 lines
2.0 KiB
Svelte
62 lines
2.0 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { t } from '../translations.svelte.js';
|
|
import Autocomplete from './Autocomplete.svelte';
|
|
import PermissionSelector from './PermissionSelector.svelte';
|
|
let {
|
|
members,
|
|
getCandidates = text => {},
|
|
updatePermission = (uid,perm) => console.log(`no handler for updatePermission(${uid}, ${perm})`),
|
|
dropMember = (member) => console.log(`no handler for dropMember(${member})`),
|
|
addMember = (entry) => console.log(`no handler for addMember(${entry})`)
|
|
} = $props();
|
|
let error = $state(null);
|
|
let sortedMembers = $derived.by(() => Object.values(members).sort((a, b) => a.user.name.localeCompare(b.user.name)));
|
|
|
|
let permissions = $state(null);
|
|
|
|
async function loadPermissions(){
|
|
const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/task/permissions`;
|
|
var resp = await fetch(url,{credentials: 'include'});
|
|
if (resp.ok){
|
|
permissions = await resp.json();
|
|
} else {
|
|
message = await resp.text();
|
|
}
|
|
}
|
|
|
|
function onSelect(entry){
|
|
addMember(entry);
|
|
}
|
|
|
|
onMount(loadPermissions);
|
|
|
|
</script>
|
|
|
|
{#if error}
|
|
<span class="error">{error}</span>
|
|
{/if}
|
|
<fieldset>
|
|
<legend>{t('members')}</legend>
|
|
<table>
|
|
<tbody>
|
|
{#each sortedMembers as member,i}
|
|
<tr>
|
|
<td>{member.user.name}</td>
|
|
<td>
|
|
<PermissionSelector {permissions} selected={member.permission.code} onchange={(perm) => updatePermission(member.user.id,perm)} />
|
|
{#if member.permission.name != 'OWNER'}
|
|
<button onclick={() => dropMember(member)}>x</button>
|
|
{/if}
|
|
</td>
|
|
</tr>
|
|
{/each}
|
|
<tr>
|
|
<td>{t('add_member')}</td>
|
|
<td>
|
|
<Autocomplete {getCandidates} {onSelect} />
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table></fieldset>
|