1. Filtro panel habitaciones

pms/statics/js/filter_room.js

@@ -0,0 +1,38 @@
+
+const searchInput = document.getElementById("room-search");
+const container = document.getElementById("room-list-container");
+let timeout = null;
+
+searchInput.addEventListener("input", function () {
+  clearTimeout(timeout);
+
+  timeout = setTimeout(() => {
+    // trim() delete unnecessary whitespaces
+    const query = searchInput.value.trim();
+
+    // Prevent unnecessary requests
+    if (query.length > 0 && query.length < 4) {
+      return;
+    }
+
+    fetch(`?q=${query}`)
+      .then((response) => response.text())
+      .then((html) => {
+        // Parse the received HTML text into a virtual document
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(html, "text/html");
+
+        // Extract ONLY the content from the room list container
+        const newContent = doc.getElementById(
+          "room-list-container",
+        ).innerHTML;
+
+        // Update the UI 
+        container.innerHTML = newContent;
+
+        // Update URL with rooms filtered 
+        const newURL = query ? `?q=${query}` : window.location.pathname;
+        window.history.replaceState(null, "", newURL);
+      });
+  }, 300);
+});

pms/templates/rooms.html

@@ -2,6 +2,18 @@
 
 {% block content %}
 <h1>Habitaciones del hotel</h1>
+
+<div class="mb-4">
+    <input 
+        type="text" 
+        id="room-search" 
+        class="form-control" 
+        placeholder="Buscar por nombre de habitación..."
+        value="{{ request.GET.q }}"
+    >
+</div>
+
+<div id="room-list-container">
 {% for room in rooms%}
 <div class="row card mt-3 mb-3 hover-card bg-tr-250">
     <div class="col p-3">
@@ -13,7 +25,15 @@ <h1>Habitaciones del hotel</h1>
         </div>
 
     </div>
-
 </div>
+
+{% empty %}
+    <div class="alert alert-warning mt-3">
+        No se han encontrado habitaciones.
+    </div>
 {% endfor %}
+</div>
+
+{% load static %}
+<script async src="{% static 'js/filter_room.js' %}"></script>
 {% endblock content%}

pms/tests.py

@@ -1,3 +1,45 @@
-from django.test import TestCase
+from django.test import TestCase,override_settings
+from .models import Room, Room_type
 
-# Create your tests here.
+@override_settings(STATICFILES_STORAGE='django.contrib.staticfiles.storage.StaticFilesStorage')
+class RoomSearchTestCase(TestCase):
+    def setUp(self):
+
+        self.room_type = Room_type.objects.create(name="Simple", price=20, max_guests=1)
+
+        Room.objects.create(name="Room 1.1", room_type=self.room_type,description="lorem ipsuum")
+        Room.objects.create(name="Room 1.2", room_type=self.room_type,description="lorem ipsuum")
+        Room.objects.create(name="Room 2.1", room_type=self.room_type,description="lorem ipsuum")
+        Room.objects.create(name="Room 4.1", room_type=self.room_type,description="lorem ipsuum")
+
+
+    def test_search_no_query_returns_all(self):
+        """ 
+        case: no query param introduced
+        expect: return all rooms available in this case 4 rooms 
+        """
+        response = self.client.get('/rooms/') 
+
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(len(response.context['rooms']), 4)
+
+    def test_search_prefix_match(self):
+        """
+        case: user introduce Room 1
+        expect: Room 1.1 & Room 1.2 
+        """
+        response = self.client.get('/rooms/?q=Room 1')
+
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(len(response.context['rooms']), 2)
+
+    def test_search_no_match(self):
+        """
+        case: user introduce invalid room name
+        expect: 0 rooms
+        """
+
+        response = self.client.get('/rooms/?q=Example')
+
+        self.assertEqual(response.status_code, 200)
+        self.assertEqual(len(response.context['rooms']), 0)

pms/views.py

@@ -240,6 +240,14 @@ class RoomsView(View):
     def get(self, request):
         # renders a list of rooms
         rooms = Room.objects.all().values("name", "room_type__name", "id")
+
+        # get filter query from URL
+        query = request.GET.get('q')
+
+        # apply prefix filter
+        if query:
+            rooms = rooms.filter(name__istartswith=query)
+
         context = {
             'rooms': rooms
         }