💡(#87): configurando tabela de Pesquisa Avançada

Co-authored-by: Ceci Quaresma <[email protected]>

implementacao-front/src/components/Tabela.module.css

@@ -0,0 +1,22 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 35px;
+}
+
+.inputs {
+    display: flex;
+    gap: 15px;
+}
+
+.tabela {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}

implementacao-front/src/components/Tabela.tsx

@@ -5,55 +5,107 @@ import {
   MDBTable,
   MDBTableBody,
   MDBTableHead,
+  MDBBtn,
 } from "mdb-react-ui-kit";
-import { useState } from "react";
-import { Pessoas } from "../data/db";
+import { useState, useEffect } from "react";
+import { data2 } from "../data/nomesLimpos2";
+
+// Interface para a estrutura dos dados a serem exibidos na tabela
+interface TabelaData {
+  data: string;
+  nome: string;
+  cargo: string;
+  acao: string;
+}
 
 function Tabela() {
-  const [data] = useState(Pessoas);
+  const [data, setData] = useState<TabelaData[]>([]);
+  const [searchTerm, setSearchTerm] = useState<string>("");
+
+  useEffect(() => {
+    // A tabela deve estar vazia inicialmente
+    setData([]);
+  }, []);
+
+  const handleSearch = () => {
+    const formattedData: TabelaData[] = [];
+
+    for (const [dia, valores] of Object.entries(data2)) {
+      const nomeados = valores.nomes_nomeados
+        .filter((nome) => nome.toLowerCase().includes(searchTerm.toLowerCase()))
+        .map((nome) => ({
+          data: dia,
+          nome: nome.split(" - ")[0],
+          cargo: nome.includes("-") ? nome.split(" - ")[1] : "não especificado",
+          acao: "nomeação",
+        }));
+
+      const exonerados = valores.nomes_exonerados
+        .filter((nome) => nome.toLowerCase().includes(searchTerm.toLowerCase()))
+        .map((nome) => ({
+          data: dia,
+          nome: nome.split(" - ")[0],
+          cargo: nome.includes("-") ? nome.split(" - ")[1] : "não especificado",
+          acao: "exoneração",
+        }));
+
+      formattedData.push(...nomeados, ...exonerados);
+    }
+
+    setData(formattedData);
+  };
 
   return (
-    <MDBContainer>
-      <div style={{ marginTop: "100px" }}>
-        <MDBRow>
-          <MDBCol size={12}>
-            <MDBTable>
-              <MDBTableHead dark>
+    <MDBContainer style={{ marginTop: "10px" }}>
+      <MDBRow>
+        <MDBCol size={4}>
+          <input
+            type="text"
+            placeholder="Pesquisar nome..."
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </MDBCol>
+        <MDBCol size={2}>
+          <MDBBtn onClick={handleSearch} color="primary">
+            Pesquisar
+          </MDBBtn>
+        </MDBCol>
+      </MDBRow>
+      <MDBRow>
+        <MDBCol size={12}>
+          <MDBTable>
+            <MDBTableHead dark>
+              <tr>
+                <th scope="col">Nome</th>
+                <th scope="col">Cargo</th>
+                <th scope="col">Ação</th>
+                <th scope="col">Data</th>
+              </tr>
+            </MDBTableHead>
+            <MDBTableBody>
+              {data.length === 0 ? (
                 <tr>
-                  <th scope="col">nome</th>
-                  <th scope="col">cpf</th>
-                  <th scope="col">cargo</th>
-                  <th scope="col">acao</th>
-                  <th scope="col">dia</th>
+                  <td colSpan={4} className="text-center mb-0">
+                    Nenhum dado encontrado
+                  </td>
                 </tr>
-              </MDBTableHead>
-              {data.length === 0 ? (
-                <MDBTableBody className="align-center mb-0">
-                  <tr>
-                    <td colSpan={8} className="text-center mb-0">
-                      No Data Found
-                    </td>
-                  </tr>
-                </MDBTableBody>
               ) : (
-                data.map((item) => (
-                  <MDBTableBody>
-                    <tr>
-                      <td>{item.nome}</td>
-                      <td>{item.cpf}</td>
-                      <td>{item.cargo}</td>
-                      <td>{item.acao}</td>
-                      <td>{item.dia}</td>
-                    </tr>
-                  </MDBTableBody>
+                data.map((item, index) => (
+                  <tr key={index}>
+                    <td>{item.nome}</td>
+                    <td>{item.cargo}</td>
+                    <td>{item.acao}</td>
+                    <td>{item.data}</td>
+                  </tr>
                 ))
               )}
-            </MDBTable>
-          </MDBCol>
-        </MDBRow>
-      </div>
+            </MDBTableBody>
+          </MDBTable>
+        </MDBCol>
+      </MDBRow>
     </MDBContainer>
   );
 }
 
-export default Tabela;
+export default Tabela;