group settings page

Change-Id: I86cc94a030d12d25e9efebf718faa4fccfd9bddb

app/coffeescripts/bundles/group_settings.coffee

@@ -0,0 +1,36 @@
+require [
+  'jquery'
+  'i18n!group_settings'
+  'compiled/fn/preventDefault'
+  'jquery.instructure_forms'
+], ($, I18n, preventDefault) ->
+
+  $form = $('.group_avatar_form')
+  $changeLink = $('.change_group_pic')
+
+  toggleForm = ->
+    $form.toggle()
+    $changeLink.toggle()
+
+  $form.formSubmit(
+    success: (data) ->
+      $('.avatar').attr('src', data.avatar_url)
+      toggleForm()
+    fileUpload: true
+    preparedFileUpload: true
+    singleFile: true
+    handle_files: (a, data) ->
+      data.avatar_id = a.attachment.id
+      data
+    context_code: 'group_' + ENV.GROUP_ID
+    folder_id: ENV.FOLDER_ID
+    formDataTarget: 'url'
+    method: 'PUT'
+    disableWhileLoading: true
+  )
+
+  $changeLink.click preventDefault ->
+    toggleForm()
+
+  $('.cancel_avatar').click preventDefault ->
+    toggleForm()

app/controllers/groups_controller.rb

@@ -471,9 +471,12 @@ class GroupsController < ApplicationController
   end
 
   def edit
+    @use_new_styles = true
     @group = (@context ? @context.groups : Group).find(params[:id])
     @context = @group
+    js_env :GROUP_ID => @group.id, :FOLDER_ID => @group.folders.active.first.id
     if authorized_action(@group, @current_user, :update)
+      render :action => :edit, :layout => 'new_application'
     end
   end
 

app/models/group.rb

@@ -473,4 +473,12 @@ class Group < ActiveRecord::Base
     users = self.users + [user]
     self.context.course_sections.active.any?{ |section| section.common_to_users?(users) }
   end
+
+  def self.join_levels
+    [
+      ["invitation_only", "Invite only"],
+      ["parent_context_auto_join", "Auto join"],
+      ["parent_context_request", "Request to join"]
+    ]
+  end
 end

app/stylesheets/groups/edit.sass

@@ -0,0 +1,8 @@
+#group_name, #group_description
+  width: 100%
+
+.avatar
+  display: block
+
+.group_avatar_form
+  display: none

app/views/groups/edit.html.erb

@@ -1,24 +1,51 @@
+<%
+  jammit_css :group_settings
+  js_bundle :group_settings
+%>
 <% content_for :page_title do %><%= join_title t(:group_settings_title, "%{group_name} Settings", :group_name => @group.name), @context.full_name %><% end %>
 
 <% content_for :right_side do %>
   <a href="<%= context_url(@context, :context_url) %>" class="button button-sidebar delete_group_link"><%= image_tag "delete.png" %> <%= t 'buttons.delete_group', 'Delete this Group' %></a>
 <% end %>
 
-<% form_for :group, :url => context_url(@context, :context_url), :html => {:method => :put} do |f| %>
-<table class="formtable">
-  <tr>
-    <td><%= f.blabel :name, :en => "Group Name" %></td>
-    <td><%= f.text_field :name %></td>
-  </tr><tr>
-    <td colspan="2">
-      <div class="button-container">
-        <button type="submit" class="button"><%= t 'buttons.update', 'Update Group' %></button>
-        <a href="<%= context_url(@context, :context_url) %>" class="button button-secondary"><%= t '#buttons.cancel', 'Cancel' %></a>
-      </div>
-    </td>
-  </tr>
-</table>
-<% end %>
+<div class="container v-gutter">
+  <div class="row">
+    <div class="span5">
+      <% form_for :group, :url => context_url(@context, :context_url), :html => {:method => :put} do |f| %>
+        <%= f.blabel :name, :en => "Title" %>
+        <%= f.text_field :name %>
+
+        <%= f.blabel :description, :en => "Description" %>
+        <%= f.text_area :description, :rows => 5 %>
+
+        <%= f.blabel :join_level, :en => "Join Permissions" %>
+        <%= f.collection_select :join_level, Group.join_levels, :first, :last %>
+
+        <label class="checkbox" for="group_is_public">
+          <%= f.check_box :is_public %> <%= t 'is_public', 'This is a public group' %>
+        </label>
+
+        <div class="button-container">
+          <button type="submit" class="button"><%= t 'buttons.update', 'Update Group' %></button>
+          <a href="<%= context_url(@context, :context_url) %>" class="button button-secondary"><%= t '#buttons.cancel', 'Cancel' %></a>
+        </div>
+      <% end %>
+    </div>
+
+    <div class="span4 offset1">
+      <p>
+        <%= image_tag thumbnail_image_url(@group.avatar_attachment, @group.avatar_attachment.uuid), :class => 'avatar' %>
+        <a href="#" class="change_group_pic">Change avatar</a>
+      </p>
+      <% form_tag api_v1_group_url(@group), :method => 'PUT', :class => 'group_avatar_form' do %>
+        <p><input type="file" name="avatar" class="avatar_file"></p>
+        <p><button type="submit">Change</button>
+        <%= link_to "Cancel", "#", :class => "cancel_avatar" %></p>
+      <% end %>
+    </div>
+  </div>
+</div>
+
 <div id="delete_group_dialog" style="display: none;">
   <%= t('confirm.delete', 'Are you sure you want to delete this group?') %>
   <div class="button-container">

config/assets.yml

@@ -162,6 +162,8 @@ stylesheets:
     - public/stylesheets/compiled/quick_start_bar.css
     - public/stylesheets/compiled/activity_feed.css
     - public/stylesheets/compiled/groups/dashboard.css
+  group_settings:
+    - public/stylesheets/compiled/groups/edit.css
   facebook:
     - public/stylesheets/compiled/facebook.css
   speed_grader:

public/javascripts/jquery.instructure_forms.js

@@ -149,6 +149,7 @@ define([
           folder_id: $.isFunction(options.folder_id) ? (options.folder_id.call($form)) : options.folder_id,
           file_elements: $form.find("input[type='file']:visible"),
           url: (options.upload_only ? null : action),
+          method: options.method,
           uploadDataUrl: options.uploadDataUrl,
           formData: formData,
           formDataTarget: options.formDataTarget,