uchi 0.1.6 → 0.1.7

data/app/assets/tailwind/uchi.css

@@ -17,5 +17,5 @@ running the following command:
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 @import "flowbite/src/themes/default"; /* This imports them from node_modules/flowbite/src/themes/default.css */
 
-/* Configure the source files of Flowbite */
-@source "../../../node_modules/flowbite";
+/* Don't include classes used in docs into Uchis stylesheet */
+@source not "docs";

data/app/components/uchi/field/belongs_to/edit.html.erb

@@ -1 +1,73 @@
-<%= render(Uchi::Flowbite::InputField::Select.new(**options)) %>
+<div
+  class="relative"
+  data-action="keydown.esc->belongs-to#closeDropdown"
+  data-controller="belongs-to"
+  data-belongs-to-backend-url-value="<%= helpers.belongs_to_associated_records_path(field: field.name, model: repository.model, record_id: record&.id) %>"
+>
+  <%= render(Uchi::Flowbite::Input::Label.new(attribute: field.name, form: form, options: {for: dom_id_for_toggle})) { label } %>
+
+  <%# Actual input. This is the hidden part which is what is sent to the server %>
+  <%= form.hidden_field "#{field.name}_id",
+    data: {
+      'belongs-to-target': 'id',
+    }
+  %>
+
+  <button
+    class="<%= Uchi::Flowbite::Input::Field.classes.join(" ") %> text-left"
+    data-action="belongs-to#toggle"
+    id="<%= dom_id_for_toggle %>"
+    type="button"
+  >
+    <div class="inline-flex items-center justify-between w-full">
+      <div class="min-h-[1em]" data-belongs-to-target="label"><%= record_title(associated_record) %></div>
+      <svg
+        class="w-4 h-4 ms-1.5 -me-0.5"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m19 9-7 7-7-7"
+        />
+      </svg>
+    </div>
+  </button>
+
+  <div class="absolute z-10 bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-full mt-1" data-belongs-to-target="dropdown">
+    <div class="bg-neutral-primary-medium border-b border-default-medium p-2 rounded-t-base">
+      <%# Search input. This is the visible part that users type into %>
+      <label for="<%= dom_id_for_filter_query_input %>" class="sr-only">Search</label>
+      <%=
+        text_field_tag(
+          "filter_query",
+          nil,
+          class: "bg-neutral-secondary-strong border border-default-strong text-heading text-sm rounded focus:ring-brand focus:border-brand block w-full px-2.5 py-2 shadow-xs placeholder:text-body",
+          data: {
+            'belongs-to-target': 'input',
+            action: 'belongs-to#handleChange focus->belongs-to#handleFocus',
+            autocomplete: 'off'
+          },
+          id: dom_id_for_filter_query_input,
+        )
+      %>
+    </div>
+    <div class="max-h-96 overflow-y-auto" data-belongs-to-target="list">
+      <!-- Options will be dynamically inserted here -->
+      <div class="grid place-items-center p-8">
+        <%= render(Uchi::Ui::Spinner.new(message: associated_repository.translate.loading_message)) %>
+      </div>
+    </div>
+  </div>
+
+  <% if hint.present? %>
+    <%= render(Uchi::Flowbite::Input::Hint.new(attribute: field.name, form: form)) { hint } %>
+  <% end %>
+</div>

data/app/components/uchi/field/belongs_to.rb

@@ -12,6 +12,13 @@ module Uchi
 
         def associated_repository
           reflection = record.class.reflect_on_association(field.name)
+
+          unless reflection
+            raise \
+              ArgumentError,
+              "No association named #{field.name.inspect} found on #{record.class}"
+          end
+
           model = reflection.klass
           repository_class = Uchi::Repository.for_model(model)
           repository_class.new
@@ -23,48 +30,41 @@ module Uchi
       end
 
       class Edit < Uchi::Field::Base::Edit
+        include Helpers
+
         def associated_repository
-          model = reflection.klass
-          repository_class = Uchi::Repository.for_model(model)
-          repository_class.new
+          @associated_repository ||= begin
+            model = reflection.klass
+            repository_class = Uchi::Repository.for_model(model)
+            repository_class.new
+          end
         end
 
         def attribute_name
           reflection.foreign_key
         end
 
