Improved rerendering on translation changes.

app/assets/javascripts/app/controllers/package.coffee

@@ -16,15 +16,16 @@ class Index extends App.ControllerContent
     @ajax(
       id:    'packages',
       type:  'GET',
-      url:   @apiPath + '/packages',
+      url:   "#{@apiPath}/packages",
       processData: true,
       success: (data) =>
-        @render(data)
+        @packages = data
+        @render()
       )
 
-  render: (data) ->
+  render: ->
 
-    for item in data.packages
+    for item in @packages
       item.action = []
       if item.state == 'installed'
 #        item.action = ['uninstall', 'deactivate']
@@ -36,7 +37,7 @@ class Index extends App.ControllerContent
 
     @html App.view('package')(
       head:     'Dashboard'
-      packages: data.packages
+      packages: @packages
     )
 
   action: (e) ->
@@ -48,12 +49,12 @@ class Index extends App.ControllerContent
 
     if httpType
       @ajax(
-        id:    'packages',
+        id:    'packages'
-        type:  httpType,
+        type:  httpType
-        url:   @apiPath + '/packages',
+        url:   "#{@apiPath}/packages",
-        data:  JSON.stringify( { id: id } ),
+        data:  JSON.stringify( { id: id } )
-        processData: false,
+        processData: false
-        success: (data) =>
+        success: =>
           @load()
         )
 

app/assets/javascripts/app/controllers/session.coffee

@@ -1,7 +1,6 @@
 class Index extends App.ControllerContent
-  divClass: 'lala'
   events:
-    'click [data-type="delete"]': 'destroy'
+    'click .js-delete': 'destroy'
 
   constructor: ->
     super
@@ -27,21 +26,20 @@ class Index extends App.ControllerContent
       url:   @apiPath + '/sessions'
       success: (data) =>
         @stopLoading()
-        @render(data)
+        App.Collection.loadAssets(data.assets)
+        @sessions = data.sessions
+        @render()
     )
 
-  render: (data) ->
+  render: ->
-
-    # load assets
-    App.Collection.loadAssets( data.assets )
 
     # fill users
-    for session in data.sessions
+    for session in @sessions
       if session.data && session.data.user_id
         session.data.user = App.User.find(session.data.user_id)
 
     @html App.view('session')(
-      sessions: data.sessions
+      sessions: @sessions
     )
 
   destroy: (e) ->

app/assets/javascripts/app/controllers/translation.coffee

@@ -11,47 +11,87 @@ class Index extends App.ControllerContent
     return if !@authenticate()
 
     @title 'Translations', true
-
+    @locale = App.i18n.get()
     @render()
+    @bind(
+      'i18n:translation_update',
+      =>
+        @load()
+    )
 
   render: =>
-    @html App.view('translation/index')()
-    options = {}
     locales = App.Locale.all()
+    currentLanguage = @locale
     for locale in locales
-      options[locale.locale] = locale.name
+      if locale.locale is @locale
-    configure_attributes = [
+        currentLanguage = locale.name
-      { name: 'locale', display: '', tag: 'select', null: false, class: 'input', options: options, default: App.i18n.get()  },
+    @html App.view('translation/index')(
-    ]
+      currentLanguage: currentLanguage
-    load = (params) =>
+    )
+    @load()
+
+  load: =>
+    @ajax(
+      id:    'translations_admin'
+      type:  'GET'
+      url:   "#{@apiPath}/translations/admin/lang/#{@locale}"
+      processData: true
+      success: (data, status, xhr) =>
+        @times                = []
+        @stringsNotTranslated = []
+        @stringsTranslated    = []
+        for item in data.list
+
+          # if item has changed
+          if item[2] isnt item[3]
+            @showAction()
+
+          # collect items
+          if item[4] is 'time'
+            @times.push item
+          else
+            if item[2] is ''
+              @stringsNotTranslated.push item
+            else
+              @stringsTranslated.push item
+
+        if !@translationToDo
           @translationToDo = new TranslationToDo(
             el:     @$('.js-ToDo')
-        locale: params.locale
+            locale: @locale
           )
+        @translationToDo.update(
+          stringsNotTranslated: @stringsNotTranslated
+          stringsTranslated:    @stringsTranslated
+          times:                @times
+        )
+        if !@translationList
           @translationList = new TranslationList(
             el:     @$('.js-List')
-        locale: params.locale
+            locale: @locale
+          )
+        @translationList.update(
+          stringsNotTranslated: @stringsNotTranslated
+          stringsTranslated:    @stringsTranslated
+          times:                @times
+        )
     )
 
