Angular POC

Bowerfile

@@ -0,0 +1 @@
+asset 'angular'

Gemfile

@@ -1,6 +1,8 @@
 ruby File.read('./.ruby-version').chomp
 source 'https://rubygems.org'
 
+gem 'angular-rails-templates'
+gem 'bower-rails'
 gem "decent_exposure"
 gem "decent_generators"
 gem 'delayed_job'

Gemfile.lock

@@ -37,8 +37,13 @@ GEM
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
     addressable (2.3.7)
+    angular-rails-templates (0.2.0)
+      railties (>= 3.1)
+      sprockets (~> 2)
+      tilt
     arel (6.0.0)
     bcrypt (3.1.10)
+    bower-rails (0.10.0)
     builder (3.2.2)
     coderay (1.1.0)
     coffee-rails (4.1.0)
@@ -264,6 +269,8 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  angular-rails-templates
+  bower-rails
   coffee-rails
   decent_exposure
   decent_generators

app/assets/javascripts/application.js

@@ -14,6 +14,9 @@
 //= require jquery_ujs
 //= require twitter/bootstrap
 //= require turbolinks
+//= require angular/angular
+//= require angular-rails-templates
 //= require mousetrap-1.4.6
 //= require fastclick-1.0.6
+//= require preflight
 //= require_tree .

app/assets/javascripts/controllers/checklist.js

@@ -0,0 +1,33 @@
+angular.module('preflight').controller('Checklist', ['$scope', '$document', function($scope, $document) {
+  var resetItemEditMode = function() {
+    $scope.items.forEach(function(item) {
+      item.editMode = !item.id;
+    });
+  };
+
+  $scope.$watchCollection('items', resetItemEditMode);
+  $document.on('click', function() {
+    $scope.$apply(resetItemEditMode);
+  });
+
+  $scope.setChecklist = function(checklist) {
+    angular.extend($scope, checklist);
+  }
+
+  $scope.enteredEditMode = function(item) {
+    $scope.items.forEach(function(i) {
+      if (i.id && i.id !== item.id) {
+        i.editMode = false;
+      }
+    });
+  }
+
+  $scope.newItemCreated = function(newItem) {
+    $scope.items.push(newItem);
+    newItem.shouldBeFocused = true;
+  }
+
+  $scope.itemDeleted = function(item) {
+    $scope.items.splice($scope.items.indexOf(item), 1);
+  }
+}]);

app/assets/javascripts/directives/checklist_item.js

@@ -0,0 +1,62 @@
+angular.module('preflight').directive('checklistItem', ['$http', function($http) {
+  return {
+    restrict: 'E',
+    scope: {
+      item: '=',
+      toggledEditMode: '&',
+      newItemCreated: '&',
+      itemDeleted: '&'
+    },
+    templateUrl: 'checklist_item.html',
+    link: function(scope, element, attrs) {
+      scope.toggleEditItem = function(event) {
+        if (event.target.tagName === 'INPUT') { return }
+
+        scope.item.shouldBeFocused = scope.item.editMode = !scope.item.editMode;
+        scope.toggledEditMode({item: scope.item});
+      }
+
+      var submitItem = function(opts) {
+        scope.item.editMode = false;
+        scope.item.submitting = true;
+
+        var req = {
+          headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+          data: $.param({'checklist_item[name]' : scope.item.name}),
+          url: scope.item.path
+        };
+
+        angular.extend(req, opts);
+
+        return $http(req).then(function(response) {
+          angular.extend(scope.item, response.data.item);
+          return response;
+        }).catch(function(response) {
+          alert(response);
+        }).finally(function() {
+          scope.item.submitting = false;
+        });
+      };
+
+      scope.updateItem = function() {
+        submitItem({method: 'PUT'});
+      };
+
+      scope.createItem = function() {
+        submitItem({method: 'POST'}).then(function(response) {
+          scope.newItemCreated({newItem: response.data.new_item});
+        });
+      };
+
+      scope.deleteItem = function() {
+        scope.item.submitting = true;
+
+        $http.delete(scope.item.path).finally(function() {
+          scope.item.submitting = false;
+        });
+
+        scope.itemDeleted({item: scope.item});
+      };
+    }
+  };
+}]);