-        def collection
-          query = associated_repository.find_all
-          field.collection_query.call(query)
+        def dom_id_for_filter_query_input
+          "#{form.object_name}_#{attribute_name}_belongs_to_filter_query"
         end
 
-        private
+        def dom_id_for_toggle
+          "#{form.object_name}_#{attribute_name}_belongs_to_toggle"
+        end
 
-        def collection_for_select
-          repository = associated_repository
-          items = []
-          items << ["", nil] if optional?
-          items + collection.map do |item|
-            [repository.title(item), item.id]
-          end
+        def record_title(record)
+          return "" if record.nil?
+
+          associated_repository.title(record)
         end
 
+        private
+
         # Returns true if the association is optional.
         def optional?
           reflection.options[:optional] == true
         end
 
-        def options
-          options = {
-            attribute: attribute_name,
-            collection: collection_for_select,
-            form: form,
-            label: {content: label}
-          }
-          options[:hint] = {content: hint} if hint.present?
-          options
-        end
-
         def reflection
           @reflection ||= record.class.reflect_on_association(field.name)
         end

data/app/components/uchi/field/has_and_belongs_to_many/show.html.erb

@@ -22,7 +22,7 @@
     )
   )) do %>
     <%= render(Uchi::Ui::Frame.new) do %>
-      <div class="grid grid place-items-center p-8">
+      <div class="grid place-items-center p-8">
         <%= render(Uchi::Ui::Spinner.new(message: repository.translate.loading_message)) %>
       </div>
     <% end %>

data/app/components/uchi/field/has_many/edit.html.erb

@@ -1 +1,86 @@
-<%# This space intentionally left blank %>
+<div
+  class="relative"
+  data-action="keydown.esc->has-many#closeDropdown"
+  data-controller="has-many"
+  data-has-many-backend-url-value="<%= helpers.has_many_associated_records_path(field: field.name, model: repository.model, record_id: record&.id) %>"
+  data-has-many-field-name-value="<%= field_name_for_input %>"
+>
+  <%= render(Uchi::Flowbite::Input::Label.new(attribute: field.name, form: form, options: {for: dom_id_for_toggle})) { label } %>
+
+  <%# Hidden fields to store selected IDs as an array %>
+  <div data-has-many-target="idsContainer">
+    <% associated_records.each do |assoc_record| %>
+      <input
+        type="hidden"
+        name="<%= field_name_for_input %>"
+        value="<%= assoc_record.id %>"
+        data-has-many-target="idField"
+        data-title="<%= record_title(assoc_record) %>"
+      >
+    <% end %>
+  </div>
+
+  <button
+    class="<%= Uchi::Flowbite::Input::Field.classes.join(" ") %> text-left"
+    data-action="has-many#toggle"
+    id="<%= dom_id_for_toggle %>"
+    type="button"
+  >
+    <div class="inline-flex items-center justify-between w-full">
+      <div class="min-h-[1em] truncate" data-has-many-target="label">
+        <% if associated_records.any? %>
+          <%= selected_titles %>
+        <% else %>
+          <span class="text-body-subtle">Select items...</span>
+        <% end %>
+      </div>
+      <svg
+        class="w-4 h-4 ms-1.5 -me-0.5 flex-shrink-0"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        fill="none"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m19 9-7 7-7-7"
+        />
+      </svg>
+    </div>
+  </button>
+
+  <div class="absolute z-10 bg-neutral-primary-medium border border-default-medium rounded-base shadow-lg w-full mt-1" data-has-many-target="dropdown">
+    <div class="p-2 border-b border-default-medium">
+      <%# Search input. This is the visible part that users type into %>
+      <label for="<%= dom_id_for_filter_query_input %>" class="sr-only">Search</label>
+      <%=
+        text_field_tag(
+          "filter_query",
+          nil,
+          class: "bg-neutral-secondary-strong border border-default-strong text-heading text-sm rounded focus:ring-brand focus:border-brand block w-full px-2.5 py-2 shadow-xs placeholder:text-body",
+          data: {
+            'has-many-target': 'input',
+            action: 'has-many#handleChange focus->has-many#handleFocus',
+            autocomplete: 'off'
+          },
+          id: dom_id_for_filter_query_input,
+        )
+      %>
+    </div>
+    <div class="max-h-96 overflow-y-auto" data-has-many-target="list">
+      <!-- Options will be dynamically inserted here -->
+      <div class="grid place-items-center p-8">
+        <%= render(Uchi::Ui::Spinner.new(message: associated_repository.translate.loading_message)) %>
+      </div>
+    </div>
+  </div>
+
+  <% if hint.present? %>
+    <%= render(Uchi::Flowbite::Input::Hint.new(attribute: field.name, form: form)) { hint } %>
+  <% end %>
+</div>

