Merge pull request #5559 from SWW13/aspect_sort

Readd aspect sorting

Changelog.md

@@ -18,6 +18,7 @@
 ## Features
 * Hide post title of limited post in comment notification email [#5843](https://github.com/diaspora/diaspora/pull/5843)
 * More and better environment checks in script/server [#5891](https://github.com/diaspora/diaspora/pull/5891)
+* Enable aspect sorting again [#5559](https://github.com/diaspora/diaspora/pull/5559)
 
 # 0.5.0.0
 

Gemfile

@@ -86,6 +86,7 @@ gem "entypo-rails", "2.2.2"
 gem "backbone-on-rails",                                "1.1.2"
 gem "handlebars_assets",                                "0.20.1"
 gem "jquery-rails",                                     "3.1.2"
+gem "jquery-ui-rails",                                  "5.0.3"
 gem "js_image_paths",                                   "0.0.2"
 gem "js-routes",                                        "1.0.0"
 
@@ -252,6 +253,11 @@ group :test do
   gem "database_cleaner" ,  "1.4.1"
   gem "selenium-webdriver", "2.45.0"
 
+  source "https://rails-assets.org" do
+    gem "rails-assets-jquery-simulate",     "1.0.1"
+    gem "rails-assets-jquery-simulate-ext", "1.3.0"
+  end
+
   # General helpers
 
   gem "factory_girl_rails", "4.5.0"

Gemfile.lock

@@ -500,6 +500,9 @@ GEM
     rails-assets-jquery-idletimer (1.0.1)
     rails-assets-jquery-placeholder (2.1.1)
       rails-assets-jquery (>= 1.6)
+    rails-assets-jquery-simulate (1.0.1)
+    rails-assets-jquery-simulate-ext (1.3.0)
+      rails-assets-jquery (>= 1.7.0)
     rails-assets-jquery-textchange (0.2.3)
       rails-assets-jquery
     rails-assets-jquery-ui (1.10.4)
@@ -739,6 +742,7 @@ DEPENDENCIES
   jasmine (= 2.2.0)
   jasmine-jquery-rails (= 2.0.3)
   jquery-rails (= 3.1.2)
+  jquery-ui-rails (= 5.0.3)
   js-routes (= 1.0.0)
   js_image_paths (= 0.0.2)
   jshintrb (= 0.3.0)
@@ -772,6 +776,8 @@ DEPENDENCIES
   rails-assets-jquery (= 1.11.1)!
   rails-assets-jquery-idletimer (= 1.0.1)!
   rails-assets-jquery-placeholder (= 2.1.1)!
+  rails-assets-jquery-simulate (= 1.0.1)!
+  rails-assets-jquery-simulate-ext (= 1.3.0)!
   rails-assets-jquery-textchange (= 0.2.3)!
   rails-assets-markdown-it (= 4.2.0)!
   rails-assets-markdown-it--markdown-it-for-inline (= 0.1.0)!

app/assets/javascripts/app/pages/contacts.js

@@ -22,6 +22,8 @@ app.pages.Contacts = Backbone.View.extend({
 
     this.aspectCreateView = new app.views.AspectCreate({ el: $("#newAspectContainer") });
     this.aspectCreateView.render();
+
+    this.setupAspectSorting();
   },
 
   toggleChatPrivilege: function() {
@@ -73,6 +75,21 @@ app.pages.Contacts = Backbone.View.extend({
 
   searchContactList: function(e) {
     this.stream.search($(e.target).val());
+  },
+
+  setupAspectSorting: function() {
+    $("#aspect_nav .nav").sortable({
+      items: "li.aspect[data-aspect-id]",
+      update: function() {
+        $("#aspect_nav .ui-sortable").removeClass("synced");
+        var data = JSON.stringify({ ordered_aspect_ids: $(this).sortable("toArray", { attribute: "data-aspect-id" }) });
+        $.ajax(Routes.order_aspects_path(),
+          { type: "put", dataType: "text", contentType: "application/json", data: data })
+          .done(function() { $("#aspect_nav .ui-sortable").addClass("synced"); });
+      },
+      revert: true,
+      helper: "clone"
+    });
   }
 });
 // @license-end

app/assets/javascripts/main.js

@@ -20,6 +20,10 @@
 //= require jquery-idletimer/dist/idle-timer
 //= require jquery.infinitescroll-custom
 //= require jquery.autocomplete-custom
+//= require jquery-ui/core
+//= require jquery-ui/widget
+//= require jquery-ui/mouse
+//= require jquery-ui/sortable
 //= require keycodes
 //= require fileuploader-custom
 //= require handlebars.runtime

app/assets/stylesheets/contacts.scss

@@ -64,6 +64,7 @@
 #aspect_nav {
   li.aspect > a { padding-left: 30px; }
   li.new_aspect > a { padding-left: 30px; }
+  li.aspect.ui-sortable-handle.ui-sortable-helper { background: #FFF; }
 }
 
 #no_contacts {

app/controllers/aspects_controller.rb

@@ -64,6 +64,13 @@ class AspectsController < ApplicationController
     render :json => { :id => @aspect.id, :name => @aspect.name }
   end
 
+  def update_order
+    params[:ordered_aspect_ids].each_with_index do |id, i|
+      current_user.aspects.find(id).update_attributes(order_id: i)
+    end
+    render nothing: true
+  end
+
   def toggle_chat_privilege
     @aspect = current_user.aspects.where(:id => params[:aspect_id]).first
 

app/models/aspect.rb

@@ -20,6 +20,10 @@ class Aspect < ActiveRecord::Base
     name.strip!
   end
 
+  before_create do
+    self.order_id ||= Aspect.where(user_id: user_id).maximum(:order_id || 0).to_i + 1
+  end
+
   def to_s
     name
   end

app/views/contacts/_aspect_listings.haml

@@ -1,5 +1,5 @@
 #aspect_nav
-  %ul.nav.nav-tabs.nav-stacked
+  %ul.nav.nav-tabs.nav-stacked.synced
     %li.all_contacts{:class => ("active" if params["set"] == "all")}
       %a{:href => contacts_path(:set => "all")}
         = t('contacts.index.all_contacts')

config/routes.rb

@@ -66,6 +66,9 @@ Diaspora::Application.routes.draw do
   resources :aspects do
     put :toggle_contact_visibility
     put :toggle_chat_privilege
+    collection do
+      put "order" => :update_order
+    end
   end
 
   get 'bookmarklet' => 'status_messages#bookmarklet'

features/desktop/manages_aspects.feature

@@ -75,3 +75,13 @@ Feature: User manages contacts
     And I click on my name in the header
     When I follow "Contacts"
     Then I should not see "Community spotlight" within ".span9"
+
+  Scenario: sorting the aspects
+    Given I am signed in
+    And I have an aspect called "People"
+    And I have an aspect called "Cat People"
+    When I am on the contacts page
+    And I drag "Cat People" up 40 pixels
+    And I go to the contacts page
+    Then I should see "Cat People" as 2. aspect
+    And I should see "People" as 3. aspect

features/step_definitions/aspects_steps.rb

@@ -88,6 +88,25 @@ When /^(.*) in the aspect creation modal$/ do |action|
   end
 end
 
+When /^I drag "([^"]*)" (up|down) (\d+) pixels?$/ do |aspect_name, direction, distance|
+  distance = distance.to_i * -1 if direction == "up"
+  page.execute_script %{
+    function drag() {
+      $("li.aspect:contains('#{aspect_name}')")
+        .simulate("drag-n-drop", { dy: #{distance}, interpolation: { stepWidth: 10, stepDelay: 5 } });
+    }
+    function loadScripts() {
+      $.getScript("/assets/jquery-simulate/jquery.simulate.js", function(){
+        $.getScript("/assets/jquery-simulate-ext/src/jquery.simulate.ext.js", function(){
+          $.getScript("/assets/jquery-simulate-ext/src/jquery.simulate.drag-n-drop.js", drag);
+        });
+      });
+    }
+    if (!$.simulate) { loadScripts(); } else { drag(); }
+  }
+  expect(find("#aspect_nav")).to have_css ".synced"
+end
+
 And /^I toggle the aspect "([^"]*)"$/ do |name|
   toggle_aspect(name)
 end
@@ -109,3 +128,7 @@ end
 Then /^the aspect dropdown should be visible$/ do
   aspect_dropdown_visible?
 end
+
+Then /^I should see "([^"]*)" as (\d+). aspect$/ do |aspect_name, position|
+  expect(find("#aspect_nav li:nth-child(#{position.to_i + 2})")).to have_text aspect_name
+end

spec/controllers/aspects_controller_spec.rb

@@ -96,6 +96,19 @@ describe AspectsController, :type => :controller do
     end
   end
 
+  describe "update_order" do
+    it "updates the aspect order" do
+      @alices_aspect_1.update_attributes(order_id: 10)
+      @alices_aspect_2.update_attributes(order_id: 20)
+      ordered_aspect_ids = [@alices_aspect_2.id, @alices_aspect_1.id]
+
+      put(:update_order, ordered_aspect_ids: ordered_aspect_ids)
+
+      expect(Aspect.find(@alices_aspect_1.id).order_id).to eq(1)
+      expect(Aspect.find(@alices_aspect_2.id).order_id).to eq(0)
+    end
+  end
+
   describe "#destroy" do
     before do
       @alices_aspect_1 = alice.aspects.create(name: "Contacts")

spec/models/aspect_spec.rb

@@ -39,6 +39,13 @@ describe Aspect, :type => :model do
     it 'has a contacts_visible? method' do
       expect(alice.aspects.first.contacts_visible?).to be true
     end
+
+    it "sets an order_id" do
+      aspect_2 = alice.aspects.create(name: "People")
+      expect(aspect_2.order_id).to eq(2)
+      aspect_3 = alice.aspects.create(name: "Cat People")
+      expect(aspect_3.order_id).to eq(3)
+    end
   end
 
   describe 'validation' do