diff --git a/components/Settings.tsx b/components/Settings.tsx index 382141d84b..ff23e35bd1 100644 --- a/components/Settings.tsx +++ b/components/Settings.tsx @@ -1,9 +1,7 @@ import ActiveLink from '../components/ActiveLink'; -import { useRouter } from "next/router"; import { UserCircleIcon, KeyIcon, CodeIcon, UserGroupIcon } from '@heroicons/react/outline'; export default function SettingsShell(props) { - const router = useRouter(); return (
@@ -35,9 +33,9 @@ export default function SettingsShell(props) { Embed - {/* + Teams - */} + {/* diff --git a/components/TeamListItem.tsx b/components/TeamListItem.tsx new file mode 100644 index 0000000000..c5cb181484 --- /dev/null +++ b/components/TeamListItem.tsx @@ -0,0 +1,43 @@ +import { ChevronDownIcon, ChevronUpIcon, UserAddIcon, TrashIcon, UsersIcon } from "@heroicons/react/outline"; + +export default function TeamListItem(props) { + return (
  • +
    +
    + +
    + {props.team.userRole === "Owner" && } + {props.team.userRole !== "Owner" && {props.team.name}} + {props.team.userRole} +
    +
    + {props.team.userRole === 'Invitee' &&
    + + +
    } + {props.team.userRole === 'Member' &&
    + +
    } +
    + {/*{props.team.userRole === 'Owner' && expanded &&
    + {props.team.members.length > 0 &&
    +

    Members

    + + + {props.team.members.map( (member) => + + + + )} + +
    Alex van Andel ({ member.email })Owner + +
    +
    } + + +
    }*/} +
    • ); +} \ No newline at end of file diff --git a/pages/settings/teams.tsx b/pages/settings/teams.tsx new file mode 100644 index 0000000000..2ae8954cb6 --- /dev/null +++ b/pages/settings/teams.tsx @@ -0,0 +1,170 @@ +import Head from 'next/head'; +import prisma from '../../lib/prisma'; +import Modal from '../../components/Modal'; +import Shell from '../../components/Shell'; +import SettingsShell from '../../components/Settings'; +import { useState } from 'react'; +import { useSession, getSession } from 'next-auth/client'; +import Button from "../../components/ui/Button"; +import { + UsersIcon, + UserAddIcon, + UserRemoveIcon, + ChevronDownIcon, + ChevronUpIcon, + LocationMarkerIcon +} from "@heroicons/react/outline"; +import { ShieldCheckIcon } from "@heroicons/react/solid"; +import TeamListItem from "../../components/TeamListItem"; + +export default function Teams(props) { + + const [ session, loading ] = useSession(); + const [ selectedTeam, setSelectedTeam ] = useState({}); + + if (loading) { + return

    Loading...

    ; + } + + const teams = [ + { name: "Flying Colours Life", userRole: "Owner", members: [ + { "name": "Alex van Andel", "email": "bartfalij@gmail.com", "role": "Owner" }, + { "email": "me@alexvanandel.com", "role": "Member" }, + { "email": "avanandel@flyingcolourslife.com", "role": "Member" }, + ] }, + { name: "Partner Wealth", userRole: "Member" } + ]; + + const invitations = [ + { name: "Asset Management", userRole: "Invitee" } + ]; + + return( + + + Teams | Calendso + + + +
    +
    +
    +
    +

    Your teams

    +

    + View, edit and create teams to organise relationships between users +

    + {teams.length === 0 &&
    +

    Team up with other users
    by adding a new team

    + + +
    } +
    + {teams.length > 0 &&
    + +
    } +
    +
    +
      + {teams.map( + (team: any) => setSelectedTeam(team) }> + )} +
    +

    Open Invitations

    +
      + {invitations.map( (team) => )} +
    +
    + {/*
    +

    Transform account

    +

    + You cannot convert this account into a team until you leave all teams that you’re a member of. +

    + +
    */} +
    +
    + {Object.keys(selectedTeam).length > 0 && +
    +
    + + + + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + {selectedTeam.members.length > 0 &&
    +
    +

    Members

    + +
    + + + {selectedTeam.members.map( (member) => + + + + )} + +
    {member.name} {member.name && '(' + member.email + ')' }{!member.name && member.email}{member.role} + {/**/} +
    +
    } +
    +
    + + +
    +
    +
    + + +
    +
    +
    +
    +
    + } +     +     + ); +} + +export async function getServerSideProps(context) { + const session = await getSession(context); + if (!session) { + return { redirect: { permanent: false, destination: '/auth/login' } }; + } + + const user = await prisma.user.findFirst({ + where: { + email: session.user.email, + }, + select: { + id: true, + username: true, + name: true + } + }); + + return { + props: {user}, // will be passed to the page component as props + } +} \ No newline at end of file diff --git a/styles/components/table.css b/styles/components/table.css new file mode 100644 index 0000000000..a2d88616a6 --- /dev/null +++ b/styles/components/table.css @@ -0,0 +1,4 @@ + +table tbody tr:nth-child(odd) { + @apply bg-gray-50; +} \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index 89a86dfbfe..926cc766ad 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -5,6 +5,7 @@ @import './components/buttons.css'; @import './components/spinner.css'; @import './components/activelink.css'; +@import './components/table.css'; body { background-color: #f3f4f6;