@acvl/mobile-components 0.0.1 → 0.0.3

package/src/pantallas/PantallaDeHistorial.tsx

@@ -0,0 +1,293 @@
+import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
+import React from "react";
+import { ActivityIndicator, Pressable, RefreshControl, ScrollView, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import BotonGrande from "../componentes/BotonGrande";
+import CabeceraEmpujada from "../componentes/CabeceraEmpujada";
+import EstadoVacio from "../componentes/EstadoVacio";
+import Tarjeta from "../componentes/Tarjeta";
+import { crearEstilos, renglon, tipografia, usePaleta, type Paleta } from "../tema";
+import { Text } from "../texto";
+
+/**
+ * Un movimiento de la bitácora de un registro, como lo responde cualquier endpoint `historial/`
+ * de los backends de ACV (`BaseHistorySerializer`): el registro **entero** como quedó, con quién,
+ * cuándo y qué campos cambiaron.
+ */
+export interface EventoDeHistorial {
+    /** Ya redactado por el backend: «Actualización - Concepto de Orden de envío». */
+    history_type: string;
+    /** El nombre completo de quien lo hizo; nulo si lo movió el sistema. */
+    history_user: string | null;
+    /** ISO en UTC. */
+    history_date: string;
+    /** Los que cambiaron en este paso; nulo en la creación, que no tiene contra qué compararse. */
+    campos_con_cambios: string[] | null;
+    [campo: string]: unknown;
+}
+
+/**
+ * Lo que devuelve cualquier endpoint `historial/`: la línea de tiempo, del más nuevo al más viejo,
+ * y aparte cómo se llama cada campo. Las etiquetas son además el filtro de qué se pinta: un campo
+ * sin etiqueta es de los internos de la bitácora.
+ */
+export interface Historial {
+    history: EventoDeHistorial[];
+    labels: Record<string, string>;
+}
+
+type NombreDeIcono = React.ComponentProps<typeof MaterialCommunityIcons>["name"];
+
+/**
+ * Cómo se pinta cada tipo de movimiento. El backend manda la acción ya redactada, así que el icono
+ * y el color salen del prefijo.
+ */
+const TIPOS: { prefijo: string; icono: NombreDeIcono; colores: (c: Paleta) => Colores }[] = [
+    { prefijo: "Creación", icono: "plus-circle-outline", colores: (c) => c.exito },
+    { prefijo: "Actualización", icono: "pencil-outline", colores: (c) => c.info },
+    { prefijo: "Eliminación", icono: "minus-circle-outline", colores: (c) => c.error },
+];
+type Colores = { fondo: string; tinta: string };
+
+const pintaDe = (c: Paleta, tipo: string) => {
+    const t = TIPOS.find((x) => tipo.startsWith(x.prefijo));
+    return t
+        ? { icono: t.icono, ...t.colores(c) }
+        : { icono: "history" as NombreDeIcono, fondo: c.superficieTenue, tinta: c.secondary };
+};
+
+/** Parte «Acción - Modelo» en sus dos mitades; sin guion, todo es el encabezado. */
+const partirTipo = (tipo: string) => {
+    const corte = tipo.indexOf(" - ");
+    if (corte === -1) return { accion: "", modelo: tipo };
+    return { accion: tipo.slice(0, corte), modelo: tipo.slice(corte + 3) };
+};
+
+/** El valor de un campo tal como viene de la bitácora, listo para pintarse. */
+const formatear = (valor: unknown): string => {
+    if (valor === null || valor === undefined || valor === "") return "—";
+    if (typeof valor === "boolean") return valor ? "Sí" : "No";
+    if (Array.isArray(valor)) return valor.length ? valor.join(", ") : "—";
+    if (typeof valor === "object") return JSON.stringify(valor);
+    return String(valor);
+};
+
+/** La fecha y hora del movimiento, en la hora del teléfono. */
+const fechaHora = (iso: string) => {
+    const fecha = new Date(iso);
+    return Number.isNaN(fecha.getTime())
+        ? "—"
+        : fecha.toLocaleString("es-MX", {
+              day: "2-digit",
+              month: "short",
+              year: "numeric",
+              hour: "2-digit",
+              minute: "2-digit",
+          });
+};
+
+/**
+ * Un movimiento.
+ *
+ * De entrada enseña sólo lo que cambió en ese paso: el evento trae el registro entero como quedó, y
+ * en un teléfono treinta campos por tarjeta esconden el que importa. El resto está a un toque, que
+ * es donde se va a buscar el dato que no se movió.
+ */
+export function TarjetaDeEvento({
+    evento,
+    labels,
+}: {
+    evento: EventoDeHistorial;
+    labels: Record<string, string>;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const [abierto, setAbierto] = React.useState(false);
+
+    const { accion, modelo } = partirTipo(evento.history_type);
+    const pinta = pintaDe(c, evento.history_type);
+
+    // Las etiquetas mandan qué se pinta y en qué orden.
+    const campos = Object.keys(labels).filter((campo) => campo in evento);
+    const cambiados = evento.campos_con_cambios;
+    const visibles = abierto ? campos : campos.filter((campo) => cambiados?.includes(campo));
+
+    return (
+        <Tarjeta style={styles.evento}>
+            <View style={styles.cabecera}>
+                <View style={[styles.icono, { backgroundColor: pinta.fondo }]}>
+                    <MaterialCommunityIcons name={pinta.icono} size={20} color={pinta.tinta} />
+                </View>
+                <View style={styles.flex}>
+                    <Text style={styles.titulo}>{modelo}</Text>
+                    <Text style={styles.linea}>
+                        {[accion, evento.history_user || "Sistema"].filter(Boolean).join(" · ")}
+                    </Text>
+                    <Text style={styles.linea}>{fechaHora(evento.history_date)}</Text>
+                </View>
+            </View>
+
+            {/* Un arreglo vacío es «se guardó sin mover nada»; nulo es la creación, que no lista
+                cambios. */}
+            {!abierto && cambiados?.length === 0 ? (
+                <Text style={styles.sinCambios}>Sin cambios en los campos.</Text>
+            ) : null}
+
+            {visibles.map((campo) => {
+                const cambiado = Boolean(cambiados?.includes(campo));
+                return (
+                    <View key={campo} style={[styles.dato, cambiado && styles.datoCambiado]}>
+                        <Text style={[styles.etiqueta, cambiado && styles.etiquetaCambiada]}>
+                            {labels[campo]}
+                        </Text>
+                        <Text style={styles.valor}>{formatear(evento[campo])}</Text>
+                    </View>
+                );
+            })}
+
+            {campos.length > 0 ? (
+                <Pressable
+                    onPress={() => setAbierto((previo) => !previo)}
+                    accessibilityRole="button"
+                    hitSlop={8}
+                    style={({ pressed }) => [styles.alternar, pressed && styles.presionada]}
+                >
+                    <Text style={styles.alternarTexto}>
+                        {abierto
+                            ? "Ocultar campos"
+                            : cambiados?.length
+                              ? "Ver todos los campos"
+                              : "Ver los campos"}
+                    </Text>
+                    <MaterialCommunityIcons
+                        name={abierto ? "chevron-up" : "chevron-down"}
+                        size={22}
+                        color={c.primary}
+                    />
+                </Pressable>
+            ) : null}
+        </Tarjeta>
+    );
+}
+
+/** Lo que la pantalla lee de un `use…Query` de RTK Query. */
+interface ConsultaDeHistorial {
+    data?: Historial;
+    isLoading: boolean;
+    isFetching: boolean;
+    isError: boolean;
+    refetch: () => unknown;
+}
+
+/**
+ * La bitácora de un registro: quién lo movió, cuándo y qué le cambió. Es el panel de historial del
+ * portal, que allá se acopla al costado de la ficha; en el teléfono no hay costado, así que es una
+ * pantalla empujada a la que se llega desde las acciones de la ficha.
+ *
+ * Quien la usa pone la consulta (de dónde se pide, con su permiso). Conviene pedirla con
+ * `refetchOnMountOrArgChange`: se abre justo después de mover algo, y servir la caché enseñaría un
+ * historial sin el movimiento que se viene a comprobar.
+ *
+ * En varios registros el backend mezcla en una sola línea de tiempo el registro y lo que cuelga de
+ * él (una orden con sus conceptos, un embarque con su transporte); por eso cada tarjeta dice de qué
+ * registro habla.
+ */
+export default function PantallaDeHistorial({
+    eyebrow,
+    consulta,
+}: {
+    /** De qué registro es: «Recibo R-0012». */
+    eyebrow: string;
+    consulta: ConsultaDeHistorial;
+}) {
+    const c = usePaleta();
+    const styles = useStyles();
+    const insets = useSafeAreaInsets();
+    const { data, isLoading, isFetching, isError, refetch } = consulta;
+    const eventos = data?.history ?? [];
+
+    return (
+        <View style={styles.root}>
+            <CabeceraEmpujada eyebrow={eyebrow} titulo="Historial" />
+            {/* El error sólo se queda con la pantalla cuando no hay nada que enseñar: un refresco
+                que falla no debe borrar el historial que ya se estaba leyendo. */}
+            {isError && !data ? (
+                <EstadoVacio
+                    icono="cloud-off-outline"
+                    titulo="No se pudo cargar el historial"
+                    texto="Revisa tu señal e intenta de nuevo."
+                >
+                    <BotonGrande icono="refresh" modo="contorno" onPress={() => refetch()}>
+                        Reintentar
+                    </BotonGrande>
+                </EstadoVacio>
+            ) : isLoading ? (
+                <ActivityIndicator color={c.primary} style={styles.cargando} />
+            ) : (
+                <ScrollView
+                    contentContainerStyle={[
+                        styles.contenido,
+                        { paddingBottom: insets.bottom + 24 },
+                    ]}
+                    refreshControl={
+                        <RefreshControl
+                            refreshing={isFetching}
+                            onRefresh={() => refetch()}
+                            tintColor={c.primary}
+                            colors={[c.primary]}
+                            progressBackgroundColor={c.superficie}
+                        />
+                    }
+                >
+                    {eventos.length === 0 ? (
+                        <EstadoVacio icono="history" titulo="Sin movimientos registrados" />
+                    ) : (
+                        eventos.map((evento, indice) => (
+                            // El backend no da una llave por evento (mezcla modelos con ids que se
+                            // repiten); el índice sirve porque la lista se reemplaza entera.
+                            <TarjetaDeEvento
+                                key={indice}
+                                evento={evento}
+                                labels={data?.labels ?? {}}
+                            />
+                        ))
+                    )}
+                </ScrollView>
+            )}
+        </View>
+    );
+}
+
+const useStyles = crearEstilos((c) => ({
+    root: { flex: 1, backgroundColor: c.fondo },
+    cargando: { marginTop: 40 },
+    contenido: { padding: 16, gap: 12 },
+    flex: { flex: 1 },
+    evento: { gap: 10 },
+    cabecera: { flexDirection: "row", alignItems: "flex-start", gap: 12 },
+    icono: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
+        alignItems: "center",
+        justifyContent: "center",
+    },
+    titulo: { ...renglon(tipografia.cuerpo), fontWeight: "800" },
+    linea: { ...renglon(tipografia.secundario), color: c.secondary },
+    sinCambios: { ...renglon(tipografia.secundario), color: c.secondary, fontStyle: "italic" },
+    // Un campo por renglón: con la letra grande, dos columnas parten los valores a media palabra.
+    dato: { borderRadius: 10, paddingVertical: 6, paddingHorizontal: 10, gap: 2 },
+    datoCambiado: { backgroundColor: c.primaryWash },
+    etiqueta: {
+        ...renglon(tipografia.etiqueta),
+        fontWeight: "800",
+        color: c.secondary,
+        textTransform: "uppercase",
+        letterSpacing: 0.6,
+    },
+    etiquetaCambiada: { color: c.primary },
+    valor: { ...renglon(tipografia.secundario), fontWeight: "600" },
+    alternar: { flexDirection: "row", alignItems: "center", gap: 2, alignSelf: "flex-start" },
+    alternarTexto: { ...renglon(tipografia.secundario), fontWeight: "700", color: c.primary },
+    presionada: { opacity: 0.6 },
+}));

package/lib/module/fotos/reducir.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ImageManipulator","SaveFormat","Image","LADO_MAXIMO","CALIDAD","reducirFoto","asset","width","height","cabe","Math","max","mimeType","contexto","manipulate","uri","resize","imagen","renderAsync","reducida","saveAsync","compress","format","JPEG","base","fileName","split","pop","replace","fileSize","undefined","error","console","warn","reducirImagenAdjunta","archivo","getSize","nombre","tipo","type"],"sourceRoot":"../../../src","sources":["fotos/reducir.ts"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/fotos/reducir.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"reducir.d.ts","sourceRoot":"","sources":["../../../../src/fotos/reducir.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D;;;;GAIG;AACH,eAAO,MAAM,WAAW,OAAO,CAAC;AAKhC;;;;;;;;;GASG;AACH,wBAAsB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,CAAC,CA+BpF;AAED;;;GAGG;AACH,wBAAsB,oBAAoB,CAAC,OAAO,EAAE;IAChD,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CAChB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAoBzD"}