todo_list: Add option for modal to create todo-lists.

Previously, the `/todo` slash command was the sole method for
creating todos. Now, a button has been introduced to launch a modal
for creating todo-lists directly from the compose box.
This button becomes enabled only when the compose box is empty,
thereby avoiding complexities associated with losing or having to
save drafts of any messages already being composed.

The modal features a form that, upon submission,
generates a message using the `/todo` syntax and the data
inputted in the form. Subsequently, the content of the compose box
is set to this message, which the user can then send.

This modal closely parallels the UI for adding a poll.

Fixes: zulip#29779.

help/collaborative-to-do-lists.md

@@ -6,6 +6,32 @@
 
 {start_tabs}
 
+{tab|via-compose-box-buttons}
+
+{!start-composing.md!}
+
+1. Make sure the compose box is empty.
+
+1. Click the **Add to-do list** (<i class="zulip-icon zulip-icon-todo-list"></i>) icon at
+   the bottom of the compose box.
+
+1. Fill out todo-list information as desired, and click **Create to-do list** to insert todo-list
+   formatting.
+
+1. Click the **Send** (<i class="zulip-icon zulip-icon-send"></i>) button, or
+   use a [keyboard
+   shortcut](/help/mastering-the-compose-box#toggle-between-ctrl-enter-and-enter-to-send-a-message)
+   to send your message.
+
+!!! tip ""
+
+    To reorder the list of todos, click and drag the **vertical dots**
+    (<i class="zulip-icon zulip-icon-grip-vertical"></i>) to the left of each
+    option. To delete an option, click the **trash**
+    (<i class="fa fa-trash-o"></i>) icon to the right of it.
+
+{tab|via-markdown}
+
 {!start-composing.md!}
 
 1. Make sure the compose box is empty.

tools/test-js-with-node

@@ -249,6 +249,7 @@ EXEMPT_FILES = make_set(
         "web/src/subscriber_api.ts",
         "web/src/timerender.ts",
         "web/src/tippyjs.ts",
+        "web/src/todo_list_modal.ts",
         "web/src/todo_widget.js",
         "web/src/topic_list.ts",
         "web/src/topic_popover.js",

web/src/compose.js

@@ -140,6 +140,7 @@ export function clear_compose_box() {
     compose_ui.hide_compose_spinner();
     scheduled_messages.reset_selected_schedule_timestamp();
     $(".compose_control_button_container:has(.add-poll)").removeClass("disabled-on-hover");
+    $(".compose_control_button_container:has(.add-todo-list)").removeClass("disabled-on-hover");
 }
 
 export function send_message_success(request, data) {

web/src/compose_setup.js

@@ -2,6 +2,7 @@ import $ from "jquery";
 
 import {unresolve_name} from "../shared/src/resolved_topic";
 import render_add_poll_modal from "../templates/add_poll_modal.hbs";
+import render_add_todo_list_modal from "../templates/add_todo_list_modal.hbs";
 
 import * as compose from "./compose";
 import * as compose_actions from "./compose_actions";
@@ -29,6 +30,7 @@ import * as stream_settings_components from "./stream_settings_components";
 import * as sub_store from "./sub_store";
 import * as subscriber_api from "./subscriber_api";
 import {get_timestamp_for_flatpickr} from "./timerender";
+import * as todo_list_modal from "./todo_list_modal";
 import * as ui_report from "./ui_report";
 import * as upload from "./upload";
 import * as user_topics from "./user_topics";
@@ -85,8 +87,10 @@ export function initialize() {
         // The poll widget requires an empty compose box.
         if (compose_text_length > 0) {
             $(".add-poll").parent().addClass("disabled-on-hover");
+            $(".add-todo-list").parent().addClass("disabled-on-hover");
         } else {
             $(".add-poll").parent().removeClass("disabled-on-hover");
+            $(".add-todo-list").parent().removeClass("disabled-on-hover");
         }
     });
 
@@ -401,6 +405,44 @@ export function initialize() {
         });
     });
 
