Add edit and new for users

templates/books/new.html

@@ -1,50 +1,27 @@
 {% extends "base.html" %}
 {% import "components/typography.html" as typography %}
 {% import "components/cards.html" as cards %}
+{% import "components/inputs.html" as form_helpers %}
 
 {% block main %}
   {{ typography::heading("New book") }}
 
   {% call cards::card() %}
     <form method="post" action="/books">
-      <div class="mb-3">
-        <label for="title" class="form-label">Name</label>
-        <input type="text" name="title" class="form-control" required>
-      </div>
+      {{ form_helpers::input("title", "Name", is_required = true, placeholder = "Ex: La Petite Dernière") }}
+      {{ form_helpers::input("authors", "Author(s)", is_required = true, placeholder = "Ex: Fatima Daas") }}
 
-      <div class="mb-3">
-        <label for="authors" class="form-label">Author(s)</label>
-        <input type="text" name="authors" class="form-control" required>
-      </div>
+      {% call(option) form_helpers::select("owner_id", "Owner", users, is_required = true) %}
+        <option value="{{ option.id }}">{{ option.name }}</option>
+      {% endcall %}
 
-      <div class="mb-3">
-        <label for="owner_id" class="form-label">Owner</label>
-        <select name="owner_id" class="form-control" required>
-          {% for user in users %}
-          <option value="{{ user.id }}">{{ user.name }}</option>
-          {% endfor %}
-        </select>
-      </div>
+      {% call(option) form_helpers::select("current_holder_id", "Current Holder", users, is_required = false) %}
+        <option value="{{ option.id }}">{{ option.name }}</option>
+      {% endcall %}
+      
+      {{ form_helpers::textarea("description", "Description", rows = 5, is_required = false, placeholder = "Ex: Je m’appelle Fatima Daas. Je suis la mazoziya, la petite dernière. Celle à laquelle on ne s’est pas préparé. Française d’origine algérienne.") }}
 
-      <div class="mb-3">
-        <label for="current_holder_id" class="form-label">Current Holder</label>
-        <select name="current_holder_id" class="form-control">
-          <option></option>
-          {% for user in users %}
-            <option value="{{ user.id }}">{{ user.name }}</option>
-          {% endfor %}
-        </select>
-      </div>
-
-      <div class="mb-3">
-        <label for="description" class="form-label">Description</label>
-        <textarea name="description" class="form-control"></textarea>
-      </div>
-
-      <div class="mb-3">
-        <label for="comment" class="form-label">Comment</label>
-        <textarea name="comment" class="form-control"></textarea>
-      </div>
+      {{ form_helpers::textarea("comment", "Comment", rows = 3, is_required = false, placeholder = "Ex: I recommend it, it's great!") }}
 
       <div class="mt-4 text-center">
         <input type="submit" value="Create book" class="btn btn-success">

templates/components/dropdown.html

@@ -11,18 +11,18 @@
 </div>
 {% endmacro %}
 
-{% macro book_dropdown_button(book, show = true) %}
+{% macro crud_dropdown_button(book, label, sub_path, show = true) %}
   <div class="dropdown">
     <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
       Actions
     </button>
     <ul class="dropdown-menu">
       {% if show %}
-        <li><a class="dropdown-item" href="/books/{{ book.id }}">Voir</a></li>
+        <li><a class="dropdown-item" href="/{{ sub_path }}/{{ book.id }}">Show</a></li>
       {% endif %}
-      <li><a class="dropdown-item" href="/books/{{ book.id }}/edit">Edit</a></li>
+      <li><a class="dropdown-item" href="/{{ sub_path }}/{{ book.id }}/edit">Edit</a></li>
       <li>
-        <form method="post" action="/books/{{ book.id }}/delete">
+        <form method="post" action="/{{ sub_path }}/{{ book.id }}/delete" class="mb-0">
           <input class="dropdown-item" type="submit" value="Delete">
         </form>
       </li>

templates/components/inputs.html

