Skip to content

Commit

Permalink
chore: add close button to advanced search component
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericenns
ericenns committed Feb 11, 2025
1 parent 127309f commit 1423b7e
Show file tree
Hide file tree
Showing 10 changed files with 328 additions and 287 deletions.
296 changes: 155 additions & 141 deletions app/components/advanced_search_component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,156 +1,170 @@
<%= viral_dialog(id: 'advanced-search-dialog', size: :large, open: @open, closable: false) do |dialog| %>
<%= dialog.with_trigger do %>
<% if @status %>
<div class="inline-flex rounded-md" role="group">
<button
type="button"
class="
inline-flex items-center justify-center w-1/2 text-sm border rounded-s-md
cursor-pointer sm:w-auto focus:z-10 text-sm px-5 py-2.5 bg-white text-slate-900
border-slate-200 focus:outline-none focus:ring-slate-200 hover:bg-slate-100
hover:text-slate-950 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-600
dark:focus:ring-slate-700 dark:border-slate-600 dark:hover:text-white
dark:hover:bg-slate-700
"
data-action="viral--dialog#open"
aria-label="<%= t(".title") %>"
>
<%= t(".title") %>
</button>
<button
type="button"
class="
inline-flex items-center justify-center w-1/2 text-sm border border-l-0
rounded-e-md cursor-pointer sm:w-auto focus:z-10 text-sm px-5 py-2.5 bg-white
text-slate-900 border-slate-200 focus:outline-none focus:ring-slate-200
hover:bg-slate-100 hover:text-slate-950 dark:bg-slate-800 dark:text-slate-400
dark:border-slate-600 dark:focus:ring-slate-700 dark:border-slate-600
dark:hover:text-white dark:hover:bg-slate-700
"
data-action="advanced-search#clearForm filters#submit"
aria-label="<%= t(".clear_aria_label") %>"
>
<%= viral_icon(name: "x_mark", classes: "size-5") %>
</button>
<div
data-controller="advanced-search"
data-advanced-search-confirm-close-text-value='<%= t(".confirm_close_text") %>'
data-advanced-search-list-filter-outlet=".list-filter"
>
<%= viral_dialog(id: 'advanced-search-dialog', size: :large, open: @open, header_system_arguments: {close_action: "advanced-search#close"}, data: { action: "keydown.esc->advanced-search#close"}) do |dialog| %>
<%= dialog.with_trigger do %>
<% if @status %>
<div class="inline-flex rounded-md" role="group">
<button
type="button"
class="
inline-flex items-center justify-center w-1/2 text-sm border rounded-s-md
cursor-pointer sm:w-auto focus:z-10 text-sm px-5 py-2.5 bg-white text-slate-900
border-slate-200 focus:outline-none focus:ring-slate-200 hover:bg-slate-100
hover:text-slate-950 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-600
dark:focus:ring-slate-700 dark:border-slate-600 dark:hover:text-white
dark:hover:bg-slate-700
"
data-action="advanced-search#idempotentConnect viral--dialog#open"
aria-label="<%= t(".title") %>"
>
<%= t(".title") %>
</button>
<button
type="button"
class="
inline-flex items-center justify-center w-1/2 text-sm border border-l-0
rounded-e-md cursor-pointer sm:w-auto focus:z-10 text-sm px-5 py-2.5 bg-white
text-slate-900 border-slate-200 focus:outline-none focus:ring-slate-200
hover:bg-slate-100 hover:text-slate-950 dark:bg-slate-800 dark:text-slate-400
dark:border-slate-600 dark:focus:ring-slate-700 dark:border-slate-600
dark:hover:text-white dark:hover:bg-slate-700
"
data-action="advanced-search#clearForm filters#submit"
aria-label="<%= t(".clear_aria_label") %>"
>
<%= viral_icon(name: "x_mark", classes: "size-5") %>
</button>
</div>
<% else %>
<%= viral_button(
data: {
action: "advanced-search#idempotentConnect viral--dialog#open",
},
) { t(".title") } %>
<% end %>
<% end %>
<%= dialog.with_header(title: t(".title")) %>
<%= dialog.with_section do %>
<div class="space-y-4">
<p class="text-base leading-relaxed text-slate-500 dark:text-slate-400">
<%= t(".description") %>
</p>
<p class="text-base leading-relaxed text-slate-500 dark:text-slate-400">
<%= t(".rules") %>
</p>
<div class="space-y-4" data-advanced-search-target="searchGroupsContainer">
</div>
<div class="flex justify-end space-x-2">
<%= viral_button(data: { action: "advanced-search#addGroup" }) do %>
<%= t(".add_group_button") %>
<% end %>
</div>
<template data-advanced-search-target="searchGroupsTemplate">
<% @search.groups.each_with_index do |group, group_index| %>
<%= render AdvancedSearch::Group.new(
form: @form,
group: group,
group_index: group_index,
show_remove_group_button: @search.groups.count > 1,
fields: @fields,
operations: @operations,
) %>
<% end %>
</template>
</div>
<% else %>
<%= viral_button(data: { action: "viral--dialog#open" }) { t(".title") } %>
<% end %>
<% end %>
<%= dialog.with_header(title: t(".title")) %>
<%= dialog.with_section do %>
<div class="space-y-4">
<p class="text-base leading-relaxed text-slate-500 dark:text-slate-400">
<%= t(".description") %>
</p>
<p class="text-base leading-relaxed text-slate-500 dark:text-slate-400">
<%= t(".rules") %>
</p>
<% @search.groups.each_with_index do |group, group_index| %>
<%= render AdvancedSearch::Group.new(
form: @form,
group: group,
group_index: group_index,
show_remove_group_button: @search.groups.count > 1,
fields: @fields,
operations: @operations,
) %>
<%= dialog.with_primary_action("data-action": "filters#submit") do
t(".apply_filter_button")
end %>
<% dialog.with_secondary_action do %>
<%= viral_button(data: { action: "advanced-search#clearForm filters#submit" }) do %>
<%= t(".clear_filter_button") %>
<% end %>
<div class="flex justify-end space-x-2">
<%= viral_button(data: { action: "advanced-search#addGroup" }) do %>
<%= t(".add_group_button") %>
<% end %>
</div>
</div>
<% end %>
<%= dialog.with_primary_action("data-action": "filters#submit") do
t(".apply_filter_button")
end %>
<% dialog.with_secondary_action do %>
<%= viral_button(data: { action: "advanced-search#clearForm filters#submit" }) do %>
<%= t(".clear_filter_button") %>
<% end %>
<% end %>
<% end %>
<template data-advanced-search-target="listValueTemplate">
<div class="form-field w-6/12 value">
<div data-controller="list-filter" class="list-filter">
<%= render ListInputComponent.new(
list_input_form_name:
"q[groups_attributes][GROUP_INDEX_PLACEHOLDER][conditions_attributes][CONDITION_INDEX_PLACEHOLDER][value][]",
show_description: false,
) %>
</div>
</div>
</template>
<template data-advanced-search-target="valueTemplate">
<div class="form-field w-6/12 value">
<input
type="text"
name="q[groups_attributes][GROUP_INDEX_PLACEHOLDER][conditions_attributes][CONDITION_INDEX_PLACEHOLDER][value]"
placeholder="<%= t(".value") %>"
aria-label="<%= t(".value") %>"
/>
</div>
</template>
<template data-advanced-search-target="conditionTemplate">
<div
data-advanced-search-target="conditionsContainer"
class="flex space-x-2 p-4"
>
<div class="form-field w-1/3">
<select
aria-label="<%= t(".field") %>"
name="q[groups_attributes][GROUP_INDEX_PLACEHOLDER][conditions_attributes][CONDITION_INDEX_PLACEHOLDER][field]"
>
<option value="" selected><%= t(".field") %></option>
<% @fields.each do |field| %>
<option value="<%=field%>"><%= field %></option>
<% end %>
</select>
</div>
<div class="form-field w-1/6">
<select
aria-label="<%= t(".operator") %>"
data-action="advanced-search#handleOperatorChange"
name="q[groups_attributes][GROUP_INDEX_PLACEHOLDER][conditions_attributes][CONDITION_INDEX_PLACEHOLDER][operator]"
>
<option value="" selected><%= t(".operator") %></option>
<% @operations.each do |operation| %>
<option value="<%=operation%>"><%= operation %></option>
<% end %>
</select>
<template data-advanced-search-target="listValueTemplate">
<div class="form-field w-6/12 value">
<div data-controller="list-filter" class="list-filter">
<%= render ListInputComponent.new(
list_input_form_name:
"q[groups_attributes][GROUP_INDEX_PLACEHOLDER][conditions_attributes][CONDITION_INDEX_PLACEHOLDER][value][]",
show_description: false,
) %>
</div>
</div>
<div class="form-field w-6/12 value invisible">
</template>
<template data-advanced-search-target="valueTemplate">
<div class="form-field w-6/12 value">
<input
type="text"
name="q[groups_attributes][GROUP_INDEX_PLACEHOLDER][conditions_attributes][CONDITION_INDEX_PLACEHOLDER][value]"
placeholder="<%= t(".value") %>"
aria-label="<%= t(".value") %>"
/>
</div>
<button
type="button"
class="text-slate-400 hover:text-slate-900 dark:hover:text-white"
aria-label="<%= t(".remove_condition_aria_label") %>"
data-action="advanced-search#removeCondition"
</template>
<template data-advanced-search-target="conditionTemplate">
<div
data-advanced-search-target="conditionsContainer"
class="flex space-x-2 p-4"
>
<%= viral_icon(name: "x_mark", classes: "h-5 w-5") %>
</button>
</div>
</template>
<template data-advanced-search-target="groupTemplate">
<div
data-advanced-search-target="groupsContainer"
class="border border-gray-300 rounded-lg"
>
<div class="flex justify-end space-x-2 p-4">
<%= viral_button(data: { action: "advanced-search#addCondition" }) do %>
<%= t(".add_condition_button") %>
<% end %>
<%= viral_button(data: { action: "advanced-search#removeGroup" }) do %>
<%= t(".remove_group_button") %>
<% end %>
<div class="form-field w-1/3">
<select
aria-label="<%= t(".field") %>"
name="q[groups_attributes][GROUP_INDEX_PLACEHOLDER][conditions_attributes][CONDITION_INDEX_PLACEHOLDER][field]"
>
<option value="" selected><%= t(".field") %></option>
<% @fields.each do |field| %>
<option value="<%=field%>"><%= field %></option>
<% end %>
</select>
</div>
<div class="form-field w-1/6">
<select
aria-label="<%= t(".operator") %>"
data-action="advanced-search#handleOperatorChange"
name="q[groups_attributes][GROUP_INDEX_PLACEHOLDER][conditions_attributes][CONDITION_INDEX_PLACEHOLDER][operator]"
>
<option value="" selected><%= t(".operator") %></option>
<% @operations.each do |operation| %>
<option value="<%=operation%>"><%= operation %></option>
<% end %>
</select>
</div>
<div class="form-field w-6/12 value invisible">
<input
type="text"
name="q[groups_attributes][GROUP_INDEX_PLACEHOLDER][conditions_attributes][CONDITION_INDEX_PLACEHOLDER][value]"
placeholder="<%= t(".value") %>"
aria-label="<%= t(".value") %>"
/>
</div>
<button
type="button"
class="text-slate-400 hover:text-slate-900 dark:hover:text-white"
aria-label="<%= t(".remove_condition_aria_label") %>"
data-action="advanced-search#removeCondition"
>
<%= viral_icon(name: "x_mark", classes: "h-5 w-5") %>
</button>
</div>
</template>
<template data-advanced-search-target="groupTemplate">
<div
data-advanced-search-target="groupsContainer"
class="border border-gray-300 rounded-lg"
>
<div class="flex justify-end space-x-2 p-4">
<%= viral_button(data: { action: "advanced-search#addCondition" }) do %>
<%= t(".add_condition_button") %>
<% end %>
<%= viral_button(data: { action: "advanced-search#removeGroup" }) do %>
<%= t(".remove_group_button") %>
<% end %>
</div>
</div>
</div>
</template>
</template>
</div>
7 changes: 5 additions & 2 deletions app/components/viral/dialog/header_component.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
<%= render Viral::BaseComponent.new(tag: "div", **system_arguments) do %>
<%= render Viral::BaseComponent.new(tag: "div", **system_arguments.except(:close_action)) do %>
<h1 class="dialog--title">
<%= title %>
</h1>
<%- if closable %>
<button
type="button"
class="dialog--close"
data-action="click->viral--dialog#close"
data-action="
<%= system_arguments[:close_action]%>
click->viral--dialog#close
"
aria-label="<%= t(:"components.dialog.close") %>"
>
<%= viral_icon(name: "x_mark", classes: "h-5 w-5") %>
Expand Down
5 changes: 3 additions & 2 deletions app/components/viral/dialog/header_component.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ module Dialog
class HeaderComponent < Viral::BaseComponent
attr_reader :title, :closable

