jquard 0.0.1 → 0.2.0

data/app/components/jquard/schemas/field_wrapper_component.rb

@@ -0,0 +1,40 @@
+module Jquard
+  module Schemas
+    class FieldWrapperComponent < Jquard::ApplicationComponent
+      def initialize(field:, record:, inline: false)
+        @field = field
+        @record = record
+        @inline = inline
+      end
+
+      private
+
+      attr_reader :field, :record
+
+      def inline?
+        @inline
+      end
+
+      def input_id
+        "#{record.model_name.param_key}_#{field.name}"
+      end
+
+      def error_message
+        return nil unless record.respond_to?(:errors)
+
+        record.errors[field.name].first
+      end
+
+      def wrapper_classes
+        class_names("jq-field", "jq-field--error" => error_message.present?)
+      end
+
+      def span_style
+        case field.column_span
+        when :full then "grid-column: 1 / -1;"
+        when Integer then "grid-column: span #{field.column_span} / span #{field.column_span};"
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/checkbox_component.html.erb

@@ -0,0 +1,3 @@
+<%= render wrapper(inline: true) do %>
+  <%= form.check_box field.name, class: "jq-checkbox", disabled: field.disabled? || nil %>
+<% end %>

data/app/components/jquard/schemas/fields/checkbox_component.rb

@@ -0,0 +1,8 @@
+module Jquard
+  module Schemas
+    module Fields
+      class CheckboxComponent < FieldComponent
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/date_picker_component.html.erb

@@ -0,0 +1,3 @@
+<%= render wrapper do %>
+  <%= form.date_field field.name, **base_options %>
+<% end %>

data/app/components/jquard/schemas/fields/date_picker_component.rb

@@ -0,0 +1,8 @@
+module Jquard
+  module Schemas
+    module Fields
+      class DatePickerComponent < FieldComponent
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/date_time_picker_component.html.erb

@@ -0,0 +1,3 @@
+<%= render wrapper do %>
+  <%= form.datetime_local_field field.name, **base_options %>
+<% end %>

data/app/components/jquard/schemas/fields/date_time_picker_component.rb

@@ -0,0 +1,8 @@
+module Jquard
+  module Schemas
+    module Fields
+      class DateTimePickerComponent < FieldComponent
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/field_component.rb

@@ -0,0 +1,38 @@
+module Jquard
+  module Schemas
+    module Fields
+      class FieldComponent < Jquard::ApplicationComponent
+        def initialize(component:, form:, record:)
+          @field = component
+          @form = form
+          @record = record
+        end
+
+        private
+
+        attr_reader :field, :form, :record
+
+        def wrapper(inline: false)
+          Jquard::Schemas::FieldWrapperComponent.new(field: field, record: record, inline: inline)
+        end
+
+        def input_classes
+          class_names("jq-input", "jq-input--error" => error?)
+        end
+
+        def error?
+          record.respond_to?(:errors) && record.errors[field.name].any?
+        end
+
+        def base_options
+          {
+            class: input_classes,
+            placeholder: field.placeholder,
+            required: field.required? || nil,
+            disabled: field.disabled? || nil
+          }.compact
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/hidden_component.rb

@@ -0,0 +1,11 @@
+module Jquard
+  module Schemas
+    module Fields
+      class HiddenComponent < FieldComponent
+        def call
+          form.hidden_field(field.name)
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/select_component.html.erb

@@ -0,0 +1,5 @@
+<%= render wrapper do %>
+  <%= form.select field.name, field.choices,
+        { include_blank: field.placeholder || false },
+        class: input_classes, required: field.required? || nil, disabled: field.disabled? || nil %>
+<% end %>

data/app/components/jquard/schemas/fields/select_component.rb

@@ -0,0 +1,8 @@
+module Jquard
+  module Schemas
+    module Fields
+      class SelectComponent < FieldComponent
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/text_input_component.html.erb

@@ -0,0 +1,3 @@
+<%= render wrapper do %>
+  <%= form.public_send("#{field.input_type}_field", field.name, **input_options) %>
+<% end %>

data/app/components/jquard/schemas/fields/text_input_component.rb

@@ -0,0 +1,13 @@
+module Jquard
+  module Schemas
+    module Fields
+      class TextInputComponent < FieldComponent
+        private
+
+        def input_options
+          base_options.merge(maxlength: field.max_length).compact
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/textarea_component.html.erb

@@ -0,0 +1,3 @@
+<%= render wrapper do %>
+  <%= form.text_area field.name, rows: field.rows, **base_options %>
+<% end %>

data/app/components/jquard/schemas/fields/textarea_component.rb

@@ -0,0 +1,8 @@
+module Jquard
+  module Schemas
+    module Fields
+      class TextareaComponent < FieldComponent
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/fields/toggle_component.html.erb