+    $("body").on(
+        "click",
+        ".compose_control_button_container:not(.disabled) .add-todo-list",
+        (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            function validate_input() {
+                const title = $("#todo-title-input").val().trim();
+
+                if (title === "") {
+                    $("#todo-title-input").val("Task list");
+                    return true;
+                }
+                return true;
+            }
+
+            dialog_widget.launch({
+                html_heading: $t_html({defaultMessage: "Create a collaborative to-do list"}),
+                html_body: render_add_todo_list_modal(),
+                html_submit_button: $t_html({defaultMessage: "Create to-do list"}),
+                close_on_submit: true,
+                on_click(e) {
+                    // frame a message using data input in modal, then populate the compose textarea with it
+                    e.preventDefault();
+                    e.stopPropagation();
+                    const todo_message_content = todo_list_modal.frame_todo_message_content();
+                    compose_ui.insert_syntax_and_focus(todo_message_content);
+                },
+                validate_input,
+                form_id: "add-todo-form",
+                id: "add-todo-modal",
+                post_render: todo_list_modal.todo_list_tasks_setup,
+                help_link: "https://zulip.com/help/collaborative-to-do-lists",
+            });
+        },
+    );
+
     $("#compose").on("click", ".markdown_preview", (e) => {
         e.preventDefault();
         e.stopPropagation();

web/src/todo_list_modal.ts

@@ -0,0 +1,67 @@
+import $ from "jquery";
+import SortableJS from "sortablejs";
+
+import render_todo_modal_task from "../templates/todo_modal_task.hbs";
+
+function create_option_row($last_option_row_input: JQuery): void {
+    const row_html = render_todo_modal_task();
+    const $row_container = $last_option_row_input.closest(".simplebar-content");
+    $row_container.append($(row_html));
+}
+
+function add_option_row(e: JQuery.TriggeredEvent): void {
+    // if the option triggering the input event e is not the last,
+    // that is, its next sibling has the class `option-row`, we
+    // do not add a new option row and return from this function
+    // This handles a case when the next empty input row is already
+    // added and user is updating the above row(s).
+    if ($(e.target).closest(".option-row").next().hasClass("option-row")) {
+        return;
+    }
+    create_option_row($(e.target));
+}
+
+function delete_option_row(e: JQuery.ClickEvent): void {
+    const $row = $(e.target).closest(".option-row");
+    $row.remove();
+}
+
+export function todo_list_tasks_setup(): void {
+    const $todo_options_list = $("#add-todo-form .todo-options-list");
+
+    $todo_options_list.on("input", "input.todo-input", add_option_row);
+    $todo_options_list.on("input", "input.todo-description-input", add_option_row);
+    $todo_options_list.on("click", "button.delete-option", delete_option_row);
+
+    // setTimeout is needed to here to give time for simplebar to initialise
+    setTimeout(() => {
+        SortableJS.create($("#add-todo-form .todo-options-list .simplebar-content")[0], {
+            onUpdate() {
+                // Do nothing on drag; the order is only processed on submission.
+            },
+            // We don't want the last (empty) row to be draggable, as a new row
+            // is added on input event of the last row.
+            filter: "input, .option-row:last-child",
+            preventOnFilter: false,
+        });
+    }, 0);
+}
+
+export function frame_todo_message_content(): string {
+    const title = $<HTMLInputElement>("input#todo-title-input").val()?.toString().trim() ?? "";
+    const todo_str = title ? `/todo ${title}\n` : "";
+
+    const todos: string[] = [];
+
+    $(".option-row").each(function () {
+        const todo_name = $(this).find(".todo-input").val()?.toString().trim() ?? "";
+        const todo_description =
+            $(this).find(".todo-description-input").val()?.toString().trim() ?? "";
+
+        if (todo_name) {
+            todos.push(`${todo_name}: ${todo_description}`);
+        }
+    });
+
+    return todo_str + todos.join("\n");
+}

web/styles/modal.css

@@ -390,7 +390,8 @@
     }
 }
 
-#add-poll-modal {
+#add-poll-modal,
+#add-todo-modal {
     /* this height allows 3-4 option rows
     to fit in without need for scrolling */
     height: 450px;
@@ -405,27 +406,32 @@
         }
     }
 
-    #add-poll-form {
+    #add-poll-form,
+    #add-todo-form {
         display: flex;
         flex-direction: column;
         overflow: hidden;
         height: 100%;
 
