Staging

app/assets/stylesheets/application.css

@@ -72,3 +72,11 @@ input::-webkit-inner-spin-button {
     -webkit-appearance: none;
 }
 /** HIDE-SPINNERS-END **/
+
+.sorted-asc::after {
+  content: " ▲";
+}
+
+.sorted-desc::after {
+  content: " ▼";
+}

app/controllers/productions_controller.rb

@@ -9,6 +9,16 @@ class ProductionsController < ApplicationController
 
   def index
     @productions = Production.includes(:tailor, production_products: :product).all
+
+    if params[:tailor_id].present?
+      @productions = @productions.where(tailor_id: params[:tailor_id])
+    end
+
+    if params[:service_order_number].present?
+      @productions = @productions.where("service_order_number LIKE ?", "%#{params[:service_order_number]}%")
+    end
+
+    @productions = @productions.order(service_order_number: :desc)
   end
 
   def show; end

app/views/productions/index.html.erb

@@ -9,20 +9,37 @@
     <%= link_to t('helpers.links.new'), new_production_path, class: 'btn btn-primary mb-3' %>
     <%= link_to t('productions.missing_pieces.title'), missing_pieces_productions_path, class: 'btn btn btn-info mb-3 ml-2' %>
 
+    <div class="card mb-3">
+      <div class="card-body">
+        <%= form_tag productions_path, method: :get, class: 'form-inline' do %>
+          <div class="form-group mr-2">
+            <%= label_tag :tailor_id, t('productions.index.filter_by_tailor'), class: 'mr-2' %>
+            <%= select_tag :tailor_id, options_from_collection_for_select(Tailor.all, :id, :name, params[:tailor_id]), prompt: t('productions.index.all_tailors'), class: 'form-control' %>
+          </div>
+          <div class="form-group mr-2">
+            <%= label_tag :service_order_number, t('productions.index.filter_by_service_order'), class: 'mr-2' %>
+            <%= text_field_tag :service_order_number, params[:service_order_number], class: 'form-control', placeholder: t('productions.index.enter_service_order') %>
+          </div>
+          <%= submit_tag t('productions.index.filter'), class: 'btn btn-primary' %>
+          <%= link_to t('productions.index.clear_filters'), productions_path, class: 'btn btn-secondary ml-2' %>
+        <% end %>
+      </div>
+    </div>
+
     <div class="card">
       <div class="card-body">
         <%= turbo_frame_tag :productions do %>
           <div class="table-responsive">
             <table class="table table-striped table-hover">
               <thead class="thead-dark">
                 <tr>
-                  <th><%= model_class.human_attribute_name(:service_order_number) %></th>
-                  <th><%= model_class.human_attribute_name(:tailor) %></th>
+                  <th data-column="service_order_number"><%= model_class.human_attribute_name(:service_order_number) %></th>
+                  <th data-column="tailor"><%= model_class.human_attribute_name(:tailor) %></th>
                   <th><%= t 'productions.index.product_summary' %></th>
-                  <th><%= model_class.human_attribute_name(:cut_date) %></th>
-                  <th><%= model_class.human_attribute_name(:expected_delivery_date) %></th>
-                  <th><%= model_class.human_attribute_name(:consider) %></th>
-                  <th><%= model_class.human_attribute_name(:confirmed) %></th>
+                  <th data-column="cut_date"><%= model_class.human_attribute_name(:cut_date) %></th>
+                  <th data-column="expected_delivery_date"><%= model_class.human_attribute_name(:expected_delivery_date) %></th>
+                  <th data-column="consider"><%= model_class.human_attribute_name(:consider) %></th>
+                  <th data-column="confirmed"><%= model_class.human_attribute_name(:confirmed) %></th>
                   <th><%= t 'helpers.actions' %></th>
                 </tr>
               </thead>
@@ -56,4 +73,91 @@
       </div>
     </div>
   </div>
-</div>
+</div>
+
+<script>
+function initSortableTable() {
+  const table = document.querySelector('.table-responsive table');
+  if (!table) return;
+
+  const headers = table.querySelectorAll('th[data-column]');
+  const tbody = table.querySelector('tbody');
+  let sortColumn = 'service_order_number'; // Set initial sort column
+  let sortAscending = false; // Start with descending order
+
+  // Initial sort
+  sortTable();
+
+  headers.forEach(header => {
+    header.addEventListener('click', () => {
+      const column = header.dataset.column;
+
+      if (sortColumn === column) {
+        sortAscending = !sortAscending;
+      } else {
+        sortColumn = column;
+        sortAscending = false; // Always start with descending order when changing columns
+      }
+
+      sortTable();
+    });
+  });
+
+  function sortTable() {
+    const rows = Array.from(tbody.querySelectorAll('tr'));
+    const sortedRows = sortRows(rows, sortColumn);
+
+    tbody.innerHTML = '';
+    sortedRows.forEach(row => tbody.appendChild(row));
+
+    updateSortIndicators(headers, Array.from(headers).find(h => h.dataset.column === sortColumn));
+  }
+
+  function sortRows(rows, column) {
+    return rows.sort((a, b) => {
+      const aValue = getCellValue(a, column);
+      const bValue = getCellValue(b, column);
+
+      if (column === 'cut_date' || column === 'expected_delivery_date') {
+        return compareDates(aValue, bValue);
+      } else if (column === 'service_order_number') {
+        return compareServiceOrderNumbers(aValue, bValue);
+      }
+
+      return compareValues(aValue, bValue);
+    });
+  }
+
+  function getCellValue(row, column) {
+    const index = Array.from(headers).findIndex(el => el.dataset.column === column);
+    return row.cells[index].textContent.trim();
+  }
+
+  function compareDates(a, b) {
+    const dateA = a ? new Date(a) : new Date(0);
+    const dateB = b ? new Date(b) : new Date(0);
+    return sortAscending ? dateA - dateB : dateB - dateA;
+  }
+
+  function compareServiceOrderNumbers(a, b) {
+    const numA = parseInt(a.replace(/\D/g, ''), 10);
+    const numB = parseInt(b.replace(/\D/g, ''), 10);
+    return sortAscending ? numA - numB : numB - numA;
+  }
+
+  function compareValues(a, b) {
+    if (a < b) return sortAscending ? -1 : 1;
+    if (a > b) return sortAscending ? 1 : -1;
+    return 0;
+  }
+
+  function updateSortIndicators(headers, currentHeader) {
+    headers.forEach(header => {
+      header.classList.remove('sorted-asc', 'sorted-desc');
+    });
+    currentHeader.classList.add(sortAscending ? 'sorted-asc' : 'sorted-desc');
+  }
+}
+
+document.addEventListener('turbo:load', initSortableTable);
+</script>

config/locales/pt-BR.models.productions.yml

@@ -37,6 +37,12 @@ pt-BR:
       product_summary: "Resumo da Produção"
       no_tailor: "Nenhum"
       no_products: "Nenhum produto"
+      filter_by_tailor: "Filtrar por Costureiro"
+      all_tailors: "Todos os Costureiros"
+      filter_by_service_order: "Filtrar por Ordem de Serviço"
+      enter_service_order: "Digite o Número da Ordem de Serviço"
+      filter: "Filtrar"
+      clear_filters: "Limpar Filtros"
     missing_pieces:
       title: "Produções com Peças Faltantes"
       filter_by_tailor: "Filtrar por Costureiro"