From e2e87ce9eca655b51c68a0efcc8356ed7347ff11 Mon Sep 17 00:00:00 2001
From: Bhasher <github.it@bhasher.com>
Date: Wed, 3 Jan 2024 20:02:36 +0100
Subject: [PATCH] Bugfixes

---
 frontend/src/api/cards.ts                     | 44 ++++++++++++++++++-
 .../components/project/card/modal_card.svelte | 36 +++++++--------
 frontend/src/components/project/column.svelte | 14 +++---
 frontend/src/routes/+page.svelte              | 19 +++++---
 frontend/src/stores/config.ts                 |  2 +-
 frontend/src/stores/smallStore.ts             |  9 +++-
 6 files changed, 87 insertions(+), 37 deletions(-)

diff --git a/frontend/src/api/cards.ts b/frontend/src/api/cards.ts
index fc8819e..105969e 100644
--- a/frontend/src/api/cards.ts
+++ b/frontend/src/api/cards.ts
@@ -16,17 +16,38 @@ export async function newCardApi(projectId: number, tags: TagValue[]): Promise<C
 
 	const id: number = response.data.id;
 
-	tags.forEach((tag) => (tag.card_id = id));
+	const consistant_tags = [];
+
+	for (const tag of tags) {
+		if ((tag.option_id === -1 && tag.value == '') || tag.tag_id === -1) continue;
+		await createCardTagApi(id, tag.tag_id, tag.option_id, tag.value);
+		consistant_tags.push({ ...tag, card_id: id });
+	}
 
 	return {
 		id: id,
 		project_id: projectId,
 		title: 'Untitled',
 		content: '',
-		tags: tags
+		tags: consistant_tags
 	};
 }
 
+export async function updateCardApi(card: Card): Promise<boolean> {
+	const response = await api.put(`/v1/cards/${card.id}`, {
+		project_id: card.project_id,
+		title: card.title,
+		content: card.content
+	});
+
+	if (response.status !== status.NoContent) {
+		processError(response, 'Failed to update card');
+		return false;
+	}
+
+	return true;
+}
+
 export async function deleteCardApi(cardID: number): Promise<void> {
 	const response = await api.delete(`/v1/cards/${cardID}`);
 
@@ -36,6 +57,25 @@ export async function deleteCardApi(cardID: number): Promise<void> {
 	}
 }
 
