diff --git a/package.json b/package.json index 20554c9..cc8ad44 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,8 @@ ] }, "dependencies": { + "@headlessui/react": "^1.7.17", + "@heroicons/react": "^2.0.18", "@navi/web-ui": "^1.49.8", "@super-app/dark-knight": "^1.0.6", "axios": "^1.3.4", @@ -39,6 +41,7 @@ "path": "^0.12.7", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-modal": "^3.16.1", "react-router-dom": "^6.8.2", "sass": "^1.58.3" }, diff --git a/src/Pages/Team/Team.module.scss b/src/Pages/Team/Team.module.scss index edf1cc6..901a80d 100644 --- a/src/Pages/Team/Team.module.scss +++ b/src/Pages/Team/Team.module.scss @@ -44,7 +44,14 @@ width: fit-content; margin-top: 12px; } - +.create-team-btn-wrapper { + padding: 6px 0 12px 0px; +} +.create-team-btn { + width: (164px); + height: (36px); + margin-top: 12px; +} .content-wrapper { width: 50%; padding: 0 12px 12px; @@ -98,3 +105,19 @@ .filter-container { border: 1px solid var(--navi-color-gray-border); } +.input-wrapper { + display: flex; + align-items: center; + gap: 0 8px; + margin: 8px 0; +} + +.helperText { + span { + color: #f98600 !important; + font-size: 14px; + } + svg { + color: #f98600 !important; + } +} diff --git a/src/Pages/Team/constants.ts b/src/Pages/Team/constants.ts index 7f39e88..b563221 100644 --- a/src/Pages/Team/constants.ts +++ b/src/Pages/Team/constants.ts @@ -8,6 +8,10 @@ export const UPDATE_TEAM_DATA = (): string => { return `${window?.config?.BASE_API_URL}/teams`; }; +export const ADD_TEAM_DATA = (): string => { + return `https://mock-server.np.navi-tech.in/houston/teams/add`; +}; + export interface TeamsData { id: string; name: string; diff --git a/src/Pages/Team/index.tsx b/src/Pages/Team/index.tsx index 634f28b..2ddc248 100644 --- a/src/Pages/Team/index.tsx +++ b/src/Pages/Team/index.tsx @@ -1,18 +1,22 @@ import { FC, useEffect, useState } from 'react'; - +import axios from 'axios'; import Typography from '@navi/web-ui/lib/primitives/Typography'; import { toast } from '@navi/web-ui/lib/primitives/Toast'; import FallbackComponent from '@src/components/Fallback'; import { ApiService } from '@src/services/api'; -import { FETCH_TEAM_DATA } from './constants'; +import { ADD_TEAM_DATA, FETCH_TEAM_DATA } from './constants'; import TeamResultsTable from './partials/TeamResultsTable'; - +import CreateTeam from './partials/CreateTeam'; import styles from './Team.module.scss'; +import Button from '@navi/web-ui/lib/primitives/Button'; +import { AddIcon } from '@navi/web-ui/lib/icons'; +import { BorderedInput, ModalDialog } from '@navi/web-ui/lib/primitives'; const Team: FC = () => { const [data, setData] = useState([]); const [isLoading, setIsLoading] = useState(false); + const [open, setOpen] = useState(false); const startTeamSearch = (): void => { const endPoint = FETCH_TEAM_DATA; @@ -38,6 +42,10 @@ const Team: FC = () => { startTeamSearch(); }, []); + const createHandler = props => { + setOpen(true); + }; + const returnTable = (): JSX.Element => { if (isLoading) { return ; @@ -63,9 +71,23 @@ const Team: FC = () => { {' '} {data?.length} teams{' '} +
+ +
+ {returnTable()} + + ); }; diff --git a/src/Pages/Team/partials/CreateTeam.tsx b/src/Pages/Team/partials/CreateTeam.tsx new file mode 100644 index 0000000..5c0dd96 --- /dev/null +++ b/src/Pages/Team/partials/CreateTeam.tsx @@ -0,0 +1,121 @@ +import TeamResultsTable from './TeamResultsTable'; +import { TeamsData } from '../constants'; +import { returnFormattedDate } from '@src/services/globalUtils'; +import styles from '../Team.module.scss'; +import { + AccordionGroup, + Accordion, + Typography, +} from '@navi/web-ui/lib/primitives'; +import { useState } from 'react'; +import { ADD_TEAM_DATA } from '../constants'; +import Button from '@navi/web-ui/lib/primitives/Button'; +import { AddIcon, AlertOutlineIcon } from '@navi/web-ui/lib/icons'; +import { BorderedInput, ModalDialog } from '@navi/web-ui/lib/primitives'; +import { toast } from '@navi/web-ui/lib/primitives/Toast'; +import { ApiService } from '@src/services/api'; + +const CreateTeam = props => { + // const [isLoading, setIsLoading] = useState(false); + + const [teamName, setTeamName] = useState(''); + const [teamNameError, setTeamNameError] = useState(''); + + const [validInput, setValidInput] = useState(false); + + const regularExpression = '^[A-Za-z][A-Za-z0-9_]{2,29}$'; + + const validateTeamName = (value: string): void => { + setTeamName(value); + if (!value.match(regularExpression)) { + setValidInput(false); + } else { + setValidInput(true); + } + }; + + const apiCall = (endpoint, teamName) => { + return new Promise((resolve, reject) => { + const timeout = setTimeout(() => { + resolve({ + status: 200, + }); + // reject( + // { + // 'status': 400, + // } + // ) + }, 1000); + }); + }; + + const addTeamHandler = (): void => { + const endPoint = ADD_TEAM_DATA(); + + apiCall(endPoint, { name: teamName }) + .then((response: any) => { + console.log({ response }); + + props.apicalled(); + props.setOpen(false); + setTeamName(''); + }) + .catch(error => { + console.log('catching error'); + setTeamNameError('Team name already exists'); + // const toastMessage = error; + + // toast.error(toastMessage); + + setTeamName(''); + }); + }; + + const clearErrors = () => { + props.setOpen(false); + setTeamNameError(''); + }; + + return ( +
+ {props.open && ( + props.setOpen(false)} + onClose={clearErrors} + > +
+ + validateTeamName(e.target.value)} + error={teamNameError} + placeholder="New team " + helperTextClasses={styles.helperText} + Icon={ + + } + /> + +
+ + )} +
+ ); +}; + +export default CreateTeam; diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 990472c..db35618 100644 --- a/src/components/Footer/index.tsx +++ b/src/components/Footer/index.tsx @@ -1,4 +1,4 @@ -import { Typography } from '@navi/web-ui/lib/primitives'; +import { Button, Typography } from '@navi/web-ui/lib/primitives'; import HelpIcon from '@src/assets/HelpIcon'; import styles from './Footer.module.scss'; @@ -22,6 +22,7 @@ const Footer = ({ isExpanded }) => { > Get help on Slack + {/* */} );