albert/eledana-pbf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add dirty table in faults

Browse Source
This commit is contained in:
Pedro Losas
2024-11-11 22:42:19 +01:00
parent 217fa8dc92
commit 0156587135
6 changed files with 207 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -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",

76
pnpm-lock.yaml generated
View File

@@ -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'}

22
src/components/table/TableLoader.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Divider, Skeleton } from '@mui/material';
import { Fragment } from 'react/jsx-runtime';
const TableLoader = ({ count }: { count: number }) => {
return (
<Fragment>
<Skeleton variant='rectangular' width={'100%'} height={'13vh'} />
{Array.from({ length: count }).map((_, index) => (
<Fragment key={index}>
<Divider
sx={{
marginBottom: '3px',
}}
/>
<Skeleton variant='rectangular' width='100%' height='7vh' />
</Fragment>
))}
</Fragment>
);
};
export default TableLoader;

31
src/models/fault.interface.ts Normal file
View File

@@ -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;
}

63
src/pages/faults/Faults.tsx
View File

@@ -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 <div>Faults</div>;
const [faults, setFaults] = useState<Fault[]>([]);
const [loading, setLoading] = useState<boolean>(true);
const [error, setError] = useState<string | null>(null);
const columns = useMemo<MRT_ColumnDef<Partial<Fault>>[]>(
() => [
{
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 (
<Fragment>
{loading && <TableLoader count={9} />}
{error && <p>{error}</p>}
{!loading && !error && (
<MaterialReactTable columns={columns} data={faults} />
)}
</Fragment>
);
};
export default Faults;

15
src/services/faults/get-faults.tsx Normal file
View File

@@ -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 [];
}
};