-    new App.ControllerForm(
+  showAction: =>
-      el:        @$('.language')
+    @$('.js-changes').removeClass('hidden')
-      model:     { configure_attributes: configure_attributes }
-      autofocus: false
-      handlers:  [load]
-    )
 
   release: =>
     rerender = ->
       App.Event.trigger('ui:rerender')
-    if @translationToDo.changes() || @translationList.changes()
+      console.log('rr')
+    if @translationList.changes()
       App.Delay.set(rerender, 400)
+    console.log('111', @translationList.changes())
 
   hideAction: =>
     @el.closest('.content').find('.js-changes').addClass('hidden')
 
   pushChanges: =>
-    locale = @$('[name="locale"]').val()
-
     @loader = new App.ControllerModalLoading(
       head:      'Push my changes'
       message:   'Pushing translations to i18n.zammad.com'
@@ -62,7 +102,7 @@ class Index extends App.ControllerContent
       id:          'translations'
       type:        'PUT'
       url:         "#{@apiPath}/translations/push"
-      data:        JSON.stringify(locale: locale)
+      data:        JSON.stringify(locale: @locale)
       processData: false
       success: (data, status, xhr) =>
         @loader.update('Thanks for contributing!')
@@ -73,8 +113,6 @@ class Index extends App.ControllerContent
     )
 
   resetChanges: =>
-    locale = @$('[name="locale"]').val()
-
     @loader = new App.ControllerModalLoading(
       head:      'Reset changes'
       message:   'Reseting changes...'
@@ -85,11 +123,10 @@ class Index extends App.ControllerContent
       id:          'translations'
       type:        'POST'
       url:         "#{@apiPath}/translations/reset"
-      data:        JSON.stringify(locale: locale)
+      data:        JSON.stringify(locale: @locale)
       processData: false
       success: (data, status, xhr) =>
-        App.Event.trigger('i18n:translation_todo_reload')
+        App.Event.trigger('i18n:translation_update')
-        App.Event.trigger('i18n:translation_list_reload')
         @hideAction()
         @loader.hide()
       error: =>
@@ -97,8 +134,6 @@ class Index extends App.ControllerContent
     )
 
   syncChanges: =>
-    locale = @$('[name="locale"]').val()
-
     @loader = new App.ControllerModalLoading(
       head:      'Get latest translations'
       message:   'Getting latest translations from i18n.zammad.com'
@@ -106,8 +141,7 @@ class Index extends App.ControllerContent
     )
 
     hide = =>
-      App.Event.trigger('i18n:translation_todo_reload')
+      App.Event.trigger('i18n:translation_update')
-      App.Event.trigger('i18n:translation_list_reload')
       @hideAction()
       @loader.hide(1)
 
@@ -131,19 +165,17 @@ class Index extends App.ControllerContent
       )
 
 class TranslationToDo extends App.Controller
-  hasChanges: false
   events:
     'click .js-create':  'create'
     'click .js-theSame': 'same'
 
   constructor: ->
     super
+
+  update: (data) =>
+    for key, value of data
+      @[key] = value
     @render()
-    @bind(
-      'i18n:translation_todo_reload',
-      =>
-        @render()
-    )
 
   render: =>
 
@@ -151,32 +183,27 @@ class TranslationToDo extends App.Controller
       @html App.view('translation/english')()
       return
 
-    if !App.i18n.getNotTranslated(@locale)
+    if !App.i18n.getNotTranslated(@locale) && _.isEmpty(@stringsNotTranslated)
       @html ''
       return
 
-    listNotTranslated = []
+    if App.i18n.getNotTranslated(@locale)
       for key, value of App.i18n.getNotTranslated(@locale)
         item = [ '', key, '', '']
-      listNotTranslated.push item
+        @stringsNotTranslated.push item
 
     @html App.view('translation/todo')(
-      list: listNotTranslated
+      list: @stringsNotTranslated
     )
 
