Refactor stores

This commit is contained in:
Brieuc Dubois 2024-01-05 02:57:32 +01:00
parent 67be414d82
commit 63517ecbf4
21 changed files with 206 additions and 191 deletions

View File

@ -1,5 +1,5 @@
import type { TagValue } from "$lib/types/TagValue"; import type Card from '$lib/types/Card';
import type { Card } from "$lib/types/Card"; import type TagValue from '$lib/types/TagValue';
import api, { processError } from '../utils/api'; import api, { processError } from '../utils/api';
import status from '../utils/status'; import status from '../utils/status';

View File

@ -1,5 +1,4 @@
import type { TagOption } from "$lib/types/TagOption"; import type TagOption from '$lib/types/TagOption';
import type { MeTag } from "$lib/types/MeTag";
import api, { processError } from '$lib/utils/api'; import api, { processError } from '$lib/utils/api';
import status from '$lib/utils/status'; import status from '$lib/utils/status';

View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import project_tags from '$lib/stores/project_tags'; import currentDraggedCard from '$lib/stores/currentDraggedCard';
import { currentDraggedCard, currentModalCard } from '$lib/stores/smallStore'; import currentModalCard from '$lib/stores/currentModalCard';
import project_tags from '$lib/stores/projectTags';
import type Card from '$lib/types/Card'; import type Card from '$lib/types/Card';
import ModalCard from './modal_card.svelte'; import ModalCard from './modal_card.svelte';

View File

@ -1,7 +1,8 @@
<script lang="ts"> <script lang="ts">
import CloseIcon from '$lib/components/icons/closeIcon.svelte';
import cards from '$lib/stores/cards';
import currentModalCard from '$lib/stores/currentModalCard';
import type Card from '$lib/types/Card'; import type Card from '$lib/types/Card';
import { cards, currentModalCard } from '../../../stores/smallStore';
import CloseIcon from '../../icons/closeIcon.svelte';
import TrashIcon from '../../icons/trashIcon.svelte'; import TrashIcon from '../../icons/trashIcon.svelte';
import ModalTags from './modal_tags.svelte'; import ModalTags from './modal_tags.svelte';

View File

@ -1,10 +1,10 @@
<script lang="ts"> <script lang="ts">
import { tick } from 'svelte';
import ModalTagTypes from './modal_tag_types.svelte';
import { toastAlert } from '$lib/utils/toasts';
import project_tags from '$lib/stores/project_tags';
import AddIcon from '$lib/components/icons/addIcon.svelte'; import AddIcon from '$lib/components/icons/addIcon.svelte';
import Menu from '$lib/components/utils/menu.svelte'; import Menu from '$lib/components/utils/menu.svelte';
import project_tags from '$lib/stores/projectTags';
import { toastAlert } from '$lib/utils/toasts';
import { tick } from 'svelte';
import ModalTagTypes from './modal_tag_types.svelte';
export let projectId: number; export let projectId: number;

View File

@ -1,10 +1,10 @@
<script lang="ts"> <script lang="ts">
import Menu from '$lib/components/utils/menu.svelte';
import project_tags from '$lib/stores/projectTags';
import type MeTag from '$lib/types/MeTag';
import { toastAlert } from '$lib/utils/toasts';
import { tick } from 'svelte'; import { tick } from 'svelte';
import ModalTagTypes from './modal_tag_types.svelte'; import ModalTagTypes from './modal_tag_types.svelte';
import { toastAlert } from '$lib/utils/toasts';
import project_tags from '$lib/stores/project_tags';
import Menu from '$lib/components/utils/menu.svelte';
import type MeTag from '$lib/types/MeTag';
export let projectTag: MeTag; export let projectTag: MeTag;

View File

