From 11603cd822de931efb19b960a0da6d9b69dec72b Mon Sep 17 00:00:00 2001 From: Dombi Attila <83396+dombesz@users.noreply.github.com> Date: Fri, 24 Nov 2023 13:05:40 +0200 Subject: [PATCH] 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 | 1 + .../sidebar/details_component.html.erb | 22 +++++---- .../meetings/sidebar/details_component.sass | 11 +++++ .../sidebar/participants_component.html.erb | 13 +++--- .../sidebar/participants_component.sass | 8 ---- .../participants_form_component.html.erb | 45 ++++++++++++------- .../meetings/sidebar_component.html.erb | 4 +- 7 files changed, 61 insertions(+), 43 deletions(-) create mode 100644 modules/meeting/app/components/meetings/sidebar/details_component.sass diff --git a/modules/meeting/app/components/_index.sass b/modules/meeting/app/components/_index.sass index 3d93216cbba6..7655e791146e 100644 --- a/modules/meeting/app/components/_index.sass +++ b/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" diff --git a/modules/meeting/app/components/meetings/sidebar/details_component.html.erb b/modules/meeting/app/components/meetings/sidebar/details_component.html.erb index 04ed6501feb1..22af416eeab8 100644 --- a/modules/meeting/app/components/meetings/sidebar/details_component.html.erb +++ b/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 diff --git a/modules/meeting/app/components/meetings/sidebar/details_component.sass b/modules/meeting/app/components/meetings/sidebar/details_component.sass new file mode 100644 index 000000000000..b1df95165ae1 --- /dev/null +++ b/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 diff --git a/modules/meeting/app/components/meetings/sidebar/participants_component.html.erb b/modules/meeting/app/components/meetings/sidebar/participants_component.html.erb index 13482b57ae98..a7885364b8f9 100644 --- a/modules/meeting/app/components/meetings/sidebar/participants_component.html.erb +++ b/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 diff --git a/modules/meeting/app/components/meetings/sidebar/participants_component.sass b/modules/meeting/app/components/meetings/sidebar/participants_component.sass index 6aa2e1979201..611d21aa1940 100644 --- a/modules/meeting/app/components/meetings/sidebar/participants_component.sass +++ b/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 diff --git a/modules/meeting/app/components/meetings/sidebar/participants_form_component.html.erb b/modules/meeting/app/components/meetings/sidebar/participants_form_component.html.erb index dbd369a60c78..5d0c7075ddfd 100644 --- a/modules/meeting/app/components/meetings/sidebar/participants_form_component.html.erb +++ b/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: !@meeting.editable? # 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: !@meeting.editable? 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: !@meeting.editable? 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: !@meeting.editable? 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 diff --git a/modules/meeting/app/components/meetings/sidebar_component.html.erb b/modules/meeting/app/components/meetings/sidebar_component.html.erb index 55d99b345ab0..182e5b13787a 100644 --- a/modules/meeting/app/components/meetings/sidebar_component.html.erb +++ b/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 %>