Feature/70292 primerize custom field forms

app/components/custom_fields/custom_options/base_row_component.rb

@@ -0,0 +1,128 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module CustomFields
+  module CustomOptions
+    class BaseRowComponent < ::RowComponent
+      with_collection_parameter :row
+
+      alias :custom_option :model
+
+      delegate :form, :custom_field, to: :table
+
+      attr_reader :index, :templated
+
+      def initialize(row_counter:, templated: false, **)
+        @index = row_counter || "INDEX"
+        @templated = templated
+
+        super
+      end
+
+      def button_links
+        [
+          primer_action_button(
+            icon: :"move-to-top",
+            label: t(:label_sort_highest),
+            data: { action: "admin--custom-fields#moveRowToTheTop" }
+          ),
+
+          primer_action_button(
+            icon: :"arrow-up",
+            label: t(:label_sort_higher),
+            data: { action: "admin--custom-fields#moveRowUp" }
+          ),
+
+          primer_action_button(
+            icon: :"arrow-down",
+            label: t(:label_sort_lower),
+            data: { action: "admin--custom-fields#moveRowDown" }
+          ),
+
+          primer_action_button(
+            icon: :"move-to-bottom",
+            label: t(:label_sort_lowest),
+            data: { action: "admin--custom-fields#moveRowToTheBottom" }
+          ),
+
+          primer_action_button(
+            icon: :trash,
+            label: t(:button_delete),
+            data: {
+              action: "admin--custom-fields#removeOption",
+              turbo_method: :delete,
+              turbo_confirm: t(:"custom_fields.confirm_destroy_option")
+            }
+          )
+        ]
+      end
+
+      def row_css_class
+        "dragula-element custom-option-row"
+      end
+
+      def prefix
+        raise NotImplementedError
+      end
+
+      private
+
+      def primer_text_field(name:, **)
+        with_form do |f|
+          f.text_field(name:, visually_hide_label: true, **)
+        end
+      end
+
+      def primer_check_box(name:, **, &)
+        with_form do |f|
+          f.check_box(name:, visually_hide_label: true, **, &)
+        end
+      end
+
+      def primer_action_button(icon:, label:, **system_arguments)
+        render(
+          Primer::Beta::IconButton.new(
+            scheme: :invisible,
+            icon:,
+            tooltip_direction: :se,
+            aria: { label: },
+            **system_arguments
+          )
+        )
+      end
+
+      def with_form(&)
+        form.fields_for(prefix, custom_option) do |fields|
+          render_inline_form(fields, &)
+        end
+      end
+    end
+  end
+end

app/components/custom_fields/custom_options/row_component.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module CustomFields
+  module CustomOptions
+    class RowComponent < BaseRowComponent
+      def value
+        # safe_join([
+        #   hidden_field :id, disabled: true
+        # ])
+        primer_text_field(name: :value, label: CustomOption.human_attribute_name(:value))
+      end
+
+      def default_value
+        primer_check_box(
+          name: :default_value,
+          label: t(:label_default),
+          data: {
+            "admin--custom-fields-target": "customOptionDefaults",
+            action: "admin--custom-fields#uncheckOtherDefaults"
+          }
+        )
+      end
+
+      def prefix = :custom_options
+    end
+  end
+end

app/components/custom_fields/custom_options/table_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module CustomFields
+  module CustomOptions
+    class TableComponent < ::TableComponent
+      options :form
+      options :custom_field
+
+      columns :value, :default_value
+
+      def row_class
+        RowComponent
+      end
+
+      def headers
+        [
+          ["value", { caption: CustomOption.human_attribute_name(:value) }],
+          ["default_value", { caption: t(:label_default) }]
+        ]
+      end
+
+      def sortable?
+        false
+      end
+
+      def inline_create_link
+        render(
+          Primer::Beta::IconButton.new(
+            scheme: :invisible,
+            icon: :plus,
+            tooltip_direction: :e,
+            aria: { label: t(:button_add) },
+            data: { action: "admin--custom-fields#addOption" },
+            test_selector: "add-custom-option",
+            mt: 2
+          )
+        )
+      end
+    end
+  end
+end

app/components/custom_fields/custom_options_component.html.erb

@@ -0,0 +1,48 @@
+<%#-- copyright
+OpenProject is an open source project management software.
+Copyright (C) the OpenProject GmbH
+
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License version 3.
+
+OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+Copyright (C) 2006-2013 Jean-Philippe Lang
+Copyright (C) 2010-2013 the ChiliProject Team
+
+This program is free software; you can redistribute it and/or
+modify it under the terms of the GNU General Public License
+as published by the Free Software Foundation; either version 2
+of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program; if not, write to the Free Software
+Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+
+See COPYRIGHT and LICENSE files for more details.
+
+++#%>
+
+
+<% if custom_field.persisted? %>
+  <div class="form--toolbar">
+    <span class="form--toolbar-item">
+      <%= link_to t("custom_fields.reorder_alphabetical"),
+                  { action: :reorder_alphabetical },
+                  data: {
+                    turbo_method: :post,
+                    turbo_confirm: t("custom_fields.reorder_confirmation")
+                  } %>
+    </span>
+  </div>
+<% end %>
+
+<%= render(table) %>
+
+<table style="display:none" data-admin--custom-fields-target="template">
+  <%= render(template_row) %>
+</table>

app/components/custom_fields/custom_options_component.rb

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) the OpenProject GmbH
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License version 3.
+#
+# OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+# Copyright (C) 2006-2013 Jean-Philippe Lang
+# Copyright (C) 2010-2013 the ChiliProject Team
+#
+# This program is free software; you can redistribute it and/or
+# modify it under the terms of the GNU General Public License
+# as published by the Free Software Foundation; either version 2
+# of the License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU General Public License for more details.
+#
+# You should have received a copy of the GNU General Public License
+# along with this program; if not, write to the Free Software
+# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+#
+# See COPYRIGHT and LICENSE files for more details.
+#++
+
+module CustomFields
+  class CustomOptionsComponent < ApplicationComponent
+    extend Dry::Initializer
+
+    option :form
+    option :custom_field
+
+    attr_reader :custom_options, :template_object
+
+    def initialize(...)
+      super
+
+      @custom_options = @custom_field.custom_options
+      @template_object = @custom_options.build
+    end
+
+    private
+
+    def table
+      @table ||= CustomOptions::TableComponent.new(
+        rows: custom_options,
+        form:,
+        custom_field:,
+        table_arguments: {
+          id: "custom_options",
+          data: { admin__custom_fields_target: "table" }
+        }
+      )
+    end
+
+    def template_row
+      CustomOptions::RowComponent.new(row: template_object, row_counter: nil, table:, templated: true)
+    end
+  end
+end

app/components/table_component.html.erb

@@ -29,7 +29,7 @@ See COPYRIGHT and LICENSE files for more details.
 
 <div class="generic-table--container <%= container_class %>" data-test-selector="<%= test_selector %>" id="<%= container_id %>">
   <div class="generic-table--results-container">
-    <table class="generic-table" data-controller="table-highlighting">
+    <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
       <colgroup>
         <% headers.each do |_name, _options| %>
           <col>
@@ -67,7 +67,7 @@ See COPYRIGHT and LICENSE files for more details.
         <% end %>
         <%= render_collection rows %>
       </tbody>
-    </table>
+    <% end %>
     <% if inline_create_link %>
       <div class="wp-inline-create-button">
         <%= inline_create_link %>