Add create/modify button when creating/editing a task

This commit is contained in:
Vyn 2024-10-17 14:38:55 +02:00
parent e2b0c1ac74
commit 3650ddaccc
6 changed files with 69 additions and 39 deletions

View file

@ -1,10 +1,32 @@
import { Backend, TaskData } from "../Backend.slint";
import { Button, VerticalBox, CheckBox, ScrollView, ComboBox } from "std-widgets.slint";
import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VTag, VText, VTextInput, Palette } from "@selenite";
import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VActionButton, VTag, VText, Svg, VTextInput, Palette } from "@selenite";
import { NewTaskData, SaveTaskData } from "../Backend.slint";
export component CreateTaskOrEvent inherits Rectangle {
private property <int> task-or-event: 1;
function create-task() {
if (task-or-event == 1) {
Backend.create-task({
sourceId: sourceInput.current-index,
eventId: -1,
title: newTaskTitleInput.text,
scheduled: taskDateInput.date.year != 0,
date: taskDateInput.date
})
} else {
Backend.create-event({
sourceId: sourceInput.current-index,
title: newTaskTitleInput.text,
date: taskDateInput.date,
startsAt: eventStartTimeInput.time,
endsAt: eventEndTimeInput.time,
});
}
newTaskTitleInput.edit-text("");
}
Rectangle {
border-color: newTaskTitleInput.text != "" ? Palette.card-background : transparent;
border-width: newTaskTitleInput.text != "" ? 4px : 0px;
@ -13,7 +35,6 @@ export component CreateTaskOrEvent inherits Rectangle {
duration: 250ms;
}
VerticalLayout {
in-out property <int> task-or-event: 1;
spacing: 8px;
padding: newTaskTitleInput.text != "" ? 16px : 0px;
animate padding {
@ -24,26 +45,7 @@ export component CreateTaskOrEvent inherits Rectangle {
started-writting() => {
sourceInput.current-index = Backend.default-source-index;
}
accepted => {
if (task-or-event == 1) {
Backend.create-task({
sourceId: sourceInput.current-index,
eventId: -1,
title: newTaskTitleInput.text,
scheduled: taskDateInput.date.year != 0,
date: taskDateInput.date
})
} else {
Backend.create-event({
sourceId: sourceInput.current-index,
title: newTaskTitleInput.text,
date: taskDateInput.date,
startsAt: eventStartTimeInput.time,
endsAt: eventEndTimeInput.time,
});
}
newTaskTitleInput.edit-text("");
}
accepted => { create-task() }
}
Rectangle {
min-height: 0px;
@ -76,8 +78,14 @@ export component CreateTaskOrEvent inherits Rectangle {
taskDateInput := VDatePicker {
enabled: true;
}
HorizontalLayout {
visible: task-or-event == 0;
Rectangle {
min-width: 0;
max-width: task-or-event == 0 ? 9999px : 0px;
opacity: task-or-event == 0 ? 1 : 0;
clip: true;
animate max-width, opacity {
duration: 250ms;
}
HorizontalLayout {
spacing: 4px;
VText { text: "between"; vertical-alignment: bottom; }
@ -86,7 +94,12 @@ export component CreateTaskOrEvent inherits Rectangle {
eventEndTimeInput := VTimePicker { }
}
}
VButton {
text: "Create";
icon-svg: Svg.correct;
icon-colorize: greenyellow;
clicked => { create-task() }
}
}
}
}

View file

@ -1,6 +1,6 @@
import { Backend, TaskData } from "../Backend.slint";
import { Button, VerticalBox, CheckBox, ScrollView, ComboBox } from "std-widgets.slint";
import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VTag, VText, VTextInput, Palette } from "@selenite";
import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VTag, VText, VTextInput, Svg, Palette } from "@selenite";
import { NewTaskData, SaveTaskData } from "../Backend.slint";
export component TaskEdit inherits VerticalLayout {
@ -16,9 +16,20 @@ export component TaskEdit inherits VerticalLayout {
}
callback accepted(SaveTaskData);
if !should-show : Rectangle {}
if should-show : Rectangle {
function modify() {
root.accepted({
id: task.id,
sourceId: task.sourceId,
title: newTaskTitleInput.text,
scheduled: taskDateInput.date.year != 0,
date: taskDateInput.date
});
}
background: Palette.background;
border-radius: 8px;
VerticalLayout {
@ -27,16 +38,7 @@ export component TaskEdit inherits VerticalLayout {
newTaskTitleInput := VTextInput {
text: root.task.title;
accepted => {
root.accepted({
id: task.id,
sourceId: task.sourceId,
title: newTaskTitleInput.text,
scheduled: taskDateInput.date.year != 0,
date: taskDateInput.date
});
}
accepted => { modify() }
}
HorizontalLayout {
alignment: start;
@ -45,6 +47,12 @@ export component TaskEdit inherits VerticalLayout {
date: task.date;
enabled: true;
}
VButton {
text: "Modify";
icon-svg: Svg.correct;
icon-colorize: greenyellow;
clicked => { modify() }
}
}
}
}