Merge pull request #5801 from RocketChat/fix-input-admin

fix lag when typing on admin inputs
pull/3481/merge
Gabriel Engel 9 years ago committed by GitHub
commit fd9f112af1
  1. 33
      packages/rocketchat-ui-admin/admin/admin.coffee
  2. 422
      packages/rocketchat-ui-admin/admin/admin.html

@ -3,7 +3,7 @@ TempSettings = new Meteor.Collection null
RocketChat.TempSettings = TempSettings
getDefaultSetting = (settingId) ->
return RocketChat.settings.cachedCollectionPrivate.collection.findOne({_id: settingId})
return RocketChat.settings.collectionPrivate.findOne({_id: settingId})
setFieldValue = (settingId, value, type, editor) ->
input = $('.page-settings').find('[name="' + settingId + '"]')
@ -69,16 +69,16 @@ Template.admin.helpers
return result;
appLanguage: (key) ->
if !key
return !RocketChat.settings.get('Language')
selected = (RocketChat.settings.get('Language'))?.split('-').shift().toLowerCase() is key
return selected
return (RocketChat.settings.get('Language'))?.split('-').shift().toLowerCase() is key
group: ->
return TempSettings.findOne { _id: FlowRouter.getParam('group'), type: 'group' }
groupId = FlowRouter.getParam('group')
group = RocketChat.settings.collectionPrivate.findOne { _id: groupId, type: 'group' }
sections: ->
settings = TempSettings.find({ group: FlowRouter.getParam('group') }, {sort: {section: 1, sorter: 1, i18nLabel: 1}}).fetch()
if not group
return
settings = RocketChat.settings.collectionPrivate.find({ group: groupId }, {sort: {section: 1, sorter: 1, i18nLabel: 1}}).fetch()
sections = {}
for setting in settings
@ -93,19 +93,19 @@ Template.admin.helpers
found = 0
for item in i18nDefaultQuery
if TempSettings.findOne(item)?
if RocketChat.settings.collectionPrivate.findOne(item)?
setting.value = TAPi18n.__(setting._id + '_Default')
sections[setting.section or ''] ?= []
sections[setting.section or ''].push setting
sectionsArray = []
group.sections = []
for key, value of sections
sectionsArray.push
group.sections.push
section: key
settings: value
return sectionsArray
return group
i18nDefaultValue: ->
return TAPi18n.__(@_id + '_Default')
@ -154,6 +154,9 @@ Template.admin.helpers
return TempSettings.find(query).count() > 0
isSettingChanged: (id) ->
return RocketChat.TempSettings.findOne({_id: id}, {fields: {changed: 1}}).changed
translateSection: (section) ->
if section.indexOf(':') > -1
return section
@ -259,7 +262,7 @@ Template.admin.helpers
return setting.value is setting.packageValue
Template.admin.events
"change .input-monitor, keyup .input-monitor": (e, t) ->
"change .input-monitor, keyup .input-monitor": _.throttle((e, t) ->
value = _.trim $(e.target).val()
switch @type
@ -272,6 +275,7 @@ Template.admin.events
$set:
value: value
changed: RocketChat.settings.collectionPrivate.findOne(@_id).value isnt value
, 500)
"change select[name=color-editor]": (e, t) ->
value = _.trim $(e.target).val()
@ -287,10 +291,9 @@ Template.admin.events
changed: true
settings = TempSettings.find(query, {fields: {_id: 1, value: 1, packageValue: 1}}).fetch()
console.log(settings)
settings.forEach (setting) ->
oldSetting = RocketChat.settings.cachedCollectionPrivate.collection.findOne({_id: setting._id}, {fields: {value: 1, type:1, editor: 1}})
oldSetting = RocketChat.settings.collectionPrivate.findOne({_id: setting._id}, {fields: {value: 1, type:1, editor: 1}})
setFieldValue(setting._id, oldSetting.value, oldSetting.type, oldSetting.editor)

