[59845] Update Datepicker for automatic scheduling mode

app/components/_index.sass

@@ -5,6 +5,8 @@
 @import "work_packages/activities_tab/journals/item_component/details"
 @import "work_packages/activities_tab/journals/item_component/add_reactions"
 @import "work_packages/activities_tab/journals/item_component/reactions"
+@import "work_packages/date_picker/banner_component"
+@import "work_packages/date_picker/dialog_content_component"
 @import "shares/modal_body_component"
 @import "work_packages/reminder/modal_body_component"
 @import "shares/invite_user_form_component"

app/components/work_package_relations_tab/relation_component.rb

@@ -2,16 +2,18 @@ class WorkPackageRelationsTab::RelationComponent < ApplicationComponent
   include ApplicationHelper
   include OpPrimer::ComponentHelpers
 
-  attr_reader :work_package, :relation, :child
+  attr_reader :work_package, :relation, :child, :editable
 
   def initialize(work_package:,
                  relation:,
-                 child: nil)
+                 child: nil,
+                 editable: true)
     super()
 
     @work_package = work_package
     @relation = relation
     @child = child
+    @editable = editable
   end
 
   def related_work_package
@@ -32,6 +34,8 @@ def should_render_edit_option?
   end
 
   def should_render_action_menu?
+    return false unless editable
+
     if parent_child_relationship?
       allowed_to_manage_subtasks?
     else

app/components/work_packages/date_picker/banner_component.html.erb

@@ -0,0 +1,15 @@
+<%=
+  render(Primer::Alpha::Banner.new(description:,
+                                   classes: "wp-datepicker--banner_desktop rounded-top-2",
+                                   **banner_options)) do |banner|
+    banner.with_action_button(tag: :a, href: link, target: "_blank") { I18n.t("work_packages.datepicker_modal.show_relations") }
+    title
+  end
+%>
+<%=
+  render(Primer::Alpha::Banner.new(description: mobile_description,
+                                   classes: "wp-datepicker--banner_mobile rounded-top-2",
+                                   **banner_options)) do
+    mobile_title
+  end
+%>

app/components/work_packages/date_picker/banner_component.rb

