From 01565871355dc101073d8fbc9ce25690fa87276d Mon Sep 17 00:00:00 2001 From: Pedro Losas Date: Mon, 11 Nov 2024 22:42:19 +0100 Subject: [PATCH] add dirty table in faults --- package.json | 1 + pnpm-lock.yaml | 76 ++++++++++++++++++++++++++++ src/components/table/TableLoader.tsx | 22 ++++++++ src/models/fault.interface.ts | 31 ++++++++++++ src/pages/faults/Faults.tsx | 63 ++++++++++++++++++++++- src/services/faults/get-faults.tsx | 15 ++++++ 6 files changed, 207 insertions(+), 1 deletion(-) create mode 100644 src/components/table/TableLoader.tsx create mode 100644 src/models/fault.interface.ts create mode 100644 src/services/faults/get-faults.tsx diff --git a/package.json b/package.json index a97f004..90401ea 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@mui/x-date-pickers": "^7.18.0", "cookiejs": "^2.1.3", "dayjs": "^1.11.13", + "material-react-table": "^3.0.1", "pocketbase": "^0.21.5", "react": "^18.3.1", "react-dom": "^18.3.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 30151e6..a436859 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,6 +26,9 @@ dependencies: dayjs: specifier: ^1.11.13 version: 1.11.13 + material-react-table: + specifier: ^3.0.1 + version: 3.0.1(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/icons-material@6.1.1)(@mui/material@6.1.1)(@mui/x-date-pickers@7.18.0)(react-dom@18.3.1)(react@18.3.1) pocketbase: specifier: ^0.21.5 version: 0.21.5 @@ -1114,6 +1117,45 @@ packages: dev: true optional: true + /@tanstack/match-sorter-utils@8.19.4: + resolution: {integrity: sha512-Wo1iKt2b9OT7d+YGhvEPD3DXvPv2etTusIMhMUoG7fbhmxcXCtIjJDEygy91Y2JFlwGyjqiBPRozme7UD8hoqg==} + engines: {node: '>=12'} + dependencies: + remove-accents: 0.5.0 + dev: false + + /@tanstack/react-table@8.20.5(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-WEHopKw3znbUZ61s9i0+i9g8drmDo6asTWbrQh8Us63DAk/M0FkmIqERew6P71HI75ksZ2Pxyuf4vvKh9rAkiA==} + engines: {node: '>=12'} + peerDependencies: + react: '>=16.8' + react-dom: '>=16.8' + dependencies: + '@tanstack/table-core': 8.20.5 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + + /@tanstack/react-virtual@3.10.6(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-xaSy6uUxB92O8mngHZ6CvbhGuqxQ5lIZWCBy+FjhrbHmOwc6BnOnKkYm2FsB1/BpKw/+FVctlMbEtI+F6I1aJg==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 + dependencies: + '@tanstack/virtual-core': 3.10.6 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + + /@tanstack/table-core@8.20.5: + resolution: {integrity: sha512-P9dF7XbibHph2PFRz8gfBKEXEY/HJPOhym8CHmjF8y3q5mWpKx9xtZapXQUWCgkqvsK0R46Azuz+VaxD4Xl+Tg==} + engines: {node: '>=12'} + dev: false + + /@tanstack/virtual-core@3.10.6: + resolution: {integrity: sha512-1giLc4dzgEKLMx5pgKjL6HlG5fjZMgCjzlKAlpr7yoUtetVPELgER1NtephAI910nMwfPTHNyWKSFmJdHkz2Cw==} + dev: false + /@types/babel__core@7.20.5: resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} dependencies: @@ -1829,6 +1871,11 @@ packages: function-bind: 1.1.2 dev: false + /highlight-words@1.2.2: + resolution: {integrity: sha512-Mf4xfPXYm8Ay1wTibCrHpNWeR2nUMynMVFkXCi4mbl+TEgmNOe+I4hV7W3OCZcSvzGL6kupaqpfHOemliMTGxQ==} + engines: {node: '>= 16', npm: '>= 8'} + dev: false + /hoist-non-react-statics@3.3.2: resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} dependencies: @@ -1968,6 +2015,31 @@ packages: yallist: 3.1.1 dev: true + /material-react-table@3.0.1(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/icons-material@6.1.1)(@mui/material@6.1.1)(@mui/x-date-pickers@7.18.0)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-RP+bnpsOAH5j6zwP04u9HB37fyqbd6mVv9mkT4IUJC3e3gEqixZmkNdJMVM1ZVHoq7yIaM381xf22mpBVe0IaA==} + engines: {node: '>=16'} + peerDependencies: + '@emotion/react': '>=11.13' + '@emotion/styled': '>=11.13' + '@mui/icons-material': '>=6' + '@mui/material': '>=6' + '@mui/x-date-pickers': '>=7.15' + react: '>=18.0' + react-dom: '>=18.0' + dependencies: + '@emotion/react': 11.13.3(@types/react@18.3.9)(react@18.3.1) + '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.3.9)(react@18.3.1) + '@mui/icons-material': 6.1.1(@mui/material@6.1.1)(@types/react@18.3.9)(react@18.3.1) + '@mui/material': 6.1.1(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@types/react@18.3.9)(react-dom@18.3.1)(react@18.3.1) + '@mui/x-date-pickers': 7.18.0(@emotion/react@11.13.3)(@emotion/styled@11.13.0)(@mui/material@6.1.1)(@mui/system@6.1.1)(@types/react@18.3.9)(dayjs@1.11.13)(react-dom@18.3.1)(react@18.3.1) + '@tanstack/match-sorter-utils': 8.19.4 + '@tanstack/react-table': 8.20.5(react-dom@18.3.1)(react@18.3.1) + '@tanstack/react-virtual': 3.10.6(react-dom@18.3.1)(react@18.3.1) + highlight-words: 1.2.2 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: false + /merge2@1.4.1: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} @@ -2211,6 +2283,10 @@ packages: resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==} dev: false + /remove-accents@0.5.0: + resolution: {integrity: sha512-8g3/Otx1eJaVD12e31UbJj1YzdtVvzH85HV7t+9MJYk/u3XmkOUJ5Ys9wQrf9PCPK8+xn4ymzqYCiZl6QWKn+A==} + dev: false + /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} diff --git a/src/components/table/TableLoader.tsx b/src/components/table/TableLoader.tsx new file mode 100644 index 0000000..722db86 --- /dev/null +++ b/src/components/table/TableLoader.tsx @@ -0,0 +1,22 @@ +import { Divider, Skeleton } from '@mui/material'; +import { Fragment } from 'react/jsx-runtime'; + +const TableLoader = ({ count }: { count: number }) => { + return ( + + + {Array.from({ length: count }).map((_, index) => ( + + + + + ))} + + ); +}; + +export default TableLoader; diff --git a/src/models/fault.interface.ts b/src/models/fault.interface.ts new file mode 100644 index 0000000..e851082 --- /dev/null +++ b/src/models/fault.interface.ts @@ -0,0 +1,31 @@ +export interface Fault { + avisoLegalConsentimiento: boolean; + collectionId: string; + collectionName: string; + contactoCorreoElectronico: string; + contactoNombre: string; + contactoTelefono: string; + created: string; // ISO 8601 Date string + descripcionAveria: string; + direccionLinkGoogleMaps: string; + direccionPoblacion: string; + direccionTexto: string; + estado: string; + fotos: string[]; // Array of URLs or file paths + grupoElectrodependiente: boolean; + id: string; + idAveria: number; + marcaTemporal: string; // ISO 8601 Date string + notas: string; + sincronizado: boolean; + ultimaActualizacion: string; // ISO 8601 Date string + updated: string; // ISO 8601 Date string +} + +export interface FaultsResponse { + items: Fault[]; + page: number; + perPage: number; + totalItems: number; + totalPages: number; +} diff --git a/src/pages/faults/Faults.tsx b/src/pages/faults/Faults.tsx index fb815c7..1267297 100644 --- a/src/pages/faults/Faults.tsx +++ b/src/pages/faults/Faults.tsx @@ -1,5 +1,66 @@ +import { Fragment, useEffect, useMemo, useState } from 'react'; +import { getFaults } from '../../services/faults/get-faults'; +import { Fault, FaultsResponse } from '../../models/fault.interface'; +import { MRT_ColumnDef, MaterialReactTable } from 'material-react-table'; +import TableLoader from '../../components/table/TableLoader'; + const Faults = () => { - return
Faults
; + const [faults, setFaults] = useState([]); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(null); + + const columns = useMemo>[]>( + () => [ + { + accessorKey: 'direccionPoblacion', + header: 'Direction', + size: 150, + }, + { + accessorKey: 'estado', + header: 'Status', + size: 150, + }, + { + accessorKey: 'contactoNombre', + header: 'Name', + size: 150, + }, + + { + accessorKey: 'contactoTelefono', + header: 'Telefono', + size: 200, + }, + ], + [] + ); + + useEffect(() => { + const fetchData = async () => { + setLoading(true); + try { + const data = (await getFaults()) as FaultsResponse; + setFaults(data.items); + } catch (error) { + console.error(error); + setError('Error fetching data'); + } + setLoading(false); + }; + + fetchData(); + }, []); + + return ( + + {loading && } + {error &&

{error}

} + {!loading && !error && ( + + )} + + ); }; export default Faults; diff --git a/src/services/faults/get-faults.tsx b/src/services/faults/get-faults.tsx new file mode 100644 index 0000000..dcd499c --- /dev/null +++ b/src/services/faults/get-faults.tsx @@ -0,0 +1,15 @@ +import PocketBase from 'pocketbase'; + +export const getFaults = async () => { + const pb = new PocketBase(import.meta.env.VITE_BASE_URL_API); + const collection = 'averias'; + + try { + const data = await pb.collection(collection).getList(); + + return data; + } catch (error) { + console.error(error); + return []; + } +};