@ -2,8 +2,8 @@
import { updateCardTagApi } from '$lib/api/cards'; import { updateCardTagApi } from '$lib/api/cards';
import TrashIcon from '$lib/components/icons/trashIcon.svelte'; import TrashIcon from '$lib/components/icons/trashIcon.svelte';
import Menu from '$lib/components/utils/menu.svelte'; import Menu from '$lib/components/utils/menu.svelte';
import project_tags from '$lib/stores/project_tags'; import cards from '$lib/stores/cards';
import { cards } from '$lib/stores/smallStore'; import project_tags from '$lib/stores/projectTags';
import type Card from '$lib/types/Card'; import type Card from '$lib/types/Card';
import type MeTag from '$lib/types/MeTag'; import type MeTag from '$lib/types/MeTag';
import type TagValue from '$lib/types/TagValue'; import type TagValue from '$lib/types/TagValue';

View File

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import ProjectTags from '$lib/stores/project_tags'; import ProjectTags from '$lib/stores/projectTags';
import type Card from '$lib/types/Card'; import type Card from '$lib/types/Card';
import ModalTag from './modal_tag.svelte'; import ModalTag from './modal_tag.svelte';
import ModalNewTag from './modal_tag/modal_new_tag.svelte'; import ModalNewTag from './modal_tag/modal_new_tag.svelte';

View File

