info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-21 16:41:24 +02:00
Code Issues Releases Wiki Activity

Personal progress indicator in teams

Browse Source
This commit is contained in:
Kamran Ahmed
2023-07-26 15:24:29 +01:00
parent 7aca57c3e4
commit 076b866430
1 changed files with 18 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/TeamProgress/GroupRoadmapItem.tsx
View File

@@ -3,6 +3,7 @@ import type { GroupByRoadmap, TeamMember } from './TeamProgressPage';
import { MemberProgressModal } from './MemberProgressModal'; import { MemberProgressModal } from './MemberProgressModal';
import { getUrlParams } from '../../lib/browser'; import { getUrlParams } from '../../lib/browser';
import ExternalLinkIcon from '../../icons/external-link.svg'; import ExternalLinkIcon from '../../icons/external-link.svg';
import { useAuth } from '../../hooks/use-auth';
type GroupRoadmapItemProps = { type GroupRoadmapItemProps = {
roadmap: GroupByRoadmap; roadmap: GroupByRoadmap;
@@ -11,6 +12,7 @@ type GroupRoadmapItemProps = {
export function GroupRoadmapItem(props: GroupRoadmapItemProps) { export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
const { members, resourceTitle, resourceId } = props.roadmap; const { members, resourceTitle, resourceId } = props.roadmap;
const { t: teamId } = getUrlParams(); const { t: teamId } = getUrlParams();
const user = useAuth();
const [showAll, setShowAll] = useState(false); const [showAll, setShowAll] = useState(false);
const [detailResourceId, setDetailResourceId] = useState<string | null>(null); const [detailResourceId, setDetailResourceId] = useState<string | null>(null);
@@ -49,10 +51,15 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
</div> </div>
<div className="relative flex grow flex-col space-y-2 p-3"> <div className="relative flex grow flex-col space-y-2 p-3">
{(showAll ? members : members.slice(0, 4)).map((member) => { {(showAll ? members : members.slice(0, 4)).map((member) => {
if (!member.progress) return null; const isMyProgress = user?.email === member?.member?.email;
if (!member.progress) {
return null;
}
return ( return (
<button <button
className="group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none" className={`group relative w-full overflow-hidden rounded-md border p-2 hover:border-gray-300 hover:text-black focus:outline-none`}
key={member?.member._id} key={member?.member._id}
onClick={() => { onClick={() => {
setDetailResourceId(member?.progress?.resourceId!); setDetailResourceId(member?.progress?.resourceId!);
@@ -60,7 +67,7 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
}} }}
> >
<span className="relative z-10 flex items-center justify-between gap-1 text-sm"> <span className="relative z-10 flex items-center justify-between gap-1 text-sm">
<span className="inline-grid grid-cols-[20px_auto] gap-2"> <span className="inline-grid grid-cols-[20px_auto] gap-3">
<img <img
src={ src={
member.member.avatar member.member.avatar
@@ -72,7 +79,14 @@ export function GroupRoadmapItem(props: GroupRoadmapItemProps) {
alt={member.member.name || ''} alt={member.member.name || ''}
className="h-5 w-5 shrink-0 rounded-full" className="h-5 w-5 shrink-0 rounded-full"
/> />
<span className="truncate">{member?.member?.name}</span> <span className="inline-grid grid-cols-[auto,32px] items-center">
<span className="truncate mr-[5px]">{member?.member?.name}</span>
{isMyProgress && (
<span className="rounded-md bg-red-500 py-0.25 text-center text-[11px] text-white mr-[5px]">
You
</span>
)}
</span>
</span> </span>
<span className="shrink-0 text-xs text-gray-400"> <span className="shrink-0 text-xs text-gray-400">
{member?.progress?.done} / {member?.progress?.total} {member?.progress?.done} / {member?.progress?.total}