77 lines
1.7 KiB
Svelte
77 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores';
|
|
import { tagList } from '$lib/stores.svelte.js';
|
|
|
|
let { original = $bindable() } = $props();
|
|
|
|
let tagMap = new Map();
|
|
|
|
// Create a mapping of tags and their checked status
|
|
let reloadTags = (original) => {
|
|
tagList.forEach((tag) => {
|
|
tagMap.set(tag, original.tags.includes(tag));
|
|
});
|
|
};
|
|
|
|
$effect.pre(() => {
|
|
reloadTags(original);
|
|
});
|
|
</script>
|
|
|
|
{#key $page.url.pathname}
|
|
<form method="POST">
|
|
<br />
|
|
<label>
|
|
<p>Title:</p>
|
|
<input type="text" name="title" value={original.title} />
|
|
</label>
|
|
<br />
|
|
|
|
<label>
|
|
<p>Description:</p>
|
|
<textarea
|
|
style="min-width:400px;min-height:100px"
|
|
name="description"
|
|
value={original.description}
|
|
></textarea>
|
|
</label>
|
|
<br />
|
|
<label>
|
|
<p>Tags:</p>
|
|
<div class="checkboxContainer">
|
|
{#each tagList as tag}
|
|
<label>
|
|
<input type="checkbox" name="tags" value={tag} checked={tagMap.get(tag)} />
|
|
{tag}
|
|
</label>
|
|
{/each}
|
|
</div>
|
|
</label>
|
|
<br />
|
|
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
{/key}
|
|
|
|
<style>
|
|
form {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
label {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
label > p {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.checkboxContainer {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, 1fr);
|
|
gap: 1px;
|
|
max-width: 50%;
|
|
}
|
|
</style>
|