Frontend cards + backend fix

This commit is contained in:
Brieuc Dubois 2023-12-29 01:49:09 +01:00
parent ef4355e2b6
commit e0056809b3
11 changed files with 148 additions and 28 deletions

View File

@ -27,10 +27,10 @@ func InitDB(driver string, connStr string) error {
);
CREATE TABLE IF NOT EXISTS cards (
id INTEGER PRIMARY KEY AUTOINCREMENT,
list_id INTEGER,
project_id INTEGER,
title TEXT,
content TEXT,
FOREIGN KEY(list_id) REFERENCES lists(id)
FOREIGN KEY(project_id) REFERENCES projects(id)
);
`)
if err != nil {

View File

@ -1,6 +1,7 @@
package handlers
import (
"fmt"
"strconv"
"git.bhasher.com/bhasher/focus/backend/db"
@ -16,24 +17,24 @@ func CreateCards(c *fiber.Ctx) error {
id, err := db.CreateCard(card)
if err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Cannot create card"})
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Cannot create card", "trace": fmt.Sprint(err)})
}
return c.Status(fiber.StatusCreated).JSON(fiber.Map{"id": id})
}
func GetAllCardsOf(c *fiber.Ctx) error {
listID, err := strconv.Atoi(c.Params("project_id"))
projectID, err := strconv.Atoi(c.Params("project_id"))
if err != nil {
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"error": "Invalid project_id"})
return c.Status(fiber.StatusBadRequest).JSON(fiber.Map{"status": "error", "error": "Invalid project_id"})
}
lists, err := db.GetAllListsOf(listID)
projects, err := db.GetAllCardsOf(projectID)
if err != nil {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Cannot retrieve cards"})
}
return c.JSON(lists)
return c.JSON(fiber.Map{"status": "ok", "data": projects})
}
func GetCard(c *fiber.Ctx) error {

View File

@ -1,8 +1,6 @@
package handlers
import (
"fmt"
"git.bhasher.com/bhasher/focus/backend/db"
"git.bhasher.com/bhasher/focus/backend/types"
"github.com/gofiber/fiber/v2"
@ -14,8 +12,6 @@ func GetAllProjects(c *fiber.Ctx) error {
return c.Status(fiber.StatusInternalServerError).JSON(fiber.Map{"error": "Cannot retrieve projects"})
}
fmt.Println(projects)
return c.JSON(projects)
}

View File

@ -30,17 +30,23 @@ func main() {
AllowHeaders: "Origin, Content-Type, Accept",
}))
app.Post("/api/project", handlers.CreateProject)
app.Get("/api/projects", handlers.GetAllProjects)
app.Get("/api/project/:id", handlers.GetProject)
app.Post("/api/project", handlers.CreateProject)
app.Put("/api/project/:id", handlers.UpdateProject)
app.Delete("/api/project/:id", handlers.DeleteProject)
app.Post("/api/list", handlers.CreateList)
app.Get("/api/lists/:board_id", handlers.GetAllListsOf)
app.Get("/api/lists/:project_id", handlers.GetAllListsOf)
app.Get("/api/list/:id", handlers.GetList)
app.Delete("/api/list/:id", handlers.DeleteList)
app.Put("/api/list/:id", handlers.UpdateList)
app.Post("/api/card", handlers.CreateCards)
app.Get("/api/cards/:project_id", handlers.GetAllCardsOf)
app.Get("/api/card/:id", handlers.GetCard)
app.Delete("/api/card/:id", handlers.DeleteCard)
app.Put("/api/card/:id", handlers.UpdateCard)
log.Fatal(app.Listen(fmt.Sprintf(":%v", port)))
}

View File

@ -0,0 +1,25 @@
<script lang="ts">
interface Card {
id: number;
title: string;
content: string;
}
export let card: Card = {
id: 0,
title: 'No title',
content: 'Nocontent'
};
</script>
<svelte:head>
<link rel="stylesheet" type="text/css" href="/css/card.css" />
</svelte:head>
<div class="card" draggable={true}>
<div class="title">{card.title}</div>
<div class="tags">
<span class="tag" style="background-color: #874d45;">HIGH</span>
<span class="tag" style="background-color: #4a8645;">PERSONAL</span>
</div>
</div>

View File

@ -1,9 +1,56 @@
<script lang="ts">
export const projectId: number = 0;
import axios from "axios";
import { onMount } from "svelte";
import Card from "./card.svelte";
export let projectId: number = 0;
const backend = 'http://127.0.0.1:3000';
interface Project {
id: number | undefined,
title: string,
}
interface Card {
id: number,
title: string,
content: string,
}
let project: Project;
let cards: Card[];
onMount(async () => {
let response = await axios.get(`${backend}/api/project/${projectId}`);
project = response.data;
response = await axios.get(`${backend}/api/cards/${projectId}`)
if(response.data.status === "ok") {
cards = response.data.data;
} else {
console.error(response.data)
}
})
</script>
{#if Number.isNaN(projectId)}
<p>Invalid number</p>
{:else}
<p>Hello on dashboard {projectId}!</p>
<svelte:head>
<link rel="stylesheet" type="text/css" href="/css/project.css" />
</svelte:head>
{#if project}
<div id="project">
<h2>{project.title}</h2>
<ul>
{#if cards}
{#each cards as card}
<Card {card} />
{/each}
{/if}
</ul>
</div>
{/if}

View File

@ -1,10 +1,18 @@
<script lang="ts">
import Project from "../../components/project.svelte";
import Sidebar from "../../components/sidebar.svelte";
import Project from '../../components/project.svelte';
import Sidebar from '../../components/sidebar.svelte';
import { page } from '$app/stores';
let projectId: number = +$page.params.project;
</script>
<Sidebar />
<Project {projectId} />
<div id="projectPage">
<Sidebar />
<Project {projectId} />
</div>
<style>
#projectPage {
display: flex;
}
</style>

View File

@ -0,0 +1,31 @@
.card {
padding: 10px;
border-radius: 6px;
border: 1px solid #555;
margin: 10px;
width: 200px;
font-family: "Open Sans", sans-serif;
font-size: 14px;
}
.card:hover{
background-color: #303030;
cursor: pointer;
}
.card .title {
font-weight: normal;
}
.card .tags {
padding-top: 10px;
font-weight: lighter;
}
.card .tag {
padding: 2px 8px;
margin: 4px 4px 0 0;
text-transform: uppercase;
border-radius: 3px;
font-size: 90%;
}

View File

@ -1,8 +1,10 @@
body {
margin: 0;
font-family: "Open sans", sans-serif;
color: white;
background-color: #2b2e30;
* {
margin: 0;
padding: 0;
}
}
body {
font-family: "Open sans", sans-serif;
color: white;
background-color: #252525;
}

View File

@ -0,0 +1,3 @@
#project {
padding: 10px 20px;
}

View File

@ -5,6 +5,7 @@
height: 100vh;
display: flex;
flex-direction: column;
float: left;
}
#sidebar .logo {