generateur_v3/frontend/src/components/exos/DownloadForm.svelte

<script lang="ts">
	import MdClose from 'svelte-icons/md/MdClose.svelte';
	import MdEdit from 'svelte-icons/md/MdEdit.svelte';
	import MdDelete from 'svelte-icons/md/MdDelete.svelte';
	import { getContext } from 'svelte';
	import InputWithLabel from '../forms/InputWithLabel.svelte';
	import { useMutation, useQueryClient } from '@sveltestack/svelte-query';
	import { cloneExo, delExo, getExo } from '../../requests/exo.request';
	import type { Exercice } from 'src/types/exo.type';
	import TagContainer from './TagContainer.svelte';
	import PrivacyIndicator from './PrivacyIndicator.svelte';
	import MdContentCopy from 'svelte-icons/md/MdContentCopy.svelte';
	import ModalCard from './ModalCard.svelte';
	import { goto } from '$app/navigation';
	import type { Writable } from 'svelte/store';
	import {generateRequest} from "../../requests/exo.request.js";
	export let exo: Exercice;
	export let edit: Function=()=>{};
	export let delete_: Function=()=>{};

	const { close, show } = getContext<{ close: Function; show: Function }>('modal');
	const { alert } = getContext<{ alert: Function }>('alert');
	const { isAuth } = getContext<{ isAuth: Writable<boolean> }>('auth');
	const { navigate } = getContext<{ navigate: Function }>('navigation');

	let name = '';
</script>

{#if exo != null}
	<h1>
		<span class="name">{exo.name}</span>
		{#if exo.is_author && exo.original == null}
			<span
				><PrivacyIndicator color={exo.private == true ? 'red' : 'green'}
					>{exo.private == true ? 'Privé' : 'Public'}</PrivacyIndicator
				></span
			>
		{:else if exo.is_author && exo.original != null}
			<span
				on:click={() => {
					if (exo.original == null) return;

					getExo(exo.original?.id_code).then((r) => {
						goto(`/exercices/${exo.original?.id_code}`);
						show(
							ModalCard,
							{ exo: r },
							() => {
								goto('/exercices/user');
							},
							true
						);
					});
				}}
				on:keyup={() => {}}
			>
				<PrivacyIndicator color="blue"
					>Exercice original de <strong>{exo.original?.author}</strong></PrivacyIndicator
				>
			</span>
		{:else if !exo.is_author && exo.original == null}
			<span>
				<PrivacyIndicator color="blue">Par <strong>{exo.author.username}</strong></PrivacyIndicator>
			</span>
		{/if}
	</h1>
	<InputWithLabel type="text" bind:value={name} label="Nom" disabled={!exo.supports.csv}/>

	<div class="examples">
		<h2>Exemples</h2>
		{#if !!exo.consigne}<p>{exo.consigne}</p>{/if}

		{#each exo.examples.data as e}
			<p>{e.calcul}</p>
		{/each}
	</div>
	<div class="flex-row-center wp-100">
		<button class="primary-btn" disabled= {!exo.supports.csv} on:click={()=>{
				generateRequest(exo.id_code, name)

		}}>Télécharger</button>
	</div>

	{#if !!$isAuth}
		<TagContainer {exo} />
	{/if}
	<div class="icons">
		<div>
			<div class="icon" style:color="black" on:click={() => close()} on:keypress={() => {}}>
				<MdClose />
			</div>
		</div>

		<div>
			{#if !!$isAuth}
				{#if exo.is_author}
					<div
						class="icon"
						style:color="red"
						on:click={() => {
							alert({
								title: 'Sur ?',
								description: 'Voulez vous supprimer ? ',
								validate: () => {
									delExo(exo.id_code).then((r)=>{
										close();
									delete_();
									})
								}
							});
						}}
						on:keypress={() => {}}
						data-testid="delete"
					>
						<MdDelete />
					</div>
					<div class="icon" style:color="green" on:click={() => edit()} on:keypress={() => {}} data-testid="edit">
						<MdEdit />
					</div>
				{:else}
					<div
						class="icon"
						style:color="#f0f0f0"
						on:click={() => {
							cloneExo(exo.id_code).then((r) => {
								goto('/exercices/' + r.id_code);
								show(
									ModalCard,
									{ exo: r },
									() => {
										//goto('/exercices/user');
										navigate(-2)
									},
									true
								);
							});
						}}
						on:keypress={() => {}}
						title="Copier l'exercice pour pouvoir le modifier"
						data-testid="copy"
					>
						<MdContentCopy />
					</div>
				{/if}
			{/if}
		</div>
	</div>
{/if}

<style lang="scss">
	.icon {
		width: 25px;
		height: 25px;
		transition: 0.3s;
		cursor: pointer;
		opacity: 0.7;
		transform: scale(0.9);
		&:hover {
			transform: scale(1);
			opacity: 1;
		}
	}

	.icons {
		position: absolute;
		top: 0;
		margin: 30px;
		gap: 10px;
		display: flex;
		justify-content: space-between;
		right: 0;
		left: 0;
		div {
			display: flex;
		}
	}
	h1 {
		font-size: 1.5em;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		span.name {
			overflow: hidden;
			word-wrap: break-word;

		}
		span:not(.name) {
			position: relative;
			height: min-content;
			font-size: 18px;
			cursor: pointer;
		}
	}

	.examples {
		h2 {
			font-size: 1em;
			font-weight: 800;
			margin-bottom: 5px;
		}
		p {
			margin: 5px 0;
			margin-left: 30px;
			color: gray;
			font-weight: 400;
		}
	}
</style>