creating groups works now.

app/assets/javascripts/groups.coffee

@@ -4,7 +4,7 @@
 
   groupName = box[0].dataset.group
 
-  count = Number $("span##{groupName}-members").html()
+  count = Number ($ "span##{groupName}-members").html()
   boxChecked = box[0].checked
 
   count += if boxChecked then 1 else -1
@@ -19,11 +19,41 @@
     success: (data, status, jqxhr) ->
       if data.success
         box[0].checked = if data.checked? then data.checked else !boxChecked
-        $("span##{groupName}-members").html(count)
+        ($ "span##{groupName}-members").html(count)
       showNotification data.message, data.success
     error: (jqxhr, status, error) ->
       box[0].checked = false
       console.log jqxhr, status, error
       showNotification "An error occurred, a developer should check the console for details", false
     complete: (jqxhr, status) ->
-      box.removeAttr "disabled"
+      box.removeAttr "disabled"
+
+
+$(document).on "keyup", "input#new-group-name", (evt) ->
+  if evt.which == 13  # return key
+    evt.preventDefault()
+    $("button#create-group").trigger 'click'
+
+
+($ document).on "click", "button#create-group", ->
+  btn = $(this)
+  btn.button "loading"
+  input = ($ "input#new-group-name")
+
+  $.ajax
+    url: '/ajax/create_group'
+    type: 'POST'
+    data:
+      name: input.val()
+      user: btn[0].dataset.user
+    dataType: 'json'
+    success: (data, status, jqxhr) ->
+      if data.success
+        ($ "ul.list-group.groups--list").append(data.render)
+        input.val ''
+      showNotification data.message, data.success
+    error: (jqxhr, status, error) ->
+      console.log jqxhr, status, error
+      showNotification "An error occurred, a developer should check the console for details", false
+    complete: (jqxhr, status) ->
+      btn.button "reset"

app/controllers/ajax/group_controller.rb

@@ -1,4 +1,40 @@
 class Ajax::GroupController < ApplicationController
+  def create
+    @status = :err
+    @success = false
+
+    unless user_signed_in?
+      @status = :noauth
+      @message = "requires authentication"
+      return
+    end
+
+    params.require :name
+    params.require :user
+
+    begin
+      target_user = User.find_by_screen_name(params[:user])
+      group = Group.create! user: current_user, display_name: params[:name]
+    rescue ActiveRecord::RecordInvalid
+      @status = :toolong
+      @message = "Group name too long (30 characters max.)"
+      return
+    rescue ActiveRecord::RecordNotFound
+      @status = :notfound
+      @message = "Could not find user."
+      return
+    rescue ActiveRecord::RecordNotUnique
+      @status = :exists
+      @message = "Group already exists."
+      return
+    end
+
+    @status = :okay
+    @success = true
+    @message = "Successfully created group."
+    @render = render_to_string(partial: 'user/modal_group_item', locals: { group: group, user: target_user })
+  end
+
   def membership
     @status = :err
     @success = false
@@ -15,8 +51,6 @@ class Ajax::GroupController < ApplicationController
 
     add = params[:add] == 'true'
 
-    group = nil
-
     begin
       group = current_user.groups.find_by_name(params[:group])
     rescue ActiveRecord::RecordNotFound

app/views/ajax/group/create.json.jbuilder

@@ -0,0 +1,2 @@
+json.partial! 'ajax/shared/status'
+json.render @render if @render

app/views/user/_modal_group_item.html.haml

@@ -0,0 +1,9 @@
+%li.list-group-item
+  .media
+    .pull-left.j2-table
+      %input.input--center{type: :checkbox, name: 'gm-group-check', data: { group: group.name, user: user.screen_name }, checked: user.member_of?(group), autocomplete: 'off'}
+    .media-body
+      .list-group-item-heading= group.display_name
+      .list-group-item-text.text-muted.j2-up
+        %span{id: "#{group.name}-members"}= group.members.count
+        members

app/views/user/_modal_group_memberships.html.haml

@@ -19,17 +19,10 @@
           .tab-pane.active{role:"tabpanel", id: "grouplist"}
             %ul.list-group.groups--list
               - current_user.groups.each do |group|
-                %li.list-group-item
-                  .media
-                    .pull-left.j2-table
-                      %input.input--center{type: :checkbox, name: 'gm-group-check', data: { group: group.name, user: @user.screen_name }, checked: @user.member_of?(group), autocomplete: 'off'}
-                    .media-body
-                      .list-group-item-heading= group.display_name
-                      .list-group-item-text.text-muted.j2-up
-                        %span{id: "#{group.name}-members"}= group.members.count
-                        members
+                = render 'user/modal_group_item', group: group, user: @user
           .tab-pane{role:"tabpanel", id: "create"}
             .modal-body
-              Nothing here yet :(
+              %input#new-group-name.form-control{type: :text, placeholder: 'Group name'}
+              %button#create-group.btn.btn-primary{type: :button, data: { user: @user.screen_name }} Create group
       .modal-footer
         %button.btn.btn-primary{name: 'gm-save', type: :button, data: { dismiss: :modal }} Done

config/routes.rb

@@ -75,6 +75,7 @@ Rails.application.routes.draw do
     match '/create_comment', to: 'comment#create', via: :post, as: :create_comment
     match '/destroy_comment', to: 'comment#destroy', via: :post, as: :destroy_comment
     match '/report', to: 'report#create', via: :post, as: :report
+    match '/create_group', to: 'group#create', via: :post, as: :create_group
     match '/group_membership', to: 'group#membership', via: :post, as: :group_membership
   end