1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Date, Time, LineEdit, TimePickerPopup, DatePickerPopup, VerticalBox, Button } from "std-widgets.slint";
5import { IconButton } from "../widgets/icon_button.slint";
6import { TextButton } from "../widgets/text_button.slint";
7import { Icons, FontSettings, TodoPalette, SpaceSettings } from "../widgets/styling.slint";
8
9export global CreateTaskAdapter {
10 in-out property <Date> due-date: { year: 2024, month: 12, day: 24 };
11 in-out property <Time> due-time: { hour: 12, minute: 45, second: 0 };
12
13 callback create(/* title */ string, /* due-date-time */ int);
14 callback back();
15 pure callback date-string(Date) -> string;
16 pure callback time-string(Time) -> string;
17 pure callback current-date() -> Date;
18 pure callback current-time() -> Time;
19 pure callback time-stamp(/* date */ Date, /* time */ Time) -> int;
20
21 // dummy implementation for live preview
22 date-string(due-date) => {
23 "Sat, Jun 1, 2024"
24 }
25
26 // dummy implementation for live preview
27 time-string(due-time) => {
28 "09:00"
29 }
30}
31
32export component CreateTaskView {
33 VerticalBox {
34 HorizontalLayout {
35 IconButton {
36 icon: Icons.close;
37 accessible-label: @tr("Cancel New Task Creation");
38
39 clicked => {
40 root.reset();
41 CreateTaskAdapter.back();
42 }
43 }
44
45 // spacer
46 Rectangle { }
47
48 Button {
49 text: @tr("Create");
50 enabled: title-input.text != "";
51 primary: true;
52
53 clicked => {
54 root.create();
55 }
56 }
57 }
58
59 VerticalLayout {
60 spacing: SpaceSettings.default-spacing;
61
62 title-label := Text {
63 text: @tr("Task name");
64 color: TodoPalette.foreground;
65 font-size: FontSettings.body-strong.font-size;
66 font-weight: FontSettings.body-strong.font-weight;
67 horizontal-alignment: left;
68 overflow: elide;
69 }
70
71 title-input := LineEdit {
72 placeholder-text: @tr("Describe your task");
73 accessible-label: title-label.text;
74 }
75 }
76
77 Text {
78 text: @tr("Due date");
79 color: TodoPalette.foreground;
80 font-size: FontSettings.body-strong.font-size;
81 font-weight: FontSettings.body-strong.font-weight;
82 horizontal-alignment: left;
83 overflow: elide;
84 }
85
86 HorizontalLayout {
87 spacing: SpaceSettings.default-spacing;
88
89 TextButton {
90 text: CreateTaskAdapter.date-string(CreateTaskAdapter.due-date);
91
92 clicked => {
93 date-picker.show();
94 }
95 }
96
97 TextButton {
98 text: CreateTaskAdapter.time-string(CreateTaskAdapter.due-time);
99 horizontal-stretch: 0;
100
101 clicked => {
102 time-picker.show();
103 }
104 }
105 }
106
107 Rectangle { }
108 }
109
110 date-picker := DatePickerPopup {
111 x: (root.width - 360px) / 2;
112 y: (root.height - 524px) / 2;
113 width: 360px;
114 height: 524px;
115
116 accepted(date) => {
117 CreateTaskAdapter.due-date = date;
118 }
119 }
120
121 time-picker := TimePickerPopup {
122 x: (root.width - 340px) / 2;
123 y: (root.height - 500px) / 2;
124 width: 340px;
125 height: 500px;
126
127 accepted(time) => {
128 CreateTaskAdapter.due-time = time;
129 }
130 }
131
132 function reset() {
133 title-input.text = "";
134 CreateTaskAdapter.due-date = CreateTaskAdapter.current-date();
135 CreateTaskAdapter.due-time = CreateTaskAdapter.current-time();
136 }
137
138 function create() {
139 CreateTaskAdapter.back();
140 CreateTaskAdapter.create(title-input.text, CreateTaskAdapter.time-stamp(CreateTaskAdapter.due-date, CreateTaskAdapter.due-time));
141 root.reset();
142 }
143}
144