github/plane
0
0
Fork 1
mirror of https://github.com/makeplane/plane synced 2024-06-14 14:31:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/components/dashboard/widgets/recent-collaborators/default-list.tsx
View File

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

4
web/components/dashboard/widgets/recent-collaborators/root.tsx
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="flex items-start justify-between px-7 pt-6">
<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">
Top eight active members in your project by last activity
View and find all members you collaborate with across projects
</p>
</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">

33
web/components/dashboard/widgets/recent-collaborators/search-list.tsx
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;
return (
@ -63,16 +66,28 @@ export const SearchedCollaboratorsList: React.FC<Props> = (props) => {
<p className="font-medium text-sm">No matching member</p>
</div>
)}
{pageCount < totalPages && resultsCount !== 0 && (
{(showViewLessButton || showViewMoreButton) && (
<div className="flex items-center justify-center text-xs w-full">
<Button
variant="link-primary"
size="sm"
className="my-3 hover:bg-custom-primary-100/20"
onClick={handleLoadMore}
>
Load more
</Button>
{showViewLessButton && (
<Button
variant="link-primary"
size="sm"
className="my-3 hover:bg-custom-primary-100/20"
onClick={() => setPageCount(1)}
>
View less
</Button>
)}
{showViewMoreButton && (
<Button
variant="link-primary"
size="sm"
className="my-3 hover:bg-custom-primary-100/20"
onClick={handleLoadMore}
>
View more
</Button>
)}
</div>
)}
</>

8
web/components/project/send-project-invitation-modal.tsx
View File

@ -142,8 +142,9 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
if (!memberDetails?.member) return;
return {
value: `${memberDetails?.member.id}`,
query: `${memberDetails?.member.first_name} ${memberDetails?.member
.last_name} ${memberDetails?.member.display_name.toLowerCase()}`,
query: `${memberDetails?.member.first_name} ${
memberDetails?.member.last_name
} ${memberDetails?.member.display_name.toLowerCase()}`,
content: (
<div className="flex w-full items-center gap-2">
<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" }}
render={({ field: { value, onChange } }) => {
const selectedMember = getWorkspaceMemberDetails(value);
if (!selectedMember?.member) return <></>;
return (
<CustomSearchSelect
value={value}