Create and delete card

backend/handlers/cards.go

@@ -12,15 +12,15 @@ import (
 func CreateCard(c *fiber.Ctx) error {
 	card := types.Card{}
 	if err := c.BodyParser(&card); err != nil {
-		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Cannot parse request"})
+		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"status": "error", "error": "Cannot parse request", "trace": fmt.Sprint(err)})
 	}
 
 	id, err := db.CreateCard(card)
 	if err != nil {
-		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Cannot create card", "trace": fmt.Sprint(err)})
+		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"status": "error", "error": "Cannot create card", "trace": fmt.Sprint(err)})
 	}
 
-	return c.Status(fiber.StatusCreated).JSON(fiber.Map{"id": id})
+	return c.Status(fiber.StatusCreated).JSON(fiber.Map{"status": "ok", "id": id})
 }
 
 func GetAllCardsOf(c *fiber.Ctx) error {
@@ -57,12 +57,12 @@ func GetCard(c *fiber.Ctx) error {
 func DeleteCard(c *fiber.Ctx) error {
 	id, err := strconv.Atoi(c.Params("id"))
 	if err != nil {
-		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Invalid card ID"})
+		return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"status": "error", "error": "Invalid card ID", "trace": fmt.Sprint(err)})
 	}
 
 	err = db.DeleteCard(id)
 	if err != nil {
-		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Cannot delete card"})
+		return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"status": "error", "error": "Cannot delete card", "trace": fmt.Sprint(err)})
 	}
 
 	return c.SendStatus(fiber.StatusNoContent)

frontend/src/components/card.svelte

@@ -12,7 +12,8 @@
 		tags: []
 	};
 
-	let showModal = false;
+	export let showModal = false;
+	export let onDelete: () => void;
 
 	function editCard() {
 		showModal = true;
@@ -49,4 +50,4 @@
 	{/if}
 </div>
 
-<ModalCard bind:show={showModal} {card} onCancel={cancelEdit} />
+<ModalCard bind:show={showModal} bind:card onCancel={cancelEdit} {onDelete} />

frontend/src/components/modal_card.svelte

@@ -7,6 +7,7 @@
 	export let show: boolean;
 	export let card: Card;
 	export let onCancel: () => void;
+	export let onDelete: () => void;
 
 	let tempCard: Card = { ...card };
 
@@ -18,7 +19,7 @@
 				content: tempCard.content
 			});
 
-			card = tempCard;
+			card = { ...tempCard };
 		}
 		if (closeModal) show = false;
 	}
@@ -32,16 +33,24 @@
 			<div class="header">
 				<input class="title" bind:value={tempCard.title} on:blur={() => save(false)} />
 				<div class="buttons">
-					<button on:click={() => save(true)}>
+					<button on:click={onDelete}>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							width="24"
 							height="24"
-							fill="white"
 							viewBox="0 0 24 24"
+							fill="none"
+							stroke="white"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
 						>
-							<path d="M0 0h24v24H0z" fill="none" />
-							<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" />
+							<path d="M3 6h18"></path>
+							<path
+								d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m2-2h10a2 2 0 0 1 2 2v2H5V6a2 2 0 0 1 2-2z"
+							></path>
+							<line x1="10" y1="11" x2="10" y2="17"></line>
+							<line x1="14" y1="11" x2="14" y2="17"></line>
 						</svg>
 					</button>
 					<button on:click={onCancel}>

frontend/src/components/project.svelte

@@ -23,6 +23,45 @@
 			console.error(response.data);
 		}
 	});
+
+	let modalID = -1;
+
+	async function newCard() {
+		const response = await axios.post(`${backend}/api/card`, {
+			project_id: projectId,
+			title: 'Untitled',
+			content: ''
+		});
+
+		if (response.data.status !== 'ok') {
+			console.error(response.data);
+			return;
+		}
+
+		const id: number = response.data.id;
+
+		let card: Card = {
+			id: id,
+			project_id: projectId,
+			title: 'Untitled',
+			content: '',
+			tags: []
+		};
+
+		cards = [...cards, card];
+		modalID = id;
+	}
+
+	async function deleteCard(cardID: number) {
+		const response = await axios.delete(`${backend}/api/card/${cardID}`);
+
+		if (response.status !== 204) {
+			console.error(response.data);
+			return;
+		}
+
+		cards = cards.filter((card) => card.id !== cardID);
+	}
 </script>
 
 <svelte:head>
@@ -33,12 +72,18 @@
 
 {#if project}
 	<div id="project">
-		<h2>{project.title}</h2>
-
+		<header>
+			<h2>{project.title}</h2>
+			<button on:click={newCard}>New card</button>
+		</header>
 		<ul>
 			{#if cards}
 				{#each cards as card}
-					<CardC {card} />
+					<CardC
+						{card}
+						showModal={modalID === card.id}
+						onDelete={async () => await deleteCard(card.id)}
+					/>
 				{/each}
 			{/if}
 		</ul>