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

refactor: issue label and make design consistent (#610)

Browse Source
This commit is contained in:
Saheb Giri
2023-03-30 16:59:07 +05:30
committed by GitHub
parent 9c4fcca6c1
commit be5c4140ff
4 changed files with 359 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
apps/app/components/views/form.tsx
View File

@@ -6,23 +6,18 @@ import useSWR from "swr";
import { useForm } from "react-hook-form";
// 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
import { IView } from "types";
// constant
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS, STATE_LIST } from "constants/fetch-keys";
// helpers
import { getStatesList } from "helpers/state.helper";
import { STATE_LIST } from "constants/fetch-keys";
// services
import stateService from "services/state.service";
import projectService from "services/project.service";
import issuesService from "services/issues.service";
// components
import { SelectFilters } from "components/views";
// icons
import { getStateGroupIcon } from "components/icons";
import { getPriorityIcon } from "components/icons/priority-icon";
// components
type Props = {
handleFormSubmit: (values: IView) => Promise<void>;
@@ -44,31 +39,6 @@ export const ViewForm: React.FC<Props> = ({
data,
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 {
register,
formState: { errors, isSubmitting },
@@ -161,87 +131,15 @@ export const ViewForm: React.FC<Props> = ({
/>
</div>
<div>
<div className="flex flex-wrap items-center gap-4">
{Object.keys(filters ?? {}).map((key) => {
const queryKey = key as keyof typeof filters;
if (queryKey === "state")
return (
<div className="flex gap-3" key={key}>
{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>
<FilterList
filters={filters}
setFilters={(query: any) => {
setValue("query", {
...filters,
...query,
});
}}
/>
</div>
</div>
</div>