data/app/components/uchi/field/has_many/show.html.erb

@@ -22,7 +22,7 @@
     )
   )) do %>
     <%= render(Uchi::Ui::Frame.new) do %>
-      <div class="grid grid place-items-center p-8">
+      <div class="grid place-items-center p-8">
         <%= render(Uchi::Ui::Spinner.new(message: repository.translate.loading_message)) %>
       </div>
     <% end %>

data/app/components/uchi/field/has_many.rb

@@ -6,6 +6,52 @@ module Uchi
       DEFAULT_COLLECTION_QUERY = ->(query) { query }.freeze
 
       class Edit < Uchi::Field::Base::Edit
+        def associated_records
+          records = field.value(record)
+          return [] if records.nil?
+
+          associated_repository.find_all(scope: records)
+        end
+
+        def associated_repository
+          @associated_repository ||= begin
+            model = reflection.klass
+            repository_class = Uchi::Repository.for_model(model)
+            repository_class.new
+          end
+        end
+
+        def attribute_name
+          "#{field.name.to_s.singularize}_ids"
+        end
+
+        def dom_id_for_filter_query_input
+          "#{form.object_name}_#{attribute_name}_has_many_filter_query"
+        end
+
+        def dom_id_for_toggle
+          "#{form.object_name}_#{attribute_name}_has_many_toggle"
+        end
+
+        def field_name_for_input
+          "#{form.object_name}[#{attribute_name}][]"
+        end
+
+        def record_title(record)
+          return "" if record.nil?
+
+          associated_repository.title(record)
+        end
+
+        def selected_titles
+          associated_records.map { |record| record_title(record) }.join(", ")
+        end
+
+        private
+
+        def reflection
+          @reflection ||= record.class.reflect_on_association(field.name)
+        end
       end
 
       class Index < Uchi::Field::Base::Index
@@ -19,10 +65,15 @@ module Uchi
         end
 
         def associated_repository
-          reflection = record.class.reflect_on_association(field.name)
-          model = reflection.klass
-          repository_class = Uchi::Repository.for_model(model)
-          raise NameError, "No repository found for associated model #{model}" unless repository_class
+          raise NameError, "No association named #{field.name.inspect} found on #{record.class}" unless reflection
+
+          associated_model = reflection.klass
+          repository_class = Uchi::Repository.for_model(associated_model)
+          unless repository_class
+            raise \
+              NameError,
+              "No repository found for associated model #{associated_model}"
+          end
 
           repository_class.new
         end
@@ -46,13 +97,12 @@ module Uchi
         #
         # @return [ActiveRecord::Reflection, nil]
         def inverse_association
-          reflection = record.class.reflect_on_association(field.name)
           reflection&.inverse_of
         end
 
         # Returns the ActiveRecord::Reflection for this association.
         #
-        # @return [ActiveRecord::Reflection]
+        # @return [ActiveRecord::Reflection, nil]
         def reflection
           @reflection ||= record.class.reflect_on_association(field.name)
         end
@@ -94,13 +144,11 @@ module Uchi
       def param_key
         # TODO: This is too naive. We need to match this to the actual foreign
         # key of the model.
-        :"#{name}_id"
+        :"#{name.to_s.singularize}_ids"
       end
 
-      protected
-
-      def default_on
-        [:show]
+      def permitted_param
+        {param_key => []}
       end
     end
   end

data/app/components/uchi/ui/navigation/navigation.html.erb

@@ -1,7 +1,7 @@
 <ul class="space-y-2 font-medium">
   <% items.each do |item| %>
     <li>
-      <%= link_to(item[:path], :class => "flex items-center px-2 py-1.5 text-body rounded-base hover:bg-neutral-tertiary hover:text-fg-brand group") do %>
+      <%= link_to(item[:path], :class => "flex items-center py-1.5 text-body rounded-base hover:bg-neutral-tertiary hover:text-fg-brand group md:px-2") do %>
         <span class="ms-3"><%= item[:label] %></span>
       <% end %>
     </li>

