cal.pub0.org/apps/web/components/team/screens/Team.tsx

71 lines
2.4 KiB
TypeScript
Raw Normal View History

import MarkdownIt from "markdown-it";
import Link from "next/link";
import type { TeamPageProps } from "pages/team/[slug]";
import { WEBAPP_URL } from "@calcom/lib/constants";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Avatar } from "@calcom/ui";
const md = new MarkdownIt("default", { html: true, breaks: true, linkify: true });
Improvement/teams (#1285) * [WIP] checkpoint before pull & merge - Added teams to sidebar - Refactored team settings - Improved team list UI This code will be partly reverted next commit. * [WIP] - Moved team code back to components - Removed team link from sidebar - Built new team manager screen based on Event Type designs - Component-ized frequently reused code (SettingInputContainer, FlatIconButton) * [WIP] - Created LinkIconButton as standalone component - Added functionality to sidebar of team settings - Fixed type bug on public team page induced by my normalization of members array in team query - Removed teams-old which was kept as refrence - Cleaned up loose ends * [WIP] - added create team model - fixed profile missing label due to my removal of default label from component * [WIP] - Fixed TeamCreateModal trigger - removed TeamShell, it didn't make the cut - added getPlaceHolderAvatar - renamed TeamCreate to TeamCreateModal - removed deprecated UsernameInput and replaced uses with suggested TextField * fix save button * [WIP] - Fixed drop down actions on team list - Cleaned up state updates * [WIP] converting teams to tRPC * [WIP] Finished refactor to tRPC * [WIP] Finishing touches * [WIP] Team availability beginning * team availability mvp * - added validation to change role - modified layout of team availability - corrected types * fix ui issue on team availability screen * - added virtualization to team availability - added flexChildrenContainer boolean to Shell to allow for flex on children * availability style fix * removed hard coded team type as teams now use inferred type from tRPC * Removed unneeded vscode settings * Reverted prisma schema * Fixed migrations * Removes unused dayjs plugins * Reverts type regression * Type fix * Type fixes * Type fixes * Moves team availability code to ee Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> Co-authored-by: zomars <zomars@me.com>
2021-12-09 23:51:30 +00:00
type TeamType = TeamPageProps["team"];
type MembersType = TeamType["members"];
type MemberType = MembersType[number];
const Member = ({ member, teamName }: { member: MemberType; teamName: string | null }) => {
const { t } = useLocale();
const isBioEmpty = !member.bio || !member.bio.replace("<p><br></p>", "").length;
return (
<Link key={member.id} href={`/${member.username}`}>
<div className="sm:min-w-80 sm:max-w-80 dark:bg-darkgray-200 dark:hover:bg-darkgray-300 group flex min-h-full flex-col space-y-2 rounded-md bg-white p-4 hover:cursor-pointer hover:bg-gray-50 ">
<Avatar
size="md"
alt={member.name || ""}
imageSrc={WEBAPP_URL + "/" + member.username + "/avatar.png"}
/>
<section className="line-clamp-4 mt-2 w-full space-y-1">
2023-01-12 16:57:43 +00:00
<p className="font-medium text-gray-900 dark:text-white">{member.name}</p>
<div className="line-clamp-3 overflow-ellipsis text-sm font-normal text-gray-500 dark:text-white">
{!isBioEmpty ? (
<>
<div
className="dark:text-darkgray-600 text-sm text-gray-500 [&_a]:text-blue-500 [&_a]:underline [&_a]:hover:text-blue-600"
dangerouslySetInnerHTML={{ __html: md.render(member.bio || "") }}
/>
</>
) : (
t("user_from_team", { user: member.name, team: teamName })
)}
</div>
</section>
</div>
</Link>
);
};
const Members = ({ members, teamName }: { members: MembersType; teamName: string | null }) => {
if (!members || members.length === 0) {
return null;
}
2021-08-13 19:46:42 +00:00
return (
<section className="lg:min-w-lg mx-auto flex min-w-full max-w-5xl flex-wrap justify-center gap-x-6 gap-y-6">
{members.map((member) => {
return member.username !== null && <Member key={member.id} member={member} teamName={teamName} />;
})}
</section>
);
};
const Team = ({ team }: Omit<TeamPageProps, "trpcState">) => {
2021-08-13 19:46:42 +00:00
return (
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
<div>
<Members members={team.members} teamName={team.name} />
Feature/round robin (#613) * Heavy WIP * More WIP * Playing with backwards compat * Moar wip * wip * Email changes for group feature * Committing in redundant migrations for reference * Combine all WIP migrations into a single feature migration * Make backup of current version of radio area pending refactor * Improved accessibility through keyboard * Cleanup in seperate commit so I can cherrypick later * Added RadioArea component * wip * Ignore .yarn file * Kinda stable * Getting closer... * Hide header when there are only personal events * Added uid to event create, updated EventTypeDescription * Delete redundant migration * Committing new team related migrations * Optimising & implemented backwards compatibility * Removed now redundant pages * Undid prototyping to calendarClient I did not end up using * Properly typed Select & fixed lint throughout * How'd that get here, removed. * TODO: investigate why userData is not compatible with passed type * This likely matches the event type that is created for a user * Few bugfixes * Adding datepicker optimisations * Fixed new event type spacing, initial profile should always be there * Gave NEXT_PUBLIC_BASE_URL a try but I think it's not the right solution * Updated EventTypeDescription to account for long titles, added logo to team page. * Added logo to team query * Added cancel Cypress test because an upcoming merge contains changes * Fix for when the event type description is long * Turned Theme into the useTheme hook, and made it fully compatible with teams pages * Built AvatarGroup ui component + moved Avatar to ui * Give the avatar some space fom the description * Fixed timeZone selector * Disabled tooltip +1-... Co-authored-by: Bailey Pumfleet <pumfleet@hey.com>
2021-09-14 08:45:28 +00:00
</div>
2021-08-13 19:46:42 +00:00
);
};
export default Team;