ui.9; statusSort, showKey, filter (#29, #73, #95, #101, #145, #192)

Author: gadicc

README.md

@@ -18,7 +18,7 @@ the stable release):
 ```
 meteor add msgfmt:core@2.0.0-preview.16         # 2016-01-11
 meteor add msgfmt:extract@2.0.0-preview.12
-meteor add msgfmt:ui@2.0.0-preview.8            # 2016-01-27
+meteor add msgfmt:ui@2.0.0-preview.9            # 2016-01-27
 ```
 
 If you don't want the UI translator on production (i.e. no crowd translation),

msgfmt:ui-dev-only/.versions

@@ -41,8 +41,8 @@ mobile-status-bar@1.0.6
 mongo@1.1.3
 mongo-id@1.0.1
 msgfmt:core@2.0.0-preview.2
-msgfmt:ui@2.0.0-preview.8
-msgfmt:ui-dev-only@2.0.1
+msgfmt:ui@2.0.0-preview.9
+msgfmt:ui-dev-only@2.0.2
 nicolaslopezj:router-layer@0.0.11
 npm-mongo@1.4.39_1
 observe-sequence@1.0.7

msgfmt:ui-dev-only/package.js

@@ -1,12 +1,12 @@
 Package.describe({
   name:      "msgfmt:ui-dev-only",
-  version:   "2.0.1",
+  version:   "2.0.2",
   summary:   "msgfmt-ui that is never deployed",
   git:       "https://github.com/gadicc/meteor-messageformat.git",
   debugOnly: true
 });
 
 Package.onUse(function (api) {
-  api.use('msgfmt:ui@2.0.0-preview.8');
+  api.use('msgfmt:ui@2.0.0-preview.9');
   api.imply('msgfmt:ui');
 });

msgfmt:ui/.versions

@@ -31,7 +31,7 @@ jag:pince@0.0.6
 jquery@1.11.4
 launch-screen@1.0.4
 livedata@1.0.15
-local-test:msgfmt:ui@2.0.0-preview.8
+local-test:msgfmt:ui@2.0.0-preview.9
 logging@1.0.8
 meteor@1.1.10
 meteor-platform@1.2.3
@@ -42,7 +42,7 @@ mobile-status-bar@1.0.6
 mongo@1.1.3
 mongo-id@1.0.1
 msgfmt:core@2.0.0-preview.2
-msgfmt:ui@2.0.0-preview.8
+msgfmt:ui@2.0.0-preview.9
 nicolaslopezj:router-layer@0.0.11
 npm-mongo@1.4.39_1
 observe-sequence@1.0.7

msgfmt:ui/History.md

@@ -1,5 +1,13 @@
 ## vNEXT
 
