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
import { FilterHeader, FilterOption } from "@/components/issues";
// hooks
import { useMember, useProjectInbox } from "@/hooks/store";
import { useMember, useProjectInbox, useUser } from "@/hooks/store";
type Props = {
filterKey: TInboxIssueFilterMemberKeys;
@ -20,6 +20,7 @@ export const FilterMember: FC<Props> = observer((props: Props) => {
// hooks
const { inboxFilters, handleInboxIssueFilters } = useProjectInbox();
const { getUserDetails } = useMember();
const { currentUser } = useUser();
// states
const [itemsToRender, setItemsToRender] = useState(5);
const [previewEnabled, setPreviewEnabled] = useState(true);
@ -34,6 +35,7 @@ export const FilterMember: FC<Props> = observer((props: Props) => {
return sortBy(filteredOptions, [
(memberId) => !filterValue.includes(memberId),
(memberId) => memberId !== currentUser?.id,
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
]);
// 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}
onClick={() => handleInboxIssueFilters(filterKey, handleFilterValue(member.id))}
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
import { Avatar, Loader } from "@plane/ui";
import { FilterHeader, FilterOption } from "@/components/issues";
import { useMember } from "@/hooks/store";
import { useMember, useUser } from "@/hooks/store";
// components
// ui
@ -22,16 +22,18 @@ export const FilterAssignees: React.FC<Props> = observer((props: Props) => {
const [previewEnabled, setPreviewEnabled] = useState(true);
// store hooks
const { getUserDetails } = useMember();
const { currentUser } = useUser();
const appliedFiltersCount = appliedFilters?.length ?? 0;
const sortedOptions = useMemo(() => {
const filteredOptions = (memberIds || []).filter(
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
const filteredOptions = (memberIds || []).filter((memberId) =>
getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
);
return sortBy(filteredOptions, [
(memberId) => !(appliedFilters ?? []).includes(memberId),
(memberId) => memberId !== currentUser?.id,
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
]);
// 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}
onClick={() => handleUpdate(member.id)}
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
import { Avatar, Loader } from "@plane/ui";
import { FilterHeader, FilterOption } from "@/components/issues";
import { useMember } from "@/hooks/store";
import { useMember, useUser } from "@/hooks/store";
// components
// ui
@ -22,14 +22,16 @@ export const FilterCreatedBy: React.FC<Props> = observer((props: Props) => {
const [previewEnabled, setPreviewEnabled] = useState(true);
// store hooks
const { getUserDetails } = useMember();
const { currentUser } = useUser();
const sortedOptions = useMemo(() => {
const filteredOptions = (memberIds || []).filter(
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
const filteredOptions = (memberIds || []).filter((memberId) =>
getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
);
return sortBy(filteredOptions, [
(memberId) => !(appliedFilters ?? []).includes(memberId),
(memberId) => memberId !== currentUser?.id,
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
]);
// 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}
onClick={() => handleUpdate(member.id)}
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
import { Loader, Avatar } from "@plane/ui";
import { FilterHeader, FilterOption } from "@/components/issues";
import { useMember } from "@/hooks/store";
import { useMember, useUser } from "@/hooks/store";
// components
// ui
@ -22,16 +22,18 @@ export const FilterMentions: React.FC<Props> = observer((props: Props) => {
const [previewEnabled, setPreviewEnabled] = useState(true);
// store hooks
const { getUserDetails } = useMember();
const { currentUser } = useUser();
const appliedFiltersCount = appliedFilters?.length ?? 0;
const sortedOptions = useMemo(() => {
const filteredOptions = (memberIds || []).filter(
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
const filteredOptions = (memberIds || []).filter((memberId) =>
getUserDetails(memberId)?.display_name.toLowerCase().includes(searchQuery.toLowerCase())
);
return sortBy(filteredOptions, [
(memberId) => !(appliedFilters ?? []).includes(memberId),
(memberId) => memberId !== currentUser?.id,
(memberId) => getUserDetails(memberId)?.display_name.toLowerCase(),
]);
// 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}
onClick={() => handleUpdate(member.id)}
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}
/>
);
})}