renamed MemberEditor → PermissionEditor

frontend/src/Components/PermissionEditor.svelte

@@ -0,0 +1,62 @@
+<script>
+    import { onMount }        from 'svelte';
+
+    import { api }            from '../urls.svelte.js';
+    import { t }              from '../translations.svelte.js';
+
+    import Autocomplete       from './Autocomplete.svelte';
+    import PermissionSelector from './PermissionSelector.svelte';
+
+    let {
+        addMember        = (entry)    => console.log(`no handler for addMember(${entry})`),
+        dropMember       = (member)   => console.log(`no handler for dropMember(${member})`),
+        getCandidates    = text => {},
+        members,
+        updatePermission = (uid,perm) => console.log(`no handler for updatePermission(${uid}, ${perm})`)
+    } = $props();
+
+    let error         = $state(null);
+    let permissions   = $state(null);
+    let sortedMembers = $derived.by(() => Object.values(members).sort((a, b) => a.user.name.localeCompare(b.user.name)));
+
+    async function loadPermissions(){
+        const url  = api('task/permissions');
+        const 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}
+<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>