@@ -0,0 +1,6 @@
+<%= render wrapper(inline: true) do %>
+  <span class="jq-toggle">
+    <%= form.check_box field.name, class: "jq-toggle-input", disabled: field.disabled? || nil %>
+    <span class="jq-toggle-track"><span class="jq-toggle-thumb"></span></span>
+  </span>
+<% end %>

data/app/components/jquard/schemas/fields/toggle_component.rb

@@ -0,0 +1,8 @@
+module Jquard
+  module Schemas
+    module Fields
+      class ToggleComponent < FieldComponent
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/form_component.html.erb

@@ -0,0 +1,10 @@
+<%= form_with model: record, url: form_url, class: "jq-form" do |form| %>
+  <% schema.components.each do |component| %>
+    <%= render component.component_class.new(component: component, form: form, record: record) %>
+  <% end %>
+
+  <div class="jq-form-actions">
+    <%= form.submit submit_label, class: "jq-btn jq-btn--primary" %>
+    <%= link_to "Cancel", cancel_url, class: "jq-btn jq-btn--secondary" %>
+  </div>
+<% end %>

data/app/components/jquard/schemas/form_component.rb

@@ -0,0 +1,31 @@
+module Jquard
+  module Schemas
+    class FormComponent < Jquard::ApplicationComponent
+      def initialize(schema:, record:, resource:)
+        @schema = schema
+        @record = record
+        @resource = resource
+      end
+
+      private
+
+      attr_reader :schema, :record, :resource
+
+      def form_url
+        if record.persisted?
+          helpers.resource_record_path(resource.slug, record.id)
+        else
+          helpers.resource_path(resource.slug)
+        end
+      end
+
+      def cancel_url
+        helpers.resource_path(resource.slug)
+      end
+
+      def submit_label
+        record.persisted? ? "Save changes" : "Create"
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/layouts/grid_component.html.erb

@@ -0,0 +1,5 @@
+<div class="jq-schema-grid" style="<%= grid_style %>">
+  <% grid.schema.each do |child| %>
+    <%= render child.component_class.new(component: child, form: form, record: record) %>
+  <% end %>
+</div>

data/app/components/jquard/schemas/layouts/grid_component.rb

@@ -0,0 +1,21 @@
+module Jquard
+  module Schemas
+    module Layouts
+      class GridComponent < Jquard::ApplicationComponent
+        def initialize(component:, form:, record:)
+          @grid = component
+          @form = form
+          @record = record
+        end
+
+        private
+
+        attr_reader :grid, :form, :record
+
+        def grid_style
+          "grid-template-columns: repeat(#{grid.columns}, minmax(0, 1fr));"
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/schemas/layouts/section_component.html.erb

@@ -0,0 +1,18 @@
+<section class="jq-section">
+  <% if section.heading || section.description %>
+    <header class="jq-section-header">
+      <% if section.heading %>
+        <h2 class="jq-section-heading"><%= section.heading %></h2>
+      <% end %>
+      <% if section.description %>
+        <p class="jq-section-description"><%= section.description %></p>
+      <% end %>
+    </header>
+  <% end %>
+
+  <div class="jq-schema-grid" style="<%= grid_style %>">
+    <% section.schema.each do |child| %>
+      <%= render child.component_class.new(component: child, form: form, record: record) %>
+    <% end %>
+  </div>
+</section>

data/app/components/jquard/schemas/layouts/section_component.rb

@@ -0,0 +1,21 @@
+module Jquard
+  module Schemas
+    module Layouts
+      class SectionComponent < Jquard::ApplicationComponent
+        def initialize(component:, form:, record:)
+          @section = component
+          @form = form
+          @record = record
+        end
+
+        private
+
+        attr_reader :section, :form, :record
+
+        def grid_style
+          "grid-template-columns: repeat(#{section.columns}, minmax(0, 1fr));"
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/tables/actions/delete_action_component.html.erb

@@ -0,0 +1,11 @@
+<%= button_to helpers.resource_record_path(resource.slug, record.id), method: :delete,
+      class: "jq-row-action jq-row-action--danger",
+      form: { data: {
+        turbo_frame: "_top",
+        turbo_confirm: action.confirm,
+        confirm_heading: confirm_heading,
+        confirm_button: action.confirm_button
+      } } do %>
+  <%= helpers.jquard_icon(action.icon, css_class: "jq-row-action-icon") %>
+  <span><%= action.label %></span>
+<% end %>

data/app/components/jquard/tables/actions/delete_action_component.rb

@@ -0,0 +1,21 @@
+module Jquard
+  module Tables
+    module Actions
+      class DeleteActionComponent < Jquard::ApplicationComponent
+        def initialize(action:, resource:, record:)
+          @action = action
+          @resource = resource
+          @record = record
+        end
+
+        private
+
+        attr_reader :action, :resource, :record
+
+        def confirm_heading
+          action.confirm_heading || "Delete #{resource.singular_label.downcase}"
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/tables/actions/edit_action_component.html.erb

