[#51015] Mobile, the participant section should move to details section

modules/meeting/app/components/_index.sass

@@ -1,3 +1,5 @@
 @import "./meeting_agenda_items/item_component/show_component.sass"
 @import "./meeting_agenda_items/form_component.sass"
 @import "./meetings/sidebar/state_component.sass"
+@import "./meetings/sidebar/participants_component.sass"
+@import "./meetings/sidebar/details_component.sass"

modules/meeting/app/components/meetings/sidebar/details_component.html.erb

@@ -85,6 +85,34 @@
               end
             end
           end
+
+          details.with_row(mt: 2, classes: 'meeting-detail-participants') do
+            render_meeting_attribute_row(:people) do
+              flex_layout do |duration|
+                duration.with_column(mr: 2) do
+                  render(Primer::Beta::Text.new) do
+                    Meeting.human_attribute_name(
+                      :participant,
+                      count: @meeting.invited_or_attended_participants.count
+                    )
+                  end
+                end
+
+                duration.with_column(mr: 2) do
+                  render(OpTurbo::OpPrimer::AsyncDialogComponent.new(
+                    id: "edit-participants-dialog",
+                    src: participants_dialog_meeting_path(@meeting),
+                    size: :medium_portrait,
+                    title: Meeting.human_attribute_name(:participants),
+                    button_text: t("label_meeting_show_all_participants"),
+                    button_attributes: {
+                      scheme: :link,
+                      font_weight: :normal
+                    }))
+                end
+              end
+            end
+          end
         end
       end
     end

modules/meeting/app/components/meetings/sidebar/details_component.sass

@@ -0,0 +1,11 @@
+.meeting-detail-participants
+  visibility: collapse
+  // The modal is rendered inside the mobile participant list element and it can be
+  // triggered from both mobile and desktop views. The mobile participant list is hidden
+  // when the desktop view is active, but the modal inside it should still be visible.
+  .Overlay-backdrop--center
+    visibility: visible
+
+@media screen and (max-width: $breakpoint-sm)
+  .meeting-detail-participants
+    visibility: visible

modules/meeting/app/components/meetings/sidebar/participants_component.html.erb

@@ -17,13 +17,12 @@
 
           if @meeting.editable?
             heading.with_column do
-              render(Primer::Alpha::Dialog.new(
-                id: "edit-participants-dialog", title: Meeting.human_attribute_name(:participants),
-                size: :medium_portrait
-              )) do |dialog|
-                dialog.with_show_button(icon: :gear, 'aria-label': t("label_meeting_manage_participants"), scheme: :invisible)
-                render(Meetings::Sidebar::ParticipantsFormComponent.new(meeting: @meeting))
-              end
+              render(Primer::Beta::IconButton.new(
+                icon: :gear,
+                scheme: :invisible,
+                'aria-label': t("label_meeting_manage_participants"),
+                data: { 'show-dialog-id': "edit-participants-dialog" }
+              ))
             end
           end
         end

modules/meeting/app/components/meetings/sidebar/participants_component.sass

@@ -0,0 +1,6 @@
+@import 'helpers'
+
+@media screen and (max-width: $breakpoint-sm)
+  #meetings-sidebar-component
+    .BorderGrid-row:nth-child(3)
+      display: none

modules/meeting/app/components/meetings/sidebar/participants_form_component.html.erb

@@ -1,86 +1,100 @@
 <%=
-  component_wrapper do
-    primer_form_with(
-      model: @meeting,
-      method: :put,
-      url: update_participants_meeting_path(@meeting)
-    ) do |f|
-      component_collection do |collection|
-        collection.with_component(Primer::Alpha::Dialog::Body.new(style: "max-height: 460px;", my: 3)) do
-          flex_layout(mt: 3) do |form_container|
-            form_container.with_row do
-              flex_layout(justify_content: :flex_end) do |header|
-                header.with_column(style: "width: 90px;", text_align: :center) do
-                  render(Primer::Beta::Text.new(font_weight: :emphasized)) { t("description_invite").capitalize }
-                end
+  content_tag("turbo-frame", id: "edit-participants-dialog-frame") do
+    component_wrapper do
+      primer_form_with(
+        model: @meeting,
+        method: :put,
+        url: update_participants_meeting_path(@meeting)
+      ) do |f|
+        component_collection do |collection|
+          collection.with_component(Primer::Alpha::Dialog::Body.new(style: "max-height: 460px;", my: 3)) do
+            flex_layout(mt: 3) do |form_container|
+              form_container.with_row do
+                flex_layout(justify_content: :flex_end) do |header|
+                  header.with_column(style: "width: 90px;", text_align: :center) do
+                    render(Primer::Beta::Text.new(font_weight: :emphasized)) { t("description_invite").capitalize }
+                  end
 
-                header.with_column(style: "width: 90px;", text_align: :center) do
-                  render(Primer::Beta::Text.new(font_weight: :emphasized)) { t("description_attended").capitalize }
+                  header.with_column(style: "width: 90px;", text_align: :center) do
+                    render(Primer::Beta::Text.new(font_weight: :emphasized)) { t("description_attended").capitalize }
+                  end
                 end
               end
-            end
 
-            form_container.with_row do
-              flex_layout(my: 3) do |form_content|
-                @meeting.all_changeable_participants.sort.each do |user|
-                  form_content.with_row do
-                    hidden_field_tag "meeting[participants_attributes][][user_id]", user.id
-                  end
-                  form_content.with_row(mb: 2, pb: 1, border: :bottom) do
-                    if @meeting.participants.present? && participant = @meeting.participants.detect { |p| p.user_id == user.id }
-                      flex_layout do |existing_participant_container|
-                        existing_participant_container.with_row do
-                          hidden_field_tag "meeting[participants_attributes][][id]", participant.id
-                        end
+              form_container.with_row do
+                flex_layout(my: 3) do |form_content|
+                  @meeting.all_changeable_participants.sort.each do |user|
+                    form_content.with_row do
+                      hidden_field_tag "meeting[participants_attributes][][user_id]", user.id
+                    end
+                    form_content.with_row(mb: 2, pb: 1, border: :bottom) do
+                      if @meeting.participants.present? && participant = @meeting.participants.detect { |p| p.user_id == user.id }
+                        flex_layout do |existing_participant_container|
+                          existing_participant_container.with_row do
+                            hidden_field_tag "meeting[participants_attributes][][id]", participant.id
+                          end
 
-                        existing_participant_container.with_row do
-                          flex_layout(align_items: :center) do |existing_participant|
-                            existing_participant.with_column(flex: 1, classes: 'ellipsis') do
-                              render(Users::AvatarComponent.new(
-                                user: participant.user,
-                                classes: 'op-principal_flex'
-                              ))
-                            end
-                            existing_participant.with_column(style: "width: 90px;", text_align: :center) do
-                              styled_check_box_tag "meeting[participants_attributes][][invited]", 1, participant.invited?,
-                                                   id: "checkbox_invited_#{participant.user.id}"
-                              # Primer checkboxes currently not working in this context as they render an additional hidden input tag
-                              # messing up the nested attributes mapping when posting the data to the server
-                              #
-                              # render(Primer::Alpha::CheckBox.new(
-                              #          name: "meeting[participants_attributes][][invited]",
-                              #          checked: participant.invited?,
-                              #          id: "checkbox_invited_#{participant.user.id}",
-                              #          visually_hide_label: true,
-                              #          label: "Invited",
-                              #          scheme: :boolean,
-                              #          unchecked_value: ""
-                              #        ))
-                            end
-                            existing_participant.with_column(style: "width: 90px;", text_align: :center) do
-                              styled_check_box_tag "meeting[participants_attributes][][attended]", 1, participant.attended?,
-                                                   id: "checkbox_attended_#{participant.user.id}"
+                          existing_participant_container.with_row do
+                            flex_layout(align_items: :center) do |existing_participant|
+                              existing_participant.with_column(flex: 1, classes: 'ellipsis') do
+                                render(Users::AvatarComponent.new(
+                                  user: participant.user,
+                                  classes: 'op-principal_flex'
+                                ))
+                              end
+                              existing_participant.with_column(style: "width: 90px;", text_align: :center) do
+                                styled_check_box_tag "meeting[participants_attributes][][invited]",
+                                                     value = 1,
+                                                     checked = participant.invited?,
+                                                     id: "checkbox_invited_#{participant.user.id}",
+                                                     disabled: [email protected]?
+                                # Primer checkboxes currently not working in this context as they render an additional hidden input tag
+                                # messing up the nested attributes mapping when posting the data to the server
+                                #
+                                # render(Primer::Alpha::CheckBox.new(
+                                #          name: "meeting[participants_attributes][][invited]",
+                                #          checked: participant.invited?,
+                                #          id: "checkbox_invited_#{participant.user.id}",
+                                #          visually_hide_label: true,
+                                #          label: "Invited",
+                                #          scheme: :boolean,
+                                #          unchecked_value: ""
+                                #        ))
+                              end
+                              existing_participant.with_column(style: "width: 90px;", text_align: :center) do
+                                styled_check_box_tag "meeting[participants_attributes][][attended]",
+                                                     value = 1,
+                                                     checked = participant.attended?,
+                                                     id: "checkbox_attended_#{participant.user.id}",
+                                                     disabled: [email protected]?
+                              end
                             end
                           end
                         end
-                      end
-                    else
-                      flex_layout(align_items: :center) do |new_participant|
-                        new_participant.with_column(flex: 1, classes: 'ellipsis') do
-                          render(Users::AvatarComponent.new(
-                            user:,
-                            classes: 'op-principal_flex'
-                          ))
-                        end
+                      else
+                        flex_layout(align_items: :center) do |new_participant|
+                          new_participant.with_column(flex: 1, classes: 'ellipsis') do
+                            render(Users::AvatarComponent.new(
+                              user:,
+                              classes: 'op-principal_flex'
+                            ))
+                          end
 
-                        new_participant.with_column(style: "width: 90px;", text_align: :center) do
-                          styled_check_box_tag "meeting[participants_attributes][][invited]", value = "1", checked = false,
-                                               id: "checkbox_invited_#{user.id}"
-                        end
+                          new_participant.with_column(style: "width: 90px;", text_align: :center) do
+                            styled_check_box_tag "meeting[participants_attributes][][invited]",
+                                                 value = "1",
+                                                 checked = false,
+                                                 id: "checkbox_invited_#{user.id}",
+                                                 disabled: [email protected]?
+                          end
 
-                        new_participant.with_column(style: "width: 90px;", text_align: :center) do
-                          styled_check_box_tag "meeting[participants_attributes][][attended]", value = "1", checked = false,
-                                               id: "checkbox_attended_#{user.id}"
+                          new_participant.with_column(style: "width: 90px;", text_align: :center) do
+                            styled_check_box_tag "meeting[participants_attributes][][attended]",
+                                                 value = "1",
+                                                 checked = false,
+                                                 id: "checkbox_attended_#{user.id}",
+                                                 disabled: [email protected]?
+                          end
                         end
                       end
                     end
@@ -89,16 +103,17 @@
               end
             end
           end
-        end
 
-        collection.with_component(Primer::Alpha::Dialog::Footer.new(show_divider: true)) do
-          component_collection do |footer|
-            footer.with_component(Primer::ButtonComponent.new(data: { 'close-dialog-id': "edit-participants-dialog" })) do
-              t("button_cancel")
-            end
-
-            footer.with_component(Primer::ButtonComponent.new(scheme: :primary, type: :submit)) do
-              t("button_save")
+          if @meeting.editable?
+            collection.with_component(Primer::Alpha::Dialog::Footer.new(show_divider: true)) do
+              component_collection do |footer|
+                footer.with_component(Primer::ButtonComponent.new(data: { 'close-dialog-id': "edit-participants-dialog" })) do
+                  t("button_cancel")
+                end
+                footer.with_component(Primer::ButtonComponent.new(scheme: :primary, type: :submit)) do
+                  t("button_save")
+                end
+              end
             end
           end
         end

modules/meeting/app/components/meetings/sidebar/participants_form_component.rb

@@ -40,7 +40,7 @@ def initialize(meeting:)
     end
 
     def render?
-      User.current.allowed_in_project?(:edit_meetings, @meeting.project)
+      User.current.allowed_in_project?(:view_meetings, @meeting.project)
     end
   end
 end

modules/meeting/app/components/meetings/sidebar/state_component.sass

@@ -4,4 +4,4 @@
   .op-meeting-sidebar-state
     flex-direction: row !important
     justify-content: space-between
-    align-items: center
+    align-items: center

modules/meeting/app/controllers/meetings_controller.rb

@@ -141,13 +141,18 @@ def update
     end
   end
 
+  def participants_dialog
+    render(Meetings::Sidebar::ParticipantsFormComponent.new(meeting: @meeting), layout: false)
+  end
+
   def update_participants
     @meeting.participants_attributes = @converted_params.delete(:participants_attributes)
     @meeting.save
 
     if @meeting.errors.any?
       update_sidebar_participants_form_component_via_turbo_stream
     else
+      update_sidebar_details_component_via_turbo_stream
       update_sidebar_participants_component_via_turbo_stream
     end
 

modules/meeting/config/locales/en.yml

@@ -44,6 +44,9 @@ en:
         duration: "Duration"
         notes: "Notes"
         participants: "Participants"
+        participant:
+          one: "1 Participant"
+          other: "%{count} Participants"
         participants_attended: "Attendees"
         participants_invited: "Invitees"
         project: "Project"
@@ -189,6 +192,7 @@ en:
   label_meeting_manage_participants: "Manage participants"
   label_meeting_no_participants: "No participants"
   label_meeting_show_hide_participants: "Show/hide %{count} more"
+  label_meeting_show_all_participants: "Show all"
   label_meeting_add_participants: "Add participants"
 
   text_meeting_not_editable_anymore: "This meeting is not editable anymore."

modules/meeting/config/routes.rb

@@ -53,6 +53,7 @@
       get :download_ics
       put :update_title
       put :update_details
+      get :participants_dialog
       put :update_participants
       put :change_state
       post :notify

modules/meeting/lib/open_project/meeting/engine.rb

@@ -40,7 +40,7 @@ class Engine < ::Rails::Engine
              bundled: true do
       project_module :meetings do
         permission :view_meetings,
-                   { meetings: %i[index show download_ics],
+                   { meetings: %i[index show download_ics participants_dialog],
                      meeting_agendas: %i[history show diff],
                      meeting_minutes: %i[history show diff],
                      work_package_meetings_tab: %i[index count] },