add delete snippet modal & fix deletion behavior

Author: Rokt33r

src/config/states.js

@@ -38,9 +38,7 @@ angular.module('codexen')
         },
         resolve: {
           mySnippets: function (Snippet) {
-            return Snippet.findMine({
-              'include': ['Tag']
-            }).then(function (res) {
+            return Snippet.findMine().then(function (res) {
               return res.data
             })
           }

src/controllers/modals/DeleteSnippetModalController.js

@@ -0,0 +1,16 @@
+/* global angular */
+angular.module('codexen')
+  .controller('DeleteSnippetModalController', function ($modalInstance, Snippet, snippet) {
+    var vm = this
+
+    vm.submit = function () {
+      Snippet.delete(snippet.id)
+        .success(function (snippet) {
+          $modalInstance.close(snippet)
+        })
+    }
+
+    vm.cancel = function () {
+      $modalInstance.dismiss()
+    }
+  })

src/controllers/states/SnippetsListController.js

@@ -47,21 +47,28 @@ angular.module('codexen')
 
     $scope.$on('snippetDeleted', function () {
       if ($state.is('snippets.detail')) {
-        var currentSnippetId = $state.params.id
+        var currentSnippetId = parseInt($state.params.id)
+        // Delete snippet from snippet list
         for (var i = 0; i < vm.snippets.length; i++) {
-          if (vm.snippets[i]._id === currentSnippetId) {
-            var targetSnippet = null
-
-            if (i === 0) targetSnippet = vm.snippets[i + 1]
-            else targetSnippet = vm.snippets[i - 1]
-
-            console.log('target', targetSnippet)
-            $state.go('snippets.detail', {id: targetSnippet._id})
+          if (vm.snippets[i].id === currentSnippetId) {
+            vm.snippets.splice(i, 1)
+            break
+          }
+        }
+        // Delete snippet from `filtered list`
+        // And redirect `next filtered snippet`
+        for (var i = 0; i < vm.filtered.length; i++) {
+          if (vm.filtered[i].id === currentSnippetId) {
+            if (vm.filtered[i+1] != null) $state.go('snippets.detail', {id: vm.filtered[i+1].id})
+            else if (vm.filtered[i-1] != null) $state.go('snippets.detail', {id: vm.filtered[i-1].id})
+            else $state.go('snippets')
+
+            vm.filtered.splice(i, 1)
             break
           }
         }
+
       }
-      loadSnippets()
     })
 
     $scope.$on('tagSelected', function (e, tag) {

src/directives/btn-delete-snippet.js

@@ -0,0 +1,19 @@
+/* global angular */
+angular.module('codexen')
+  .directive('btnDeleteSnippet', function (Modal, $rootScope) {
+    return {
+      scope: {
+        snippet: '=btnDeleteSnippet'
+      },
+      link: function (scope, el) {
+        el.on('click', function () {
+          Modal.deleteSnippet(scope.snippet)
+            .result.then(function (snippet) {
+              $rootScope.$broadcast('snippetDeleted', snippet)
+            }, function () {
+              console.log('delete snippet modal dismissed')
+            })
+        })
+      }
+    }
+  })

src/filters/search-snippets.js

@@ -2,7 +2,7 @@
 angular.module('codexen')
   .filter('searchSnippets', function ($filter) {
     return function (input, needle) {
-      if (!angular.isString(needle) || !angular.isArray(input)) return input
+      if (!angular.isString(needle) || !angular.isArray(input)) return angular.copy(input)
       if (needle.match(/#(.+)|tag:(.+)/)) {
         var name = needle.match(/#(.+)/) ? needle.match(/#(.+)/)[1] : needle.match(/tag:(.+)/)[1]
 

src/services/Modal.js

@@ -20,8 +20,21 @@ angular.module('codexen')
       })
     }
 
+    var deleteSnippet = function (snippet) {
+      return $modal.open({
+        resolve: {
+          snippet: function () {
+            return snippet
+          }
+        },
+        templateUrl: 'tpls/modals/delete-snippet-modal.tpl.html',
+        controller: 'DeleteSnippetModalController as vm'
+      })
+    }
+
     return {
       newSnippet: newSnippet,
-      editSnippet: editSnippet
+      editSnippet: editSnippet,
+      deleteSnippet: deleteSnippet
     }
   })

src/tpls/modals/delete-snippet-modal.tpl.html

@@ -0,0 +1,16 @@
+<div class="new-snippet-modal">
+  <div class="modal-header">
+    <h4>Delete Snippet</h4>
+  </div>
+
+  <div class="modal-body">
+    <p>
+      Are you sure to delete it?
+    </p>
+  </div>
+
+  <div class="modal-footer">
+    <button ng-click="vm.submit()" type="button" name="button" class="btn btn-danger">Delete It</button>
+    <button ng-click="vm.cancel()" type="button" name="button" class="btn btn-default">Cancel</button>
+  </div>
+</div>

src/tpls/states/snippets.detail.tpl.html

@@ -9,7 +9,7 @@
     <span class="detail-header-control pull-right">
       <button type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button>
       <button btn-edit-snippet="vm.snippet" type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button>
-      <button ng-click="vm.delete()" type="button" name="button" class="btn btn-danger"><i class="fa fa-trash"></i></button>
+      <button btn-delete-snippet="vm.snippet" type="button" name="button" class="btn btn-danger"><i class="fa fa-trash"></i></button>
     </span>
   </div>