@@ -0,0 +1,5 @@
+<%= link_to helpers.edit_resource_path(resource.slug, record.id),
+      class: "jq-row-action", data: { turbo_frame: "_top" } do %>
+  <%= helpers.jquard_icon(action.icon, css_class: "jq-row-action-icon") %>
+  <span><%= action.label %></span>
+<% end %>

data/app/components/jquard/tables/actions/edit_action_component.rb

@@ -0,0 +1,17 @@
+module Jquard
+  module Tables
+    module Actions
+      class EditActionComponent < Jquard::ApplicationComponent
+        def initialize(action:, resource:, record:)
+          @action = action
+          @resource = resource
+          @record = record
+        end
+
+        private
+
+        attr_reader :action, :resource, :record
+      end
+    end
+  end
+end

data/app/components/jquard/tables/columns/icon_column_component.html.erb

@@ -0,0 +1,6 @@
+<% if column.boolean? %>
+  <%= helpers.jquard_icon(state ? "check-circle" : "x-circle",
+        css_class: "jq-bool-icon jq-bool-icon--#{state ? "true" : "false"}") %>
+<% else %>
+  <span><%= state %></span>
+<% end %>

data/app/components/jquard/tables/columns/icon_column_component.rb

@@ -0,0 +1,20 @@
+module Jquard
+  module Tables
+    module Columns
+      class IconColumnComponent < Jquard::ApplicationComponent
+        def initialize(column:, record:)
+          @column = column
+          @record = record
+        end
+
+        private
+
+        attr_reader :column, :record
+
+        def state
+          column.state_for(record)
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/tables/columns/text_column_component.html.erb

@@ -0,0 +1,5 @@
+<% if column.badge? %>
+  <span class="<%= badge_class %>"><%= display %></span>
+<% else %>
+  <span><%= display %></span>
+<% end %>

data/app/components/jquard/tables/columns/text_column_component.rb

@@ -0,0 +1,24 @@
+module Jquard
+  module Tables
+    module Columns
+      class TextColumnComponent < Jquard::ApplicationComponent
+        def initialize(column:, record:)
+          @column = column
+          @record = record
+        end
+
+        private
+
+        attr_reader :column, :record
+
+        def display
+          column.display_value(record)
+        end
+
+        def badge_class
+          "jq-badge jq-badge--#{column.color_for(column.state_for(record))}"
+        end
+      end
+    end
+  end
+end

data/app/components/jquard/tables/table_component.html.erb

@@ -0,0 +1,113 @@
+<div class="jq-card">
+  <% if table.searchable? %>
+    <div class="jq-table-toolbar">
+      <%= form_with url: search_url, method: :get, class: "jq-search" do |form| %>
+        <% query_params.except(:q, :page).each do |key, value| %>
+          <%= form.hidden_field key, value: value %>
+        <% end %>
+        <%= helpers.jquard_icon("magnifying-glass", css_class: "jq-search-icon") %>
+        <%= form.search_field :q, value: query_params[:q], placeholder: "Search",
+              class: "jq-search-input", autocomplete: "off" %>
+      <% end %>
+    </div>
+  <% end %>
+
+  <div class="jq-table-scroll">
+    <table class="jq-table">
+      <thead>
+        <tr>
+          <% table.columns.each do |column| %>
+            <th>
+              <% if column.sortable? %>
+                <%= link_to sort_url(column), class: "jq-sort-link" do %>
+                  <span><%= column.label %></span>
+                  <%= helpers.jquard_icon(sort_icon(column), css_class: "jq-sort-icon") %>
+                <% end %>
+              <% else %>
+                <%= column.label %>
+              <% end %>
+            </th>
+          <% end %>
+          <% if table.record_actions.any? %>
+            <th class="jq-actions-header"></th>
+          <% end %>
+        </tr>
+      </thead>
+      <tbody>
+        <% result.records.each do |record| %>
+          <tr>
+            <% table.columns.each do |column| %>
+              <td><%= render column.component_class.new(column: column, record: record) %></td>
+            <% end %>
+            <% if table.record_actions.any? %>
+              <td class="jq-row-actions">
+                <% table.record_actions.each do |action| %>
+                  <%= render action.component_class.new(action: action, resource: resource, record: record) %>
+                <% end %>
+              </td>
+            <% end %>
+          </tr>
+        <% end %>
+        <% if result.records.empty? %>
+          <tr>
+            <td colspan="<%= table.columns.size + (table.record_actions.any? ? 1 : 0) %>" class="jq-empty-state">No records found</td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+
+  <div class="jq-table-footer">
+    <nav class="jq-pagination" aria-label="Pagination">
+      <span class="jq-pagination-overview">
+        Showing <%= result.from %> to <%= result.to %> of <%= result.total_count %> results
+      </span>
+
+      <div class="jq-pagination-per-page">
+        <%= form_with url: search_url, method: :get do |form| %>
+          <% query_params.except(:per_page, :page).each do |key, value| %>
+            <%= form.hidden_field key, value: value %>
+          <% end %>
+          <label class="jq-input-group">
+            <span class="jq-input-group-prefix">Per page</span>
+            <%= form.select :per_page,
+                  options_for_select(Jquard::Tables::Query::PER_PAGE_OPTIONS, result.per_page),
+                  {}, class: "jq-per-page-select", data: { jq_autosubmit: true } %>
+          </label>
+        <% end %>
+      </div>
+
+      <ol class="jq-pagination-items">
+        <% if result.page > 1 %>
+          <li class="jq-pagination-item">
+            <%= link_to page_url(result.page - 1), class: "jq-pagination-item-btn", aria: { label: "Previous" } do %>
+              <%= helpers.jquard_icon("chevron-left", css_class: "jq-pagination-icon") %>
+            <% end %>
+          </li>
+        <% end %>
+
+        <% page_items.each do |item| %>
+          <% if item == :gap %>
+            <li class="jq-pagination-item jq-pagination-item--disabled">
+              <span class="jq-pagination-item-btn"><span class="jq-pagination-item-label">&hellip;</span></span>
+            </li>
+          <% else %>
+            <li class="<%= class_names("jq-pagination-item", "jq-pagination-item--active" => item == result.page) %>">
+              <%= link_to page_url(item), class: "jq-pagination-item-btn" do %>
+                <span class="jq-pagination-item-label"><%= item %></span>
+              <% end %>
+            </li>
+          <% end %>
+        <% end %>
+
+        <% if result.page < result.pages %>
+          <li class="jq-pagination-item">
+            <%= link_to page_url(result.page + 1), class: "jq-pagination-item-btn", aria: { label: "Next" } do %>
+              <%= helpers.jquard_icon("chevron-right", css_class: "jq-pagination-icon") %>
+            <% end %>
+          </li>
+        <% end %>
+      </ol>
+    </nav>
+  </div>
+</div>