def initialize(title:, closable: true)
def initialize(title:, closable: true, **system_arguments)
@title = title
@closable = closable
@system_arguments = {}
@system_arguments = system_arguments

@system_arguments[:classes] = class_names(@system_arguments[:classes], 'dialog--header')
end
end
Expand Down
9 changes: 5 additions & 4 deletions app/components/viral/dialog_component.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
module Viral
# A component for displaying a dialog.
class DialogComponent < Viral::Component
attr_reader :id, :open, :closable, :dialog_size, :title
attr_reader :id, :open, :closable, :dialog_size, :title, :header_system_arguments

renders_one :header, lambda { |title:|
Viral::Dialog::HeaderComponent.new(title:, closable: @closable)
Viral::Dialog::HeaderComponent.new(title:, closable: @closable, **header_system_arguments)
}
renders_many :sections, Viral::Dialog::SectionComponent
renders_one :primary_action, lambda { |**system_arguments|
Expand All @@ -24,15 +24,16 @@ class DialogComponent < Viral::Component

renders_one :trigger

def initialize(id: 'dialog', title: '', size: SIZE_DEFAULT, open: false, closable: true, **system_arguments) # rubocop:disable Metrics/ParameterLists
def initialize(id: 'dialog', title: '', size: SIZE_DEFAULT, open: false, closable: true, header_system_arguments: {}, **system_arguments) # rubocop:disable Metrics/ParameterLists,Layout/LineLength
@id = id
@title = title
@open = open
@closable = closable
@dialog_size = SIZE_MAPPINGS[size]
@header_system_arguments = header_system_arguments
@system_arguments = system_arguments

@system_arguments[:data] = { 'viral--dialog-target' => 'dialog' }
@system_arguments[:data].merge!({ 'viral--dialog-target' => 'dialog' })

return if closable

Expand Down
Loading

0 comments on commit 1423b7e

Please sign in to comment.