+## 2.0.0-preview.9
+
+Misc features related to #29, #73, #95, #101, #145, #192:
+
+* Feature: sort first by status (untrans, fuzzy, trans)
+* Feature: show file, allow sort by file
+* Feature: filter by key, file, orig, trans
+
 ## 2.0.0-preview.8
 
 * Feature: sort objects by key when saving mfAll.js (#195)

msgfmt:ui/lib/client.js

@@ -199,23 +199,56 @@ Template.mfTransLang.helpers({
     var orig = mfPkg.native;
     var lang = RouterLayer.getParam('lang');
 
-    // summarise matching keys (orig + trans) to a single record
-    var out = {}, strings = mfPkg.mfStrings.find({
+    var query = {
       $and: [{$or: [{lang: orig}, {lang: lang}]},
         {removed: undefined}]
-    }).fetch();
+    };
+
+    var filter = Session.get('mfTransLangFilter');
+    if (filter) {
+      filter = new RegExp(filter, 'i');
+      /*
+      since we need to recheck later anyways, no point doing twice
+      query.$and.push({
+        $or: [
+          { key: filter },
+          // { text: filter }, // cant do this here, need both langs
+          { file: filter }
+        ]
+      });
+      */
+    }
+
+    var out = {}, strings = mfPkg.mfStrings.find(query).fetch();
 
+    // summarise matching keys (orig + trans) to a single record
     _.each(strings, function(str) {
       if (!out[str.key])
         out[str.key] = { key: str.key };
-      if (str.lang == orig)
+
+      if (str.lang == orig) {
         out[str.key].orig = str.text;
-      else
+        out[str.key].file = str.file;
+      } else {
         out[str.key].trans = str.text;
+      }
+
       if (str.fuzzy)
         out[str.key].fuzzy = true;
     });
 
+    // reject non-matches (can only do after orig/trans merge)
+    if (filter)
+    _.each(out, function(str, i) {
+      if (!(
+          str.key.match(filter) || 
+          str.file.match(filter) ||
+          str.orig.match(filter) ||
+          (str.trans && str.trans.match(filter))
+            ))
+        delete out[i];
+    });
+
     strings = _.values(out);
     strings = sortStrings(strings);
 
@@ -243,9 +276,15 @@ Template.mfTransLang.events({
     var key = tr.data('key');
     if (key) changeKey(key);
   },
+  'click #translationStatusSort': function(event) {
+    Session.set('translationStatusSort', event.currentTarget.checked);
+  },
   'click #translationShowKey': function(event) {
     Session.set('translationShowKey', event.currentTarget.checked);
   },
+  'click #translationShowFile': function(event) {
+    Session.set('translationShowFile', event.currentTarget.checked);
+  },
   'click #translationCaseInsensitiveOrdering': function(event) {
     Session.set('translationCaseInsensitiveOrdering', event.currentTarget.checked);
   },
@@ -262,15 +301,24 @@ Template.mfTransLang.events({
   },
   'keyup #mfTransDest': function(event) {
     unsavedDest = event.target.value;
+  },
+  'keyup #mfTransLangFilter': function(event) {
+    Session.set('mfTransLangFilter', event.target.value);
   }
 });
 
 Template.mfTransLang.helpers({
+  statusSort: function() {
+    return Session.get('translationStatusSort');
+  },
   showKey: function() {
     return Session.get('translationShowKey');
   },
+  showFile: function() {
+    return Session.get('translationShowFile');
+  },
   caseInsensitiveOrdering: function() {
-    return Session.get('caseInsensitiveOrdering');
+    return Session.get('translationCaseInsensitiveOrdering');
   },
   sortOrderHeaderClass: function(headerSortField) {
     var classes = 'translationSort';
@@ -323,24 +371,31 @@ Template.mfTransLang.helpers({
   },
   isCheckboxChecked: function(value) {
     return (value === true ? 'checked' : '');
+  },
+  mfTransLangFilter: function() {
+    return Session.get('mfTransLangFilter');
   }
 });
 
+Session.setDefault('translationSortField', 'orig');
+Session.setDefault('translationSortOrder', 'asc');
+Session.setDefault('translationStatusSort', true);
+Session.setDefault('translationCaseInsensitiveOrdering', false);
+
 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';
-  }
+  var caseInsensitiveOrdering = Session.get('translationCaseInsensitiveOrdering');
+
   return strings.sort(function(a, b) {
+    if (Session.get('translationStatusSort')) {
+      if (a.trans && !b.trans || b.fuzzy) return 1;
+      if (!a.trans && b.trans || !b.fuzzy) return -1;
+      return 0;
+    }
+
     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') {

msgfmt:ui/lib/ui.css

@@ -94,3 +94,11 @@ div.mfTransGraph.untrans { background: #800; border-right: 1px solid black; }
 	height: 5em; width: 100%;
 	margin-top: 5px;
 }
+
+#mfTransLang .translationSort {
+	cursor: pointer;
+}
+
+#mfTransLang label[title] {
+	cursor: help;
+}

msgfmt:ui/lib/ui.html

@@ -73,7 +73,11 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
       <table>
         <thead>
           <tr>
-            {{#if showKey}}
+            {{#if showFile}}
+              <th class="{{sortOrderHeaderClass 'file'}}" data-sortField="file">
+                <a href="#">File</a>
+              </th>
+            {{/if}}            {{#if showKey}}
               <th class="{{sortOrderHeaderClass 'key'}}" data-sortField="key">
                 <a href="#">Key</a>
               </th>
@@ -92,6 +96,9 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
           <tbody>
           {{#each strings}}
             <tr data-key="{{key}}" class="{{stateClass}} {{isCurrent}}">
+              {{#if showFile}}
+                <td>{{file}}</td>
+              {{/if}}
               {{#if showKey}}
                 <td>{{key}}</td>
               {{/if}}
@@ -104,14 +111,26 @@ <h2>{{mf 'mf_site_translations' 'Site Translations'}}</h2>
       </div>
     </div>
     <p class='options'>
+      <label title="Order by untrans, fuzzy, trans">
+        <input type="checkbox" id="translationStatusSort" {{isCheckboxChecked statusSort}}>
+        Sort first by Status
+      </label>
       <label>
         <input type="checkbox" id="translationShowKey" {{isCheckboxChecked showKey}}>
         Show key
       </label>
+      <label>
+        <input type="checkbox" id="translationShowFile" {{isCheckboxChecked showFile}}>
+        Show file
+      </label>
       <label>
         <input type='checkbox' id='translationCaseInsensitiveOrdering' {{isCheckboxChecked caseInsensitiveOrdering}}>
         Case insensitive ordering
       </label>
+      <label title="Only show matching key, file, orig, trans">
+        Filter:
+        <input id='mfTransLangFilter' type='text' value={{mfTransLangFilter}} />
+      </label>
       <br />
       Keyboard shortcuts: Ctrl-up/down arrow (Win); Control-Command-up/down arrow (Mac)
       <br />

msgfmt:ui/package.js

@@ -1,6 +1,6 @@
 Package.describe({
   name:    "msgfmt:ui",
-  version: "2.0.0-preview.8",
+  version: "2.0.0-preview.9",
   summary: "messageformat: translation UI",
   git:      "https://github.com/gadicc/meteor-messageformat.git",
 });
@@ -15,6 +15,7 @@ Package.onUse(function (api) {
 
   api.use('mongo');
   api.use('msgfmt:core@2.0.0-preview.2');
+  api.use('session', 'client');
 
   api.addFiles('lib/common.js');
   api.addFiles('lib/server.js', 'server');