From e92a0918179626261f2f1b0d8d9a26006c443d4f Mon Sep 17 00:00:00 2001 From: cbolles Date: Thu, 7 Dec 2023 17:41:03 -0500 Subject: [PATCH] Add in study retrieval in control page --- .../src/components/Control.component.tsx | 75 ------------------ .../client/src/pages/studies/StudyControl.tsx | 79 ++++++++++--------- 2 files changed, 40 insertions(+), 114 deletions(-) delete mode 100644 packages/client/src/components/Control.component.tsx diff --git a/packages/client/src/components/Control.component.tsx b/packages/client/src/components/Control.component.tsx deleted file mode 100644 index 866a0edd..00000000 --- a/packages/client/src/components/Control.component.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { DataGrid, GridColDef } from '@mui/x-data-grid'; -import DeleteIcon from '@mui/icons-material/DeleteOutlined'; -import { GridRowModesModel, GridActionsCellItem, GridRowId } from '@mui/x-data-grid-pro'; -import { useState } from 'react'; - -interface Row { - id: number; - name: string; - description: string; -} - -interface Table { - tableRows: Row[]; -} - -export const Control: React.FC = ({ tableRows }: Table) => { - const [rows, setRows] = useState(tableRows); - const [rowModesModel, setRowModesModel] = useState({}); - - const handleDeleteClick = (id: GridRowId) => () => { - setRows(rows.filter((row: any) => row.id !== id)); - }; - - const handleRowModesModelChange = (newRowModesModel: GridRowModesModel) => { - setRowModesModel(newRowModesModel); - }; - - const columns: GridColDef[] = [ - { field: 'id', headerName: 'ID', width: 55 }, - { - field: 'name', - headerName: 'Name', - flex: 1, - maxWidth: 200, - editable: true - }, - { - field: 'description', - headerName: 'Description', - flex: 1, - minWidth: 500, - editable: true - }, - { - field: 'delete', - type: 'actions', - headerName: 'Delete', - width: 120, - cellClassName: 'delete', - getActions: ({ id }) => { - return [} label="Delete" onClick={handleDeleteClick(id)} />]; - } - } - ]; - - return ( - 'auto'} - rows={rows} - columns={columns} - rowModesModel={rowModesModel} - onRowModesModelChange={handleRowModesModelChange} - initialState={{ - pagination: { - paginationModel: { - pageSize: 5 - } - } - }} - pageSizeOptions={[5]} - checkboxSelection - disableRowSelectionOnClick - /> - ); -}; diff --git a/packages/client/src/pages/studies/StudyControl.tsx b/packages/client/src/pages/studies/StudyControl.tsx index f79e5a05..c5b414d7 100644 --- a/packages/client/src/pages/studies/StudyControl.tsx +++ b/packages/client/src/pages/studies/StudyControl.tsx @@ -1,48 +1,49 @@ -import { Typography } from '@mui/material'; -import { Control } from '../../components/Control.component'; +import { Typography, Box } from '@mui/material'; +import { useStudy } from '../../context/Study.context'; +import { DataGrid, GridColDef } from '@mui/x-data-grid'; +import DeleteIcon from '@mui/icons-material/DeleteOutlined'; +import { GridActionsCellItem } from '@mui/x-data-grid-pro'; +import { Study } from '../../graphql/graphql'; -// currently hardcoded values, but eventully -// there will be a fetching function that retrieves project information -const rows = [ - { - id: 1, - name: 'Study Microsoft', - description: ' It is considered one of the Big Five American information technology companies, alongside Alphabet, Amazon, Apple, and Meta Platforms.' - }, - { id: 2, name: 'Study IBM', description: 'You can define the prefix for generated group names and the owner/superior group in step 1 of the ISFACR security migration process.' }, - { - id: 3, - name: 'Study APPLe', - description: 'The company was founded by Steven Paul Jobs, Ronald Gerald Wayne, and Stephen G. Wozniak on April 1, 1976 and is headquartered in Cupertino, CA.' - }, - { id: 4, name: 'Study SpaceX', description: 'Falcon 9’s first stage has landed on the Just Read the Instructions droneship' }, - { id: 5, name: 'Study Citadel', description: '5 Description of the object' }, - { - id: 6, - name: 'Study Alphabet & Co', - description: - 'But as of December, Page and cofounder Sergey Brin have stepped down from Alphabet altogether, making way for Google CEO Sundar Pichai to take the reins of the whole company. (Page and Brin are remaining on as board members and still hold controlling shares.)' - }, - { id: 7, name: 'Study Pavement', description: '7 Description of the object' }, - { - id: 8, - name: 'Study Blank Street', - description: - 'The cappuccino (small, $3.75) is inoffensive. At every location, they’re made on identically programmed machines for consistency. I prefer a little more foam but what’s there is nice and velvety enough, if a little less compact than ideal, and it’s all fairly within the proportions of a cappuccino.' - }, - { - id: 9, - name: 'Study Tatte', - description: - 'The second floor features a beautiful coffee bar and event space with plenty of seats to take a baking class, enjoy nitro cold brew or coffee, enjoy breakfast or lunch with a friend or get work and homework done.' - } -]; export const StudyControl: React.FC = () => { + const { studies } = useStudy(); + const columns: GridColDef[] = [ + { + field: 'name', + headerName: 'Name', + width: 200, + editable: false + }, + { + field: 'description', + headerName: 'Description', + width: 500, + editable: false + }, + { + field: 'delete', + type: 'actions', + headerName: 'Delete', + width: 120, + maxWidth: 120, + cellClassName: 'delete', + getActions: () => { + return [} label="Delete" />]; + } + } + ]; + return ( <> Study Control - + + row._id} + /> + ); };