feat(uibootstrap-modal): add basic modal service and template when using uibootstrap

Changes: (only if ui-bootstrap is selected)
- add `client/components/modal` folder
- modal folder contains service, markup template, and stylesheet
- modal service is intended to be extended, comes with `Modal.confirm.delete()` method
- admin and main page will both use `Modal.confirm.delete()`

Todo:
- review code for cleanliness and correctness
- possibly extend the modal service to include a basic alert class?
- write test for `Modal` service?

Author: kingcody

app/templates/client/app/admin(auth)/admin(html).html

@@ -6,7 +6,7 @@
     <li class="list-group-item" ng-repeat="user in users">
         <strong>{{user.name}}</strong><br>
         <span class="text-muted">{{user.email}}</span>
-        <a ng-click="delete(user)" class="trash"><span class="glyphicon glyphicon-trash pull-right"></span></a>
+        <a ng-click="delete(<% if(filters.uibootstrap) { %>user.name + ' (' + user.email + ')', <% } %>user)" class="trash"><span class="glyphicon glyphicon-trash pull-right"></span></a>
     </li>
   </ul>
 </div>

app/templates/client/app/admin(auth)/admin(jade).jade

@@ -7,5 +7,5 @@ div(ng-include='"components/navbar/navbar.html"')
       strong {{user.name}}
       br
       span.text-muted {{user.email}}
-      a.trash(ng-click='delete(user)')
+      a.trash(ng-click='delete(<% if(filters.uibootstrap) { %>user.name + " (" + user.email + ")", <% } %>user)')
         span.glyphicon.glyphicon-trash.pull-right

app/templates/client/app/admin(auth)/admin.controller(coffee).coffee

@@ -1,12 +1,12 @@
 'use strict'
 
 angular.module '<%= scriptAppName %>'
-.controller 'AdminCtrl', ($scope, $http, Auth, User) ->
+.controller 'AdminCtrl', ($scope, $http, Auth, User<% if(filters.uibootstrap) { %>, Modal<% } %>) ->
 
   # Use the User $resource to fetch all users
   $scope.users = User.query()
 
-  $scope.delete = (user) ->
+  $scope.delete = <% if(filters.uibootstrap) { %>Modal.confirm.delete <% } %>(user) ->
     User.remove id: user._id
     angular.forEach $scope.users, (u, i) ->
       $scope.users.splice i, 1 if u is user

app/templates/client/app/admin(auth)/admin.controller(js).js

@@ -1,17 +1,17 @@
 'use strict';
 
 angular.module('<%= scriptAppName %>')
