Merge pull request #192 from MartinFournier/v2-ui-key-ordering

[v2] ui: Show key + strings ordering

Author: gadicc

msgfmt:ui/lib/client.js

@@ -209,25 +209,12 @@ Template.mfTransLang.helpers({
     });
 
     strings = _.values(out);
-    strings.sort(function(a, b) {
-      if (!a.trans && b.trans)
-        return -1;
-      else if (a.trans && !b.trans)
-        return 1;
-
-      if (!a.fuzzy && b.fuzzy)
-        return -1;
-      else if (b.fuzzy && !a.fuzzy)
-        return 1;
-
-      return a.text - b.text;
-    });
+    strings = sortStrings(strings);
 
     return strings;
   }
 });
 
-
 Template.mfTrans.events({
   'click #mfTransNewSubmit': function() {
     RouterLayer.go('mfTransLang', { lang: $('#mfTransNewText').val() });
@@ -244,14 +231,48 @@ 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 #translationCaseInsensitiveOrdering': function(event) {
+    Session.set('translationCaseInsensitiveOrdering', event.currentTarget.checked);
+  },
+  'click .translationSort': function(event) {
+    var currentSort = Session.get('translationSortField');
+    var newSort = event.currentTarget.attributes['data-sortField'].value;
+    Session.set('translationSortField', newSort);
+
+    if (currentSort === newSort) {
+      var currentOrder = Session.get('translationSortOrder');
+      var newOrder = (currentOrder === 'asc') ? 'desc' : 'asc';
+      Session.set('translationSortOrder', newOrder);
+    }
   },
   'keyup #mfTransDest': function(event) {
     unsavedDest = event.target.value;
   }
 });
 
 Template.mfTransLang.helpers({
+  showKey: function() {
+    return Session.get('translationShowKey');
+  },
+  caseInsensitiveOrdering: function() {
+    return Session.get('caseInsensitiveOrdering');
+  },
+  sortOrderHeaderClass: function(headerSortField) {
+    var classes = '';
+    var sortField = Session.get('translationSortField');
+    var sortOrder = Session.get('translationSortOrder');
+    if (headerSortField === sortField) {
+      classes += ' active-sort ' + sortOrder;
+    }
+    return classes
+  },
   stateClass: function() {
     if (this.fuzzy)
       return 'fuzzy';
@@ -291,9 +312,37 @@ Template.mfTransLang.helpers({
   },
   encodeURIComponent : function(text) {
     return encodeURIComponent(text);
+  },
+  isCheckboxChecked: function(value) {
+    return (value === true ? 'checked' : '');
   }
 });
 
+var sortStrings = function(strings) {
+  var sortField = Session.get('translationSortField');
+  var sortOrder = Session.get('translationSortOrder');
+  if (!sortField) {
+    Session.set('translationSortField', 'orig');
+    sortField = 'orig';
+  }
+  if (!sortOrder) {
+    Session.set('translationSortOrder', 'asc');
+    sortOrder = 'asc';
+  }
+  return strings.sort(function(a, b) {
+    var first = a[sortField];
+    var second = b[sortField];
+    var caseInsensitiveOrdering = Session.get('translationCaseInsensitiveOrdering');
+    if (first && caseInsensitiveOrdering) first = first.toLowerCase();
+    if (second && caseInsensitiveOrdering) second = second.toLowerCase();
+    if (sortOrder === 'asc') {
+      return first > second ? 1 : (first < second ? -1 : 0);
+    } else {
+      return first > second ? -1 : (first < second ? 1 : 0);
+    }
+  });
+};
+
 var initialRender = _.once(function() {
   var key = Session.get('mfTransKey'),
     tr = $('#mfTransLang tr[data-key="'+key+'"]');

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; 
@@ -72,6 +75,19 @@ div.mfTransGraph.untrans { background: #800; border-right: 1px solid black; }
 */
 #mfTransPreview table tr.current { background: #5598d7; color: white;}
 
+#mfTransLang .options label { margin-right: 10px; }
+
+#mfTransLang th { position: relative; }
+#mfTransLang th.active-sort { background-color: #CCC; }
+#mfTransLang th.active-sort a { font-weight: 500; }
+#mfTransLang th.active-sort::after {
+	font-size: 0.6em;
+	position: absolute;
+  top: 5px;
+  right: 10px;
+}
+#mfTransLang th.active-sort.asc::after { content: '▲'; }
+#mfTransLang th.active-sort.desc::after { content: '▼'; }
 
 #mfTransLang textarea {
 	font-family: monospace;

msgfmt:ui/lib/ui.html

@@ -66,14 +66,24 @@ <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 class="{{sortOrderHeaderClass 'key'}}">
+                <a href="#" class='translationSort' data-sortField="key">Key</a>
+              </th>
+            {{/if}}
+            <th class="{{sortOrderHeaderClass 'orig'}}">
+              <a href="#" class="translationSort" data-sortField="orig">Original String ({{origLang}})</a>
+            </th>
+            <th class="{{sortOrderHeaderClass 'trans'}}">
+              <a href="#" class="translationSort" data-sortField="trans">Translation ({{destLang}})</a>
+            </th>
           </tr>
         </thead>
       </table>
@@ -82,6 +92,9 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
           <tbody>
           {{#each strings}}
             <tr data-key="{{key}}" class="{{stateClass}} {{isCurrent}}">
+              {{#if showKey}}
+                <td>{{key}}</td>
+              {{/if}}
               <td>{{orig}}</td>
               <td>{{trans}}</td>
             </tr>
@@ -90,7 +103,20 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
         </table>
       </div>
     </div>
-    <p>Use ctrl-up and ctrl-down to quickly change keys</p>
+    <p class='options'>
+      <label>
+        <input type="checkbox" id="translationShowKey" {{isCheckboxChecked showKey}}>
+        Show key
+      </label>
+      <label>
+        <input type='checkbox' id='translationCaseInsensitiveOrdering' {{isCheckboxChecked caseInsensitiveOrdering}}>
+        Case insensitive ordering
+      </label>
+      <br />
+      Keyboard shortcuts: Ctrl-up/down arrow (Win); Control-Command-up/down arrow (Mac)
+      <br />
+      Click on headers to reorder the columns.
+    </p>
     <span><b>{{keyInfo.key}}</b> in {{keyInfo.file}}:{{keyInfo.line
       }}{{#if keyInfo.template}} (template
         {{#if keyInfo.routeUrl}}
@@ -117,4 +143,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>