Add attachment to note implemented

.gitignore

@@ -9,3 +9,4 @@ tmp/
 *.DS_Store
 config/deploy.rb
 *.swp
+public/uploads

Gemfile

@@ -19,6 +19,8 @@ gem 'pg', group: :postgres
 gem 'mysql2', group: :mysql
 gem 'sqlite3', group: :sqlite
 
+gem 'carrierwave'
+
 group :production do
   gem 'rails_12factor'
 end

Gemfile.lock

@@ -37,6 +37,11 @@ GEM
       rack (>= 1.0.0)
       rack-test (>= 0.5.4)
       xpath (~> 2.0)
+    carrierwave (0.10.0)
+      activemodel (>= 3.2.0)
+      activesupport (>= 3.2.0)
+      json (>= 1.7)
+      mime-types (>= 1.16)
     childprocess (0.5.5)
       ffi (~> 1.0, >= 1.0.11)
     chunky_png (1.3.4)
@@ -210,6 +215,7 @@ PLATFORMS
 
 DEPENDENCIES
   capybara
+  carrierwave
   compass-rails
   configuration
   database_cleaner

app/assets/javascripts/application.js

@@ -10,6 +10,7 @@
 //= require underscore
 //= require backbone
 //= require backbone.rails
+//= require backbone-model-file-upload
 //= require Markdown.Converter
 //= require_tree ./templates
 //= require_tree ./mixins

app/assets/javascripts/models/note.js

