@axium/client 0.4.8 → 0.4.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/AccessControlDialog.svelte +71 -4
- package/lib/index.ts +0 -1
- package/package.json +1 -1
- package/lib/AccessControl.svelte +0 -37
|
@@ -1,12 +1,79 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import FormDialog from './FormDialog.svelte';
|
|
3
|
-
import
|
|
3
|
+
import { permissionNames, type AccessControllable } from '@axium/core/access';
|
|
4
|
+
import type { Entries } from 'utilium';
|
|
5
|
+
import UserCard from './UserCard.svelte';
|
|
6
|
+
import type { Permission, AccessControl } from '@axium/core/access';
|
|
7
|
+
import type { User } from '@axium/core';
|
|
4
8
|
|
|
5
|
-
let {
|
|
9
|
+
let {
|
|
10
|
+
item = $bindable(),
|
|
11
|
+
editable,
|
|
12
|
+
dialog = $bindable(),
|
|
13
|
+
}: { item: Required<AccessControllable> & { name?: string; user: User }; editable: boolean; dialog?: HTMLDialogElement } = $props();
|
|
14
|
+
|
|
15
|
+
const permEntries = Object.entries(permissionNames) as any as Entries<typeof permissionNames>;
|
|
16
|
+
|
|
17
|
+
const publicPerm = $derived(permissionNames[item.publicPermission]);
|
|
6
18
|
</script>
|
|
7
19
|
|
|
8
|
-
<FormDialog submitText="Save">
|
|
20
|
+
<FormDialog bind:dialog submitText="Save">
|
|
21
|
+
{#snippet header()}
|
|
22
|
+
{#if item.name}
|
|
23
|
+
<h3>Permissions for <strong>{item.name}</strong></h3>
|
|
24
|
+
{:else}
|
|
25
|
+
<h3>Permissions</h3>
|
|
26
|
+
{/if}
|
|
27
|
+
{/snippet}
|
|
28
|
+
|
|
29
|
+
<div class="AccessControl">
|
|
30
|
+
<UserCard user={item.user} />
|
|
31
|
+
<span>Owner</span>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
9
34
|
{#each item.acl as control}
|
|
10
|
-
<AccessControl
|
|
35
|
+
<div class="AccessControl">
|
|
36
|
+
{#if !control.user}<i>Unknown</i>
|
|
37
|
+
{:else}
|
|
38
|
+
<UserCard user={control.user} />
|
|
39
|
+
{#if editable}
|
|
40
|
+
<input type="hidden" name="userId" value={control.user.id} />
|
|
41
|
+
<select name="permission">
|
|
42
|
+
{#each permEntries as [key, name]}
|
|
43
|
+
<option value={key} selected={key == control.permission}>{name}</option>
|
|
44
|
+
{/each}
|
|
45
|
+
</select>
|
|
46
|
+
{:else}
|
|
47
|
+
<span>{permEntries[control.permission]}</span>
|
|
48
|
+
{/if}
|
|
49
|
+
{/if}
|
|
50
|
+
</div>
|
|
11
51
|
{/each}
|
|
52
|
+
|
|
53
|
+
<div class="AccessControl public">
|
|
54
|
+
<strong>Public Access</strong>
|
|
55
|
+
{#if editable}
|
|
56
|
+
<select name="publicPermission">
|
|
57
|
+
{#each permEntries as [key, name]}
|
|
58
|
+
<option value={key} selected={key == item.publicPermission}>{name}</option>
|
|
59
|
+
{/each}
|
|
60
|
+
</select>
|
|
61
|
+
{:else}
|
|
62
|
+
<span>{publicPerm}</span>
|
|
63
|
+
{/if}
|
|
64
|
+
</div>
|
|
12
65
|
</FormDialog>
|
|
66
|
+
|
|
67
|
+
<style>
|
|
68
|
+
.AccessControl {
|
|
69
|
+
display: grid;
|
|
70
|
+
gap: 1em;
|
|
71
|
+
grid-template-columns: 1fr 10em;
|
|
72
|
+
min-width: 30em;
|
|
73
|
+
padding: 1em 2em;
|
|
74
|
+
|
|
75
|
+
&:not(.public) {
|
|
76
|
+
border-bottom: 1px solid var(--border-accent);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
</style>
|
package/lib/index.ts
CHANGED
package/package.json
CHANGED
package/lib/AccessControl.svelte
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import UserCard from './UserCard.svelte';
|
|
3
|
-
import type { Permission, AccessControl } from '@axium/core/access';
|
|
4
|
-
import { permissionNames } from '@axium/core/access';
|
|
5
|
-
import type { Entries } from 'utilium';
|
|
6
|
-
|
|
7
|
-
const { control, editable }: { control: AccessControl; editable: boolean } = $props();
|
|
8
|
-
|
|
9
|
-
const perm = $derived(permissionNames[control.permission as Permission]);
|
|
10
|
-
|
|
11
|
-
const permEntries = Object.entries(permissionNames) as any as Entries<typeof permissionNames>;
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<div class="AccessControl">
|
|
15
|
-
{#if !control.user}<i>Unknown</i>
|
|
16
|
-
{:else}
|
|
17
|
-
<UserCard user={control.user} />
|
|
18
|
-
{#if editable}
|
|
19
|
-
<input type="hidden" name="userId" value={control.user.id} />
|
|
20
|
-
<select name="permission">
|
|
21
|
-
{#each permEntries as [key, name]}
|
|
22
|
-
<option value={key} selected={key == control.permission}>{name}</option>
|
|
23
|
-
{/each}
|
|
24
|
-
</select>
|
|
25
|
-
{:else}
|
|
26
|
-
<span>{perm}</span>
|
|
27
|
-
{/if}
|
|
28
|
-
{/if}
|
|
29
|
-
</div>
|
|
30
|
-
|
|
31
|
-
<style>
|
|
32
|
-
.AccessControl {
|
|
33
|
-
display: flex;
|
|
34
|
-
gap: 1em;
|
|
35
|
-
padding: 1em 2em;
|
|
36
|
-
}
|
|
37
|
-
</style>
|