Add empty state on table

locales/en.yml

@@ -11,6 +11,7 @@ common:
   search: Search
   reset: Reset
   show: Show
+  no_result: No results
   close: Close
   confirmation: Confirmation
   are_you_sure: Are you sure?

locales/fr.yml

@@ -11,6 +11,7 @@ common:
   search: Filtrer
   reset: Réini.
   show: Voir
+  no_result: Aucun résultat
   close: Fermer
   confirmation: Confirmation
   are_you_sure: Êtes-vous sûr ?

src/routes/user.rs

@@ -25,7 +25,7 @@ use crate::{
 #[derive(Template, WebTemplate)]
 #[template(path = "users/index.html")]
 struct UsersIndexTemplate {
-    user_with_books_number: Vec<UserWithBookNumber>,
+    users_with_books_number: Vec<UserWithBookNumber>,
     query: IndexQuery,
 }
 
@@ -84,7 +84,7 @@ pub async fn index(
     }
 
     Ok(UsersIndexTemplate {
-        user_with_books_number: result,
+        users_with_books_number: result,
         query,
     })
 }

templates/index.html

@@ -90,6 +90,15 @@
   {% endcall %}
 
   {% call cards::card() %}
+    {% if books_with_user.is_empty() %}
+      <div class="d-flex flex-column align-items-center justify-content-center">
+        <h2>{{ t!("common.no_result") }}</h2>
+
+        <a class="btn btn-success text-white text-nowrap mt-3" href="/books/new">
+          {{ t!("book.new.button_short") }}
+        </a>
+      </div>
+    {% else %}
       <table class="table table-hover">
         <thead>
           <tr>
@@ -147,5 +156,7 @@
           </nav>
         </div>
       {% endif %}
+    
+    {% endif %}
   {% endcall %}
 {% endblock %}

templates/users/index.html

@@ -34,6 +34,15 @@
   {% endcall %}
 
   {% call cards::card() %}
+    {% if users_with_books_number.is_empty() %}
+      <div class="d-flex flex-column align-items-center justify-content-center">
+        <h2>{{ t!("common.no_result") }}</h2>
+
+        <a class="btn btn-success text-white text-nowrap mt-3" href="//new">
+          {{ t!("user.index.button") }}
+        </a>
+      </div>
+    {% else %}
       <table class="table table-hover">
         <thead>
           <tr>
@@ -45,7 +54,7 @@
           </tr>
         </thead>
         <tbody>
-        {% for user_information in user_with_books_number %}
+          {% for user_information in users_with_books_number %}
             <tr class="align-middle">
               <th scope="row">{{ user_information.user.id }}</th>
               <td>{{ user_information.user.name }}</td>
@@ -58,5 +67,6 @@
           {% endfor %}
         </tbody>
       </table>    
+    {% endif %}
   {% endcall %}
 {% endblock %}