Skip to content

Commit

Permalink
saving current changes and reworking grid system to use datagrid inst…
Browse files Browse the repository at this point in the history 
…ead of table
  • Loading branch information
@siddheshraze
siddheshraze committed Nov 7, 2023
1 parent 400d637 commit 599563e
Show file tree
Hide file tree
Showing 8 changed files with 153 additions and 90 deletions.
3 changes: 2 additions & 1 deletion NextJSApp/frontend/.gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,8 @@ yarn-debug.log*
yarn-error.log*

# local env files
.env*.local
.env.local
.env*

# vercel
.vercel
Expand Down
45 changes: 24 additions & 21 deletions NextJSApp/frontend/app/(endpoints)/data/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
import React, {useState} from "react";
import {usePlotContext} from "@/app/plotcontext";
import {IRecordSet} from "mssql";
import {RowDataStructure, tableHeaders, tableHeaderSettings} from "@/config/macros";
import {Table} from "@mui/joy";
import {gridColumns, RowDataStructure, tableHeaders, tableHeaderSettings} from "@/config/macros";
import Button from "@mui/joy/Button";
import Box from "@mui/joy/Box";
import { DataGrid, GridRowsProp, GridColDef } from '@mui/x-data-grid';

export default function Page() {
const plot = usePlotContext()!;
Expand Down Expand Up @@ -38,28 +38,32 @@ export default function Page() {
let temp: RowDataStructure = {tag: row['Tag'], subquadrat: row['Subquadrat'], spcode: row['SpCode'], dbh: (row['DBH'] as number).toFixed(2), htmeas: (row['Htmeas'] as number).toFixed(2), codes: row['Codes'], comments: row['Comments']}
data.push(temp);
})
let gridRows : GridRowsProp = data;
return (
<>
<Button onClick={getData} loading={loading}>Reload Data</Button>
<Box>
<DataGrid columns={gridColumns} rows={gridRows} />
</Box>
<div>
{recordsets && <Table>
<thead>
<tr>
{tableHeaders.map((item, index) => (
<th style={tableHeaderSettings} key={index}>{item.label}</th>
))}
</tr>
</thead>
<tbody>
{data.map((row, rowIndex) => (
<tr key={rowIndex}>
{Object.values(row).map((rowEntry, rowEntryIndex) => (
<td key={rowEntryIndex}>{rowEntry}</td>
))}
</tr>
))}
</tbody>
</Table>}
{/*{recordsets && <Table>*/}
{/* <thead>*/}
{/* <tr>*/}
{/* {tableHeaders.map((item, index) => (*/}
{/* <th style={tableHeaderSettings} key={index}>{item.label}</th>*/}
{/* ))}*/}
{/* </tr>*/}
{/* </thead>*/}
{/* <tbody>*/}
{/* {data.map((row, rowIndex) => (*/}
{/* <tr key={rowIndex}>*/}
{/* {Object.values(row).map((rowEntry, rowEntryIndex) => (*/}
{/* <td key={rowEntryIndex}>{rowEntry}</td>*/}
{/* ))}*/}
{/* </tr>*/}
{/* ))}*/}
{/* </tbody>*/}
{/*</Table>}*/}
</div>
</>
);
Expand All @@ -71,5 +75,4 @@ export default function Page() {
);
}
}

}
36 changes: 21 additions & 15 deletions NextJSApp/frontend/app/(endpoints)/files/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ import {UploadAndReviewProcess} from "@/components/uploadreviewcycle";
import {Tab, TabList, TabPanel, Tabs} from "@mui/joy";
import {usePlotContext} from "@/app/plotcontext";
import Box from "@mui/joy/Box";
import Divider from "@mui/joy/Divider";
import Typography from "@mui/joy/Typography";

