@axium/client 0.7.0 → 0.8.0

package/dist/access.d.ts

@@ -0,0 +1,3 @@
+import type { AccessControl, AccessMap } from '@axium/core';
+export declare function setACL(itemType: string, itemId: string, data: AccessMap): Promise<AccessControl[]>;
+export declare function getACL(itemType: string, itemId: string): Promise<AccessControl[]>;

package/dist/access.js

@@ -0,0 +1,9 @@
+import { fetchAPI } from './requests.js';
+export async function setACL(itemType, itemId, data) {
+    if ('public' in data)
+        data.public = parseInt(data.public.toString());
+    return await fetchAPI('POST', 'acl/:itemType/:itemId', data, itemType, itemId);
+}
+export async function getACL(itemType, itemId) {
+    return await fetchAPI('GET', 'acl/:itemType/:itemId', {}, itemType, itemId);
+}

package/lib/AccessControlDialog.svelte

@@ -1,24 +1,37 @@
 <script lang="ts">
-	import type { User } from '@axium/core';
-	import { permissionNames, type AccessControllable } from '@axium/core/access';
+	import type { AccessMap, User } from '@axium/core';
+	import { permissionNames, type AccessControllable, type AccessControl } from '@axium/core/access';
 	import type { Entries } from 'utilium';
 	import FormDialog from './FormDialog.svelte';
 	import UserCard from './UserCard.svelte';
+	import { userInfo } from '@axium/client/user';
+	import { getACL, setACL } from '@axium/client/access';
 
-	let {
-		item = $bindable(),
-		editable,
-		dialog = $bindable(),
-	}: { item: Required<AccessControllable> & { name?: string; user: User }; editable: boolean; dialog?: HTMLDialogElement } = $props();
+	interface Props {
+		editable: boolean;
+		dialog?: HTMLDialogElement;
+		itemType: string;
+		item?: ({ name?: string; user?: User; id: string } & AccessControllable) | null;
+		acl?: AccessControl[];
+	}
+	let { item = $bindable(), itemType, editable, dialog = $bindable(), acl = $bindable(item?.acl) }: Props = $props();
+
+	if (!acl && item) getACL(itemType, item.id).then(fetched => (acl = item.acl = fetched));
 
 	const permEntries = Object.entries(permissionNames) as any as Entries<typeof permissionNames>;
 
-	const publicPerm = $derived(permissionNames[item.publicPermission]);
+	const publicPerm = $derived(permissionNames[item?.publicPermission || 0]);
 </script>
 
-<FormDialog bind:dialog submitText="Save">
+<FormDialog
+	bind:dialog
+	submitText="Save"
+	submit={async data => {
+		if (item) await setACL(itemType, item.id, data as any as AccessMap);
+	}}
+>
 	{#snippet header()}
-		{#if item.name}
+		{#if item?.name}
 			<h3>Permissions for <strong>{item.name}</strong></h3>
 		{:else}
 			<h3>Permissions</h3>
@@ -26,18 +39,21 @@
 	{/snippet}
 
 	<div class="AccessControl">
-		<UserCard user={item.user} />
+		{#if item?.user}
+			<UserCard user={item.user} />
+		{:else if item}
+			{#await userInfo(item.userId) then user}<UserCard {user} />{/await}
+		{/if}
 		<span>Owner</span>
 	</div>
 
-	{#each item.acl as control}
+	{#each acl ?? [] as control}
 		<div class="AccessControl">
 			{#if !control.user}<i>Unknown</i>
 			{:else}
 				<UserCard user={control.user} />
 				{#if editable}
-					<input type="hidden" name="userId" value={control.user.id} />
-					<select name="permission">
+					<select name={control.userId}>
 						{#each permEntries as [key, name]}
 							<option value={key} selected={key == control.permission}>{name}</option>
 						{/each}
@@ -51,8 +67,8 @@
 
 	<div class="AccessControl public">
 		<strong>Public Access</strong>
-		{#if editable}
-			<select name="publicPermission">
+		{#if editable && item}
+			<select name="public">
 				{#each permEntries as [key, name]}
 					<option value={key} selected={key == item.publicPermission}>{name}</option>
 				{/each}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/client",
-	"version": "0.7.0",
+	"version": "0.8.0",
 	"author": "James Prevett <jp@jamespre.dev>",
 	"funding": {
 		"type": "individual",