From ec9d8bdb1e3338fce87377fcafad6d07b56f3558 Mon Sep 17 00:00:00 2001
From: "@s.roertgen" <sroertgen@gmail.com>
Date: Wed, 23 Apr 2025 11:35:54 +0200
Subject: [PATCH] Update Cards

---
 src/lib/components/AddCardModal.svelte | 40 +++++++++++++++++++-------
 src/lib/components/Card.svelte         | 16 +++++++----
 src/lib/components/Column.svelte       |  5 ++--
 src/lib/db.js                          | 28 ++++++++++++++++--
 src/lib/ndk.js                         | 36 ++++++++---------------
 5 files changed, 81 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/AddCardModal.svelte b/src/lib/components/AddCardModal.svelte
index b7efc8e..4890d25 100644
--- a/src/lib/components/AddCardModal.svelte
+++ b/src/lib/components/AddCardModal.svelte
@@ -1,17 +1,26 @@
 <script>
-	import { addCard } from '$lib/ndk';
+	import { addCard, eventTitle } from '$lib/ndk';
+	import { ndkStore, replaceTagArray, deleteCard } from '$lib/db';
+	import { NDKEvent } from '@nostr-dev-kit/ndk';
 	import MarkdownEditor from '$lib/components/MarkdownEditor.svelte';
 
 	export let modalRef;
+	export let card = new NDKEvent($ndkStore, {
+		kind: 30045,
+		content: 'Write something awesome here 🌱',
+		tags: [['title', 'Titel']]
+	});
+
+	/** @type {NDKEvent} */
+	export let column;
+
+	let title = eventTitle(card);
 
-	let title = '';
-	let content = 'Write something awesome here 🌱';
 	function handleAddCard() {
-		const card = {
-			title,
-			content
-		};
-		addCard(card);
+		console.log('adding card', card, column);
+		const newTags = replaceTagArray(card.tags, 'title', ['title', title]);
+		card.tags = newTags;
+		addCard(card, column);
 	}
 </script>
 
@@ -22,11 +31,22 @@
 			>Titel
 			<input type="text" bind:value={title} />
 		</label>
-		<MarkdownEditor bind:value={content} />
+		<MarkdownEditor bind:value={card.content} />
 		<div class="modal-action">
 			<form method="dialog">
