thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests 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";
// ui
import { AssigneesList, Avatar } from "components/ui";
// icons
import { UserGroupIcon } from "@heroicons/react/24/outline";
// fetch keys
import { PROJECT_MEMBERS } from "constants/fetch-keys";
@ -61,10 +64,20 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
>
{({ open }: any) => (
<>
<Combobox.Button className="flex items-center cursor-pointer gap-1 rounded-md">
<div className="flex items-center gap-1 text-xs">
{value && Array.isArray(value) ? <AssigneesList userIds={value} length={10} /> : null}
</div>
<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">
<span className="flex items-center gap-1 text-xs">
{value && value.length > 0 && Array.isArray(value) ? (
<>
<AssigneesList userIds={value} length={3} showTotalLength />
<span>Assignees</span>
</>
) : (
<>
<UserGroupIcon className="h-3 w-3 text-gray-500" />
<span>Assignee</span>
</>
)}
</span>
</Combobox.Button>
<Transition

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

@ -47,9 +47,15 @@ type AsigneesListProps = {
users?: Partial<IUser[]> | (Partial<IUserLite> | undefined)[] | Partial<IUserLite>[];
userIds?: string[];
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 { workspaceSlug } = router.query;
@ -82,7 +88,12 @@ export const AssigneesList: React.FC<AsigneesListProps> = ({ users, userIds, len
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}
</>
)}
</>