fund uifund-access

4 files changed, 117 insertions, 36 deletions

diff --git a/src/routes/(app)/fund/[id]/+page.server.ts b/src/routes/(app)/fund/[id]/+page.server.ts
index 9ea33627..a4f402af 100644
--- a/src/routes/(app)/fund/[id]/+page.server.ts
+++ b/src/routes/(app)/fund/[id]/+page.server.ts
@@ -5,6 +5,7 @@ import { redirect } from "@sveltejs/kit";
 export const load = async ({ depends, params: { id }, parent }) => {
 	depends("app:payments");
 	const data = await get(`/fund/${id}`);
+	data.managers = await get(`/fund/${id}/managers`);
 	const rates = await getRates();
 	const { user } = await parent();
 	data.rate = rates[user?.currency || "USD"];
diff --git a/src/routes/(app)/fund/[id]/+page.svelte b/src/routes/(app)/fund/[id]/+page.svelte
index ae0a97c6..6cb3b05d 100644
--- a/src/routes/(app)/fund/[id]/+page.svelte
+++ b/src/routes/(app)/fund/[id]/+page.svelte
@@ -14,7 +14,7 @@
 
   let { data } = $props();
 
-  let { amount, payments, rate, user } = data;
+  let { amount, payments, managers, rate, user } = data;
   let { id } = $page.params;
   let locale = loc(user);
 
@@ -26,10 +26,10 @@
   let show = $state();
   let toggle = () => (show = !show);
   let href = $derived(encodeURIComponent($page.url.href));
-  let withdrawUrl = encoder.encode(
-    `${$page.url.origin}/api/fund/${id}/withdraw`,
-  );
-  let lnurlw = bech32.encode("lnurl", bech32.toWords(withdrawUrl), 20000);
+  // let withdrawUrl = encoder.encode(
+  //   `${$page.url.origin}/api/fund/${id}/withdraw`,
+  // );
+  // let lnurlw = bech32.encode("lnurl", bech32.toWords(withdrawUrl), 20000);
 </script>
 
 <div class="container px-4 max-w-4xl mx-auto mt-10 space-y-5">
@@ -49,11 +49,35 @@
       <div class="flex justify-center gap-4">
         <Amount {amount} {currency} {rate} {locale} />
       </div>
-      <div class="flex">
-        <div>Access: <span class="font-bold">Anyone with the link</span></div>
-        <div class="ml-auto underline text-secondary"><a href={`/fund/${id}/access`}>Manage</a></div>
+      <div class="flex flex-wrap space-y-2 items-center">
+        <div class="grow text-center">
+          <div class="font-bold text-xl">
+            <div>{$t("funds.withdrawAccess")}</div>
+          </div>
+          {#if managers.length}
+            <div class="flex justify-center">
+              {#each managers as c, i}
+                <div class:-ml-3={i > 0}>
+                  <a href={`/pay/${c.username}`} class="contents">
+                    <Avatar user={c} size={12} />
+                  </a>
+                </div>
+              {/each}
+            </div>
+          {:else}
+            <div>{$t("funds.anyone")}</div>
+          {/if}
+        </div>
+
+        <a
+          href={`/fund/${id}/access`}
+          class="btn !w-auto ml-auto text-secondary grow"
+        >
+          <iconify-icon icon="ph:gear-bold" width={32}></iconify-icon>
+          {$t("funds.manage")}
+        </a>
       </div>
-      <div class="flex gap-2" data-sveltekit-prefetch="off">
+      <div class="flex flex-wrap gap-2" data-sveltekit-prefetch="off">
         <div class="grow">
           <a href={`/send/fund/${id}`}>
             <button class="btn">
@@ -63,19 +87,21 @@
             </button>
           </a>
         </div>
-        <div class="grow">
-          <a href={`/fund/${id}/withdraw`}>
-            <button class="btn">
-              <iconify-icon
-                noobserver
-                icon="ph:hand-coins-bold"
-                width="32"
-                flip="horizontal"
-              ></iconify-icon>
-              {$t("payments.takeFunds")}
-            </button>
-          </a>
-        </div>
+        {#if !managers.length || managers.some((m) => m.id === user.id)}
+          <div class="grow">
+            <a href={`/fund/${id}/withdraw`}>
+              <button class="btn">
+                <iconify-icon
+                  noobserver
+                  icon="ph:hand-coins-bold"
+                  width="32"
+                  flip="horizontal"
+                ></iconify-icon>
+                {$t("payments.takeFunds")}
+              </button>
+            </a>
+          </div>
+        {/if}
       </div>
       <div class="flex gap-2" data-sveltekit-prefetch="off">
         <a href={`/qr/${href}`} class="btn !w-auto grow">
@@ -83,15 +109,15 @@
           ></iconify-icon>
           <div class="my-auto">{$t("payments.shareLink")}</div>
         </a>
-        <a href={`/qr/${lnurlw}`} class="btn !w-auto grow">
-          <iconify-icon
-            noobserver
-            icon="ph:lightning-fill"
-            width="24"
-            class="text-yellow-300"
-          ></iconify-icon>
-          {$t("payments.lnurlw")}
-        </a>
+        <!-- <a href={`/qr/${lnurlw}`} class="btn !w-auto grow"> -->
+        <!--   <iconify-icon -->
+        <!--     noobserver -->
+        <!--     icon="ph:lightning-fill" -->
+        <!--     width="24" -->
+        <!--     class="text-yellow-300" -->
+        <!--   ></iconify-icon> -->
+        <!--   {$t("payments.lnurlw")} -->
+        <!-- </a> -->
       </div>
       <Payments {payments} fund={true} {locale} {user} />
     </div>
diff --git a/src/routes/(app)/fund/[id]/access/+page.server.ts b/src/routes/(app)/fund/[id]/access/+page.server.ts
index 9a8a9dbc..c38cb29b 100644
--- a/src/routes/(app)/fund/[id]/access/+page.server.ts
+++ b/src/routes/(app)/fund/[id]/access/+page.server.ts
@@ -1,3 +1,25 @@
-export const load = async () => {
-	return { managers: [] };
+import { auth, fd, get, post } from "$lib/utils";
+import { fail } from "@sveltejs/kit";
+
+export const load = async ({ params: { id } }) => {
+	const managers = await get(`/fund/${id}/managers`);
+	return { managers, id };
+};
+
+export const actions = {
+	default: async ({ cookies, request }) => {
+		const form = await fd(request);
+
+		try {
+			console.log("SUBMITTING", form);
+			const managers = await post("/fund/managers", form, auth(cookies));
+
+			console.log(managers);
+
+			return { managers };
+		} catch (e) {
+			const { message } = e as Error;
+			return fail(400, { message });
+		}
+	},
 };
diff --git a/src/routes/(app)/fund/[id]/access/+page.svelte b/src/routes/(app)/fund/[id]/access/+page.svelte
index 754ddf87..f18d6357 100644
--- a/src/routes/(app)/fund/[id]/access/+page.svelte
+++ b/src/routes/(app)/fund/[id]/access/+page.svelte
@@ -1,8 +1,19 @@
 <script>
+  import { fail, post } from "$lib/utils";
+  import { enhance } from "$app/forms";
+  import { t } from "$lib/translations";
   import Avatar from "$comp/Avatar.svelte";
 
   let { data } = $props();
-  let { managers } = $derived(data);
+  let { id, managers } = $derived(data);
+  let username = $state();
+  let del = async ({ id }) => {
+    try {
+      await post("/post/fund/access/delete", { id });
+    } catch (e) {
+      fail(e.message);
+    }
+  };
 </script>
 
 <div class="container px-4 max-w-4xl mx-auto mt-10 space-y-5">
@@ -15,15 +26,36 @@
       </h1>
 
       {#each managers as c}
-        <a href={`/pay/${c.username}`} class="contents">
-          <div class="flex hover:bg-base-200 p-2">
+        <a href={`/${c.username}`} class="contents">
+          <div class="flex hover:bg-base-200 p-2 items-center">
             <Avatar user={c} size={20} disabled={true} />
             <div class="my-auto text-left">
               <p class="ml-1 text-lg break-words">{c.username}</p>
             </div>
+            <button onclick={() => del(c)} class="ml-auto">
+              <iconify-icon icon="ph:trash-bold" width="32"></iconify-icon>
+            </button>
           </div>
         </a>
       {/each}
+
+      <form method="post" use:enhance class="space-y-2">
+        <input type="hidden" name="id" value={id} />
+        <input
+          name="username"
+          bind:value={username}
+          placeholder={$t("funds.username")}
+        />
+        <button type="submit" class="btn">
+          <iconify-icon icon="ph:plus-bold" width="32"></iconify-icon>
+          {$t("funds.addManager")}
+        </button>
+      </form>
+
+      <a href={`/fund/${id}`} class="btn">
+        <iconify-icon icon="ph:arrow-left-bold" width={32}></iconify-icon>
+        {$t("funds.returnToFund")}</a
+      >
     </div>
   </div>
 </div>