+				{#if card?.id !== ''}
+					<button class="btn btn-warning m-1" on:click={() => deleteCard(card, column)}
+						>Delete</button
+					>
+				{/if}
 				<button class="btn btn-warning">Close</button>
-				<button class="btn btn-success" on:click={handleAddCard}>Add card</button>
+				<button class="btn btn-success" on:click={handleAddCard}>
+					{#if card?.id !== ''}
+						Update Card
+					{:else}
+						Add card
+					{/if}
+				</button>
 			</form>
 		</div>
 	</div>
diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index 52c8b5f..8b1113b 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -1,17 +1,23 @@
 <script>
 	import { eventTitle } from '$lib/ndk';
+	import { user, selectedColumn } from '$lib/db';
 	import { marked } from 'marked';
+	import AddCardModal from './AddCardModal.svelte';
 
 	export let card;
+	export let column;
 
-	function deleteCard(column, itemId) {
-		const updatedColumnItems = column.items.filter((e) => e.id !== itemId);
-		publishCards({ ...column, items: updatedColumnItems });
+	let addCardModal;
+
+	function handleClick(e) {
+		$selectedColumn = column.dTag;
+		$user?.pubkey && addCardModal.showModal();
 	}
 </script>
 
-<div class="flex flex-col gap-1 rounded-xl border border-none bg-orange-300">
+<div on:click={handleClick} class="flex flex-col gap-1 rounded-xl border border-none bg-orange-300">
 	<h1 class="p-1 text-xl font-bold">{eventTitle(card)}</h1>
 	<p class="p-1">{@html marked.parse(card.content)}</p>
-	<button class="btn btn-warning m-1" on:click={() => deleteCard(column, item.id)}>Delete</button>
 </div>
+
+<AddCardModal bind:modalRef={addCardModal} {card} {column} />
diff --git a/src/lib/components/Column.svelte b/src/lib/components/Column.svelte
index 7a173b9..b68f941 100644
--- a/src/lib/components/Column.svelte
+++ b/src/lib/components/Column.svelte
@@ -1,5 +1,6 @@
 <script>
 	import { dndzone } from 'svelte-dnd-action';
+	import { flip } from 'svelte/animate';
 
 	import Card from './Card.svelte';
 	import PlusCircleFill from '$lib/icons/PlusCircleFill.svelte';
@@ -66,11 +67,11 @@
 		>
 			{#each column.items as item (item?.id ?? item)}
 				<div class="my-1 p-1" animate:flip={{ duration: flipDurationMs }}>
-					<Card card={item} />
+					<Card card={item} {column} />
 				</div>
 			{/each}
 		</div>
 	{/if}
 {/if}
 
-<AddCardModal bind:modalRef={addCardModal} />
+<AddCardModal bind:modalRef={addCardModal} {column} />
diff --git a/src/lib/db.js b/src/lib/db.js
index fb0f0dd..d0ddc59 100644
--- a/src/lib/db.js
+++ b/src/lib/db.js
@@ -1,6 +1,7 @@
 import { writable, derived, get } from 'svelte/store';
-import NDK, { NDKUser } from '@nostr-dev-kit/ndk';
+import NDK, { NDKEvent, NDKUser } from '@nostr-dev-kit/ndk';
 import { columnAddressesFromBoard } from './ndk';
+import { publishCards } from './ndk';
 
 export const events = writable([]);
 
@@ -13,9 +14,7 @@ export const currentBoardAddress = writable('');
 export const currentBoard = derived(
 	[currentBoardAddress, events],
 	([$currentBoardAddress, $events]) => {
-		console.log('looking for current board');
 		const board = get(events).find((e) => e.tagAddress() === $currentBoardAddress);
-		console.log(board);
 		return board;
 	}
 );
@@ -42,6 +41,7 @@ export const columnsForBoard = derived(
 		return cols;
 	}
 );
+// FIXME dTag of selected column
 export const selectedColumn = writable('');
 export const cards = derived(events, ($events) => {
 	const allCards = $events.filter((e) => e.kind === 30045);
@@ -182,3 +182,25 @@ export function deleteColumn(columnId) {
 	const updatedBoardItems = items.filter((e) => e.id !== columnId);
 	publishBoard({ ...$currentBoard, items: updatedBoardItems });
 }
+
+export function replaceTagArray(tags, key, newArray) {
+	const index = tags.findIndex((tag) => tag[0] === key);
+
+	if (index !== -1) {
+		tags[index] = newArray;
+	} else {
+		tags.push(newArray);
+	}
+
+	return tags;
+}
+
+/**
+ * @param {NDKEvent} card
+ * @param {NDKEvent} column
+ */
+export function deleteCard(card, column) {
+	const updatedColumnTags = column.tags.filter((e) => e[1] !== card.tagAddress());
+	column.tags = updatedColumnTags;
+	publishCards(column);
+}
diff --git a/src/lib/ndk.js b/src/lib/ndk.js
index 22d56b4..bbd1793 100644
--- a/src/lib/ndk.js
+++ b/src/lib/ndk.js
@@ -64,20 +64,19 @@ export async function addColumn(column) {
 	existingBoard.publishReplaceable();
 }
 
-export async function addCard(card) {
+/**
+ * @param {NDKEvent} card
+ * @param {NDKEvent} column
+ */
+export async function addCard(card, column) {
 	const ndk = getNdk();
-	const cardEvent = new NDKEvent(ndk, { kind: 30045, content: card.content });
-	cardEvent.tags.push(['title', card.title]);
-	console.log('card event', cardEvent);
-	await cardEvent.publish();
+	const cardEvent = new NDKEvent(ndk, card);
+	console.log('add card event', cardEvent);
+	await cardEvent.publishReplaceable();
 
-	const columnEvent = await ndk.fetchEvent({
-		kinds: [30044],
-		// authors: [cardEvent.pubkey],
-		'#d': [get(selectedColumn)]
-	});
-	columnEvent.tags.push(['a', `${cardEvent.kind}:${cardEvent.pubkey}:${cardEvent.dTag}`]);
-	columnEvent?.publishReplaceable();
+	console.log('column event', column);
+	column.tags.push(['a', `${cardEvent.kind}:${cardEvent.pubkey}:${cardEvent.dTag}`]);
+	column.publishReplaceable();
 }
 
 async function eventTagToCard(eventTag) {
@@ -200,18 +199,7 @@ export async function publishBoard(board) {
 
 export async function publishCards(column) {
 	const ndk = getNdk();
-	const existingColumn = await ndk.fetchEvent({
-		kinds: [30044],
-		// authors: [column.pubkey],
-		ids: [column.id]
-	});
-	const cardIds = column.items.map((e) => e.dTag);
-	let tags = existingColumn.tags.filter((t) => t[0] !== 'a');
-	cardIds.forEach((dTag) => {
-		tags.push(['a', `30045:${column.pubkey}:${dTag}`]);
-	});
-	existingColumn.tags = tags;
-	existingColumn.publishReplaceable();
+	column.publishReplaceable();
 }
 
 /** takes existing tags and replaces the pubkey in the Tag Addresses