Merge pull request #37 from edipoarg/feature/ficha-with-officer

add officer to dependencias

src/components/fichas/Ficha.tsx

@@ -4,11 +4,13 @@ import gatilloCaba from "../../data/gatilloCaba.json";
 import reportesCaba from "../../data/reportesCaba.json";
 import styles from "./Ficha.module.css";
 import {
+  CasoDependencia,
   DataDeCasos,
   casoIsCasoDependencia,
   casoIsCasoGatillo,
   casoIsCasoReportes,
 } from "../../models/models";
+import cargos from "../../data/cargos.json";
 
 type TipoDeCaso = "dependencias" | "gatillo" | "reportes";
 
@@ -37,6 +39,21 @@ const dataByTipoCaso: Record<TipoDeCaso, DataDeCasos> = {
   reportes: reportesCaba,
 };
 
+const getOfficerDataByDependencia = (dependencia: CasoDependencia) => {
+  const associatedOfficer = cargos.find(
+    (cargo) => cargo.C_Dependencia === dependencia.properties.Nombre,
+  );
+  if (associatedOfficer === undefined) return null;
+  return {
+    nombreCompleto: associatedOfficer.C_Efectivo_AyN,
+    lps: associatedOfficer.C_LPS,
+    grado: associatedOfficer.C_GRADO,
+    desde: associatedOfficer.C_Desde_Cargo,
+    hasta: associatedOfficer.C_Hasta_Cargo,
+    email: associatedOfficer.C_Correo,
+  };
+};
+
 const Ficha = () => {
   const { Contador: contador } = useParams();
   if (contador === undefined) return <div>URL inválido (sin contador).</div>;
@@ -48,6 +65,14 @@ const Ficha = () => {
     (c) => c.properties.Contador === contador,
   );
   if (!caso) return <div>Caso no encontrado.</div>;
+  const dependenciaOfficerData = casoIsCasoDependencia(caso)
+    ? getOfficerDataByDependencia(caso)
+    : null;
+  const thereIsPoliceData =
+    dependenciaOfficerData !== null ||
+    (!casoIsCasoDependencia(caso) &&
+      (caso.properties.fuerza_involucrada !== "" ||
+        caso.properties.policia_involucrado !== ""));
   return (
     <section className={styles.ficha}>
       <div className={styles.data}>
@@ -99,28 +124,56 @@ const Ficha = () => {
           )}
         </ul>
       </div>
-      <div className={styles.policeData}>
-        {casoIsCasoGatillo(caso) && (
-          <>
-            <li className={styles.number}>
-              Fuerza: {caso.properties.fuerza_involucrada}
-            </li>
-            <li className={styles.number}>
-              Imputados: {caso.properties.policia_involucrado}
-            </li>
-          </>
-        )}
-        {casoIsCasoReportes(caso) && (
-          <>
-            <li className={styles.number}>
-              Fuerza: {caso.properties.fuerza_involucrada}
-            </li>
-            <li className={styles.number}>
-              Imputados: {caso.properties.policia_involucrado}
-            </li>
-          </>
-        )}
-      </div>
+      {thereIsPoliceData && (
+        <div className={styles.policeData}>
+          {casoIsCasoGatillo(caso) && (
+            <>
+              <li className={styles.number}>
+                Fuerza: {caso.properties.fuerza_involucrada}
+              </li>
+              <li className={styles.number}>
+                Imputados: {caso.properties.policia_involucrado}
+              </li>
+            </>
+          )}
+          {casoIsCasoReportes(caso) && (
+            <>
+              <li className={styles.number}>
+                Fuerza: {caso.properties.fuerza_involucrada}
+              </li>
+              <li className={styles.number}>
+                Imputados: {caso.properties.policia_involucrado}
+              </li>
+            </>
+          )}
+          {casoIsCasoDependencia(caso) && dependenciaOfficerData && (
+            <>
+              <li className={styles.number}>
+                Nombre y apellido: {dependenciaOfficerData?.nombreCompleto}
+              </li>
+              <li className={styles.number}>
+                Número de legajo: {dependenciaOfficerData?.lps}
+              </li>
+              <li className={styles.number}>
+                Grado: {dependenciaOfficerData?.grado}
+              </li>
+              <li className={styles.number}>
+                Desde: {dependenciaOfficerData?.desde}
+              </li>
+              {dependenciaOfficerData?.hasta && (
+                <li className={styles.number}>
+                  Hasta: {dependenciaOfficerData?.hasta}
+                </li>
+              )}
+              {dependenciaOfficerData?.email && (
+                <li className={styles.number}>
+                  Correo: {dependenciaOfficerData?.email}
+                </li>
+              )}
+            </>
+          )}
+        </div>
+      )}
     </section>
   );
 };