chore: added view less button to the collaborators widget (#3928)

This commit is contained in:
Aaryan Khandelwal 2024-03-11 21:09:16 +05:30 committed by GitHub
parent 4a06572f73
commit b2146098e2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 53 additions and 25 deletions

View File

@ -37,21 +37,36 @@ export const DefaultCollaboratorsList: React.FC<Props> = (props) => {
/> />
); );
const showViewMoreButton = pageCount < totalPages && resultsCount !== 0;
const showViewLessButton = pageCount > 1;
return ( return (
<> <>
<div className="mt-7 mb-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 gap-y-8"> <div className="mt-7 mb-6 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 gap-2 gap-y-8">
{collaboratorsPages} {collaboratorsPages}
</div> </div>
{pageCount < totalPages && resultsCount !== 0 && ( {(showViewLessButton || showViewMoreButton) && (
<div className="flex items-center justify-center text-xs w-full"> <div className="flex items-center justify-center text-xs w-full">
{showViewLessButton && (
<Button
variant="link-primary"
size="sm"
className="my-3 hover:bg-custom-primary-100/20"
onClick={() => setPageCount(1)}
>
View less
</Button>
)}
{showViewMoreButton && (
<Button <Button
variant="link-primary" variant="link-primary"
size="sm" size="sm"
className="my-3 hover:bg-custom-primary-100/20" className="my-3 hover:bg-custom-primary-100/20"
onClick={handleLoadMore} onClick={handleLoadMore}
> >
Load more View more
</Button> </Button>
)}
</div> </div>
)} )}
</> </>

View File

@ -17,9 +17,9 @@ export const RecentCollaboratorsWidget: React.FC<WidgetProps> = (props) => {
<div className="w-full rounded-xl border-[0.5px] border-custom-border-200 bg-custom-background-100 duration-300 hover:shadow-custom-shadow-4xl"> <div className="w-full rounded-xl border-[0.5px] border-custom-border-200 bg-custom-background-100 duration-300 hover:shadow-custom-shadow-4xl">
<div className="flex items-start justify-between px-7 pt-6"> <div className="flex items-start justify-between px-7 pt-6">
<div> <div>
<h4 className="text-lg font-semibold text-custom-text-300">Most active members</h4> <h4 className="text-lg font-semibold text-custom-text-300">Collaborators</h4>
<p className="mt-2 text-xs font-medium text-custom-text-300"> <p className="mt-2 text-xs font-medium text-custom-text-300">
Top eight active members in your project by last activity View and find all members you collaborate with across projects
</p> </p>
</div> </div>
<div className="flex min-w-72 items-center justify-start gap-2 rounded-md border border-custom-border-200 px-2.5 py-1.5 placeholder:text-custom-text-400"> <div className="flex min-w-72 items-center justify-start gap-2 rounded-md border border-custom-border-200 px-2.5 py-1.5 placeholder:text-custom-text-400">

View File

@ -48,6 +48,9 @@ export const SearchedCollaboratorsList: React.FC<Props> = (props) => {
/> />
); );
const showViewMoreButton = pageCount < totalPages && resultsCount !== 0;
const showViewLessButton = pageCount > 1;
const emptyStateImage = resolvedTheme === "dark" ? DarkImage : LightImage; const emptyStateImage = resolvedTheme === "dark" ? DarkImage : LightImage;
return ( return (
@ -63,16 +66,28 @@ export const SearchedCollaboratorsList: React.FC<Props> = (props) => {
<p className="font-medium text-sm">No matching member</p> <p className="font-medium text-sm">No matching member</p>
</div> </div>
)} )}
{pageCount < totalPages && resultsCount !== 0 && ( {(showViewLessButton || showViewMoreButton) && (
<div className="flex items-center justify-center text-xs w-full"> <div className="flex items-center justify-center text-xs w-full">
{showViewLessButton && (
<Button
variant="link-primary"
size="sm"
className="my-3 hover:bg-custom-primary-100/20"
onClick={() => setPageCount(1)}
>
View less
</Button>
)}
{showViewMoreButton && (
<Button <Button
variant="link-primary" variant="link-primary"
size="sm" size="sm"
className="my-3 hover:bg-custom-primary-100/20" className="my-3 hover:bg-custom-primary-100/20"
onClick={handleLoadMore} onClick={handleLoadMore}
> >
Load more View more
</Button> </Button>
)}
</div> </div>
)} )}
</> </>

View File

@ -142,8 +142,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
if (!memberDetails?.member) return; if (!memberDetails?.member) return;
return { return {
value: `${memberDetails?.member.id}`, value: `${memberDetails?.member.id}`,
query: `${memberDetails?.member.first_name} ${memberDetails?.member query: `${memberDetails?.member.first_name} ${
.last_name} ${memberDetails?.member.display_name.toLowerCase()}`, memberDetails?.member.last_name
} ${memberDetails?.member.display_name.toLowerCase()}`,
content: ( content: (
<div className="flex w-full items-center gap-2"> <div className="flex w-full items-center gap-2">
<div className="flex-shrink-0 pt-0.5"> <div className="flex-shrink-0 pt-0.5">
@ -211,9 +212,6 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
rules={{ required: "Please select a member" }} rules={{ required: "Please select a member" }}
render={({ field: { value, onChange } }) => { render={({ field: { value, onChange } }) => {
const selectedMember = getWorkspaceMemberDetails(value); const selectedMember = getWorkspaceMemberDetails(value);
if (!selectedMember?.member) return <></>;
return ( return (
<CustomSearchSelect <CustomSearchSelect
value={value} value={value}