@@ -0,0 +1,159 @@
+#-- 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.
+#++
+
+# frozen_string_literal: true
+
+module WorkPackages
+  module DatePicker
+    class BannerComponent < ApplicationComponent
+      def initialize(work_package:, manually_scheduled: true)
+        super
+
+        @work_package = work_package
+        @manually_scheduled = manually_scheduled
+      end
+
+      private
+
+      def scheme
+        @manually_scheduled ? :warning : :default
+      end
+
+      def link
+        gantt_index_path(
+          query_props: {
+            c: %w[id subject type status assignee project startDate dueDate],
+            tll: '{"left":"startDate","right":"subject","farRight":null}',
+            tzl: "auto",
+            t: "id:asc",
+            tv: true,
+            hi: true,
+            f: [
+              { "n" => "id", "o" => "=", "v" => all_relational_wp_ids }
+            ]
+          }.to_json.freeze
+        )
+      end
+
+      def title
+        if @manually_scheduled
+          I18n.t("work_packages.datepicker_modal.banner.title.manually_scheduled")
+        elsif children.any?
+          I18n.t("work_packages.datepicker_modal.banner.title.automatic_with_children")
+        elsif predecessor_relations.any?
+          I18n.t("work_packages.datepicker_modal.banner.title.automatic_with_predecessor")
+        end
+      end
+
+      def mobile_title
+        if @manually_scheduled
+          I18n.t("work_packages.datepicker_modal.banner.title.manual_mobile")
+        else
+          I18n.t("work_packages.datepicker_modal.banner.title.automatic_mobile")
+        end
+      end
+
+      def description
+        if @manually_scheduled
+          if children.any?
+            return I18n.t("work_packages.datepicker_modal.banner.description.manual_with_children")
+          elsif predecessor_relations.any?
+            if overlapping_predecessor?
+              return I18n.t("work_packages.datepicker_modal.banner.description.manual_overlap_with_predecessors")
+            elsif predecessor_with_large_gap?
+              return I18n.t("work_packages.datepicker_modal.banner.description.manual_gap_between_predecessors")
+            end
+          end
+        end
+
+        I18n.t("work_packages.datepicker_modal.banner.description.click_on_show_relations_to_open_gantt",
+               button_name: I18n.t("work_packages.datepicker_modal.show_relations"))
+      end
+
+      def mobile_description
+        text = if @manually_scheduled
+                 I18n.t("work_packages.datepicker_modal.banner.description.manual_mobile")
+               else
+                 I18n.t("work_packages.datepicker_modal.banner.description.automatic_mobile")
+               end
+
+        "#{text} #{render(Primer::Beta::Link.new(tag: :a, href: link, target: '_blank')) do
+          I18n.t('work_packages.datepicker_modal.show_relations')
+        end}".html_safe
+      end
+
+      def overlapping_predecessor?
+        predecessor_work_packages.any? { |wp| wp.due_date.after?(@work_package.start_date) }
+      end
+
+      def predecessor_with_large_gap?
+        sorted = predecessor_work_packages.sort_by(&:due_date)
+        sorted.last.due_date.before?(@work_package.start_date - 2)
+      end
+
+      def predecessor_relations
+        @predecessor_relations ||= @work_package.follows_relations
+      end
+
+      def predecessor_work_packages
+        @predecessor_work_packages ||= predecessor_relations
+                                         .includes(:to)
+                                         .map(&:to)
+      end
+
+      def children
+        @children ||= @work_package.children
+      end
+
+      def all_relational_wp_ids
+        @work_package
+          .relations
+          .pluck(:from_id, :to_id)
+          .flatten
+          .uniq
+      end
+
+      def test_selector
+        if scheme == :warning
+          "op-modal-banner-warning"
+        else
+          "op-modal-banner-info"
+        end
+      end
+
+      def banner_options
+        {
+          scheme:,
+          full: true,
+          icon: :info,
+          test_selector:
+        }
+      end
+    end
+  end
+end

app/components/work_packages/date_picker/banner_component.sass

@@ -0,0 +1,9 @@
+.wp-datepicker--banner
+
+  @media screen and (min-width: $breakpoint-sm)
+    &_mobile
+      display: none
+
+  @media screen and (max-width: $breakpoint-sm)
+    &_desktop
+      display: none

app/components/work_packages/date_picker/dialog_content_component.html.erb

