Re-use the participant editing form for the mobile view, also disable…

… editing when the meeting is not editable

modules/meeting/app/components/_index.sass

@@ -2,3 +2,4 @@
 @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

@@ -101,15 +101,19 @@
                   end
                 end
 
-                if @meeting.editable?
-                  duration.with_column(mr: 2) do
-                    render(Primer::Beta::Button.new(
-                      font_weight: :normal,
-                      scheme: :link,
-                      data: { 'show-dialog-id': "edit-participants-dialog" }
-                    )) do |link|
-                      t("label_meeting_show_all_participants")
-                    end
+                duration.with_column(mr: 2) do
+                  render(Primer::Alpha::Dialog.new(
+                    id: "edit-participants-dialog", title: Meeting.human_attribute_name(:participants),
+                    size: :medium_portrait
+                  )) do |dialog|
+                    render(Meetings::Sidebar::ParticipantsFormComponent.new(meeting: @meeting))
+                  end+
+                  render(Primer::Beta::Button.new(
+                    font_weight: :normal,
+                    scheme: :link,
+                    data: { 'show-dialog-id': "edit-participants-dialog" }
+                  )) do |link|
+                    t("label_meeting_show_all_participants")
                   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

@@ -1,14 +1,6 @@
 @import 'helpers'
 
-.meeting-detail-participants
-  visibility: collapse
-
 @media screen and (max-width: $breakpoint-sm)
   #meetings-sidebar-component
     .BorderGrid-row:nth-child(3)
       visibility: collapse
-      #participants-component
-        .Overlay-backdrop--center
-          visibility: visible
-  .meeting-detail-participants
-    visibility: visible

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

@@ -42,8 +42,11 @@
                               ))
                             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}"
+                              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
                               #
@@ -58,8 +61,11 @@
                               #        ))
                             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}"
+                              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
@@ -74,13 +80,19 @@
                         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}"
+                          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}"
+                          styled_check_box_tag "meeting[participants_attributes][][attended]",
+                                               value = "1",
+                                               checked = false,
+                                               id: "checkbox_attended_#{user.id}",
+                                               disabled: [email protected]?
                         end
                       end
                     end
@@ -91,14 +103,15 @@
           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

modules/meeting/app/components/meetings/sidebar_component.html.erb

@@ -3,9 +3,7 @@
     render(Primer::OpenProject::BorderGrid.new) do |border_grid|
       border_grid.with_row { render(Meetings::Sidebar::DetailsComponent.new(meeting: @meeting)) }
       border_grid.with_row { render(Meetings::Sidebar::StateComponent.new(meeting: @meeting)) }
-      border_grid.with_row(id: 'participants-component') do
-       render(Meetings::Sidebar::ParticipantsComponent.new(meeting: @meeting))
-     end
+      border_grid.with_row { render(Meetings::Sidebar::ParticipantsComponent.new(meeting: @meeting)) }
     end
   end
 %>