update search behavior

Author: Rokt33r

src/config/states.js

@@ -29,7 +29,7 @@ angular.module('codexen')
 
       /* Snippets */
       .state('snippets', {
-        url: '/snippets',
+        url: '/snippets?search',
         views: {
           'main-view': {
             templateUrl: 'tpls/states/snippets.list.tpl.html',

src/controllers/modals/NewSnippetModalController.js

@@ -11,7 +11,7 @@ angular.module('codexen')
         callSign: vm.callSign,
         mode: vm.mode == null ? null : vm.mode.toLowerCase(),
         content: vm.content,
-        tags: angular.isArray(vm.Tags) ? vm.Tags.map(function (tag) { return tag.name }) : []
+        Tags: angular.isArray(vm.Tags) ? vm.Tags.map(function (tag) { return tag.name }) : []
       }
 
       Snippet.create(params)

src/controllers/states/SnippetsListController.js

@@ -1,10 +1,17 @@
 /* global angular */
 angular.module('codexen')
-  .controller('SnippetsListController', function ($auth, Snippet, $scope, $state) {
+  .controller('SnippetsListController', function ($auth, Snippet, $scope, $state, $scope) {
     var vm = this
 
     vm.isLoaded = false
 
+    vm.search = $state.params.search
+
+    vm.snippetId = parseInt($state.params.id)
+    $scope.$on('$stateChangeStart', function (e, toState, toParams) {
+      vm.snippetId = parseInt(toParams.id)
+    })
+
     var loadSnippets = function () {
       if ($auth.isAuthenticated) {
         Snippet.findMine({

src/directives/tags.js

@@ -5,10 +5,17 @@ angular.module('codexen')
       restrict: 'A',
       template: '<p class="tags" ng-if="tags.length">' +
         '<i class="fa fa-tags"></i> ' +
-        '<a ng-repeat="tag in tags" href="#">#<span ng-bind="tag.name"></span></a>' +
+        '<a ui-sref="snippets({search:\'tag:\'+tag.name})" ng-repeat="tag in tags" href="#">#<span ng-bind="tag.name"></span></a>' +
         '</p>',
       scope: {
         tags: '='
+      },
+      link: function (scope, el) {
+        el.ready(function () {
+          el.find('a').on('click', function (e) {
+            e.stopPropagation()
+          })
+        })
       }
     }
   })

src/filters/search-snippets.js

@@ -2,9 +2,10 @@
 angular.module('codexen')
   .filter('searchSnippets', function ($filter) {
     return function (input, needle) {
-      if (!angular.isString(needle)) return input
-      if (needle.match(/^#./)) {
-        var name = needle.match(/^#(.+)/)[1]
+      if (!angular.isString(needle) || !angular.isArray(input)) return input
+      if (needle.match(/#(.+)|tag:(.+)/)) {
+        var name = needle.match(/#(.+)/) ? needle.match(/#(.+)/)[1] : needle.match(/tag:(.+)/)[1]
+
         return input.filter(function (snippet) {
           return snippet.Tags.some(function (tag) {
             return tag.name.match(new RegExp(name))

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

@@ -26,7 +26,7 @@ <h4>
         <a ui-sref="auth.signin" class="btn btn-default"><i class="fa fa-signin"></i> Sign In</a>
       </li>
 
-      <li ng-repeat="snippet in vm.snippets | searchSnippets:vm.search" ui-sref="snippets.detail({id:snippet.id})" ui-sref-active="active">
+      <li ng-repeat="snippet in vm.snippets | searchSnippets:vm.search" ui-sref="snippets.detail({id:snippet.id})" ng-class="{active:vm.snippetId===snippet.id}">
         <div class="media">
           <div class="media-left">
             <img width="25" height="25" class="img-circle" src="http://www.gravatar.com/avatar/ea0b6ad1c11700120d1af08810caa19d" alt="" />