87 lines
2.0 KiB
Svelte
87 lines
2.0 KiB
Svelte
<script lang="ts">
|
|
import TagSelector from '../forms/TagSelector.svelte';
|
|
import { getContext } from 'svelte';
|
|
import CreateCard from './CreateCard.svelte';
|
|
import { useQueryClient } from '@sveltestack/svelte-query';
|
|
import type { Page, Tag } from '../../types/exo.type';
|
|
import type { Writable } from 'svelte/store';
|
|
import type { Store } from '../../types/api.type';
|
|
|
|
const { navigate } = getContext<{ navigate: Function }>('navigation');
|
|
const { show, close } = getContext<{ show: Function; close: Function }>('modal');
|
|
|
|
export let location = 'public';
|
|
export let search = '';
|
|
export let selected: Tag[] = [];
|
|
const { isAuth } = getContext<{ isAuth: Writable<boolean> }>('auth');
|
|
|
|
const tags: Writable<Store<Tag[]>> = getContext('tags');
|
|
const exerciceStore: Writable<Store<Page>> = getContext('exos');
|
|
let updateText = null;
|
|
let tmp =""
|
|
$: {
|
|
if(updateText != null){
|
|
clearTimeout(updateText);
|
|
}
|
|
updateText = window.setTimeout(() => {
|
|
search = tmp;
|
|
}, 500);
|
|
}
|
|
</script>
|
|
|
|
<div class="head">
|
|
<div class="new">
|
|
{#if !!$isAuth}
|
|
<button
|
|
class="border-primary-btn"
|
|
on:click={() => {
|
|
show(CreateCard, {
|
|
cancel: () => {
|
|
close();
|
|
},
|
|
exos: exerciceStore
|
|
});
|
|
}}>Nouveau</button
|
|
>
|
|
{/if}
|
|
</div>
|
|
<div class="search">
|
|
<input
|
|
type="text"
|
|
placeholder="Rechercher"
|
|
class="input"
|
|
bind:value={tmp}
|
|
|
|
/>
|
|
{#if !!$isAuth}
|
|
<TagSelector options={$tags.data} bind:selected />
|
|
<select
|
|
name="tagsSelect"
|
|
id="tagsSelect"
|
|
class="input"
|
|
bind:value={location}
|
|
on:change={(e) =>
|
|
navigate(`/exercices/${e.currentTarget.value}?${new URLSearchParams({ page: 1 })}`)}
|
|
>
|
|
<option value="user">Vos exos</option>
|
|
<option value="public">Tous les exos</option>
|
|
</select>{/if}
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
.head {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
div {
|
|
width: 50%;
|
|
}
|
|
}
|
|
.search {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
</style>
|