app/assets/javascripts/directives/focus_when.js

@@ -0,0 +1,12 @@
+angular.module('preflight').directive('focusWhen', ['$timeout', function($timeout) {
+  return {
+    link: function(scope, element, attrs) {
+      scope.$watch(attrs.focusWhen, function(value) {
+        if(value === true) {
+          element[0].focus();
+          scope[attrs.focusWhen] = false;
+        }
+      });
+    }
+  };
+}]);

app/assets/javascripts/directives/stop_propagation.js

@@ -0,0 +1,9 @@
+angular.module('preflight').directive('stopPropagation', function() {
+  return {
+    link: function(scope, element, attrs) {
+      element.on(attrs.stopPropagation, function(event) {
+        event.stopPropagation();
+      });
+    }
+  };
+});

app/assets/javascripts/preflight.js

@@ -0,0 +1,5 @@
+var preflight = angular.module('preflight', ['templates']);
+
+preflight.config(["$httpProvider", function($httpProvider) {
+  $httpProvider.defaults.headers.common['X-CSRF-Token'] = jQuery('meta[name=csrf-token]').attr('content');
+}]);

app/assets/javascripts/templates/checklist_item.html

@@ -0,0 +1,18 @@
+<div class="row">
+  <form ng-submit="item.id ? updateItem() : createItem()" stop-propagation="click" ng-click="toggleEditItem($event)" class="{{ item.id ? 'edit_checklist_item' : 'new_checklist_item'}}">
+    <div class="col-xs-6 col-md-4">
+      <div class="checklist-item-name" data-edit-prompt="Edit" ng-if="!item.editMode">
+        <span class="name" ng-if="!item.editMode" ng-model="item.name">
+          {{ item.name }}
+        </span>
+      </div>
+      <input type="text" name="checklist_item[name]" ng-model="item.name" ng-if="item.editMode" placeholder="{{item.id ? '' : 'New item'}}" class="form-control" data-edit-control=true focus-when="item.shouldBeFocused">
+    </div>
+    <div class="col-xs-2 col-md-1">
+      <input type="submit" value="{{ item.submitting ? 'Saving..' : 'Save' }}" ng-disabled="{{ item.submitting }}" ng-if="item.editMode" class="btn btn-primary btn-sm" data-edit-control=true>
+    </div>
+    <div class="col-xs-2 col-md-5" ng-if="item.id">
+      <a ng-click="deleteItem()" ng-disabled="{{ item.submitting }}" class="destroy-checklist-item btn btn-danger btn-sm" data-comfortable-text="Remove" data-abbreviated-text="X"></a>
+    </div>
+  </form>
+</div>

app/assets/stylesheets/checklists.sass

@@ -4,15 +4,6 @@
     vertical-align: middle
 
 .edit_checklist_item
-  [data-edit-control]
-    display: none
-
-  &[data-edit-mode]
-    [data-edit-control]
-      display: block
-    .name
-      display: none
-
   &:not([data-edit-mode])
     .checklist-item-name
       &:after

app/controllers/checklist_items_controller.rb

@@ -24,7 +24,7 @@ def destroy
 
   def save_and_render_checklist
     if checklist_item.save
-      render partial: 'checklists/checklist_item', locals: {item: checklist_item, checklist: checklist}
+      render json: {item: checklist_item, new_item: checklist.checklist_items.build}
     else
       render text: checklist_item.errors.full_messages.join("\n"), status: :bad_request
     end

app/controllers/checklists_controller.rb

@@ -12,6 +12,7 @@ def index
   end
 
   def show
+    checklist.checklist_items.build
   end
 
   def new

app/models/checklist.rb

@@ -26,6 +26,19 @@ def apply_to_pull_with_files?(files)
     files.any? { |f| f.filename =~ re }
   end
 
