Add @mui/x-data-grid and @prisma/client dependencies
This commit is contained in:
Nils
parent
1d49f676e3
commit
327bfb2760
|
|
@ -12,6 +12,8 @@
|
|||
"@emotion/styled": "^11.11.0",
|
||||
"@mui/icons-material": "^5.15.3",
|
||||
"@mui/material": "^5.15.3",
|
||||
"@mui/x-data-grid": "^6.18.7",
|
||||
"@prisma/client": "^5.7.1",
|
||||
"axios": "^1.6.2",
|
||||
"next": "^14.0.4",
|
||||
"prisma": "^5.7.1",
|
||||
|
|
@ -754,6 +756,31 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
|
||||
"integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w=="
|
||||
},
|
||||
"node_modules/@mui/x-data-grid": {
|
||||
"version": "6.18.7",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.18.7.tgz",
|
||||
"integrity": "sha512-K1A3pMUPxI4/Mt5A4vrK45fBBQK5rZvBVqRMrB5n8zX++Bj+WLWKvLTtfCmlriUtzuadr/Hl7Z+FDRXUJAx6qg==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.2",
|
||||
"@mui/utils": "^5.14.16",
|
||||
"clsx": "^2.0.0",
|
||||
"prop-types": "^15.8.1",
|
||||
"reselect": "^4.1.8"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mui/material": "^5.4.1",
|
||||
"@mui/system": "^5.4.1",
|
||||
"react": "^17.0.0 || ^18.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@next/env": {
|
||||
"version": "14.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.4.tgz",
|
||||
|
|
@ -947,6 +974,23 @@
|
|||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@prisma/client": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@prisma/client/-/client-5.7.1.tgz",
|
||||
"integrity": "sha512-TUSa4nUcC4nf/e7X3jyO1pEd6XcI/TLRCA0KjkA46RDIpxUaRsBYEOqITwXRW2c0bMFyKcCRXrH4f7h4q9oOlg==",
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
"node": ">=16.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prisma": "*"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"prisma": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@prisma/debug": {
|
||||
"version": "5.7.1",
|
||||
"resolved": "https://registry.npmjs.org/@prisma/debug/-/debug-5.7.1.tgz",
|
||||
|
|
@ -4000,6 +4044,11 @@
|
|||
"resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
|
||||
"integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "4.1.8",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
|
||||
"integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.8",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"dev": "next dev -H 100.101.64.38",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
|
|
@ -13,6 +13,8 @@
|
|||
"@emotion/styled": "^11.11.0",
|
||||
"@mui/icons-material": "^5.15.3",
|
||||
"@mui/material": "^5.15.3",
|
||||
"@mui/x-data-grid": "^6.18.7",
|
||||
"@prisma/client": "^5.7.1",
|
||||
"axios": "^1.6.2",
|
||||
"next": "^14.0.4",
|
||||
"prisma": "^5.7.1",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
// This is your Prisma schema file,
|
||||
// learn more about it in the docs: https://pris.ly/d/prisma-schema
|
||||
|
||||
generator client {
|
||||
provider = "prisma-client-js"
|
||||
}
|
||||
|
|
@ -9,3 +6,11 @@ datasource db {
|
|||
provider = "postgresql"
|
||||
url = env("DATABASE_URL")
|
||||
}
|
||||
|
||||
model Mitarbeiter {
|
||||
ID String @id @default(dbgenerated("uuid_generate_v4()")) @db.Uuid
|
||||
Vorname String
|
||||
Nachname String
|
||||
Anstelldatum DateTime @db.Date
|
||||
Geburtstag DateTime @db.Date
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
import { Routes, Route } from "react-router-dom";
|
||||
|
||||
// @Pages
|
||||
import Login from "./login";
|
||||
import Dashboard from "./dashboard";
|
||||
import Dashboard from "./dashboard/page";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<Routes>
|
||||
<Route path="./login" element={<Login />} />
|
||||
<Route path="./dashboard" element={<Dashboard/>} />
|
||||
<Route path="/dashboard" element={<Dashboard/>} />
|
||||
|
||||
</Routes>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
import { Typography } from "@mui/material";
|
||||
|
||||
export default function dashboard() {
|
||||
|
||||
return (
|
||||
<Typography sx={{ fontSize: 50, fontWeight: "bold" }}>
|
||||
Welcome to the Admin panel
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,122 @@
|
|||
'use client'
|
||||
import { Box, Button, Typography, } from "@mui/material";
|
||||
import { DataGrid, GridColDef } from '@mui/x-data-grid';
|
||||
import { PrismaClient } from "@prisma/client";
|
||||
import axios from "axios";
|
||||
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
// ...
|
||||
|
||||
|
||||
const columns: GridColDef[] = [
|
||||
{
|
||||
field: 'Vorname',
|
||||
headerName: 'Vorname',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'Nachname',
|
||||
headerName: 'Nachname',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
field: 'Anstelldatum',
|
||||
headerName: 'Anstelldatum',
|
||||
width: 110,
|
||||
},
|
||||
{
|
||||
field: 'Geburtstag',
|
||||
headerName: 'Geburtstag',
|
||||
description: 'This column has a value getter and is not sortable.',
|
||||
sortable: false,
|
||||
width: 160,
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const URL= "http://100.101.64.38:3000/api/hello";
|
||||
|
||||
export default function Page() {
|
||||
|
||||
|
||||
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
useEffect(() => {
|
||||
async function getData() {
|
||||
const response = await fetch(URL);
|
||||
const data = await response.json();
|
||||
setData(data);
|
||||
}
|
||||
getData();
|
||||
}, [])
|
||||
|
||||
|
||||
const rows = [
|
||||
{ id: "1", Vorname:{data}, Nachname: "test", Anstelldatum: "test", Geburtstag: "test" }
|
||||
];
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100vh",
|
||||
background: "linear-gradient(45deg, #003263 15%, #9bc9e5 90%)",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ fontSize: 50, fontWeight: "bold", color: "white" }}>
|
||||
Welcome to the Admin panel
|
||||
</Typography>
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "top",
|
||||
height: "90%",
|
||||
background: "white",
|
||||
width: "90%",
|
||||
borderRadius: "20px",
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
width: "6rem",
|
||||
height: "3rem",
|
||||
marginLeft: "1rem",
|
||||
marginTop: "1rem",
|
||||
|
||||
}}
|
||||
onClick={() => {
|
||||
|
||||
}}
|
||||
>
|
||||
CSV Datei auswählen
|
||||
</Button>
|
||||
<DataGrid rows={rows} columns={columns}
|
||||
sx={{
|
||||
marginTop: "1rem",
|
||||
borderRadius: "20px",
|
||||
}}
|
||||
initialState={{
|
||||
pagination: {
|
||||
paginationModel: {
|
||||
pageSize: 5,
|
||||
},
|
||||
},
|
||||
}}
|
||||
checkboxSelection />
|
||||
|
||||
|
||||
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -77,7 +77,7 @@ export default function Home() {
|
|||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
useHref("/dashboard");
|
||||
|
||||
}}
|
||||
>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
import type { NextApiRequest, NextApiResponse } from 'next'
|
||||
|
||||
type ResponseData = {
|
||||
message: string
|
||||
}
|
||||
|
||||
export default function handler(
|
||||
req: NextApiRequest,
|
||||
res: NextApiResponse<ResponseData>
|
||||
) {
|
||||
res.status(200).send({ Vorname: 'test' })
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"target": "es2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
|
|
|
|||
Loading…
Reference in New Issue