Add Source creation/edition + Add missing edit forms for tasks and events

ui/AppWindow.slint

@@ -3,6 +3,8 @@ import { Button, VerticalBox, CheckBox } from "std-widgets.slint";
 import { SideBar } from "./components/SideBar.slint";
 import { MainView } from "MainView.slint";
 import { SettingsWindow } from "SettingsWindow.slint";
+import { AddSourceWindow } from "windows/AddSourceWindow.slint";
+import { EditSourceWindow } from "windows/EditSourceWindow.slint";
 import { Palette } from "@selenite";
 
 export component AppWindow inherits Window {
@@ -21,4 +23,4 @@ export component AppWindow inherits Window {
 	
 }
 
-export { Backend, Palette, SettingsWindow } // Export to make it visible to the C++ backend
+export { Backend, Palette, SettingsWindow, AddSourceWindow, EditSourceWindow } // Export to make it visible to the C++ backend

ui/Backend.slint

@@ -34,7 +34,20 @@ export struct SaveEventParams {
 	endsAt: Time
 }
 
+export struct AddSourceParam {
+	name: string,
+	type: string,
+	path: string
+}
+
+export struct ModifySourceParam {
+	id: int,
+	name: string,
+	path: string
+}
+
 export struct Source {
+	id: int,
 	name: string,
 	selected: bool,
 	path: string
@@ -42,10 +55,11 @@ export struct Source {
 
 export struct TaskData {
 	sourceId: int,
+	eventId: int,
 	id: int,
     title: string,
+	date: Date,
     checked: bool,
-	tags: [string],
 }
 
 export struct Event {
@@ -87,6 +101,8 @@ export global Backend  {
 	callback source-clicked(int);
 	callback tag-clicked(int);
 	callback settings-clicked();
+	callback add-source-clicked();
+	callback edit-source-clicked(int);
 	
 	callback open-new-task-form(OpenNewTaskFormParams);
 	callback open-edit-task-form(int, int);
@@ -101,6 +117,11 @@ export global Backend  {
 	callback create-event(NewEventParams);
 	callback save-event(SaveEventParams);
 
+	callback add-source(AddSourceParam);
+	callback modify-source(ModifySourceParam);
+	callback delete-source(int);
+
+	// Utils
 	pure callback format-date(Date) -> string;
 	pure callback format-date-relative(Date) -> string;
 	pure callback capitalize-string(string) -> string;

ui/Utils.slint

@@ -9,6 +9,9 @@ export global Utils  {
 	}
 
 	 public pure function time-to-string(time: Time) -> string {
-		return "\{format-zero-padding(time.hour)}h\{format-zero-padding(time.minute)}";
+		if (time.minute == 0) {
+			return "\{time.hour}";
+		}
+		return "\{time.hour}:\{format-zero-padding(time.minute)}";
 	}
 }

ui/components/Calendar.slint

@@ -50,7 +50,7 @@ export component Calendar inherits Rectangle {
 				VText {
 					vertical-alignment: center;
 					horizontal-alignment: right;
-					text: "\{index}h";
+					text: "\{index}";
 				}
 			}
 			

ui/components/EventGroup.slint

@@ -1,11 +1,13 @@
 import { Backend, TaskData, Event } from "../Backend.slint";
 import { ScrollView } from "std-widgets.slint";
-import { VCheckBox, VButton, VActionButton, Svg, VTag, VPopupIconMenu, VText, Palette } from "@selenite";
+import { VCheckBox, VTextInput, VButton, VActionButton, Svg, VTag, VPopupIconMenu, VText, Palette } from "@selenite";
 import { TaskLine } from "./TaskLine.slint";
 import { Utils } from "../Utils.slint";
 
 export component EventGroup {
 	in property<Event> event;
+	private property <bool> show-add-task: false;
+	private property <bool> edit-name: false;
 
 	eventPopup := VPopupIconMenu {
 		VActionButton {
@@ -13,17 +15,16 @@ export component EventGroup {
 			icon-colorize: Colors.greenyellow;
 			icon-size: 1.5rem;
 			border-radius: 0;
-			clicked => { Backend.open-new-task-form({
-				eventSourceId: event.sourceId,
-				eventId: event.id,
-			})}
+			clicked => { 
+				root.show-add-task = true;
+			}
 		}
 		VActionButton {
 			icon-svg: Svg.pen;
 			icon-colorize: Colors.grey;
 			icon-size: 1.5rem;
 			border-radius: 0;
-			clicked => { Backend.open-edit-event-form(event.sourceId, event.id) }
+			clicked => { edit-name = true; }
 		}
 
 		VActionButton {
@@ -48,15 +49,14 @@ export component EventGroup {
 			spacing: 4px;
 			VText {
 				text: Utils.time-to-string(event.startsAt);
+				horizontal-alignment: center;
 				color: Palette.accent;
 			}
 			HorizontalLayout {
 				alignment: center;
 				Rectangle {
-					width: 4px;
+					width: 2px;
 					background: Palette.accent;
-					border-radius: 8px;
-
 				}
 			}
 			VText {
@@ -72,10 +72,24 @@ export component EventGroup {
 			padding-top: 32px;
 			padding-bottom: 32px;
 			padding-right: 0px;
-			VText {
+			if !edit-name : VText {
 				text: event.title;
 				font-size: 1.1rem;
 			}
+			if edit-name : title := VTextInput {
+				text: event.title;
+				accepted => { 
+					Backend.save-event({
+						sourceId: event.sourceId,
+						id: event.id,
+						title: title.text,
+						//date: event.date,
+						startsAt: event.startsAt,
+						endsAt: event.endsAt,
+					});
+					root.edit-name = false;
+				}
+			}
 			for task[taskIndex] in event.tasks: VerticalLayout {
 				padding-top: taskIndex == 0 ? 16px : 0px;
 				padding-bottom: 8px;
@@ -85,6 +99,16 @@ export component EventGroup {
 					task-index: task.id;
 				}
 			}
+			if show-add-task : taskInput := VTextInput {
+				accepted => { 
+					Backend.create-task({
+						sourceId: event.sourceId,
+						eventId: event.id,
+						title: taskInput.text,
+					});
+					root.show-add-task = false;
+				}
+			}
 		}
 	}
 

ui/components/SideBar.slint

@@ -1,5 +1,5 @@
 import { Backend } from "../Backend.slint";
-import { VButton, ToggleButton, VText, Svg, Palette } from "@selenite";
+import { VButton, ToggleButton, VActionButton, VText, Svg, Palette } from "@selenite";
 
 export component SideBar inherits Rectangle {
 	background: Palette.pane;
@@ -8,9 +8,20 @@ export component SideBar inherits Rectangle {
 		height: parent.height;
 		padding: 16px;
 		spacing: 16px;
-		VText {
-			text: "Sources";
-			font-size: 1.5rem;
+		HorizontalLayout {
+			alignment: space-between;
+			spacing: 64px;
+			VText {
+				text: "Sources";
+				font-size: 1.5rem;
+			}
+
+			VActionButton {
+				icon-svg: Svg.plus;
+				icon-colorize: Palette.green;
+				background: transparent;
+				clicked => { Backend.add-source-clicked() }
+			}
 		}
 		VerticalLayout {
 			alignment: space-between;
@@ -23,23 +34,31 @@ export component SideBar inherits Rectangle {
 					text-alignment: left;
 					active: Backend.no-source-selected;
 					clicked => { Backend.source-clicked(-1) }
+
+					
 				}
 				for item[index] in Backend.sources-selected: ToggleButton {
 					text: item.name;
 					text-alignment: left;
 					active: item.selected;
 					clicked => { Backend.source-clicked(index) }
+					VActionButton {
+						visible: parent.active;
+						icon-svg: Svg.cog;
+						background: transparent;
+						clicked => { Backend.edit-source-clicked(item.id) }
+					}
 				}
 			}
-			/*VerticalLayout {
+			VerticalLayout {
 				spacing: 4px;
-				VButton {
+				/*VButton {
 					icon-svg: Svg.cog;
 					text: "Settings";
 					background: transparent;
 					clicked => { Backend.settings-clicked() }
-				}
-			}*/
+				}*/
+			}
 		}
 	}
 }

ui/components/TaskEdit.slint

@@ -1,13 +1,15 @@
 import { Backend, TaskData } from "../Backend.slint";
-import { Button, VerticalBox, CheckBox, ScrollView, ComboBox } from "std-widgets.slint";
+import { Button, VerticalBox, CheckBox, Date, ScrollView, ComboBox } from "std-widgets.slint";
 import { VPopupIconMenu, VDatePicker, VTimePicker, VCheckBox, VButton, VTag, VText, VTextInput, Svg, Palette } from "@selenite";
 import { NewTaskData, SaveTaskData } from "../Backend.slint";
 
 export component TaskEdit inherits VerticalLayout {
-	in-out property <SaveTaskData> task;
+	in-out property <TaskData> task;
 	out property <bool> should-show;
 
-	public function show(task: SaveTaskData) {
+	private property <Date> newDate: task.date;
+
+	public function show(task: TaskData) {
 		root.task = task;
 		should-show = true;
 	}
@@ -16,8 +18,6 @@ export component TaskEdit inherits VerticalLayout {
 	}
 	callback accepted(SaveTaskData);
 
-	
-
 	if !should-show : Rectangle {}
 
 	if should-show : Rectangle {
@@ -26,8 +26,8 @@ export component TaskEdit inherits VerticalLayout {
 				id: task.id,
 				sourceId: task.sourceId,
 				title: newTaskTitleInput.text,
-				scheduled: taskDateInput.date.year != 0,
-				date: taskDateInput.date
+				scheduled: newDate.year != 0,
+				date: newDate
 			});
 		}
 		background: Palette.background;
@@ -43,9 +43,10 @@ export component TaskEdit inherits VerticalLayout {
 			HorizontalLayout {
 				alignment: start;
 				spacing: 8px;
-				taskDateInput := VDatePicker {
+				if root.task.eventId == -1 : taskDateInput := VDatePicker {
 					date: task.date;
 					enabled: true;
+					edited(date) => { newDate = date; }
 				}
 				VButton {
 					text: "Modify";

ui/components/TaskLine.slint

@@ -44,8 +44,10 @@ export component TaskLine inherits VerticalLayout {
 					taskEdit.show({
 						sourceId: task.sourceId,
 						id: task.id,
+						eventId: task.eventId,
 						title: task.title,
 						scheduled: root.date.year != 0,
+						checked: task.checked,
 						date: date,
 					});
 				}
@@ -87,10 +89,10 @@ export component TaskLine inherits VerticalLayout {
 						Backend.task-clicked(source-index, task-index)
 					}
 				}
-				for tag[tag-index] in task.tags: VTag {
+				/*for tag[tag-index] in task.tags: VTag {
 					text: tag;
 					size: 0.8rem;
-				}
+				}*/
 			}
 			
 		}

ui/windows/AddSourceWindow.slint

@@ -0,0 +1,37 @@
+import { Backend } from "../Backend.slint";
+import { VerticalBox, CheckBox } from "std-widgets.slint";
+import { SideBar } from "../components/SideBar.slint";
+import { VButton, VText, VTextInput, Palette } from "@selenite";
+
+export component AddSourceWindow inherits Window {
+
+	title: "Mirai - Add source";
+	min-height: 100px;
+	max-height: 4000px; // needed, otherwise the window wants to fit the content (on Swaywm)
+	min-width: 400px;
+	default-font-size: 16px;
+	background: Palette.background;
+
+    VerticalLayout {
+		padding: 16px;
+		spacing: 8px;
+		nameInput := VTextInput {
+			label: "Name";
+		}
+		pathInput := VTextInput {
+			label: "Path";
+		}
+		VButton {
+			text: "Create";
+			clicked => { 
+				Backend.add-source({
+					name: nameInput.text,
+					type: "FileSystemMarkdown",
+					path: pathInput.text
+		  		})
+			}
+		}
+     }
+}
+
+export { Backend, Palette } // Export to make it visible to the C++ backend

ui/windows/EditSourceWindow.slint

@@ -0,0 +1,47 @@
+import { Backend } from "../Backend.slint";
+import { VerticalBox, CheckBox } from "std-widgets.slint";
+import { SideBar } from "../components/SideBar.slint";
+import { VButton, VText, VTextInput, Palette } from "@selenite";
+
+export component EditSourceWindow inherits Window {
+	in-out property <int> id;
+	in-out property name <=> nameInput.text;
+	in-out property path <=> pathInput.text;
+
+	title: "Mirai - Edit source";
+	min-height: 100px;
+	max-height: 4000px; // needed, otherwise the window wants to fit the content (on Swaywm)
+	min-width: 400px;
+	default-font-size: 16px;
+	background: Palette.background;
+
+    VerticalLayout {
+		padding: 16px;
+		spacing: 8px;
+		nameInput := VTextInput {
+			label: "Name";
+		}
+		pathInput := VTextInput {
+			label: "Path";
+		}
+		VButton {
+			text: "Save";
+			clicked => { 
+				Backend.modify-source({
+					id: root.id,
+					name: nameInput.text,
+					path: pathInput.text
+		  		})
+			}
+		}
+		VButton {
+			text: "Delete";
+			background-color: Colors.red;
+			double-clicked => { 
+				Backend.delete-source(root.id)
+			}
+		}
+     }
+}
+
+export { Backend, Palette } // Export to make it visible to the C++ backend