From f6cba707941fd2aaa63be5f263b3c381799a7538 Mon Sep 17 00:00:00 2001 From: Ronak Gupta Date: Sat, 29 Jun 2024 11:40:54 +0530 Subject: [PATCH 01/21] moved three dots icon from component to html.erb Only one dropdown button were using three dots icons hence it is better to put it on block of component from html.erb. --- app/components/dropdown_menu_component.html.erb | 5 ----- app/views/casa_org/_contact_topics.html.erb | 9 ++++++++- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/app/components/dropdown_menu_component.html.erb b/app/components/dropdown_menu_component.html.erb index d8d3f1a1c2..06873dbb94 100644 --- a/app/components/dropdown_menu_component.html.erb +++ b/app/components/dropdown_menu_component.html.erb @@ -2,11 +2,6 @@ diff --git a/app/views/casa_org/_contact_topics.html.erb b/app/views/casa_org/_contact_topics.html.erb index 747435379f..a25b86b2ea 100644 --- a/app/views/casa_org/_contact_topics.html.erb +++ b/app/views/casa_org/_contact_topics.html.erb @@ -37,7 +37,14 @@ <%= contact_topic.active ? "Yes" : "No" %> - <%= render(DropdownMenuComponent.new(menu_title: "Actions Menu", hide_label: true)) do %> + <%= render(DropdownMenuComponent.new(menu_title: "Actions Menu", hide_label: true)) do |component| %> + <% component.with_icon do %> + + <%= "Actions Menu" %> + + + <% end %> +
  • <%= link_to "Edit", edit_contact_topic_path(contact_topic), class: "dropdown-item" %>
  • <%= render(Modal::OpenLinkComponent.new(text: "Delete", target: id, klass: "dropdown-item")) %>
    • <% end %> From 5db3caf649de8bddf6c55fe11c1b98b6d49de597 Mon Sep 17 00:00:00 2001 From: Ronak Gupta Date: Sat, 29 Jun 2024 11:50:14 +0530 Subject: [PATCH 02/21] updated: button css classes added to dropdown as variable display: flex and align-items: center added to style to align items of button horizontally. button_class variable added to dropdown component to dynamically change css properties of button like background color --- app/components/dropdown_menu_component.html.erb | 2 +- app/components/dropdown_menu_component.rb | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/dropdown_menu_component.html.erb b/app/components/dropdown_menu_component.html.erb index 06873dbb94..bc6c00aa11 100644 --- a/app/components/dropdown_menu_component.html.erb +++ b/app/components/dropdown_menu_component.html.erb @@ -1,5 +1,5 @@
    - -
    + <%= render(DropdownMenuComponent.new(menu_title: "Filter Status", klass: "pull-left mx-2 supervisor-filters", button_klass: "btn-sm main-btn dark-btn", icon_name: "funnel")) do %>
    <%= check_box_tag "status_option_active", "true", true, class: "active form-check-input", @@ -25,8 +22,7 @@ data: { value: "false" } %> <%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %>
    -
    -
    + <% end %> <% if policy(Supervisor).create? %> From 130bbc84ea05b9a307b6a1de4f05c9e8d509aba1 Mon Sep 17 00:00:00 2001 From: Ronak Gupta Date: Sat, 29 Jun 2024 12:04:53 +0530 Subject: [PATCH 04/21] action menu dropdown button replaced with component --- app/views/volunteers/index.html.erb | 31 ++++++++++++----------------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/app/views/volunteers/index.html.erb b/app/views/volunteers/index.html.erb index b90f53baa8..5af8ab140e 100644 --- a/app/views/volunteers/index.html.erb +++ b/app/views/volunteers/index.html.erb @@ -54,25 +54,20 @@ <% end %> -
    - -
    -
    - <%= check_box_tag "status_option_active", "true", true, - class: "form-check-input", - data: { value: "true" } %> - <%= label_tag "status_option_active", "Active", class: "form-check-label" %> -
    -
    - <%= check_box_tag "status_option_inactive", "false", false, - class: "form-check-input", - data: { value: "false" } %> - <%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %> -
    + <%= render(DropdownMenuComponent.new(menu_title: "Actions Menu", klass: "pull-left mx-2 my-1")) do %> +
    + <%= check_box_tag "status_option_active", "true", true, + class: "form-check-input", + data: { value: "true" } %> + <%= label_tag "status_option_active", "Active", class: "form-check-label" %>
    -
    +
    + <%= check_box_tag "status_option_inactive", "false", false, + class: "form-check-input", + data: { value: "false" } %> + <%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %> +
    + <% end %>
    -
    + <%= render(DropdownMenuComponent.new(menu_title: "Supervisor", klass: "pull-left mx-2 my-1 supervisor-options")) do %> +
    + <%= check_box_tag "supervisor-option-none", "", true, + class: "form-check-input", + data: { value: "" }, + id: "unassigned-vol-filter" %> + <%= label_tag "supervisor-option-none", "No supervisor assignment", class: "form-check-label", for: "unassigned-vol-filter" %> +
    + <% current_organization.supervisors.where(active: true).each do |supervisor| %>
    - <%= check_box_tag "supervisor-option-none", "", true, + <% option_for_name = supervisor.display_name.downcase.gsub(/ /, '_').gsub(/[^a-z_]+/, '') -%> + <% tag_name = "supervisor-option-#{option_for_name}" -%> + <%= check_box_tag tag_name, supervisor.id, + policy(User).edit_name?(supervisor), # checked? class: "form-check-input", - data: { value: "" }, - id: "unassigned-vol-filter" %> - <%= label_tag "supervisor-option-none", "No supervisor assignment", class: "form-check-label", for: "unassigned-vol-filter" %> + data: { value: supervisor.id } %> + <%= label_tag tag_name, supervisor.display_name, class: "form-check-label" %>
    - <% current_organization.supervisors.where(active: true).each do |supervisor| %> -
    - <% option_for_name = supervisor.display_name.downcase.gsub(/ /, '_').gsub(/[^a-z_]+/, '') -%> - <% tag_name = "supervisor-option-#{option_for_name}" -%> - <%= check_box_tag tag_name, supervisor.id, - policy(User).edit_name?(supervisor), # checked? - class: "form-check-input", - data: { value: supervisor.id } %> - <%= label_tag tag_name, supervisor.display_name, class: "form-check-label" %> -
    - <% end %> -
    -
    + <% end %> + <% end %> <%= render(DropdownMenuComponent.new(menu_title: "Actions Menu", klass: "pull-left mx-2 my-1 status-options")) do %>
    <%= check_box_tag "status_option_active", "true", true, From 4b85dae02840da9c685d9253943d3ce3858d7068 Mon Sep 17 00:00:00 2001 From: Ronak Gupta Date: Sat, 29 Jun 2024 18:09:56 +0530 Subject: [PATCH 07/21] assigned to transition aged youth dropdown button replaced with dropdown component --- app/views/volunteers/index.html.erb | 31 ++++++++++++----------------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/app/views/volunteers/index.html.erb b/app/views/volunteers/index.html.erb index aa1aa6756e..0e11e415d4 100644 --- a/app/views/volunteers/index.html.erb +++ b/app/views/volunteers/index.html.erb @@ -64,25 +64,20 @@
    <% end %> -
    - -
    -
    - <%= check_box_tag "transition_youth_option_yes", "true", true, - class: "form-check-input", - data: { value: "true" } %> - <%= label_tag "transition_youth_option_yes", "Yes", class: "form-check-label" %> -
    -
    - <%= check_box_tag "transition_youth_option_no", "false", true, - class: "form-check-input", - data: { value: "false" } %> - <%= label_tag "transition_youth_option_no", "No", class: "form-check-label" %> -
    + <%= render(DropdownMenuComponent.new(menu_title: "Assigned to Transition Aged Youth", klass: "pull-left mx-2 my-1 transition-youth-options")) do %> +
    + <%= check_box_tag "transition_youth_option_yes", "true", true, + class: "form-check-input", + data: { value: "true" } %> + <%= label_tag "transition_youth_option_yes", "Yes", class: "form-check-label" %>
    -
    +
    + <%= check_box_tag "transition_youth_option_no", "false", true, + class: "form-check-input", + data: { value: "false" } %> + <%= label_tag "transition_youth_option_no", "No", class: "form-check-label" %> +
    + <% end %>
    <% end %> -
    - -
    -
    - <%= check_box_tag "extra_language_option_yes", "true", true, - class: "form-check-input", - data: { value: "true" } %> - <%= label_tag "extra_language_option_yes", "Yes", class: "form-check-label" %> -
    -
    - <%= check_box_tag "extra_language_option_no", "false", true, - class: "form-check-input", - data: { value: "false" } %> - <%= label_tag "extra_language_option_no", "No", class: "form-check-label" %> -
    + <%= render(DropdownMenuComponent.new(menu_title: "Has Extra Languages", klass: "pull-left mx-2 my-1 extra-language-options")) do %> +
    + <%= check_box_tag "extra_language_option_yes", "true", true, + class: "form-check-input", + data: { value: "true" } %> + <%= label_tag "extra_language_option_yes", "Yes", class: "form-check-label" %>
    -
    +
    + <%= check_box_tag "extra_language_option_no", "false", true, + class: "form-check-input", + data: { value: "false" } %> + <%= label_tag "extra_language_option_no", "No", class: "form-check-label" %> +
    + <% end %>
    From 957dc23147c665e93972c549b60b2d445a7d104a Mon Sep 17 00:00:00 2001 From: Ronak Gupta Date: Sun, 30 Jun 2024 01:44:08 +0530 Subject: [PATCH 09/21] minor fix --- app/views/volunteers/index.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/views/volunteers/index.html.erb b/app/views/volunteers/index.html.erb index d36ed9f48e..9f1b0d3574 100644 --- a/app/views/volunteers/index.html.erb +++ b/app/views/volunteers/index.html.erb @@ -49,7 +49,7 @@ <% end %> <% end %> - <%= render(DropdownMenuComponent.new(menu_title: "Actions Menu", klass: "pull-left mx-2 my-1 status-options")) do %> + <%= render(DropdownMenuComponent.new(menu_title: "Status", klass: "pull-left mx-2 my-1 status-options")) do %>
    <%= check_box_tag "status_option_active", "true", true, class: "form-check-input", From c9c5124ef45aa9ceb301fdcaf86bfb6043c46d4f Mon Sep 17 00:00:00 2001 From: Ronak Gupta Date: Sun, 30 Jun 2024 01:48:51 +0530 Subject: [PATCH 10/21] status dropdown button replaced with component in casa case --- app/views/casa_cases/_filter.html.erb | 31 +++++++++++---------------- 1 file changed, 13 insertions(+), 18 deletions(-) diff --git a/app/views/casa_cases/_filter.html.erb b/app/views/casa_cases/_filter.html.erb index aac24684da..7f47a72bc8 100644 --- a/app/views/casa_cases/_filter.html.erb +++ b/app/views/casa_cases/_filter.html.erb @@ -2,25 +2,20 @@

    Filter by:

    -
    - -
    -
    - <%= check_box_tag "status_option_active", "Active", true, - class: "form-check-input", - data: { value: "Active" } %> - <%= label_tag "status_option_active", "Active", class: "form-check-label" %> -
    -
    - <%= check_box_tag "status_option_inactive", "Inactive", false, - class: "form-check-input", - data: { value: "Inactive" } %> - <%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %> -
    + <%= render(DropdownMenuComponent.new(menu_title: "Status", klass: "pull-left mx-2 my-1 status-options")) do %> +
    + <%= check_box_tag "status_option_active", "Active", true, + class: "form-check-input", + data: { value: "Active" } %> + <%= label_tag "status_option_active", "Active", class: "form-check-label" %>
    -
    +
    + <%= check_box_tag "status_option_inactive", "Inactive", false, + class: "form-check-input", + data: { value: "Inactive" } %> + <%= label_tag "status_option_inactive", "Inactive", class: "form-check-label" %> +
    + <% end %>
    <% end %> -
    - -
    -
    - <%= check_box_tag "assigned_to_volunteer_option_yes", "Yes", true, - class: "form-check-input", - data: { value: "Yes" } %> - <%= label_tag "assigned_to_volunteer_option_yes", "Yes", class: "form-check-label" %> -
    -
    - <%= check_box_tag "assigned_to_volunteer_option_no", "No", true, - class: "form-check-input", - data: { value: "No" } %> - <%= label_tag "assigned_to_volunteer_option_no", "No", class: "form-check-label" %> -
    + <%= render(DropdownMenuComponent.new(menu_title: "Assigned to Volunteer", klass: "pull-left mx-2 my-1 assigned-to-volunteer-options")) do %> +
    + <%= check_box_tag "assigned_to_volunteer_option_yes", "Yes", true, + class: "form-check-input", + data: { value: "Yes" } %> + <%= label_tag "assigned_to_volunteer_option_yes", "Yes", class: "form-check-label" %>
    -
    +
    + <%= check_box_tag "assigned_to_volunteer_option_no", "No", true, + class: "form-check-input", + data: { value: "No" } %> + <%= label_tag "assigned_to_volunteer_option_no", "No", class: "form-check-label" %> +
    + <% end %>
    <% end %> -
    - -
    -
    - <%= check_box_tag "more_than_one_volunteer_option_yes", "Yes", true, - class: "form-check-input", - data: { value: "Yes" } %> - <%= label_tag "more_than_one_volunteer_option_yes", "Yes", class: "form-check-label" %> -
    -
    - <%= check_box_tag "more_than_one_volunteer_option_no", "No", true, - class: "form-check-input", - data: { value: "No" } %> - <%= label_tag "more_than_one_volunteer_option_no", "No", class: "form-check-label" %> -
    + <%= render(DropdownMenuComponent.new(menu_title: "Assigned to more than 1 Volunteer", klass: "pull-left mx-2 my-1 more-than-one-volunteer-options")) do %> +
    + <%= check_box_tag "more_than_one_volunteer_option_yes", "Yes", true, + class: "form-check-input", + data: { value: "Yes" } %> + <%= label_tag "more_than_one_volunteer_option_yes", "Yes", class: "form-check-label" %>
    -
    +
    + <%= check_box_tag "more_than_one_volunteer_option_no", "No", true, + class: "form-check-input", + data: { value: "No" } %> + <%= label_tag "more_than_one_volunteer_option_no", "No", class: "form-check-label" %> +
    + <% end %>
    <% end %> -
    - -
    -
    - <%= check_box_tag "transition_youth_option_yes", "Yes 🦋", true, - class: "form-check-input", - data: { value: "Yes 🦋" } %> - <%= label_tag "transition_youth_option_yes", "Yes", class: "form-check-label" %> -
    -
    - <%= check_box_tag "transition_youth_option_no", "No", true, - class: "form-check-input", - data: { value: "No 🐛" } %> - <%= label_tag "transition_youth_option_no", "No", class: "form-check-label" %> -
    + <%= render(DropdownMenuComponent.new(menu_title: "Assigned to Transition Aged Youth", klass: "pull-left mx-2 my-1 transition-youth-options")) do %> +
    + <%= check_box_tag "transition_youth_option_yes", "Yes 🦋", true, + class: "form-check-input", + data: { value: "Yes 🦋" } %> + <%= label_tag "transition_youth_option_yes", "Yes", class: "form-check-label" %>
    -
    +
    + <%= check_box_tag "transition_youth_option_no", "No", true, + class: "form-check-input", + data: { value: "No 🐛" } %> + <%= label_tag "transition_youth_option_no", "No", class: "form-check-label" %> +
    + <% end %>
    <% unless current_user.volunteer? %>
    <% end %> -
    - <% unless current_user.volunteer? %> - + <%= render(DropdownMenuComponent.new(menu_title: "Casa Case Prefix", klass: "pull-left mx-2 my-1 case-number-prefix-options")) do %> + <% ["CINA", "None", "TPR"].each do |option| %> +
    + <% option_for_name = option.downcase.gsub(/[^a-z]+/, '') -%> + <% tag_name = "case_case_prefix_option_#{option_for_name}" -%> + <%= check_box_tag tag_name, option, true, + class: "form-check-input", + data: { value: option } %> + <%= label_tag tag_name, option, class: "form-check-label" %> +
    <% end %> -
    - <% ["CINA", "None", "TPR"].each do |option| %> -
    - <% option_for_name = option.downcase.gsub(/[^a-z]+/, '') -%> - <% tag_name = "case_case_prefix_option_#{option_for_name}" -%> - <%= check_box_tag tag_name, option, true, - class: "form-check-input", - data: { value: option } %> - <%= label_tag tag_name, option, class: "form-check-label" %> -
    - <% end %> -
    -
    + <% end %>
    From bd439b3316252d09826a0315e9ef2a983010b412 Mon Sep 17 00:00:00 2001 From: Ronak Gupta Date: Thu, 4 Jul 2024 22:43:23 +0530 Subject: [PATCH 15/21] header profile dropdown replaced with dropdown component --- app/views/layouts/_header.html.erb | 97 ++++++++++++++---------------- 1 file changed, 44 insertions(+), 53 deletions(-) diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index 75ccef2185..1677308c32 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -40,13 +40,8 @@
    -
    -
    - - -
      -
    • - - Role: <%= current_role %> - -
      • -
    • - - <%= current_user.email %> - -
      • -
    • - <%= link_to edit_users_path do %> - - Edit Profile - <% end %> -
      • -
    • - <%= link_to notifications_path do %> - - Messages - <% end %> -
      • - <% if policy(:application).modify_organization? %> -
    • - <%= link_to edit_casa_org_path(current_organization) do %> - - Edit Organization - <% end %> -
      • + + <% end %> +
    • + + Role: <%= current_role %> + +
      • +
    • + + <%= current_user.email %> + +
      • +
    • + <%= link_to edit_users_path do %> + + Edit Profile <% end %> +
      • +
    • + <%= link_to notifications_path do %> + + Messages + <% end %> +
      • + <% if policy(:application).modify_organization? %>
    • - <% help_url = current_user.volunteer? ? help_volunteers_url : help_admins_supervisors_url %> - <%= link_to help_url, target: :_blank do %> - - Help - <% end %> -
      • -
    • - <%= link_to destroy_user_session_path do %> - - Sign Out + <%= link_to edit_casa_org_path(current_organization) do %> + + Edit Organization <% end %>
      • -
    -
    + <% end %> +
  • + <% help_url = current_user.volunteer? ? help_volunteers_url : help_admins_supervisors_url %> + <%= link_to help_url, target: :_blank do %> + + Help + <% end %> +
    • +
  • + <%= link_to destroy_user_session_path do %> + + Sign Out + <% end %> +
    • + <% end %>
    From 951129208abffbd06885a69a7c551914b2eecf5f Mon Sep 17 00:00:00 2001 From: Ronak Gupta Date: Fri, 5 Jul 2024 12:42:20 +0530 Subject: [PATCH 16/21] 'occurred at' dropdown button replaced with component --- app/views/reimbursements/index.html.erb | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/views/reimbursements/index.html.erb b/app/views/reimbursements/index.html.erb index 0b584a4755..f4881b3eb0 100644 --- a/app/views/reimbursements/index.html.erb +++ b/app/views/reimbursements/index.html.erb @@ -36,9 +36,8 @@ -
    - <%= render partial: "filter_trigger", locals: { title: "Occurred at" } %> -
    + <%= render(DropdownMenuComponent.new(menu_title: "Occurred at", klass: "pull-left mr-2")) do %> +
    <%= render partial: "occurred_at_filter_input", locals: { label: "Starting from", name: :occurred_at_starting @@ -48,7 +47,7 @@ name: :occurred_at_ending } %>
    -
    + <% end %>
    From 68aff5a2c689f78272d0129d0a996735e16b7ba2 Mon Sep 17 00:00:00 2001 From: Ronak Gupta Date: Fri, 5 Jul 2024 12:42:33 +0530 Subject: [PATCH 17/21] margin right added to span --- app/components/dropdown_menu_component.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/dropdown_menu_component.rb b/app/components/dropdown_menu_component.rb index 54c6b7713d..095fda7583 100644 --- a/app/components/dropdown_menu_component.rb +++ b/app/components/dropdown_menu_component.rb @@ -27,6 +27,6 @@ def render? end def button_label - content_tag(:span, @menu_title, class: @hide_label ? "sr-only" : nil) + content_tag(:span, @menu_title, class: @hide_label ? "sr-only" : "mr-5") end end From 8fb7d625050ef3c14f14dbd66a5c5335d79d49a7 Mon Sep 17 00:00:00 2001 From: Ronak Gupta Date: Fri, 12 Jul 2024 14:42:46 +0530 Subject: [PATCH 18/21] spec fixed for dropdown menu component --- spec/components/dropdown_menu_component_spec.rb | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/spec/components/dropdown_menu_component_spec.rb b/spec/components/dropdown_menu_component_spec.rb index 64f6ad7636..6a55665c75 100644 --- a/spec/components/dropdown_menu_component_spec.rb +++ b/spec/components/dropdown_menu_component_spec.rb @@ -25,8 +25,7 @@ render_inline(DropdownMenuComponent.new(menu_title: "Example Title")) { "Example Item" } expect(page).to have_css("div.dropdown") - expect(page).to have_css("button.btn.btn-secondary.dropdown-toggle svg") - expect(page).to have_css("svg title", text: "Example Title") + expect(page).to have_css("button.btn.btn-secondary.dropdown-toggle") expect(page).to have_css(".dropdown-menu", text: "Example Item") end From c0045a881ebd52e1a623e71a47ab14fb23ac3b42 Mon Sep 17 00:00:00 2001 From: Ronak Gupta Date: Mon, 22 Jul 2024 19:00:25 +0530 Subject: [PATCH 19/21] bootsrap style added --- app/components/dropdown_menu_component.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/dropdown_menu_component.html.erb b/app/components/dropdown_menu_component.html.erb index bc6c00aa11..eb4a1ce8c4 100644 --- a/app/components/dropdown_menu_component.html.erb +++ b/app/components/dropdown_menu_component.html.erb @@ -1,5 +1,5 @@
    -