From 6ef09001436b24cd499d46a24c114c56729f59f6 Mon Sep 17 00:00:00 2001
From: "Planoetscher Daniel (Student Com20)"
<daniel.planoetscher@stud-inf.unibz.it>
Date: Mon, 17 May 2021 10:24:48 +0200
Subject: [PATCH] first connections to api of team page
---
.../components/layout/DetailGrid/index.tsx | 4 +-
client/src/components/ui/DetailBox/index.tsx | 2 +-
client/src/pages/Teams/index.tsx | 66 ++++++++++++++-----
3 files changed, 52 insertions(+), 20 deletions(-)
diff --git a/client/src/components/layout/DetailGrid/index.tsx b/client/src/components/layout/DetailGrid/index.tsx
index 86fb2ba..c8a8d40 100644
--- a/client/src/components/layout/DetailGrid/index.tsx
+++ b/client/src/components/layout/DetailGrid/index.tsx
@@ -2,7 +2,7 @@ import './detail-grid.scss';
import DetailBox, { DetailProps } from 'components/ui/DetailBox';
interface Props {
- details: DetailProps[]
+ details?: DetailProps[]
}
export default function DetailGrid({ details }: Props) {
@@ -10,7 +10,7 @@ export default function DetailGrid({ details }: Props) {
return (
<div className="detail-grid">
{
- details.map((detail) => (
+ details?.map((detail) => (
<div key={detail.title} className="box-container">
<DetailBox {...detail} />
</div>
diff --git a/client/src/components/ui/DetailBox/index.tsx b/client/src/components/ui/DetailBox/index.tsx
index 77f7cb9..d0771b9 100644
--- a/client/src/components/ui/DetailBox/index.tsx
+++ b/client/src/components/ui/DetailBox/index.tsx
@@ -17,7 +17,7 @@ export default function DetailBox({ number, icon, title, label }: DetailProps) {
</span>
</div>
<div className="text">
- {!label && number && <div className="number">{number}</div>}
+ {!label && number !== undefined && <div className="number">{number}</div>}
<div className={'title' + (label ? ' bold' : '')}>{title}</div>
{label && <div className="label">{label}</div>}
</div>
diff --git a/client/src/pages/Teams/index.tsx b/client/src/pages/Teams/index.tsx
index a8bdb0b..f146bc2 100644
--- a/client/src/pages/Teams/index.tsx
+++ b/client/src/pages/Teams/index.tsx
@@ -5,17 +5,39 @@ import Tabs from 'components/navigation/Tabs';
import Dropdown from 'components/navigation/Dropdown';
import TeamsMembers from './TeamsMembers';
import TeamsStats from './TeamsStats';
+import { useEffect, useState } from 'react';
+import { getTeamMembers, getTeamProjects, getTeams, Team } from 'adapters/team';
+import { DetailProps } from 'components/ui/DetailBox';
+
export default function Teams() {
- const teamDetails = [{
- icon: 'group',
- title: 'Member',
- number: 2
- }, {
- icon: 'folder',
- title: 'Projects',
- number: 3
- }];
+ const [allTeams, setTeams] = useState<Team[]>();
+ const [currentTeam, setCurrentTeam] = useState<Team>();
+ const [details, setDetails] = useState<DetailProps[]>([]);
+
+ useEffect(() => {
+ getTeams().then((teams) => {
+ setTeams(teams);
+ setCurrentTeam(teams[0]);
+ if (teams[0]) {
+ getTeamProjects(teams[0].id).then((projects) => {
+ console.log(projects);
+ setDetails((state) => [...state, {
+ icon: 'folder',
+ title: 'Projects',
+ number: projects.length
+ }]);
+ });
+ getTeamMembers(teams[0].id).then((members) => {
+ setDetails((state) => [...state, {
+ icon: 'group',
+ title: 'Members',
+ number: members.length
+ }]);
+ })
+ }
+ }).catch(() => { });
+ }, []);
const tabs = [{
path: '/teams',
@@ -27,6 +49,7 @@ export default function Teams() {
component: TeamsStats
}];
+ //TODO dynamic
const teams = [{
route: '/teams/members?team=someOther',
label: 'Some other Team',
@@ -35,14 +58,23 @@ export default function Teams() {
<div className="teams-page">
<div className="content-container">
<h1 className="underlined">Teams</h1>
- <Dropdown items={teams}>
- <h2>Ryoko</h2>
- <span className="material-icons icon">
- expand_more
- </span>
- </Dropdown>
- <DetailGrid details={teamDetails} />
- <ButtonLink href="/teams/uuid/edit" className="expanded">
+ {
+ allTeams && allTeams?.length > 1 && (
+ <Dropdown items={teams}>
+ <h2>{currentTeam?.name}</h2>
+ <span className="material-icons icon">
+ expand_more
+ </span>
+ </Dropdown>
+ )
+ }
+ {
+ allTeams && allTeams?.length === 1 && (
+ <h2>{currentTeam?.name}</h2>
+ )
+ }
+ <DetailGrid details={details} />
+ <ButtonLink href={'/teams/' + currentTeam?.id + '/edit'} className="expanded">
Edit
</ButtonLink>
<Tabs tabs={tabs} />
--
GitLab