implement opening and editing tasks

This commit is contained in:
marlon-erler
2024-07-24 13:34:33 +02:00
parent 14212da988
commit 20b27d1a57
4 changed files with 14 additions and 14 deletions
+7 -7
View File
@@ -1446,14 +1446,14 @@
date = new State(""); date = new State("");
time = new State(""); time = new State("");
// view // view
showSettings = () => { open = () => {
this.boardViewModel.selectTask(this); this.boardViewModel.selectTask(this);
}; };
hideSettings = () => { close = () => {
this.boardViewModel.closeTask(); this.boardViewModel.closeTask();
}; };
hideSettingsAndSave = () => { closeAndSave = () => {
this.hideSettings(); this.close();
this.save(); this.save();
}; };
// storage // storage
@@ -2334,12 +2334,12 @@
// src/View/Modals/taskSettingsModal.tsx // src/View/Modals/taskSettingsModal.tsx
function TaskSettingsModal(taskViewModel) { function TaskSettingsModal(taskViewModel) {
return /* @__PURE__ */ createElement("div", { class: "modal", open: true }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.task.boardSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskNameLabel), /* @__PURE__ */ createElement("input", { "bind:value": taskViewModel.name }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskDescriptionLabel), /* @__PURE__ */ createElement("textarea", { rows: "10", "bind:value": taskViewModel.description }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskCategoryLabel), /* @__PURE__ */ createElement("input", { "bind:value": taskViewModel.category }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "clock_loader_40"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskStatusLabel), /* @__PURE__ */ createElement("input", { "bind:value": taskViewModel.status }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "priority_high"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskPriorityLabel), /* @__PURE__ */ createElement("input", { type: "number", "bind:value": taskViewModel.priority }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "calendar_month"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskDateLabel), /* @__PURE__ */ createElement("input", { type: "date", "bind:value": taskViewModel.date }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskTimeLabel), /* @__PURE__ */ createElement("input", { type: "time", "bind:value": taskViewModel.time })))), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement("button", { class: "flex", "on:click": taskViewModel.hideSettings }, translations.general.closeButton), /* @__PURE__ */ createElement("button", { class: "flex primary", "on:click": taskViewModel.hideSettingsAndSave }, translations.general.saveButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "save"))))); return /* @__PURE__ */ createElement("div", { class: "modal", open: true }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.task.boardSettingsHeadline), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "label"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskNameLabel), /* @__PURE__ */ createElement("input", { "bind:value": taskViewModel.name }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskDescriptionLabel), /* @__PURE__ */ createElement("textarea", { rows: "10", "bind:value": taskViewModel.description }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "category"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskCategoryLabel), /* @__PURE__ */ createElement("input", { "bind:value": taskViewModel.category }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "clock_loader_40"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskStatusLabel), /* @__PURE__ */ createElement("input", { "bind:value": taskViewModel.status }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "priority_high"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskPriorityLabel), /* @__PURE__ */ createElement("input", { type: "number", "bind:value": taskViewModel.priority }))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "calendar_month"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskDateLabel), /* @__PURE__ */ createElement("input", { type: "date", "bind:value": taskViewModel.date }))), /* @__PURE__ */ createElement("label", { class: "tile flex-no" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.task.taskTimeLabel), /* @__PURE__ */ createElement("input", { type: "time", "bind:value": taskViewModel.time })))), /* @__PURE__ */ createElement("div", { class: "flex-row width-100" }, /* @__PURE__ */ createElement("button", { class: "flex", "on:click": taskViewModel.close }, translations.general.closeButton), /* @__PURE__ */ createElement("button", { class: "flex primary", "on:click": taskViewModel.closeAndSave }, translations.general.saveButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "save")))));
} }
// src/View/Components/taskEntry.tsx // src/View/Components/taskEntry.tsx
function TaskEntry(taskViewModel) { function TaskEntry(taskViewModel) {
const view = /* @__PURE__ */ createElement("button", { class: "tile" }, /* @__PURE__ */ createElement("b", { "subscribe:innerText": taskViewModel.name })); const view = /* @__PURE__ */ createElement("button", { class: "tile", "on:click": taskViewModel.open }, /* @__PURE__ */ createElement("b", { "subscribe:innerText": taskViewModel.name }));
return view; return view;
} }
var TaskViewModelToEntry = (taskViewModel) => { var TaskViewModelToEntry = (taskViewModel) => {
@@ -2358,7 +2358,7 @@
"div", "div",
{ {
class: "grid gap", class: "grid gap",
style: "grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr))", style: "grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr))",
"children:append": [ "children:append": [
boardViewModel.taskViewModels, boardViewModel.taskViewModels,
TaskViewModelToEntry TaskViewModelToEntry
+1 -1
View File
@@ -4,7 +4,7 @@ import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
export function TaskEntry(taskViewModel: TaskViewModel) { export function TaskEntry(taskViewModel: TaskViewModel) {
const view = ( const view = (
<button class="tile"> <button class="tile" on:click={taskViewModel.open}>
<b subscribe:innerText={taskViewModel.name}></b> <b subscribe:innerText={taskViewModel.name}></b>
</button> </button>
); );
+2 -2
View File
@@ -72,10 +72,10 @@ export function TaskSettingsModal(taskViewModel: TaskViewModel) {
</label> </label>
</main> </main>
<div class="flex-row width-100"> <div class="flex-row width-100">
<button class="flex" on:click={taskViewModel.hideSettings}> <button class="flex" on:click={taskViewModel.close}>
{translations.general.closeButton} {translations.general.closeButton}
</button> </button>
<button class="flex primary" on:click={taskViewModel.hideSettingsAndSave}> <button class="flex primary" on:click={taskViewModel.closeAndSave}>
{translations.general.saveButton} {translations.general.saveButton}
<span class="icon">save</span> <span class="icon">save</span>
</button> </button>
+4 -4
View File
@@ -30,16 +30,16 @@ export default class TaskViewModel {
time: React.State<string> = new React.State(""); time: React.State<string> = new React.State("");
// view // view
showSettings = (): void => { open = (): void => {
this.boardViewModel.selectTask(this); this.boardViewModel.selectTask(this);
}; };
hideSettings = (): void => { close = (): void => {
this.boardViewModel.closeTask(); this.boardViewModel.closeTask();
}; };
hideSettingsAndSave = (): void => { closeAndSave = (): void => {
this.hideSettings(); this.close();
this.save(); this.save();
}; };