Tag system

client/app/app.less

@@ -49,6 +49,7 @@
 @import '../components/footer/footer.less';
 @import '../components/oauth-buttons/oauth-buttons.less';
 @import '../components/sortArrow/sortArrow.less';
+@import '../components/tag/tag.less';
 @import '../components/viewAttendance/viewAttendance.less';
 // endinjector
 

client/app/projects/blog/blog.controller.js

@@ -13,8 +13,10 @@ angular.module('observatory3App')
     };
 
     $scope.userOwnsPost = function(post) {
-        var userId = $scope.user._id;
-        return ($scope.isAdmin() || $scope.getCurrentUser().role.toLowerCase() === 'mentor' || userId === post.author._id);
+        if($scope.user._id){
+          var userId = $scope.user._id;
+          return ($scope.isAdmin() || $scope.getCurrentUser().role.toLowerCase() === 'mentor' || userId === post.author._id);
+        }
     };
 
     $scope.editPost = function(post) {
@@ -143,6 +145,10 @@ angular.module('observatory3App')
 
       });
     };
+
+    $scope.canEdit = function(){
+      return false;
+    }
 
     $scope.load();
 

client/app/projects/blog/blog.html

@@ -1,6 +1,6 @@
 <div ng-include="'components/navbar/navbar.html'"></div>
 
-<div class="container">
+<div class="container project-blogs">
   <div class="row">
   <div class="col-xs-3">
     <h2><a href="projects/{{ project.githubUsername }}/{{ project.githubProjectName }}/profile"> {{ project.name }}</a></h2>
@@ -23,28 +23,30 @@ <h2><a href="projects/{{ project.githubUsername }}/{{ project.githubProjectName
 
     <div class="col-md-9">
       <div ng-repeat="sem in listOfsem">
-      <h2 id = "{{sem}}"> {{sem}}</h2>
-        <div ng-repeat="post in semesters[sem] | orderBy:'-date' track by $index">
-          <div class="extra-content">
-            <h2 id="title" class="col-xs-6" btf-markdown="post.title"></h2>
-            <div ng-show='userInProject()'>
-              <div ng-show="userOwnsPost(post)"class="col-xs-6 text-right">
+        <h2 id = "{{sem}}"> {{sem}}</h2>
+        <div ng-repeat="post in semesters[sem] | orderBy:'-date' track by $index" class="extra-content">
+          <div class="row">
+            <h2 class="col-xs-6 title">{{post.title}}</h2>
+            <div ng-show="userInProject() && userOwnsPost(post)" class="col-xs-6 text-right">
               <div class="btn-group">
                 <button type="button" class='btn btn-default btn-sm' ng-click='editPost(post)'>Edit</button>
                 <button type="button" class='btn btn-default btn-sm' ng-click='savePost(post)'>Save</button>
                 <button type="button" class='btn btn-default btn-sm' ng-click='deletePost(post)'>Delete</button>
               </div>
-              </div>
             </div>
-            <div class="clear"></div>
-            <div  id="content" btf-markdown="post.content"></div>
-            <div class="bottom-bar">
-              <div class="bottom-bar-left">
-                <a href="users/{{ post.author._id }}/profile"> {{ post.author.name }}</a>
-              </div>
-              <div class="bottom-bar-right">
-                {{ post.date | date:'MMM dd yyyy HH:mm:ss' }}
-              </div>
+            <div class="col-xs-12">
+              <tag endpoint="posts" id="post._id" can-Edit="canEdit()" tags="post.tags"> </tag>
+              <br>
+            </div>
+          </div>  
+          <div class="clear"></div>
+          <div btf-markdown="post.content"></div>
+          <div class="bottom-bar">
+            <div class="bottom-bar-left">
+              <a href="users/{{ post.author._id }}/profile"> {{ post.author.name }}</a>
+            </div>
+            <div class="bottom-bar-right">
+              {{ post.date | date:'MMM dd yyyy HH:mm:ss' }}
             </div>
           </div>
         </div>

client/app/projects/blog/blog.less

@@ -1,8 +1,15 @@
-#titleEdit {
-    height: 30px;
-}
+.project-blogs{
+	h2.title {
+	    padding-left: 15px;
+	}
 
-#contentEdit {
-    height: 150px;
-    width: 100%;
-}
+	.tech-tags {
+		padding : 0px;
+		span{
+			background-color: #c0d6ec;
+			a {
+				color: #545454;
+			}
+		}
+	}
+}

client/app/projects/profile/profile.controller.js

@@ -46,7 +46,6 @@ angular.module('observatory3App')
     $scope.slides = slides;
   };
 
-  //end tech bubble code
   var updateProject = function(){
     Project.getProject($stateParams.username, $stateParams.project).then(function(result) {
       $scope.project = result.data;
@@ -94,7 +93,6 @@ angular.module('observatory3App')
     });
 
     modalInstance.result.then(function (projectAdded) {
-      // $window.location.reload();
       var redirectUsername = projectAdded.githubUsername;
       var redirectProjectName = projectAdded.githubProjectName;
       if (redirectUsername === $stateParams.username && redirectProjectName === $stateParams.project){
@@ -212,26 +210,7 @@ angular.module('observatory3App')
         });
     }
   };
