From 23d7c06829427cea352c47a2acb5bc053b25d06f Mon Sep 17 00:00:00 2001
From: Ludovic Marcotte <lmarcotte@inverse.ca>
Date: Mon, 8 Jun 2015 15:49:27 -0400
Subject: [PATCH] (feat) improved the attachments handling code for the message
 editor

---
 UI/MailerUI/UIxMailEditor.m                   |  1 -
 UI/Templates/MailerUI/UIxMailEditor.wox       | 65 ++++++++++++-------
 .../js/Mailer/Message.service.js              | 19 ++++++
 .../js/Mailer/MessageEditorController.js      | 11 ++--
 UI/WebServerResources/scss/styles.scss        |  2 +-
 5 files changed, 70 insertions(+), 28 deletions(-)

diff --git a/UI/MailerUI/UIxMailEditor.m b/UI/MailerUI/UIxMailEditor.m
index 12e2f2b2b..a9d483fc4 100644
--- a/UI/MailerUI/UIxMailEditor.m
+++ b/UI/MailerUI/UIxMailEditor.m
@@ -1,5 +1,4 @@
 /*
-  Copyright (C) 2004-2005 SKYRIX Software AG
   Copyright (C) 2008-2015 Inverse inc.
 
   This file is part of SOGo.
diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index e206d34f8..273d0a43c 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -92,30 +92,43 @@
           </md-slider>
           </div>
           -->
-        
-        <div class="pseudo-input-container" ng-hide="hideAttachments">
-          <label class="pseudo-input-label">
-            <var:string label:value="Attachments"/>
-          </label>
-          <div class="pseudoInput-text">
-            <input type="file"
-                   nv-file-select="nv-file-select"
-                   uploader="uploader"/>
-          </div>
-          
-          <md-list>
-            <md-list-item ng-repeat="item in message.editable.attachmentAttrs">
+
+        <md-list>
+          <!-- FILES ALREADY UPLOADED, FOR EXAMPLE WHEN WE FORWARD A
+               MAIL WITH ATTACHMENTS -->
+          <md-list-item ng-repeat="item in message.editable.attachmentAttrs">
+            <div layout="row" layout-align="space-between center">
               <span ng-bind="item.filename"><!-- filename --></span>
-            </md-list-item>
-            <md-list-item ng-repeat="item in uploader.queue">
+              <md-button class="iconButton"
+                         ng-click="message.$deleteAttachment(item.filename);">
+                <i class="md-icon-remove-circle-outline"><!--remove --></i>
+              </md-button>
+            </div>
+          </md-list-item>
+          <!-- FILE BEING ATTACHED TO A MAIL -->
+          <md-list-item ng-repeat="item in uploader.queue">
+            <div layout="row" layout-align="space-between center">
               <span ng-bind="item.file.name"><!-- filename --></span>
-              (<span ng-bind="item.file.progress"><!-- progress --></span>)
-            </md-list-item>
-          </md-list>
-        </div>
-        
+              <md-progress-linear md-mode="determinate"
+                                  value="{{item.progress}}"
+                                  ng-show="item.isUploading" ><!-- progress--></md-progress-linear>
+              <md-button class="iconButton"
+                         ng-click="uploader.cancelItem(item)"
+                         ng-show="item.isUploading">
+                <i class="md-icon-cancel"><!--cancel --></i>
+              </md-button>
+              <md-button class="iconButton"
+                         ng-click="message.$deleteAttachment(item.file.name);item.remove();"
+                         ng-show="!item.isUploading">
+                <i class="md-icon-remove-circle-outline"><!--remove --></i>
+              </md-button>
+            </div>
+          </md-list-item>
+        </md-list>
       </div>
       
+      <!-- </div> -->
+      
       <!-- TOOLBAR TO SHOW CC/BCC/ATTACHMENT FIELDS -->
       <div layout="column" layout-align="start end">
         <md-button  class="iconButton" ng-show="hideCc" ng-click="hideCc = false">Cc</md-button>
@@ -126,9 +139,17 @@
             <i class="md-icon-info-outline"></i>
             </md-button>
         -->
-        <md-button  class="iconButton" ng-show="hideAttachments" ng-click="hideAttachments = false">
-          <i class="md-icon-attach-file"><!-- show attachment --></i>
+        <md-button class="iconButton">
+          <label for="file-input">
+            Add files
+          </label>
         </md-button>
+        <input id="file-input" type="file"
+               nv-file-select="nv-file-select"
+               multiple="multiple"
+               uploader="uploader"
+               ng-show="false"/>
+        
         <!--
             <md-button  class="iconButton" ng-click="returnReceipt = !returnReceipt">
             <i class="md-icon-receipt"></i>
diff --git a/UI/WebServerResources/js/Mailer/Message.service.js b/UI/WebServerResources/js/Mailer/Message.service.js
index 18b30e85c..3a746c244 100644
--- a/UI/WebServerResources/js/Mailer/Message.service.js
+++ b/UI/WebServerResources/js/Mailer/Message.service.js
@@ -310,6 +310,25 @@
     });
   };
 
+  /**
+   * @function $deleteAttachment
+   * @memberof Message.prototype
+   * @desc Delete an attachment from a message being composed
+   * @param {string} filename - the filename of the attachment to delete
+   */
+  Message.prototype.$deleteAttachment = function(filename) {
+    var action = 'deleteAttachment?filename=' + filename;
+    var _this = this;
+    Message.$$resource.post(this.$absolutePath({asDraft: true}), action).then(function(data) {
+      Message.$timeout(function() {
+        _this.editable.attachmentAttrs = _.filter(_this.editable.attachmentAttrs, function(attachment) {
+          return attachment.filename != filename});
+      }, function() {
+        // TODO: show toast
+      });
+    });
+  }
+
   /**
    * @function $markAsFlaggedOrUnflagged
    * @memberof Message.prototype
diff --git a/UI/WebServerResources/js/Mailer/MessageEditorController.js b/UI/WebServerResources/js/Mailer/MessageEditorController.js
index c7a7a523b..c6fd3aea1 100644
--- a/UI/WebServerResources/js/Mailer/MessageEditorController.js
+++ b/UI/WebServerResources/js/Mailer/MessageEditorController.js
@@ -11,7 +11,6 @@
     $scope.autocomplete = {to: {}, cc: {}, bcc: {}};
     $scope.hideCc = true;
     $scope.hideBcc = true;
-    $scope.hideAttachments = true;
     if ($stateParams.actionName == 'reply') {
       stateMessage.$reply().then(function(msgObject) {
         console.debug("foo");
@@ -19,7 +18,6 @@
         $scope.message = msgObject;
         $scope.hideCc = (!msgObject.editable.cc || msgObject.editable.cc.length == 0);
         $scope.hideBcc = (!msgObject.editable.bcc || msgObject.editable.bcc.length == 0);
-        $scope.hideAttachments = true;
       });
     }
     else if ($stateParams.actionName == 'replyall') {
@@ -27,7 +25,6 @@
         $scope.message = msgObject;
         $scope.hideCc = (!msgObject.editable.cc || msgObject.editable.cc.length == 0);
         $scope.hideBcc = (!msgObject.editable.bcc || msgObject.editable.bcc.length == 0);
-        $scope.hideAttachments = true;
       });
     }
     else if ($stateParams.actionName == 'forward') {
@@ -35,7 +32,6 @@
         $scope.message = msgObject;
         $scope.hideCc = true;
         $scope.hideBcc = true;
-        $scope.hideAttachments = (!msgObject.editable.attachmentAttrs || msgObject.editable.attachmentAttrs.length == 0);
       });
     }
     else if (angular.isDefined(stateMessage)) {
@@ -75,6 +71,13 @@
         stateMessage.$reload();
         console.debug(item); console.debug('success = ' + JSON.stringify(response, undefined, 2));
       },
+      onCancelItem: function(item, response, status, headers) {
+        console.debug(item); console.debug('cancel = ' + JSON.stringify(response, undefined, 2));
+
+        // We remove the attachment
+        stateMessage.$deleteAttachment(item.file.name);
+        this.removeFromQueue(item);
+      },
       onErrorItem: function(item, response, status, headers) {
         console.debug(item); console.debug('error = ' + JSON.stringify(response, undefined, 2));
       }
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index 24c944b66..2c5d27d35 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -41,7 +41,7 @@
 @import 'components/list/list';
 @import 'components/autoScrollList/autoScrollList';
 //@import 'components/progressCircular/progressCircular';
-//@import 'components/progressLinear/progressLinear';
+@import 'components/progressLinear/progressLinear';
 @import 'components/radioButton/radio-button';
 @import 'components/select/select';
 @import 'components/sidenav/sidenav';