paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-15 11:22:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
A button has been introduced to launch a modal
for creating todo-lists directly from the compose box.

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; therefore,
the poll and todo code has been shifted to a newly created
file named `widget_modal.ts`, and `poll_modal.ts` is now deprecated.

Co-authored-by: Sujal Shah <sujalshah28092004@gmail.com>

Fixes #29779.
This commit is contained in:
opmkumar
2025-01-25 04:14:52 +05:30
committed by Tim Abbott
parent 83078aea16
commit 1e99745023
13 changed files with 273 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
web/src/compose_setup.js
View File

@@ -3,6 +3,7 @@ import _ from "lodash";
import {unresolve_name} from "../shared/src/resolved_topic.ts";
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.js";
import * as compose_actions from "./compose_actions.ts";
@@ -23,7 +24,6 @@ import * as message_view from "./message_view.ts";
import * as narrow_state from "./narrow_state.ts";
import * as onboarding_steps from "./onboarding_steps.ts";
import {page_params} from "./page_params.ts";
import * as poll_modal from "./poll_modal.ts";
import * as popovers from "./popovers.ts";
import * as resize from "./resize.ts";
import * as rows from "./rows.ts";
@@ -36,6 +36,7 @@ import {get_timestamp_for_flatpickr} from "./timerender.ts";
import * as ui_report from "./ui_report.ts";
import * as upload from "./upload.ts";
import * as user_topics from "./user_topics.ts";
import * as widget_modal from "./widget_modal.ts";
export function abort_xhr() {
$("#compose-send-button").prop("disabled", false);
@@ -88,9 +89,9 @@ export function initialize() {
// The poll widget requires an empty compose box.
if (compose_text_length > 0) {
$(".add-poll").parent().addClass("disabled-on-hover");
$(".needs-empty-compose").parent().addClass("disabled-on-hover");
} else {
$(".add-poll").parent().removeClass("disabled-on-hover");
$(".needs-empty-compose").parent().removeClass("disabled-on-hover");
}
if (compose_state.get_is_content_unedited_restored_draft()) {
@@ -449,7 +450,7 @@ export function initialize() {
// frame a message using data input in modal, then populate the compose textarea with it
e.preventDefault();
e.stopPropagation();
const poll_message_content = poll_modal.frame_poll_message_content();
const poll_message_content = widget_modal.frame_poll_message_content();
compose_ui.insert_syntax_and_focus(poll_message_content);
},
on_show() {
@@ -460,11 +461,74 @@ export function initialize() {
validate_input,
form_id: "add-poll-form",
id: "add-poll-modal",
post_render: poll_modal.poll_options_setup,
post_render: widget_modal.poll_options_setup,
help_link: "https://zulip.com/help/create-a-poll",
});
});
$("body").on("input", "#add-todo-modal .todo-input", (e) => {
e.preventDefault();
e.stopPropagation();
$(".option-row").each(function () {
const todo_name = $(this).find(".todo-input").val();
const $todo_description = $(this).find(".todo-description-input");
$todo_description.prop("disabled", !todo_name);
});
});
$("body").on(
"click",
".compose_control_button_container:not(.disabled) .add-todo-list",
(e) => {
e.preventDefault();
e.stopPropagation();
function validate_input(e) {
let is_valid = true;
e.preventDefault();
e.stopPropagation();
$(".option-row").each(function () {
const todo_name = $(this).find(".todo-input").val();
const todo_description = $(this).find(".todo-description-input").val();
if (!todo_name && todo_description) {
ui_report.error(
$t_html({defaultMessage: "Please enter task title."}),
undefined,
$("#dialog_error"),
);
is_valid = false;
}
});
return is_valid;
}
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 = widget_modal.frame_todo_message_content();
compose_ui.insert_syntax_and_focus(todo_message_content);
},
on_show() {
setTimeout(() => {
$("#todo-title-input").trigger("select");
}, 0);
},
form_id: "add-todo-form",
validate_input,
id: "add-todo-modal",
post_render: widget_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();