iColabora · ChrisCoy · Jul 6, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/package.json b/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "teste-fullstack",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.0.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "axios": "^0.27.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.4.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.4.2",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "dev": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "sass": "^1.53.0"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
+      rel="stylesheet"
+    />
+    <title>Relatório | Operação</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -0,0 +1,40 @@
+import React, { useEffect, useState } from "react";
+import ShowTableDetails from "./components/ShowTableDetails";
+import TableWithDiv from "./components/TableWithDiv";
+import TableWithTable from "./components/TableWithTable";
+import api from "./services/api";
+import "./styles/App.scss";
+import { Tarefa } from "./Types/Tarefa";
+
+function App() {
+  const [os, setOs] = useState<Tarefa[]>([]);
+  const [total, setTotal] = useState<Tarefa>();
+  const [selectedTask, setSelectedTask] = useState<Tarefa>();
+
+  useEffect(() => {
+    const response = api.get("").then((data) => {
+      setTotal(data.data.slice(-1)[0]);
+      data.data.pop();
+      setOs(data.data);
+    });
+  }, []);
+
+  useEffect(() => {
+    console.log("Task selecionada:");
+    console.log(selectedTask);
+  }, [selectedTask]);
+
+  return (
+    <>
+      {selectedTask && <ShowTableDetails setTarefa={setSelectedTask} tarefa={selectedTask} />}
+
+      <div className="container">
+        <h1 className="title">Relatório</h1>
+        <TableWithDiv tarefas={os} total={total} setSelectedTask={setSelectedTask} />
+        {/* <TableWithTable tarefas={os} total={total} /> */}
+      </div>
+    </>
+  );
+}
+
+export default App;
diff --git a/src/Types/Tarefa.ts b/src/Types/Tarefa.ts
@@ -0,0 +1,22 @@
+interface DrillDown {
+  INSTANCIA: number;
+  PROTOCOLO: string;
+  REGUA: string;
+  SLA: string;
+  STATUS: string;
+  TIPO_SOLICITACAO: string;
+  inicio: string;
+  operador: string;
+}
+
+export interface Tarefa {
+  TAREFA: string;
+  STT: string;
+  D0: number;
+  D1: number;
+  D2: number;
+  D3: number;
+  TOTAL: number;
+  VENCIDO: number;
+  DRILLDOWN: DrillDown[];
+}
diff --git a/src/components/ShowTableDetails/index.tsx b/src/components/ShowTableDetails/index.tsx
@@ -0,0 +1,158 @@
+import "./style.scss";
+import { Tarefa } from "../../Types/Tarefa";
+import { CgCloseR } from "react-icons/cg";
+import { useEffect, useState } from "react";
+
+interface ShowTableDetailsProps {
+  tarefa?: Tarefa;
+  setTarefa: (tarefa: Tarefa | undefined) => void;
+}
+
+export default function ShowTableDetails({ tarefa, setTarefa }: ShowTableDetailsProps) {
+  var toApllyZebra = 0;
+  const [checkboxes, setCheckboxes] = useState({
+    status: true,
+    protocolo: true,
+    regua: true,
+    tipoSolicitacao: true,
+    inicio: true,
+    operador: true,
+    SLA: true,
+    instancia: true,
+  });
+
+  useEffect(() => {
+    document.addEventListener(
+      "keydown",
+      (evt) => {
+        if (evt.key === "Escape") {
+          setTarefa(undefined);
+        }
+      },
+      true
+    );
+  }, []);
+
+  return (
+    <>
+      <div onClick={() => setTarefa(undefined)} className="closeWindow"></div>
+      <div className="windowContainer">
+        <div className="windowClose">
+          <CgCloseR
+            className="windowCloseButton"
+            onClick={() => setTarefa(undefined)}
+            size={24}
+          />
+        </div>
+        <div className="tableOptions">
+          <span>
+            Status:
+            <input
+              type="checkbox"
+              onClick={() => setCheckboxes({ ...checkboxes, status: !checkboxes.status })}
+              checked={checkboxes.status}
+            />
+          </span>
+          <span>
+            Protocolo:
+            <input
+              type="checkbox"
+              onClick={() =>
+                setCheckboxes({ ...checkboxes, protocolo: !checkboxes.protocolo })
+              }
+              checked={checkboxes.protocolo}
+            />
+          </span>
+          <span>
+            Regua:
+            <input
+              type="checkbox"
+              onClick={() => setCheckboxes({ ...checkboxes, regua: !checkboxes.regua })}
+              checked={checkboxes.regua}
+            />
+          </span>
+          <span>
+            Tipo Solicitação:{" "}
+            <input
+              type="checkbox"
+              onClick={() =>
+                setCheckboxes({
+                  ...checkboxes,
+                  tipoSolicitacao: !checkboxes.tipoSolicitacao,
+                })
+              }
+              checked={checkboxes.tipoSolicitacao}
+            />
+          </span>
+          <span>
+            Inicio:
+            <input
+              type="checkbox"
+              onClick={() => setCheckboxes({ ...checkboxes, inicio: !checkboxes.inicio })}
+              checked={checkboxes.inicio}
+            />
+          </span>
+          <span>
+            Operador:
+            <input
+              type="checkbox"
+              onClick={() => setCheckboxes({ ...checkboxes, operador: !checkboxes.operador })}
+              checked={checkboxes.operador}
+            />
+          </span>
+          <span>
+            SLA:
+            <input
+              type="checkbox"
+              onClick={() => setCheckboxes({ ...checkboxes, SLA: !checkboxes.SLA })}
+              checked={checkboxes.SLA}
+            />
+          </span>
+          <span>
+            Instância:
+            <input
+              type="checkbox"
+              onClick={() =>
+                setCheckboxes({ ...checkboxes, instancia: !checkboxes.instancia })
+              }
+              checked={checkboxes.instancia}
+            />
+          </span>
+        </div>
+        <div className="tableContainer">
+          <table className="drillDown">
+            <thead>
+              <tr>
+                {checkboxes.status && <th>Status</th>}
+                {checkboxes.protocolo && <th>Protocolo</th>}
+                {checkboxes.regua && <th>Régua</th>}
+                {checkboxes.tipoSolicitacao && <th>Tipo Solicitação</th>}
+                {checkboxes.inicio && <th>Inicio</th>}
+                {checkboxes.operador && <th>Operador</th>}
+                {checkboxes.SLA && <th>SLA</th>}
+                {checkboxes.instancia && <th>Instância</th>}
+              </tr>
+            </thead>
+            <tbody>
+              {tarefa?.DRILLDOWN.map((item) => {
+                toApllyZebra++;
+                return (
+                  <tr className={toApllyZebra % 2 ? "itemZebra" : ""}>
+                    {checkboxes.status && <td>{item.STATUS}</td>}
+                    {checkboxes.protocolo && <td>{item.PROTOCOLO}</td>}
+                    {checkboxes.regua && <td>{item.REGUA}</td>}
+                    {checkboxes.tipoSolicitacao && <td>{item.TIPO_SOLICITACAO}</td>}
+                    {checkboxes.inicio && <td>{item.inicio}</td>}
+                    {checkboxes.operador && <td>{item.operador}</td>}
+                    {checkboxes.SLA && <td>{item.SLA}</td>}
+                    {checkboxes.instancia && <td>{item.INSTANCIA}</td>}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </>
+  );
+}