@ -1,13 +1,14 @@
<script lang="ts"> <script lang="ts">
import cards from '$lib/stores/cards';
import currentDraggedCard from '$lib/stores/currentDraggedCard';
import type Card from '$lib/types/Card'; import type Card from '$lib/types/Card';
import type TagValue from '$lib/types/TagValue'; import type TagValue from '$lib/types/TagValue';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import { createCardTagApi, deleteCardTagApi, updateCardTagApi } from '../../api/cards'; import { createCardTagApi, deleteCardTagApi, updateCardTagApi } from '../../api/cards';
import { updateTagAPI as updateTagOptionAPI } from '../../api/tags'; import { updateTagAPI as updateTagOptionAPI } from '../../api/tags';
import projectTags from '../../stores/project_tags'; import projectTags from '../../stores/projectTags';
import { cards, currentDraggedCard } from '../../stores/smallStore';
import AddIcon from '../icons/addIcon.svelte'; import AddIcon from '../icons/addIcon.svelte';
import CardC from './card/card.svelte'; import CardComponent from './card/card.svelte';
export let projectId: number; export let projectId: number;
export let optionId: number | null = null; export let optionId: number | null = null;
@ -100,7 +101,7 @@
</header> </header>
<ul> <ul>
{#each columnCards as card} {#each columnCards as card}
<CardC {card} /> <CardComponent {card} />
{/each} {/each}
</ul> </ul>
<div <div

View File

@ -1,8 +1,10 @@
<script lang="ts"> <script lang="ts">
import cards from '$lib/stores/cards';
import currentView from '$lib/stores/currentView';
import views from '$lib/stores/views';
import type Project from '$lib/types/Project'; import type Project from '$lib/types/Project';
import type View from '$lib/types/View'; import type View from '$lib/types/View';
import projectTags from '../../stores/project_tags'; import projectTags from '../../stores/projectTags';
import { cards, currentView, views } from '../../stores/smallStore';
import GroupMenu from './card/header/menus/group_menu.svelte'; import GroupMenu from './card/header/menus/group_menu.svelte';
import SortMenu from './card/header/menus/sort_menu.svelte'; import SortMenu from './card/header/menus/sort_menu.svelte';

View File

@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import projectTags from '$lib/stores/project_tags'; import cards from '$lib/stores/cards';
import { cards, currentView } from '$lib/stores/smallStore'; import currentView from '$lib/stores/currentView';
import projectTags from '$lib/stores/projectTags';
import type Project from '$lib/types/Project'; import type Project from '$lib/types/Project';
import type View from '$lib/types/View'; import type View from '$lib/types/View';
import { onMount } from 'svelte'; import { onMount } from 'svelte';

View File

@ -1,13 +1,15 @@
<script lang="ts"> <script lang="ts">
import currentView from '$lib/stores/currentView';
import views from '$lib/stores/views';
import type Project from '$lib/types/Project'; import type Project from '$lib/types/Project';
import type View from '$lib/types/View'; import type View from '$lib/types/View';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { get } from 'svelte/store'; import { get } from 'svelte/store';
import projectTags from '../stores/project_tags'; import projectTags from '../stores/projectTags';
import { currentView, views } from '../stores/smallStore';
import EditIcon from './icons/editIcon.svelte'; import EditIcon from './icons/editIcon.svelte';
import MenuOpener from './icons/menu_opener.svelte'; import MenuOpener from './icons/menu_opener.svelte';
import ViewIcon from './icons/viewIcon.svelte'; import ViewIcon from './icons/viewIcon.svelte';
export let project: Project; export let project: Project;
let viewEditId: number; let viewEditId: number;

View File

@ -0,0 +1,53 @@
import { deleteCardApi, newCardApi, updateCardApi } from '$lib/api/cards';
import { getProjectCardsAPI } from '$lib/api/projects';
import type Card from '$lib/types/Card';
import type TagValue from '$lib/types/TagValue';
import { writable } from 'svelte/store';
import { parseCards } from '../utils/parser';
import currentModalCard from './currentModalCard';
const { subscribe, set, update } = writable([] as Card[]);
async function init(projectId: number) {
getProjectCardsAPI(projectId).then((c) => {
set(parseCards(c));
});
}
async function add(projectId: number, tags: TagValue[]) {
await newCardApi(projectId, tags).then((card) => {
update((cards) => [...cards, card]);
currentModalCard.set(card.id);
});
}
async function remove(card: Card) {
await deleteCardApi(card.id).then(() => {
update((cards) => cards.filter((c) => c.id !== card.id));
currentModalCard.set(null);
});
}
async function edit(card: Card): Promise<boolean> {
if (await updateCardApi(card)) {
update((cards) => cards.map((c) => (c.id === card.id ? card : c)));
return true;
}
return false;
}
/**
* @deprecated The method should not be used. It is only used to force a reload of the cards.
*/
function reload() {
update((cards) => cards);
}
export default {
subscribe,
init,
add,
remove,
edit,
reload
};

View File

@ -0,0 +1,9 @@
import type Card from '$lib/types/Card';
import { writable } from 'svelte/store';
const { subscribe, set, update } = writable(null as Card | null);
export default {
subscribe,
set
};

View File

@ -0,0 +1,8 @@
import { writable } from 'svelte/store';
const { subscribe, set, update } = writable(null as number | null);
export default {
subscribe,
set
};

View File

@ -0,0 +1,9 @@
import type View from '$lib/types/View';
import { writable } from 'svelte/store';
const { subscribe, set, update } = writable(null as View | null);
export default {
subscribe,
set
};

View File

@ -3,7 +3,7 @@ import type TagOption from '$lib/types/TagOption';
import api, { processError } from '$lib/utils/api'; import api, { processError } from '$lib/utils/api';
import status from '$lib/utils/status'; import status from '$lib/utils/status';
import { get, writable } from 'svelte/store'; import { get, writable } from 'svelte/store';
import { cards } from './smallStore'; import cards from './cards';
const { subscribe, set, update } = writable({} as { [key: number]: MeTag }); const { subscribe, set, update } = writable({} as { [key: number]: MeTag });

View File

@ -1,159 +0,0 @@
import { deleteCardApi, newCardApi, updateCardApi } from '$lib/api/cards';
import { getProjectCardsAPI } from '$lib/api/projects';
import type Card from '$lib/types/Card';
import type TagValue from '$lib/types/TagValue';
import type View from '$lib/types/View';
import api, { processError } from '$lib/utils/api';
import status from '$lib/utils/status';
import { writable } from 'svelte/store';
import { parseCards } from '../utils/parser';
export const currentView = (() => {
const { subscribe, set, update } = writable(null as View | null);
return {
subscribe,
set
// update: async (view: View): Promise<boolean> => {
// const response = await api.put(`/v1/views/${view.id}`, view);
// if (response.status !== status.NoContent) {
// processError(response, 'Failed to update view');
// return false;
// }
// set(view);
// return true;
// }
};
})();
export const currentModalCard = writable(null as number | null);
export const currentDraggedCard = writable(null as Card | null);
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, tags: TagValue[]) => {
await newCardApi(projectId, tags).then((card) => {
update((cards) => [...cards, card]);
currentModalCard.set(card.id);
});
},
remove: async (card: Card) => {
await deleteCardApi(card.id).then(() => {
update((cards) => cards.filter((c) => c.id !== card.id));
currentModalCard.set(null);
});
},
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);
}
};
})();
export const views = (() => {
const { subscribe, set, update } = writable([] as View[]);
const init = async (projectId: number): Promise<boolean> => {
const response = await api.get(`/v1/projects/${projectId}/views`);
if (response.status !== status.OK) {
processError(response, 'Failed to get views');
return false;
}
if (response.data) {
set(response.data);
}
return true;
};
const add = async (
projectId: number,
title: string,
primaryTagId: number | null
): Promise<View> => {
const response = await api.post(`/v1/views`, {
title,
project_id: projectId,
primary_tag_id: primaryTagId
});
if (response.status !== status.Created) {
processError(response, 'Failed to add view');
return Promise.reject();
}
const view: View = {
id: response.data.id,
title: title,
project_id: projectId,
primary_tag_id: primaryTagId,
secondary_tag_id: null,
sort_tag_id: null,
sort_direction: null
};
update((views) => [...views, view]);
return view;
};
const remove = async (view: View): Promise<boolean> => {
const response = await api.delete(`/v1/views/${view.id}`);
if (response.status !== status.NoContent) {
processError(response, 'Failed to delete view');
return false;
}
update((views) => views.filter((v) => v.id !== view.id));
return true;
};
const edit = async (view: View): Promise<boolean> => {
if (view.title === '') {
if (confirm('Are you sure you want to delete this view?')) {
return remove(view);
} else {
return false;
}
}
const response = await api.put(`/v1/views/${view.id}`, view);
if (response.status !== status.NoContent) {
processError(response, 'Failed to update view');
return false;
}
update((views) => views.map((v) => (v.id === view.id ? view : v)));
return true;
};
return {
subscribe,
init,
add,
remove,
edit
};
})();