-        .poll-label {
+        .poll-label,
+        .todo-label {
             font-weight: bold;
             margin: 5px 0;
         }
 
-        .poll-question-input-container {
+        .poll-question-input-container,
+        .todo-title-input-container {
             display: flex;
             margin-bottom: 10px;
 
-            #poll-question-input {
+            #poll-question-input,
+            #todo-title-input {
                 flex-grow: 1;
             }
         }
 
-        .poll-options-list {
+        .poll-options-list,
+        .todo-options-list {
             margin: 0;
             height: 0;
             overflow: auto;
@@ -444,24 +450,22 @@
                     color: hsl(0deg 0% 75%);
                 }
 
-                .poll-option-input {
+                .poll-option-input,
+                .todo-title-input {
                     flex-grow: 1;
                 }
-            }
-
-            .option-row:first-child {
-                margin-top: 0;
-            }
 
-            .option-row:last-child {
-                cursor: default;
-
-                .delete-option {
-                    visibility: hidden;
+                &:first-child {
+                    margin-top: 0;
                 }
 
-                .drag-icon {
-                    visibility: hidden;
+                &:last-child {
+                    cursor: default;
+
+                    .delete-option,
+                    .drag-icon {
+                        visibility: hidden;
+                    }
                 }
             }
         }

web/templates/add_todo_list_modal.hbs

@@ -0,0 +1,13 @@
+<form id="add-todo-form" class="new-style">
+    <label class="todo-label">{{t "To-do list title"}}</label>
+    <div class="todo-title-input-container">
+        <input type="text" id="todo-title-input" class="modal_text_input" placeholder="{{t 'Task list'}}" />
+    </div>
+    <label class="todo-label">{{t "Tasks"}}</label>
+    <p>{{t "Anyone can add more tasks after the to-do list is posted."}}</p>
+    <ul class="todo-options-list" data-simplebar>
+        {{> todo_modal_task }}
+        {{> todo_modal_task }}
+        {{> todo_modal_task }}
+    </ul>
+</form>

web/templates/popovers/compose_control_buttons/compose_control_buttons_in_popover.hbs

@@ -12,5 +12,8 @@
     <div class="compose_control_button_container preview_mode_disabled" data-tooltip-template-id="add-poll-tooltip" data-tippy-maxWidth="none">
         <a role="button" class="compose_control_button zulip-icon zulip-icon-poll add-poll" aria-label="{{t 'Add poll' }}" tabindex=0></a>
     </div>
+    <div class="compose_control_button_container preview_mode_disabled" data-tooltip-template-id="add-todo-tooltip" data-tippy-maxWidth="none">
+        <a role="button" class="compose_control_button zulip-icon zulip-icon-todo-list add-todo-list" aria-label="{{t 'Add to-do list' }}" tabindex=0></a>
+    </div>
 {{/unless}}
 <a role="button" class="compose_control_button compose_help_button zulip-icon zulip-icon-question" tabindex=0 data-tippy-content="{{t 'Message formatting' }}" data-overlay-trigger="message-formatting"></a>

web/templates/todo_modal_task.hbs

@@ -0,0 +1,8 @@
+<li class="option-row">
+    <i class="zulip-icon zulip-icon-grip-vertical drag-icon"></i>
+    <input type="text" class="todo-input modal_text_input" placeholder="{{t 'New task'}}" />
+    <input type="text" class="todo-description-input modal_text_input" placeholder="{{t 'Task description (optional)'}}" />
+    <button type="button" class="button rounded small btn-secondary delete-option" title="{{t 'Delete' }}">
+        <i class="fa fa-trash-o" aria-hidden="true"></i>
+    </button>
+</li>

web/templates/tooltip_templates.hbs

@@ -65,6 +65,12 @@
         <span class="tooltip-inner-content italic">{{t "A poll must be an entire message." }}</span>
     </div>
 </template>
+<template id="add-todo-tooltip">
+    <div>
+        <span>{{t "Add to-do list" }}</span><br/>
+        <span class="tooltip-inner-content italic">{{t "A to-do list must be an entire message." }}</span>
+    </div>
+</template>
 <template id="delete-draft-tooltip-template">
     {{t 'Delete draft' }}
     {{tooltip_hotkey_hints "Backspace"}}