Bug fixes and enhancement

Gemfile

@@ -1,11 +1,11 @@
 source 'https://rubygems.org'
 
-gem 'spree', github: 'spree/spree', branch: '3-2-stable'
+gem 'spree', '~> 3.2.0'
 
 # Spree Internationalization https://github.com/spree/spree_i18n
 gem 'spree_i18n', github: 'spree/spree_i18n', branch: 'master'
 
 # Provides basic authentication functionality for testing parts of your engine
-gem 'spree_auth_devise', github: 'spree/spree_auth_devise', branch: 'master'
+gem 'spree_auth_devise', '~> 3.2'
 
 gemspec

README.md

@@ -3,6 +3,13 @@ SpreeAdminRolesAndAccess [![Code Climate](https://codeclimate.com/github/vinsol/
 
 This spree extension is built on CanCan to dynamically add new roles and define its access through permissions.
 
+Screenshots
+-----------
+
+![Permission Sets](/screenshots/admin1.png "Creating Permission Sets")
+![Roles](/screenshots/admin2.png "Creating Roles from permission sets")
+
+
 Installation
 ------------
 
@@ -12,25 +19,6 @@ Add spree_admin_roles_and_access to your Gemfile:
 gem 'spree_admin_roles_and_access'
 ```
 
-But if you are using older version of spree
-
-
-```ruby
-# Spree 2.4.0-rc3
-gem 'spree_admin_roles_and_access', '1.3.0'
-```
-
-
-```ruby
-# Spree 2.1.x
-gem 'spree_admin_roles_and_access', '1.1.0'
-```
-
-```ruby
-# Spree 2.0.x
-gem 'spree_admin_roles_and_access', '1.0.0'
-```
-
 Bundle your dependencies and run the installation generator:
 
 ```shell
@@ -50,7 +38,8 @@ From Admin end, There are three menu's in the configuration Tab:
   3. **Role:** Collection of multiple permission sets which describe the role of user in the organisation. A role can be marked as `admin_accessible` in the role edit page.
      A role marked as such will get a default admin dashboard page in case they land on an admin page on which they do not have access.
 
-### Types of Permission ###
+Types of Permission
+-------------------
 
   1. **Default Permission** - Basic permissions required by a user to perform task on user end, like creating an order etc. Every role should be provided with this permissions.
   2. **Can Manage All** - Role with this permission can do everything. This permission is also invisible at admin end. And it should only be given to admin and super admin.
@@ -59,14 +48,16 @@ From Admin end, There are three menu's in the configuration Tab:
 
 
 
-**Pattern of the permissions :**
+Pattern of the permissions
+--------------------------
 
   1. **Can/cannot** - specifies whether the user with that permission can do or cannot do that task.
   2. **Action** - specifies the action which can be done by that model or subject like update, index, create etc. There is a special action called manage which matches every action.
   3. **Subject** - specified the model like products, users etc. of which the permission is given. There is an special subject called all which matches every subject.
   4. **Attributes** - specifies the attributes for which the permission is specified. Read-only actions shouldn't require this like index, read etc. But it is more secure if we specify them in other actions like create or update.
 
-**Some Examples :**
+Some Examples
+-------------
 
   1. **can-manage-spree/product** - can perform every action on Spree::Product but not on any other model or subject.
   2. **can-update-all** - can update all models or subjects.
@@ -75,7 +66,8 @@ From Admin end, There are three menu's in the configuration Tab:
   5. **can-manage-all** - can perform every action on all models.
 
 
-### Permission Sets ###
+Permission Sets
+---------------
 
 Once permissions are created you can organize groups of them into permission sets, These permission sets can then be assigned to the user's role which requires them.
 
@@ -95,8 +87,11 @@ Points to remember
 Migration from older version
 ----------------------------
 
-On upgrading to the latest version. A migration will run generating a permission set per user role. You can continue using the original roles as you were while gradually opting and seperating their responsibilities into permissions sets.
-Additionally you may want to run the rake task `populate_permission_sets` to seed some initial permission sets if needed.
+__v3.2.1 introduces some breaking changes.__
+
+After updating the gem version. Run `rails g spree_admin_roles_and_access:install` to get the latest migrations. This includes a migration that generates a permission set per user role. With this, you should be able to continue using the original roles as you were earlier.
+
+Additionally you may want to run the rake task `populate_permission_sets` to seed some initial permission sets. You can now gradually opt into seperating user role permissions into appropriate permission sets.
 
 The original relationship between roles and permissions can be accessed via, `legacy_roles` & `legacy_permissions`. They are not supported or editable via the admin interfaces and are only mantained for use in our migration task.
 
@@ -113,6 +108,27 @@ bundle exec rake test_app
 bundle exec rspec spec
 ```
 
+For older versions of spree
+----------------------------
+
+If you are using older version of spree. You can use the following version, please check the relavent readme for version specific installation guide.
+
+
+```ruby
+# Spree 2.4.0-rc3
+gem 'spree_admin_roles_and_access', '1.3.0'
+```
+
+```ruby
+# Spree 2.1.x
+gem 'spree_admin_roles_and_access', '1.1.0'
+```
+
+```ruby
+# Spree 2.0.x
+gem 'spree_admin_roles_and_access', '1.0.0'
+```
+
 Contributing
 ------------
 

app/assets/javascripts/spree/backend/spree_admin_roles_and_access.js

@@ -2,19 +2,47 @@
 
 var SearchableList = (function() {
   var SearchableCheckboxList = function(container) {
-    this.$searchBox = $("<input type='text' placeholder='Search..' class='narrow-down-list'></input>");
+    this.$searchBox = $("<div class='input-group input-group-lg col-xs-12'>\
+                           <input type='text' placeholder='Search..' class='narrow-down-list form-control'></input>\
+                            <div class='input-group-btn search-icon-btn'>\
+                              <button class='btn btn-default' type='submit'><i class='glyphicon glyphicon-search'></i></button>\
+                            </div>\
+                         </div>");
     this.$container = container;
     container.before(this.$searchBox);
     this.bindEvents();
   };
 
   SearchableCheckboxList.prototype.bindEvents = function() {
+    this.bindSearch();
+    this.bindCheck();
+    this.formChange();
+  };
+
+  SearchableCheckboxList.prototype.bindCheck = function() {
+    this.$container.find('.list-group-item').on('click', function(e) {
+      if (this == e.target) {
+        $(this).find('input:checkbox').click();
+      }
+    });
+
+    this.$container.find('input:checkbox').on('change', function() {
+      var checkbox     = $(this);
+      var lgItem       = checkbox.parents('.list-group-item');
+      var lg           = checkbox.parents('.list-group');
+      var total        = lg.find('.list-group-item').length;
+      var totalChecked = lg.find('input:checked').length;
+      lgItem.toggleClass('list-group-item-success');
+      checkbox.parents('.panel').find('.count').text(totalChecked + '/' + total);
+    });
+  };
+
+  SearchableCheckboxList.prototype.bindSearch = function() {
     var that = this;
-    this.$searchBox.on('keyup', function() {
-      var value = $(this).val();
+    this.$searchBox.on('keyup', function(e) {
+      var value = $(this).find('input').val();
       var pattern = new RegExp(value, "i");
-
-      that.$container.find('label').each(function() {
+      that.$container.find('.search-target').each(function() {
         if (!($(this).text().search(pattern) >= 0)) {
           $(this).hide();
         } else {
@@ -24,6 +52,29 @@ var SearchableList = (function() {
     });
   };
 
+  SearchableCheckboxList.prototype.formChange = function() {
+    var that = this;
+    var form = this.$container.closest('form');
+    var buttons = form.find('button');
+    buttons.attr('disabled', true);
+    form.find('input:not(.narrow-down-list)').one('keyup', function() {
+      buttons.attr('disabled', false);
+    });
+    form.find('input').on('change', function() {
+      buttons.attr('disabled', false);
+    });
+
+    form.on('keypress', function(e) {
+      if (e.which === 13){
+        e.preventDefault();
+        e.stopPropagation();
+        return false;
+      }
+    });
+  };
+
+
+
   return SearchableCheckboxList;
 })();
 

app/assets/stylesheets/spree/backend/spree_admin_roles_and_access.css

@@ -1,3 +1,133 @@
 /*
  *= require spree/backend
-*/
+ */
+
+.searchable-scrollable-list {
+    padding-top: 10px;
+    width: 100%;
+    vertical-align: top;
+    display: flex;
+}
+
+.scrollable-list-group-item {
+    padding-left: 2px;
+    padding-right: 2px;
+    flex: 1;
+    display: inline-block;
+}
+
+.inline-input-row {
+    width: 100%;
+    padding-left: 0px;
+    padding-right: 0px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-left: 0px;
+    margin-right: 0px;
+}
+
+.inline-input-row > .input-group {
+    vertical-align: top;
+    width: 49.8%;
+    margin: 0;
+    padding: 0;
+}
+
+.scrollable-list-group-item > .panel > .list-group {
+    max-height: 400px;
+    overflow-y: scroll;
+}
+
+.list-group-item > label {
+    text-transform: none;
+}
+
+.scrollable-list-group-item > .panel > .list-group > .list-group-item {
+    user-select: none;
+    cursor: pointer;
+}
+
+.scrollable-list-group-item label {
+    cursor: pointer;
+}
+
+
+.centered-floating-buttons {
+}
+
+.form-fields-group {
+    padding-bottom: 58px;
+}
+
+.fixed-bottom-button-group {
+    background: #fff;
+    text-align: left;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 10px;
+    z-index: 999;
+    padding-left: calc(16% + 45px);
+}
+
+.full-width-input {
+    min-width: 100%;
+}
+
+.help-block-inline {
+    display: inline-block;
+    padding: 10px;
+}
+
+
+#permission_set_display_permission {
+    margin-left: 20px;
+}
+
+#permission_set_permissions_field {
+    padding-top: 20px;
+}
+
+.checkbox-list-pane.list-group-item  label {
+    color: #555555;
+}
+
+.checkbox-list-pane.list-group-item > label > p {
+    padding-top: 0.6em;
+    margin-bottom: -0.6em;
+}
+
+.checkbox-list-pane.list-group-item > label > p > strong {
+    font-size: 1.3em;
+    font-weight: 300;
+}
+
+
+.add-on .input-group-btn > .btn {
+  border-left-width:0;left:-2px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+/* stop the glowing blue shadow */
+.add-on .form-control:focus {
+    box-shadow:none;
+    -webkit-box-shadow:none;
+    border-color:#cccccc;
+}
+
+div.withError > .searchable-scrollable-list > .panel-group > .panel {
+    border: 1px solid #F55753;
+}
+
+div.withError > div.input-group > input.narrow-down-list {
+    border-color: #e0e0e0
+}
+
+#main-part.sidebar-collapsed .fixed-bottom-button-group {
+    padding-left: 85px;
+}
+
+.input-group-btn.search-icon-btn {
+    width: 1% !important;
+}

app/controllers/spree/admin/base_controller_decorator.rb

@@ -12,7 +12,6 @@ def authorize_admin
     rescue
       record = "#{params[:controller]}"
     end
-
     authorize! :admin, record
     authorize_with_attributes! params[:action].to_sym, record, params[controller_name.singularize]
   end

app/controllers/spree/admin/permission_sets_controller.rb

@@ -4,6 +4,12 @@ class PermissionSetsController < ResourceController
       before_action :load_permissions, only: [:edit, :new, :create, :update]
 
       def index
+        if params[:q]
+          params[:q][:s] = params[:q][:s] || 'updated_at desc'
+        else
+          params[:q] = {}
+          params[:q][:s] = "updated_at desc"
+        end
         @search = Spree::PermissionSet.ransack(params[:q])
         @permission_sets = @search.result(distinct: true)
       end

app/models/spree/permission.rb

@@ -17,5 +17,9 @@ class Permission < ActiveRecord::Base
     def ability(current_ability, user)
       send(title, current_ability, user)
     end
+
+    def name
+      title.gsub('-', '_').humanize
+    end
   end
 end