View File

@ -0,0 +1,88 @@
import type View from '$lib/types/View';
import api, { processError } from '$lib/utils/api';
import status from '$lib/utils/status';
import { writable } from 'svelte/store';
const { subscribe, set, update } = writable([] as View[]);
async function init(projectId: number): Promise<boolean> {
const response = await api.get(`/v1/projects/${projectId}/views`);
if (response.status !== status.OK) {
processError(response, 'Failed to get views');
return false;
}
if (response.data) {
set(response.data);
}
return true;
}
async function add(projectId: number, title: string, primaryTagId: number | null): Promise<View> {
const response = await api.post(`/v1/views`, {
title,
project_id: projectId,
primary_tag_id: primaryTagId
});
if (response.status !== status.Created) {
processError(response, 'Failed to add view');
return Promise.reject();
}
const view: View = {
id: response.data.id,
title: title,
project_id: projectId,
primary_tag_id: primaryTagId,
secondary_tag_id: null,
sort_tag_id: null,
sort_direction: null
};
update((views) => [...views, view]);
return view;
}
async function remove(view: View): Promise<boolean> {
const response = await api.delete(`/v1/views/${view.id}`);
if (response.status !== status.NoContent) {
processError(response, 'Failed to delete view');
return false;
}
update((views) => views.filter((v) => v.id !== view.id));
return true;
}
async function edit(view: View): Promise<boolean> {
if (view.title === '') {
if (confirm('Are you sure you want to delete this view?')) {
return remove(view);
} else {
return false;
}
}
const response = await api.put(`/v1/views/${view.id}`, view);
if (response.status !== status.NoContent) {
processError(response, 'Failed to update view');
return false;
}
update((views) => views.map((v) => (v.id === view.id ? view : v)));
return true;
}
export default {
subscribe,
init,
add,
remove,
edit
};

View File

@ -1,4 +1,4 @@
import type { TagValue } from './TagValue'; import type TagValue from './TagValue';
export default interface Card { export default interface Card {
id: number; id: number;

View File

@ -1,4 +1,4 @@
import type { TagOption } from './TagOption'; import type TagOption from './TagOption';
export default interface MeTag { export default interface MeTag {
id: number; id: number;