thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: issue filter member options improvement (#4261)

Browse Source
This commit is contained in:
Anmol Singh Bhatia 2024-04-24 15:15:10 +05:30 committed by GitHub
parent a4e5138d1c
commit 695892d66e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/components/inbox/inbox-filter/filters/members.tsx
View File

@ -6,7 +6,7 @@ import { Avatar, Loader } from "@plane/ui";
// components // components
import { FilterHeader, FilterOption } from "@/components/issues"; import { FilterHeader, FilterOption } from "@/components/issues";
// hooks // hooks
import { useMember, useProjectInbox } from "@/hooks/store"; import { useMember, useProjectInbox, useUser } from "@/hooks/store";
type Props = { type Props = {
filterKey: TInboxIssueFilterMemberKeys; filterKey: TInboxIssueFilterMemberKeys;
@ -20,6 +20,7 @@ export const FilterMember: FC<Props> = observer((props: Props) => {
// hooks // hooks
const { inboxFilters, handleInboxIssueFilters } = useProjectInbox(); const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
const { getUserDetails } = useMember(); const { getUserDetails } = useMember();
const { currentUser } = useUser();
// states // states
const [itemsToRender, setItemsToRender] = useState(5); const [itemsToRender, setItemsToRender] = useState(5);
const [previewEnabled, setPreviewEnabled] = useState(true); const [previewEnabled, setPreviewEnabled] = useState(true);
@ -34,6 +35,7 @@ export const FilterMember: FC<Props> = observer((props: Props) => {
return sortBy(filteredOptions, [ return sortBy(filteredOptions, [
(memberId) => !filterValue.includes(memberId), (memberId) => !filterValue.includes(memberId),
(memberId) => memberId !== currentUser?.id,
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase(), (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
]); ]);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@ -71,7 +73,7 @@ export const FilterMember: FC<Props> = observer((props: Props) => {
isChecked={filterValue?.includes(member.id) ? true : false} isChecked={filterValue?.includes(member.id) ? true : false}
onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(member.id))} onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(member.id))}
icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />} icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
title={member.display_name} title={currentUser?.id === member.id ? "You" : member?.display_name}
/> />
); );
})} })}

10
web/components/issues/issue-layouts/filters/header/filters/assignee.tsx
View File

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
// hooks // hooks
import { Avatar, Loader } from "@plane/ui"; import { Avatar, Loader } from "@plane/ui";
import { FilterHeader, FilterOption } from "@/components/issues"; import { FilterHeader, FilterOption } from "@/components/issues";
import { useMember } from "@/hooks/store"; import { useMember, useUser } from "@/hooks/store";
// components // components
// ui // ui
@ -22,16 +22,18 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
const [previewEnabled, setPreviewEnabled] = useState(true); const [previewEnabled, setPreviewEnabled] = useState(true);
// store hooks // store hooks
const { getUserDetails } = useMember(); const { getUserDetails } = useMember();
const { currentUser } = useUser();
const appliedFiltersCount = appliedFilters?.length ?? 0; const appliedFiltersCount = appliedFilters?.length ?? 0;
const sortedOptions = useMemo(() => { const sortedOptions = useMemo(() => {
const filteredOptions = (memberIds || []).filter( const filteredOptions = (memberIds || []).filter((memberId) =>
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase()) getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
); );
return sortBy(filteredOptions, [ return sortBy(filteredOptions, [
(memberId) => !(appliedFilters ?? []).includes(memberId), (memberId) => !(appliedFilters ?? []).includes(memberId),
(memberId) => memberId !== currentUser?.id,
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase(), (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
]); ]);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@ -66,7 +68,7 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
isChecked={appliedFilters?.includes(member.id) ? true : false} isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)} onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />} icon={<Avatar name={member.display_name} src={member.avatar} showTooltip={false} size="md" />}
title={member.display_name} title={currentUser?.id === member.id ? "You" : member?.display_name}
/> />
); );
})} })}

10
web/components/issues/issue-layouts/filters/header/filters/created-by.tsx
View File

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
// hooks // hooks
import { Avatar, Loader } from "@plane/ui"; import { Avatar, Loader } from "@plane/ui";
import { FilterHeader, FilterOption } from "@/components/issues"; import { FilterHeader, FilterOption } from "@/components/issues";
import { useMember } from "@/hooks/store"; import { useMember, useUser } from "@/hooks/store";
// components // components
// ui // ui
@ -22,14 +22,16 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
const [previewEnabled, setPreviewEnabled] = useState(true); const [previewEnabled, setPreviewEnabled] = useState(true);
// store hooks // store hooks
const { getUserDetails } = useMember(); const { getUserDetails } = useMember();
const { currentUser } = useUser();
const sortedOptions = useMemo(() => { const sortedOptions = useMemo(() => {
const filteredOptions = (memberIds || []).filter( const filteredOptions = (memberIds || []).filter((memberId) =>
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase()) getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
); );
return sortBy(filteredOptions, [ return sortBy(filteredOptions, [
(memberId) => !(appliedFilters ?? []).includes(memberId), (memberId) => !(appliedFilters ?? []).includes(memberId),
(memberId) => memberId !== currentUser?.id,
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase(), (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
]); ]);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@ -66,7 +68,7 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
isChecked={appliedFilters?.includes(member.id) ? true : false} isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)} onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member.display_name} src={member.avatar} size="md" />} icon={<Avatar name={member.display_name} src={member.avatar} size="md" />}
title={member.display_name} title={currentUser?.id === member.id ? "You" : member?.display_name}
/> />
); );
})} })}

10
web/components/issues/issue-layouts/filters/header/filters/mentions.tsx
View File

@ -4,7 +4,7 @@ import { observer } from "mobx-react-lite";
// hooks // hooks
import { Loader, Avatar } from "@plane/ui"; import { Loader, Avatar } from "@plane/ui";
import { FilterHeader, FilterOption } from "@/components/issues"; import { FilterHeader, FilterOption } from "@/components/issues";
import { useMember } from "@/hooks/store"; import { useMember, useUser } from "@/hooks/store";
// components // components
// ui // ui
@ -22,16 +22,18 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
const [previewEnabled, setPreviewEnabled] = useState(true); const [previewEnabled, setPreviewEnabled] = useState(true);
// store hooks // store hooks
const { getUserDetails } = useMember(); const { getUserDetails } = useMember();
const { currentUser } = useUser();
const appliedFiltersCount = appliedFilters?.length ?? 0; const appliedFiltersCount = appliedFilters?.length ?? 0;
const sortedOptions = useMemo(() => { const sortedOptions = useMemo(() => {
const filteredOptions = (memberIds || []).filter( const filteredOptions = (memberIds || []).filter((memberId) =>
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase()) getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
); );
return sortBy(filteredOptions, [ return sortBy(filteredOptions, [
(memberId) => !(appliedFilters ?? []).includes(memberId), (memberId) => !(appliedFilters ?? []).includes(memberId),
(memberId) => memberId !== currentUser?.id,
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase(), (memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
]); ]);
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
@ -66,7 +68,7 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
isChecked={appliedFilters?.includes(member.id) ? true : false} isChecked={appliedFilters?.includes(member.id) ? true : false}
onClick={() => handleUpdate(member.id)} onClick={() => handleUpdate(member.id)}
icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} size={"md"} />} icon={<Avatar name={member?.display_name} src={member?.avatar} showTooltip={false} size={"md"} />}
title={member.display_name} title={currentUser?.id === member.id ? "You" : member?.display_name}
/> />
); );
})} })}