slint/examples/todo-mvc/ui/views/create_task_view.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Date, Time, LineEdit, TimePicker, DatePicker, VerticalBox, Button } from "std-widgets.slint";
import { IconButton } from "../widgets/icon_button.slint";
import { TextButton } from "../widgets/text_button.slint";
import { Icons, FontSettings, TodoPalette, SpaceSettings } from "../widgets/styling.slint";

export global CreateTaskAdapter {
    in-out property <Date> due-date: { year: 2024, month: 12, day: 24 };
    in-out property <Time> due-time: { hour: 12, minute: 45, second: 0 };

    callback create(/* title */ string, /* due-date-time */ int);
    callback back();
    pure callback date-string(Date) -> string;
    pure callback time-string(Time) -> string;
    pure callback current-date() -> Date;
    pure callback current-time() -> Time;
    pure callback time-stamp(/* date */ Date, /* time */ Time) -> int;

    // dummy implementation for live preview
    date-string(due-date) => {
        "Sat, Jun 1, 2024"
    }

    // dummy implementation for live preview
    time-string(due-time) => {
        "09:00"
    }
}

export component CreateTaskView {
    VerticalBox {
        HorizontalLayout {
            IconButton {
                icon: Icons.close;

                clicked => {
                    root.reset();
                    CreateTaskAdapter.back();
                }
            }

            // spacer
            Rectangle {}

            Button {
                text: @tr("DONE");
                enabled: title-input.text != "";
                primary: true;

                clicked => {
                    root.done();
                }
            }
        }

        VerticalLayout {
            spacing: SpaceSettings.default-spacing;

            Text {
                text: @tr("Task name");
                color: TodoPalette.foreground;
                font-size: FontSettings.body-strong.font-size;
                font-weight: FontSettings.body-strong.font-weight;
                horizontal-alignment: left;
                overflow: elide;
            }

            title-input := LineEdit {
                placeholder-text: @tr("Describe your task");
            }
        }


        Text {
            text: @tr("Due date");
            color: TodoPalette.foreground;
            font-size: FontSettings.body-strong.font-size;
            font-weight: FontSettings.body-strong.font-weight;
            horizontal-alignment: left;
            overflow: elide;
        }

        HorizontalLayout {
            spacing: SpaceSettings.default-spacing;

            TextButton {
                text: CreateTaskAdapter.date-string(CreateTaskAdapter.due-date);

                clicked => {
                    date-picker.show();
                }
            }


            TextButton {
                text: CreateTaskAdapter.time-string(CreateTaskAdapter.due-time);
                horizontal-stretch: 0;

                clicked => {
                    time-picker.show();
                }
            }
        }

        Rectangle {}
    }

     date-picker := PopupWindow {
        x: (root.width - 360px) / 2;
        y: (root.height - 524px) / 2;
        width: 360px;
        height: 524px;
        close-on-click: false;

        DatePicker {
            canceled => {
                date-picker.close();
            }

            accepted(date) => {
                CreateTaskAdapter.due-date = date;
                date-picker.close();
            }
        }
    }

    time-picker := PopupWindow {
        x: (root.width - 340px) / 2;
        y: (root.height - 500px) / 2;
        width: 340px;
        height: 500px;
        close-on-click: false;

        TimePicker {
            canceled => {
                time-picker.close();
            }

            accepted(time) => {
                CreateTaskAdapter.due-time = time;
                time-picker.close();
            }
        }
    }

    function reset() {
        title-input.text = "";
        CreateTaskAdapter.due-date = CreateTaskAdapter.current-date();
        CreateTaskAdapter.due-time = CreateTaskAdapter.current-time();
    }

    function done() {      
        CreateTaskAdapter.back();
        CreateTaskAdapter.create(title-input.text, CreateTaskAdapter.time-stamp(CreateTaskAdapter.due-date, CreateTaskAdapter.due-time));
        root.reset();
    }
}