10 changed files with 188 additions and 30 deletions
@ -0,0 +1,103 @@ |
|||
<script lang="ts"> |
|||
import { getCategories } from "./task-loader"; |
|||
import type { TaskDescriptor, TasksFile } from "./task-loader"; |
|||
import { getContext } from "svelte"; |
|||
import { copyFieldsThatExist } from "./helpers"; |
|||
|
|||
const { close } = getContext("simple-modal"); |
|||
|
|||
export let task: TaskDescriptor; |
|||
export let tasks: TasksFile; |
|||
|
|||
let newCategory: string; |
|||
|
|||
// copy of task data which we can safely change |
|||
let editData = { |
|||
task: { |
|||
...task, |
|||
title: task.title == null ? task.id : task.title, |
|||
}, |
|||
categories: getCategories(tasks, task.id), |
|||
}; |
|||
|
|||
function removeCategory(catName: string) { |
|||
return function () { |
|||
editData.categories = editData.categories.filter((t) => t != catName); |
|||
}; |
|||
} |
|||
|
|||
function removeDependency(dep: string) { |
|||
return function () { |
|||
editData.task.requires = editData.task.requires.filter((t) => t != dep); |
|||
}; |
|||
} |
|||
|
|||
function saveAndExit() { |
|||
Object.assign(task, editData.task); |
|||
close(); |
|||
} |
|||
</script> |
|||
|
|||
<div> |
|||
<div><i>ID:</i> {editData.task.id}, TYPE: {editData.task.type}</div> |
|||
<h1> |
|||
<i>TITLE:</i> |
|||
<span contenteditable="true" bind:textContent={editData.task.title} /> |
|||
</h1> |
|||
<div> |
|||
<i>COMMENT:</i> |
|||
<span contenteditable="true" bind:textContent={editData.task.comment} /> |
|||
</div> |
|||
{#if editData.task.type == "text"} |
|||
<div><i>HTML obsah:</i></div> |
|||
<div contenteditable="true" bind:textContent={editData.task.htmlContent} /> |
|||
{/if} |
|||
<hr /> |
|||
<div> |
|||
<h3>Kategorie</h3> |
|||
<ul> |
|||
{#each editData.categories as cat} |
|||
<li> |
|||
{cat}<button style="margin-left: 1em;" on:click={removeCategory(cat)}>x</button> |
|||
</li> |
|||
{/each} |
|||
</ul> |
|||
<div> |
|||
<input |
|||
type="text" |
|||
bind:value={newCategory} |
|||
placeholder="Nová kategorie" /> |
|||
<button |
|||
on:click={() => { |
|||
editData.categories = [...editData.categories, newCategory]; |
|||
}}>Přidat</button> |
|||
</div> |
|||
</div> |
|||
<hr /> |
|||
<div> |
|||
<h3>Závislosti</h3> |
|||
<ul> |
|||
{#each editData.task.requires as req} |
|||
<li> |
|||
{req}<button style="margin-left: 1em;" on:click={removeDependency(req)}>x</button> |
|||
</li> |
|||
{/each} |
|||
</ul> |
|||
<span> |
|||
<i>Jestli chceš vyrobit novou závislost, vyrob novou hranu v grafu. |
|||
Tady to nejde.</i> |
|||
</span> |
|||
</div> |
|||
<hr /> |
|||
<div> |
|||
<button on:click={saveAndExit}>Uložit a zavřít</button> |
|||
<button on:click={close}>Zrušit</button> |
|||
</div> |
|||
<hr /> |
|||
<div> |
|||
<h3>Vysvětlivky</h3> |
|||
<i>Kurzívou je psaný text, který nesouvisí s daty. Některý text psaný |
|||
nekurzívou se dá editovat. Změna typu ale třeba není možná, na to je |
|||
potřeba upravit přímo soubor <code>tasks.json</code>.</i> |
|||
</div> |
|||
</div> |
|||
@ -1 +1,7 @@ |
|||
export function nonNull<T>(a: T | null | undefined): T { return a! } |
|||
|
|||
export function copyFieldsThatExist(dest: any, source: any) { |
|||
for (const attr of Object.keys(dest)) { |
|||
if (attr in source) dest[attr] = source[attr] |
|||
} |
|||
} |
|||
|
|||
Reference in new issue