From 4873aa5e825d5a1c72aa3730c2e7bb536a5da619 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Mon, 21 Jun 2021 23:51:06 -0700
Subject: [PATCH] msgtplui - Basic `<<` and `>>` cycling widgets

---
 ext/msgtplui/ang/msgtplui/Edit.js      | 31 ++++++++++++++++++--------
 ext/msgtplui/ang/msgtplui/Preview.html |  8 ++++++-
 2 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/ext/msgtplui/ang/msgtplui/Edit.js b/ext/msgtplui/ang/msgtplui/Edit.js
index cf923252bf..654f670f16 100644
--- a/ext/msgtplui/ang/msgtplui/Edit.js
+++ b/ext/msgtplui/ang/msgtplui/Edit.js
@@ -157,13 +157,6 @@
     var $ctrl = this;
     var args = $location.search();
 
-    var revisionTypes = {
-      main: {name: 'main', label: ts('Main')},
-      txActive: {name: 'txActive', label: ts('Current translation')},
-      txDraft: {name: 'txDraft', label: ts('Draft translation')},
-      original: {name: 'original', label: ts('Original')}
-    };
-
     $ctrl.locales = CRM.msgtplui.uiLanguages;
     $ctrl.records = prefetch;
     $ctrl.tokenList = tokenList;
@@ -176,6 +169,13 @@
       $ctrl.tab = 'main';
     }
 
+    var revisionTypes = [
+      {name: 'original', label: ts('Original')},
+      {name: 'main', label: ts('Standard')},
+      {name: 'txActive', label: ts('%1 - Current translation', {1: $ctrl.locales[$ctrl.lang]})},
+      {name: 'txDraft', label: ts('%1 - Draft translation', {1: $ctrl.locales[$ctrl.lang]})}
+    ];
+
     $ctrl.switchTab = function switchTab(tgt) {
       $ctrl.tab = tgt;
       $('html, body').animate({scrollTop: $("a[name=msgtplui-tabs]").offset().top}, 200);
@@ -184,6 +184,14 @@
     $ctrl.hasDraft = function hasDraft() {
       return $ctrl.lang && $ctrl.records.txDraft && $ctrl.records.txDraft._exists;
     };
+    $ctrl.hasRevType = function hasRevType(name) {
+      switch (name) {
+        case 'txDraft': return $ctrl.hasDraft();
+        case 'txActive': return !!$ctrl.lang;
+        case 'original': return !!$ctrl.records.original;
+        case 'main': return !$ctrl.lang; // !!$ctrl.records.main;
+      }
+    };
     $ctrl.createDraft = function createDraft(src) {
       copyTranslations(src, $ctrl.records.txDraft);
       $ctrl.switchTab('txDraft');
@@ -243,8 +251,10 @@
           {id: 1, name: 'msg_text', label: ts('Text')}
         ],
         revisionName: $ctrl.tab,
-        revisions: _.reduce($ctrl.records, function(acc, rec, key){
-          acc.push(angular.extend({id: acc.length, rec: rec}, revisionTypes[key]));
+        revisions: _.reduce(revisionTypes, function(acc, revType){
+          if ($ctrl.hasRevType(revType.name)) {
+            acc.push(angular.extend({id: acc.length, rec: $ctrl.records[revType.name]}, revType));
+          }
           return acc;
         }, []),
         title: ts('Preview')
@@ -253,6 +263,9 @@
       model.exampleId = parseInt(_.findKey(model.examples, {name: model.exampleName}));
       model.revisionId = parseInt(_.findKey(model.revisions, {name: model.revisionName}));
       model.formatId = parseInt(_.findKey(model.formats, {name: model.formatName}));
+      model.cycle = function(idFld, listFld, delta){
+        model[idFld] = (model[idFld] + delta) % model[listFld].length;
+      };
       delete model.exampleName;
       delete model.revisionName;
       delete model.formatName;
diff --git a/ext/msgtplui/ang/msgtplui/Preview.html b/ext/msgtplui/ang/msgtplui/Preview.html
index a4312c1195..28744d39fc 100644
--- a/ext/msgtplui/ang/msgtplui/Preview.html
+++ b/ext/msgtplui/ang/msgtplui/Preview.html
@@ -23,16 +23,22 @@
     <div class="well-sm">
       <div class="form-horizontal">
         <div class="form-group">
-          <label class="control-label">{{::ts('Revision')}}</label>
+          <label class="control-label">{{::ts('Variant')}}</label>
           <select class="form-control" ng-options="item.id as item.label for item in model.revisions" ng-model="model.revisionId"></select>
+          <button class="btn btn-default" ng-click="model.cycle('revisionId', 'revisions', -1)">&#xab;</button>
+          <button class="btn btn-default" ng-click="model.cycle('revisionId', 'revisions', +1)">&#xbb;</button>
         </div>
         <div class="form-group">
           <label class="control-label">{{::ts('Example')}}</label>
           <select class="form-control" ng-options="item.id as item.label for item in model.examples" ng-model="model.exampleId"></select>
+          <button class="btn btn-default" ng-click="model.cycle('exampleId', 'examples', -1)">&#xab;</button>
+          <button class="btn btn-default" ng-click="model.cycle('exampleId', 'examples', +1)">&#xbb;</button>
         </div>
         <div class="form-group">
           <label class="control-label">{{::ts('Format')}}</label>
           <select class="form-control" ng-options="item.id as item.label for item in model.formats" ng-model="model.formatId"></select>
+          <button class="btn btn-default" ng-click="model.cycle('formatId', 'formats', -1)">&#xab;</button>
+          <button class="btn btn-default" ng-click="model.cycle('formatId', 'formats', +1)">&#xbb;</button>
         </div>
       </div>
 
-- 
2.25.1