-  //tech bubble code
   $scope.isMentor = Auth.isMentor;
-  $scope.addTechBubble = function(){
-    if($scope.insertTechContent){
-      $http.put('/api/projects/addTechBubble/' + $scope.project._id + '/' + $scope.insertTechContent).success(function(){
-        $scope.project.tech.push($scope.insertTechContent);
-        $scope.insertTechContent = '';
-      }).error(function(){
-        notify({message: 'Could not add tech!', classes: ['alert-danger']});
-      });
-    }
-  };
-  $scope.removeTech = function(tech){
-    $http.put('/api/projects/' + $scope.project._id + '/' + tech + '/removeTech').success(function(){
-      $scope.project.tech.splice($scope.project.tech.indexOf(tech),1);
-    }).error(function(){
-      notify({message: 'Could not remove tech!', classes: ['alert-danger']});
-    });
-  };
-
   updateProject();
 
 });

client/app/projects/profile/profile.html

@@ -41,16 +41,7 @@ <h1 >{{project.name}}</h1>
   <div class="row">
     <div class="col-sm-12">
       <div ng-show="canEdit()">Add a new tech tag: </div>
-      <div class="tech-tags">
-        <div class='tech-boxes' ng-show="project.tech.length || canEdit()">
-            <span ng-repeat="tech in project.tech track by $index">
-              {{tech}}
-              <g class="glyphicon glyphicon-remove" ng-show='canEdit()' class='btn btn=default btn-xs' ng-click='removeTech(tech)' aria-hidden="true"></g>
-            </span>
-            <input ng-enter="addTechBubble()" ng-show='canEdit()' placeholder='html' ng-model="insertTechContent" size='4' type='text' />
-            <button ng-click="addTechBubble()" ng-show='canEdit()' class="btn btn-default btn-xs">+</button>
-        </div>
-      </div>
+      <tag endpoint="projects" id="project._id" can-Edit="canEdit()" tags="project.tech"> </tag>
     </div>
   </div>
   <div class="row">

client/app/projects/profile/profile.less

@@ -1,8 +1,5 @@
 .project-profile{
-  // h3 {
-  //   margin-top: 0px;
-  // }
-
+
   div[class*="col"] {
     padding: 10px;
   }
@@ -152,24 +149,6 @@
       display: block;
   }
 
-  .tech-tags {
-      padding: 10px;
-
-      span {
-        padding: 5px 10px;
-        display: inline-block;
-        background-color: #eee;
-        margin-right: 5px;
-        -webkit-border-radius: 5px;
-        -moz-border-radius: 5px;
-        border-radius: 10px;
-      }
-      .tech-boxes {
-        white-space: nowrap;
-        overflow-x: auto;
-      }
-  }
-
   g {
     padding: 3px;
   }

client/app/user/profile/profile.controller.js

@@ -107,29 +107,6 @@ angular.module('observatory3App')
          });
       };
 
