From 882e3016b3d0451bbdc43948aead794b3995e232 Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Fri, 18 Jun 2021 15:58:05 -0700
Subject: [PATCH] msgtplui - Add workflow for transitioning between
 draft<=>current

---
 ext/msgtplui/ang/msgtplui/Edit.html | 13 ++++++++--
 ext/msgtplui/ang/msgtplui/Edit.js   | 38 +++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/ext/msgtplui/ang/msgtplui/Edit.html b/ext/msgtplui/ang/msgtplui/Edit.html
index 2c0bd5e2b4..769645efef 100644
--- a/ext/msgtplui/ang/msgtplui/Edit.html
+++ b/ext/msgtplui/ang/msgtplui/Edit.html
@@ -20,6 +20,7 @@
       <!-- TODO: Pretty name -->
     </div>
 
+    <a name="msgtplui-tabs"></a>
     <div class="panel panel-info">
       <ul class="panel-heading nav nav-tabs">
         <li role="presentation" ng-class="{active: $ctrl.tab == 'main'}" ng-if="!$ctrl.lang">
@@ -28,7 +29,7 @@
         <li role="presentation" ng-class="{active: $ctrl.tab == 'txActive'}" ng-if="!!$ctrl.lang">
           <a class="text-success" crm-icon="fa-file" ng-click="$ctrl.tab = 'txActive'">{{ts('Current')}}</a>
         </li>
-        <li role="presentation" ng-class="{active: $ctrl.tab == 'txDraft'}" ng-if="!!$ctrl.lang">
+        <li role="presentation" ng-class="{active: $ctrl.tab == 'txDraft'}" ng-if="$ctrl.hasDraft()">
           <a class="text-warning" crm-icon="fa-file" ng-click="$ctrl.tab = 'txDraft'">{{ts('Draft')}}</a>
         </li>
         <li role="presentation" ng-class="{active: $ctrl.tab == 'original'}">
@@ -37,13 +38,21 @@
       </ul>
       <div class="panel-body">
         <msgtplui-edit-content options="{record: $ctrl.records[$ctrl.tab], disabled: $ctrl.tab==='original'}"></msgtplui-edit-content>
+        <div class="text-center">
+          <div class="btn-group">
+            <button type="button" class="btn btn-success" ng-if="$ctrl.tab.match('txActive|original') && !$ctrl.hasDraft()" ng-click="$ctrl.createDraft($ctrl.records[$ctrl.tab])"><i class="fa fa-clone"/> {{ts('Create draft')}}</button>
+            <button type="button" class="btn btn-warning" ng-if="$ctrl.tab.match('txActive|original') && $ctrl.hasDraft()" crm-confirm="{title: ts('Create draft?'), message: ts('There is already an existing draft. If you continue, it will be reset as a new draft.')}" on-yes="$ctrl.createDraft($ctrl.records[$ctrl.tab])"><i class="fa fa-clone"/> {{ts('Create draft')}}</button>
+            <button type="button" class="btn btn-success" ng-if="$ctrl.tab === 'txDraft'" crm-confirm="{title: ts('Activate draft?'), message: ts('Are you sure you want to activate this draft?')}" on-yes="$ctrl.activateDraft()"><i class="fa fa-rocket"/> {{ts('Activate draft')}}</button>
+            <button type="button" class="btn btn-danger" ng-if="$ctrl.tab === 'txDraft'" crm-confirm="{type: 'delete', obj: {}, title: ts('Delete draft?'), message: ts('Are you sure you want to delete this draft?')}" on-yes="$ctrl.deleteDraft()"><i class="fa fa-trash"/> {{ts('Delete draft')}}</button>
+          </div>
+        </div>
       </div>
     </div>
 
     <div class="btn-group pull-right">
       <button type="button" class="btn btn-primary" ng-click="$ctrl.save()">{{ ts('Save') }}</button>
       <button type="button" class="btn btn-primary" ng-click="$ctrl.cancel()">{{ ts('Cancel') }}</button>
-      <button type="button" class="btn btn-danger" crm-confirm="{type: 'delete', obj: {}, message: ts('Are you sure want to delete this translation (%1)?', {1: $ctrl.lang})}" on-yes="$ctrl.delete()" ng-if="!!$ctrl.lang">{{ ts('Delete') }}</button>
+      <button type="button" class="btn btn-danger" crm-confirm="{type: 'delete', obj: {}, title: ts('Delete translation?'), message: ts('Are you sure want to delete this translation (%1)? This will remove any current and draft versions.', {1: $ctrl.lang})}" on-yes="$ctrl.delete()" ng-if="!!$ctrl.lang">{{ ts('Delete') }}</button>
     </div>
 
     <div class="clearfix"></div>
diff --git a/ext/msgtplui/ang/msgtplui/Edit.js b/ext/msgtplui/ang/msgtplui/Edit.js
index 3048a9901d..e110a95fa1 100644
--- a/ext/msgtplui/ang/msgtplui/Edit.js
+++ b/ext/msgtplui/ang/msgtplui/Edit.js
@@ -17,6 +17,9 @@
    *   An API call which replaces the translations ([entity,action,params]).
    */
   function reqReplaceTranslations(id, lang, status, values) {
+    if (angular.equals({}, values)) {
+      return reqDeleteTranslations(id, lang, status);
+    }
     var records = [];
     angular.forEach(values, function(value, key) {
       records.push({"entity_field":key, "string":value});
@@ -86,6 +89,19 @@
     }, {});
   }
 
+  function copyTranslations(src, dest) {
+    dest.translations = [];
+    TRANSLATED.forEach(function(fld) {
+      if (src[fld] === undefined) {
+        delete dest[fld];
+      }
+      else {
+        dest[fld] = src[fld];
+        dest.translations.push({entity_field: fld, string: src[fld]});
+      }
+    });
+  }
+
   angular.module('msgtplui').config(function($routeProvider) {
       $routeProvider.when('/edit', {
         controller: 'MsgtpluiEdit',
@@ -145,6 +161,28 @@
       ctrl.tab = 'main';
     }
 
+    ctrl.switchTab = function switchTab(tgt) {
+      ctrl.tab = tgt;
+      $('html, body').animate({scrollTop: $("a[name=msgtplui-tabs]").offset().top}, 200);
+    };
+
+    ctrl.hasDraft = function hasDraft() {
+      return ctrl.lang && ctrl.records.txDraft && ctrl.records.txDraft.translations && ctrl.records.txDraft.translations.length > 0;
+    };
+    ctrl.createDraft = function createDraft(src) {
+      copyTranslations(src, ctrl.records.txDraft);
+      ctrl.switchTab('txDraft');
+    };
+    ctrl.deleteDraft = function deleteDraft() {
+      copyTranslations({}, ctrl.records.txDraft);
+      ctrl.switchTab('txActive');
+    };
+    ctrl.activateDraft = function activateDraft() {
+      copyTranslations(ctrl.records.txDraft, ctrl.records.txActive);
+      copyTranslations({}, ctrl.records.txDraft);
+      ctrl.switchTab('txActive');
+    };
+
     ctrl.save = function save() {
       var requests = {};
       if (ctrl.lang) {
-- 
2.25.1