easy-admin-rails 0.1.14 → 0.2.0

data/app/assets/builds/easy_admin.css

@@ -3418,10 +3418,6 @@ input:checked + .toggle-switch .toggle-slider:before {
   left: 50%;
 }
 
-.left-10 {
-  left: 2.5rem;
-}
-
 .left-2 {
   left: 0.5rem;
 }
@@ -3430,10 +3426,6 @@ input:checked + .toggle-switch .toggle-slider:before {
   left: 1.5rem;
 }
 
-.left-8 {
-  left: 2rem;
-}
-
 .right-0 {
   right: 0px;
 }
@@ -3616,6 +3608,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   margin-inline-start: auto;
 }
 
+.mt-0\.5 {
+  margin-top: 0.125rem;
+}
+
 .mt-1 {
   margin-top: 0.25rem;
 }
@@ -3712,6 +3708,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   height: 0.5rem;
 }
 
+.h-20 {
+  height: 5rem;
+}
+
 .h-3 {
   height: 0.75rem;
 }
@@ -3764,6 +3764,14 @@ input:checked + .toggle-switch .toggle-slider:before {
   min-height: 2.5rem;
 }
 
+.min-h-96 {
+  min-height: 24rem;
+}
+
+.min-h-\[2rem\] {
+  min-height: 2rem;
+}
+
 .min-h-\[40px\] {
   min-height: 40px;
 }
@@ -4063,6 +4071,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
@@ -4355,6 +4367,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   border-style: none;
 }
 
+.border-amber-200 {
+  --tw-border-opacity: 1;
+  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
+}
+
 .border-blue-100 {
   --tw-border-opacity: 1;
   border-color: rgb(219 234 254 / var(--tw-border-opacity, 1));
@@ -4458,6 +4475,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   border-color: transparent;
 }
 
+.border-white {
+  --tw-border-opacity: 1;
+  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
+}
+
 .border-white\/20 {
   border-color: rgb(255 255 255 / 0.2);
 }
@@ -4472,6 +4494,16 @@ input:checked + .toggle-switch .toggle-slider:before {
   border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
 }
 
+.bg-amber-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
+}
+
+.bg-amber-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
+}
+
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
@@ -4822,6 +4854,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   padding-right: 0px;
 }
 
+.px-1\.5 {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
 .px-2 {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
@@ -4916,6 +4953,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   padding-bottom: 1rem;
 }
 
+.pb-6 {
+  padding-bottom: 1.5rem;
+}
+
 .pl-3 {
   padding-left: 0.75rem;
 }
@@ -4952,6 +4993,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   padding-top: 5rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .pt-4 {
   padding-top: 1rem;
 }
@@ -4994,6 +5039,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   line-height: 2.25rem;
 }
 
+.text-6xl {
+  font-size: 3.75rem;
+  line-height: 1;
+}
+
 .text-base {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -5051,6 +5101,10 @@ input:checked + .toggle-switch .toggle-slider:before {
   line-height: 1.5rem;
 }
 
+.leading-relaxed {
+  line-height: 1.625;
+}
+
 .tracking-wide {
   letter-spacing: 0.025em;
 }
@@ -5059,6 +5113,21 @@ input:checked + .toggle-switch .toggle-slider:before {
   letter-spacing: 0.05em;
 }
 
+.text-amber-400 {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+
+.text-amber-600 {
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
+}
+
+.text-amber-700 {
+  --tw-text-opacity: 1;
+  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
+}
+
 .text-blue-400 {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity, 1));
@@ -5129,6 +5198,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   color: rgb(74 222 128 / var(--tw-text-opacity, 1));
 }
 
+.text-green-500 {
+  --tw-text-opacity: 1;
+  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
+}
+
 .text-green-600 {
   --tw-text-opacity: 1;
   color: rgb(22 163 74 / var(--tw-text-opacity, 1));
@@ -5144,6 +5218,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   color: rgb(22 101 52 / var(--tw-text-opacity, 1));
 }
 
