add tagging

Author: Rokt33r

src/main.scss

@@ -17,6 +17,9 @@ body {
 label{
   font-family: "Lato", sans-serif;
 }
+textarea{
+  resize: vertical;
+}
 
 #side-view{
   position:absolute;

src/modals/new-snippet-modal.js

@@ -11,7 +11,7 @@ angular.module('codexen.modals')
       open: open
     }
   })
-  .controller('NewSnippetModalController', function ($modalInstance, aceModes, $log, Snippet, $rootScope){
+  .controller('NewSnippetModalController', function ($modalInstance, aceModes, $log, Snippet, $rootScope, Tag){
     var vm = this
 
     vm.aceModes = aceModes
@@ -22,7 +22,8 @@ angular.module('codexen.modals')
         description: vm.description,
         prefix: vm.prefix,
         mode: vm.mode==null?null:vm.mode.name.toLowerCase(),
-        content: vm.content
+        content: vm.content,
+        tags: angular.isArray(vm.tags)?vm.tags.map(function (tag) { return {_id: tag._id, name: tag.name} }):[]
       }
 
       Snippet.create(params)
@@ -32,6 +33,23 @@ angular.module('codexen.modals')
         })
     }
 
+    // vm.tags = []
+    vm.tagCandidates = []
+    vm.refreshTagCandidates = function(tagName) {
+      if (tagName == null || tagName == '') return null
+      return Tag.findByName(tagName)
+        .success(function (data) {
+          console.log('tags fetched!!', data)
+          vm.tagCandidates = data.tags
+        })
+    }
+    vm.transform = function (tagName) {
+      return {
+        _id:0,
+        name:tagName
+      }
+    }
+
     vm.cancel = function () {
       $modalInstance.dismiss()
     }

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

@@ -10,9 +10,9 @@
     <div class="form-group">
         <input ng-model="vm.prefix" type="text" name="prefix" class="inline-form-control" placeholder="Prefix">
 
-        <ui-select ng-model="vm.mode" style="display: inline-block;" on-select="vm.log(vm.mode.name.toLowerCase())" theme="bootstrap" ng-disabled="disabled">
+        <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.name}}</ui-select-match>
-            <ui-select-choices repeat="mode in vm.aceModes | filter: {name: $select.search}">
+          <ui-select-choices repeat="mode in vm.aceModes | filter: {name: $select.search}">
             <div ng-bind-html="mode.name | highlight: $select.search"></div>
           </ui-select-choices>
         </ui-select>
@@ -25,6 +25,19 @@
       }"
       ng-model="vm.content"
     ></div>
+
+    <div class="form-group">
+      <ui-select multiple tagging="vm.transform" tagging-tokens="SPACE|,|/" ng-model="vm.tags" theme="bootstrap">
+        <ui-select-match placeholder="Write Tags">{{$item.name}}</ui-select-match>
+        <ui-select-choices repeat="tag in vm.tagCandidates" refresh="vm.refreshTagCandidates($select.search)"
+         refresh-delay="200">
+          <div><span ng-bind-html="tag.name | highlight: $select.search"></span><span ng-if="tag.isTag">(new)</span></div>
+        </ui-select-choices>
+      </ui-select>
+
+
+    </div>
+
   </div>
 
   <div class="modal-footer">

src/services/snippet.js

@@ -1,7 +1,7 @@
 angular.module('codexen.services')
   .factory('Snippet', function ($http, $auth, apiUrl) {
     var findByUser = function (user) {
-      var url = apiUrl + 'snippets'
+      var url = apiUrl + 'snippets/search'
 
       return $http.get(url, {
         params: {
@@ -11,13 +11,13 @@ angular.module('codexen.services')
     }
 
     var create = function (params) {
-      var url = apiUrl + 'snippets'
+      var url = apiUrl + 'snippets/create'
 
       return $http.post(url, params)
     }
 
     var show = function (id) {
-      var url = apiUrl + 'snippets/' + id
+      var url = apiUrl + 'snippets/id/' + id
 
       return $http.get(url)
     }

src/services/tag.js

@@ -0,0 +1,16 @@
+angular.module('codexen.services')
+  .factory('Tag', function ($http, apiUrl) {
+    var findByName = function (tagName) {
+      var url = apiUrl + 'tags/search'
+
+      return $http.get(url, {
+        params: {
+          name: tagName
+        }
+      })
+    }
+
+    return {
+      findByName: findByName
+    }
+  })

src/states/home/home.js

@@ -1,6 +1,6 @@
 /* global angular */
 angular.module('codexen.states')
   .controller('HomeController', function ($auth, Snippet, $scope) {
-    
+
 
   })

src/states/snippets/detail.tpl.html

@@ -2,7 +2,7 @@
 
   <div class="detail-header">
     <span class="detail-header-title">
-      <small>Title : </small> 
+      <small>Title : </small>
       <span ng-bind="vm.snippet.title"></span></span>
     <span class="detail-header-control pull-right">
       <button type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button>
@@ -18,15 +18,18 @@
     </div>
 
     <div ng-if="vm.isLoaded" class="">
-      <p>
-        <span ng-repeat="tag in vm.snippet.tags" ng-bind="tag.name"></span>
+      <p class="tags">
+        <small><i class="fa fa-tags"></i></small> <a ng-repeat="tag in vm.snippet.tags" ng-bind="tag.name" href="#" class="label label-default"></a>
       </p>
       <label>Description</label>
       <p ng-bind="vm.snippet.description"></p>
       <label>Content</label>
       <div ui-ace="{
         readonly: true,
-        showGutter: false
+        showGutter: false,
+        rendererOptions: {
+            maxLinks: Infinity
+        }
       }" ng-model="vm.snippet.content"></div>
     </div>
   </div>

src/states/snippets/list.tpl.html

@@ -34,8 +34,8 @@ <h4 ng-bind="snippet.title"></h4>
           </div>
         </div>
         <p ng-bind="snippet.description"></p>
-        <p>
-          <a ng-repeat="tag in snippet.tags" ng-bind="tag.name" href="#" class="label label-default"></a>
+        <p class="tags">
+          <small><i class="fa fa-tags"></i></small> <a ng-repeat="tag in snippet.tags" ng-bind="tag.name" href="#" class="label label-default"></a>
         </p>
       </li>
     </ul>

src/states/snippets/snippets.scss

@@ -75,3 +75,8 @@ $snippet-list-item-hover-bg: #EEE;
     }
   }
 }
+.tags{
+  a{
+    margin: 0 2px;
+  }
+}