Ability to show/hide the key and sort by the key

Author: tomitrescak

msgfmt:ui/lib/client.js

@@ -244,14 +244,34 @@ Template.mfTrans.events({
 var unsavedDest;
 Template.mfTransLang.events({
   'click #mfTransLang tr': function(event) {
-    changeKey(this.key);
+    var tr = $(event.target).parents('tr');
+    var key = tr.data('key');
+    if (key) changeKey(key);
+  },
+  'click #translationShowKey': function(event) {
+    Session.set('translationShowKey', event.currentTarget.checked);
+  },
+  'click .translationSort': function(event) {
+    Session.set('translationSortField', event.currentTarget.attributes['data-sortField'].value);
   },
   'keyup #mfTransDest': function(event) {
     unsavedDest = event.target.value;
   }
 });
 
 Template.mfTransLang.helpers({
+  sortedStrings: function() {
+    var sortField = Session.get('translationSortField');
+    if (!sortField) {
+      Session.set('translationSortField', 'orig');
+    }
+    return this.strings.sort(function(a, b) {
+      return a[sortField] > b[sortField] ? 1 : (a[sortField] < b[sortField] ? -1 : 0);
+    });
+  },
+  showKey: function() {
+    return Session.get('translationShowKey');
+  },
   stateClass: function() {
     if (this.fuzzy)
       return 'fuzzy';

msgfmt:ui/lib/ui.css

@@ -49,6 +49,9 @@ div.mfTransGraph.untrans { background: #800; border-right: 1px solid black; }
 #mfTransPreview table { width: 100%; table-layout:fixed; border-collapse:separate; background: white; }
 #mfTransPreview table thead tr { background: #ede9e3; }
 #mfTransPreview table thead th { width: 50%; padding: 4px 8px 4px 8px; }
+#mfTransPreview table thead th {
+	border-left: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black;
+}
 #mfTransPreview table thead th:first-child {
 	border-left: 1px solid black; border-top: 1px solid black; border-bottom: 1px solid black;
 	border-top-left-radius: 5px; 

msgfmt:ui/lib/ui.html

@@ -66,22 +66,29 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
 </template>
 
 <template name="mfTransLang">
+{{ debug }}
   <div class="container" id="mfTransLang">
 
     <div id="mfTransPreview">
       <table>
         <thead>
           <tr>
-            <th>Original String ({{origLang}})</th>
-            <th>Translation ({{destLang}})</th>
+            {{#if showKey}}
+              <th><a href="#" class="translationSort" data-sortField="key">Key</a></th>
+            {{/if}}
+            <th><a href="#" class="translationSort" data-sortField="orig">Original String ({{orig}})</a></th>
+            <th>Translation ({{trans}})</th>
           </tr>
         </thead>
       </table>
       <div class="tbodyScroll">
         <table>
           <tbody>
-          {{#each strings}}
+          {{#each sortedStrings}}
             <tr data-key="{{key}}" class="{{stateClass}} {{isCurrent}}">
+              {{#if showKey}}
+                <td>{{key}}</td>
+              {{/if}}
               <td>{{orig}}</td>
               <td>{{trans}}</td>
             </tr>
@@ -90,7 +97,7 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
         </table>
       </div>
     </div>
-    <p>Use ctrl-up and ctrl-down to quickly change keys</p>
+    <p><input type="checkbox" id="translationShowKey">Show key, Use ctrl-up and ctrl-down to quickly change keys</p>
     <span><b>{{keyInfo.key}}</b> in {{keyInfo.file}}:{{keyInfo.line
       }}{{#if keyInfo.template}} (template
         {{#if keyInfo.routeUrl}}
@@ -117,4 +124,4 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
     <h1>{{mf 'access_denied' 'Access Denied'}}</h1>
     <p>{{mf 'login_and_access' 'Please ensure you are logged in and have the relevant access to add/edit translations.'}}</p>
   </div>
-</template>
+</template>