aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-24 16:54:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: sort makers on project by role

Browse Source
This commit is contained in:
MTG2000
2022-10-04 15:51:52 +03:00
parent 08c8dc065c
commit 33b42437bc
4 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/features/Profiles/Components/Avatar/Avatar.tsx
View File

@@ -16,7 +16,9 @@ export default function Avatar({ src, alt, className, width = 40, renderTooltip
setTooltipRef,
setTriggerRef,
visible,
} = usePopperTooltip();
} = usePopperTooltip({
});
return (
<>
@@ -28,7 +30,7 @@ export default function Avatar({ src, alt, className, width = 40, renderTooltip
(renderTooltip && visible) && (
<div
ref={setTooltipRef}
{...getTooltipProps({ className: 'tooltip-container' })}
{...getTooltipProps({ className: 'tooltip-container z-10' })}
>
<div {...getArrowProps({ className: 'tooltip-arrow' })} />
{renderTooltip()}

3
src/features/Projects/pages/ProjectPage/Components/MakersCard/MakersCard.tsx
View File

@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom'
import Badge from 'src/Components/Badge/Badge'
import Card from 'src/Components/Card/Card'
import Avatar from 'src/features/Profiles/Components/Avatar/Avatar'
import { sortMembersByRole } from 'src/features/Projects/utils/helperFunctions'
import { ProjectDetailsQuery } from 'src/graphql'
import { createRoute } from 'src/utils/routing'
@@ -20,7 +21,7 @@ export default function MakersCard({ members, recruit_roles }: Props) {
<div className="mt-16">
<div className="flex flex-wrap gap-8">
{members.length === 0 && <p className="text-body4 text-gray-500">Not listed</p>}
{members.map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
{sortMembersByRole(members).map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
<Avatar
width={40}
src={m.user.avatar}

7
src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.tsx
View File

@@ -23,6 +23,7 @@ import Avatar from 'src/features/Profiles/Components/Avatar/Avatar';
import { Link } from 'react-router-dom';
import { createRoute } from 'src/utils/routing';
import { IoMdClose } from 'react-icons/io';
import { sortMembersByRole } from 'src/features/Projects/utils/helperFunctions';
interface Props extends ModalCard {
@@ -231,14 +232,14 @@ export default function ProjectDetailsCard({ direction, projectId, ...props }: P
</div>}
{project.members.length > 0 &&
<div>
<div className='relative'>
<p className="text-body6 uppercase font-medium text-gray-400 mb-8">MAKERS</p>
<div className="flex flex-wrap gap-8">
{project.members.map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
{sortMembersByRole(project.members).map(m => <Link key={m.user.id} to={createRoute({ type: "profile", id: m.user.id, username: m.user.name })}>
<Avatar
width={40}
src={m.user.avatar}
renderTooltip={() => <div className='bg-white px-12 py-8 border border-gray-200 rounded-12 flex flex-wrap gap-12 shadow-lg'>
renderTooltip={() => <div className='bg-white px-12 py-8 border border-gray-200 rounded-12 flex flex-wrap gap-12 shadow-lg relative z-10'>
<Avatar width={48} src={m.user.avatar} />
<div className='overflow-hidden'>
<p className={`text-black font-medium overflow-hidden text-ellipsis`}>{m.user.name}</p>

11
src/features/Projects/utils/helperFunctions.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Team_Member_Role } from "src/graphql";
export function sortMembersByRole<T extends { role: Team_Member_Role }>(members: T[]) {
return [...members].sort((a, b) => {
if (a.role === b.role) return 0
if (a.role === Team_Member_Role.Owner) return -1;
if (b.role === Team_Member_Role.Owner) return +1;
if (a.role === Team_Member_Role.Admin) return -1;
return +1;
})
}