API fixes & projects page

backend/handlers/cards.go

@@ -112,5 +112,5 @@ func UpdateCard(c *fiber.Ctx) error {
 		return c.SendStatus(fiber.StatusNotFound)
 	}
 
-	return c.SendStatus(fiber.StatusOK)
+	return c.SendStatus(fiber.StatusNoContent)
 }

frontend/package-lock.json

@@ -18,6 +18,7 @@
 				"@types/eslint": "8.56.0",
 				"@typescript-eslint/eslint-plugin": "^6.0.0",
 				"@typescript-eslint/parser": "^6.0.0",
+				"@zerodevx/svelte-toast": "^0.9.5",
 				"eslint": "^8.56.0",
 				"eslint-config-prettier": "^9.1.0",
 				"eslint-plugin-svelte": "^2.35.1",
@@ -1144,6 +1145,15 @@
 			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
 			"dev": true
 		},
+		"node_modules/@zerodevx/svelte-toast": {
+			"version": "0.9.5",
+			"resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.9.5.tgz",
+			"integrity": "sha512-JLeB/oRdJfT+dz9A5bgd3Z7TuQnBQbeUtXrGIrNWMGqWbabpepBF2KxtWVhL2qtxpRqhae2f6NAOzH7xs4jUSw==",
+			"dev": true,
+			"peerDependencies": {
+				"svelte": "^3.57.0 || ^4.0.0"
+			}
+		},
 		"node_modules/acorn": {
 			"version": "8.11.2",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",

frontend/package.json

@@ -20,6 +20,7 @@
 		"@types/eslint": "8.56.0",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
+		"@zerodevx/svelte-toast": "^0.9.5",
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.35.1",

frontend/src/components/card.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import axios from 'axios';
 	import type { Card } from '../stores/interfaces';
 	import ModalCard from './modal_card.svelte';
 

frontend/src/components/modal_card.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import axios from 'axios';
 	import ModalTags from './modal_tags.svelte';
 	import type { Card } from '../stores/interfaces';
-	import { backend } from '../stores/config';
+	import api, { processError } from '../utils/api';
+	import status from '../utils/status';
 
 	export let show: boolean;
 	export let card: Card;
@@ -11,18 +11,23 @@
 
 	let tempCard: Card = { ...card };
 
-	function save(closeModal: boolean = true) {
+	async function save(closeModal: boolean = true) {
 		if (
 			card.project_id != tempCard.project_id ||
 			card.title !== tempCard.title ||
 			card.content !== tempCard.content
 		) {
-			axios.put(`${backend}/api/v1/cards/${card.id}`, {
+			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;
+			}
+
 			card = { ...tempCard };
 		}
 		if (closeModal) show = false;

frontend/src/components/modal_tag.svelte

@@ -1,31 +1,44 @@
 <script lang="ts">
-	import axios from 'axios';
-	import { backend } from '../stores/config';
 	import type { Tag } from '../stores/interfaces';
+	import api, { processError } from '../utils/api';
+	import status from '../utils/status';
 
 	export let tag: Tag;
 	let newValue: string = tag.value;
 
 	export let removeTag: (id: number) => void;
 
-	function saveTag() {
+	async function saveTag() {
 		if (tag.value === newValue) return;
 		// DELETE
 		if (tag.value !== '' && newValue === '') {
-			axios.delete(`${backend}/api/v1/cards/${tag.card_id}/tags/${tag.tag_id}`);
-			return;
+			const response = await api.delete(`/v1/cards/${tag.card_id}/tags/${tag.tag_id}`);
+
+			if (response.status !== status.NoContent) {
+				processError(response, 'Failed to delete tag');
+				return;
+			}
 		}
 		// CREATE
-		if (tag.value === '' && newValue !== '') {
-			axios.post(`${backend}/api/v1/cards/${tag.card_id}/tags/${tag.tag_id}`, {
+		else if (tag.value === '' && newValue !== '') {
+			const response = await api.post(`/v1/cards/${tag.card_id}/tags/${tag.tag_id}`, {
 				value: newValue
 			});
-			return;
+			if (response.status !== status.Created) {
+				processError(response, 'Failed to create tag');
+				return;
+			}
 		}
 		// UPDATE
-		axios.put(`${backend}/api/v1/cards/${tag.card_id}/tags/${tag.tag_id}`, {
-			value: newValue
-		});
+		else {
+			const response = await api.put(`/v1/cards/${tag.card_id}/tags/${tag.tag_id}`, {
+				value: newValue
+			});
+			if (response.status !== status.NoContent) {
+				processError(response, 'Failed to update tag');
+				return;
+			}
+		}
 
 		tag.value = newValue;
 	}

frontend/src/components/modal_tags.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import axios from 'axios';
 	import ModalTag from './modal_tag.svelte';
-	import { backend } from '../stores/config';
 	import status from '../utils/status';
 	import type { Card } from '../stores/interfaces';
+	import api, { processError } from '../utils/api';
 
 	export let card: Card;
 
@@ -12,13 +11,16 @@
 	async function addTag() {
 		if (newTagName === '') return;
 
-		const response = await axios.post(`${backend}/api/v1/tags`, {
+		const response = await api.post(`/v1/tags`, {
 			project_id: card.project_id,
 			title: newTagName,
 			type: 0
 		});
 
-		if (response.status !== status.Created) return console.error(response);
+		if (response.status !== status.Created) {
+			processError(response, 'Failed to create tag');
+			return;
+		}
 		const id = response.data.id;
 
 		card.tags = [...card.tags, { card_id: card.id, tag_id: id, tag_title: newTagName, value: '' }];

frontend/src/components/project.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import axios from 'axios';
 	import { onMount } from 'svelte';
 	import CardC from './card.svelte';
-	import { backend } from '../stores/config';
 	import { type Project, type Card, parseCards } from '../stores/interfaces';
 	import status from '../utils/status';
+	import api, { processError } from '../utils/api';
 
 	export let projectId: number;
 
@@ -12,30 +11,38 @@
 	let cards: Card[];
 
 	onMount(async () => {
-		let response = await axios.get(`${backend}/api/v1/projects/${projectId}`);
+		let response = await api.get(`/v1/projects/${projectId}`);
+
+		if (response.status !== status.OK) {
+			processError(response, 'Failed to fetch project');
+			return;
+		}
 
 		project = response.data;
 
-		response = await axios.get(`${backend}/api/v1/projects/${projectId}/cards`);
+		response = await api.get(`/v1/projects/${projectId}/cards`, {
+			validateStatus: () => true
+		});
 
 		if (response.status === status.OK) {
 			cards = parseCards(response.data);
 		} else {
-			console.error(response.data);
+			cards = [];
+			processError(response, 'Failed to fetch cards');
 		}
 	});
 
 	let modalID = -1;
 
 	async function newCard() {
-		const response = await axios.post(`${backend}/api/v1/cards`, {
+		const response = await api.post(`/v1/cards`, {
 			project_id: projectId,
 			title: 'Untitled',
 			content: ''
 		});
 
 		if (response.status !== status.Created) {
-			console.error(response.data);
+			processError(response, 'Failed to create card');
 			return;
 		}
 
@@ -54,10 +61,10 @@
 	}
 
 	async function deleteCard(cardID: number) {
-		const response = await axios.delete(`${backend}/api/v1/cards/${cardID}`);
+		const response = await api.delete(`/v2/cards/${cardID}`);
 
 		if (response.status !== status.NoContent) {
-			console.error(response.data);
+			processError(response, 'Failed to delete card');
 			return;
 		}
 

frontend/src/components/selectProject.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	import type { Project } from '../stores/interfaces';
+	import api, { processError } from '../utils/api';
+	import status from '../utils/status';
+
+	export let project: Project;
+	export let deleteProject: (project: Project) => void;
+
+	let edit = false;
+	let newTitle = project.title;
+
+	function focus(el: HTMLElement) {
+		el.focus();
+	}
+
+	async function updateProject() {
+		if (newTitle === project.title) {
+			edit = false;
+			return;
+		}
+
+		const response = await api.put(`/v1/projects/${project.id}`, { title: newTitle });
+
+		if (response.status !== status.NoContent) {
+			processError(response, 'Failed to update project');
+			return;
+		}
+
+		console.log(newTitle);
+
+		project.title = newTitle;
+
+		console.log(project.title);
+
+		edit = false;
+	}
+</script>
+
+<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
+<li>
+	{#if edit}
+		<input
+			type="text"
+			bind:value={newTitle}
+			on:blur={updateProject}
+			on:keydown={(e) => {
+				if (e.key === 'Enter') {
+					updateProject();
+				}
+			}}
+			use:focus
+		/>
+	{:else}
+		<div
+			class="title"
+			on:click={() => (location.href = `/${project.id}`)}
+			on:keydown={(e) => {
+				if (e.key === 'Enter') {
+					location.href = `/${project.id}`;
+				}
+			}}
+			tabindex="0"
+			role="button"
+		>
+			{project.title}
+		</div>
+	{/if}
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
+	<div class="buttons" on:keydown|stopPropagation>
+		{#if !edit}
+			<img
+				src="/img/edit-icon.svg"
+				alt="Edit"
+				class="button"
+				on:click={() => (edit = !edit)}
+				role="button"
+				tabindex="0"
+				on:keydown|stopPropagation={(e) => {
+					if (e.key === 'Enter') {
+						edit = !edit;
+					}
+				}}
+			/>
+		{/if}
+		<img
+			src="/img/delete-icon.svg"
+			alt="Delete"
+			class="button"
+			on:click={() => deleteProject(project)}
+			role="button"
+			tabindex="0"
+			on:keydown={(e) => {
+				if (e.key === 'Enter') {
+					deleteProject(project);
+				}
+			}}
+		/>
+	</div>
+</li>

frontend/src/components/sidebar.svelte

@@ -1,13 +1,56 @@
 <script lang="ts">
-	import { projects } from '../stores/projects';
+	import { onMount } from 'svelte';
+	import api, { processError } from '../utils/api';
+	import type { Project } from '../stores/interfaces';
 
 	let newProject = false;
 	let editProject: number | undefined = undefined;
+	let projects: Project[];
+
+	onMount(async () => {
+		const response = await api.get(`/v1/projects`);
+
+		if (response.status !== 200) {
+			processError(response, 'Failed to fetch projects');
+			return;
+		}
+
+		projects = response.data;
+	});
+
+	async function createProject(project: Project) {
+		const response = await api.post(`/v1/projects`, project);
+
+		if (response.status !== 201) {
+			processError(response, 'Failed to create project');
+			return;
+		}
+
+		project.id = response.data.id;
+
+		projects = [...projects, project];
+	}
+
+	async function updateProject(project: Project) {
+		const response = await api.put(`/v1/projects/${project.id}`, project);
+
+		if (response.status !== 204) {
+			processError(response, 'Failed to update project');
+			return;
+		}
+
+		projects = projects.map((p) => {
+			if (p.id === project.id) {
+				return project;
+			}
+			return p;
+		});
+	}
 
 	function handleKeydown(event: KeyboardEvent, id: number | undefined = undefined) {
 		if (event.key === 'Enter' && event.target) {
 			if (id !== undefined) {
-				projects.edit({
+				updateProject({
 					id: id,
 					title: (event.target as HTMLInputElement).value
 				});
@@ -20,7 +63,7 @@
 	}
 
 	function createNewProject(value: string) {
-		projects.add({
+		createProject({
 			title: value,
 			id: undefined
 		});
@@ -40,42 +83,36 @@
 		</a>
 	</div>
 	<div class="boards">
-		{#await projects.init()}
-			<p>Loading ...</p>
-		{:then}
-			<h2>Projects</h2>
-			{#if $projects}
-				<ul>
-					{#each $projects as project}
-						<li>
-							{#if editProject === project.id}
-								<input
-									type="text"
-									on:keydown={(e) => handleKeydown(e, project.id)}
-									value={project.title}
-									class="edit-input"
-								/>
-							{:else}
-								<a href="/{project.id}">{project.title}</a>
-								<img src="img/edit-icon.svg" alt="" on:click={() => (editProject = project.id)} />
-							{/if}
-						</li>
-					{/each}
-					{#if newProject}
-						<li>
+		<h2>Projects</h2>
+		{#if projects}
+			<ul>
+				{#each projects as project}
+					<li>
+						{#if editProject === project.id && editProject !== undefined}
 							<input
 								type="text"
-								placeholder="Enter project title"
-								on:keydown={handleKeydown}
-								style="padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 100%;"
+								on:keydown={(e) => handleKeydown(e, project.id)}
+								value={project.title}
+								class="edit-input"
 							/>
-						</li>
-					{/if}
-				</ul>
-			{/if}
-		{:catch error}
-			<p>Something went wrong: {error.message}</p>
-		{/await}
+						{:else}
+							<a href="/{project.id}">{project.title}</a>
+							<img src="img/edit-icon.svg" alt="" on:click={() => (editProject = project.id)} />
+						{/if}
+					</li>
+				{/each}
+				{#if newProject}
+					<li>
+						<input
+							type="text"
+							placeholder="Enter project title"
+							on:keydown={handleKeydown}
+							style="padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 100%;"
+						/>
+					</li>
+				{/if}
+			</ul>
+		{/if}
 	</div>
 	<div class="bottom-links">
 		<span on:click={() => (newProject = true)}>New project</span>

frontend/src/routes/+page.svelte

@@ -1,6 +1,77 @@
-<script>
-	import Sidebar from "../components/sidebar.svelte";
+<script lang="ts">
+	import { SvelteToast } from '@zerodevx/svelte-toast';
+	import type { Project } from '../stores/interfaces';
+	import { onMount } from 'svelte';
+	import api, { processError } from '../utils/api';
+	import SelectProject from '../components/selectProject.svelte';
 
+	let projects: Project[];
+
+	onMount(async () => {
+		const response = await api.get(`/v1/projects`);
+
+		if (response.status !== 200) {
+			processError(response, 'Failed to fetch projects');
+			return;
+		}
+
+		projects = response.data || [];
+	});
+
+	async function deleteProject(project: Project) {
+		if (!confirm(`Are you sure you want to delete ${project.title}?`)) {
+			return;
+		}
+		const response = await api.delete(`/v1/projects/${project.id}`);
+
+		if (response.status !== 204) {
+			processError(response, 'Failed to delete project');
+			return;
+		}
+
+		projects = projects.filter((p) => p.id !== project.id);
+	}
+
+	async function createProject() {
+		const response = await api.post(`/v1/projects`, {
+			title: 'New Project'
+		});
+
+		if (response.status !== 201) {
+			processError(response, 'Failed to create project');
+			return;
+		}
+
+		projects = [...projects, response.data];
+	}
 </script>
 
-<Sidebar />
+<svelte:head>
+	<link rel="stylesheet" type="text/css" href="/css/projects.css" />
+</svelte:head>
+
+<section id="projects">
+	<h2>Projects</h2>
+	<ul>
+		{#if projects}
+			{#each projects as project}
+				<SelectProject {project} {deleteProject} />
+			{/each}
+		{/if}
+	</ul>
+	<div
+		id="add"
+		tabindex="0"
+		role="button"
+		on:click={createProject}
+		on:keydown={(e) => {
+			if (e.key === 'Enter') {
+				createProject();
+			}
+		}}
+	>
+		<img src="/img/add-icon.svg" alt="Add" width="30" />
+	</div>
+</section>
+
+<SvelteToast />

frontend/src/routes/[project]/+page.svelte

@@ -2,6 +2,7 @@
 	import Project from '../../components/project.svelte';
 	import Sidebar from '../../components/sidebar.svelte';
 	import { page } from '$app/stores';
+	import { SvelteToast } from '@zerodevx/svelte-toast';
 
 	let projectId: number = +$page.params.project;
 </script>
@@ -10,6 +11,7 @@
 	<Sidebar />
 	<Project {projectId} />
 </div>
+<SvelteToast />
 
 <style>
 	#projectPage {

frontend/src/stores/interfaces.ts

@@ -1,5 +1,7 @@
+import { toastAlert } from "../utils/toasts";
+
 export interface Project {
-    id: number | undefined;
+    id: number;
     title: string;
 }
 
@@ -26,5 +28,16 @@ export function parseCard (c: any) {
 
 export function parseCards (cards: any) {
     if (cards == null) return [];
-    return cards.map(parseCard);
+
+    let cardsArray;
+    try {
+       cardsArray = JSON.parse(cards);
+    } catch (e) {
+        toastAlert('Error', 'Could not parse cards');
+        return [];
+    }
+
+    if (cardsArray == null) return [];
+
+    return cardsArray.map(parseCard);
 }

frontend/src/stores/projects.ts

@@ -1,55 +0,0 @@
-import axios from "axios";
-import { writable } from "svelte/store";
-import { backend } from "./config";
-
-export const projects = getProjects();
-
-interface Project {
-    id: number | undefined,
-    title: string,
-}
-
-function getProjects() {
-    const { subscribe, set, update } = writable([] as Project[]);
-
-    return {
-        subscribe,
-        init: async () => {
-            const response = await axios.get(`${backend}/api/v1/projects`);
-
-            if(response.status < 303) {
-                const data: Project[] = response.data;
-
-                set(data);
-
-                return data;
-            }
-        },
-        add: async (project: Project) => {
-            const response = await axios.post(`${backend}/api/v1/projects`, project);
-
-            if(response.status < 303) {
-                project.id = response.data["id"];
-                update((oldProjects) => {
-                    oldProjects.push(project)
-                    return oldProjects;
-                });
-            }
-        },
-        edit: async (project: Project) => {
-            const response = await axios.put(`${backend}/api/v1/projects/${project.id}`, project)
-        
-            if(response.status < 303) {
-                update((oldProjects: Project[]) => {
-                    for(let p of oldProjects){
-                        if(p.id === project.id){
-                            p.title = project.title;
-                        }
-                    }
-
-                    return oldProjects;
-                });
-            }
-        }
-    }
-}

frontend/src/utils/api.ts

@@ -0,0 +1,31 @@
+import axios, { Axios, type AxiosResponse } from "axios";
+import { backend } from "../stores/config";
+import { toastAlert } from "./toasts";
+
+export default new Axios({
+    ...axios.defaults,
+    baseURL: backend + '/api',
+    validateStatus: () => true,
+    headers: {
+        'Content-Type': 'application/json'
+    },
+});
+
+export function processError (response: AxiosResponse<any, any>, message: string = '') {
+    let title = `${response.status} ${response.statusText}`;
+    let subtitle = message;
+
+    console.log(response.headers)
+
+    if(response.headers["content-type"] === "application/json") {
+        const parsed = response.data;
+        subtitle = parsed.error;
+        if(response.data.trace) {
+            subtitle += '<br><br>' + parsed.trace;
+        }
+    } 
+
+    axios.get(backend + '/api/trace');
+
+    toastAlert(title, subtitle);
+} 

frontend/src/utils/toasts.ts

@@ -0,0 +1,18 @@
+import { toast } from '@zerodevx/svelte-toast';
+
+export function toastAlert(title: string, subtitle: string = '', persistant: boolean = false) {
+    toast.push(
+        `<strong>${title}</strong><br>${subtitle}`,
+        {
+            theme: {
+                '--toastBackground': '#ff4d4f',
+                '--toastBarBackground': '#d32f2f',
+                '--toastColor': '#fff',
+            },
+            initial: persistant ? 0 : 1,
+            next: 0,
+            duration: 10000,
+            pausable: true,
+        },
+    ) 
+}

frontend/static/css/projects.css

@@ -0,0 +1,72 @@
+#projects {
+    margin: 40px;
+}
+
+#projects h2 {
+    text-align: center;
+    margin-bottom: 40px;
+}
+
+#projects ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+#projects li {
+    cursor: pointer;
+    margin: 10px 0;
+    border: 1px solid #555;
+    border-radius: 4px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between
+}
+
+#projects .title {
+    font-weight: bold;
+    padding: 20px;
+    width: 100%;
+}
+
+#projects .title:hover {
+    background-color: #303030;
+}
+
+#projects .buttons {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+}
+
+#projects li img {
+    padding: 20px;
+}
+
+#projects li img:hover {
+    background-color: #333;
+}
+
+#projects input {
+    padding: 20px;
+    width: 100%;
+    background-color: #333;
+    color: inherit;
+    font-weight: bold;
+    font-size: inherit;
+}
+
+#projects #add {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    padding: 20px 0;
+    cursor: pointer;
+}
+
+#projects #add:hover {
+    background-color: #303030;
+}

frontend/static/img/add-icon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke="white" stroke-width="2"
+    stroke-linecap="round" stroke-linejoin="round">
+    <line x1="12" y1="5" x2="12" y2="19"></line>
+    <line x1="5" y1="12" x2="19" y2="12"></line>
+</svg>

frontend/static/img/delete-icon.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white"
+    stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <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>

frontend/static/img/edit-icon.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512">
+<svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 576 512">
     <path
         d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"
-        fill="#aaa" />
+        fill="#fff" />
 </svg>