mirai/ui/components/CreateTaskOrEvent.slint

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 "@vynui";
import { NewTaskData, SaveTaskData } from "../Backend.slint";

export component CreateTaskOrEvent inherits Rectangle {

	Rectangle {
		border-color: newTaskTitleInput.text != "" ? Palette.card-background : transparent;
		border-width: newTaskTitleInput.text != "" ? 4px : 0px;
		border-radius: newTaskTitleInput.text != "" ? 8px : 0px;
		animate border-color, border-width {
			duration: 250ms;
		}
		VerticalLayout {
			in-out property <int> task-or-event: 1;
			spacing: 8px;
			padding: newTaskTitleInput.text != "" ? 16px : 0px;
			animate padding {
				duration: 250ms;
			}
			newTaskTitleInput := VTextInput {
				placeholder: "Add new Task / Event";
			 	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("");
				}
			}
			Rectangle {
				min-height: 0px;
				max-height: newTaskTitleInput.text != "" ? 512px : 0px;
				opacity: newTaskTitleInput.text != "" ? 1 : 0;
				clip: true;
				animate max-height, opacity {
					 duration: 250ms;
				}
				
				HorizontalLayout {
					alignment: start;
					spacing: 8px;
					VerticalLayout {
						alignment: end;
						VButton {
							text: task-or-event == 1 ? "Task" : "Event";
							clicked => { task-or-event = task-or-event == 1 ? 0 : 1 }
						}
					}
					VText { text: "for"; vertical-alignment: bottom;}
					VerticalLayout {
						alignment: end;
						sourceInput := ComboBox {
							model: Backend.sources; 
							
						}
					}
					VText { text: "on"; vertical-alignment: bottom;}
					taskDateInput := VDatePicker {
						enabled: true;
					}
					HorizontalLayout {
						visible: task-or-event == 0;
						HorizontalLayout {
							spacing: 4px;
							VText { text: "between"; vertical-alignment: bottom; }
							eventStartTimeInput := VTimePicker {  }
							VText { text: "and"; vertical-alignment: bottom; }
							eventEndTimeInput := VTimePicker {  }
						}
					}
					
				}
			}
		}
	}
}