mirai/ui/MainView.slint

import { Backend, TaskData } from "Backend.slint";
import { Button, VerticalBox, CheckBox, ScrollView, ComboBox } from "std-widgets.slint";
import { TaskLine } from "./components/TaskLine.slint";
import { EventGroup } from "./components/EventGroup.slint";
import { Calendar } from "./components/Calendar.slint";
import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VTag, VText, VTextInput, Svg, Palette } from "@selenite";
import { NewTaskData, SaveTaskData } from "Backend.slint";
import { CreateTaskOrEvent } from "components/CreateTaskOrEvent.slint";

export component MainView inherits Rectangle {

	background: Palette.background;
	private property<string> icon-visible: Svg.visible;
	private property<string> icon-not-visible: Svg.not-visible;
	private property<bool> completed-tasks-visible: false;

	HorizontalLayout {

		VerticalLayout {
			horizontal-stretch: 1;
			padding: 16px;
			spacing: 16px;
			HorizontalLayout {
				horizontal-stretch: 1;
				alignment: start;
				spacing: 8px;
				VButton {
					text: "Show/Hide completed tasks";
					clicked => {
						Backend.toggle-show-completed-tasks();
						completed-tasks-visible = !completed-tasks-visible;
					}
					icon-svg: completed-tasks-visible ? icon-visible : icon-not-visible;
					icon-colorize: Palette.control-foreground;
				}
			}
			Rectangle {
				horizontal-stretch: 1;
				background: Palette.background.brighter(0.2);
				height: 1px;
			}

			CreateTaskOrEvent {
			
			}
			
			Flickable {
				horizontal-stretch: 1;
				VerticalLayout {
					alignment: start;
					spacing: 16px;
					if Backend.days.length == 0 && Backend.unscheduled-tasks.length == 0 : VText {
						text: "There is no task to show";
						horizontal-alignment: center;
						vertical-alignment: center;
					}
					for day[dayIndex] in Backend.days: VerticalLayout {
						Rectangle {
							background: Palette.card-background;
							border-radius: 8px;
							VerticalLayout {
								padding: 16px;
								HorizontalLayout {
									alignment: start;
									VText {
										text: Backend.format-date(day.date);
										color: day.isLate ? Palette.orange : Palette.foreground;
										font-size: 1.2rem;
									}
									VerticalLayout {
										alignment: center;
										VText {
											text: day.relativeDaysDiff == 0 ? "  -  today" :
												day.relativeDaysDiff == 1 ? "  -  tomorrow" :
												day.relativeDaysDiff == -1 ? "  -  yesterday" :
												day.relativeDaysDiff > 0 ? "  -  in \{day.relativeDaysDiff} days" :
												"  -  \{-day.relativeDaysDiff} days ago";
											color: Palette.foreground-hint;
											font-size: 1rem;
										}
									}
								}
								for event[eventIndex] in day.events: VerticalLayout {
									padding-top: 16px;
									EventGroup {
										event: event;
									}
								}
								for task[taskIndex] in day.tasks: VerticalLayout {
									padding-top: taskIndex == 0 ? 16px : 0px;
									padding-bottom: 8px;
									TaskLine {
										task: task;
										date: day.date;
										source-index: task.sourceId;
										task-index: task.id;
									}
								}
							}
						}
					}
					if Backend.unscheduled-tasks.length > 0 : VerticalLayout {
						Rectangle {
							background: Palette.card-background;
							border-radius: 8px;
							VerticalLayout {
								padding: 16px;
								HorizontalLayout {
									alignment: start;
									VText {
										text: "Unscheduled";
										color: Palette.foreground;
										font-size: 1.2rem;
									}
								}
								for task[taskIndex] in Backend.unscheduled-tasks: VerticalLayout {
									padding-top: taskIndex == 0 ? 16px : 0px;
									padding-bottom: 8px;
									TaskLine {
										task: task;
										source-index: task.sourceId;
										task-index: task.id;
									}
								}
							}
						}
					}
				}
			}
		}
		Calendar {
			init => { debug("cal len", Backend.calendar.length) }
			days: Backend.calendar;
		}
	}
	
}