From f44d8a6e77584ed285ac1812086c70275bf352f3 Mon Sep 17 00:00:00 2001
From: Javier <javier@bitpay.com>
Date: Mon, 19 Sep 2016 17:52:01 -0300
Subject: [PATCH] support timeline

---
 public/views/modals/tx-details.html     | 35 +++++++------
 src/js/controllers/modals/txDetails.js  | 65 +++++++++++++++++++------
 src/js/services/popupService.js         |  6 +--
 src/sass/main.scss                      |  1 +
 src/sass/views/includes/tx-details.scss | 13 +++++
 5 files changed, 89 insertions(+), 31 deletions(-)
 create mode 100644 src/sass/views/includes/tx-details.scss

diff --git a/public/views/modals/tx-details.html b/public/views/modals/tx-details.html
index 42b765940..d7145f679 100644
--- a/public/views/modals/tx-details.html
+++ b/public/views/modals/tx-details.html
@@ -1,4 +1,4 @@
-<ion-modal-view ng-controller="txDetailsController">
+<ion-modal-view ng-controller="txDetailsController" ng-init="init()" id="tx-details">
   <ion-header-bar align-title="center" class="bar-royal" ng-style="{'background-color':color}">
     <button class="button button-clear" ng-click="cancel()">
       {{'Close' | translate}}
@@ -76,9 +76,9 @@
 
       <div class="item">
         <div translate>Created by</div>
-        <span>{{wallet.credentials.copayerName}}</span>
+        <span>{{btx.creatorName}}</span>
         <span class="item-note">
