109 lines
2.6 KiB
Svelte
109 lines
2.6 KiB
Svelte
<script lang="ts">
|
|
import { afterUpdate, createEventDispatcher } from "svelte";
|
|
import type { Level } from "./types";
|
|
import LevelTag from "./LevelTag.svelte";
|
|
import ButtonMain from "./ButtonMain.svelte";
|
|
import ButtonTrash from "./ButtonTrash.svelte";
|
|
import axios from "$lib/api.ts";
|
|
|
|
export let id: number;
|
|
export let word: string;
|
|
export let definition: string;
|
|
export let level: Level;
|
|
|
|
const dispatch = createEventDispatcher();
|
|
|
|
function deleteWord() {
|
|
dispatch("deleteWord");
|
|
}
|
|
|
|
let isEditLevel = false;
|
|
let isEditWord = false;
|
|
let isEditDefinition = false;
|
|
|
|
function toggleEditLevel() {
|
|
isEditLevel = true;
|
|
}
|
|
|
|
function toggleEditWord() {
|
|
isEditWord = true;
|
|
}
|
|
function toggleEditDefinition() {
|
|
isEditDefinition = true;
|
|
}
|
|
|
|
function init(el) {
|
|
el.focus();
|
|
}
|
|
|
|
function updateWord() {
|
|
try {
|
|
axios.patch("words/" + id + "/", { word: word }).then(() => {
|
|
isEditWord = false;
|
|
});
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
function updateDefinition() {
|
|
try {
|
|
axios
|
|
.patch("words/" + id + "/", { definition: definition })
|
|
.then(() => {
|
|
isEditDefinition = false;
|
|
});
|
|
} catch (e) {
|
|
console.log(e);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<tr class="text-slate-700 border-b">
|
|
<td class="p-2">
|
|
{#if !isEditLevel}
|
|
<LevelTag {level} on:click={toggleEditLevel} />
|
|
{:else}
|
|
<select />
|
|
{/if}
|
|
</td>
|
|
<td class="p-2">
|
|
{#if !isEditWord}
|
|
<div
|
|
class="p-1 w-full hover:cursor-pointer"
|
|
on:click={toggleEditWord}
|
|
>
|
|
{word}
|
|
</div>
|
|
{:else}
|
|
<input
|
|
name="word"
|
|
bind:value={word}
|
|
class="p-1 rounded-md border w-full"
|
|
use:init
|
|
on:change={updateWord}
|
|
/>
|
|
{/if}
|
|
</td>
|
|
<td class="p-2">
|
|
{#if !isEditDefinition}
|
|
<div
|
|
class="w-full hover:cursor-pointer"
|
|
on:click={toggleEditDefinition}
|
|
>
|
|
{definition}
|
|
</div>
|
|
{:else}
|
|
<input
|
|
name="definition"
|
|
bind:value={definition}
|
|
on:change={updateDefinition}
|
|
use:init
|
|
class="p-1 rounded-md border w-full"
|
|
/>
|
|
{/if}
|
|
</td>
|
|
<td>
|
|
<ButtonTrash onClick={deleteWord} />
|
|
</td>
|
|
</tr>
|