Display the datepicker input fields on the life cycle edit form

opf · Dec 3, 2024 · 158eeed · 158eeed
1 parent db765ac
commit 158eeed
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 10 deletions.
diff --git a/app/forms/projects/life_cycles/form.rb b/app/forms/projects/life_cycles/form.rb
@@ -44,17 +44,52 @@ def life_cycle_input(form)
       end
     end
 
+    def invalid?
+      model.errors.any?
+    end
+
+    def validation_message
+      model.errors.full_messages.join(", ") if invalid?
+    end
+
+    def qa_field_name
+      "life-cycle-step-#{model.id}"
+    end
+
+    def base_input_attributes
+      {
+        label: "#{icon} #{text}".html_safe, # rubocop:disable Rails/OutputSafety
+        leading_visual: { icon: :calendar },
+        required: true,
+        invalid: invalid?,
+        validation_message:,
+        datepicker_options: { inDialog: true },
+        wrapper_data_attributes: {
+          "qa-field-name": qa_field_name
+        }
+      }
+    end
+
     def single_value_life_cycle_input(form)
-      form.text_field name: :date, label: "#{icon} #{text}".html_safe, type: :date # rubocop:disable Rails/OutputSafety
+      input_attributes = base_input_attributes.merge(
+        name: :start_date,
+        value: model.start_date
+      )
+
+      form.single_date_picker **input_attributes
     end
 
     def multi_value_life_cycle_input(form)
-      helpers.angular_component_tag "opce-range-date-picker",
-                                    inputs: {
-                                      name: "my-datepicker",
-                                      value: model.start_date
-                                    }
-      form.text_field name: :start_date, label: "#{icon} #{text}".html_safe, type: :date # rubocop:disable Rails/OutputSafety
+      value = [
+        helpers.format_date(model.start_date),
+        helpers.format_date(model.end_date)
+      ].compact.join(" - ")
+
+      input_attributes = base_input_attributes.merge(
+        name: :start_date,
+        value:
+      )
+      form.range_date_picker **input_attributes
     end
 
     def text

diff --git a/modules/overviews/app/components/project_life_cycles/sections/edit_component.html.erb b/modules/overviews/app/components/project_life_cycles/sections/edit_component.html.erb
@@ -9,8 +9,9 @@
       url: update_project_life_cycles_path(project_id: model.id),
     ) do |f|
       render(Primer::Forms::SpacingWrapper.new) do
-        f.fields_for(:life_cycle_steps, life_cycle_steps) do |lcf|
-          render(Projects::LifeCycles::Form.new(lcf))
+        f.fields_for(:life_cycle_steps, life_cycle_steps) do |life_cycle_form|
+          render(Projects::LifeCycles::Form.new(life_cycle_form)
+        )
         end
       end
     end

diff --git a/modules/overviews/app/components/project_life_cycles/sections/edit_dialog_component.html.erb b/modules/overviews/app/components/project_life_cycles/sections/edit_dialog_component.html.erb
@@ -1,6 +1,6 @@
 <%=
   render(Primer::Alpha::Dialog.new(title: t("label_life_cycle_plural"),
-                                   size: :medium_portrait,
+                                   size: :large,
                                    id: "edit-project-life-cycles-dialog")) do |d|
     d.with_header(variant: :large)
     d.with_body(classes: "Overlay-body_autocomplete_height") do