Skip to content

Commit

Permalink
Implement a reusable empty state partial for all places that need them (
Browse files Browse the repository at this point in the history 
#1255)

* Add empty state partial

* Use emtpy_state partial for adoptable pets

* Use emtpy_state partial for adopter fosterer

* Use emtpy_state partial for staff

* Add missing new lines

* Use 'empty_state' as locale key
  • Loading branch information
@jp524
jp524 authored Dec 17, 2024
1 parent ecbd95d commit 5a5c09c
Show file tree
Hide file tree
Showing 13 changed files with 125 additions and 92 deletions.
14 changes: 3 additions & 11 deletions app/views/organizations/adoptable_pets/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,20 +52,12 @@
</div>
</div>

<% if @pets.empty? %>
<div class="row mt-4">
<div class="col-12">
<div class="card text-center mx-auto" style="max-width: 400px;">
<div class="card-body">
<p class="class-text">We don't have any pets matching your search criteria.</p>
</div>
</div>
</div>
</div>
<% else %>
<% if @pets.present? %>
<div class="d-flex justify-content-center align-items-center mt-2">
<%== pagy_bootstrap_nav(@pagy) if @pagy.pages > 1 %>
</div>
<% else %>
<%= render partial: "shared/empty_state", locals: {text: t(".empty_state")} %>
<% end %>

<div class="row">
Expand Down
36 changes: 20 additions & 16 deletions app/views/organizations/adopter_fosterer/adopted_pets/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,28 @@
<% c.with_header_title { t(".header_title") } %>
<% c.with_body do %>
<div data-controller="card">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5">
<% @adopted_pets.each_with_index do |adopted_pet, index| %>
<div class="col">
<%= link_to adopter_fosterer_adopted_pet_files_path(adopted_pet.pet, pet_id: adopted_pet.pet.id), data: { turbo_frame: "pet_files", action: "click->card#selectCard" } do %>
<div class="card h-100 bg-white border-0 shadow-sm" data-card-target="card">
<div class="card-body d-flex align-items-center">
<div class="me-3 flex-shrink-0" style="width: 50px; height: 50px;">
<%= image_tag(adopted_pet.pet.images.attached? ? adopted_pet.pet.images.first : 'coming_soon.jpg',
class: 'rounded-circle',
style: "width: 100%; height: 100%; object-fit: cover;") %>
<% if @adopted_pets.present? %>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5">
<% @adopted_pets.each_with_index do |adopted_pet, index| %>
<div class="col">
<%= link_to adopter_fosterer_adopted_pet_files_path(adopted_pet.pet, pet_id: adopted_pet.pet.id), data: { turbo_frame: "pet_files", action: "click->card#selectCard" } do %>
<div class="card h-100 bg-white border-0 shadow-sm" data-card-target="card">
<div class="card-body d-flex align-items-center">
<div class="me-3 flex-shrink-0" style="width: 50px; height: 50px;">
<%= image_tag(adopted_pet.pet.images.attached? ? adopted_pet.pet.images.first : 'coming_soon.jpg',
class: 'rounded-circle',
style: "width: 100%; height: 100%; object-fit: cover;") %>
</div>
<h5 class="card-title mb-0"><%= adopted_pet.pet.name %></h5>
</div>
<h5 class="card-title mb-0"><%= adopted_pet.pet.name %></h5>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
<% end %>
</div>
<% end %>
</div>
<% else %>
<%= render partial: "shared/empty_state", locals: {text: t(".empty_state")} %>
<% end %>
</div>
<turbo-frame id="pet_files">
<!-- This will be replaced with the pet files table when a pet is clicked -->
Expand Down
9 changes: 0 additions & 9 deletions app/views/organizations/adopter_fosterer/adopter_applications/_applications_table.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,6 @@
</tr>
</thead>
<tbody>
<% if applications.present? %>

<% applications.each do |app| %>
<% pet = app.pet %>
<tr>
Expand Down Expand Up @@ -48,13 +46,6 @@
</td>
</tr>
<% end %>
<% else %>
<tr>
<td colspan="4" class="text-center">
<%= t("dashboard.applications.no_applications")%>
</td>
</tr>
<% end %>
</tbody>
</table>
</div>
20 changes: 12 additions & 8 deletions app/views/organizations/adopter_fosterer/adopter_applications/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,18 @@
<% c.with_header_title { t("dashboard.applications.header_title") } %>
<% c.with_body do %>
<div class="justify-content-md-between mb-4 mb-xl-0 gx-3">
<!-- Table layout -->
<div class="d-none d-xl-block">
<%= render partial: "applications_table", locals: { applications: @applications} %>
</div>
<!-- Card-based layout -->
<div class="d-xl-none d-flex justify-content-evenly flex-wrap">
<%= render partial:"application_cards", collection: @applications, as: :application %>
</div>
<% if @applications.present? %>
<!-- Table layout -->
<div class="d-none d-xl-block">
<%= render partial: "applications_table", locals: { applications: @applications} %>
</div>
<!-- Card-based layout -->
<div class="d-xl-none d-flex justify-content-evenly flex-wrap">
<%= render partial:"application_cards", collection: @applications, as: :application %>
</div>
<% else %>
<%= render partial: "shared/empty_state", locals: {text: t(".empty_state")} %>
<% end %>
</div>
<% end %>
<% end %>
36 changes: 20 additions & 16 deletions app/views/organizations/adopter_fosterer/fostered_pets/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,28 @@
<% c.with_header_title { t(".header_title") } %>
<% c.with_body do %>
<div data-controller="card">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5">
<% @fostered_pets.each_with_index do |fostered_pet, index| %>
<div class="col">
<%= link_to adopter_fosterer_fostered_pet_files_path(fostered_pet.pet, pet_id: fostered_pet.pet.id), data: { turbo_frame: "pet_files", action: "click->card#selectCard" } do %>
<div class="card h-100 bg-white border-0 shadow-sm" data-card-target="card">
<div class="card-body d-flex align-items-center">
<div class="me-3 flex-shrink-0" style="width: 50px; height: 50px;">
<%= image_tag(fostered_pet.pet.images.attached? ? fostered_pet.pet.images.first : 'coming_soon.jpg',
class: 'rounded-circle',
style: "width: 100%; height: 100%; object-fit: cover;") %>
<% if @fostered_pets.present? %>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-5">
<% @fostered_pets.each_with_index do |fostered_pet, index| %>
<div class="col">
<%= link_to adopter_fosterer_fostered_pet_files_path(fostered_pet.pet, pet_id: fostered_pet.pet.id), data: { turbo_frame: "pet_files", action: "click->card#selectCard" } do %>
<div class="card h-100 bg-white border-0 shadow-sm" data-card-target="card">
<div class="card-body d-flex align-items-center">
<div class="me-3 flex-shrink-0" style="width: 50px; height: 50px;">
<%= image_tag(fostered_pet.pet.images.attached? ? fostered_pet.pet.images.first : 'coming_soon.jpg',
class: 'rounded-circle',
style: "width: 100%; height: 100%; object-fit: cover;") %>
</div>
<h5 class="card-title mb-0"><%= fostered_pet.pet.name %></h5>
</div>
<h5 class="card-title mb-0"><%= fostered_pet.pet.name %></h5>
</div>
</div>
<% end %>
</div>
<% end %>
</div>
<% end %>
</div>
<% end %>
</div>
<% else %>
<%= render partial: "shared/empty_state", locals: {text: t(".empty_state")} %>
<% end %>
</div>
<turbo-frame id="pet_files">
<!-- This will be replaced with the pet files table when a pet is clicked -->
Expand Down
2 changes: 1 addition & 1 deletion app/views/organizations/adopter_fosterer/likes/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
</div>
<% end %>
<% else %>
<p class = "text-center"><%= t('organizations.adopter_fosterer.likes.index.no_pets')%></p>
<%= render partial: "shared/empty_state", locals: {text: t(".empty_state")} %>
<% end %>
</div>
</div>
Expand Down
14 changes: 9 additions & 5 deletions app/views/organizations/staff/adoption_application_reviews/_search_results.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,12 @@
<% @collection = @pet.nil? ? @pets_with_applications : @pet %>

<div class="d-flex flex-wrap justify-content-center">
<% @collection.each do |pet| %>
<!--pet name-->
<%= render "organizations/staff/pets/tabs/applications", applications: pet.adopter_applications, pet: pet %>
<% end %>
</div>
<% if @collection.present? %>
<% @collection.each do |pet| %>
<!--pet name-->
<%= render "organizations/staff/pets/tabs/applications", applications: pet.adopter_applications, pet: pet %>
<% end %>
<% else %>
<%= render partial: "shared/empty_state", locals: {text: t(".empty_state")} %>
<% end%>
</div>
16 changes: 10 additions & 6 deletions app/views/organizations/staff/default_pet_tasks/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,16 @@
<%== pagy_bootstrap_nav(@pagy) if @pagy.pages > 1 %>
</div>
<div class="justify-content-md-between mb-4 mb-xl-0 gx-3">
<div class="d-none d-xl-block">
<%= render "default_pet_tasks_table"%>
</div>
<div class="d-xl-none d-flex flex-wrap">
<%= render partial:"default_pet_task_cards", collection: @default_pet_tasks, as: :default_pet_tasks %>
</div>
<% if @default_pet_tasks.present? %>
<div class="d-none d-xl-block">
<%= render "default_pet_tasks_table"%>
</div>
<div class="d-xl-none d-flex flex-wrap">
<%= render partial:"default_pet_task_cards", collection: @default_pet_tasks, as: :default_pet_tasks %>
</div>
<% else %>
<%= render partial: "shared/empty_state", locals: {text: t(".empty_state")} %>
<% end %>
</div>
<div class="d-flex justify-content-center align-items-center mt-2">
<%== pagy_bootstrap_nav(@pagy) if @pagy.pages > 1 %>
Expand Down
20 changes: 12 additions & 8 deletions app/views/organizations/staff/manage_fosters/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,18 @@
<%== pagy_bootstrap_nav(@pagy) if @pagy.pages > 1 %>
</div>
<!-- Search Results -->
<%# Table layout %>
<div class="d-flex flex-wrap justify-content-center">
<%= render "foster_table", foster_pets: @foster_pets %>
</div>
<%# Cards layout %>
<div class="d-xl-none d-flex flex-wrap">
<%= render "foster_cards", foster_pets: @foster_pets %>
</div>
<% if @foster_pets.present? %>
<%# Table layout %>
<div class="d-flex flex-wrap justify-content-center">
<%= render "foster_table", foster_pets: @foster_pets %>
</div>
<%# Cards layout %>
<div class="d-xl-none d-flex flex-wrap">
<%= render "foster_cards", foster_pets: @foster_pets %>
</div>
<% else %>
<%= render partial: "shared/empty_state", locals: {text: t(".empty_state")} %>
<% end %>
</section>
<div class="d-flex justify-content-center align-items-center mt-2">
<%== pagy_bootstrap_nav(@pagy) if @pagy.pages > 1 %>
Expand Down
20 changes: 12 additions & 8 deletions app/views/organizations/staff/pets/index.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,18 @@
</div>
<!-- row -->
<div class="justify-content-md-between mb-4 mb-xl-0 gx-3">
<!-- Table layout -->
<div class="d-none d-xl-block">
<%= render partial: "pet_table", locals: { pets: @pets} %>
</div>
<!-- Card-based layout -->
<div class="d-xl-none d-flex flex-wrap">
<%= render partial:"pet_cards", collection: @pets, as: :pet %>
</div>
<% if @pets.present? %>
<!-- Table layout -->
<div class="d-none d-xl-block">
<%= render partial: "pet_table", locals: { pets: @pets} %>
</div>
<!-- Card-based layout -->
<div class="d-xl-none d-flex flex-wrap">
<%= render partial:"pet_cards", collection: @pets, as: :pet %>
</div>
<% else %>
<%= render partial: "shared/empty_state", locals: {text: t(".empty_state")} %>
<% end %>
</div>
<div class="d-flex justify-content-center align-items-center mt-2">
<%== pagy_bootstrap_nav(@pagy) if @pagy.pages > 1 %>
Expand Down
6 changes: 5 additions & 1 deletion app/views/organizations/staff/pets/tabs/_photos.html.erb
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
<div class="mb-4">
<%= render "organizations/staff/shared/attachment_form", multiple: true, instance: @pet, title: 'Photos', url: attach_images_staff_pet_path(@pet), attachment_type: 'images' %>
<%= render ImageAttachmentTableComponent.new(images: @pet.images) %>
<% if @pet.images.present? %>
<%= render ImageAttachmentTableComponent.new(images: @pet.images) %>
<% else %>
<%= render partial: "shared/empty_state", locals: {text: t(".empty_state")} %>
<% end %>
</div>
7 changes: 7 additions & 0 deletions app/views/shared/_empty_state.html.erb
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<%# locals: (text: "No result") %>

<div class="card text-center mx-auto" style="max-width: 400px;">
<div class="card-body">
<%= text %>
</div>
</div>
17 changes: 14 additions & 3 deletions config/locales/en.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,6 @@ en:
status: Status
withdraw_application: Withdraw Application
confirm_withdraw: Withdraw your application
no_applications: You do not have any adoption applications
root:
index:
title: "Homeward Tails"
Expand Down Expand Up @@ -388,6 +387,7 @@ en:
adoptable_pets:
index:
header: "Up for adoption"
empty_state: "We don't have any pets matching your search criteria"
show:
application_status: "Application status:"
adoption_process: "Adoption Process"
Expand Down Expand Up @@ -457,13 +457,17 @@ en:
success: "Foster for %{name} successfully updated."
destroy:
success: "Foster for %{name} deleted."
index:
empty_state: "No foster pets found"
invitations:
create:
success: "Invite sent!"
adoption_application_reviews:
update:
success: "Application was successfully updated."
error: "Error updating application"
search_results:
empty_state: "No applications found"
default_pet_tasks:
create:
success: "Default pet task saved successfully."
Expand All @@ -490,6 +494,7 @@ en:
default_pet_tasks: "Default Pet Tasks"
create_default_task: "Create Default Task"
are_you_sure_delete: "Are you sure you want to delete this default pet task?"
empty_state: "No default pet tasks found"
default_pet_task_cards:
name: "Name"
description: "Description"
Expand Down Expand Up @@ -590,6 +595,7 @@ en:
application:
active: "Applications: active"
paused: "Applications: paused"
empty_state: "No pets found"
new:
new_pet_post: "New Pet Post"
applications:
Expand All @@ -612,6 +618,8 @@ en:
paused: "Paused"
published: "Published"
draft: "Draft"
photos:
empty_state: "No photos exist for this pet"
custom_form:
forms:
set_form:
Expand Down Expand Up @@ -692,15 +700,16 @@ en:
withdrew_by_accident_html: "If you withdrew by accident, <a href='/contact'>contact us</a>"
remove: "Remove"
withdraw: "Withdraw"
empty_state: "You do not have any adoption applications"
form_answers:
index:
header: "Form Responses"
description: "These are the responses from the last time you completed the questionnaire. Please review for accuracy. If changes are required, please fill out a new form"
submitted_on: "Submitted on %{date} at %{time}"
likes:
index:
header_title: 'Liked Pets'
no_pets: 'You do not have any liked pets'
header_title: "Liked Pets"
empty_state: "You do not have any liked pets"
create:
success: "%{name} added to your liked pets."
failed: "Error, %{name} not added to your liked pets."
Expand All @@ -710,9 +719,11 @@ en:
adopted_pets:
index:
header_title: "Adopted pets"
empty_state: "You do not have any adopted pets"
fostered_pets:
index:
header_title: "Fostered pets"
empty_state: "You do not have any fostered pets"
dashboard:
index:
example: Example
Expand Down

0 comments on commit 5a5c09c

Please sign in to comment.