Add delete message feature in individual message page (hotosm#1390)

* Add delete message feature in individual message page

Dockerfile

@@ -23,4 +23,3 @@ EXPOSE 8000
 
 # Gunicorn configured for single-core machine, if more cores available increase workers using formula ((cores x 2) + 1))
 CMD NEW_RELIC_CONFIG_FILE=newrelic.ini newrelic-admin run-program gunicorn -b 0.0.0.0:8000 -w 5 --timeout 179 manage:application
-

client/app/message/message.controller.js

@@ -7,11 +7,13 @@
      */
     angular
         .module('taskingManager')
-        .controller('messageController', ['$routeParams', 'messageService', messageController]);
+        .controller('messageController', ['$routeParams', 'messageService', '$location', messageController]);
 
-    function messageController($routeParams, messageService) {
+    function messageController($routeParams, messageService, $location) {
         var vm = this;
         vm.message = {};
+        vm.showDeleteMessageModal = false;
+        vm.errorRetrievingMessages = false;
 
         activate();
 
@@ -33,5 +35,47 @@
                 // an error occurred
             });
         }
+
+        /**
+         * Set the delete message modal to visible/invisible
+         * @param showModal
+         */
+        vm.setShowDeleteMessageModal = function(showModal){
+            vm.showDeleteMessageModal = showModal;
+        };
+
+        /**
+         * Confirm deleting a message
+         * @param messageId
+         */
+        vm.confirmDeleteMessage = function(messageId){
+            vm.messageIdToBeDeleted = messageId;
+            vm.showDeleteMessageModal = true;
+        };
+
+        /** 
+         * Redirect to inbox after message is deleted
+        **/
+        vm.redirectAfterDelete = function(){
+            vm.showDeleteMessageModal = false;
+            $location.path('/inbox');
+        }
+
+        /**
+         * Delete a message
+         */
+        vm.deleteMessage = function(id){
+            vm.deleteMessageFail = false;
+            var resultsPromise = messageService.deleteMessage(id);
+            resultsPromise.then(function (data) {
+                // success
+                vm.redirectAfterDelete();   
+            }, function () {
+                // an error occurred
+                vm.deleteMessageFail = true;
+            });    
+        };
+
+
     }
 })();

client/app/message/message.html

@@ -11,6 +11,10 @@ <h1 class="section__title">
             <div class="section__body">
                 <div class="inner">
                     <a href="/inbox" class="button button--achromic">{{ 'Return to inbox' | translate }}</a>
+                    <button class="button"
+                        ng-click="messageCtrl.confirmDeleteMessage(messageCtrl.message.messageId)">
+                        {{ 'Delete' | translate }}
+                    </button>
                     <div class="inbox-message">
                         <h3 ng-bind-html="messageCtrl.message.subject"></h3>
                         <p>{{ 'From' | translate }}: <a ng-href="user/{{ messageCtrl.message.fromUsername }}">{{ messageCtrl.message.fromUsername }}</a></p>
@@ -24,3 +28,33 @@ <h3 ng-bind-html="messageCtrl.message.subject"></h3>
         </div>
     </section>
 </div>
+
+<!-- delete message modal -->
+<section class="modal modal-tm" ng-show="messageCtrl.showDeleteMessageModal">
+    <div class="modal__inner">
+        <header class="modal__header">
+            <div class="modal__headline">
+                <h1 class="modal__title">{{ 'Delete message' | translate }}</h1>
+            </div>
+        </header>
+        <div class="modal__body">
+            <p>{{ 'Are you sure you want to delete this message?' | translate }}</p>
+        </div>
+        <footer class="modal__footer">
+            <div ng-hide="messageCtrl.validateTasksSuccess">
+                <button class="button button--achromic" type="button"
+                    ng-click="messageCtrl.setShowDeleteMessageModal(false)">
+                    {{ 'Cancel' | translate }}
+                </button>
+                <button class="button button--base" type="button"
+                    ng-click="messageCtrl.deleteMessage(messageCtrl.message.messageId)">
+                    {{ 'Delete' | translate }}
+                </button>
+            </div>
+        </footer>
+    </div>
+    <a class="modal__button-dismiss" title="{{ 'Dismiss' | translate }}" ng-click="messageCtrl.setShowDeleteMessageModal(false)">
+        {{ 'Dismiss' | translate }}
+    </a>
+</section>
+<!-- delete message modal -->