From 1663dac9e2d34495b2c0c75ab3c7743cc15f2711 Mon Sep 17 00:00:00 2001 From: usaidinfo Date: Wed, 18 Sep 2024 01:07:06 +0530 Subject: [PATCH] made the preview component added the chart but data is static. --- .../DashboardProjectsTable/index.tsx | 141 ++++++++---------- frontend/src/pages/Dashboard/index.tsx | 5 +- frontend/src/services/api/memberService.ts | 0 frontend/src/services/api/projectService.ts | 13 ++ frontend/src/services/api/teamService.ts | 13 ++ 5 files changed, 94 insertions(+), 78 deletions(-) create mode 100644 frontend/src/services/api/memberService.ts create mode 100644 frontend/src/services/api/projectService.ts create mode 100644 frontend/src/services/api/teamService.ts diff --git a/frontend/src/components/DashboardProjectsTable/index.tsx b/frontend/src/components/DashboardProjectsTable/index.tsx index 441b0a5..de318db 100644 --- a/frontend/src/components/DashboardProjectsTable/index.tsx +++ b/frontend/src/components/DashboardProjectsTable/index.tsx @@ -19,43 +19,40 @@ import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward"; import { visuallyHidden } from "@mui/utils"; interface Data { - calories: number; - carbs: number; - fat: number; - name: string; - protein: number; + projectName: string; + projectLead: string; + dueDate: string; + status: string; + progress: number; } function createData( - name: string, - calories: number, - fat: number, - carbs: number, - protein: number + projectName: string, + projectLead: string, + dueDate: string, + status: string, + progress: number ): Data { return { - name, - calories, - fat, - carbs, - protein, + projectName, + projectLead, + dueDate, + status, + progress, }; } const rows = [ - createData("Cupcake", 305, 3.7, 67, 4.3), - createData("Donut", 452, 25.0, 51, 4.9), - createData("Eclair", 262, 16.0, 24, 6.0), - createData("Frozen yoghurt", 159, 6.0, 24, 4.0), - createData("Gingerbread", 356, 16.0, 49, 3.9), - createData("Honeycomb", 408, 3.2, 87, 6.5), - createData("Ice cream sandwich", 237, 9.0, 37, 4.3), - createData("Jelly Bean", 375, 0.0, 94, 0.0), - createData("KitKat", 518, 26.0, 65, 7.0), - createData("Lollipop", 392, 0.2, 98, 0.0), - createData("Marshmallow", 318, 0, 81, 2.0), - createData("Nougat", 360, 19.0, 9, 37.0), - createData("Oreo", 437, 18.0, 63, 4.0), + createData("Website Redesign", "Alice Johnson", "2024-10-15", "In Progress", 50), + createData("Mobile App Development", "Bob Smith", "2024-11-01", "Completed", 100), + createData("SEO Optimization", "Carol Davis", "2024-09-30", "Open", 0), + createData("Content Strategy", "David Brown", "2024-10-20", "In Progress", 30), + createData("E-commerce Platform", "Eva White", "2024-12-15", "On Hold", 10), + createData("Branding Campaign", "Frank Miller", "2024-11-20", "In Progress", 60), + createData("Data Analytics", "Grace Lee", "2024-10-10", "Completed", 100), + createData("CRM Integration", "Henry Wilson", "2024-11-05", "Open", 0), + createData("User Experience Research", "Ivy Martinez", "2024-10-25", "In Progress", 40), + createData("Social Media Marketing", "Jack Thompson", "2024-12-01", "On Hold", 20), ]; function labelDisplayedRows({ @@ -103,34 +100,34 @@ interface HeadCell { const headCells: readonly HeadCell[] = [ { - id: "name", + id: "projectName", numeric: false, disablePadding: true, - label: "Dessert (100g serving)", + label: "Project Name", }, { - id: "calories", - numeric: true, + id: "projectLead", + numeric: false, disablePadding: false, - label: "Calories", + label: "Project Lead", }, { - id: "fat", - numeric: true, + id: "dueDate", + numeric: false, disablePadding: false, - label: "Fat (g)", + label: "Due Date", }, { - id: "carbs", - numeric: true, + id: "status", + numeric: false, disablePadding: false, - label: "Carbs (g)", + label: "Status", }, { - id: "protein", + id: "progress", numeric: true, disablePadding: false, - label: "Protein (g)", + label: "Progress", }, ]; @@ -170,7 +167,7 @@ function EnhancedTableHead(props: EnhancedTableProps) { onChange={onSelectAllClick} slotProps={{ input: { - "aria-label": "select all desserts", + "aria-label": "select all projects", }, }} sx={{ verticalAlign: "sub" }} @@ -209,7 +206,6 @@ function EnhancedTableHead(props: EnhancedTableProps) { } sx={{ fontWeight: "lg", - "& svg": { transition: "0.2s", transform: @@ -217,7 +213,6 @@ function EnhancedTableHead(props: EnhancedTableProps) { ? "rotate(0deg)" : "rotate(180deg)", }, - "&:hover": { "& svg": { opacity: 1 } }, }} > @@ -237,9 +232,11 @@ function EnhancedTableHead(props: EnhancedTableProps) { ); } + interface EnhancedTableToolbarProps { numSelected: number; } + function EnhancedTableToolbar(props: EnhancedTableToolbarProps) { const { numSelected } = props; return ( @@ -270,7 +267,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) { id="tableTitle" component="div" > - Nutrition + Project Summary )} {numSelected > 0 ? ( @@ -289,12 +286,14 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) { ); } + export default function DashboardProjectsTable() { const [order, setOrder] = React.useState("asc"); - const [orderBy, setOrderBy] = React.useState("calories"); + const [orderBy, setOrderBy] = React.useState("progress"); const [selected, setSelected] = React.useState([]); const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(5); + const handleRequestSort = ( event: React.MouseEvent, property: keyof Data @@ -303,19 +302,21 @@ export default function DashboardProjectsTable() { setOrder(isAsc ? "desc" : "asc"); setOrderBy(property); }; + const handleSelectAllClick = (event: React.ChangeEvent) => { if (event.target.checked) { - const newSelected = rows.map((n) => n.name); + const newSelected = rows.map((n) => n.projectName); setSelected(newSelected); return; } setSelected([]); }; - const handleClick = (event: React.MouseEvent, name: string) => { - const selectedIndex = selected.indexOf(name); + + const handleClick = (event: React.MouseEvent, projectName: string) => { + const selectedIndex = selected.indexOf(projectName); let newSelected: readonly string[] = []; if (selectedIndex === -1) { - newSelected = newSelected.concat(selected, name); + newSelected = newSelected.concat(selected, projectName); } else if (selectedIndex === 0) { newSelected = newSelected.concat(selected.slice(1)); } else if (selectedIndex === selected.length - 1) { @@ -328,13 +329,12 @@ export default function DashboardProjectsTable() { } setSelected(newSelected); }; + const handleChangePage = (newPage: number) => { setPage(newPage); }; - const handleChangeRowsPerPage = (event: any, newValue: number | null) => { - setRowsPerPage(parseInt(newValue!.toString(), 10)); - setPage(0); - }; + + const getLabelDisplayedRowsTo = () => { if (rows.length === -1) { return (page + 1) * rowsPerPage; @@ -343,9 +343,10 @@ export default function DashboardProjectsTable() { ? rows.length : Math.min(rows.length, (page + 1) * rowsPerPage); }; - // Avoid a layout jump when reaching the last page with empty rows. + const emptyRows = page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; + return ( { - const isItemSelected = selected.includes(row.name); + const isItemSelected = selected.includes(row.projectName); const labelId = `enhanced-table-checkbox-${index}`; return ( handleClick(event, row.name)} + onClick={(event) => handleClick(event, row.projectName)} role="checkbox" aria-checked={isItemSelected} tabIndex={-1} - key={row.name} - // selected={isItemSelected} + key={row.projectName} style={ isItemSelected - ? ({ + ? ( { "--TableCell-dataBackground": "var(--TableCell-selectedBackground)", "--TableCell-headBackground": @@ -417,12 +417,12 @@ export default function DashboardProjectsTable() { /> - {row.name} + {row.projectName} - {row.calories} - {row.fat} - {row.carbs} - {row.protein} + {row.projectLead} + {row.dueDate} + {row.status} + {row.progress}% ); })} @@ -450,17 +450,6 @@ export default function DashboardProjectsTable() { justifyContent: "flex-end", }} > - - Rows per page: - - {labelDisplayedRows({ from: rows.length === 0 ? 0 : page * rowsPerPage + 1, diff --git a/frontend/src/pages/Dashboard/index.tsx b/frontend/src/pages/Dashboard/index.tsx index 3691f35..e61da31 100644 --- a/frontend/src/pages/Dashboard/index.tsx +++ b/frontend/src/pages/Dashboard/index.tsx @@ -10,6 +10,7 @@ import AccountTreeRoundedIcon from "@mui/icons-material/AccountTreeRounded"; import DashboardProjectsTable from "../../components/DashboardProjectsTable"; import ProjectProgress from "../../components/ProjectProgress"; + const Dashboard = () => { return ( { icon={} /> } /> } /> diff --git a/frontend/src/services/api/memberService.ts b/frontend/src/services/api/memberService.ts new file mode 100644 index 0000000..e69de29 diff --git a/frontend/src/services/api/projectService.ts b/frontend/src/services/api/projectService.ts new file mode 100644 index 0000000..3d0f61f --- /dev/null +++ b/frontend/src/services/api/projectService.ts @@ -0,0 +1,13 @@ +import axios from 'axios'; + +const BASE_URL = 'http://localhost:5001/api'; + +export const getProjects = async () => { + try { + const response = await axios.get(`${BASE_URL}/project`); + return response.data; + } catch (error) { + console.error('Error fetching projects:', error); + return null; + } +}; diff --git a/frontend/src/services/api/teamService.ts b/frontend/src/services/api/teamService.ts new file mode 100644 index 0000000..bcebcbc --- /dev/null +++ b/frontend/src/services/api/teamService.ts @@ -0,0 +1,13 @@ +import axios from "axios"; + +const BASE_URL = 'http://localhost:5001/api'; + +export async function getTeams(projectId: string) { + try { + const response = await axios.get(`${BASE_URL}/project/${projectId}/teams`); + return response.data; + } catch (error) { + console.error('Failed to fetch teams:', error); + throw error; + } +}