-  showAction: =>
-    @el.closest('.content').find('.js-changes').removeClass('hidden')
-
-  changes: =>
-    @hasChanges
-
   create: (e) =>
     e.preventDefault()
-    @hasChanges = true
-    @showAction()
     field  = $(e.target).closest('tr').find('.js-Item')
+    id     = field.data('id')
     source = field.data('source')
+    format = 'string'
     target = field.val()
+    return if !target
 
     # remove from not translated list
     $(e.target).closest('tr').remove()
@@ -195,20 +222,27 @@ class TranslationToDo extends App.Controller
       target:         target
       target_initial: ''
 
+    if id
+      method    = 'PUT'
+      params.id = id
+      url       = "#{@apiPath}/translations/#{id}"
+    else
+      method = 'POST'
+      url    = "#{@apiPath}/translations"
+
     @ajax(
       id:          'translations'
-      type:        'POST'
+      type:        method
-      url:         @apiPath + '/translations'
+      url:         url
       data:        JSON.stringify(params)
       processData: false
       success: (data, status, xhr) ->
-        App.Event.trigger('i18n:translation_list_reload')
+        App.Event.trigger('i18n:translation_update')
     )
 
   same: (e) =>
     e.preventDefault()
     @hasChanges = true
-    @showAction()
     field  = $(e.target).closest('tr').find('.js-Item')
     source = field.data('source')
 
@@ -236,65 +270,33 @@ class TranslationToDo extends App.Controller
       data:        JSON.stringify(params)
       processData: false
       success: (data, status, xhr) ->
-        App.Event.trigger('i18n:translation_list_reload')
+        App.Event.trigger('i18n:translation_update')
     )
 
 class TranslationList extends App.Controller
   hasChanges: false
   events:
-    'blur .js-translated input':          'update'
+    'blur .js-translated input':          'updateItem'
-    'click .js-translated .js-Reset':     'reset'
+    'click .js-translated .js-Reset':     'resetItem'
 
   constructor: ->
     super
-    @load()
-    @bind(
-      'i18n:translation_list_reload',
-      =>
-        @load()
-    )
 
-  load: =>
+  update: (data) =>
-    @startLoading()
+    for key, value of data
-    @ajax(
+      @[key] = value
-      id:    'translations_admin'
+    @render()
-      type:  'GET'
-      url:   @apiPath + "/translations/admin/lang/#{@locale}"
-      processData: true
-      success: (data, status, xhr) =>
-        @stopLoading()
-        @render(data)
-    )
-
-  render: (data = {}) =>
-    @strings = []
-    @times   = []
-    for item in data.list
-      if item[4] is 'time'
-        @times.push item
-      else
-        @strings.push item
 
+  render: =>
     @html App.view('translation/list')(
       times:   @times
-      strings: @strings
+      strings: @stringsTranslated
     )
-    ui = @
-    @changesAvailable = false
-    @$('.js-Item').each( (e) ->
-      id = $(@).data('id')
-      ui.updateRow(id)
-    )
-    if @changesAvailable
-      @showAction()
-
-  showAction: =>
-    @el.closest('.content').find('.js-changes').removeClass('hidden')
 
   changes: =>
     @hasChanges
 
-  reset: (e) ->
+  resetItem: (e) ->
     e.preventDefault()
     @hasChanges = true
     field       = $(e.target).closest('tr').find('.js-Item')
@@ -303,32 +305,6 @@ class TranslationList extends App.Controller
     initial     = field.data('initial')
     format      = field.data('format')
 
-    # if it's translated by user it self, delete it
-    if !initial || initial is ''
-
-      # locale reset
-      $(e.target).closest('tr').remove()
-
-      # update runtime if same language is used
-      if App.i18n.get() is @locale
-        App.i18n.setMap( source, '', format )
-
-      # remote reset
-      params =
-        id: id
-      @ajax(
-        id:          'translations'
-        type:        'DELETE'
-        url:         @apiPath + '/translations/' + id
-        data:        JSON.stringify(params)
-        processData: false
-        success: =>
-          App.i18n.setNotTranslated( @locale, source )
-          App.Event.trigger('i18n:translation_todo_reload')
-      )
-      return
-
-
     # update runtime if same language is used
     if App.i18n.get() is @locale
       App.i18n.setMap(source, initial, format)
