forked from github/plane
refactor: issue label and make design consistent (#610)
This commit is contained in:
Saheb Giri
GitHub
parent
9c4fcca6c1
commit
be5c4140ff
337
apps/app/components/core/filter-list.tsx
Normal file
337
apps/app/components/core/filter-list.tsx
Normal file
@ -0,0 +1,337 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useRouter } from "next/router";
|
||||||
|
import useSWR from "swr";
|
||||||
|
|
||||||
|
// icons
|
||||||
|
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||||
|
import { getPriorityIcon, getStateGroupIcon } from "components/icons";
|
||||||
|
// ui
|
||||||
|
import { Avatar } from "components/ui";
|
||||||
|
// helpers
|
||||||
|
import { getStatesList } from "helpers/state.helper";
|
||||||
|
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
||||||
|
// services
|
||||||
|
import issuesService from "services/issues.service";
|
||||||
|
import projectService from "services/project.service";
|
||||||
|
import stateService from "services/state.service";
|
||||||
|
// types
|
||||||
|
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATE_LIST } from "constants/fetch-keys";
|
||||||
|
import { IIssueFilterOptions } from "types";
|
||||||
|
|
||||||
|
export const FilterList: React.FC<any> = ({ filters, setFilters }) => {
|
||||||
|
const router = useRouter();
|
||||||
|
const { workspaceSlug, projectId, viewId } = router.query;
|
||||||
|
|
||||||
|
const { data: members } = useSWR(
|
||||||
|
projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
||||||
|
workspaceSlug && projectId
|
||||||
|
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
const { data: issueLabels } = useSWR(
|
||||||
|
projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
|
||||||
|
workspaceSlug && projectId
|
||||||
|
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
|
||||||
|
const { data: stateGroups } = useSWR(
|
||||||
|
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
||||||
|
workspaceSlug
|
||||||
|
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
||||||
|
: null
|
||||||
|
);
|
||||||
|
const states = getStatesList(stateGroups ?? {});
|
||||||
|
|
||||||
|
if (!filters) return <></>;
|
||||||
|
|
||||||
|
const nullFilters = Object.keys(filters).filter(
|
||||||
|
(key) => filters[key as keyof IIssueFilterOptions] === null
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-1 flex-wrap items-center gap-2 text-xs">
|
||||||
|
{Object.keys(filters).map((key) => {
|
||||||
|
if (filters[key as keyof typeof filters] !== null)
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={key}
|
||||||
|
className="flex items-center gap-x-2 rounded-full border bg-white px-2 py-1"
|
||||||
|
>
|
||||||
|
<span className="font-medium capitalize text-gray-500">
|
||||||
|
{replaceUnderscoreIfSnakeCase(key)}:
|
||||||
|
</span>
|
||||||
|
{filters[key as keyof IIssueFilterOptions] === null ||
|
||||||
|
(filters[key as keyof IIssueFilterOptions]?.length ?? 0) <= 0 ? (
|
||||||
|
<span className="inline-flex items-center px-2 py-0.5 font-medium">None</span>
|
||||||
|
) : Array.isArray(filters[key as keyof IIssueFilterOptions]) ? (
|
||||||
|
<div className="space-x-2">
|
||||||
|
{key === "state" ? (
|
||||||
|
<div className="flex flex-wrap items-center gap-1">
|
||||||
|
{filters.state?.map((stateId: any) => {
|
||||||
|
const state = states?.find((s) => s.id === stateId);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p
|
||||||
|
key={state?.id}
|
||||||
|
className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium text-white"
|
||||||
|
style={{
|
||||||
|
color: state?.color,
|
||||||
|
backgroundColor: `${state?.color}20`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span>
|
||||||
|
{getStateGroupIcon(
|
||||||
|
state?.group ?? "backlog",
|
||||||
|
"12",
|
||||||
|
"12",
|
||||||
|
state?.color
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
<span>{state?.name ?? ""}</span>
|
||||||
|
<span
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() =>
|
||||||
|
setFilters(
|
||||||
|
{
|
||||||
|
state: filters.state?.filter((s: any) => s !== stateId),
|
||||||
|
},
|
||||||
|
!Boolean(viewId)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<XMarkIcon className="h-3 w-3" />
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() =>
|
||||||
|
setFilters({
|
||||||
|
state: null,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<XMarkIcon className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : key === "priority" ? (
|
||||||
|
<div className="flex flex-wrap items-center gap-1">
|
||||||
|
{filters.priority?.map((priority: any) => (
|
||||||
|
<p
|
||||||
|
key={priority}
|
||||||
|
className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium capitalize text-white ${
|
||||||
|
priority === "urgent"
|
||||||
|
? "bg-red-100 text-red-600 hover:bg-red-100"
|
||||||
|
: priority === "high"
|
||||||
|
? "bg-orange-100 text-orange-500 hover:bg-orange-100"
|
||||||
|
: priority === "medium"
|
||||||
|
? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
|
||||||
|
: priority === "low"
|
||||||
|
? "bg-green-100 text-green-500 hover:bg-green-100"
|
||||||
|
: "bg-gray-100"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span>{getPriorityIcon(priority)}</span>
|
||||||
|
<span>{priority}</span>
|
||||||
|
<span
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() =>
|
||||||
|
setFilters(
|
||||||
|
{
|
||||||
|
priority: filters.priority?.filter((p: any) => p !== priority),
|
||||||
|
},
|
||||||
|
!Boolean(viewId)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<XMarkIcon className="h-3 w-3" />
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() =>
|
||||||
|
setFilters({
|
||||||
|
priority: null,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<XMarkIcon className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : key === "assignees" ? (
|
||||||
|
<div className="flex flex-wrap items-center gap-1">
|
||||||
|
{filters.assignees?.map((memberId: string) => {
|
||||||
|
const member = members?.find((m) => m.member.id === memberId)?.member;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={memberId}
|
||||||
|
className="inline-flex items-center gap-x-1 rounded-full px-1 font-medium capitalize"
|
||||||
|
>
|
||||||
|
<Avatar user={member} />
|
||||||
|
<span>{member?.first_name}</span>
|
||||||
|
<span
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() =>
|
||||||
|
setFilters(
|
||||||
|
{
|
||||||
|
assignees: filters.assignees?.filter(
|
||||||
|
(p: any) => p !== memberId
|
||||||
|
),
|
||||||
|
},
|
||||||
|
!Boolean(viewId)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<XMarkIcon className="h-3 w-3" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() =>
|
||||||
|
setFilters({
|
||||||
|
assignees: null,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<XMarkIcon className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (key as keyof IIssueFilterOptions) === "created_by" ? (
|
||||||
|
<div className="flex flex-wrap items-center gap-1">
|
||||||
|
{filters.created_by?.map((memberId: string) => {
|
||||||
|
const member = members?.find((m) => m.member.id === memberId)?.member;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`${memberId}-${key}`}
|
||||||
|
className="inline-flex items-center gap-x-1 rounded-full px-1 font-medium capitalize"
|
||||||
|
>
|
||||||
|
<Avatar user={member} />
|
||||||
|
<span>{member?.first_name}</span>
|
||||||
|
<span
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() =>
|
||||||
|
setFilters(
|
||||||
|
{
|
||||||
|
created_by: filters.created_by?.filter(
|
||||||
|
(p: any) => p !== memberId
|
||||||
|
),
|
||||||
|
},
|
||||||
|
!Boolean(viewId)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<XMarkIcon className="h-3 w-3" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() =>
|
||||||
|
setFilters({
|
||||||
|
created_by: null,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<XMarkIcon className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : key === "labels" ? (
|
||||||
|
<div className="flex flex-wrap items-center gap-1">
|
||||||
|
{filters.labels?.map((labelId: string) => {
|
||||||
|
const label = issueLabels?.find((l) => l.id === labelId);
|
||||||
|
|
||||||
|
if (!label) return null;
|
||||||
|
const color = label.color !== "" ? label.color : "#0f172a";
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium"
|
||||||
|
style={{
|
||||||
|
background: `${color}33`, // add 20% opacity
|
||||||
|
}}
|
||||||
|
key={labelId}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="h-2 w-2 rounded-full"
|
||||||
|
style={{
|
||||||
|
backgroundColor: color,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
color: color,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label.name}
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
className="cursor-pointer"
|
||||||
|
onClick={() =>
|
||||||
|
setFilters(
|
||||||
|
{
|
||||||
|
labels: filters.labels?.filter((l: any) => l !== labelId),
|
||||||
|
},
|
||||||
|
!Boolean(viewId)
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<XMarkIcon
|
||||||
|
className="h-3 w-3"
|
||||||
|
style={{
|
||||||
|
color: color,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() =>
|
||||||
|
setFilters({
|
||||||
|
labels: null,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<XMarkIcon className="h-3 w-3" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
(filters[key as keyof IIssueFilterOptions] as any)?.join(", ")
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<span className="capitalize">{filters[key as keyof typeof filters]}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() =>
|
||||||
|
setFilters({
|
||||||
|
state: null,
|
||||||
|
priority: null,
|
||||||
|
assignees: null,
|
||||||
|
labels: null,
|
||||||
|
created_by: null,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
className="flex items-center gap-x-1 rounded-full border bg-white px-3 py-1.5 text-xs"
|
||||||
|
>
|
||||||
|
<span className="font-medium">Clear all filters</span>
|
||||||
|
<XMarkIcon className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -10,3 +10,4 @@ export * from "./issues-view";
|
|||||||
export * from "./link-modal";
|
export * from "./link-modal";
|
||||||
export * from "./not-authorized-view";
|
export * from "./not-authorized-view";
|
||||||
export * from "./image-picker-popover";
|
export * from "./image-picker-popover";
|
||||||
|
export * from "./filter-list";
|
||||||
|
|||||||
@ -9,18 +9,17 @@ import { DragDropContext, DropResult } from "react-beautiful-dnd";
|
|||||||
// services
|
// services
|
||||||
import issuesService from "services/issues.service";
|
import issuesService from "services/issues.service";
|
||||||
import stateService from "services/state.service";
|
import stateService from "services/state.service";
|
||||||
import projectService from "services/project.service";
|
|
||||||
import modulesService from "services/modules.service";
|
import modulesService from "services/modules.service";
|
||||||
// hooks
|
// hooks
|
||||||
import useToast from "hooks/use-toast";
|
import useToast from "hooks/use-toast";
|
||||||
import useIssuesView from "hooks/use-issues-view";
|
import useIssuesView from "hooks/use-issues-view";
|
||||||
// components
|
// components
|
||||||
import { AllLists, AllBoards } from "components/core";
|
import { AllLists, AllBoards, FilterList } from "components/core";
|
||||||
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||||
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
import StrictModeDroppable from "components/dnd/StrictModeDroppable";
|
||||||
import { CreateUpdateViewModal } from "components/views";
|
import { CreateUpdateViewModal } from "components/views";
|
||||||
// ui
|
// ui
|
||||||
import { Avatar, EmptySpace, EmptySpaceItem, PrimaryButton, Spinner } from "components/ui";
|
import { EmptySpace, EmptySpaceItem, PrimaryButton, Spinner } from "components/ui";
|
||||||
import { CalendarView } from "./calendar-view";
|
import { CalendarView } from "./calendar-view";
|
||||||
// icons
|
// icons
|
||||||
import {
|
import {
|
||||||
@ -28,12 +27,10 @@ import {
|
|||||||
PlusIcon,
|
PlusIcon,
|
||||||
RectangleStackIcon,
|
RectangleStackIcon,
|
||||||
TrashIcon,
|
TrashIcon,
|
||||||
XMarkIcon,
|
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
import { ExclamationIcon, getStateGroupIcon } from "components/icons";
|
import { ExclamationIcon } from "components/icons";
|
||||||
// helpers
|
// helpers
|
||||||
import { getStatesList } from "helpers/state.helper";
|
import { getStatesList } from "helpers/state.helper";
|
||||||
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
|
||||||
// types
|
// types
|
||||||
import {
|
import {
|
||||||
CycleIssueResponse,
|
CycleIssueResponse,
|
||||||
@ -49,11 +46,8 @@ import {
|
|||||||
MODULE_ISSUES,
|
MODULE_ISSUES,
|
||||||
MODULE_ISSUES_WITH_PARAMS,
|
MODULE_ISSUES_WITH_PARAMS,
|
||||||
PROJECT_ISSUES_LIST_WITH_PARAMS,
|
PROJECT_ISSUES_LIST_WITH_PARAMS,
|
||||||
PROJECT_ISSUE_LABELS,
|
|
||||||
PROJECT_MEMBERS,
|
|
||||||
STATE_LIST,
|
STATE_LIST,
|
||||||
} from "constants/fetch-keys";
|
} from "constants/fetch-keys";
|
||||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
type?: "issue" | "cycle" | "module";
|
type?: "issue" | "cycle" | "module";
|
||||||
@ -112,20 +106,6 @@ export const IssuesView: React.FC<Props> = ({
|
|||||||
);
|
);
|
||||||
const states = getStatesList(stateGroups ?? {});
|
const states = getStatesList(stateGroups ?? {});
|
||||||
|
|
||||||
const { data: members } = useSWR(
|
|
||||||
projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const { data: issueLabels } = useSWR(
|
|
||||||
projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleDeleteIssue = useCallback(
|
const handleDeleteIssue = useCallback(
|
||||||
(issue: IIssue) => {
|
(issue: IIssue) => {
|
||||||
setDeleteIssueModal(true);
|
setDeleteIssueModal(true);
|
||||||
@ -428,243 +408,7 @@ export const IssuesView: React.FC<Props> = ({
|
|||||||
/>
|
/>
|
||||||
<div className="mb-5 -mt-4">
|
<div className="mb-5 -mt-4">
|
||||||
<div className="flex items-center justify-between gap-2">
|
<div className="flex items-center justify-between gap-2">
|
||||||
<div className="flex flex-wrap items-center gap-3 text-xs">
|
<FilterList filters={filters} setFilters={setFilters} />
|
||||||
{Object.keys(filters).map((key) => {
|
|
||||||
if (filters[key as keyof typeof filters] !== null)
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={key}
|
|
||||||
className="flex items-center gap-x-2 rounded-full border bg-white px-2 py-1"
|
|
||||||
>
|
|
||||||
<span className="font-medium capitalize text-gray-500">
|
|
||||||
{replaceUnderscoreIfSnakeCase(key)}:
|
|
||||||
</span>
|
|
||||||
{filters[key as keyof IIssueFilterOptions] === null ||
|
|
||||||
(filters[key as keyof IIssueFilterOptions]?.length ?? 0) <= 0 ? (
|
|
||||||
<span>None</span>
|
|
||||||
) : Array.isArray(filters[key as keyof IIssueFilterOptions]) ? (
|
|
||||||
<div className="space-x-2">
|
|
||||||
{key === "state" ? (
|
|
||||||
<div className="flex items-center gap-x-1">
|
|
||||||
{filters.state?.map((stateId: any) => {
|
|
||||||
const state = states?.find((s) => s.id === stateId);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<p
|
|
||||||
key={state?.id}
|
|
||||||
className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium text-white"
|
|
||||||
style={{
|
|
||||||
color: state?.color,
|
|
||||||
backgroundColor: `${state?.color}20`,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span>
|
|
||||||
{getStateGroupIcon(
|
|
||||||
state?.group ?? "backlog",
|
|
||||||
"12",
|
|
||||||
"12",
|
|
||||||
state?.color
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
<span>{state?.name ?? ""}</span>
|
|
||||||
<span
|
|
||||||
className="cursor-pointer"
|
|
||||||
onClick={() =>
|
|
||||||
setFilters(
|
|
||||||
{
|
|
||||||
state: filters.state?.filter((s: any) => s !== stateId),
|
|
||||||
},
|
|
||||||
!Boolean(viewId)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<XMarkIcon className="h-3 w-3" />
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() =>
|
|
||||||
setFilters({
|
|
||||||
state: null,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<XMarkIcon className="h-3 w-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : key === "priority" ? (
|
|
||||||
<div className="flex items-center gap-x-1">
|
|
||||||
{filters.priority?.map((priority: any) => (
|
|
||||||
<p
|
|
||||||
key={priority}
|
|
||||||
className={`inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium capitalize text-white ${
|
|
||||||
priority === "urgent"
|
|
||||||
? "bg-red-100 text-red-600 hover:bg-red-100"
|
|
||||||
: priority === "high"
|
|
||||||
? "bg-orange-100 text-orange-500 hover:bg-orange-100"
|
|
||||||
: priority === "medium"
|
|
||||||
? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
|
|
||||||
: priority === "low"
|
|
||||||
? "bg-green-100 text-green-500 hover:bg-green-100"
|
|
||||||
: "bg-gray-100"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span>{getPriorityIcon(priority)}</span>
|
|
||||||
<span>{priority}</span>
|
|
||||||
<span
|
|
||||||
className="cursor-pointer"
|
|
||||||
onClick={() =>
|
|
||||||
setFilters(
|
|
||||||
{
|
|
||||||
priority: filters.priority?.filter(
|
|
||||||
(p: any) => p !== priority
|
|
||||||
),
|
|
||||||
},
|
|
||||||
!Boolean(viewId)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<XMarkIcon className="h-3 w-3" />
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() =>
|
|
||||||
setFilters({
|
|
||||||
priority: null,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<XMarkIcon className="h-3 w-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : key === "assignees" ? (
|
|
||||||
<div className="flex items-center gap-x-1">
|
|
||||||
{filters.assignees?.map((memberId: string) => {
|
|
||||||
const member = members?.find((m) => m.member.id === memberId)?.member;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<p
|
|
||||||
key={memberId}
|
|
||||||
className="inline-flex items-center gap-x-1 rounded-full px-0.5 py-0.5 font-medium capitalize"
|
|
||||||
>
|
|
||||||
<Avatar user={member} />
|
|
||||||
<span>{member?.first_name}</span>
|
|
||||||
<span
|
|
||||||
className="cursor-pointer"
|
|
||||||
onClick={() =>
|
|
||||||
setFilters(
|
|
||||||
{
|
|
||||||
assignees: filters.assignees?.filter(
|
|
||||||
(p: any) => p !== memberId
|
|
||||||
),
|
|
||||||
},
|
|
||||||
!Boolean(viewId)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<XMarkIcon className="h-3 w-3" />
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() =>
|
|
||||||
setFilters({
|
|
||||||
assignees: null,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<XMarkIcon className="h-3 w-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (key as keyof IIssueFilterOptions) === "created_by" ? (
|
|
||||||
<div className="flex items-center gap-x-1">
|
|
||||||
{filters.created_by?.map((memberId: string) => {
|
|
||||||
const member = members?.find((m) => m.member.id === memberId)?.member;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<p
|
|
||||||
key={memberId}
|
|
||||||
className="inline-flex items-center gap-x-1 rounded-full px-2 py-0.5 font-medium capitalize"
|
|
||||||
>
|
|
||||||
<Avatar user={member} />
|
|
||||||
<span>{member?.first_name}</span>
|
|
||||||
<span
|
|
||||||
className="cursor-pointer"
|
|
||||||
onClick={() =>
|
|
||||||
setFilters(
|
|
||||||
{
|
|
||||||
assignees: filters.created_by?.filter(
|
|
||||||
(p: any) => p !== memberId
|
|
||||||
),
|
|
||||||
},
|
|
||||||
!Boolean(viewId)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<XMarkIcon className="h-3 w-3" />
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() =>
|
|
||||||
setFilters({
|
|
||||||
created_by: null,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<XMarkIcon className="h-3 w-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : key === "labels" ? (
|
|
||||||
<div className="flex items-center gap-x-1">
|
|
||||||
{filters.labels?.map((labelId: string) => {
|
|
||||||
const label = issueLabels?.find((l) => l.id === labelId);
|
|
||||||
|
|
||||||
if (!label) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<div
|
|
||||||
className="h-2 w-2 rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor:
|
|
||||||
label.color && label.color !== "" ? label.color : "#000000",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{label.name}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() =>
|
|
||||||
setFilters({
|
|
||||||
labels: null,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<XMarkIcon className="h-3 w-3" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
(filters[key as keyof IIssueFilterOptions] as any)?.join(", ")
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<span className="capitalize">{filters[key as keyof typeof filters]}</span>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
{Object.keys(filters).length > 0 &&
|
{Object.keys(filters).length > 0 &&
|
||||||
nullFilters.length !== Object.keys(filters).length && (
|
nullFilters.length !== Object.keys(filters).length && (
|
||||||
<PrimaryButton
|
<PrimaryButton
|
||||||
@ -688,24 +432,10 @@ export const IssuesView: React.FC<Props> = ({
|
|||||||
</PrimaryButton>
|
</PrimaryButton>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{Object.keys(filters).length > 0 && nullFilters.length !== Object.keys(filters).length && (
|
|
||||||
<button
|
|
||||||
onClick={() =>
|
|
||||||
setFilters({
|
|
||||||
state: null,
|
|
||||||
priority: null,
|
|
||||||
assignees: null,
|
|
||||||
labels: null,
|
|
||||||
created_by: null,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
className="mt-2 flex items-center gap-x-1 rounded-full border bg-white px-3 py-1.5 text-xs"
|
|
||||||
>
|
|
||||||
<span>Clear all filters</span>
|
|
||||||
<XMarkIcon className="h-4 w-4" />
|
|
||||||
</button>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div className="mb-5 border-t" />
|
||||||
|
|
||||||
<DragDropContext onDragEnd={handleOnDragEnd}>
|
<DragDropContext onDragEnd={handleOnDragEnd}>
|
||||||
<StrictModeDroppable droppableId="trashBox">
|
<StrictModeDroppable droppableId="trashBox">
|
||||||
{(provided, snapshot) => (
|
{(provided, snapshot) => (
|
||||||
|
|||||||
@ -6,23 +6,18 @@ import useSWR from "swr";
|
|||||||
|
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
// ui
|
// ui
|
||||||
import { Avatar, Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
|
import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui";
|
||||||
|
// components
|
||||||
|
import { FilterList } from "components/core";
|
||||||
// types
|
// types
|
||||||
import { IView } from "types";
|
import { IView } from "types";
|
||||||
// constant
|
// constant
|
||||||
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATE_LIST } from "constants/fetch-keys";
|
import { STATE_LIST } from "constants/fetch-keys";
|
||||||
// helpers
|
|
||||||
import { getStatesList } from "helpers/state.helper";
|
|
||||||
// services
|
// services
|
||||||
import stateService from "services/state.service";
|
import stateService from "services/state.service";
|
||||||
import projectService from "services/project.service";
|
|
||||||
import issuesService from "services/issues.service";
|
|
||||||
// components
|
// components
|
||||||
import { SelectFilters } from "components/views";
|
import { SelectFilters } from "components/views";
|
||||||
// icons
|
|
||||||
import { getStateGroupIcon } from "components/icons";
|
|
||||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
|
||||||
// components
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
handleFormSubmit: (values: IView) => Promise<void>;
|
handleFormSubmit: (values: IView) => Promise<void>;
|
||||||
@ -44,31 +39,6 @@ export const ViewForm: React.FC<Props> = ({
|
|||||||
data,
|
data,
|
||||||
preLoadedData,
|
preLoadedData,
|
||||||
}) => {
|
}) => {
|
||||||
const router = useRouter();
|
|
||||||
const { workspaceSlug, projectId } = router.query;
|
|
||||||
|
|
||||||
const { data: states } = useSWR(
|
|
||||||
workspaceSlug && projectId ? STATE_LIST(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => stateService.getStates(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
const statesList = getStatesList(states ?? {});
|
|
||||||
|
|
||||||
const { data: members } = useSWR(
|
|
||||||
projectId ? PROJECT_MEMBERS(projectId as string) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => projectService.projectMembers(workspaceSlug as string, projectId as string)
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const { data: issueLabels } = useSWR(
|
|
||||||
projectId ? PROJECT_ISSUE_LABELS(projectId.toString()) : null,
|
|
||||||
workspaceSlug && projectId
|
|
||||||
? () => issuesService.getIssueLabels(workspaceSlug as string, projectId.toString())
|
|
||||||
: null
|
|
||||||
);
|
|
||||||
|
|
||||||
const {
|
const {
|
||||||
register,
|
register,
|
||||||
formState: { errors, isSubmitting },
|
formState: { errors, isSubmitting },
|
||||||
@ -161,87 +131,15 @@ export const ViewForm: React.FC<Props> = ({
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div className="flex flex-wrap items-center gap-4">
|
<FilterList
|
||||||
{Object.keys(filters ?? {}).map((key) => {
|
filters={filters}
|
||||||
const queryKey = key as keyof typeof filters;
|
setFilters={(query: any) => {
|
||||||
if (queryKey === "state")
|
setValue("query", {
|
||||||
return (
|
...filters,
|
||||||
<div className="flex gap-3" key={key}>
|
...query,
|
||||||
{filters.state?.map((stateID) => {
|
});
|
||||||
const state = statesList.find((state) => state.id === stateID);
|
}}
|
||||||
if (!state) return null;
|
/>
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="flex items-center gap-2 rounded-full border bg-white px-2 py-1.5 text-xs"
|
|
||||||
key={state.id}
|
|
||||||
>
|
|
||||||
{getStateGroupIcon(state?.group, "16", "16", state?.color)}
|
|
||||||
{state?.name}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
else if (queryKey === "priority")
|
|
||||||
return (
|
|
||||||
<div className="flex gap-3" key={key}>
|
|
||||||
{filters.priority?.map((priority) => (
|
|
||||||
<div
|
|
||||||
className="flex items-center gap-2 rounded-full border bg-white px-2 py-1.5 text-xs"
|
|
||||||
key={priority}
|
|
||||||
>
|
|
||||||
{getPriorityIcon(priority)}
|
|
||||||
{priority}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
else if (queryKey === "assignees")
|
|
||||||
return (
|
|
||||||
<div className="flex gap-3" key={key}>
|
|
||||||
{filters.assignees?.map((assigneeId) => {
|
|
||||||
const member = members?.find((member) => member.member.id === assigneeId);
|
|
||||||
|
|
||||||
if (!member) return null;
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className="flex items-center gap-2 rounded-full border bg-white px-1.5 py-1 text-xs"
|
|
||||||
key={member.member.id}
|
|
||||||
>
|
|
||||||
<Avatar user={member.member} />
|
|
||||||
{member.member.first_name && member.member.first_name !== ""
|
|
||||||
? member.member.first_name
|
|
||||||
: member.member.email}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
else if (queryKey === "labels")
|
|
||||||
return (
|
|
||||||
<div className="flex gap-3" key={key}>
|
|
||||||
<div className="flex items-center gap-x-1">
|
|
||||||
{filters.labels?.map((labelId: string) => {
|
|
||||||
const label = issueLabels?.find((l) => l.id === labelId);
|
|
||||||
if (!label) return null;
|
|
||||||
return (
|
|
||||||
<div className="flex items-center gap-1 rounded-full border bg-white px-1.5 py-1 text-xs">
|
|
||||||
<div
|
|
||||||
className="h-2 w-2 rounded-full"
|
|
||||||
style={{
|
|
||||||
backgroundColor:
|
|
||||||
label.color && label.color !== "" ? label.color : "#000000",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{label.name}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user