+export async function createCardTagApi(
+	cardId: number,
+	tagId: number,
+	optionId: number,
+	value: string
+): Promise<boolean> {
+	const response = await api.post(`/v1/cards/${cardId}/tags/${tagId}`, {
+		option_id: optionId,
+		value: value
+	});
+
+	if (response.status !== status.Created) {
+		processError(response, 'Failed to create card tag');
+		return false;
+	}
+
+	return true;
+}
+
 export async function updateCardTagApi(
 	cardID: number,
 	tagID: number,
diff --git a/frontend/src/components/project/card/modal_card.svelte b/frontend/src/components/project/card/modal_card.svelte
index 8c2ffc6..99fa0b4 100644
--- a/frontend/src/components/project/card/modal_card.svelte
+++ b/frontend/src/components/project/card/modal_card.svelte
@@ -1,34 +1,28 @@
 <script lang="ts">
 	import type { Card } from '../../../stores/interfaces';
 	import { currentModalCard, cards } from '../../../stores/smallStore';
-	import api, { processError } from '../../../utils/api';
-	import status from '../../../utils/status';
 	import CloseIcon from '../../icons/closeIcon.svelte';
 	import TrashIcon from '../../icons/trashIcon.svelte';
 	import ModalTags from './modal_tags.svelte';
 
 	export let card: Card;
 
-	let tempCard: Card = { ...card };
+	let newTitle = card.title;
+	let newContent = card.content;
 
 	async function save(closeModal: boolean = true) {
-		if (
-			card.project_id != tempCard.project_id ||
-			card.title !== tempCard.title ||
-			card.content !== tempCard.content
-		) {
-			const response = await api.put(`/v1/cards/${card.id}`, {
-				project_id: tempCard.project_id,
-				title: tempCard.title,
-				content: tempCard.content
-			});
-
-			if (response.status !== status.NoContent) {
-				processError(response, 'Failed to update card');
-				return;
+		if (card.title !== newTitle || card.content !== newContent) {
+			console.log('saving');
+			if (
+				await cards.edit({
+					...card,
+					title: newTitle,
+					content: newContent
+				})
+			) {
+				card.title = newTitle;
+				card.content = newContent;
 			}
-
-			card = { ...tempCard };
 		}
 		if (closeModal) currentModalCard.set(-1);
 	}
@@ -40,7 +34,7 @@
 	<div class="modal" on:click={() => save(true)}>
 		<div class="content" on:click|stopPropagation>
 			<div class="header">
-				<input class="title" bind:value={tempCard.title} on:blur={() => save(false)} />
+				<input class="title" bind:value={newTitle} on:blur={() => save(false)} />
 				<div class="buttons">
 					<button on:click={() => cards.remove(card)}>
 						<TrashIcon />
@@ -55,7 +49,7 @@
 			</div>
 			<div class="body">
 				<textarea
-					bind:value={tempCard.content}
+					bind:value={newContent}
 					placeholder="Add a description"
 					on:blur={() => save(false)}
 				/>
diff --git a/frontend/src/components/project/column.svelte b/frontend/src/components/project/column.svelte
index ddf112f..48ab68a 100644
--- a/frontend/src/components/project/column.svelte
+++ b/frontend/src/components/project/column.svelte
@@ -68,12 +68,14 @@
 	async function addCard() {
 		const tags: TagValue[] = [];
 		for (let tag of Object.values(get(projectTags))) {
-			tags.push({
-				card_id: -1,
-				tag_id: tag.id,
-				option_id: tag.id === option.tag_id ? option.id : -1,
-				value: ''
-			});
+			if (tag.id === option.tag_id) {
+				tags.push({
+					card_id: -1,
+					tag_id: tag.id,
+					option_id: option.id,
+					value: ''
+				});
+			}
 		}
 
 		await cards.add(projectId, tags);
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 008caf3..1a6f48b 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -4,18 +4,25 @@
 	import { onMount } from 'svelte';
 	import api, { processError } from '../utils/api';
 	import SelectProject from '../components/projects/selectProject.svelte';
+	import { toastAlert } from '../utils/toasts';
 
 	let projects: Project[];
 
 	onMount(async () => {
-		const response = await api.get(`/v1/projects`);
+		try {
+			const response = await api.get(`/v1/projects`);
+			if (response.status !== 200) {
+				processError(response, 'Failed to fetch projects');
+				return;
+			}
 
-		if (response.status !== 200) {
-			processError(response, 'Failed to fetch projects');
-			return;
+			projects = response.data || [];
+		} catch (e: any) {
+			toastAlert('Failed to fetch projects', e);
+			setTimeout(() => {
+				window.location.reload();
+			}, 11000);
 		}
-
-		projects = response.data || [];
 	});
 
 	async function deleteProject(project: Project) {
diff --git a/frontend/src/stores/config.ts b/frontend/src/stores/config.ts
index d28fe54..469b0a9 100644
--- a/frontend/src/stores/config.ts
+++ b/frontend/src/stores/config.ts
@@ -1 +1 @@
-export const backend = process.env.BACKEND || 'http://127.0.0.1:3000';
+export const backend = 'http://127.0.0.1:3000';
diff --git a/frontend/src/stores/smallStore.ts b/frontend/src/stores/smallStore.ts
index c591db9..c79a17e 100644
--- a/frontend/src/stores/smallStore.ts
+++ b/frontend/src/stores/smallStore.ts
@@ -1,6 +1,6 @@
 import { writable } from 'svelte/store';
 import { parseCards, type Card, type View, type TagValue } from './interfaces';
-import { deleteCardApi, newCardApi } from '../api/cards';
+import { deleteCardApi, newCardApi, updateCardApi } from '../api/cards';
 import { getProjectCardsAPI } from '../api/projects';
 import api, { processError } from '../utils/api';
 import status from '../utils/status';
@@ -52,6 +52,13 @@ export const cards = (() => {
 				currentModalCard.set(-1);
 			});
 		},
+		edit: async (card: Card): Promise<boolean> => {
+			if (await updateCardApi(card)) {
+				update((cards) => cards.map((c) => (c.id === card.id ? card : c)));
+				return true;
+			}
+			return false;
+		},
 		reload: () => {
 			update((cards) => cards);
 		}