70a5e9437f
* initial work to show the expand/collapse search and filter on member index * replace icon with actual button * simplify logic in pack * add cypress tests * make sure both fields part of same form * add an indicator in mobile view when field has a value * make sure empty params treated same as missing params * make sure indicators stay in step with current user input * partials for inputs * rename pack file
61 lines
3.4 KiB
Text
61 lines
3.4 KiB
Text
<%= javascript_packs_with_chunks_tag "admin/users/controls", defer: true %>
|
|
|
|
<% if FeatureFlag.enabled?(:member_index_view) %>
|
|
<% if params[:controller] == "admin/users" %>
|
|
<!-- Small screen layout -->
|
|
<%= form_with url: admin_users_path, method: :get, local: true, class: "l:hidden" do |f| %>
|
|
<div class="flex justify-between my-3">
|
|
<div>
|
|
<button type="button" id="expand-search-btn" class="relative c-btn c-btn--icon-alone indicator-btn" aria-label="Expand search" aria-expanded="false" aria-controls="search-users">
|
|
<%= crayons_icon_tag("search", aria_hidden: true) %>
|
|
<span class="search-indicator absolute top-1 right-1 c-indicator c-indicator--info <%= params[:search].blank? ? "hidden" : "" %>"></span>
|
|
</button>
|
|
<button type="button" id="expand-filter-btn" class="c-btn c-btn--icon-alone indicator-btn" aria-label="Expand filter" aria-expanded="false" aria-controls="filter-users">
|
|
<%= crayons_icon_tag("filter", aria_hidden: true) %>
|
|
<span class="search-indicator absolute top-1 right-1 c-indicator c-indicator--info <%= params[:role].blank? ? "hidden" : "" %>"></span>
|
|
</button>
|
|
</div>
|
|
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>
|
|
</div>
|
|
<div>
|
|
<div id="search-users" class="hidden relative">
|
|
<%= render "admin/users/index/search_field", f: f %>
|
|
</div>
|
|
<div id="filter-users" class="hidden crayons-field flex-row items-center gap-2">
|
|
<%= render "admin/users/index/filter_role_field", f: f %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- Larger screen layout -->
|
|
<div class="hidden l:flex justify-between">
|
|
<%= form_with url: admin_users_path, method: :get, local: true, class: "flex flex-col m:flex-row gap-3 m:items-center py-3" do |f| %>
|
|
<div class="crayons-field flex-1 flex-row items-center gap-2 relative">
|
|
<%= render "admin/users/index/search_field", f: f %>
|
|
</div>
|
|
<div class="crayons-field flex-row items-center gap-2">
|
|
<%= render "admin/users/index/filter_role_field", f: f %>
|
|
</div>
|
|
<% end %>
|
|
<%= paginate @users, theme: "admin", scope: @users, label: "Paginate users" %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% else %>
|
|
<% if params[:controller] == "admin/users" %>
|
|
<%= form_with url: admin_users_path, method: :get, local: true, class: "flex flex-col m:flex-row gap-3 m:items-center p-3" do |f| %>
|
|
<div class="crayons-field flex-1 flex-row items-center gap-2">
|
|
<%= f.label :search, class: "crayons-field__label whitespace-nowrap" %>
|
|
<%= f.text_field :search, value: params[:search], class: "crayons-textfield mt-0", placeholder: "Name, username, email, or Twitter/GitHub usernames", aria: { label: "Filter by name, username, email, or Twitter/GitHub usernames" } %>
|
|
</div>
|
|
<div class="crayons-field flex-row items-center gap-2">
|
|
<%= f.label :role, "Filter by Role", class: "crayons-field__label whitespace-nowrap" %>
|
|
<%= f.select :role, options_for_select(Role::ROLES, params[:role]), { include_blank: "All roles" }, class: "crayons-select mt-0" %>
|
|
</div>
|
|
<%= f.submit "Filter", class: "c-btn c-btn--secondary" %>
|
|
<% end %>
|
|
<% end %>
|
|
<% if params[:controller] == "admin/invitations" %>
|
|
<%= link_to "New", new_admin_invitation_path, class: "c-cta self-end" %>
|
|
<% end %>
|
|
<% end %>
|