@@ -345,17 +321,22 @@ class TranslationList extends App.Controller
     @ajax(
       id:          'translations'
       type:        'PUT'
-      url:         @apiPath + '/translations/' + id
+      url:         "#{@apiPath}/translations/#{id}"
       data:        JSON.stringify(params)
       processData: false
+      success: (data, status, xhr) ->
+        App.Event.trigger('i18n:translation_update')
     )
 
-  update: (e) ->
+  updateItem: (e) ->
     e.preventDefault()
-    id     = $( e.target ).data('id')
+    @hasChanges = true
-    source = $( e.target ).data('source')
+    field  = $(e.target).closest('tr').find('.js-Item')
-    format = $( e.target ).data('format')
+    id     = field.data('id')
-    target = $( e.target ).val()
+    source = field.data('source')
+    format = field.data('format')
+    target = field.val()
+    return if !target
 
     # local update
     @updateRow(id)
@@ -372,9 +353,11 @@ class TranslationList extends App.Controller
     @ajax(
       id:          'translations'
       type:        'PUT'
-      url:         @apiPath + '/translations/' + id
+      url:         "#{@apiPath}/translations/#{id}"
       data:        JSON.stringify(params)
       processData: false
+      success: (data, status, xhr) ->
+        App.Event.trigger('i18n:translation_update')
     )
 
   updateRow: (id) =>
@@ -384,11 +367,10 @@ class TranslationList extends App.Controller
     reset   = field.closest('tr').find('.js-Reset')
     if current isnt initial
       @changesAvailable = true
-      @showAction()
+      reset.removeClass('hidden')
-      reset.show()
       reset.closest('tr').addClass('warning')
     else
-      reset.hide()
+      reset.addClass('hidden')
       reset.closest('tr').removeClass('warning')
 
 App.Config.set('Translation', { prio: 1800, parent: '#system', name: 'Translations', target: '#system/translation', controller: Index, role: ['Admin'] }, 'NavBarAdmin' )

app/assets/javascripts/app/views/generic/navbar_l2.jst.eco

@@ -1,17 +0,0 @@
-<div class="sidebar <%= @className %>">
-
-  <% if @groups: %>
-  <% for group in @groups: %>
-  <h2><%- @T(group.name) %></h2>
-
-  <ul class="nav nav-pills nav-stacked">
-  <% if group.items: %>
-  <% for item in group.items: %>
-    <li <% if item.active: %>class="active"<% end %>><a href="<%= item.target %>"><%- @T(item.name) %></a></li>
-  <% end %>
-  <% end %>
-  </ul>
-  <% end %>
-
-</div>
-<div class="main flex"></div>

app/assets/javascripts/app/views/generic/navbar_level2/index.jst.eco

@@ -0,0 +1,2 @@
+<div class="sidebar <%= @className %>"></div>
+<div class="main flex"></div>

app/assets/javascripts/app/views/generic/navbar_level2/navbar.jst.eco

@@ -0,0 +1,12 @@
+<% if @groups: %>
+  <% for group in @groups: %>
+    <h2><%- @T(group.name) %></h2>
+    <ul class="nav nav-pills nav-stacked">
+<% if group.items: %>
+  <% for item in group.items: %>
+    <li <% if item.active: %>class="active"<% end %>><a href="<%= item.target %>"><%- @T(item.name) %></a></li>
+  <% end %>
+<% end %>
+    </ul>
+  <% end %>
+<% end %>

app/assets/javascripts/app/views/generic/tabs.jst.eco

@@ -11,10 +11,12 @@
   <% end %>
 </div>
 <div class="page-content">
+  <% if @tabs.length > 1: %>
     <ul class="nav nav-tabs" role="tablist">
     <% for tab in @tabs: %>
       <li><a href="#<%= tab.target %>" role="tab" data-toggle="tab"><%- @T( tab.name ) %></a></li>
     <% end %>
     </ul>
+  <% end %>
   <div class="tab-content"></div>
 </div>

app/assets/javascripts/app/views/session.jst.eco

