From 16996de5322cc9292d0d110745aa4a93224a55f9 Mon Sep 17 00:00:00 2001 From: Bhasher Date: Sun, 31 Dec 2023 17:50:04 +0100 Subject: [PATCH] Reformat project frontend --- frontend/src/api/cards.ts | 2 +- frontend/src/components/card.svelte | 28 ++---- frontend/src/components/column.svelte | 14 +-- .../src/components/icons/closeIcon.svelte | 6 ++ .../src/components/icons/trashIcon.svelte | 17 ++++ frontend/src/components/modal_card.svelte | 50 +++-------- frontend/src/components/modal_tags.svelte | 2 +- frontend/src/components/project.svelte | 75 ++++++---------- frontend/src/components/sidebar.svelte | 2 +- frontend/src/stores/currentModalCard.ts | 3 - frontend/src/stores/currentView.ts | 4 - frontend/src/stores/interfaces.ts | 90 +++++++++---------- frontend/src/stores/smallStore.ts | 33 +++++++ 13 files changed, 152 insertions(+), 174 deletions(-) create mode 100644 frontend/src/components/icons/closeIcon.svelte create mode 100644 frontend/src/components/icons/trashIcon.svelte delete mode 100644 frontend/src/stores/currentModalCard.ts delete mode 100644 frontend/src/stores/currentView.ts create mode 100644 frontend/src/stores/smallStore.ts diff --git a/frontend/src/api/cards.ts b/frontend/src/api/cards.ts index 4857f1a..d2f4522 100644 --- a/frontend/src/api/cards.ts +++ b/frontend/src/api/cards.ts @@ -18,7 +18,7 @@ export async function newCardApi(projectId: number): Promise { return { id: id, - project_id: projectId, + projectId: projectId, title: 'Untitled', content: '', tags: [] diff --git a/frontend/src/components/card.svelte b/frontend/src/components/card.svelte index 61a3613..716d3cc 100644 --- a/frontend/src/components/card.svelte +++ b/frontend/src/components/card.svelte @@ -1,35 +1,23 @@
($currentModalCard = card.id)} role="button" - on:keydown={editCardHandler} + on:keydown={(e) => { + if (e.key === 'Enter') { + $currentModalCard = card.id; + } + }} >
{card.title}
{#if card.tags} @@ -49,4 +37,4 @@ {/if}
- + diff --git a/frontend/src/components/column.svelte b/frontend/src/components/column.svelte index 4cacb92..1fbc267 100644 --- a/frontend/src/components/column.svelte +++ b/frontend/src/components/column.svelte @@ -2,21 +2,15 @@ import type { Card, TagOption } from '../stores/interfaces'; import CardC from './card.svelte'; - export let tag_id: number; - export let option: TagOption; + export let title: string; export let cards: Card[] = []; - export let deleteCard: (id: number) => void; - - let columnCards = cards.filter( - (card) => card.tags.find((t) => t.tag_id === tag_id)?.option_id === option.id - );
-

{option.value}

+

{title}

    - {#each columnCards as card} - await deleteCard(card.id)} /> + {#each cards as card} + {/each}
diff --git a/frontend/src/components/icons/closeIcon.svelte b/frontend/src/components/icons/closeIcon.svelte new file mode 100644 index 0000000..92b1451 --- /dev/null +++ b/frontend/src/components/icons/closeIcon.svelte @@ -0,0 +1,6 @@ + + + + diff --git a/frontend/src/components/icons/trashIcon.svelte b/frontend/src/components/icons/trashIcon.svelte new file mode 100644 index 0000000..2ffab27 --- /dev/null +++ b/frontend/src/components/icons/trashIcon.svelte @@ -0,0 +1,17 @@ + + + + + + diff --git a/frontend/src/components/modal_card.svelte b/frontend/src/components/modal_card.svelte index 36205de..3e9f569 100644 --- a/frontend/src/components/modal_card.svelte +++ b/frontend/src/components/modal_card.svelte @@ -3,22 +3,22 @@ import type { Card } from '../stores/interfaces'; import api, { processError } from '../utils/api'; import status from '../utils/status'; + import { cards, currentModalCard } from '../stores/smallStore'; + import TrashIcon from './icons/trashIcon.svelte'; + import CloseIcon from './icons/closeIcon.svelte'; - export let show: boolean; export let card: Card; - export let onCancel: () => void; - export let onDelete: () => void; let tempCard: Card = { ...card }; async function save(closeModal: boolean = true) { if ( - card.project_id != tempCard.project_id || + card.projectId != tempCard.projectId || card.title !== tempCard.title || card.content !== tempCard.content ) { const response = await api.put(`/v1/cards/${card.id}`, { - project_id: tempCard.project_id, + project_id: tempCard.projectId, title: tempCard.title, content: tempCard.content }); @@ -30,11 +30,11 @@ card = { ...tempCard }; } - if (closeModal) show = false; + if (closeModal) currentModalCard.set(-1); } -{#if show} +{#if $currentModalCard == card.id}
save(true)}> @@ -42,39 +42,11 @@
save(false)} />
- -
diff --git a/frontend/src/components/modal_tags.svelte b/frontend/src/components/modal_tags.svelte index 3d2de37..bded95d 100644 --- a/frontend/src/components/modal_tags.svelte +++ b/frontend/src/components/modal_tags.svelte @@ -12,7 +12,7 @@ if (newTagName === '') return; const response = await api.post(`/v1/tags`, { - project_id: card.project_id, + project_id: card.projectId, title: newTagName, type: 0 }); diff --git a/frontend/src/components/project.svelte b/frontend/src/components/project.svelte index 72b85d3..fd75df6 100644 --- a/frontend/src/components/project.svelte +++ b/frontend/src/components/project.svelte @@ -1,18 +1,16 @@ @@ -85,40 +74,26 @@

{project.title}

- {#if view && $projectTags[view.primary_tag_id]} + {#if view && $projectTags[view.primary_tag_id] && $cards}
{#each $projectTags[view.primary_tag_id].options as option} - + c.tags.map((t) => t.option_id).includes(option.id))} + /> {/each} + c.tags.find((t) => t.tag_id)?.option_id == -1 || false)} + />
- {:else} - {/if}
{/if} diff --git a/frontend/src/components/sidebar.svelte b/frontend/src/components/sidebar.svelte index 18897e9..63569d3 100644 --- a/frontend/src/components/sidebar.svelte +++ b/frontend/src/components/sidebar.svelte @@ -2,7 +2,7 @@ import { onMount } from 'svelte'; import api, { processError } from '../utils/api'; import type { View } from '../stores/interfaces'; - import currentView from '../stores/currentView'; + import { currentView } from '../stores/smallStore'; export let projectID: number; let views: View[]; diff --git a/frontend/src/stores/currentModalCard.ts b/frontend/src/stores/currentModalCard.ts deleted file mode 100644 index d11ff9d..0000000 --- a/frontend/src/stores/currentModalCard.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { writable } from 'svelte/store'; - -export default writable(-1); diff --git a/frontend/src/stores/currentView.ts b/frontend/src/stores/currentView.ts deleted file mode 100644 index 791ce7f..0000000 --- a/frontend/src/stores/currentView.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { writable } from "svelte/store"; -import type { View } from "./interfaces"; - -export default writable(null as View | null); \ No newline at end of file diff --git a/frontend/src/stores/interfaces.ts b/frontend/src/stores/interfaces.ts index f6c41ea..155ceed 100644 --- a/frontend/src/stores/interfaces.ts +++ b/frontend/src/stores/interfaces.ts @@ -1,68 +1,68 @@ -import { toastAlert } from "../utils/toasts"; +import { toastAlert } from '../utils/toasts'; export interface Project { - id: number; - title: string; + id: number; + title: string; } export interface Card { - id: number; - project_id: number; - title: string; - content: string; - tags: TagValue[]; + id: number; + projectId: number; + title: string; + content: string; + tags: TagValue[]; } export interface TagValue { - card_id: number; - tag_id: number; - option_id: number; - value: string; + card_id: number; + tag_id: number; + option_id: number; + value: string; } export interface MeTag { - id: number; - project_id: number; - title: string; - type: number; - options: TagOption[]; + id: number; + project_id: number; + title: string; + type: number; + options: TagOption[]; } export interface TagOption { - id: number; - tag_id: number; - value: string; + id: number; + tag_id: number; + value: string; } export interface View { - id: number; - project_id: number; - primary_tag_id: number; - secondary_tag_id: number; - title: string; + id: number; + project_id: number; + primary_tag_id: number; + secondary_tag_id: number; + title: string; } -export function parseCard (c: any) { - let card: Card = c; -if (card.tags == null) card.tags = []; - return card; -}; - -export function parseCards (cards: any) { - if (cards == null) return []; - return cards.map((c: any) => parseCard(c)); +export function parseCard(c: any) { + let card: Card = c; + if (card.tags == null) card.tags = []; + return card; } -export function parseMeTag (t: any) { - let tag: MeTag = t; - if (tag.options == null) tag.options = []; - return tag; +export function parseCards(cards: any) { + if (cards == null) return []; + return cards.map((c: any) => parseCard(c)); } -export function parseMeTags (tags: any) { - if (tags == null) return {}; - return tags.map(parseMeTag).reduce((acc: any, tag: MeTag) => { - acc[tag.id] = tag; - return acc; - }); -} \ No newline at end of file +export function parseMeTag(t: any) { + let tag: MeTag = t; + if (tag.options == null) tag.options = []; + return tag; +} + +export function parseMeTags(tags: any) { + if (tags == null) return {}; + return tags.map(parseMeTag).reduce((acc: any, tag: MeTag) => { + acc[tag.id] = tag; + return acc; + }); +} diff --git a/frontend/src/stores/smallStore.ts b/frontend/src/stores/smallStore.ts new file mode 100644 index 0000000..556ffc6 --- /dev/null +++ b/frontend/src/stores/smallStore.ts @@ -0,0 +1,33 @@ +import { writable } from 'svelte/store'; +import { parseCards, type Card, type View } from './interfaces'; +import { deleteCardApi, newCardApi } from '../api/cards'; +import { getProjectCardsAPI } from '../api/projects'; + +export const currentView = writable(null as View | null); + +export const currentModalCard = writable(-1); + +export const cards = (() => { + const { subscribe, set, update } = writable([] as Card[]); + + return { + subscribe, + init: async (projectId: number) => { + getProjectCardsAPI(projectId).then((c) => { + set(parseCards(c)); + }); + }, + add: async (projectId: number) => { + await newCardApi(projectId).then((card) => { + currentModalCard.set(card.id); + update((cards) => [...cards, card]); + }); + }, + remove: async (card: Card) => { + await deleteCardApi(card.id).then(() => { + update((cards) => cards.filter((c) => c.id !== card.id)); + currentModalCard.set(-1); + }); + } + }; +})();