@@ -0,0 +1,43 @@
+{% macro input(name, label, value = "", type = "text", is_required = false, placeholder = "", margin_bottom = true) %}
+  <div {% if margin_bottom %}class="mb-3"{% endif %}>
+    <label for="{{ name }}" class="form-label">
+      {{ label }}
+      {% if is_required %}
+        <span class="text-danger">*</span>
+      {% endif %}
+    </label>
+    <input type="{{ type }}" value="{{ value }}" name="{{ name }}" class="form-control" placeholder="{{ placeholder }}" {% if is_required %}required{% endif %}>
+  </div>
+{% endmacro %}
+
+{% macro select(name, label, options, selected_value = "", is_required = false, margin_bottom = true) -%}
+  <div {% if margin_bottom %}class="mb-3"{% endif %}>
+    <label for="{{ name }}" class="form-label">
+      {{ label }}
+      {% if is_required %}
+        <span class="text-danger">*</span>
+      {% endif %}
+    </label>
+    <select name="{{ name }}" class="form-select" {% if is_required %}required{% endif %}>
+      {% if !is_required %}
+        <option></option>
+      {% endif %}
+      {% for option in options %}
+        {{ caller(option) }}
+      {% endfor %}
+    </select>
+  </div>
+{%- endmacro %}
+
+{% macro textarea(name, label, value = "", rows = 2, is_required = false, placeholder = "", margin_bottom = true) %}
+  <div {% if margin_bottom %}class="mb-3"{% endif %}>
+    <label for="{{ name }}" class="form-label">
+      {{ label }}
+      {% if is_required %}
+        <span class="text-danger">*</span>
+      {% endif %}
+    </label>
+    <textarea value="{{ value }}" name="{{ name }}" rows="{{ rows }}" class="form-control" placeholder="{{ placeholder }}" {% if is_required %}required{% endif %}></textarea>
+  </div>
+{% endmacro %}
+

templates/components/typography.html

@@ -21,7 +21,7 @@
     </h1>
 
     <div>
-      {{ dropdown::book_dropdown_button(book, show) }}
+      {{ dropdown::crud_dropdown_button(book, "Actions", "books", show) }}
     </div>
   </div>
 {% endmacro %}

templates/index.html

@@ -33,7 +33,7 @@
         <div class="col-md-2">
           <label for="owner_id" class="form-label">Owner</label>
 
-          <select name="owner_id" class="form-control">
+          <select name="owner_id" class="form-select">
             <option></option>
             {% match query.owner_id %}
             {% when Some with (owner_id) %}
@@ -55,7 +55,7 @@
         <div class="col-md-2">
           <label for="current_holder_id" class="form-label">Current Holder</label>
 
-          <select name="current_holder_id" class="form-control">
+          <select name="current_holder_id" class="form-select">
             <option></option>
             {% match query.current_holder_id %}
             {% when Some with (current_holder_id) %}
@@ -75,7 +75,11 @@
         </div>
 
         <div class="col-md-1 d-flex align-items-end">
-          <input type="submit" value="Search" class="btn btn-info btn">
+          <input type="submit" value="Search" class="btn btn-info w-100">
+        </div>
+
+        <div class="col-md-1 d-flex align-items-end">
+          <a href="/" class="btn btn-light">Reset</a>
         </div>
       </div>
     </form>
@@ -95,7 +99,7 @@
       </thead>
       <tbody>
         {% for book_user in books_with_user %}
-        <tr>
+        <tr class="align-middle">
           <th scope="row">{{ book_user.book.id }}</th>
           <td>{{ book_user.book.title }}</td>
           <td>{{ book_user.book.authors }}</td>
@@ -109,7 +113,7 @@
             {% endmatch %}
           </td>
           <td>
-            {{ dropdown::book_dropdown_button(book_user.book) }}
+            {{ dropdown::crud_dropdown_button(book_user.book, "Actions", "books") }}
           </td>
         </tr>
         {% endfor %}
@@ -117,25 +121,27 @@
     </table>
     
     {% if total_page > 1 %}
-      <nav aria-label="Page navigation">
-        <ul class="pagination">
-          <li class="page-item {% if current_page <= 1 %}disabled{% endif %}">
-            <a class="page-link" href="/?{{ base_query }}page={% if current_page > 1 %}{{ current_page - 1 }}{% else %}1{% endif %}">Prev</a>
-          </li>
+      <div class="d-flex justify-content-center mt-1">
+        <nav aria-label="Page navigation">
+          <ul class="pagination">
+            <li class="page-item {% if current_page <= 1 %}disabled{% endif %}">
+              <a class="page-link" href="/?{{ base_query }}page={% if current_page > 1 %}{{ current_page - 1 }}{% else %}1{% endif %}">Prev</a>
+            </li>
         
