invites: Use shared helper function for setting expiration text.

Moves and renames `set_expires_on_text` to settings_components.ts,
so that it can be used in other modals with user set time inputs
that show a formatted string of that time input.

Updates invite_user_modal.hbs for the class names used in the new
shared helper function.

Co-authored-by: Ujjawal Modi <umodi2003@gmail.com>
Co-authored-by: Lauryn Menard <lauryn@zulip.com>
This commit is contained in:
opmkumar 2024-10-31 01:43:53 +05:30 committed by Tim Abbott
parent ea252f0769
commit d6aae75f04
3 changed files with 24 additions and 17 deletions

View File

@ -284,18 +284,6 @@ function valid_to(): string {
return $t({defaultMessage: "Expires on {date} at {time}"}, {date, time});
}
function set_expires_on_text(): void {
const $expires_in = $<HTMLSelectOneElement>("select:not([multiple])#expires_in");
const valid_to_text = valid_to();
if ($expires_in.val() === "custom") {
$("#expires_on").hide();
$("#custom_expires_on").text(valid_to_text);
} else {
$("#expires_on").show();
$("#expires_on").text(valid_to_text);
}
}
function set_streams_to_join_list_visibility(): void {
const realm_has_default_streams = stream_data.get_default_stream_ids().length !== 0;
const hide_streams_list =
@ -380,7 +368,8 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
custom_expiration_time_unit,
custom_expiration_time_input,
);
set_expires_on_text();
const valid_to_text = valid_to();
settings_components.set_time_input_formatted_text($expires_in, valid_to_text);
if (settings_data.user_can_subscribe_other_users()) {
set_streams_to_join_list_visibility();
@ -438,7 +427,8 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
custom_expiration_time_unit,
custom_expiration_time_input,
);
set_expires_on_text();
const valid_to_text = valid_to();
settings_components.set_time_input_formatted_text($expires_in, valid_to_text);
toggle_invite_submit_button();
});
@ -456,7 +446,8 @@ function open_invite_user_modal(e: JQuery.ClickEvent<Document, undefined>): void
custom_expiration_time_unit = $<HTMLSelectOneElement>(
"select:not([multiple])#custom-expiration-time-unit",
).val()!;
set_expires_on_text();
const valid_to_text = valid_to();
settings_components.set_time_input_formatted_text($expires_in, valid_to_text);
toggle_invite_submit_button();
});

View File

@ -1637,6 +1637,22 @@ export function create_realm_group_setting_widget({
});
}
export function set_time_input_formatted_text(
$time_select_elem: JQuery,
formatted_text: string,
): void {
if ($time_select_elem.val() === "custom") {
$time_select_elem.parent().find(".time-input-formatted-description").hide();
$time_select_elem
.parent()
.find(".custom-time-input-formatted-description")
.text(formatted_text);
} else {
$time_select_elem.parent().find(".time-input-formatted-description").show();
$time_select_elem.parent().find(".time-input-formatted-description").text(formatted_text);
}
}
export function set_custom_time_inputs_visibility(
$time_select_elem: JQuery,
time_unit: string,

View File

@ -40,7 +40,7 @@
<option {{#if this.default }}selected{{/if}} name="expires_in" value="{{this.value}}">{{this.description}}</option>
{{/each}}
</select>
<p id="expires_on"></p>
<p class="time-input-formatted-description"></p>
<div id="custom-invite-expiration-time" class="dependent-settings-block custom-time-input-container">
<label for="expires_in" class="modal-field-label">{{t "Custom time" }}</label>
<input type="text" autocomplete="off" name="custom-expiration-time" id="custom-expiration-time-input" class="custom-time-input-value inline-block" value="" maxlength="3"/>
@ -49,7 +49,7 @@
<option name="custom_time_choice" class="custom_time_choice" value="{{this.name}}">{{this.description}}</option>
{{/each}}
</select>
<p id="custom_expires_on"></p>
<p class="custom-time-input-formatted-description"></p>
</div>
</div>
<div class="input-group">