@ -1,241 +1,241 @@
<template name="admin">
<section class="page-container page-home page-static page-settings">
<header class="fixed-title border-component-color">
{{> burger}}
<h2>
<span class="room-title">{{#with group}}{{label}}{{/with}}</span>
</h2>
<div class="submit">
{{#if hasChanges}}
<button class="button danger discard"><i class="icon-send"></i><span>{{_ "Cancel"}}</span></button>
{{/if}}
<button class="button primary save" disabled="{{not hasChanges}}"><i class="icon-send"></i><span>{{_ "Save_changes"}}</span></button>
</div>
</header>
{{#with group}}
<section class="page-container page-home page-static page-settings">
<header class="fixed-title border-component-color">
{{> burger}}
<h2>
<span class="room-title">{{label}}</span>
</h2>
<div class="submit">
{{#if hasChanges}}
<button class="button danger discard"><i class="icon-send"></i><span>{{_ "Cancel"}}</span></button>
{{/if}}
<button class="button primary save" disabled="{{not hasChanges}}"><i class="icon-send"></i><span>{{_ "Save_changes"}}</span></button>
</div>
</header>
<div class="content background-transparent-dark">
{{#unless hasPermission 'view-privileged-setting'}}
<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
{{else}}
{{#with group}}
<div class="content background-transparent-dark">
{{#unless hasPermission 'view-privileged-setting'}}
<p>{{_ "You_are_not_authorized_to_view_this_page"}}</p>
{{else}}
{{#if description}}
<div class="info">
<p class="settings-description">{{description}}</p>
</div>
{{/if}}
{{/with}}
<div class="rocket-form">
{{#each sections}}
<div class="section {{#if section}}section-collapsed{{/if}}">
{{#if section}}
<div class="section-title">
<div class="section-title-text">
{{translateSection section}}
</div>
<div class="section-title-right">
<button class="button primary expand"><span>{{_ "Expand"}}</span></button>
</div>
</div>
{{/if}}
<div class="section-content border-component-color">
<div class="rocket-form">
{{#each sections}}
<div class="section {{#if section}}section-collapsed{{/if}}">
{{#if section}}
{{#if sectionIsCustomOAuth section}}
<div class="section-helper">
{{#with callbackURL section}}
{{{_ "Custom_oauth_helper" .}}}
{{/with}}
<div class="section-title">
<div class="section-title-text">
{{translateSection section}}
</div>
{{/if}}
<div class="section-title-right">
<button class="button primary expand"><span>{{_ "Expand"}}</span></button>
</div>
</div>
{{/if}}
{{#each settings}}
<div class="input-line double-col {{#if changed}}setting-changed{{/if}}" {{isDisabled}}>
<label class="setting-label">{{label}}</label>
<div class="setting-field">
{{#if $eq type 'string'}}
{{#if multiline}}
<textarea class="input-monitor" name="{{_id}}" rows="4" style="height: auto" {{isDisabled}}>{{value}}</textarea>
{{else}}
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
{{/if}}
{{/if}}
{{#if $eq type 'relativeUrl'}}
<input class="input-monitor" type="text" name="{{_id}}" value="{{relativeUrl value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}}/>
{{/if}}
{{#if $eq type 'password'}}
<input class="input-monitor" type="password" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
{{/if}}
{{#if $eq type 'int'}}
<input class="input-monitor" type="number" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
{{/if}}
{{#if $eq type 'boolean'}}
<label><input class="input-monitor" type="radio" name="{{_id}}" value="1" checked="{{$eq value true}}" {{isDisabled}}/> {{_ "True"}}</label>
<label><input class="input-monitor" type="radio" name="{{_id}}" value="0" checked="{{$eq value false}}" {{isDisabled}}/> {{_ "False"}}</label>
{{/if}}
{{#if $eq type 'select'}}
<div class="select-arrow">
<i class="icon-down-open secondary-font-color"></i>
</div>
<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
{{#each values}}
<option value="{{key}}" selected="{{selectedOption ../_id key}}">{{_ i18nLabel}}</option>
{{/each}}
</select>
{{/if}}
{{#if $eq type 'language'}}
<div class="select-arrow">
<i class="icon-down-open secondary-font-color"></i>
</div>
<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
{{#each languages}}
<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option>
{{/each}}
</select>
{{/if}}
{{#if $eq type 'color'}}
<div class="horizontal">
{{#if $eq editor 'color'}}
<div class="flex-grow-1">
<input class="input-monitor colorpicker-input" type="text" name="{{_id}}" value="{{value}}" autocomplete="off" {{isDisabled}}/>
<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span>
</div>
{{/if}}
{{#if $eq editor 'expression'}}
<div class="flex-grow-1">
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/>
</div>
<div class="section-content border-component-color">
{{#if section}}
{{#if sectionIsCustomOAuth section}}
<div class="section-helper">
{{#with callbackURL section}}
{{{_ "Custom_oauth_helper" .}}}
{{/with}}
</div>
{{/if}}
{{/if}}
{{#each settings}}
<div class="input-line double-col {{#if isSettingChanged _id}}setting-changed{{/if}}" {{isDisabled}}>
<label class="setting-label">{{label}}</label>
<div class="setting-field">
{{#if $eq type 'string'}}
{{#if multiline}}
<textarea class="input-monitor" name="{{_id}}" rows="4" style="height: auto" {{isDisabled}}>{{value}}</textarea>
{{else}}
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
{{/if}}
<div class="color-editor">
<div class="select-arrow">
<i class="icon-down-open secondary-font-color"></i>
</div>
<select name="color-editor">
{{#each allowedTypes}}
<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option>
{{/each}}
</select>
{{/if}}
{{#if $eq type 'relativeUrl'}}
<input class="input-monitor" type="text" name="{{_id}}" value="{{relativeUrl value}}" placeholder="{{placeholder}}" {{isDisabled}} {{isReadonly}}/>
{{/if}}
{{#if $eq type 'password'}}
<input class="input-monitor" type="password" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
{{/if}}
{{#if $eq type 'int'}}
<input class="input-monitor" type="number" name="{{_id}}" value="{{value}}" placeholder="{{placeholder}}" {{isDisabled}}/>
{{/if}}
{{#if $eq type 'boolean'}}
<label><input class="input-monitor" type="radio" name="{{_id}}" value="1" checked="{{$eq value true}}" {{isDisabled}}/> {{_ "True"}}</label>
<label><input class="input-monitor" type="radio" name="{{_id}}" value="0" checked="{{$eq value false}}" {{isDisabled}}/> {{_ "False"}}</label>
{{/if}}
{{#if $eq type 'select'}}
<div class="select-arrow">
<i class="icon-down-open secondary-font-color"></i>
</div>
</div>
<div class="settings-description">Variable name: {{getColorVariable _id}}</div>
{{/if}}
{{#if $eq type 'font'}}
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/>
{{/if}}
{{#if $eq type 'code'}}
{{#if isDisabled.disabled}}
{{> CodeMirror name=_id options=(getEditorOptions true) code=(i18nDefaultValue) }}
{{else}}
<div class="code-mirror-box" data-editor-id="{{_id}}">
<div class="title">
{{label}}
</div>
{{> CodeMirror name=_id options=getEditorOptions code=value }}
{{setEditorOnBlur _id}}
<div class="buttons">
<button class="button primary button-fullscreen">Full Screen</button>
<button class="button primary button-restore">Exit Full Screen</button>
<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
{{#each values}}
<option value="{{key}}" selected="{{selectedOption ../_id key}}">{{_ i18nLabel}}</option>
{{/each}}
</select>
{{/if}}
{{#if $eq type 'language'}}
<div class="select-arrow">
<i class="icon-down-open secondary-font-color"></i>
</div>
<select class="input-monitor" name="{{_id}}" {{isDisabled}}>
{{#each languages}}
<option value="{{key}}" selected="{{appLanguage key}}" dir="auto">{{name}}</option>
{{/each}}
</select>
{{/if}}
{{#if $eq type 'color'}}
<div class="horizontal">
{{#if $eq editor 'color'}}
<div class="flex-grow-1">
<input class="input-monitor colorpicker-input" type="text" name="{{_id}}" value="{{value}}" autocomplete="off" {{isDisabled}}/>
<span class="colorpicker-swatch border-component-color" style="background-color: {{value}}"></span>
</div>
{{/if}}
{{#if $eq editor 'expression'}}
<div class="flex-grow-1">
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/>
</div>
{{/if}}
<div class="color-editor">
<div class="select-arrow">
<i class="icon-down-open secondary-font-color"></i>
</div>
<select name="color-editor">
{{#each allowedTypes}}
<option value="{{.}}" selected="{{$eq ../editor .}}">{{_ .}}</option>
{{/each}}
</select>
</div>
</div>
<div class="settings-description">Variable name: {{getColorVariable _id}}</div>
{{/if}}
{{/if}}
{{#if $eq type 'action'}}
{{#if hasChanges section}}
<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span>
{{else}}
<button type="button" class="button primary action" data-setting="{{_id}}" data-action="{{value}}" {{isDisabled}}>{{_ actionText}}</button>
{{#if $eq type 'font'}}
<input class="input-monitor" type="text" name="{{_id}}" value="{{value}}" {{isDisabled}}/>
{{/if}}
{{/if}}
{{#if $eq type 'asset'}}
{{#if value.url}}
<div class="settings-file-preview">
<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div>
<div class="action">
<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button>
{{#if $eq type 'code'}}
{{#if isDisabled.disabled}}
{{> CodeMirror name=_id options=(getEditorOptions true) code=(i18nDefaultValue) }}
{{else}}
<div class="code-mirror-box" data-editor-id="{{_id}}">
<div class="title">
{{label}}
</div>
{{> CodeMirror name=_id options=getEditorOptions code=value }}
{{setEditorOnBlur _id}}
<div class="buttons">
<button class="button primary button-fullscreen">Full Screen</button>
<button class="button primary button-restore">Exit Full Screen</button>
</div>
</div>
</div>
{{else}}
<div class="settings-file-preview">
<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div>
<div class="action">
<div class="button primary">{{_ 'Select_file'}}
<input type="file" accept="{{assetAccept fileConstraints}}" />
{{/if}}
{{/if}}
{{#if $eq type 'action'}}
{{#if hasChanges section}}
<span style="line-height: 40px" class="secondary-font-color">{{_ "Save_to_enable_this_action"}}</span>
{{else}}
<button type="button" class="button primary action" data-setting="{{_id}}" data-action="{{value}}" {{isDisabled}}>{{_ actionText}}</button>
{{/if}}
{{/if}}
{{#if $eq type 'asset'}}
{{#if value.url}}
<div class="settings-file-preview">
<div class="preview" style="background-image:url({{value.url}}?_dc={{random}});"></div>
<div class="action">
<button type="button" class="button danger delete-asset"><i class="icon-trash secondary-font-color"></i>{{_ 'Delete'}}</button>
</div>
</div>
{{else}}
<div class="settings-file-preview">
<div class="preview no-file background-transparent-light secondary-font-color"><i class="icon-upload secondary-font-color"></i></div>
<div class="action">
<div class="button primary">{{_ 'Select_file'}}
<input type="file" accept="{{assetAccept fileConstraints}}" />
</div>
</div>
</div>
{{/if}}
{{/if}}
{{#if $eq type 'roomPick'}}
<div>
{{> inputAutocomplete settings=autocompleteRoom id=_id name=_id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}}
<ul class="selected-rooms">
{{#each selectedRooms}}
<li class="remove-room" data-setting={{../_id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li>
{{/each}}
</ul>
</div>
{{/if}}
{{/if}}
{{#if $eq type 'roomPick'}}
<div>
{{> inputAutocomplete settings=autocompleteRoom id=_id name=_id class="search autocomplete" autocomplete="off" disabled=isDisabled.disabled}}
<ul class="selected-rooms">
{{#each selectedRooms}}
<li class="remove-room" data-setting={{../_id}}>{{name}} <i class="icon-cancel secondary-font-color"></i></li>
{{/each}}
</ul>
</div>
{{/if}}
{{#if description}}
<div class="settings-description">{{{RocketChatMarkdown description}}}</div>
{{/if}}
{{#if alert}}
<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ alert}}}</div>
{{/if}}
</div>
{{#unless $eq group._id 'Assets'}}
{{#unless isDefaultValue _id}}
<button text="{{_ 'Reset'}}" data-setting="{{_id}}" class="reset-setting button danger">
<i class="icon-ccw secondary-font-color color-error-contrast"></i>
</button>
{{#if description}}
<div class="settings-description">{{{RocketChatMarkdown description}}}</div>
{{/if}}
{{#if alert}}
<div class="settings-alert pending-color pending-background pending-border"><i class="icon-attention secondary-font-color"></i>{{{_ alert}}}</div>
{{/if}}
</div>
{{#unless $eq type 'asset'}}
{{#unless isDefaultValue _id}}
<button text="{{_ 'Reset'}}" data-setting="{{_id}}" class="reset-setting button danger">
<i class="icon-ccw secondary-font-color color-error-contrast"></i>
</button>
{{/unless}}
{{/unless}}
{{/unless}}
</div>
{{/each}}
{{#unless $eq group._id 'Assets'}}
<div class="input-line double-col">
<label class="setting-label">{{_ "Reset_section_settings"}}</label>
<div class="setting-field">
<button data-section="{{section}}" class="reset-group button danger">
{{_ "Reset"}}
</button>
</div>
</div>
{{/unless}}
{{#if section}}
{{#if sectionIsCustomOAuth section}}
<div class="submit">
<button class="button danger remove-custom-oauth"><span>{{_ "Remove_custom_oauth"}}</span></button>
{{/each}}
{{#unless $eq ../../_id 'Assets'}}
<div class="input-line double-col">
<label class="setting-label">{{_ "Reset_section_settings"}}</label>
<div class="setting-field">
<button data-section="{{section}}" class="reset-group button danger">
{{_ "Reset"}}
</button>
</div>
</div>
{{/unless}}
{{#if section}}
{{#if sectionIsCustomOAuth section}}
<div class="submit">
<button class="button danger remove-custom-oauth"><span>{{_ "Remove_custom_oauth"}}</span></button>
</div>
{{/if}}
{{/if}}
{{/if}}
</div>
</div>
{{/each}}
<div class="submit">
{{#if $eq ../../_id 'OAuth'}}
<button class="button secondary refresh-oauth"><span>{{_ "Refresh_oauth_services"}}</span></button>
<button class="button secondary add-custom-oauth"><span>{{_ "Add_custom_oauth"}}</span></button>
{{/if}}
{{#if $eq ../../_id 'Assets'}}
<button class="button refresh-clients"><span>{{_ "Apply_and_refresh_all_clients"}}</span></button>
{{/if}}
</div>
{{/each}}
<div class="submit">
{{#if $eq group._id 'OAuth'}}
<button class="button secondary refresh-oauth"><span>{{_ "Refresh_oauth_services"}}</span></button>
<button class="button secondary add-custom-oauth"><span>{{_ "Add_custom_oauth"}}</span></button>
{{/if}}
{{#if $eq group._id 'Assets'}}
<button class="button refresh-clients"><span>{{_ "Apply_and_refresh_all_clients"}}</span></button>
{{/if}}
</div>
</div>
{{/unless}}
</div>
</section>
{{/unless}}
</div>
</section>
{{/with}}
</template>

Loading…
Cancel
Save