@@ -21,7 +21,7 @@
         <td title="<%= session.data.remote_id %>"><% if session.data.geo && session.data.geo.country_name: %><%= session.data.geo.country_name %> <%= session.data.geo.city_name %><% else: %><%= session.data.remote_id %><% end %></td>
         <td><%- @humanTime(session.created_at) %></td>
         <td><%- @humanTime(session.updated_at) %></td>
-        <td><a href="#" data-session-id="<%- session.id %>" data-type="delete" title="<%- @Ti('Delete') %>"><%- @Icon('trash') %></a></td>
+        <td><a href="#" data-session-id="<%- session.id %>" class="js-delete" title="<%- @Ti('Delete') %>"><%- @Icon('trash') %></a></td>
       </tr>
       <% end %>
     </tbody>

app/assets/javascripts/app/views/translation/index.jst.eco

@@ -1,12 +1,11 @@
 <div class="page-header">
   <div class="page-header-title">
-    <h1><%- @T('Translations') %> <small></small></h1>
+    <h1><%- @T('Translations') %> <small><%= @currentLanguage %></small></h1>
   </div>
   <div class="page-header-meta">
     <a class="btn btn--success js-syncChanges"><%- @T('Get latest translations') %></a>
     <a class="btn btn--danger hidden js-changes js-resetChanges"><%- @T('Reset changes') %></a>
     <a class="btn btn--primary hidden js-changes js-pushChanges"><%- @T('Push my changes') %></a>
-    <div class="language"></div>
   </div>
 </div>
 <div class="page-content">

app/assets/javascripts/app/views/translation/list.jst.eco

@@ -9,15 +9,14 @@
     </tr>
   </thead>
   <tbody>
-   <% if @times: %>
   <% for time in @times: %>
-      <tr>
+    <% changed = false %>
-        <td title="<%= time[1] %>"><%= time[1] %></td>
+    <% changed = true if time[2] isnt time[3] %>
-        <td class="translationOverview-itemContainer"><input class="js-Item translationOverview-item form-control" value="<%= time[2] %>" data-source="<%= time[1] %>" data-initial="<%= time[3] %>" data-id="<%= time[0] %>" data-format="<%= time[4] %>"></td>
+    <tr <% if changed: %>class="warning"<% end %>>
-        <td title="<%= time[3] %>"><%= time[3]%></td>
+      <td title="<%= time[1] %>"><%= time[1] %>
-        <td><a href="#" class="js-Reset"><%- @T('Reset') %></a></td>
+      <td class="translationOverview-itemContainer"><input class="js-Item translationOverview-item form-control" value="<%= time[2] %>" data-source="<%= time[1] %>" data-initial="<%= time[3] %>" data-id="<%= time[0] %>" data-format="<%= time[4] %>">
-      </tr>
+      <td title="<%= time[3] %>"><%= time[3]%>
-      <% end %>
+      <td><a href="#" class="js-Reset <% if !changed: %>hidden<% end %>"><%- @T('Reset') %></a>
   <% end %>
   </tbody>
 </table>
@@ -33,15 +32,14 @@
     </tr>
   </thead>
   <tbody>
-    <% if @strings: %>
     <% for item in @strings: %>
-      <tr>
+    <% changed = false %>
-        <td title="<%= item[1] %>"><%= item[1] %></td>
+    <% changed = true if item[2] isnt item[3] %>
-        <td class="translationOverview-itemContainer"><input class="js-Item translationOverview-item form-control" value="<%= item[2] %>" data-source="<%= item[1] %>" data-initial="<%= item[3] %>" data-id="<%= item[0] %>" data-format="<%= item[4] %>"></td>
+    <tr <% if changed: %>class="warning"<% end %>>
-        <td title="<%= item[3] %>"><%= item[3]%></td>
+      <td title="<%= item[1] %>"><%= item[1] %>
-        <td><a href="#" class="js-Reset"><%- @T('Reset') %></a></td>
+      <td class="translationOverview-itemContainer"><input class="js-Item translationOverview-item form-control" value="<%= item[2] %>" data-source="<%= item[1] %>" data-initial="<%= item[3] %>" data-id="<%= item[0] %>" data-format="<%= item[4] %>">
-      </tr>
+      <td title="<%= item[3] %>"><%= item[3]%>
-      <% end %>
+      <td><a href="#" class="js-Reset <% if !changed: %>hidden<% end %>"><%- @T('Reset') %></a>
     <% end %>
   </tbody>
 </table>

