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

style: assignee drop down label

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2023-03-01 16:10:48 +05:30
parent 2c0b27d838
commit c897f04926
2 changed files with 30 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/app/components/issues/select/assignee.tsx
View File

@ -10,6 +10,9 @@ import { Transition, Combobox } from "@headlessui/react";
import projectServices from "services/project.service"; import projectServices from "services/project.service";
// ui // ui
import { AssigneesList, Avatar } from "components/ui"; import { AssigneesList, Avatar } from "components/ui";
// icons
import { UserGroupIcon } from "@heroicons/react/24/outline";
// fetch keys // fetch keys
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";
@ -61,10 +64,20 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
> >
{({ open }: any) => ( {({ open }: any) => (
<> <>
<Combobox.Button className="flex items-center cursor-pointer gap-1 rounded-md"> <Combobox.Button className="flex items-center cursor-pointer gap-1 rounded-md border px-2 py-1 text-xs shadow-sm duration-300 hover:bg-gray-100 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500">
<div className="flex items-center gap-1 text-xs"> <span className="flex items-center gap-1 text-xs">
{value && Array.isArray(value) ? <AssigneesList userIds={value} length={10} /> : null} {value && value.length > 0 && Array.isArray(value) ? (
</div> <>
<AssigneesList userIds={value} length={3} showTotalLength />
<span>Assignees</span>
</>
) : (
<>
<UserGroupIcon className="h-3 w-3 text-gray-500" />
<span>Assignee</span>
</>
)}
</span>
</Combobox.Button> </Combobox.Button>
<Transition <Transition

15
apps/app/components/ui/avatar.tsx
View File

@ -47,9 +47,15 @@ type AsigneesListProps = {
users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[]; users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
userIds?: string[]; userIds?: string[];
length?: number; length?: number;
showTotalLength?: boolean;
}; };
export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, length = 5 }) => { export const AssigneesList: React.FC<AsigneesListProps> = ({
users,
userIds,
length = 5,
showTotalLength = false,
}) => {
const router = useRouter(); const router = useRouter();
const { workspaceSlug } = router.query; const { workspaceSlug } = router.query;
@ -82,7 +88,12 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
return <Avatar key={userId} user={user} index={index} />; return <Avatar key={userId} user={user} index={index} />;
})} })}
{userIds.length > length ? <span>+{userIds.length - length}</span> : null}
{showTotalLength ? (
<span>{userIds.length}</span>
) : userIds.length > length ? (
<span>+{userIds.length - length}</span>
) : null}
</> </>
)} )}
</> </>