+  def as_json(options = {})
+    {
+      id: id,
+      name: name,
+      repository_path: UrlHelpers.github_repository_path(github_repository),
+      edit_path: UrlHelpers.edit_checklist_path(self),
+      items: checklist_items.sort_by { |i| i.id || Float::INFINITY }.map(&:as_json),
+      github_repository_full_name: github_repository.github_full_name,
+      index_path: UrlHelpers.checklists_path,
+      create_item_path: UrlHelpers.checklist_checklist_items_path(id)
+    }
+  end
+
   protected
 
   def hook_repository

app/models/checklist_item.rb

@@ -6,4 +6,12 @@ class ChecklistItem < ActiveRecord::Base
   def to_markdown
     "- [ ] #{name}"
   end
+
+  def as_json(options = {})
+    {
+      id: id,
+      name: name,
+      path: UrlHelpers.polymorphic_path([checklist, self])
+    }
+  end
 end

app/views/checklists/_checklist_items.html

@@ -0,0 +1,15 @@
+<div class="checklist-items">
+  <div class="row">
+    <div class="col-xs-10">
+      <h4>Item</h4>
+    </div>
+  </div>
+  <checklist-item
+    ng-repeat="item in items track by item.id"
+    item="item"
+    new-item-created="newItemCreated(newItem)"
+    item-deleted="itemDeleted(item)"
+    toggled-edit-mode="enteredEditMode(item)"
+    entered-edit-mode="enteredEditMode(item)">
+  </checklist-item>
+</div>

app/views/checklists/show.html.haml

@@ -1,12 +1,11 @@
-%p#notice= notice
+%div{'ng-controller' => 'Checklist', 'ng-init' => "setChecklist(#{checklist.to_json})"}
+  %h3= link_to '{{ github_repository_full_name }}', '{{ repository_path }}'
+  %h3= '{{ name }}'
 
-%h3= link_to checklist.github_repository.github_full_name, github_repository_path(checklist.github_repository)
-%h3= checklist.name
+  .row
+    .col-xs-10
+      = link_to 'Edit', '{{ edit_path }}'
+      \|
+      = link_to 'Back', '{{ index_path }}'
 
-.row
-  .col-xs-10
-    = link_to 'Edit', edit_checklist_path(checklist)
-    \|
-    = link_to 'Back', checklists_path
-
-= render 'checklist_items', checklist: checklist
+  = render 'checklist_items', checklist: checklist

app/views/layouts/application.html.haml

@@ -11,7 +11,7 @@
     = javascript_include_tag "application"
     = csrf_meta_tags
     %meta{name: 'viewport', content: 'width=device-width, initial-scale=1, maximum-scale=1'}
-  %body
+  %body{'ng-app' => 'preflight', 'ng-cloak' => true}
     %header
       %nav.navbar.navbar-default.navbar-fixed-top{role: 'navigation'}
         .container-fluid

config/application.rb

@@ -37,5 +37,7 @@ class Application < Rails::Application
     config.active_job.queue_adapter = :delayed_job
 
     config.autoload_paths += %w(lib/)
+
+    config.assets.paths << Rails.root.join("vendor","assets","bower_components")
   end
 end

lib/url_helpers.rb

@@ -0,0 +1,5 @@
+module UrlHelpers
+  class << self
+    include Rails.application.routes.url_helpers
+  end
+end

vendor/assets/.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "bower_components"
+}

vendor/assets/bower.json

@@ -0,0 +1,6 @@
+{
+  "name": "dsl-generated dependencies",
+  "dependencies": {
+    "angular": "latest"
+  }
+}

vendor/assets/bower_components/angular/.bower.json

@@ -0,0 +1,17 @@
+{
+  "name": "angular",
+  "version": "1.4.3",
+  "main": "./angular.js",
+  "ignore": [],
+  "dependencies": {},
+  "homepage": "https://github.com/angular/bower-angular",
+  "_release": "1.4.3",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.4.3",
+    "commit": "dbd689e8103a6366e53e1f6786727f7c65ccfd75"
+  },
+  "_source": "git://github.com/angular/bower-angular.git",
+  "_target": "*",
+  "_originalSource": "angular"
+}