-      $scope.addTechBubble = function(){
-        if($scope.insertTechContent){
-          $http.put('/api/users/' + $stateParams.id + '/addTech', {
-              'tech': $scope.insertTechContent
-          }).success(function(){
-              $scope.user.tech.push($scope.insertTechContent);
-              $scope.insertTechContent = '';
-          }).error(function(){
-              notify({message: "Could not add tech!", classes: ["alert-danger"]});
-          });
-        }
-      };
-
-      $scope.removeTech = function(tech){
-          $http.put('/api/users/' + $stateParams.id + '/removeTech', {
-              'tech': tech
-          }).success(function(){
-              $scope.user.tech.splice($scope.user.tech.indexOf(tech),1);
-          }).error(function(){
-              notify({message: "Could not add tech!", classes: ["alert-danger"]});
-          });
-      };
-
       $scope.pastUser = function(user){
           var conf = confirm("Are you sure you want to make your account inactive?");
           if (conf){

client/app/user/profile/profile.html

@@ -49,16 +49,7 @@
             <div class="row">
               <div class="col-sm-12">
                 <div ng-show="canEdit()">Add a new tech tag: </div>
-                <div class="tech-tags">
-                  <div class='tech-boxes' ng-show="user.tech.length || canEdit()">
-                      <span ng-repeat="tech in user.tech track by $index">
-                        {{tech}}
-                        <g class="glyphicon glyphicon-remove" ng-show='canEdit()' class='btn btn=default btn-xs' ng-click='removeTech(tech)' aria-hidden="true"></g>
-                      </span>
-                      <input ng-enter="addTechBubble()" ng-show='canEdit()' placeholder='html' ng-model="insertTechContent" size='4' type='text' />
-                      <button ng-click="addTechBubble()" ng-show='canEdit()' class="btn btn-default btn-xs">+</button>
-                  </div>
-                </div>
+                <tag endpoint="users" id="user._id" can-Edit="canEdit()" tags="user.tech"> </tag>
               </div>
             </div>
             <div ng-hide="user.bio">User has not written a bio</div>

client/app/user/profile/profile.less

@@ -44,23 +44,6 @@
         margin-top:10px;
     }
 
-    .tech-tags {
-        padding: 10px;
-
-        span {
-          padding: 5px 10px;
-          display: inline-block;
-          background-color: #eee;
-          margin-right: 5px;
-          -webkit-border-radius: 5px;
-          -moz-border-radius: 5px;
-          border-radius: 10px;
-        }
-        .tech-boxes {
-          white-space: nowrap;
-          overflow-x: auto;
-        }
-    }
     .project-tech-boxes{
         div{
             display:inline-block;

client/components/editBlog/editBlog.directive.js

@@ -9,6 +9,8 @@ angular.module('observatory3App')
   if (editBlog) {
     $scope.blog = editBlog;
     $scope.editing = true;
+  }else{
+    $scope.blog.tags = [];
   }
   $scope.submit = function(form) {
     $scope.submitted = true;
@@ -37,7 +39,8 @@ angular.module('observatory3App')
       else{
         $http.put('/api/posts/' + $scope.blog._id, {
           'title': $scope.blog.title,
-          'content': $scope.blog.content
+          'content': $scope.blog.content,
+          'tags' : $scope.blog.tags
         }).then(function(){
           notify('Post updated!');
           $uibModalInstance.close($scope.project);
@@ -62,4 +65,8 @@ angular.module('observatory3App')
     $uibModalInstance.dismiss('cancel');
   };
 
+  $scope.canEdit = function(){
+    return true;
+  };
+
 });

client/components/editBlog/editBlog.html

@@ -13,6 +13,8 @@ <h3 ng-hide="editing" class="modal-title">New Blog Post</h3>
           What is the title of your blog post?
         </p>
       </div>
+      <label>Tag:</label>
+      <tag endpoint="posts" id="blog._id" can-Edit="canEdit()" tags="blog.tags"> </tag>
       <div class="form-group" ng-class="{ 'has-success': addPostForm.content.$valid && submitted,
       'has-error': addPostForm.content.$invalid && submitted }">
         <label>Content</label>

client/components/tag/tag.directive.js

@@ -0,0 +1,46 @@
+'use strict';
+
+angular.module('observatory3App')
+ .directive('tag', function () {
+ 	return{
+		templateUrl: 'components/tag/tag.html',
+		scope: {
+		  endpoint: '@',
+		  canEdit: '&',
+		  id: '=',
+		  tags: '='
+	}, 
+ 	restrict: 'E',
+ 	controller: function ($scope,$http,notify) {
+
+		$scope.addTechBubble = function(){
+			if($scope.insertTechContent){
+				if($scope.endpoint==='posts'){
+					$scope.tags.push($scope.insertTechContent);
+			    	$scope.insertTechContent = '';
+				}
+			 else{
+			  	$http.put('/api/'+$scope.endpoint+'/addTechBubble/' +  $scope.id  + '/' + $scope.insertTechContent).success(function(){
+			    	$scope.tags.push($scope.insertTechContent);
+			    	$scope.insertTechContent = '';
+			  	}).error(function(){
+			    notify({message: 'Could not add tech!', classes: ['alert-danger']});
+			  });
+			}
+		}
+		};
+
+		$scope.removeTech = function(tag){
+			if($scope.endpoint==='posts'){
+			  $scope.tags.splice($scope.tags.indexOf(tag),1);
+			}else{
+				$http.put('/api/'+$scope.endpoint + '/' + $scope.id + '/' + tag + '/removeTech').success(function(){
+				  $scope.tags.splice($scope.tags.indexOf(tag),1);
+				}).error(function(){
+				  notify({message: 'Could not remove tech!', classes: ['alert-danger']});
+				});
+			}
+		};
+ 	}
+  };
+});

client/components/tag/tag.html

@@ -0,0 +1,11 @@
+
+<div class="tech-tags">
+  <div class='tech-boxes' ng-show="tags.length || canEdit()">
+      <span ng-repeat="tag in tags track by $index">
+        <a href="">{{tag}} </a>
+        <g class="glyphicon glyphicon-remove" ng-show='canEdit()' class='btn btn=default btn-xs' ng-click='removeTech(tag)' aria-hidden="true"></g>
+      </span>
+      <input ng-enter="addTechBubble()" ng-show="canEdit()" placeholder='new tag' ng-model="insertTechContent" size='6' type='text' />
+      <button type="button" ng-click="addTechBubble()" ng-show="canEdit()" class="btn btn-default btn-xs">+</button>
+  </div>
+</div>

client/components/tag/tag.less

@@ -0,0 +1,16 @@
+.tech-tags {
+    padding: 10px 10px 10px 0;
+    span {
+      padding: 5px 10px;
+      display: inline-block;
+      background-color: #eee;
+      margin-right: 5px;
+      -webkit-border-radius: 5px;
+      -moz-border-radius: 5px;
+      border-radius: 10px;
+    }
+    .tech-boxes {
+      white-space: nowrap;
+      overflow-x: auto;
+    }
+}