data/app/components/jquard/tables/table_component.rb

@@ -0,0 +1,55 @@
+module Jquard
+  module Tables
+    class TableComponent < Jquard::ApplicationComponent
+      def initialize(table:, resource:, result:, query_params: {})
+        @table = table
+        @resource = resource
+        @result = result
+        @query_params = query_params.to_h.symbolize_keys
+      end
+
+      private
+
+      attr_reader :table, :resource, :result, :query_params
+
+      def search_url
+        helpers.resource_path(resource.slug)
+      end
+
+      def url_with(overrides)
+        helpers.resource_path(resource.slug, **query_params.merge(overrides).compact_blank)
+      end
+
+      def current_sort?(column)
+        result.sort == column.name.to_s
+      end
+
+      def sort_url(column)
+        direction = current_sort?(column) && result.direction == "asc" ? "desc" : "asc"
+        url_with(sort: column.name, direction: direction, page: nil)
+      end
+
+      def sort_icon(column)
+        return "chevron-up-down" unless current_sort?(column)
+
+        result.direction == "asc" ? "chevron-up" : "chevron-down"
+      end
+
+      def page_url(page)
+        url_with(page: page == 1 ? nil : page)
+      end
+
+      def page_items
+        return (1..result.pages).to_a if result.pages <= 5
+
+        window = ((result.page - 1)..(result.page + 1)).select { |page| page > 1 && page < result.pages }
+        items = [ 1 ]
+        items << :gap if window.first > 2
+        items.concat(window)
+        items << :gap if window.last < result.pages - 1
+        items << result.pages
+        items
+      end
+    end
+  end
+end

data/app/controllers/concerns/jquard/auth_layout.rb

@@ -0,0 +1,11 @@
+module Jquard
+  module AuthLayout
+    extend ActiveSupport::Concern
+
+    included do
+      layout "jquard/auth"
+      helper Jquard::Engine.helpers
+      prepend_view_path Jquard::Engine.root.join("app/views")
+    end
+  end
+end

data/app/controllers/jquard/application_controller.rb

@@ -1,4 +1,20 @@
 module Jquard
   class ApplicationController < ActionController::Base
+    before_action :authenticate_jquard_user!
+
+    private
+
+    def authenticate_jquard_user!
+      auth = Jquard.config.authenticate
+
+      unless auth
+        raise Jquard::Error,
+          "Jquard refuses to serve the admin panel without authentication. " \
+          "Configure config.authenticate_with in a Jquard.configure block, " \
+          "or opt into a public panel explicitly with an empty block: authenticate_with { }."
+      end
+
+      instance_exec(&auth)
+    end
   end
 end