-          <time>{{ btx.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
+          <time>{{ btx.createdOn * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
         </span>
       </div>
 
@@ -143,18 +143,25 @@
         </div>
       </div>
 
-      <div class="item item-divider" ng-show="btx.action == 'sent'" translate>Timeline</div>
+      <div ng-if="actionList[0]">
+        <div class="item item-divider" translate>Timeline</div>
 
-    </div>
-
-    <div class="list" ng-if="btx.actions[0] && isShared">
-      <div class="item item-divider" translate>Participants</div>
-      <div class="item" ng-repeat="c in btx.actions">
-        <span class="item-note">
-          <i ng-if="c.type == 'reject'" class="fi-x icon-sign x db"></i>
-          <i ng-if="c.type == 'accept'" class="fi-check icon-sign check db"></i>
-        </span>
-        {{c.copayerName}} <span ng-if="c.copayerId == copayerId">({{'Me'|translate}})</span>
+        <div class="item" ng-class="{'action-created' : a.type == 'created' || a.type == 'accept', 'action-rejected' : a.type == 'reject'}" ng-repeat="a in actionList track by $index">
+          <div class="row">
+            <div class="col col-10">
+              <span id="timeline-icon">{{$index + 1}}</span>
+            </div>
+            <div class="col">
+              <div>{{a.description}}</div>
+              <div>
+                <span>{{a.by}}</span>
+                <span class="item-note">
+                  <time>{{ a.time * 1000 | amDateFormat:'MM/DD/YYYY HH:mm a'}}</time>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </ion-content>
diff --git a/src/js/controllers/modals/txDetails.js b/src/js/controllers/modals/txDetails.js
index 2b79f6e88..2324ac4b9 100644
--- a/src/js/controllers/modals/txDetails.js
+++ b/src/js/controllers/modals/txDetails.js
@@ -1,29 +1,66 @@
 'use strict';
 
-angular.module('copayApp.controllers').controller('txDetailsController', function($log, $timeout, $scope, $filter, $stateParams, gettextCatalog, profileService, configService, txFormatService, externalLinkService, popupService) {
+angular.module('copayApp.controllers').controller('txDetailsController', function($log, $timeout, $scope, $filter, $stateParams, lodash, gettextCatalog, profileService, configService, txFormatService, externalLinkService, popupService) {
   var self = $scope.self;
   var wallet = profileService.getWallet($stateParams.walletId);
   var config = configService.getSync();
   var configWallet = config.wallet;
   var walletSettings = configWallet.settings;
 
-  $scope.alternativeIsoCode = walletSettings.alternativeIsoCode;
-  $scope.color = wallet.color;
-  $scope.copayerId = wallet.credentials.copayerId;
-  $scope.isShared = wallet.credentials.n > 1;
+  $scope.init = function() {
+    $scope.alternativeIsoCode = walletSettings.alternativeIsoCode;
+    $scope.color = wallet.color;
+    $scope.copayerId = wallet.credentials.copayerId;
+    $scope.isShared = wallet.credentials.n > 1;
 
-  $scope.btx.amountStr = txFormatService.formatAmount($scope.btx.amount, true) + ' ' + walletSettings.unitName;
-  $scope.btx.feeStr = txFormatService.formatAmount($scope.btx.fees, true) + ' ' + walletSettings.unitName;
-  $scope.btx.feeLevel = walletSettings.feeLevel;
+    $scope.btx.amountStr = txFormatService.formatAmount($scope.btx.amount, true) + ' ' + walletSettings.unitName;
+    $scope.btx.feeStr = txFormatService.formatAmount($scope.btx.fees, true) + ' ' + walletSettings.unitName;
+    $scope.btx.feeLevel = walletSettings.feeLevel;
 
-  if ($scope.btx.action != 'invalid') {
-    if ($scope.btx.action == 'sent') $scope.title = gettextCatalog.getString('Sent Funds');
-    if ($scope.btx.action == 'received') $scope.title = gettextCatalog.getString('Received Funds');
-    if ($scope.btx.action == 'moved') $scope.title = gettextCatalog.getString('Moved Funds');
-  }
+    if ($scope.btx.action != 'invalid') {
+      if ($scope.btx.action == 'sent') $scope.title = gettextCatalog.getString('Sent Funds');
+      if ($scope.btx.action == 'received') $scope.title = gettextCatalog.getString('Received Funds');
+      if ($scope.btx.action == 'moved') $scope.title = gettextCatalog.getString('Moved Funds');
+    }
+    initActionList();
+  };
+
+  function initActionList() {
+    $scope.actionList = [];
+    if ($scope.btx.action != 'sent' || !$scope.isShared) return;
+
+    var actionDescriptions = {
+      created: gettextCatalog.getString('Proposal Created'),
+      accept: gettextCatalog.getString('Accepted'),
+      reject: gettextCatalog.getString('Rejected'),
+      broadcasted: gettextCatalog.getString('Broadcasted'),
+    };
+
+    $scope.actionList.push({
+      type: 'created',
+      time: $scope.btx.createdOn,
+      description: actionDescriptions['created'],
+      by: $scope.btx.creatorName
+    });
+
+    lodash.each($scope.btx.actions, function(action) {
+      $scope.actionList.push({
+        type: action.type,
+        time: action.createdOn,
+        description: actionDescriptions[action.type],
+        by: action.copayerName
+      });
+    });
+
+    $scope.actionList.push({
+      type: 'broadcasted',
+      time: $scope.btx.time,
+      description: actionDescriptions['broadcasted'],
+    });
+  };
 
   $scope.showCommentPopup = function() {
-    popupService.showPrompt(gettextCatalog.getString('Memo'), null, null, function(res) {
+    popupService.showPrompt(gettextCatalog.getString('Memo'), ' ', {}, function(res) {
       $log.debug('Saving memo');
 
       var args = {
diff --git a/src/js/services/popupService.js b/src/js/services/popupService.js
index c22b32041..c8979ca1c 100644
--- a/src/js/services/popupService.js
+++ b/src/js/services/popupService.js
@@ -32,9 +32,9 @@ angular.module('copayApp.services').service('popupService', function($log, $ioni
     opts = opts || {};
     $ionicPopup.prompt({
       title: title,
-      subTitle: message || ' ',
-      inputType: opts.inputType || 'text',
-      inputPlaceholder: opts.inputPlaceholder || '',
+      subTitle: message,
+      inputType: opts.inputType,
+      inputPlaceholder: opts.inputPlaceholder,
       defaultText: opts.defaultText
     }).then(function(res) {
       return cb(res)
diff --git a/src/sass/main.scss b/src/sass/main.scss
index 28823794d..1fa71938e 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -994,3 +994,4 @@ input[type=number] {
 @import "views/includes/walletActivity";
 @import "views/includes/wallets";
 @import "views/includes/modals/modals";
+@import "views/includes/tx-details";
diff --git a/src/sass/views/includes/tx-details.scss b/src/sass/views/includes/tx-details.scss
new file mode 100644
index 000000000..5248dcab8
--- /dev/null
+++ b/src/sass/views/includes/tx-details.scss
@@ -0,0 +1,13 @@
+#tx-details {
+  .action-created.action-accepted {
+    color: green;
+  }
+
+  .action-rejected {
+    color: red;
+  }
+}
+
+
+
+