mirai/src/windows/AppWindow/views/TasksView.slint

import { AppWindowModels, TaskData } from "../Models.slint";
import { AppWindowActions, NewTaskData, SaveTaskData } from "../Actions.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 { CreateTaskOrEvent } from "../../../components/CreateTaskOrEvent.slint";
import { Utils } from "../../../shared/Utils.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 => {
						AppWindowActions.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 {
				sources: AppWindowModels.sources;
				create-task(data) => {
					AppWindowActions.create-task({
						sourceId: data.sourceId,
						eventId: -1,
						title: data.title,
						scheduled: data.date.year != 0,
						date: data.date
					})
				}
			}
			
			Flickable {
				horizontal-stretch: 1;
				VerticalLayout {
					alignment: start;
					spacing: 16px;
					if AppWindowModels.days.length == 0 && AppWindowModels.unscheduled-tasks.length == 0 : VText {
						text: "There is no task to show";
						horizontal-alignment: center;
						vertical-alignment: center;
					}
					for day[dayIndex] in AppWindowModels.days: VerticalLayout {
						Rectangle {
							background: Palette.card-background;
							border-radius: 8px;
							VerticalLayout {
								padding: 16px;
								HorizontalLayout {
									alignment: start;
									VText {
										text: Utils.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;
										add-task(data) => {
											AppWindowActions.create-task({
												sourceId: event.sourceId,
												eventId: event.id,
												title: data.title,
											});
										}
										edit-task(taskId, data) => {
											AppWindowActions.save-task({
												id: taskId,
												sourceId: event.sourceId,
												title: data.title,
											});
										}
										delete-task(taskId) => {
											AppWindowActions.delete-task-clicked(event.sourceId, taskId)
										}
										toggle-check-task(taskId) => {
											AppWindowActions.task-clicked(event.sourceId, taskId);
										}
										delete => {
											//AppWindowActions.delete-event-clicked(event.sourceId, event.id)
										}
										edit(data) => {
											//AppWindowActions.save-event({
												//sourceId: event.sourceId,
												//id: event.id,
												//title: data.title,
												////date: event.date,
												//startsAt: event.startsAt,
												//endsAt: event.endsAt,
											//});
										}
									}
								}
								for task[taskIndex] in day.tasks: VerticalLayout {
									padding-top: taskIndex == 0 ? 16px : 0px;
									padding-bottom: 8px;
									TaskLine {
										title: task.title;
										source-name: AppWindowModels.get-source-name-from-id(task.sourceId);
										scheduled: task.date.year != 0;
										date: day.date;
										checked: task.checked;
										allow-edit-date: true;
										delete => { 
											AppWindowActions.delete-task-clicked(task.sourceId, task.id)
										}
										toggle-check => {
											AppWindowActions.task-clicked(task.sourceId, task.id);
										}
										edited(data) => {
											AppWindowActions.save-task({
												id: task.id,
												sourceId: task.sourceId,
												title: data.title,
												scheduled: data.scheduled,
												date: data.date
											})
										}
									}
								}
							}
						}
					}
					if AppWindowModels.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 AppWindowModels.unscheduled-tasks: VerticalLayout {
									padding-top: taskIndex == 0 ? 16px : 0px;
									padding-bottom: 8px;
									TaskLine {
										title: task.title;
										source-name: AppWindowModels.get-source-name-from-id(task.sourceId);
										checked: task.checked;
										allow-edit-date: true;
										delete => { 
											AppWindowActions.delete-task-clicked(task.sourceId, task.id)
										}
										toggle-check => {
											AppWindowActions.task-clicked(task.sourceId, task.id);
										}
										edited(data) => {
											AppWindowActions.save-task({
												id: task.id,
												sourceId: task.sourceId,
												title: data.title,
												scheduled: data.scheduled,
												date: data.date
											})
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
}