136 lines
3.4 KiB
Svelte
136 lines
3.4 KiB
Svelte
<script lang="ts">
|
|
import { getContext } from 'svelte/internal';
|
|
import Card from './Card.svelte';
|
|
import Head from './Head.svelte';
|
|
import ModalCard from './ModalCard.svelte';
|
|
import { Query, useQueryClient, type QueryOptions } from '@sveltestack/svelte-query';
|
|
import { getExo, getExos, getTags } from '../../requests/exo.request';
|
|
import { page } from '$app/stores';
|
|
import { onMount } from 'svelte';
|
|
import Pagination from './Pagination.svelte';
|
|
import { goto } from '$app/navigation';
|
|
import { writable } from 'svelte/store';
|
|
import { setContext } from 'svelte';
|
|
import type { Page, Tag } from '../../types/exo.type';
|
|
import type { Store } from '../../types/api.type';
|
|
|
|
const { show } = getContext<{ show: Function }>('modal');
|
|
const { navigate } = getContext<{ navigate: Function }>('navigation');
|
|
|
|
let filter = 'user';
|
|
|
|
const exerciceStore = writable<Store<Page|undefined>>({
|
|
isLoading: false,
|
|
isFetching: false,
|
|
isSuccess: false,
|
|
data: undefined
|
|
});
|
|
const tagStore = writable<Store<Tag[]|undefined>>({
|
|
isLoading: false,
|
|
isFetching: false,
|
|
isSuccess: false,
|
|
data: undefined
|
|
});
|
|
|
|
setContext('exos', exerciceStore);
|
|
setContext('tags', tagStore);
|
|
|
|
onMount(() => {
|
|
if ($page.params.slug != undefined && !['user', 'public'].includes($page.params.slug)) {
|
|
getExo($page.params.slug).then((r) => {
|
|
show(ModalCard, { exo: r, exos: exerciceStore, tags: tagStore }, () => navigate('/exercices/' + filter));
|
|
});
|
|
} else if ($page.params.slug == undefined) {
|
|
goto('/exercices/public');
|
|
}
|
|
});
|
|
|
|
$: filter = ['user', 'public'].includes($page.params.slug) ? $page.params.slug : filter;
|
|
|
|
$: {
|
|
exerciceStore.update((s) => {
|
|
return { ...s, isFetching: true };
|
|
});
|
|
getExos(filter as 'public' | 'user', {
|
|
page: activePage,
|
|
search,
|
|
tags: [...selected.map((t) => t.id_code)]
|
|
}).then((r) => {
|
|
exerciceStore.update((e) => {
|
|
return { ...e, isSuccess: true, isFetching: false, data: r };
|
|
});
|
|
});
|
|
}
|
|
|
|
$: {
|
|
tagStore.update((s)=>{return {...s, isFetching: true}});
|
|
getTags().then(r=>{
|
|
tagStore.update((e) => {
|
|
return { ...e, isSuccess: true, isFetching: false, data: r };
|
|
});
|
|
})
|
|
}
|
|
|
|
let activePage = parseInt($page.url.searchParams.get('page')!) || 1;
|
|
let search = '';
|
|
let selected: Tag[] = [];
|
|
</script>
|
|
|
|
|
|
{#if $tagStore.isSuccess == true && $tagStore.data != undefined}
|
|
<Head location={filter} bind:search bind:selected />
|
|
{/if}
|
|
{#if $tagStore.isFetching == true}
|
|
Fetching
|
|
{/if}
|
|
|
|
<div class="feed">
|
|
<div class="title">
|
|
<h1>
|
|
Tous les <span>exercices</span>
|
|
</h1>
|
|
<p>
|
|
Vous retrouverez ici tous les exercices que vous avez créé ou copié depuis les exercices
|
|
publics
|
|
</p>
|
|
</div>
|
|
{#if $exerciceStore.data != undefined}
|
|
{#each $exerciceStore.data.items.filter((e) => e != null && selected.every((t) => e.tags
|
|
.map((s) => s.id_code)
|
|
.includes(t.id_code))) as e}
|
|
<Card bind:exo={e} />
|
|
{/each}
|
|
<Pagination bind:page={activePage} total={$exerciceStore.data.totalPage} />
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.feed {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
grid-auto-flow: dense;
|
|
grid-gap: 32px;
|
|
margin: 0 auto;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.title {
|
|
grid-column: 1/3;
|
|
display: flex;
|
|
text-align: left;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
h1 {
|
|
font-size: 3.5em;
|
|
font-weight: bolder;
|
|
margin: 0;
|
|
}
|
|
p {
|
|
font-size: 1.1em;
|
|
}
|
|
span {
|
|
color: red;
|
|
}
|
|
}
|
|
</style>
|