data/app/components/uchi/ui/page_header/page_header.html.erb

@@ -1,13 +1,13 @@
-<header class="px-4 mb-6 space-y-6 md:px-0">
-  <div>
-    <% if breadcrumb? %>
+<header class="px-0 mb-6 space-y-6 md:px-0">
+  <% if breadcrumb? %>
+    <div class="px-2">
       <%= breadcrumb %>
-    <% end %>
-  </div>
+    </div>
+  <% end %>
 
-  <div class="items-start justify-between space-x-6 md:flex md:px-0">
+  <div class="items-start justify-between space-y-2 space-x-6 md:flex md:px-0 md:space-y-0">
     <div>
-      <h1 class="text-3xl font-semibold tracking-tight text-heading group">
+      <h1 class="px-1 text-3xl font-semibold tracking-tight text-heading group">
         <%= title %>
       </h1>
 

data/app/controllers/uchi/belongs_to/associated_records_controller.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+require "uchi/pagination/controller"
+
+module Uchi
+  module BelongsTo
+    # Companion controller for the Stimulus-based belongs_to_controller.
+    #
+    # Provides backend support for fetching associated records for a belongs_to
+    # field via AJAX.
+    class AssociatedRecordsController < Uchi::ApplicationController
+      layout false
+
+      def index
+        @current_value = field.value(parent_record)
+
+        @field_name = params[:field]
+        @records = field.collection_query.call(find_all_records_from_association)
+      end
+
+      protected
+
+      helper_method def record_title(record)
+        return "" if record.nil?
+
+        associated_repository.title(record)
+      end
+
+      helper_method def source_repository
+        @source_repository ||= begin
+          model_name = params[:model]
+          repository_class = Uchi::Repository.for_model(model_name)
+          raise NameError, "No repository found for model #{model_name}" unless repository_class
+
+          repository_class.new
+        end
+      end
+
+      private
+
+      def associated_repository
+        @associated_repository ||= begin
+          associated_repository = Uchi::Repository.for_model(association.klass)&.new
+          raise NameError, "No repository found for associated model #{association.klass}" unless associated_repository
+
+          associated_repository
+        end
+      end
+
+      def association
+        @association ||= begin
+          association = source_repository.model.reflect_on_association(field.name.to_sym)
+          raise NameError, "No association named #{field.name} on #{source_repository.model}" unless association
+
+          association
+        end
+      end
+
+      def field
+        @field ||= begin
+          field_name = params[:field]
+          field = source_repository.fields.find { |f| f.name == field_name.to_sym }
+          raise NameError, "No field named #{field_name} on #{source_repository.model}" unless field
+
+          field
+        end
+      end
+
+      def find_all_records(repository:, scope: nil)
+        # Duplicated from Uchi::RepositoryController; consider refactoring.
+        repository
+          .find_all(
+            scope: scope,
+            search: params[:query]
+          )
+      end
+
+      def find_all_records_from_association
+        find_all_records(repository: associated_repository)
+      end
+
+      def parent_record
+        return nil unless params[:record_id].present?
+
+        source_repository.find(params[:record_id])
+      end
+    end
+  end
+end

