Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

dialog_widget: Add support for managing submit button disabled state. 

The new update_submit_disabled_state_on_change parameter configures
the dialog_widget system to disable/enable the confirmation button
depending on whether any of the fields in the modal have values
differing from their initial values.

Fixes #22683.
This commit is contained in:
Hardik Dharmani 2023-04-28 14:52:17 +05:30 committed by Tim Abbott
parent 33705b6116
commit 96d6fda2a7
1 changed files with 31 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/src/dialog_widget.ts
View File

@ -1,4 +1,5 @@
import $ from "jquery"; import $ from "jquery";
import _ from "lodash";
import render_dialog_widget from "../templates/dialog_widget.hbs"; import render_dialog_widget from "../templates/dialog_widget.hbs";
@ -60,6 +61,7 @@ type WidgetConfig = {
on_hidden?: () => void; on_hidden?: () => void;
post_render?: () => void; post_render?: () => void;
loading_spinner?: boolean; loading_spinner?: boolean;
update_submit_disabled_state_on_change?: boolean;
}; };
type RequestOpts = { type RequestOpts = {
@ -120,6 +122,8 @@ export function launch(conf: WidgetConfig): void {
// * post_render: Callback to run after the modal body is added to DOM. // * post_render: Callback to run after the modal body is added to DOM.
// * loading_spinner: Whether to show a loading spinner inside the // * loading_spinner: Whether to show a loading spinner inside the
// submit button when clicked. // submit button when clicked.
// * update_submit_disabled_state_on_change: If true, updates state of submit button
// on valid input change in modal.
const html_submit_button = conf.html_submit_button ?? $t_html({defaultMessage: "Save changes"}); const html_submit_button = conf.html_submit_button ?? $t_html({defaultMessage: "Save changes"});
const html = render_dialog_widget({ const html = render_dialog_widget({
@ -139,6 +143,33 @@ export function launch(conf: WidgetConfig): void {
const $submit_button = $dialog.find(".dialog_submit_button"); const $submit_button = $dialog.find(".dialog_submit_button");
function get_current_values($inputs: JQuery): Record<string, unknown> {
const current_values: Record<string, unknown> = {};
$inputs.each(function () {
const property_name = $(this).attr("name")!;
current_values[property_name] = $(this).val();
});
return current_values;
}
if (conf.update_submit_disabled_state_on_change) {
const $inputs = $dialog.find(".modal__content :input");
const original_values = get_current_values($inputs);
$submit_button.prop("disabled", true);
$inputs.on("input", () => {
const current_values = get_current_values($inputs);
if (!_.isEqual(original_values, current_values)) {
$submit_button.prop("disabled", false);
} else {
$submit_button.prop("disabled", true);
}
});
}
// This is used to link the submit button with the form, if present, in the modal. // This is used to link the submit button with the form, if present, in the modal.
// This makes it so that submitting this form by pressing Enter on an input element // This makes it so that submitting this form by pressing Enter on an input element
// triggers a click on the submit button. // triggers a click on the submit button.