Bhasher/focus
Bhasher
/
focus
1
1
Fork 0
Code Issues Pull Requests Actions Packages Releases 6 Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/api/cards.ts
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 status from '../utils/status';

3
frontend/src/lib/api/tags.ts
View File

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

5
frontend/src/lib/components/project/card/card.svelte
View File

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

5
frontend/src/lib/components/project/card/modal_card.svelte
View File

@ -1,7 +1,8 @@
<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 { cards, currentModalCard } from '../../../stores/smallStore';
import CloseIcon from '../../icons/closeIcon.svelte';
import TrashIcon from '../../icons/trashIcon.svelte';
import ModalTags from './modal_tags.svelte';

8
frontend/src/lib/components/project/card/modal_tag/modal_new_tag.svelte
View File

@ -1,10 +1,10 @@
<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 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;

8
frontend/src/lib/components/project/card/modal_tag/modal_tag_title.svelte
View File

@ -1,10 +1,10 @@
<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 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;

4
frontend/src/lib/components/project/card/modal_tag/select_tags.svelte
View File

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

2
frontend/src/lib/components/project/card/modal_tags.svelte
View File

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

9
frontend/src/lib/components/project/column.svelte
View File

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

6
frontend/src/lib/components/project/header.svelte
View File

@ -1,8 +1,10 @@
<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 View from '$lib/types/View';
import projectTags from '../../stores/project_tags';
import { cards, currentView, views } from '../../stores/smallStore';
import projectTags from '../../stores/projectTags';
import GroupMenu from './card/header/menus/group_menu.svelte';
import SortMenu from './card/header/menus/sort_menu.svelte';

5
frontend/src/lib/components/project/project.svelte
View File

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

6
frontend/src/lib/components/sidebar.svelte
View File

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

53
frontend/src/lib/stores/cards.ts Normal file
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
};

9
frontend/src/lib/stores/currentDraggedCard.ts Normal file
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
};

8
frontend/src/lib/stores/currentModalCard.ts Normal file
View File

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

9
frontend/src/lib/stores/currentView.ts Normal file
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
};

2
frontend/src/lib/stores/project_tags.ts → frontend/src/lib/stores/projectTags.ts
View File

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

159
frontend/src/lib/stores/smallStore.ts
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
};
})();

88
frontend/src/lib/stores/views.ts Normal file
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
};

2
frontend/src/lib/types/Card.ts
View File

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

2
frontend/src/lib/types/MeTag.ts
View File

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