166 lines
3.3 KiB
Svelte
166 lines
3.3 KiB
Svelte
<script lang="ts">
|
|
import { useMutation, useQueryClient } from '@sveltestack/svelte-query';
|
|
import { addTags, delTags } from '../../requests/exo.request';
|
|
import type { Exercice, Tag as TagType } from '../../types/exo.type';
|
|
import TagSelector from '../forms/TagSelector.svelte';
|
|
import Tag from './Tag.svelte';
|
|
import { page } from '$app/stores';
|
|
import { getContext } from 'svelte';
|
|
import type { Writable } from 'svelte/store';
|
|
import type { Store } from '../../types/api.type';
|
|
export let exo: Exercice;
|
|
let tg = false;
|
|
let tagMode = false;
|
|
let selected: { label: string; id_code: string; color: string, created?: boolean }[] = [];
|
|
export let tags: Writable<Store<TagType[]>> = getContext('tags');
|
|
console.log('TAGS +', tags, getContext('test'))
|
|
</script>
|
|
|
|
<div
|
|
class="tags-container"
|
|
class:tg
|
|
class:tagMode
|
|
on:click|stopPropagation={() => {}}
|
|
on:keypress={() => {}}
|
|
>
|
|
{#if tg === false}
|
|
<div class="tags">
|
|
{#each exo.tags as t}
|
|
<Tag
|
|
color={t.color}
|
|
remove={() => {
|
|
delTags(exo.id_code, t.id_code).then((r) => {
|
|
exo.tags = r.tags;
|
|
});
|
|
return true;
|
|
}}
|
|
label={t.label}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
<div
|
|
class="expand"
|
|
on:click={() => {
|
|
tg = true;
|
|
console.log('TAGGGG', $tags)
|
|
setTimeout(() => {
|
|
tagMode = true;
|
|
}, 200);
|
|
}}
|
|
on:keydown={() => {}}
|
|
>
|
|
<p>+</p>
|
|
</div>
|
|
{:else}
|
|
<TagSelector disabled={exo.tags} bind:selected options={$tags.data} creatable allowEditing />
|
|
<button
|
|
class="primary-btn"
|
|
on:click|preventDefault={() => {
|
|
addTags(
|
|
exo.id_code,
|
|
selected.map((t) => {
|
|
delete t.created;
|
|
return t;
|
|
})
|
|
).then((r) => {
|
|
exo.tags = r.exo.tags;
|
|
if (r.tags.length != 0) {
|
|
tags.update((tt) => {
|
|
return { ...tt, data: [...tt.data, ...r.tags] };
|
|
});
|
|
}
|
|
tg = false;
|
|
tagMode = false;
|
|
});
|
|
}}>Valider !</button
|
|
>
|
|
<button
|
|
class="danger-btn"
|
|
on:click={() => {
|
|
tagMode = false;
|
|
tg = false;
|
|
}}>Annuler</button
|
|
>
|
|
{/if}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
* {
|
|
transition: 0.45s;
|
|
}
|
|
.tags-container {
|
|
min-height: 30px;
|
|
position: absolute;
|
|
padding: 1% 2%;
|
|
padding-right: 0;
|
|
bottom: 0;
|
|
background-color: darken($background, $amount: 7);
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 3;
|
|
border: 1px solid darken($background, $amount: 7);
|
|
border-top: none;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
display: grid;
|
|
grid-template-columns: 85% auto;
|
|
grid-gap: 8px;
|
|
}
|
|
.tg {
|
|
transition: 0.3s;
|
|
min-height: 100%;
|
|
:global(> *) {
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
}
|
|
.tags {
|
|
display: flex;
|
|
overflow: auto;
|
|
:global(> div) {
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
.expand {
|
|
padding: 0 15px;
|
|
font-weight: 900;
|
|
font-size: 1.1em;
|
|
cursor: pointer;
|
|
&:hover p {
|
|
transform: rotate(180deg);
|
|
}
|
|
position: relative;
|
|
&::before {
|
|
content: '';
|
|
background-color: black;
|
|
width: 1px;
|
|
height: 100%;
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 0%;
|
|
}
|
|
}
|
|
.tagMode {
|
|
transition: 0.5s;
|
|
min-height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
padding: 10px;
|
|
gap: 5px;
|
|
:global(> *) {
|
|
opacity: 1;
|
|
display: block;
|
|
position: static;
|
|
}
|
|
:global(> div),
|
|
:global(> button) {
|
|
flex-grow: 0;
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
}
|
|
</style>
|