@@ -6,13 +6,29 @@ Fulcrum.Note = Backbone.Model.extend({
 
   name: 'note',
 
+  fileAttribute: 'attachment',
+
   i18nScope: 'activerecord.attributes.note',
 
   user: function() {
     var userId = this.get('user_id');
     return this.collection.story.collection.project.users.get(userId);
   },
 
+  attachmentUrl: function() {
+    var attachment = this.get('attachment');
+
+    if (attachment && attachment.url !== null) {
+      return attachment.url
+    }
+    return "";
+  },
+
+  attachmentFileName: function() {
+    var attachmentUrl = this.attachmentUrl();
+    return _.last(attachmentUrl.split('/'));
+  },
+
   userName: function() {
     var user = this.user();
     return user ? user.get('name') : 'Author unknown';

app/assets/javascripts/templates/note.jst.ejs

@@ -1,4 +1,9 @@
 <%= window.md.makeHtml(note.escape("note")) %>
+<% if (note.attachmentUrl() != "" ) { %>
+  <div class="file">
+    <a href="<%= note.attachmentUrl() %>" target="_blank"><%= note.attachmentFileName() %></a>
+  </div>
+<% } %>
 <div class="note_meta">
   <span class="user"><%= note.userName() %></span> -
   <span class="created_at"><%= note.get("created_at") %></span> -

app/assets/javascripts/views/note_form.js

@@ -19,14 +19,23 @@ Fulcrum.NoteForm = Fulcrum.FormView.extend({
 	},
 
 	events: {
-    "click input": "saveEdit"
+    "click .note-submit": "saveEdit"
 	},
-	
+
 	saveEdit: function() {
+    var fileInput = $(this.el).find('.note-attachment')[0];
+    var fileObject = fileInput && fileInput.files[0];
+    if (fileObject !== undefined) {
+      this.model.set('attachment', fileObject);
+      $(this.el).append('<div class="progress-value" style="">5%</div>');
+    }
     this.disableForm();
 
     var view = this;
     this.model.save(null, {
+      // therefore is not possible to send file object as a part of JSON,
+      // it is better to always save backbone model info as a form object
+      formData: true,
       success: function(model, response) {
         //view.model.set({editing: false});
       },
@@ -40,6 +49,7 @@ Fulcrum.NoteForm = Fulcrum.FormView.extend({
         });
       }
     });
+    this.model.on('progress', _.bind(this._handleProgress, this));
   },
 
   render: function() {
@@ -48,9 +58,11 @@ Fulcrum.NoteForm = Fulcrum.FormView.extend({
     div = this.make('div');
     $(div).append(this.label("note"));
     $(div).append('<br/>');
-    $(div).append(this.textArea("note"));
+    $(div).append(this.textArea("note[note]"));
 
-    var submit = this.make('input', {id: 'note_submit', type: 'button', value: 'Add note'});
+    var attachment = this.make('input', {id:'note_attachment', class:'note-attachment', name: 'attachment', type: 'file'})
+    var submit = this.make('input', {id: 'note_submit', class:'note-submit', type: 'button', value: 'Add note'});
+    $(div).append(attachment);
     $(div).append(submit);
     this.$el.html(div);
 
@@ -67,5 +79,12 @@ Fulcrum.NoteForm = Fulcrum.FormView.extend({
   enableForm: function() {
     this.$('input,textarea').removeAttr('disabled');
     this.$('input[type="button"]').removeClass('saving');
+  },
+
+  _handleProgress: function(value) {
+    var progressValue =  this.$el.find('.progress-value');
+    if (progressValue.length !== 0) {
+      progressValue.html(parseInt(value * 100)+"%");
+    }
   }
 });

app/assets/stylesheets/screen.css.scss

@@ -539,6 +539,11 @@ div.note {
     padding: 0.3em;
   }
 
+  .file a {
+    display: inline-block;
+    padding: 0 5px;
+  }
+
   div.note_meta {
     color: $aluminium-4;
     font-style: italic;
@@ -554,6 +559,10 @@ div.note {
 
 .note_form {
   // The submit button while the server is saving the note.
+  .note-attachment {
+    margin: 10px 0;
+  }
+
   input.saving {
     padding-left: 16px;
     background-image: url('throbber.gif');

app/controllers/notes_controller.rb

@@ -37,7 +37,9 @@ def create
   protected
 
   def allowed_params
-    params.fetch(:note).permit(:note)
+    _params = params.fetch(:note, {}).permit(:note)
+    _params = _params.merge(attachment: params[:attachment]) if params[:attachment].present?
+    _params
   end
 
 end

app/models/note.rb

@@ -1,10 +1,13 @@
 class Note < ActiveRecord::Base
+
   belongs_to :user
   belongs_to :story
 
   after_save :create_changeset
 
-  validates :note, :presence => true
+  validates :note, presence: true, if: "attachment.blank?"
+
+  mount_uploader :attachment, NoteAttachmentUploader
 
   # FIXME move to observer
   def create_changeset

app/uploaders/note_attachment_uploader.rb

@@ -0,0 +1,51 @@
+# encoding: utf-8
+
+class NoteAttachmentUploader < CarrierWave::Uploader::Base
+
+  # Include RMagick or MiniMagick support:
+  # include CarrierWave::RMagick
+  # include CarrierWave::MiniMagick
+
+  # Choose what kind of storage to use for this uploader:
+  storage :file
+  # storage :fog
+
+  # Override the directory where uploaded files will be stored.
+  # This is a sensible default for uploaders that are meant to be mounted:
+  def store_dir
+    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
+  end
+
+  # Provide a default URL as a default if there hasn't been a file uploaded:
+  # def default_url
+  #   # For Rails 3.1+ asset pipeline compatibility:
+  #   # ActionController::Base.helpers.asset_path("fallback/" + [version_name, "default.png"].compact.join('_'))
+  #
+  #   "/images/fallback/" + [version_name, "default.png"].compact.join('_')
+  # end
+
+  # Process files as they are uploaded:
+  # process :scale => [200, 300]
+  #
+  # def scale(width, height)
+  #   # do something
+  # end
+
+  # Create different versions of your uploaded files:
+  # version :thumb do
+  #   process :resize_to_fit => [50, 50]
+  # end
+
+  # Add a white list of extensions which are allowed to be uploaded.
+  # For images you might use something like this:
+  # def extension_white_list
+  #   %w(jpg jpeg gif png)
+  # end
+
+  # Override the filename of the uploaded files:
+  # Avoid using model.id or version_name here, see uploader/store.rb for details.
+  # def filename
+  #   "something.jpg" if original_filename
+  # end
+
+end

db/migrate/20150421074925_add_attachment_to_note.rb

@@ -0,0 +1,5 @@
+class AddAttachmentToNote < ActiveRecord::Migration
+  def change
+    add_column :notes, :attachment, :string
+  end
+end

db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20120504152649) do
+ActiveRecord::Schema.define(version: 20150421074925) do
 
   create_table "changesets", force: true do |t|
     t.integer  "story_id"
@@ -26,6 +26,7 @@
     t.integer  "story_id"
     t.datetime "created_at"
     t.datetime "updated_at"
+    t.string   "attachment"
   end
 
   create_table "projects", force: true do |t|
@@ -60,6 +61,11 @@
     t.string   "labels"
   end
 
+  create_table "story_attachments", force: true do |t|
+    t.string  "attachment"
+    t.integer "story_id"
+  end
+
   create_table "users", force: true do |t|
     t.string   "email",                              default: "",   null: false
     t.string   "encrypted_password",     limit: 128, default: "",   null: false

spec/features/notes_spec.rb

@@ -33,10 +33,12 @@
 
       within('#in_progress .story') do
         find('.story-title').click
-        fill_in 'note', :with => 'Adding a new note'
+        fill_in 'note[note]', :with => 'Adding a new note'
         click_on 'Add note'
       end
 
+      wait_for_ajax
+
       find('#in_progress .story .notelist .note').should have_content('Adding a new note')
 
     end
@@ -54,6 +56,9 @@
           click_on 'Delete'
         end
       end
+
+      wait_for_ajax
+
       find('#in_progress .story .notelist').should_not have_content('Delete me please')
     end
 

spec/features/stories_spec.rb

@@ -32,6 +32,8 @@
         click_on 'Save'
       end
 
+      wait_for_ajax
+
       # Estimate the story
       within('#chilly_bin .story') do
         click_on '1'

spec/models/note_spec.rb

@@ -57,7 +57,7 @@
 
     it "returns the right keys" do
       subject.as_json["note"].keys.sort.should == %w[
-        created_at errors id note story_id updated_at user_id
+        attachment created_at errors id note story_id updated_at user_id
       ]
     end
 

spec/support/integration_helpers.rb

@@ -40,4 +40,13 @@ def get_confirmation_token_from_mail(email)
     token
   end
 
+  def wait_for_ajax
+    Timeout.timeout(Capybara.default_wait_time) do
+      active = page.evaluate_script('jQuery.active')
+      until active == 0
+        active = page.evaluate_script('jQuery.active')
+      end
+    end
+  end
+
 end