delete comment implementation is fully completed

Author: helloamitpal

www/css/full-recipe.css

@@ -113,6 +113,7 @@
 }
 .comment {
     margin-top: 15px;
+    position: relative;
 }
 .submit-comment-btn {
     margin-bottom: 20px;
@@ -149,6 +150,51 @@
 .full-recipe-container .recipe-image .item-action-section {
     bottom: 5px;
 }
+.shadow-remove {
+    background: url("../resources/back.png");
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
+}
+.shadow-remove.ng-enter-active {
+    opacity: 1;
+}
+.shadow-remove.ng-leave-active {
+    opacity: 0;
+}
+.shadow-remove.ng-enter {
+    -webkit-animation:0.5s show;
+    animation:0.5s show;
+}
+.shadow-remove.ng-leave {
+    -webkit-animation:0.5s hide;
+    animation:0.5s hide;
+}
+.delete-comment {
+    position: absolute;
+    right: 0;
+    padding: 5px;
+    border: 1px solid #aaa;
+    font-size: 2.5em;
+    background: #fff;
+    height: 100%;
+}
+.delete-comment::before {
+    top: 50%;
+    transform: translate(0, -50%);
+    -webkit-transform: translate(0, -50%);
+    position: relative;
+}
+.no-comment {
+    padding: 10px 0;
+}
+.comment-date {
+    font-size: 0.6em;
+    float: right;
+}
 /*.item-input input[type="text"].cloned-text-input ,
 .item-input textarea.cloned-text-input{
     display: none !important;

www/js/config.js

@@ -52,7 +52,8 @@ define(['angular'], function (angular) {
                     ALL_CATEGORY: "http://localhost:3000/getAllCategory",
                     SET_FAVORITE_RECIPE_BULK: "http://localhost:3000/setFavoriteRecipeInBulk",
                     RECOMMEND_RECIPE: "http://localhost:3000/recommendRecipe",
-                    SUBMIT_COMMENT: "http://localhost:3000/submitComment"
+                    SUBMIT_COMMENT: "http://localhost:3000/submitComment",
+                    DELETE_COMMENT: "http://localhost:3000/deleteComment"
                 },
                 LOCALE: {
                     AVAILABLE: [{

www/js/locales/recipe/de.json

@@ -8,9 +8,12 @@
         "all-comment-title": "Bemerkungen",
         "no_recipe_available": "Kein Rezept erhältlich",
         "author": "Autor",
+        "no_comment": "Keine Kommentare ab jetzt",
         "recommend_confirm_title": "Empfehlen Rezept",
         "login_require_title": "Anmeldung erforderlich",
         "comment_box_placeholder": "Maximale Zeichenbegrenzung: ",
+        "remove_comment_confirm_title": "Kommentar löschen",
+        "remove_comment_confirm_description": "Wollen Sie Ihren Kommentar löschen ?",
         "login_require_description": "Sie müssen sich einloggen um Ihren Kommentar zu schreiben. Bitte loggen Sie sich zuerst ein.",
         "recommend_confirm_description": "Haben Sie dieses Rezept ausprobiert und es hat euch gefallen ? Wollen Sie es für andere zu empfehlen?"
     }

www/js/locales/recipe/en.json

@@ -11,6 +11,9 @@
         "recommend_confirm_title": "Recommend Recipe",
         "comment_box_placeholder": "Maximum character limit: ",
         "login_require_title": "Login Required",
+        "no_comment": "No comments as of now",
+        "remove_comment_confirm_title": "Delete Comment",
+        "remove_comment_confirm_description": "Do you want to delete your comment?",
         "login_require_description": "You have to login to post your comment. Please login first.",
         "recommend_confirm_description": "Have you tried this recipe and you liked it? Do you want to recommend it for others?"
     }

www/js/modules/recipe/directives/commentbox.directive.js

@@ -1,14 +1,41 @@
 define(function () {
     'use strict';
 
-    return function() {
+    return ['recipeService', '$filter', '$ionicPopup', 'appStore', function(recipeService, $filter, $ionicPopup, appStore) {
         return {
             restrict: 'E',
             replace: true,
             transclude: true,
             templateUrl: "templates/recipe/comments.html",
-            scope: true
-        };
-    };
+            scope: {
+                comments: "=",
+                recipeId: "="
+            },
+            link: function($scope, element) {
+
+                var savedUser = appStore.getFromLocal("userLoggedInStatus");
+                $scope.userId = ((savedUser) ? savedUser.userID : "");
+
+                $scope.deleteComment = function(evt, index, time) {
+                    evt.preventDefault();
+                    evt.stopImmediatePropagation();
 
+                    var confirmPopup = $ionicPopup.confirm({
+                        title: $filter('translate')('recipe.remove_comment_confirm_title'),
+                        template: $filter('translate')('recipe.remove_comment_confirm_description')
+                    });
+
+                    confirmPopup.then(function(res) {
+                        if(res) {
+                            recipeService.deleteComment($scope.recipeId, time).then(function(flag){
+                                if(flag) {
+                                    $scope.comments.splice(index, 1);
+                                }
+                            });
+                        }
+                    });
+                };
+            }
+        };
+    }];
 });

www/js/modules/recipe/services/recipe.service.js

@@ -166,6 +166,22 @@ define(function () {
             return def.promise;
         }
 
+        function deleteComment(recipeId, time) {
+            var def = $q.defer();
+
+            $http.post(CONFIG.SERVICE_URL.DELETE_COMMENT, {
+                recipeId: recipeId,
+                time: time
+            }).success(function(flag){
+                def.resolve(flag);
+            }).error(function(err) {
+                console.log("error in deleting comment");
+                def.reject(false);
+            });
+
+            return def.promise;
+        }
+
         function __getBase64FormatOfImg(url) {
             var img = new Image(), def = $q.defer();
             img.crossOrigin = 'Anonymous';
@@ -189,7 +205,8 @@ define(function () {
             getPDFDocDefinition: getPDFDocDefinition,
             getSavedRecipeList: getSavedRecipeList,
             recommendRecipe: recommendRecipe,
-            postComment: postComment
+            postComment: postComment,
+            deleteComment: deleteComment
         };
 
     };

www/templates/recipe/comments.html

@@ -1,7 +1,14 @@
 <div class="all-comments" id="allCommentSection">
-    <div class="comment" ng-repeat="comment in comments">
+    <div ng-if="comments.length === 0" class="no-comment">{{'recipe.no_comment' | translate}}</div>
+    <div class="comment" ng-repeat="comment in comments track by $index" ng-init="comment.showRemoveCommentSection = false" on-hold="comment.showRemoveCommentSection = true">
+        <div class="shadow-remove" ng-if="comment.cook.id === userId && comment.showRemoveCommentSection === true" ng-click="comment.showRemoveCommentSection = false">
+            <a href="javascript:;" ng-click="deleteComment($event, $index, comment.time)" class="icon ion-trash-b delete-comment assertive"></a>
+        </div>
         <header>
-            <h3 class="comment-cook-name" id="{{comment.cook.id}}">{{comment.cook.name}}</h3>
+            <h3 class="comment-cook-name" id="{{comment.cook.id}}">
+                {{comment.cook.name}}
+                <span class="comment-date">{{comment.time|date: 'mediumDate'}}</span>
+            </h3>
         </header>
         <section class="comment-cook">
             <i class="icon ion-chatbubble-working"></i>

www/templates/recipe/full-recipe.html

@@ -1,8 +1,3 @@
-<!--<ion-nav-bar class="bar-assertive">
-    <ion-nav-back-button class="button-icon ion-arrow-left-c">
-    </ion-nav-back-button>
-</ion-nav-bar>-->
-
 <ion-view title="{{'recipe.header' | translate}}">
     <ion-content>
         <div class="full-recipe-container item-container" id="{{recipe._id}}">
@@ -60,7 +55,7 @@ <h1 class="recipe-title">{{recipe.title}}</h1>
                         <button ng-click="submitComment(recipe._id)" class="button button-block button-positive">{{'recipe.recipe-comment-submit' | translate}}</button>
                     </div>
                     <div class="comment-title">{{'recipe.all-comment-title' | translate}}</div>
-                    <comment-box></comment-box>
+                    <comment-box comments="comments" recipe-id="recipe._id"></comment-box>
                 </div>
             </div>
         </div>