@@ -0,0 +1,75 @@
+<%=
+  content_tag("turbo-frame", id: "wp-datepicker-dialog--content") do
+    component_wrapper(data: { "application-target": "dynamic",
+                              controller: "work-packages--date-picker--preview",
+                              test_selector: "op-datepicker-modal" },
+                      class: "wp-datepicker-dialog--content") do
+      component_collection do |collection|
+        if show_banner?
+          collection.with_component(WorkPackages::DatePicker::BannerComponent.new(work_package:, manually_scheduled: schedule_manually))
+        end
+
+        collection.with_component(Primer::Alpha::Dialog::Body.new(classes: "wp-datepicker-dialog--body")) do
+          render(Primer::Alpha::UnderlinePanels.new(label: I18n.t("work_packages.datepicker_modal.tabs.aria_label"),
+                                                    classes: "wp-datepicker-dialog--UnderlineNav")) do |component|
+            component.with_tab(selected: true, id: "wp-datepicker-dialog--content-tab--dates") do |tab|
+              tab.with_text { I18n.t("work_packages.datepicker_modal.tabs.dates") }
+              tab.with_panel  do
+                render(WorkPackages::DatePicker::FormContentComponent.new(form_id: DIALOG_FORM_ID,
+                                                                          show_date_form: content_editable?,
+                                                                          work_package:,
+                                                                          schedule_manually:,
+                                                                          focused_field:,
+                                                                          touched_field_map:))
+              end
+            end
+
+            additional_tabs.each do |tab|
+              component.with_tab(id: "wp-datepicker-dialog--content-tab--#{tab[:key]}") do |tab_content|
+                tab_content.with_text { I18n.t("work_packages.datepicker_modal.tabs.#{tab[:key]}") }
+                tab_content.with_counter(count: tab[:relations].count)
+                tab_content.with_panel do
+                  if tab[:relations].any?
+                    render(border_box_container(padding: :condensed)) do |box|
+                      tab[:relations].visible.each do |relation|
+                        box.with_row(scheme: :default) do
+                          render(WorkPackageRelationsTab::RelationComponent.new(work_package:,
+                                                                                relation: (relation unless tab[:is_child_relation?]),
+                                                                                child: (relation if tab[:is_child_relation?]),
+                                                                                editable: false))
+                        end
+                      end
+                    end
+                  else
+                    render(Primer::Beta::Blankslate.new(border: true)) do |component|
+                      component.with_visual_icon(icon: :book, size: :medium)
+                      component.with_heading(tag: :h2) { I18n.t("work_packages.datepicker_modal.tabs.blankslate.#{tab[:key]}.title") }
+                      component.with_description { I18n.t("work_packages.datepicker_modal.tabs.blankslate.#{tab[:key]}.description") }
+                    end
+                  end
+                end
+              end
+            end
+          end
+        end
+
+        collection.with_component(Primer::Alpha::Dialog::Footer.new) do
+          component_collection do |footer|
+            footer.with_component(Primer::ButtonComponent.new(data: { action: "work-packages--date-picker--preview#cancel" },
+                                                              test_selector: "op-datepicker-modal--action")) do
+              I18n.t("button_cancel")
+            end
+
+            footer.with_component(Primer::ButtonComponent.new(scheme: :primary,
+                                                              type: :submit,
+                                                              form: DIALOG_FORM_ID,
+                                                              test_selector: "op-datepicker-modal--action",
+                                                              disabled: !content_editable?)) do
+              I18n.t("button_save")
+            end
+          end
+        end
+      end
+    end
+  end
+%>

app/components/work_packages/date_picker/dialog_content_component.rb

@@ -0,0 +1,95 @@
+#-- 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.
+#++
+
+# frozen_string_literal: true
+
+module WorkPackages
+  module DatePicker
+    class DialogContentComponent < ApplicationComponent
+      include OpPrimer::ComponentHelpers
+      include OpTurbo::Streamable
+
+      DIALOG_FORM_ID = "datepicker-form"
+
+      attr_accessor :work_package, :schedule_manually, :focused_field, :touched_field_map
+
+      def initialize(work_package:, schedule_manually: true, focused_field: :start_date, touched_field_map: {})
+        super
+
+        @work_package = work_package
+        @schedule_manually = ActiveModel::Type::Boolean.new.cast(schedule_manually)
+        @focused_field = focused_field
+        @touched_field_map = touched_field_map
+      end
+
+      private
+
+      def precedes_relations
+        @precedes_relations ||= work_package.precedes_relations
+      end
+
+      def follows_relations
+        @follows_relations ||= work_package.follows_relations
+      end
+
+      def children
+        @children ||= work_package.children
+      end
+
+      def additional_tabs
+        [
+          {
+            key: "predecessors",
+            relations: follows_relations
+          },
+          {
+            key: "successors",
+            relations: precedes_relations
+          },
+          {
+            key: "children",
+            relations: children,
+            is_child_relation?: true
+          }
+        ]
+      end
+
+      def content_editable?
+        @schedule_manually || follows_relations.any? || children.any?
+      end
+
+      def show_banner?
+        @schedule_manually || has_relations?
+      end
+
+      def has_relations?
+        precedes_relations.any? || follows_relations.any? || children.any?
+      end
+    end
+  end
+end