-  .controller('AdminCtrl', function ($scope, $http, Auth, User) {
+  .controller('AdminCtrl', function ($scope, $http, Auth, User<% if(filters.uibootstrap) { %>, Modal<% } %>) {
 
     // Use the User $resource to fetch all users
     $scope.users = User.query();
 
-    $scope.delete = function(user) {
+    $scope.delete = <% if(filters.uibootstrap) { %>Modal.confirm.delete(<% } %>function(user) {
       User.remove({ id: user._id });
       angular.forEach($scope.users, function(u, i) {
         if (u === user) {
           $scope.users.splice(i, 1);
         }
       });
-    };
+    }<% if(filters.uibootstrap) { %>)<% } %>;
   });

app/templates/client/app/main/main(html).html

@@ -13,7 +13,7 @@ <h1>'Allo, 'Allo!</h1>
     <div class="col-lg-12">
       <h1 class="page-header">Features:</h1>
       <ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="thing in awesomeThings">
-        <li><a href="#" tooltip="{{thing.info}}">{{thing.name}}<% if(filters.socketio) { %><button type="button" class="close" ng-click="deleteThing(thing)">&times;</button><% } %></a></li>
+        <li><a href="#" tooltip="{{thing.info}}">{{thing.name}}<% if(filters.socketio) { %><button type="button" class="close" ng-click="deleteThing(<% if(filters.uibootstrap) { %>thing.name, <% } %>thing)">&times;</button><% } %></a></li>
       </ul>
     </div>
   </div><% if(filters.socketio) { %>

app/templates/client/app/main/main(jade).jade

@@ -14,7 +14,7 @@ header#banner.hero-unit
         li
           a(href='#', tooltip='{{thing.info}}')
             | {{thing.name}}<% if(filters.socketio) { %>
-            button.close(type='button', ng-click='deleteThing(thing)') ×<% } %><% if(filters.socketio) { %>
+            button.close(type='button', ng-click='deleteThing(<% if(filters.uibootstrap) { %>thing.name, <% } %>thing)') ×<% } %><% if(filters.socketio) { %>
 
   form.thing-form
     label Syncs in realtime across clients

app/templates/client/app/main/main.controller(coffee).coffee

@@ -1,7 +1,7 @@
 'use strict'
 
 angular.module '<%= scriptAppName %>'
-.controller 'MainCtrl', ($scope, $http<% if(filters.socketio) { %>, socket<% } %>) ->
+.controller 'MainCtrl', ($scope, $http<% if(filters.socketio) { %>, socket<% } %><% if(filters.uibootstrap && filters.mongoose) { %>, Modal<% } %>) ->
   $scope.awesomeThings = []
 
   $http.get('/api/things').success (awesomeThings) ->
@@ -15,7 +15,7 @@ angular.module '<%= scriptAppName %>'
 
     $scope.newThing = ''
 
-  $scope.deleteThing = (thing) ->
+  $scope.deleteThing = <% if(filters.uibootstrap) { %>Modal.confirm.delete <% } %>(thing) ->
     $http.delete '/api/things/' + thing._id<% } %><% if(filters.socketio) { %>
 
   $scope.$on '$destroy', ->

app/templates/client/app/main/main.controller(js).js

@@ -1,7 +1,7 @@
 'use strict';
 
 angular.module('<%= scriptAppName %>')
-  .controller('MainCtrl', function ($scope, $http<% if(filters.socketio) { %>, socket<% } %>) {
+  .controller('MainCtrl', function ($scope, $http<% if(filters.socketio) { %>, socket<% } %><% if(filters.uibootstrap && filters.mongoose) { %>, Modal<% } %>) {
     $scope.awesomeThings = [];
 
     $http.get('/api/things').success(function(awesomeThings) {
@@ -17,9 +17,9 @@ angular.module('<%= scriptAppName %>')
       $scope.newThing = '';
     };
 
-    $scope.deleteThing = function(thing) {
+    $scope.deleteThing = <% if(filters.uibootstrap) { %>Modal.confirm.delete(<% } %>function(thing) {
       $http.delete('/api/things/' + thing._id);
-    };<% } %><% if(filters.socketio) { %>
+    }<% if(filters.uibootstrap) { %>)<% } %>;<% } %><% if(filters.socketio) { %>
 
     $scope.$on('$destroy', function () {
       socket.unsyncUpdates('thing');

app/templates/client/components/modal(uibootstrap)/modal(css).css

@@ -0,0 +1,23 @@
+.modal-primary .modal-header,
+.modal-info .modal-header,
+.modal-success .modal-header,
+.modal-warning .modal-header,
+.modal-danger .modal-header {
+  color: #fff;
+  border-radius: 5px 5px 0 0;
+}
+.modal-primary .modal-header {
+  background: #428bca;
+}
+.modal-info .modal-header {
+  background: #5bc0de;
+}
+.modal-success .modal-header {
+  background: #5cb85c;
+}
+.modal-warning .modal-header {
+  background: #f0ad4e;
+}
+.modal-danger .modal-header {
+  background: #d9534f;
+}

app/templates/client/components/modal(uibootstrap)/modal(html).html

@@ -0,0 +1,11 @@
+<div class="modal-header">
+  <button ng-if="modal.dismissable" type="button" ng-click="$dismiss()" class="close">&times;</button>
+  <h4 ng-if="modal.title" ng-bind="modal.title" class="modal-title"></h4>
+</div>
+<div class="modal-body">
+  <p ng-if="modal.text" ng-bind="modal.text"></p>
+  <div ng-if="modal.html" ng-bind-html="modal.html"></div>
+</div>
+<div class="modal-footer">
+  <button ng-repeat="button in modal.buttons" ng-class="button.classes" ng-click="button.click($event)" ng-bind="button.text" class="btn"></button>
+</div>