chore: init commit
in worker.../repo/GITFOLDER.zip is the .git folder.
This commit is contained in:
@@ -0,0 +1,282 @@
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- Page Header -->
|
||||
<%= admin_breadcrumbs(@breadcrumbs) %>
|
||||
|
||||
<div class="mt-8 mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 mb-2">Form Builder Demo</h1>
|
||||
<p class="text-gray-600">Showcase of Admin::FormBuilder with all field types</p>
|
||||
</div>
|
||||
|
||||
<!-- Alert Box -->
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-info-circle text-blue-600 mt-1 mr-3"></i>
|
||||
<div>
|
||||
<h3 class="font-semibold text-blue-900 mb-1">Form Builder Features</h3>
|
||||
<p class="text-sm text-blue-800">
|
||||
This form builder provides consistent Tailwind styling, automatic error display,
|
||||
and support for all common field types including associations, currency fields, and rich text.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Demo -->
|
||||
<div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg mb-8">
|
||||
<div class="px-6 py-6">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-6">Sample Form</h2>
|
||||
|
||||
<%= form_with model: @user, url: "#", builder: Admin::FormBuilder, class: "space-y-6" do |f| %>
|
||||
<!-- Text Fields -->
|
||||
<div class="border-b border-gray-200 pb-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">Text Fields</h3>
|
||||
|
||||
<%= f.text_field :name,
|
||||
label: "Full Name",
|
||||
hint: "Enter the user's full name" %>
|
||||
|
||||
<%= f.email_field :email,
|
||||
label: "Email Address",
|
||||
placeholder: "user@example.com" %>
|
||||
|
||||
<%= f.password_field :password,
|
||||
label: "Password",
|
||||
hint: "Minimum 8 characters" %>
|
||||
</div>
|
||||
|
||||
<!-- Number & Currency Fields -->
|
||||
<div class="border-b border-gray-200 pb-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">Number & Currency Fields</h3>
|
||||
|
||||
<%= f.number_field :id,
|
||||
label: "User ID",
|
||||
hint: "Auto-generated unique identifier" %>
|
||||
|
||||
<%= f.currency_field :id,
|
||||
label: "Account Balance",
|
||||
multiplier: 0.01,
|
||||
decimals: 2,
|
||||
hint: "Currency field with $ prefix" %>
|
||||
</div>
|
||||
|
||||
<!-- Text Area -->
|
||||
<div class="border-b border-gray-200 pb-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">Text Area</h3>
|
||||
|
||||
<%= f.text_area :email,
|
||||
label: "Biography",
|
||||
rows: 4,
|
||||
hint: "Tell us about yourself" %>
|
||||
</div>
|
||||
|
||||
<!-- Select Fields -->
|
||||
<div class="border-b border-gray-200 pb-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">Select Fields</h3>
|
||||
|
||||
<%= f.select_field :type,
|
||||
label: "User Type",
|
||||
collection: [%w[Student Student], %w[Teacher Teacher], %w[User User]],
|
||||
include_blank: "Select a type..." %>
|
||||
</div>
|
||||
|
||||
<!-- Boolean Field -->
|
||||
<div class="border-b border-gray-200 pb-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">Boolean Field</h3>
|
||||
|
||||
<%= f.boolean_field :admin,
|
||||
label: "Administrator",
|
||||
hint: "Grant admin privileges to this user" %>
|
||||
</div>
|
||||
|
||||
<!-- Date & DateTime Fields -->
|
||||
<div class="border-b border-gray-200 pb-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">Date & DateTime Fields</h3>
|
||||
|
||||
<%= f.date_field :created_at,
|
||||
label: "Registration Date" %>
|
||||
|
||||
<%= f.datetime_field :updated_at,
|
||||
label: "Last Updated" %>
|
||||
</div>
|
||||
|
||||
<!-- Read-Only Fields -->
|
||||
<div class="border-b border-gray-200 pb-6">
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-4">Read-Only Fields</h3>
|
||||
|
||||
<%= f.read_only_field :id,
|
||||
label: "User ID (Read-Only)" %>
|
||||
|
||||
<%= f.read_only_field :created_at,
|
||||
label: "Member Since" %>
|
||||
|
||||
<%= f.read_only_field :admin,
|
||||
label: "Administrator Status" %>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="flex items-center justify-end gap-x-4 pt-4">
|
||||
<%= f.cancel_button "Cancel", url: admin_component_demo_index_path %>
|
||||
<%= f.submit_button "Save Changes" %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Validation Error Demo -->
|
||||
<div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg mb-8">
|
||||
<div class="px-6 py-6">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Validation Error Display</h2>
|
||||
<p class="text-gray-600 mb-4">
|
||||
The form builder automatically displays validation errors inline with fields.
|
||||
</p>
|
||||
|
||||
<%= link_to "Show Form with Errors",
|
||||
form_admin_component_demo_index_path(show_errors: true),
|
||||
class: "inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700" %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Usage Examples -->
|
||||
<div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg mb-8">
|
||||
<div class="px-6 py-6">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Usage Examples</h2>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-3">Basic Form Setup</h3>
|
||||
<pre class="text-xs bg-gray-50 p-4 rounded border border-gray-200 overflow-x-auto"><code><%= form_with model: @resource, builder: Admin::FormBuilder do |f| %>
|
||||
<%= f.text_field :name, label: "Name", hint: "Enter the resource name" %>
|
||||
<%= f.submit_button "Save" %>
|
||||
<% end %></code></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-3">Currency Field</h3>
|
||||
<pre class="text-xs bg-gray-50 p-4 rounded border border-gray-200 overflow-x-auto"><code><%= f.currency_field :amount_cents,
|
||||
multiplier: 0.01,
|
||||
decimals: 2,
|
||||
label: "Amount" %></code></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-3">Association Select</h3>
|
||||
<pre class="text-xs bg-gray-50 p-4 rounded border border-gray-200 overflow-x-auto"><code><%= f.association_select :classroom_id,
|
||||
collection: Classroom.all,
|
||||
label_method: :name,
|
||||
value_method: :id,
|
||||
include_blank: "Select a classroom..." %></code></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-3">Boolean Field</h3>
|
||||
<pre class="text-xs bg-gray-50 p-4 rounded border border-gray-200 overflow-x-auto"><code><%= f.boolean_field :active,
|
||||
label: "Active",
|
||||
hint: "Check to activate this resource" %></code></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-3">Read-Only Field</h3>
|
||||
<pre class="text-xs bg-gray-50 p-4 rounded border border-gray-200 overflow-x-auto"><code><%= f.read_only_field :created_at,
|
||||
label: "Created At",
|
||||
value: @resource.created_at.strftime("%B %d, %Y") %></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Field Reference -->
|
||||
<div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg mb-8">
|
||||
<div class="px-6 py-6">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Available Field Types</h2>
|
||||
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-300">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900">Method</th>
|
||||
<th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Description</th>
|
||||
<th class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">Options</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-200">
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">text_field</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Standard text input</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">label, hint, placeholder</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">email_field</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Email input with validation</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">label, hint, placeholder</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">password_field</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Password input (masked)</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">label, hint</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">number_field</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Numeric input</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">label, hint, step</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">currency_field</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Currency with $ prefix</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">multiplier, decimals, label, hint</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">text_area</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Multi-line text input</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">label, hint, rows</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">rich_text_area</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Rich text editor (Trix)</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">label, hint</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">select_field</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Dropdown select</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">collection, include_blank, label, hint</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">boolean_field</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Checkbox with label</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">label, hint</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">date_field</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Date picker</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">label, hint</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">datetime_field</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Date and time picker</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">label, hint</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">association_select</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Association dropdown</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">collection, label_method, value_method, include_blank</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">read_only_field</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Display-only field</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">label, value, hint</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">submit_button</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Submit button (blue)</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">text</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-4 pl-4 pr-3 text-sm font-mono text-gray-900">cancel_button</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">Cancel link (styled as button)</td>
|
||||
<td class="px-3 py-4 text-sm text-gray-700">text, url</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,193 @@
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<!-- Page Header -->
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold text-gray-900 mb-2">Admin Components Demo</h1>
|
||||
<p class="text-gray-600">Showcase of all reusable admin components</p>
|
||||
</div>
|
||||
|
||||
<!-- Alert Box -->
|
||||
<div class="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
|
||||
<div class="flex items-start">
|
||||
<i class="fas fa-info-circle text-blue-600 mt-1 mr-3"></i>
|
||||
<div>
|
||||
<h3 class="font-semibold text-blue-900 mb-1">Component Demo Page</h3>
|
||||
<p class="text-sm text-blue-800">
|
||||
This page demonstrates all the reusable components created for the Admin V2 interface.
|
||||
These components will be used across all admin resource pages.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Links -->
|
||||
<div class="bg-white shadow-sm ring-1 ring-gray-900/5 rounded-lg p-4 mb-6">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-3">Component Demos</h3>
|
||||
<div class="flex gap-3">
|
||||
<%= link_to form_admin_component_demo_index_path, class: "inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700" do %>
|
||||
<i class="fas fa-edit mr-2"></i>
|
||||
Form Builder Demo
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Breadcrumbs Demo -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Breadcrumbs Component</h2>
|
||||
<%= admin_breadcrumbs(@breadcrumbs) %>
|
||||
</div>
|
||||
|
||||
<hr class="my-8">
|
||||
|
||||
<!-- Search/Filter Demo -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Search & Filter Component</h2>
|
||||
<%= admin_search_filter(
|
||||
filters: @filters,
|
||||
search_placeholder: "Search users..."
|
||||
) %>
|
||||
</div>
|
||||
|
||||
<hr class="my-8">
|
||||
|
||||
<!-- Table Demo -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Table Component</h2>
|
||||
<p class="text-gray-600 mb-4">
|
||||
Responsive table with sortable columns and empty states.
|
||||
Click column headers to sort. (Action buttons disabled in demo - see Action Buttons section below)
|
||||
</p>
|
||||
|
||||
<%= admin_table(
|
||||
@users,
|
||||
columns: @columns,
|
||||
title: "Users",
|
||||
actions: link_to("New User", "#", class: "inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"),
|
||||
empty_message: "No users found. Create your first user to get started.",
|
||||
show_actions: false
|
||||
) %>
|
||||
</div>
|
||||
|
||||
<hr class="my-8">
|
||||
|
||||
<!-- Show Attributes Demo -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Show Attributes Component</h2>
|
||||
<p class="text-gray-600 mb-4">Clean attribute display for show/detail pages.</p>
|
||||
|
||||
<%= admin_show_attributes(
|
||||
@sample_user,
|
||||
attributes: %i[id email name type admin created_at updated_at]
|
||||
) %>
|
||||
</div>
|
||||
|
||||
<hr class="my-8">
|
||||
|
||||
<!-- Action Buttons Demo -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Action Buttons Component</h2>
|
||||
<p class="text-gray-600 mb-4">Standard and custom action buttons with icons.</p>
|
||||
|
||||
<div class="bg-white p-6 rounded-lg shadow-sm ring-1 ring-gray-900/5">
|
||||
<h3 class="text-sm font-medium text-gray-900 mb-4">Standard Actions (Edit + Delete)</h3>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<%= link_to "#", class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
|
||||
<i class="fas fa-edit -ml-1 mr-2 h-5 w-5 text-gray-500"></i>
|
||||
Edit
|
||||
<% end %>
|
||||
<%= link_to "#", data: { turbo_method: :delete, turbo_confirm: "Are you sure?" }, class: "inline-flex items-center px-4 py-2 border border-red-300 shadow-sm text-sm font-medium rounded-md text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500" do %>
|
||||
<i class="fas fa-trash -ml-1 mr-2 h-5 w-5 text-red-500"></i>
|
||||
Delete
|
||||
<% end %>
|
||||
</div>
|
||||
|
||||
<hr class="my-6">
|
||||
|
||||
<h3 class="text-sm font-medium text-gray-900 mb-4">With Custom Actions</h3>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<%= link_to "#", class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
|
||||
<i class="fas fa-edit -ml-1 mr-2 h-5 w-5 text-gray-500"></i>
|
||||
Edit
|
||||
<% end %>
|
||||
<%= link_to "#", class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-blue-700 bg-blue-50 hover:bg-blue-100 border-blue-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
|
||||
<i class="fas fa-envelope -ml-1 mr-2 h-5 w-5"></i>
|
||||
Send Email
|
||||
<% end %>
|
||||
<%= link_to "#", data: { turbo_confirm: "Archive this user?" }, class: "inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" do %>
|
||||
<i class="fas fa-archive -ml-1 mr-2 h-5 w-5"></i>
|
||||
Archive
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-8">
|
||||
|
||||
<!-- Boolean Badge Demo -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Boolean Badges</h2>
|
||||
<div class="bg-white p-6 rounded-lg shadow-sm ring-1 ring-gray-900/5">
|
||||
<div class="flex gap-4 items-center">
|
||||
<div>
|
||||
<span class="text-sm text-gray-600 mr-2">True:</span>
|
||||
<%= boolean_badge(true) %>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-gray-600 mr-2">False:</span>
|
||||
<%= boolean_badge(false) %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-8">
|
||||
|
||||
<!-- Format Attribute Demo -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Attribute Formatting Examples</h2>
|
||||
<div class="bg-white p-6 rounded-lg shadow-sm ring-1 ring-gray-900/5">
|
||||
<dl class="space-y-4">
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-gray-500">String:</dt>
|
||||
<dd class="text-sm text-gray-900"><%= format_attribute(@sample_user, :email) %></dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-gray-500">Boolean:</dt>
|
||||
<dd class="text-sm text-gray-900"><%= format_attribute(@sample_user, :admin) %></dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-gray-500">Date:</dt>
|
||||
<dd class="text-sm text-gray-900"><%= format_attribute(@sample_user, :created_at) %></dd>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<dt class="text-sm font-medium text-gray-500">Nil Value:</dt>
|
||||
<dd class="text-sm text-gray-900"><%= format_attribute(User.new, :name) %></dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-8">
|
||||
|
||||
<!-- Component Usage Examples -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-xl font-semibold text-gray-900 mb-4">Usage Examples</h2>
|
||||
<div class="bg-gray-50 p-6 rounded-lg">
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-3">Table Component</h3>
|
||||
<pre class="text-xs bg-white p-4 rounded border border-gray-200 overflow-x-auto"><code><%= admin_table(
|
||||
@resources,
|
||||
columns: [
|
||||
{ attribute: :name, label: "Name", sortable: true, link: true },
|
||||
{ attribute: :status, label: "Status", sortable: true }
|
||||
],
|
||||
title: "Resources",
|
||||
actions: link_to("New", [:new, :admin, :resource])
|
||||
) %></code></pre>
|
||||
|
||||
<h3 class="text-sm font-semibold text-gray-900 mb-3 mt-6">Show Attributes</h3>
|
||||
<pre class="text-xs bg-white p-4 rounded border border-gray-200 overflow-x-auto"><code><%= admin_show_attributes(
|
||||
@resource,
|
||||
attributes: [:name, :email, :created_at]
|
||||
) %></code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,27 @@
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<%= admin_breadcrumbs(@breadcrumbs) %>
|
||||
|
||||
<div class="mb-6">
|
||||
<h1 class="text-2xl font-bold text-gray-900">User Details</h1>
|
||||
</div>
|
||||
|
||||
<%= admin_show_attributes(
|
||||
@user,
|
||||
attributes: %i[id email name type admin classroom_id created_at updated_at]
|
||||
) %>
|
||||
|
||||
<div class="mt-6">
|
||||
<%= admin_actions(
|
||||
@user,
|
||||
actions: %i[edit delete],
|
||||
custom_actions: [
|
||||
{
|
||||
label: "Back to List",
|
||||
path: admin_component_demo_index_path,
|
||||
icon: "fas fa-arrow-left",
|
||||
class: "text-gray-700 bg-white hover:bg-gray-50 border-gray-300"
|
||||
}
|
||||
]
|
||||
) %>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user