user settings: Add separate alert-save widget for profile custom fields.

Fixes part of #12748
This commit is contained in:
Yashashvi Dave 2019-07-11 01:48:45 +05:30 committed by Tim Abbott
parent 3c16b73fcd
commit 5506b16fa8
4 changed files with 51 additions and 25 deletions

View File

@ -74,14 +74,28 @@ function settings_change_error(message, xhr) {
ui_report.error(message, xhr, $('#account-settings-status').expectOne());
}
function update_custom_profile_field(field, method) {
var field_id;
if (method === channel.del) {
field_id = field;
} else {
field_id = field.id;
}
var spinner = $('.custom_user_field[data-field-id="' + field_id +
'"] .custom-field-status').expectOne();
loading.make_indicator(spinner, {text: 'Saving ...'});
settings_ui.do_settings_change(method, "/json/users/me/profile_data",
{data: JSON.stringify([field])}, spinner);
}
function update_user_custom_profile_fields(fields, method) {
if (method === undefined) {
blueslip.error("Undefined method in update_user_custom_profile_fields");
}
var spinner = $("#custom-field-status").expectOne();
loading.make_indicator(spinner, {text: 'Saving ...'});
settings_ui.do_settings_change(method, "/json/users/me/profile_data",
{data: JSON.stringify(fields)}, spinner);
_.each(fields, function (field) {
update_custom_profile_field(field, method);
});
}
exports.append_custom_profile_fields = function (element_id, user_id) {

View File

@ -651,6 +651,16 @@ input[type=checkbox].inline-block {
text-align: left;
}
#account-settings .custom-profile-fields-form .custom_user_field label {
min-width: fit-content;
}
#account-settings .alert-notification.custom-field-status {
margin-top: 0px;
font-size: 14px;
margin-bottom: 4px;
}
#realm_notifications_stream_label > button,
#realm_signup_notifications_stream_label > button {
margin: 0px 5px;

View File

@ -141,7 +141,6 @@
</form>
<h3 class="inline-block" id="custom-field-header" {{#unless page_params.custom_profile_fields}}style="display: none"{{/unless}}>{{t "Profile" }}</h3>
<div class="alert-notification" id="custom-field-status"></div>
<form class="form-horizontal custom-profile-fields-form grid"></form>
<button class="button rounded sea-green w-200 block" id="show_my_user_profile_modal">
{{t 'Preview profile' }}

View File

@ -1,24 +1,27 @@
<div class="user-name-section custom_user_field" name="{{ field.name }}" data-field-id="{{ field.id }}">
<label for="{{ field.name }}" class="title">{{ field.name }}</label>
{{#if is_long_text_field}}
<textarea maxlength="500" class="custom_user_field_value">{{ field_value.value }}</textarea>
{{else if is_choice_field}}
<select class="custom_user_field_value">
<option value=""></option>
{{#each field_choices}}
<option value="{{ this.value }}" {{#if this.selected}}selected{{/if}}>{{ this.text }}</option>
{{/each}}
</select>
{{else if is_user_field }}
<div class="pill-container person_picker">
<div class="input" contenteditable="true"></div>
<label class="inline-block" for="{{ field.name }}" class="title">{{ field.name }}</label>
<div class="alert-notification custom-field-status"></div>
<div class="field">
{{#if is_long_text_field}}
<textarea maxlength="500" class="custom_user_field_value">{{ field_value.value }}</textarea>
{{else if is_choice_field}}
<select class="custom_user_field_value">
<option value=""></option>
{{#each field_choices}}
<option value="{{ this.value }}" {{#if this.selected}}selected{{/if}}>{{ this.text }}</option>
{{/each}}
</select>
{{else if is_user_field }}
<div class="pill-container person_picker">
<div class="input" contenteditable="true"></div>
</div>
{{else if is_date_field }}
<input class="custom_user_field_value datepicker" data-field-id="{{ field.id }}" type="text"
value="{{ field_value.value }}" />
<span class="remove_date"><i class="fa fa-close"></i></span>
{{else}}
<input class="custom_user_field_value" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" />
{{/if}}
</div>
{{else if is_date_field }}
<input class="custom_user_field_value datepicker" data-field-id="{{ field.id }}" type="text"
value="{{ field_value.value }}" />
<span class="remove_date"><i class="fa fa-close"></i></span>
{{else}}
<input class="custom_user_field_value" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" />
{{/if}}
<div class="field_hint">{{ field.hint }}</div>
</div>