-          {% for page in 1..(total_page + 1) %}
-            {% if page >= current_page - 1 && page <= current_page + 1 %}
-              <li class="page-item {% if page == current_page %}active{% endif %}">
-                <a class="page-link" href="/?{{ base_query }}page={{ page }}">{{ page }}</a>
-              </li>
-            {% endif %}
-          {% endfor %}
+            {% for page in 1..(total_page + 1) %}
+              {% if page >= current_page - 1 && page <= current_page + 1 %}
+                <li class="page-item {% if page == current_page %}active{% endif %}">
+                  <a class="page-link" href="/?{{ base_query }}page={{ page }}">{{ page }}</a>
+                </li>
+              {% endif %}
+            {% endfor %}
 
-          <li class="page-item {% if current_page == total_page %}disabled{% endif %}">
-            <a class="page-link" href="/?{{ base_query }}page={{ current_page + 1 }}">Next</a>
-          </li>
-        </ul>
-      </nav>
+            <li class="page-item {% if current_page == total_page %}disabled{% endif %}">
+              <a class="page-link" href="/?{{ base_query }}page={{ current_page + 1 }}">Next</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
     {% endif %}
   {% endcall %}
 {% endblock %}

templates/users/edit.html

@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+{% import "components/typography.html" as typography %}
+{% import "components/cards.html" as cards %}
+o{% import "components/inputs.html" as form_helpers %}
+
+{% block main %}
+  {{ typography::heading("New User") }}
+
+  {% call cards::card() %}
+    <form action="/users/{{ user.id }}" method="post">
+      <div class="row align-items-end">
+       <div class="col-md-10">
+          {{ form_helpers::input("name", "Name", value = user.name, is_required = true, placeholder = "Ex: Kropotkine", margin_bottom = false) }}
+       </div>
+
+       <div class="col-md-2">
+         <input type="submit" value="Create user" class="btn btn-success">
+       </div>
+     </div>
+    </form>
+  {% endcall %}
+{% endblock %} 

templates/users/index.html

@@ -1,9 +1,13 @@
 {% extends "base.html" %}
 {% import "components/typography.html" as typography %}
+{% import "components/dropdown.html" as dropdown %}
 {% import "components/cards.html" as cards %}
+{% import "components/inputs.html" as form_helpers %}
 
 {% block main %}
-  {{ typography::heading("All users") }}
+  {% call typography::heading("All users") %}
+    <a class="btn-success btn" href="/users/new">Add User</a>
+  {% endcall %}
 
   {% call cards::card() %}
     <table class="table table-hover">
@@ -17,30 +21,18 @@
         </tr>
       </thead>
       <tbody>
-        {% for (user, book_size, borrowed_book) in user_with_books_number %}
+        {% for user_information in user_with_books_number %}
           <tr>
-            <th scope="row">{{ user.id }}</th>
-            <td>{{ user.name }}</td>
-            <td>{{ book_size }}</td>
-            <td>{{ borrowed_book }}</td>
+            <th scope="row">{{ user_information.user.id }}</th>
+            <td>{{ user_information.user.name }}</td>
+            <td>{{ user_information.owner_book_number }}</td>
+            <td>{{ user_information.borrowed_book_number }}</td>
             <td>
-              <form method="post" action="/users/{{ user.id }}">
-                <input value="Delete" type="submit" class="btn btn-danger btn-sm">
-              </form>
+              {{ dropdown::crud_dropdown_button(user_information.user, "Actions", "users", show = false) }}
             </td>
           </tr>
         {% endfor %}
       </tbody>
-    </table>
+    </table>    
   {% endcall %}
-
-  {% call cards::card() %}
-    <form action="/users" method="post">
-      <label class="form-label">Name</label>
-      <input type="text" name="name" class="form-control">
-
-      <input type="submit" value="Create user" class="btn btn-success mt-3">
-    </form>
-  {% endcall %}
-
 {% endblock %}

templates/users/new.html

@@ -0,0 +1,21 @@
+{% extends "base.html" %}
+{% import "components/typography.html" as typography %}
+{% import "components/cards.html" as cards %}
+o{% import "components/inputs.html" as form_helpers %}
+
+{% block main %}
+  {{ typography::heading("New User") }}
+
+  {% call cards::card() %}
+    <form action="/users" method="post">
+      <div class="row align-items-end">
+       <div class="col-md-10">
+          {{ form_helpers::input("name", "Name", is_required = true, placeholder = "Ex: Kropotkine", margin_bottom = false) }}
+        </div>
+       <div class="col-md-2">
+         <input type="submit" value="Create user" class="btn btn-success">
+       </div>
+     </div>
+    </form>
+  {% endcall %}
+{% endblock %}