adding filter to your services and client

Voltz-Corp · Jun 7, 2024 · 4b6b6ae · 4b6b6ae
1 parent faa4b63
commit 4b6b6ae
Show file tree

Hide file tree

Showing 7 changed files with 187 additions and 23 deletions.
diff --git a/app_client/static/css/app_client/styles.css b/app_client/static/css/app_client/styles.css
@@ -79,12 +79,20 @@ a {
   align-items: center;
   justify-content: space-between;
   padding: 20px 24px;
+  position: relative;
 }
 
-.tableContainer > div div {
+.tableContainer > div .openFilterModalBtn {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  border: none;
+  border: 2px solid var(--gray-200);
+  background-color: var(--white);
+  border-radius: 4px;
+  color: var(--gray-800);
 }
 
 .tableContainer h3 {

diff --git a/app_client/static/js/filter-order-client.js b/app_client/static/js/filter-order-client.js
@@ -0,0 +1,100 @@
+const filterOrderModal = document.querySelector(".filterModal");
+const closeFilterOrderModalBtn = document.querySelector(".closeFilterModalBtn");
+const openFilterOrderModalBtn = document.querySelector(".openFilterModalBtn");
+const applyFilterBtn = document.querySelector('.applyFilters');
+
+const tableBody = document.querySelector('tbody');
+
+const orderStatus = document.querySelector("#orderStatus");
+
+const orders = document.querySelector("#allOrders").value;
+const allOrdersFormatted = JSON.parse(orders.replace(/'/g, '"').replace(/None/g, null).replace(/True/g, true).replace(/False/g,false));
+
+let filteredOrders = [];
+
+// Modal functions
+function handleOpenFilterOrderModal() {
+  filterOrderModal.style.display = "block";
+}
+
+function handleCloseFilterOrderModal() {
+  filterOrderModal.style.display = "none";
+}
+
+function formatStatusString(status) {
+  const specialCharactersWords = {
+    "PECAS": "PEÇAS",
+    "ANALISE": "ANÁLISE",
+    "ORCAMENTO": "ORÇAMENTO",
+    "CONFIRMACAO": "CONFIRMAÇÃO"
+  };
+
+  const statusWithoutUnderline = status.replace(/_/g, ' ');
+
+  let statusCapitalized = statusWithoutUnderline.replace(/^\w/, function(match) {
+    return match.toUpperCase();
+  });
+
+  Object.keys(specialCharactersWords).forEach(key => {
+    statusCapitalized = statusCapitalized.replace(new RegExp(key, 'g'), specialCharactersWords[key]);
+  });
+
+  return statusCapitalized;
+}
+
+function handleLoadFilteredHtml(order) {
+  console.log(order)
+  return (
+    `
+    <tr>
+      <td>
+        <div class="${order.fields.status}"> ${formatStatusString(order.fields.status)} </div>
+      </td>
+      <td>${order.fields.productType} | ${order.fields.productModel}</td>
+      <td> 
+        ${ order.fields.scheduled_date && order.fields.status === 'AGENDADO' ? `${ order.scheduled_date } ` : '-' }
+      </td>
+      <td>
+          <a class="view" href="${`/cliente/visualizar/${order.pk}/`}">
+              <button>Visualizar</button>
+          </a>
+      </td>
+      
+      ${order.fields.closedAt ||  order.fields.status == 'CANCELADO' ? (
+      `
+        <td>
+          <a class="delete" href="${`/cliente/apagar_serviço/${order.pk}/`}">
+              <button>Remover</button>
+          </a>
+        </td>
+      `
+      ) : ''}
+    </tr>
+    `
+  );
+}
+
+function handleFilterOrders() {
+  const status = orderStatus.value;
+
+  let newTableBody = "";
+
+  if (status === 'all') {
+    filteredOrders = allOrdersFormatted;
+  } else {
+    filteredOrders = allOrdersFormatted.filter((order) => order.fields.status === status);
+  }
+
+
+  filteredOrders.forEach(order => {
+    newTableBody += handleLoadFilteredHtml(order);
+  });
+
+  const node = new DOMParser().parseFromString(filteredOrders, 'text/html').body.firstElementChild;
+  tableBody.innerHTML = newTableBody;
+  handleCloseFilterOrderModal();
+}
+
+openFilterOrderModalBtn.addEventListener("click", () => handleOpenFilterOrderModal());
+closeFilterOrderModalBtn.addEventListener("click", () => handleCloseFilterOrderModal());
+applyFilterBtn.addEventListener("click", () => handleFilterOrders());
diff --git a/app_client/templates/RequestOrder/orders.html b/app_client/templates/RequestOrder/orders.html
@@ -4,6 +4,7 @@
 {% block 'head' %}
     <link rel="stylesheet" type="text/css" href="{% static 'css\app_client\styles.css' %}">
     <link rel="stylesheet" type="text/css" href="{% static 'css\app_client\toast.css' %}">
+    <link rel="stylesheet" href="{% static 'app_company/css/modal/filter-order-modal.css' %}">
     <link rel="shortcut icon" href="https://i.imgur.com/FShMthn.png" type="image/x-icon">
     <title>Eccel-tec | Seus serviços</title>
 {% endblock %}
@@ -48,6 +49,7 @@
 {% endfor %}
 
 <section class="list-requests-container">
+    <input type="hidden" value="{{ your_orders_formatted }}" id="allOrders">
     <h1 class="title">Seus serviços</h1>
 
     <a href="{% url 'client:request_os' %}" >
@@ -58,7 +60,49 @@ <h1 class="title">Seus serviços</h1>
 
     <section class="tableContainer">
         <div>
-        <h3>Suas solicitações</h3>
+            <h3>Suas solicitações</h3>
+
+            <button class="openFilterModalBtn">
+                <i data-lucide="list-filter" width="20" height="20"></i>
+                Filtrar
+            </button>
+
+            <section class="filterModal">
+                <header>
+                    <p>
+                        Filtros 
+                    </p>
+
+                    <button type="button" class="closeFilterModalBtn">
+                        <i data-lucide="x" width="20" height="20"></i>
+                    </button>
+                </header>
+
+                <div class="filterModalContent">
+                    <div class="statusContainer">
+                        <label for="orderStatus">Tipo de status:</label>
+                        <select name="orderStatus" id="orderStatus">
+                            <option value="all" selected>Todos</option>
+                            <option value="EM_ANALISE">Em análise</option>
+                            <option value="AGENDADO">Agendado</option>
+                            <option value="AGUARDANDO_ORCAMENTO">Aguardando orçamento</option>
+                            <option value="AGUARDANDO_CONFIRMACAO" >Aguardando confirmação</option>
+                            <option value="RECUSADO">Recusado</option>
+                            <option value="CANCELADA">Cancelada</option>
+                            <option value="ACEITO">Aceito</option>
+
+                            <option value="EM_REPARO">Em reparo</option>
+                            <option value="AGUARDANDO_PECAS">Aguardando peças</option>
+                            <option value="CONSERTO_FINALIZADO">Conserto finalizado</option>
+                            <option value="CANCELADO">Cancelado</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div class="actions">
+                    <button type="button" class="applyFilters">Aplicar</button>
+                </div>
+            </section>
         </div>
 
         <table>
@@ -89,17 +133,8 @@ <h3>Suas solicitações</h3>
                             <button>Visualizar</button>
                         </a>
                     </td>
-
-                    {% if order.status == 'CONSERTO_FINALIZADO' %}
-                        <td>
-                            <a href="{% url 'client:rate_service' order.id %}">
-                                <i data-lucide="star" width="28" height="28" color="#d4c02a"></i>
-                            </a>
-                        </td>
-                    {% endif %} 
-
 
-                    {% if order.closedAt or order.status == 'CANELADO'%}
+                    {% if order.closedAt or order.status == 'CANCELADO' %}
                         <td>
                             <a class="delete" href="{% url 'client:delete_service' order.id %}">
                                 <button>Remover</button>
@@ -113,8 +148,7 @@ <h3>Suas solicitações</h3>
     </section>
 </section>
 
-{% block 'modal' %}
-{% endblock %}
-
-
+    {% block 'modal' %}
+    {% endblock %}
+<script src="{% static 'js/filter-order-client.js' %}"></script>
 {% endblock %}
diff --git a/app_client/views.py b/app_client/views.py
@@ -1,3 +1,4 @@
+import json
 import re
 from datetime import date, timedelta
 
@@ -21,6 +22,7 @@
 from django.template.loader import render_to_string
 from django.utils.html import strip_tags
 from django.conf import settings
+from django.core.serializers import serialize
 
 
 class SignUpClient(View): 
@@ -99,11 +101,14 @@ def post(self, request):
 
 class OrderViewView( View):
     def get(self, request):
-        orders = OrderRequest.objects.filter(userClient_id=request.user.id)        
+        orders = OrderRequest.objects.filter(userClient_id=request.user.id)  
+        serialized_your_orders = serialize("json", orders)
+        serialized_your_orders = json.loads(serialized_your_orders)      
 
         ctx = {
             'orders': orders,
-            'user': request.user
+            'user': request.user,
+            "your_orders_formatted": serialized_your_orders
         }
 
         return render(request, 'RequestOrder/orders.html', ctx)

diff --git a/app_company/static/app_company/js/filter-order.js b/app_company/static/app_company/js/filter-order.js
@@ -23,14 +23,24 @@ function handleCloseFilterOrderModal() {
 }
 
 function formatStatusString(status) {
+  const specialCharactersWords = {
+    "PECAS": "PEÇAS",
+    "ANALISE": "ANÁLISE",
+    "ORCAMENTO": "ORÇAMENTO",
+    "CONFIRMACAO": "CONFIRMAÇÃO"
+  };
 
   const statusWithoutUnderline = status.replace(/_/g, ' ');
 
-  const statusCapitalized = statusWithoutUnderline.replace(/^\w/, function(match) {
+  let statusCapitalized = statusWithoutUnderline.replace(/^\w/, function(match) {
     return match.toUpperCase();
   });
 
-  return statusCapitalized.replace("pecas", "peças");
+  Object.keys(specialCharactersWords).forEach(key => {
+    statusCapitalized = statusCapitalized.replace(new RegExp(key, 'g'), specialCharactersWords[key]);
+  });
+
+  return statusCapitalized;
 }
 
 function formatDateToBr(dateString) {
@@ -59,6 +69,9 @@ function handleLoadFilteredHtml(order) {
       <td>
         ${order.fields.isOs ? "Ordem de Serviço" : "Solicitação"}
       </td>
+      <td>
+        ${order.employee ? order.employee.first_name : '-'}
+      </td>
       <td>
         <a href="${order.fields.isOs ? `/empresa/os/${order.pk}` : `/empresa/solicitacao/${order.pk}`}">
           <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="#155ec8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-eye"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>

diff --git a/app_company/templates/app_company/your-services.html b/app_company/templates/app_company/your-services.html
@@ -10,7 +10,7 @@
 
 {% block 'body' %}
 <div class="content">
-    <input type="hidden" value="{{ all_orders_formatted }}" id="allOrders">
+    <input type="hidden" value="{{ your_orders_formatted }}" id="allOrders">
     <section class="listOrderRequestCompanyContainer">
         <h1 class="title">Seus serviços</h1>
 

diff --git a/app_company/views.py b/app_company/views.py
@@ -487,8 +487,12 @@ def get(self, request):
         user_id = request.user.id
 
         orders = OrderRequest.objects.filter(employee_id=user_id)
+        serialized_your_orders = serialize("json", orders)
+        serialized_your_orders = json.loads(serialized_your_orders)
+
         ctx = {
-            "orders": orders
+            "orders": orders,
+            "your_orders_formatted": serialized_your_orders,
         }
 
         return render(request, 'app_company/your-services.html', ctx)