data/app/controllers/uchi/has_many/associated_records_controller.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+require "uchi/pagination/controller"
+
+module Uchi
+  module HasMany
+    # Companion controller for the Stimulus-based has_many_controller.
+    #
+    # Provides backend support for fetching associated records for a has_many
+    # field via AJAX.
+    class AssociatedRecordsController < Uchi::ApplicationController
+      layout false
+
+      def index
+        @current_values = field.value(parent_record) || []
+
+        @field_name = params[:field]
+        @records = field.collection_query.call(find_all_records_from_association)
+      end
+
+      protected
+
+      helper_method def record_title(record)
+        return "" if record.nil?
+
+        associated_repository.title(record)
+      end
+
+      helper_method def source_repository
+        @source_repository ||= begin
+          model_name = params[:model]
+          repository_class = Uchi::Repository.for_model(model_name)
+          raise NameError, "No repository found for model #{model_name}" unless repository_class
+
+          repository_class.new
+        end
+      end
+
+      private
+
+      def associated_repository
+        @associated_repository ||= begin
+          associated_repository = Uchi::Repository.for_model(association.klass)&.new
+          raise NameError, "No repository found for associated model #{association.klass}" unless associated_repository
+
+          associated_repository
+        end
+      end
+
+      def association
+        @association ||= begin
+          association = source_repository.model.reflect_on_association(field.name.to_sym)
+          raise NameError, "No association named #{field.name} on #{source_repository.model}" unless association
+
+          association
+        end
+      end
+
+      def field
+        @field ||= begin
+          field_name = params[:field]
+          field = source_repository.fields.find { |f| f.name == field_name.to_sym }
+          raise NameError, "No field named #{field_name} on #{source_repository.model}" unless field
+
+          field
+        end
+      end
+
+      def find_all_records(repository:, scope: nil)
+        # Duplicated from Uchi::RepositoryController; consider refactoring.
+        repository
+          .find_all(
+            scope: scope,
+            search: params[:query]
+          )
+      end
+
+      def find_all_records_from_association
+        find_all_records(repository: associated_repository)
+      end
+
+      def parent_record
+        return nil unless params[:record_id].present?
+
+        source_repository.find(params[:record_id])
+      end
+    end
+  end
+end

data/app/views/layouts/uchi/_javascript.html.erb

@@ -0,0 +1 @@
+<%= javascript_include_tag "uchi/application", "data-turbo-track": "reload" %>

data/app/views/layouts/uchi/_stylesheets.html.erb

@@ -0,0 +1 @@
+<%= stylesheet_link_tag "uchi/application", media: "all", "data-turbo-track": "reload" %>

data/app/views/layouts/uchi/application.html.erb

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 
-<html>
+<html class="h-full">
   <head>
     <title>
       <%= content_for?(:page_title) ? yield(:page_title) : "Uchi" %>
@@ -11,11 +11,11 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <%= javascript_include_tag "uchi/application", "data-turbo-track" => "reload" %>
-    <%= stylesheet_link_tag "uchi/application", media: "all", "data-turbo-track": "reload" %>
+    <%= render "layouts/uchi/javascript" %>
+    <%= render "layouts/uchi/stylesheets" %>
   </head>
 
-  <body class="antialiased bg-neutral-secondary-medium p-2">
+  <body class="antialiased bg-neutral-secondary-medium h-full p-2">
     <div class="md:flex">
       <%= render(partial: "uchi/navigation/main") %>
 

data/app/views/uchi/belongs_to/associated_records/index.html.erb

@@ -0,0 +1,13 @@
+<ul class="p-2 text-sm text-body font-medium">
+  <% @records.each do |record| %>
+    <li
+      class="inline-flex items-center w-full p-2 hover:bg-neutral-tertiary-medium hover:text-heading rounded aria-selected:bg-brand aria-selected:text-white"
+      data-action="belongs-to#selectOption"
+      data-id="<%= record.id %>"
+      id="<%= dom_id(record, [source_repository.model, @field_name].join("-")) %>"
+      role="option"
+    >
+      <%= record_title(record) %>
+    </li>
+  <% end %>
+</ul>

data/app/views/uchi/has_many/associated_records/index.html.erb

@@ -0,0 +1,26 @@
+<ul class="p-4 text-sm text-body font-medium space-y-4">
+  <% @records.each do |record| %>
+    <%
+      checkbox_id = dom_id(record, [source_repository.model, @field_name, 'checkbox'].join("-"))
+    %>
+    <li
+      data-id="<%= record.id %>"
+      id="<%= dom_id(record, [source_repository.model, @field_name].join("-")) %>"
+      role="option"
+    >
+      <div class="flex items-center">
+        <input
+          type="checkbox"
+          id="<%= checkbox_id %>"
+          class="w-4 h-4 border border-default-strong rounded-xs bg-neutral-secondary-strong focus:ring-2 focus:ring-brand-soft cursor-pointer"
+          data-action="change->has-many#handleCheckboxChange"
+          data-has-many-target="checkbox"
+          <%= 'checked' if @current_values.include?(record) %>
+        >
+        <label for="<%= checkbox_id %>" class="ms-2 text-sm font-medium text-heading cursor-pointer">
+          <%= record_title(record) %>
+        </label>
+      </div>
+    </li>
+  <% end %>
+</ul>