app/assets/javascripts/app/views/translation/todo.jst.eco

@@ -8,14 +8,11 @@
     </tr>
   </thead>
   <tbody>
-    <% if @list: %>
     <% for item in @list: %>
     <tr>
-        <td title="<%= item[1] %>"><%= item[1] %></td>
+      <td title="<%= item[1] %>"><%= item[1] %>
-        <td class="translationOverview-itemContainer"><input class="js-Item translationOverview-item form-control" value="<%= item[2] %>" data-source="<%= item[1] %>"></td>
+      <td class="translationOverview-itemContainer"><input class="js-Item translationOverview-item form-control" value="<%= item[2] %>" data-source="<%= item[1] %>" data-id="<%= item[0] %>">
-        <td><a href="#" class="js-create"><%- @T('Create') %></a> / <a href="#" class="js-theSame"><%- @T('is the same') %></a></td>
+      <td><a href="#" class="js-create"><%- @T('Create') %></a> / <a href="#" class="js-theSame"><%- @T('is the same') %></a>
-      </tr>
-      <% end %>
     <% end %>
   </tbody>
 </table>

app/controllers/translations_controller.rb

@@ -4,8 +4,8 @@ class TranslationsController < ApplicationController
   before_action :authentication_check, except: [:load]
 
   # GET /translations/lang/:locale
-  def load
+  def lang
-    render json: Translation.list( params[:locale] )
+    render json: Translation.lang(params[:locale])
   end
 
   # PUT /translations/push
@@ -36,7 +36,7 @@ class TranslationsController < ApplicationController
   # GET /translations/admin/lang/:locale
   def admin
     return if deny_if_not_role(Z_ROLENAME_ADMIN)
-    render json: Translation.list( params[:locale], true )
+    render json: Translation.lang(params[:locale], true)
   end
 
   # GET /translations

app/models/translation.rb

@@ -154,24 +154,28 @@ reset translations to origin
 
 get list of translations
 
-  list = Translation.list('de-de')
+  list = Translation.lang('de-de')
 
 =end
 
-  def self.list(locale, admin = false)
+  def self.lang(locale, admin = false)
 
     # use cache if not admin page is requested
     if !admin
       data = cache_get(locale)
+      return data if data
     end
-    if !data
 
     # show total translations as reference count
     data = {
       'total' => Translation.where(locale: 'de-de').count,
     }
     list = []
+    if admin
       translations = Translation.where(locale: locale.downcase).order(:source)
+    else
+      translations = Translation.where(locale: locale.downcase).where.not(target: '').order(:source)
+    end
     translations.each { |item|
       if admin
         translation_item = [
@@ -198,7 +202,6 @@ get list of translations
     if !admin
       cache_set(locale, data)
     end
-    end
 
     data
   end
@@ -237,14 +240,14 @@ translate strings in ruby context, e. g. for notifications
   end
 
   def cache_clear
-    Cache.delete( 'TranslationMap::' + locale.downcase )
+    Cache.delete('TranslationMapOnlyContent::' + locale.downcase)
   end
 
   def self.cache_set(locale, data)
-    Cache.write( 'TranslationMap::' + locale.downcase, data )
+    Cache.write('TranslationMapOnlyContent::' + locale.downcase, data)
   end
 
   def self.cache_get(locale)
-    Cache.get( 'TranslationMap::' + locale.downcase )
+    Cache.get('TranslationMapOnlyContent::' + locale.downcase)
   end
 end

config/routes/translation.rb

@@ -4,7 +4,7 @@ Zammad::Application.routes.draw do
   match api_path + '/translations/push',               to: 'translations#push',  via: :put
   match api_path + '/translations/sync/:locale',       to: 'translations#sync',  via: :get
   match api_path + '/translations/reset',              to: 'translations#reset', via: :post
-  match api_path + '/translations/lang/:locale',       to: 'translations#load',  via: :get
+  match api_path + '/translations/lang/:locale',       to: 'translations#lang',  via: :get
   match api_path + '/translations/admin/lang/:locale', to: 'translations#admin', via: :get
 
   match api_path + '/translations',              to: 'translations#index',   via: :get