african-pathogen-archive · coertquinton · Aug 7, 2023 · Aug 10, 2023
diff --git a/components/PathogenTable/index.tsx b/components/PathogenTable/index.tsx
@@ -71,6 +71,7 @@ const PathogenTable: React.FC = () => {
 
 	useEffect(() => {
 		apiRequest(HttpMethods.GET, 'read').then((res) => {
+            console.log(res);
 			setData(convertToTableData(res));
 		});
 	}, []);

diff --git a/components/SideMenu/index.tsx b/components/SideMenu/index.tsx
@@ -8,6 +8,7 @@ import {
 	NotificationOutlined,
 	ProfileOutlined,
 	UploadOutlined,
+    TeamOutlined,
 } from '@ant-design/icons';
 import { Menu, MenuProps } from 'antd';
 import { useRouter } from 'next/router';
@@ -18,6 +19,7 @@ const MenuItemUrls = new Map<string, string>([
 	['home', '/apa'],
 	['pathogen', '/apa/pathogens'],
 	['projects', '/apa/projects'],
+    ['team', '/apa/team'],
 	['submission', '/apa/projects/sars-cov-2'],
 	['resources', '/apa/resources'],
 	['guides', '/apa/guides'],
@@ -48,7 +50,7 @@ function getItem(
 const itemsWhenAuthenticated: MenuProps['items'] = [
 	getItem('Home', 'home', <HomeOutlined />),
 	getItem('Pathogen', 'pathogen', <AlignLeftOutlined />),
-	getItem('Projects', 'projects', <UploadOutlined />),
+	getItem('Projects', 'projects', <UploadOutlined />),    
 	getItem('Submission', 'submission', <UploadOutlined />),
 	getItem('Resources', 'resources', <ReadOutlined />),
 	getItem('Guides', 'guides', <FolderOutlined />),
@@ -60,6 +62,7 @@ const itemsWhenAuthenticated: MenuProps['items'] = [
 const itemsWhenNotAuthenticated: MenuProps['items'] = [
 	getItem('Home', 'home', <HomeOutlined />),
 	getItem('Pathogen', 'pathogen', <AlignLeftOutlined />),
+    getItem('Team', 'team', <TeamOutlined />),    // Move to is authenticated later.  Just below Projects
 	getItem('Resources', 'resources', <ReadOutlined />),
 	getItem('Guides', 'guides', <FolderOutlined />),
 	getItem('FAQs', 'faqs', <QuestionCircleOutlined />),

diff --git a/components/TeamTable/index.tsx b/components/TeamTable/index.tsx
@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+import Link from 'next/link';
+import { Select, Space, Table, Tag, } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
+
+// import { apiRequest } from '@/global/utils/api';
+import { dummyApiRequest } from '@/global/utils/dummy_apis';
+import { HttpMethods } from '@/global/utils/constants';
+
+// interface NumberOfSamplesType {
+// 	count: number;
+// 	new: number;
+// }
+
+// interface DataType {
+// 	key: string;
+// 	pathogen: string;
+// 	numberOfSamples: NumberOfSamplesType;
+// }
+
+interface TeamDataType {
+    key: string;
+    name: string;
+    email: string;
+    institution: string;
+    role: string;
+    // edit: string;
+}
+
+
+const columns: ColumnsType<TeamDataType> = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+    },
+	{
+		title: 'Email',
+		dataIndex: 'email',
+		key: 'email',
+	},
+    {
+		title: 'Institution',
+		dataIndex: 'institution',
+		key: 'institution',
+	},
+    {
+        title: 'Role',
+        dataIndex: 'role',
+        key: 'role',
+        render: (_, { role }) => (
+            <span className="ant-tag ant-tag-magenta">{ role }</span>
+        )
+    },    
+	{
+		title: '',
+		key: 'action',
+		render: (_, { role }) => (
+			<Select>
+                options={[
+                    {
+                        value: 'Uploader',
+                        label: 'Uploader',
+                    },
+                    {
+                        value: 'Downloader',
+                        label: 'Downloader',
+                    },
+                    {
+                        value: 'Collaborator',
+                        label: 'Collaborator',
+                    },
+                    {
+                        value: 'Administrator',
+                        label: 'Administrator',
+                    },
+                    {
+                        value: 'Remove from team',
+                        label: 'Remove',
+                    },
+                ]}
+            </Select>
+		),
+	},
+];
+
+const dropdownlist = (
+    <select>
+        <option value=''></option>
+        <option value='Uploader'>Uploader</option>
+        <option value='Downloader'>Downloader</option>
+        <option value='Collaborator'>Collaborator</option>
+        <option value='Administrator'>Administrator</option>
+        <option value='Remove'>Remove from Team</option>
+    </select>
+)
+
+function convertToTableData(responseData: any[]): TeamDataType[] {
+	return responseData.map((element: any) => {
+		return {
+			key: element.id,
+            name: element.item.name,
+            email: element.item.email,
+            institution: element.item.institution,
+            role: element.item.role,	
+            action: dropdownlist,		
+		};
+	});
+}
+
+const TeamTable: React.FC = () => {
+	const [data, setData] = useState<any[]>([]);
+
+    const columns = [
+    {
+        title: 'Name',
+        dataIndex: 'name',
+        key: 'name',
+    },
+    {
+        title: 'Email',
+        dataIndex: 'email',
+        key: 'email',
+    },
+    {
+        title: 'Institute',
+        dataIndex: 'institution',
+        key: 'institution',
+    },
+    {
+        title: 'Role',
+        dataIndex: 'role',
+        key: 'role',
+    },
+    {
+        title: '',
+        dataIndex: 'action',
+        key: 'action',
+    },
+    ];
+
+
+    useEffect(() => {        
+        var dummy_data = dummyApiRequest(HttpMethods.GET, 'teamdata');        
+        setData(convertToTableData(dummy_data));
+
+    });
+
+    return <Table dataSource={data} columns={columns} style={{ width: '80%' }} />;
+
+};
+
+export default TeamTable;
diff --git a/components/pages/apa/team.tsx b/components/pages/apa/team.tsx
@@ -0,0 +1,187 @@
+/*
+ *
+ * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved
+ *
+ *  This program and the accompanying materials are made available under the terms of
+ *  the GNU Affero General Public License v3.0. You should have received a copy of the
+ *  GNU Affero General Public License along with this program.
+ *   If not, see <http://www.gnu.org/licenses/>.
+ *
+ *  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+ *  EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ *  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ *  SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+ *  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ *  TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ *  OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ *  IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ *  ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ */
+
+import React, { useState, useEffect } from 'react';
+import { Layout, Space, Button, Typography, Input } from 'antd';
+import { css } from '@emotion/react';
+
+import { InternalLink } from '@/components/Link';
+import TeamTable from '@/components/TeamTable';
+
+import useAuthContext from '../../../global/hooks/useAuthContext';
+import CurrentUser from '../../NavBar/CurrentUser';
+import SideMenu from '../../SideMenu';
+import { getConfig } from '../../../global/config';
+
+import PartnerLogosBanner from './PartnerLogosBanner';
+
+const { Header, Footer, Sider, Content } = Layout;
+const { Title } = Typography;
+const { Search } = Input;
+
+const headerStyle: React.CSSProperties = {
+	textAlign: 'center',
+	color: '#000',
+	height: 64,
+	paddingInline: 50,
+	lineHeight: '64px',
+	backgroundColor: '#ffffff',
+	display: 'flex',
+	justifyItems: 'center',
+	justifyContent: 'space-between',
+	position: 'sticky',
+	top: 0,
+	zIndex: 1,
+	width: '100%',
+};
+
+const headerButtons: React.CSSProperties = {
+	display: 'flex',
+	justifyContent: 'space-around',
+	alignItems: 'center',
+	width: 180,
+};
+
+const contentStyle: React.CSSProperties = {
+	textAlign: 'left',
+	minHeight: '80vh',
+	lineHeight: '120px',
+	color: '#fff',
+	backgroundColor: '#F5F5F5',
+	display: 'flex',
+	flexDirection: 'column',
+	justifyContent: 'start',
+	alignItems: 'center',
+};
+
+const descriptiveText: React.CSSProperties = {
+	width: '80%',
+	display: 'flex',
+	justifyContent: 'space-between',
+};
+
+const siderStyle: React.CSSProperties = {
+	textAlign: 'center',
+	lineHeight: '120px',
+	color: '#fff',
+	backgroundColor: '#3ba0e9',
+};
+
+const footerStyle: React.CSSProperties = {
+	textAlign: 'center',
+	color: '#fff',
+	backgroundColor: '#ffffff',
+	bottom: 0,
+	height: 64,
+};
+
+const { NEXT_PUBLIC_EGO_API_ROOT, NEXT_PUBLIC_EGO_CLIENT_ID, NEXT_PUBLIC_KEYCLOAK } = getConfig();
+
+const Team: React.FC = () => {
+	const { logout, token, userHasAccessToStudySvc } = useAuthContext();
+	const [origin, setOrigin] = useState('');
+	useEffect(() => {
+		window && setOrigin(window.location.origin);
+	}, []);
+	return (
+		<Space direction="vertical" style={{ width: '100%' }} size={[0, 48]}>
+			<Layout>
+				<Header style={headerStyle}>
+					<div
+						css={css`
+							display: flex;
+							align-items: center;
+							cursor: pointer;
+						`}
+					>
+						<InternalLink path={''}>
+							<a
+								css={css`
+									align-items: left;
+									text-decoration: none;
+									display: flex;
+									height: 100%;
+								`}
+							>
+								<img src="/images/logo.svg" alt="APA logo" width="180" />
+							</a>
+						</InternalLink>
+					</div>
+					{token === undefined && (
+						<div style={headerButtons}>
+							<Button
+								href={`${NEXT_PUBLIC_EGO_API_ROOT}/oauth/login/keycloak?client_id=${NEXT_PUBLIC_EGO_CLIENT_ID}`}
+							>
+								Login
+							</Button>
+							<Button
+								href={`${NEXT_PUBLIC_KEYCLOAK}registrations?client_id=ego&response_type=code&redirect_uri=${origin}`}
+								type="primary"
+							>
+								Register
+							</Button>
+						</div>
+					)}
+					{token && (
+						<div>
+							<CurrentUser />
+						</div>
+					)}
+				</Header>
+				<Layout>
+					<Sider style={siderStyle} width={256}>
+						<SideMenu selectedKey={'pathogen'} />
+					</Sider>
+					<Layout>
+						<Content style={contentStyle}>
+							<div
+								style={{
+									width: '80%',
+									display: 'flex',
+									justifyContent: 'space-between',
+									alignItems: 'center',
+								}}
+							>
+								<Title level={4}>Your Team</Title>
+								<Search
+									style={{ width: 300 }}
+									placeholder="Search"
+									onSearch={() => {}}
+									enterButton
+								/>
+							</div>
+
+							<TeamTable />
+
+						</Content>
+						<Footer style={footerStyle}>
+							<div>
+								<PartnerLogosBanner />
+							</div>
+						</Footer>
+					</Layout>
+				</Layout>
+			</Layout>
+		</Space>
+	);
+};
+
+export default Team;
diff --git a/global/utils/api.ts b/global/utils/api.ts
@@ -23,4 +23,4 @@ export async function apiRequest(method: HttpMethods, url = '', data = {}) {
 	}
 
 	return await response.json(); // parses JSON response into native JavaScript objects
-}
+}
-Original file line number
+Diff line change
@@ Expand Up @@
     	}
     	return await response.json(); // parses JSON response into native JavaScript objects
-    }
+    }