implement creating and listing tasks

This commit is contained in:
marlon-erler
2024-07-24 13:31:28 +02:00
parent 5164e891f6
commit 14212da988
8 changed files with 277 additions and 171 deletions
+26 -27
View File
@@ -4,79 +4,78 @@ import { DangerousActionButton } from "../Components/dangerousActionButton";
import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
import { translations } from "../translations";
export function TaskSettingsModal(taskViewModal: TaskViewModel) {
export function TaskSettingsModal(taskViewModel: TaskViewModel) {
return (
<div class="modal" toggle:open={taskViewModal.isPresentingSettingsModal}>
<div class="modal" open>
<div>
<main>
<h2>{translations.chatPage.task.boardSettingsHeadline}</h2>
<div class="tile flex-no">
<label class="tile flex-no">
<span class="icon">label</span>
<div>
<span>{translations.chatPage.task.taskNameLabel}</span>
<input bind:value={taskViewModal.name}></input>
<input bind:value={taskViewModel.name}></input>
</div>
</div>
</label>
<div class="tile flex-no">
<label class="tile flex-no">
<span class="icon">description</span>
<div>
<span>{translations.chatPage.task.taskDescriptionLabel}</span>
<input bind:value={taskViewModal.description}></input>
<textarea rows="10" bind:value={taskViewModel.description}></textarea>
</div>
</div>
</label>
<hr></hr>
<div class="tile flex-no">
<label class="tile flex-no">
<span class="icon">category</span>
<div>
<span>{translations.chatPage.task.taskCategoryLabel}</span>
<input bind:value={taskViewModal.category}></input>
<input bind:value={taskViewModel.category}></input>
</div>
</div>
</label>
<div class="tile flex-no">
<label class="tile flex-no">
<span class="icon">clock_loader_40</span>
<div>
<span>{translations.chatPage.task.taskStatusLabel}</span>
<input bind:value={taskViewModal.status}></input>
<input bind:value={taskViewModel.status}></input>
</div>
</div>
</label>
<div class="tile flex-no">
<label class="tile flex-no">
<span class="icon">priority_high</span>
<div>
<span>{translations.chatPage.task.taskPriorityLabel}</span>
<input type="number" bind:value={taskViewModal.priority}></input>
<input type="number" bind:value={taskViewModel.priority}></input>
</div>
</div>
</label>
<hr></hr>
<div class="tile flex-no">
<label class="tile flex-no">
<span class="icon">calendar_month</span>
<div>
<span>{translations.chatPage.task.taskDateLabel}</span>
<input type="date" bind:value={taskViewModal.date}></input>
<input type="date" bind:value={taskViewModel.date}></input>
</div>
</div>
</label>
<div class="tile flex-no">
<label class="tile flex-no">
<span class="icon">schedule</span>
<div>
<span>{translations.chatPage.task.taskTimeLabel}</span>
<input type="time" bind:value={taskViewModal.time}></input>
<input type="time" bind:value={taskViewModel.time}></input>
</div>
</div>
</label>
</main>
<div class="flex-row">
<button class="flex-1" on:click={taskViewModal.hideSettings}>
<div class="flex-row width-100">
<button class="flex" on:click={taskViewModel.hideSettings}>
{translations.general.closeButton}
<span class="icon">close</span>
</button>
<button class="flex-1" on:click={taskViewModal.hideSettingsAndSave}>
<button class="flex primary" on:click={taskViewModel.hideSettingsAndSave}>
{translations.general.saveButton}
<span class="icon">save</span>
</button>