improve snippets.list UX & add instant edit handler for snippet with empty tag-list

Author: Rokt33r

src/controllers/states/SnippetsDetailController.js

@@ -1,6 +1,6 @@
 /* global angular */
 angular.module('codexen')
-  .controller('SnippetsDetailController', function (Snippet, $state, $rootScope, $scope) {
+  .controller('SnippetsDetailController', function (Snippet, $state, $rootScope, $scope, Modal) {
     var vm = this
 
     vm.isLoaded = false
@@ -24,6 +24,18 @@ angular.module('codexen')
         })
     }
 
+
+    $scope.$on('taggingRequested', function (e) {
+      e.stopPropagation()
+      e.preventDefault()
+      Modal.editSnippet(angular.copy(vm.snippet))
+        .result.then(function (snippet) {
+        $rootScope.$broadcast('snippetUpdated', snippet)
+      }, function () {
+        console.log('edit snippet modal dismissed')
+      })
+    })
+
     $scope.$on('snippetUpdated', function (e, snippet) {
       console.log('event received', snippet)
       if (snippet.id === vm.snippet.id) vm.snippet = snippet

src/controllers/states/SnippetsListController.js

@@ -20,17 +20,29 @@ angular.module('codexen')
 
     // TODO: keyboard navigating UX
 
-    $scope.$on('$stateChangeStart', function (e, toState, toParams) {
+    $scope.$on('$stateChangeSuccess', function (e, toState, toParams) {
+      if (!toState.name.match(/snippets/)) return null
+
       vm.snippetId = parseInt(toParams.id)
+
       if (!vm.snippetId && vm.filtered[0]) {
         $state.go('snippets.detail', {id: vm.filtered[0].id})
       }
     })
 
 
     $scope.$on('snippetUpdated', function (e, snippet) {
+      if (!mySnippets.some(function (_snippet, index) {
+        if (_snippet.id === snippet.id) {
+          mySnippets[index] = snippet
+          return true
+        }
+        return false
+      })) mySnippets.unshift(snippet)
+
+      searchSnippets()
+      vm.snippetId = snippet.id
       $state.go('snippets.detail', {id: snippet.id})
-      loadSnippets()
     })
 
     $scope.$on('snippetDeleted', function () {

src/directives/snippet-item.js

@@ -0,0 +1,24 @@
+/* global angular */
+angular.module('codexen')
+  .directive('snippetItem', function (Modal, $rootScope) {
+    return {
+      restrict: 'A',
+      transclude: true,
+      template: '<div ng-transclude></div>',
+      scope: {
+        snippet: '=snippetItem'
+      },
+      link: function (scope, elem) {
+        scope.$on('taggingRequested', function (e) {
+          e.stopPropagation()
+          e.preventDefault()
+          Modal.editSnippet(angular.copy(scope.snippet))
+            .result.then(function (snippet) {
+            $rootScope.$broadcast('snippetUpdated', snippet)
+          }, function () {
+            console.log('edit snippet modal dismissed')
+          })
+        })
+      }
+    }
+  })

src/directives/tag-list.js

@@ -3,9 +3,10 @@ angular.module('codexen')
   .directive('tagList', function () {
     return {
       restrict: 'A',
-      template: '<p class="tags" ng-if="tags.length">' +
+      template: '<p class="tags">' +
         '<i class="fa fa-tags"></i> ' +
         '<a tag-item="tag" ng-repeat="tag in tags" href></a>' +
+        '<a ng-if="!tags.length" ng-click="requestTagging($event)" href> Not tagged yet</a>' +
         '</p>',
       scope: {
         tags: '=tagList'
@@ -16,6 +17,12 @@ angular.module('codexen')
             e.stopPropagation()
           })
         })
+
+        scope.requestTagging = function (e) {
+          e.preventDefault()
+          e.stopPropagation()
+          scope.$emit('taggingRequested')
+        }
       }
     }
   })

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

@@ -13,7 +13,7 @@ <h4>New Snippet</h4>
         <ui-select ng-model="vm.mode" style="display: inline-block;" on-select="vm.log(vm.mode.name.toLowerCase())" theme="bootstrap">
           <ui-select-match placeholder="Select Type">{{$select.selected}}</ui-select-match>
           <ui-select-choices repeat="mode in vm.aceModes | filter: $select.search">
-            <div ng-bind-html="mode | highlight: $select.search"></div>
+            <div ng-bind="::mode"></div>
           </ui-select-choices>
         </ui-select>
     </div>

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.filtered" ui-sref="snippets.detail({id:snippet.id})" ng-class="{active:vm.snippetId===snippet.id}">
+      <li snippet-item="snippet" ng-repeat="snippet in vm.filtered" 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="" />