Tags Input + Improved Date Input

This commit is contained in:
Neshura 2023-10-24 11:37:27 +02:00
parent 85f86a36e8
commit 2b5a19fdd6
Signed by: Neshura
GPG key ID: B6983AAA6B9A7A6C
3 changed files with 79 additions and 10 deletions

View file

@ -0,0 +1,26 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
export let id: number;
export let value: string;
let width: number;
$: width = Math.max(value.length + 3, 6);
const handleClick = () => {
dispatch('deleted', {
tagId: id,
});
}
</script>
<input id="tag-{id}" type="text" class="letterInput" style="--valuelen: {width}ch" bind:value={value}>
<button on:click={handleClick}>X</button>
<style>
.letterInput {
width: var(--valuelen);
padding-left: 1ch;
}
</style>

View file

@ -0,0 +1,16 @@
<script lang="ts">
export let id: string;
export let value: string;
const handleClick = () => {
value = "";
}
</script>
<button {id} class="letterInput" on:click={handleClick}>+</button>
<style>
.letterInput {
padding-left: 1ch;
}
</style>

View file

@ -3,6 +3,8 @@
import type {Writable} from "svelte/store";
import IntegerInput from "./IntegerInput.svelte";
import TextInput from "./TextInput.svelte";
import NewListTextInput from "./ListTextInput/NewListTextInput.svelte";
import ListTextInputElement from "./ListTextInput/ListTextInputElement.svelte";
let seriesTitle = "";
let volumeTitle = "";
@ -19,10 +21,25 @@
let editor: string;
let translator: string;
let publisher: string;
let tags: Vec<string>;
let tags: Array<string> = [];
let genre = "Hentai";
let lang = "en";
let ageRating = "18+";
$: {
if (releaseYear < 0) {
releaseMonth = -1;
}
if (releaseMonth < 0) {
releaseDay = -1;
}
}
function deleteTag(event: any) {
console.log("deleted")
tags.splice(event.detail.tagId, 1);
tags = tags;
}
</script>
<div class="metadataInput">
@ -49,26 +66,36 @@
<label for="release_date">Release Date:</label>
<IntegerInput id="release_year" bind:value={releaseYear} defaultValue={new Date().getFullYear()} />
{#if releaseYear > 0}
<IntegerInput id="release_month" bind:value={releaseMonth} defaultValue={new Date().getMonth()} />
<IntegerInput id="release_day" bind:value={releaseDay} defaultValue={new Date().getDay()} /><br>
{#if releaseMonth > 0}
<IntegerInput id="release_day" bind:value={releaseDay} defaultValue={new Date().getDay()} />
{/if}
{/if}
<br>
<!--TODO: if date element is 0 do not display finer element, also set finer element to -1-->
<label for="author">Author:</label>
<TextInput id="author" bind:value={author} placeholder="Author" />
<TextInput id="author" bind:value={author} placeholder="Author" /><br>
<label for="typesetter">Typesetter:</label>
<TextInput id="typesetter" bind:value={typesetter} placeholder="Typesetter" />
<TextInput id="typesetter" bind:value={typesetter} placeholder="Typesetter" /><br>
<label for="editor">Editor:</label>
<TextInput id="editor" bind:value={editor} placeholder="Editor" /><br>
<label for="translator">Translator</label>
<TextInput id="translator" bind:value={translator} placeholder="Translator" />
<label for="translator">Translator:</label>
<TextInput id="translator" bind:value={translator} placeholder="Translator" /><br>
<label for="publisher">Publisher</label>
<label for="publisher">Publisher:</label>
<TextInput id="publisher" bind:value={publisher} placeholder="Publisher" /><br>
<label for="tags">Tags</label>
<input id="tags" type="text"><br>
<label for="new-tag">Tags:</label>
<!-- List of Tags, New Button -->
{#each tags as tag, id}
<ListTextInputElement {id} bind:value={tag} on:deleted={deleteTag}/>
{/each}
<NewListTextInput id="new-tag" bind:value={tags[tags.length]}/><br>
<label for="genre">Genre</label>
<TextInput id="genre" bind:value={genre} placeholder="Genre" />