17 changed files with 169 additions and 34 deletions
@ -0,0 +1,42 @@ |
|||||||
|
<script> |
||||||
|
import { onMount } from 'svelte'; |
||||||
|
import { t } from '../translations.svelte.js'; |
||||||
|
import PermissionSelector from './PermissionSelector.svelte'; |
||||||
|
let { members, updatePermission = (uid,perm) => console.log({user:uid,perm:perm}) } = $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(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
onMount(loadPermissions); |
||||||
|
|
||||||
|
</script> |
||||||
|
|
||||||
|
{#if error} |
||||||
|
<span class="error">{error}</span> |
||||||
|
{/if} |
||||||
|
<table> |
||||||
|
<tbody> |
||||||
|
{#each sortedMembers as member,i} |
||||||
|
<tr> |
||||||
|
{#if !i} |
||||||
|
<th rowspan={sortedMembers.length}>{t('members')}</th> |
||||||
|
{/if} |
||||||
|
<td>{member.user.name}</td> |
||||||
|
<td> |
||||||
|
<PermissionSelector {permissions} selected={member.permission.code} onchange={(perm) => updatePermission(member.user.id,perm)} /> |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
{/each} |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
@ -0,0 +1,26 @@ |
|||||||
|
<script> |
||||||
|
import {onMount} from 'svelte'; |
||||||
|
import {t} from '../translations.svelte.js'; |
||||||
|
let { |
||||||
|
caption = t('select_permission'), |
||||||
|
selected = $bindable(0), |
||||||
|
onchange = (val) => console.log('changed to',val), |
||||||
|
permissions = null |
||||||
|
} = $props(); |
||||||
|
|
||||||
|
function onSelect(newVal){ |
||||||
|
onchange({name:permissions[newVal],code:newVal}); |
||||||
|
} |
||||||
|
|
||||||
|
let message = $state(t('loading')); |
||||||
|
</script> |
||||||
|
|
||||||
|
{#if permissions} |
||||||
|
<select bind:value={selected} onchange={() => onSelect(selected)}> |
||||||
|
{#each Object.entries(permissions) as [k,perm]} |
||||||
|
<option value={+k}>{t('permission_'+perm.toLowerCase())}</option> |
||||||
|
{/each} |
||||||
|
</select> |
||||||
|
{:else} |
||||||
|
<span>{message}</span> |
||||||
|
{/if} |
||||||
Loading…
Reference in new issue