// File Hub
export default function Files() {
Expand All @@ -21,21 +23,25 @@ export default function Files() {
// Tab system -- Browse page, Upload page
return (
<>
<p>Drag and drop files into the box to upload them to storage</p>
<div className={"mt-5"}>
<Tabs aria-label={"File Hub Options"} size={"sm"} className={""}>
<TabList>
<Tab>Browse Uploaded Files</Tab>
<Tab>Upload New Files</Tab>
</TabList>
<TabPanel value={0}>
<ViewUploadedFiles />
</TabPanel>
<TabPanel value={1}>
<UploadAndReviewProcess />
</TabPanel>
</Tabs>
</div>
<Box sx={{ display: 'flex', flexDirection: 'column', marginBottom: 5 }}>
<Typography level={"title-lg"} color={"primary"} >
Drag and drop files into the box to upload them to storage
</Typography>
<Box sx={{mt: 5}}>
<Tabs aria-label={"File Hub Options"} size={"sm"} className={""}>
<TabList sticky={"top"}>
<Tab>Browse Uploaded Files</Tab>
<Tab>Upload New Files</Tab>
</TabList>
<TabPanel value={0}>
<ViewUploadedFiles />
</TabPanel>
<TabPanel value={1}>
<UploadAndReviewProcess />
</TabPanel>
</Tabs>
</Box>
</Box>
</>
);
}
Expand Down
104 changes: 53 additions & 51 deletions NextJSApp/frontend/components/viewuploadedfiles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ import {
import {DeleteIcon, DownloadIcon, EditIcon} from "@/components/icons";
import Divider from "@mui/joy/Divider";
import CircularProgress from "@mui/joy/CircularProgress";
import Box from "@mui/joy/Box";
import Typography from "@mui/joy/Typography";
// @todo: look into using an ID other than plot name.
// @todo: react router URL params to pass in the ID for Browse.
// https://reactrouter.com/en/main/start/tutorial#url-params-in-loaders
Expand Down Expand Up @@ -124,57 +126,57 @@ export default function ViewUploadedFiles() {
})
return (
<>
<Card className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
<CardContent>
<div className="flex flex-col">
<h5 className="text-md">Uploaded Files</h5>
</div>
<Divider className={"mt-6 mb-6"}/>
<div className="flex flex-col">
<TableContainer component={Paper}>
<Table aria-label={"Stored files"} stickyHeader>
<TableHead>
<TableRow>
<TableCell sx={tableHeaderSettings}>File Count</TableCell>
{fileColumns.map((item, index) => (
<TableCell key={index} sx={tableHeaderSettings}>{item.label}</TableCell>
))}
<TableCell sx={tableHeaderSettings}>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{sortedFileData!.map((row, index) => {
let errs = row.errors == "false";
return (
<>
<TableRow key={index}>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{row.key}</TableCell>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{row.name}</TableCell>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{row.user}</TableCell>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{new Date(row.date).toString()}</TableCell>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{new Date(row.version).toString()}</TableCell>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{row.isCurrentVersion ? 'YES' : ''}</TableCell>
<TableCell align="center">
<Button>
<DownloadIcon />
</Button>
<Button>
<EditIcon />
</Button>
<Button> {/*<Button onClick={() => setDeleteFile(row.name)}>*/}
<DeleteIcon />
</Button>
</TableCell>
</TableRow>
</>
);
})}
</TableBody>
</Table>
</TableContainer>
</div>
</CardContent>
</Card>
<Box sx={{display: 'flex', flexDirection: "column"}}>
<Box sx={{display: 'flex', flexDirection: "column"}}>
<Typography level={"title-lg"}>
Uploaded Files
</Typography>
</Box>
<Divider className={"mt-6 mb-6"}/>
<Box sx={{display: 'flex', flexDirection: "column"}}>
<TableContainer component={Paper}>
<Table aria-label={"Stored files"} stickyHeader size={"medium"}>
<TableHead>
<TableRow>
<TableCell sx={tableHeaderSettings}>File Count</TableCell>
{fileColumns.map((item, index) => (
<TableCell key={index} sx={tableHeaderSettings}>{item.label}</TableCell>
))}
<TableCell sx={tableHeaderSettings}>Actions</TableCell>
</TableRow>
</TableHead>
<TableBody>
{sortedFileData!.map((row, index) => {
let errs = row.errors == "false";
return (
<>
<TableRow key={index}>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{row.key}</TableCell>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{row.name}</TableCell>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{row.user}</TableCell>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{new Date(row.date).toString()}</TableCell>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{new Date(row.version).toString()}</TableCell>
<TableCell sx={(errs) ? {color: 'red', fontWeight: 'bold'} : {}}>{row.isCurrentVersion ? 'YES' : ''}</TableCell>
<TableCell align="center">
<Button>
<DownloadIcon />
</Button>
<Button>
<EditIcon />
</Button>
<Button> {/*<Button onClick={() => setDeleteFile(row.name)}>*/}
<DeleteIcon />
</Button>
</TableCell>
</TableRow>
</>
);
})}
</TableBody>
</Table>
</TableContainer>
</Box>
</Box>
</>
);
}
Expand Down
14 changes: 12 additions & 2 deletions NextJSApp/frontend/config/macros.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import {BlobServiceClient, ContainerClient} from "@azure/storage-blob";
import {FileRejection, FileWithPath} from "react-dropzone";
import {GridColDef} from "@mui/x-data-grid";

// INTERFACES
export interface Plot {
Expand Down Expand Up @@ -98,6 +99,16 @@ export interface RowDataStructure {
comments: string
}

export const gridColumns: GridColDef[] = [
{ field: 'tag', headerName: 'Tag', width: 150 },
{ field: 'subquadrat', headerName: 'Subquadrat', width: 150 },
{ field: 'spcode', headerName: 'Species Code', width: 150 },
{ field: 'dbh', headerName: 'DBH', width: 150 },
{ field: 'htmeas', headerName: 'HTMEAS', width: 150 },
{ field: 'codes', headerName: 'Codes', width: 150 },
{ field: 'comments', headerName: 'Comments', width: 150 },
];

export interface DropzoneProps {
/**
* A callback function which is called when files given for upload.
Expand Down Expand Up @@ -247,6 +258,5 @@ export async function uploadFileAsBuffer(containerClient: ContainerClient, file:
}
// create connection & client facing new blob
// async command to upload buffer via client, waiting for response
let uploadResponse = await containerClient.getBlockBlobClient(file.name).uploadData(buffer, {metadata});
return uploadResponse
return await containerClient.getBlockBlobClient(file.name).uploadData(buffer, {metadata})
}
31 changes: 31 additions & 0 deletions NextJSApp/frontend/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions NextJSApp/frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"@mui/lab": "^5.0.0-alpha.150",
"@mui/material": "^5.14.16",
"@mui/system": "^5.14.15",
"@mui/x-data-grid": "^6.18.0",
"@react-spring/web": "^9.7.3",
"autoprefixer": "^10.4.16",
"dotenv": "^16.3.1",
Expand Down
9 changes: 9 additions & 0 deletions NextJSApp/frontend/styles/customtablesettings.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
.header {
font-weight: bold;
font-size: 16pt;
}

.error {
font-weight: bold;
color: red;
}

0 comments on commit 599563e

Please sign in to comment.