+.text-green-900 {
+  --tw-text-opacity: 1;
+  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
+}
+
 .text-red-400 {
   --tw-text-opacity: 1;
   color: rgb(248 113 113 / var(--tw-text-opacity, 1));
@@ -5417,12 +5496,6 @@ input:checked + .toggle-switch .toggle-slider:before {
   transition-duration: 150ms;
 }
 
-.transition-shadow {
-  transition-property: box-shadow;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .transition-transform {
   transition-property: transform;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -5624,6 +5697,21 @@ input:checked + .toggle-switch .toggle-slider:before {
   border-color: rgb(156 163 175 / var(--tw-border-opacity, 1));
 }
 
+.hover\:border-green-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
+}
+
+.hover\:border-red-300:hover {
+  --tw-border-opacity: 1;
+  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
+}
+
+.hover\:bg-amber-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-blue-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
@@ -5684,6 +5772,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-green-100:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-green-50:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
@@ -5748,6 +5841,11 @@ input:checked + .toggle-switch .toggle-slider:before {
   --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
 }
 
+.hover\:text-amber-800:hover {
+  --tw-text-opacity: 1;
+  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
+}
+
 .hover\:text-blue-600:hover {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
@@ -6065,10 +6163,6 @@ input:checked + .toggle-switch .toggle-slider:before {
     margin-bottom: 1.5rem;
   }
 
-  .sm\:mb-8 {
-    margin-bottom: 2rem;
-  }
-
   .sm\:ml-16 {
     margin-left: 4rem;
   }

data/app/components/easy_admin/base_component.rb

@@ -12,6 +12,7 @@ module EasyAdmin
     include ActionView::Helpers::NumberHelper
     include EasyAdmin::DashboardsHelper
     include EasyAdmin::FieldsHelper
+    include EasyAdmin::Permissions::Component if defined?(EasyAdmin::Permissions::Component)
 
     # Add method to access all Rails helpers if needed
     def helpers

data/app/components/easy_admin/form_tabs_component.rb

@@ -2,9 +2,10 @@ module EasyAdmin
   class FormTabsComponent < Phlex::HTML
     include EasyAdmin::FieldsHelper
 
-    def initialize(resource_class:, form:)
+    def initialize(resource_class:, form:, record: nil)
       @resource_class = resource_class
       @form = form
+      @record = record
     end
 
     def view_template
@@ -120,7 +121,7 @@ module EasyAdmin
             div(class: "grid grid-cols-1 gap-6") do
               tab[:fields].each do |field|
                 div do
-                  unsafe_raw render_field(field, action: :form, form: @form)
+                  unsafe_raw render_field(field, action: :form, form: @form, record: @record)
                 end
               end
             end
@@ -158,6 +159,8 @@ module EasyAdmin
         '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>'
       when :info
         '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>'
+      when :shield
+        '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg>'
       else
         '<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>'
       end

data/app/components/easy_admin/navbar_component.rb

@@ -191,7 +191,11 @@ module EasyAdmin
     end
 
     def user_role
-      @current_user&.respond_to?(:role) ? @current_user.role.capitalize : "Administrator"
+      if @current_user&.respond_to?(:role) && @current_user.role
+        @current_user.role.name || @current_user.role.slug || "Administrator"
+      else
+        "No Role Assigned"
+      end
     end
 
     # SVG Icons

data/app/components/easy_admin/permissions/user_role_assignment_component.rb

@@ -0,0 +1,254 @@
+module EasyAdmin
+  module Permissions
+    class UserRoleAssignmentComponent < EasyAdmin::BaseComponent
+      def initialize(user:, form: nil)
+        @user = user
+        @form = form
+        @current_role = user&.respond_to?(:role) ? user.role : nil
+        
+        # Get actual permissions from permissions_cache 
+        @user_permissions_cache = get_user_permissions_from_cache(user)
+        
+        # Get all available resources and generate permissions dynamically
+        @available_resources = EasyAdmin::Permissions.available_resources
+        @all_permissions = generate_permissions_from_resources
+      end
+
+      def view_template
+        div(class: "space-y-6") do
+          # Current Role Section
+          render_current_role_section
+          
+          # Permissions Section
+          if @form
+            render_permissions_form_section
+          else
+            render_permissions_display_section
+          end
+        end
+      end
+
+      private
+
+      def render_current_role_section
+        div(class: "bg-white border border-gray-200 rounded-lg p-6") do
+          div(class: "flex items-center justify-between mb-4") do
+            h3(class: "text-lg font-medium text-gray-900") { "Role Assignment" }
+            
+            if @current_role
+              span(class: "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800") do
+                @current_role.name
+              end
+            else
+              span(class: "inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800") do
+                "No role assigned"
+              end
+            end
+          end
+
+          if @current_role&.description.present?
+            p(class: "text-gray-600") { @current_role.description }
+          end
+        end
+      end
+
+      # Show enabled permissions (read-only view)
+      def render_permissions_display_section
+        div(class: "bg-white border border-gray-200 rounded-lg p-6") do
+          h3(class: "text-lg font-medium text-gray-900 mb-4") { "Current Permissions" }
+          
+          enabled_permissions = @user_permissions_cache.select { |k, v| v == "true" }
+          
+          if enabled_permissions.any?
+            div(class: "grid grid-cols-1 md:grid-cols-2 gap-4") do
+              @available_resources.each do |resource|
+                plural_resource = resource.pluralize
+                resource_permissions = enabled_permissions.select { |k, _| k.start_with?("#{plural_resource}:") }
+                next if resource_permissions.empty?
+                
+                div(class: "border border-green-200 bg-green-50 rounded-lg p-4") do
+                  h4(class: "font-medium text-green-900 mb-2") { plural_resource.humanize.titleize }
+                  div(class: "space-y-1") do
+                    resource_permissions.each do |permission_name, _|
+                      action = permission_name.split(':').last
+                      span(class: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800 mr-2 mb-1") do
+                        action.humanize
+                      end
+                    end
+                  end
+                end
+              end
+            end
+          else
+            p(class: "text-gray-500 italic") { "No permissions currently assigned." }
+          end
+        end
+      end
+
+      # Show permission form (editable)
+      def render_permissions_form_section
+        div(class: "bg-white border border-gray-200 rounded-lg p-6") do
+          h3(class: "text-lg font-medium text-gray-900 mb-4") { "Manage Permissions" }
+          p(class: "text-sm text-gray-600 mb-6") { "Click to toggle permissions for each resource:" }
+          
+          div(class: "space-y-4", data: { controller: "permission-toggle", permission_toggle_user_id_value: @user&.id }) do
+            @available_resources.each do |resource|
+              plural_resource = resource.pluralize
+              render_resource_permission_group(plural_resource)
+            end
+          end
+        end
+      end
+
+      def render_resource_permission_group(resource)
+        div(class: "border border-gray-200 bg-white rounded-lg p-4") do
+          div(class: "flex items-center justify-between mb-4") do
+            div(class: "flex items-center") do
+              h4(class: "text-md font-medium text-gray-900 capitalize") { resource.humanize }
+            end
+            
+            div(class: "flex items-center space-x-2") do
+              span(class: "inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-gray-100 text-gray-700") do
+                "4 permissions"
+              end
+              # Toggle all button for this resource
+              button(
+                type: "button",
+                class: "text-xs px-2 py-1 bg-gray-200 text-gray-700 hover:bg-gray-300 rounded transition-colors",
+                data: {
+                  action: "click->permission-toggle#toggleAllForResource",
+                  resource_type: resource
+                }
+              ) do
+                "Toggle All"
+              end
+            end
+          end
+
+          # Permissions grid with old card style (2 per row)
+          div(class: "grid grid-cols-1 md:grid-cols-2 gap-3") do
+            %w[read create update delete].each do |action|
+              permission_name = "#{resource}:#{action}"
+              is_granted = permission_granted?(permission_name)
+              
+              render_permission_toggle_card(permission_name, action, is_granted)
+            end
+          end
+        end
+      end
+
+      def render_permission_toggle_card(permission_name, action, is_granted)
+        div(
+          class: "permission-card cursor-pointer transition-all duration-200 #{permission_card_classes(is_granted)}",
+          data: {
+            action: "click->permission-toggle#togglePermission",
+            permission_toggle_target: "permissionCard",
+            permission_name: permission_name,
+            granted: is_granted.to_s,
+            resource_type: permission_name.split(':').first
+          }
+        ) do
+          div(class: "flex items-start p-3") do
+            # Permission icon
+            div(class: "flex-shrink-0 mr-3") do
+              unsafe_raw permission_icon_svg(is_granted)
+            end
+
+            # Permission details
+            div(class: "flex-1 min-w-0") do
+              div(class: "mb-1") do
+                span(class: "text-sm font-medium #{is_granted ? 'text-green-900' : 'text-gray-900'} capitalize") do
+                  action.humanize
+                end
+              end
+              
+              # Permission description
+              p(class: "text-xs #{is_granted ? 'text-green-700' : 'text-gray-600'} leading-relaxed") do
+                permission_description(action)
+              end
+              
+              # Permission name (technical)
+              p(class: "text-xs #{is_granted ? 'text-green-600' : 'text-gray-500'} font-mono mt-1") do
+                permission_name
+              end
+            end
+          end
+          
+          # Hidden input for form submission
+          if @form
+            model_name = @form.object.class.name.underscore
+            field_name = "#{model_name}[permissions_cache][#{permission_name}]"
+            input(
+              type: "hidden",
+              name: field_name,
+              value: is_granted.to_s,
+              data: { permission_toggle_target: "hiddenInput" }
+            )
+          end
+        end
+      end
+
+      def generate_permissions_from_resources
+        permissions = {}
+        @available_resources.each do |resource|
+          # Pluralize resource name to match permissions_cache format
+          plural_resource = resource.pluralize
+          %w[read create update delete].each do |action|
+            permission_name = "#{plural_resource}:#{action}"
+            permissions[permission_name] = {
+              name: permission_name,
+              resource: plural_resource,
+              action: action
+            }
+          end
+        end
+        permissions
+      end
+
+      def get_user_permissions_from_cache(user)
+        return {} unless user&.permissions_cache.present?
+        
+        case user.permissions_cache
+        when Hash
+          user.permissions_cache
+        when String
+          JSON.parse(user.permissions_cache) rescue {}
+        else
+          {}
+        end
+      end
+
+      def permission_card_classes(is_granted)
+        if is_granted
+          "bg-green-50 border border-green-200 hover:border-green-300 hover:bg-green-100"
+        else
+          "bg-red-50 border border-red-200 hover:border-red-300 hover:bg-red-100"
+        end
+      end
+
+      def permission_granted?(permission_name)
+        permission_value = @user_permissions_cache[permission_name]
+        # Handle string "true", boolean true, and string "1" 
+        permission_value == "true" || permission_value == true || permission_value == "1"
+      end
+
+      def permission_description(action)
+        descriptions = {
+          'read' => 'View and list records',
+          'create' => 'Create new records',
+          'update' => 'Edit existing records', 
+          'delete' => 'Remove records'
+        }
+        descriptions[action] || action.humanize
+      end
+
+      def permission_icon_svg(is_granted)
+        if is_granted
+          '<svg class="w-5 h-5 text-green-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>'
+        else
+          '<svg class="w-5 h-5 text-red-500 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>'
+        end
+      end
+    end
+  end
+end