mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
refactor: priority icon component (#2132)
This commit is contained in:
parent
991258084e
commit
7bb73b74ba
@ -1,13 +1,13 @@
|
||||
// nivo
|
||||
import { BarDatum } from "@nivo/bar";
|
||||
// icons
|
||||
import { getPriorityIcon } from "components/icons";
|
||||
import { PriorityIcon } from "components/icons";
|
||||
// helpers
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
// helpers
|
||||
import { generateBarColor, renderMonthAndYear } from "helpers/analytics.helper";
|
||||
// types
|
||||
import { IAnalyticsParams, IAnalyticsResponse } from "types";
|
||||
import { IAnalyticsParams, IAnalyticsResponse, TIssuePriorities } from "types";
|
||||
// constants
|
||||
import { ANALYTICS_X_AXIS_VALUES, ANALYTICS_Y_AXIS_VALUES, DATE_KEYS } from "constants/analytics";
|
||||
|
||||
@ -53,7 +53,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{params.segment === "priority" ? (
|
||||
getPriorityIcon(key)
|
||||
<PriorityIcon priority={key as TIssuePriorities} />
|
||||
) : (
|
||||
<span
|
||||
className="h-3 w-3 flex-shrink-0 rounded"
|
||||
@ -91,7 +91,7 @@ export const AnalyticsTable: React.FC<Props> = ({ analytics, barGraphData, param
|
||||
}`}
|
||||
>
|
||||
{params.x_axis === "priority" ? (
|
||||
getPriorityIcon(`${item.name}`)
|
||||
<PriorityIcon priority={item.name as TIssuePriorities} />
|
||||
) : (
|
||||
<span
|
||||
className="h-3 w-3 rounded"
|
||||
|
@ -1,5 +1,7 @@
|
||||
import { useRouter } from "next/router";
|
||||
import React, { Dispatch, SetStateAction, useCallback } from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { mutate } from "swr";
|
||||
|
||||
// cmdk
|
||||
@ -7,12 +9,12 @@ import { Command } from "cmdk";
|
||||
// services
|
||||
import issuesService from "services/issues.service";
|
||||
// types
|
||||
import { ICurrentUserResponse, IIssue } from "types";
|
||||
import { ICurrentUserResponse, IIssue, TIssuePriorities } from "types";
|
||||
// constants
|
||||
import { ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
|
||||
import { PRIORITIES } from "constants/project";
|
||||
// icons
|
||||
import { CheckIcon, getPriorityIcon } from "components/icons";
|
||||
import { CheckIcon, PriorityIcon } from "components/icons";
|
||||
|
||||
type Props = {
|
||||
setIsPaletteOpen: Dispatch<SetStateAction<boolean>>;
|
||||
@ -54,7 +56,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue,
|
||||
[workspaceSlug, issueId, projectId, user]
|
||||
);
|
||||
|
||||
const handleIssueState = (priority: string | null) => {
|
||||
const handleIssueState = (priority: TIssuePriorities) => {
|
||||
submitChanges({ priority });
|
||||
setIsPaletteOpen(false);
|
||||
};
|
||||
@ -68,7 +70,7 @@ export const ChangeIssuePriority: React.FC<Props> = ({ setIsPaletteOpen, issue,
|
||||
className="focus:outline-none"
|
||||
>
|
||||
<div className="flex items-center space-x-3">
|
||||
{getPriorityIcon(priority)}
|
||||
<PriorityIcon priority={priority} />
|
||||
<span className="capitalize">{priority ?? "None"}</span>
|
||||
</div>
|
||||
<div>{priority === issue.priority && <CheckIcon className="h-3 w-3" />}</div>
|
||||
|
@ -2,7 +2,7 @@ import React from "react";
|
||||
|
||||
// icons
|
||||
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import { getPriorityIcon, StateGroupIcon } from "components/icons";
|
||||
import { PriorityIcon, StateGroupIcon } from "components/icons";
|
||||
// ui
|
||||
import { Avatar } from "components/ui";
|
||||
// helpers
|
||||
@ -136,7 +136,9 @@ export const FiltersList: React.FC<Props> = ({
|
||||
: "bg-custom-background-90 text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
<span>{getPriorityIcon(priority)}</span>
|
||||
<span>
|
||||
<PriorityIcon priority={priority} />
|
||||
</span>
|
||||
<span>{priority === "null" ? "None" : priority}</span>
|
||||
<span
|
||||
className="cursor-pointer"
|
||||
|
@ -13,12 +13,12 @@ import useProjects from "hooks/use-projects";
|
||||
import { Avatar, Icon } from "components/ui";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { StateGroupIcon, getPriorityIcon } from "components/icons";
|
||||
import { PriorityIcon, StateGroupIcon } from "components/icons";
|
||||
// helpers
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
import { renderEmoji } from "helpers/emoji.helper";
|
||||
// types
|
||||
import { IIssueViewProps, IState, TStateGroups } from "types";
|
||||
import { IIssueViewProps, IState, TIssuePriorities, TStateGroups } from "types";
|
||||
// fetch-keys
|
||||
import { PROJECT_ISSUE_LABELS, PROJECT_MEMBERS } from "constants/fetch-keys";
|
||||
// constants
|
||||
@ -119,7 +119,7 @@ export const BoardHeader: React.FC<Props> = ({
|
||||
);
|
||||
break;
|
||||
case "priority":
|
||||
icon = getPriorityIcon(groupTitle, "text-lg");
|
||||
icon = <PriorityIcon priority={groupTitle as TIssuePriorities} className="text-lg" />;
|
||||
break;
|
||||
case "project":
|
||||
const project = projects?.find((p) => p.id === groupTitle);
|
||||
|
@ -29,7 +29,7 @@ import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
import { orderArrayBy } from "helpers/array.helper";
|
||||
// types
|
||||
import { IIssue, IIssueFilterOptions, IState } from "types";
|
||||
import { IIssue, IIssueFilterOptions, IState, TIssuePriorities } from "types";
|
||||
// fetch-keys
|
||||
import {
|
||||
CYCLE_DETAILS,
|
||||
@ -184,7 +184,8 @@ export const IssuesView: React.FC<Props> = ({
|
||||
// if the issue is moved to a different group, then we will change the group of the
|
||||
// dragged item(or issue)
|
||||
|
||||
if (selectedGroup === "priority") draggedItem.priority = destinationGroup;
|
||||
if (selectedGroup === "priority")
|
||||
draggedItem.priority = destinationGroup as TIssuePriorities;
|
||||
else if (selectedGroup === "state") {
|
||||
draggedItem.state = destinationGroup;
|
||||
draggedItem.state_detail = states?.find((s) => s.id === destinationGroup) as IState;
|
||||
|
@ -15,7 +15,7 @@ import { SingleListIssue } from "components/core";
|
||||
import { Avatar, CustomMenu } from "components/ui";
|
||||
// icons
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
import { StateGroupIcon, getPriorityIcon } from "components/icons";
|
||||
import { PriorityIcon, StateGroupIcon } from "components/icons";
|
||||
// helpers
|
||||
import { addSpaceIfCamelCase } from "helpers/string.helper";
|
||||
import { renderEmoji } from "helpers/emoji.helper";
|
||||
@ -26,6 +26,7 @@ import {
|
||||
IIssueLabels,
|
||||
IIssueViewProps,
|
||||
IState,
|
||||
TIssuePriorities,
|
||||
TStateGroups,
|
||||
UserAuth,
|
||||
} from "types";
|
||||
@ -134,7 +135,7 @@ export const SingleList: React.FC<Props> = ({
|
||||
);
|
||||
break;
|
||||
case "priority":
|
||||
icon = getPriorityIcon(groupTitle, "text-lg");
|
||||
icon = <PriorityIcon priority={groupTitle as TIssuePriorities} className="text-lg" />;
|
||||
break;
|
||||
case "project":
|
||||
const project = projects?.find((p) => p.id === groupTitle);
|
||||
|
@ -19,7 +19,7 @@ import { ActiveCycleProgressStats } from "components/cycles";
|
||||
|
||||
// icons
|
||||
import { CalendarDaysIcon } from "@heroicons/react/20/solid";
|
||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
||||
import { PriorityIcon } from "components/icons/priority-icon";
|
||||
import {
|
||||
TargetIcon,
|
||||
ContrastIcon,
|
||||
@ -477,7 +477,7 @@ export const ActiveCycleDetails: React.FC = () => {
|
||||
: "border-orange-500/20 bg-orange-500/20 text-orange-500"
|
||||
}`}
|
||||
>
|
||||
{getPriorityIcon(issue.priority, "text-sm")}
|
||||
<PriorityIcon priority={issue.priority} className="text-sm" />
|
||||
</div>
|
||||
<ViewIssueLabel labelDetails={issue.label_details} maxRender={2} />
|
||||
<div className={`flex items-center gap-2 text-custom-text-200`}>
|
||||
|
@ -1,22 +1,25 @@
|
||||
export const getPriorityIcon = (priority: string | null, className?: string) => {
|
||||
// types
|
||||
import { TIssuePriorities } from "types";
|
||||
|
||||
type Props = {
|
||||
priority: TIssuePriorities | null;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const PriorityIcon: React.FC<Props> = ({ priority, className = "" }) => {
|
||||
if (!className || className === "") className = "text-xs flex items-center";
|
||||
|
||||
priority = priority?.toLowerCase() ?? null;
|
||||
|
||||
switch (priority) {
|
||||
case "urgent":
|
||||
return <span className={`material-symbols-rounded ${className}`}>error</span>;
|
||||
case "high":
|
||||
return <span className={`material-symbols-rounded ${className}`}>signal_cellular_alt</span>;
|
||||
case "medium":
|
||||
return (
|
||||
<span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_2_bar</span>
|
||||
<span className={`material-symbols-rounded ${className}`}>
|
||||
{priority === "urgent"
|
||||
? "error"
|
||||
: priority === "high"
|
||||
? "signal_cellular_alt"
|
||||
: priority === "medium"
|
||||
? "signal_cellular_alt_2_bar"
|
||||
: priority === "low"
|
||||
? "signal_cellular_alt_1_bar"
|
||||
: "block"}
|
||||
</span>
|
||||
);
|
||||
case "low":
|
||||
return (
|
||||
<span className={`material-symbols-rounded ${className}`}>signal_cellular_alt_1_bar</span>
|
||||
);
|
||||
default:
|
||||
return <span className={`material-symbols-rounded ${className}`}>block</span>;
|
||||
}
|
||||
};
|
||||
|
@ -3,7 +3,7 @@ import useInboxView from "hooks/use-inbox-view";
|
||||
// ui
|
||||
import { MultiLevelDropdown } from "components/ui";
|
||||
// icons
|
||||
import { getPriorityIcon } from "components/icons";
|
||||
import { PriorityIcon } from "components/icons";
|
||||
// constants
|
||||
import { PRIORITIES } from "constants/project";
|
||||
import { INBOX_STATUS } from "constants/inbox";
|
||||
@ -42,7 +42,7 @@ export const FiltersDropdown: React.FC = () => {
|
||||
id: priority === null ? "null" : priority,
|
||||
label: (
|
||||
<div className="flex items-center gap-2 capitalize">
|
||||
{getPriorityIcon(priority)} {priority ?? "None"}
|
||||
<PriorityIcon priority={priority} /> {priority ?? "None"}
|
||||
</div>
|
||||
),
|
||||
value: {
|
||||
|
@ -2,9 +2,11 @@
|
||||
import useInboxView from "hooks/use-inbox-view";
|
||||
// icons
|
||||
import { XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import { getPriorityIcon } from "components/icons";
|
||||
import { PriorityIcon } from "components/icons";
|
||||
// helpers
|
||||
import { replaceUnderscoreIfSnakeCase } from "helpers/string.helper";
|
||||
// types
|
||||
import { TIssuePriorities } from "types";
|
||||
// constants
|
||||
import { INBOX_STATUS } from "constants/inbox";
|
||||
|
||||
@ -48,7 +50,9 @@ export const InboxFiltersList = () => {
|
||||
: "bg-custom-background-90 text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
<span>{getPriorityIcon(priority)}</span>
|
||||
<span>
|
||||
<PriorityIcon priority={priority as TIssuePriorities} />
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="cursor-pointer"
|
||||
|
@ -4,7 +4,7 @@ import Link from "next/link";
|
||||
// ui
|
||||
import { Tooltip } from "components/ui";
|
||||
// icons
|
||||
import { getPriorityIcon } from "components/icons";
|
||||
import { PriorityIcon } from "components/icons";
|
||||
import {
|
||||
CalendarDaysIcon,
|
||||
CheckCircleIcon,
|
||||
@ -65,10 +65,7 @@ export const InboxIssueCard: React.FC<Props> = (props) => {
|
||||
: "border-custom-border-200"
|
||||
}`}
|
||||
>
|
||||
{getPriorityIcon(
|
||||
issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
|
||||
"text-sm"
|
||||
)}
|
||||
<PriorityIcon priority={issue.priority ?? null} className="text-sm" />
|
||||
</div>
|
||||
</Tooltip>
|
||||
<Tooltip
|
||||
|
@ -35,7 +35,7 @@ import type { IInboxIssue, IIssue } from "types";
|
||||
// fetch-keys
|
||||
import { INBOX_ISSUES, INBOX_ISSUE_DETAILS, PROJECT_ISSUES_ACTIVITY } from "constants/fetch-keys";
|
||||
|
||||
const defaultValues = {
|
||||
const defaultValues: Partial<IInboxIssue> = {
|
||||
name: "",
|
||||
description_html: "",
|
||||
estimate_point: null,
|
||||
|
@ -11,7 +11,7 @@ import { DateFilterModal } from "components/core";
|
||||
// ui
|
||||
import { MultiLevelDropdown } from "components/ui";
|
||||
// icons
|
||||
import { StateGroupIcon, getPriorityIcon } from "components/icons";
|
||||
import { PriorityIcon, StateGroupIcon } from "components/icons";
|
||||
// helpers
|
||||
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
|
||||
// types
|
||||
@ -83,7 +83,7 @@ export const MyIssuesSelectFilters: React.FC<Props> = ({
|
||||
id: priority === null ? "null" : priority,
|
||||
label: (
|
||||
<div className="flex items-center gap-2 capitalize">
|
||||
{getPriorityIcon(priority)} {priority ?? "None"}
|
||||
<PriorityIcon priority={priority} /> {priority ?? "None"}
|
||||
</div>
|
||||
),
|
||||
value: {
|
||||
|
@ -18,7 +18,7 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// helpers
|
||||
import { orderArrayBy } from "helpers/array.helper";
|
||||
// types
|
||||
import { IIssue, IIssueFilterOptions } from "types";
|
||||
import { IIssue, IIssueFilterOptions, TIssuePriorities } from "types";
|
||||
// fetch-keys
|
||||
import { USER_ISSUES, WORKSPACE_LABELS } from "constants/fetch-keys";
|
||||
import { PlusIcon } from "@heroicons/react/24/outline";
|
||||
@ -96,7 +96,7 @@ export const MyIssuesView: React.FC<Props> = ({
|
||||
const sourceGroup = source.droppableId;
|
||||
const destinationGroup = destination.droppableId;
|
||||
|
||||
draggedItem[groupBy] = destinationGroup;
|
||||
draggedItem[groupBy] = destinationGroup as TIssuePriorities;
|
||||
|
||||
mutate<{
|
||||
[key: string]: IIssue[];
|
||||
|
@ -19,7 +19,7 @@ import { CustomDatePicker, Icon } from "components/ui";
|
||||
// helpers
|
||||
import { copyTextToClipboard } from "helpers/string.helper";
|
||||
// types
|
||||
import { IIssue } from "types";
|
||||
import { IIssue, TIssuePriorities } from "types";
|
||||
|
||||
type Props = {
|
||||
handleDeleteIssue: () => void;
|
||||
@ -117,7 +117,7 @@ export const PeekOverviewIssueProperties: React.FC<Props> = ({
|
||||
<div className="w-3/4">
|
||||
<SidebarPrioritySelect
|
||||
value={issue.priority}
|
||||
onChange={(val: string) => handleUpdateIssue({ priority: val })}
|
||||
onChange={(val) => handleUpdateIssue({ priority: val })}
|
||||
disabled={readOnly}
|
||||
/>
|
||||
</div>
|
||||
|
@ -3,12 +3,14 @@ import React from "react";
|
||||
// ui
|
||||
import { CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
||||
import { PriorityIcon } from "components/icons/priority-icon";
|
||||
// types
|
||||
import { TIssuePriorities } from "types";
|
||||
// constants
|
||||
import { PRIORITIES } from "constants/project";
|
||||
|
||||
type Props = {
|
||||
value: string | null;
|
||||
value: TIssuePriorities;
|
||||
onChange: (value: string) => void;
|
||||
};
|
||||
|
||||
@ -18,7 +20,10 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
|
||||
label={
|
||||
<div className="flex items-center justify-center gap-2 text-xs">
|
||||
<span className="flex items-center">
|
||||
{getPriorityIcon(value, `text-xs ${value ? "" : "text-custom-text-200"}`)}
|
||||
<PriorityIcon
|
||||
priority={value}
|
||||
className={`text-xs ${value ? "" : "text-custom-text-200"}`}
|
||||
/>
|
||||
</span>
|
||||
<span className={`${value ? "" : "text-custom-text-200"} capitalize`}>
|
||||
{value ?? "Priority"}
|
||||
@ -32,7 +37,9 @@ export const IssuePrioritySelect: React.FC<Props> = ({ value, onChange }) => (
|
||||
<CustomSelect.Option key={priority} value={priority}>
|
||||
<div className="flex w-full justify-between gap-2 rounded">
|
||||
<div className="flex items-center justify-start gap-2">
|
||||
<span>{getPriorityIcon(priority)}</span>
|
||||
<span>
|
||||
<PriorityIcon priority={priority} />
|
||||
</span>
|
||||
<span className="capitalize">{priority ?? "None"}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -3,13 +3,15 @@ import React from "react";
|
||||
// ui
|
||||
import { CustomSelect } from "components/ui";
|
||||
// icons
|
||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
||||
import { PriorityIcon } from "components/icons/priority-icon";
|
||||
// types
|
||||
import { TIssuePriorities } from "types";
|
||||
// constants
|
||||
import { PRIORITIES } from "constants/project";
|
||||
|
||||
type Props = {
|
||||
value: string | null;
|
||||
onChange: (val: string) => void;
|
||||
value: TIssuePriorities;
|
||||
onChange: (val: TIssuePriorities) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
@ -31,7 +33,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
|
||||
}`}
|
||||
>
|
||||
<span className="grid place-items-center -my-1">
|
||||
{getPriorityIcon(value ?? "None", "!text-sm")}
|
||||
<PriorityIcon priority={value} className="!text-sm" />
|
||||
</span>
|
||||
<span>{value ?? "None"}</span>
|
||||
</button>
|
||||
@ -44,7 +46,7 @@ export const SidebarPrioritySelect: React.FC<Props> = ({ value, onChange, disabl
|
||||
{PRIORITIES.map((option) => (
|
||||
<CustomSelect.Option key={option} value={option} className="capitalize">
|
||||
<>
|
||||
{getPriorityIcon(option, "text-sm")}
|
||||
<PriorityIcon priority={option} className="text-sm" />
|
||||
{option ?? "None"}
|
||||
</>
|
||||
</CustomSelect.Option>
|
||||
|
@ -401,7 +401,7 @@ export const IssueDetailsSidebar: React.FC<Props> = ({
|
||||
render={({ field: { value } }) => (
|
||||
<SidebarPrioritySelect
|
||||
value={value}
|
||||
onChange={(val: string) => submitChanges({ priority: val })}
|
||||
onChange={(val) => submitChanges({ priority: val })}
|
||||
disabled={memberRole.isGuest || memberRole.isViewer || uneditable}
|
||||
/>
|
||||
)}
|
||||
|
@ -2,18 +2,18 @@ import React from "react";
|
||||
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
// services
|
||||
import trackEventServices from "services/track-event.service";
|
||||
// ui
|
||||
import { CustomSelect, Tooltip } from "components/ui";
|
||||
// icons
|
||||
import { getPriorityIcon } from "components/icons/priority-icon";
|
||||
import { PriorityIcon } from "components/icons/priority-icon";
|
||||
// helpers
|
||||
import { capitalizeFirstLetter } from "helpers/string.helper";
|
||||
// types
|
||||
import { ICurrentUserResponse, IIssue } from "types";
|
||||
import { ICurrentUserResponse, IIssue, TIssuePriorities } from "types";
|
||||
// constants
|
||||
import { PRIORITIES } from "constants/project";
|
||||
// services
|
||||
import trackEventServices from "services/track-event.service";
|
||||
// helper
|
||||
import { capitalizeFirstLetter } from "helpers/string.helper";
|
||||
|
||||
type Props = {
|
||||
issue: IIssue;
|
||||
@ -42,7 +42,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
|
||||
return (
|
||||
<CustomSelect
|
||||
value={issue.priority}
|
||||
onChange={(data: string) => {
|
||||
onChange={(data: TIssuePriorities) => {
|
||||
partialUpdateIssue({ priority: data }, issue);
|
||||
trackEventServices.trackIssuePartialPropertyUpdateEvent(
|
||||
{
|
||||
@ -77,9 +77,9 @@ export const ViewPrioritySelect: React.FC<Props> = ({
|
||||
position={tooltipPosition}
|
||||
>
|
||||
<span className="flex gap-1 items-center text-custom-text-200 text-xs">
|
||||
{getPriorityIcon(
|
||||
issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
|
||||
`text-sm ${
|
||||
<PriorityIcon
|
||||
priority={issue.priority}
|
||||
className={`text-sm ${
|
||||
issue.priority === "urgent"
|
||||
? "text-white"
|
||||
: issue.priority === "high"
|
||||
@ -89,13 +89,9 @@ export const ViewPrioritySelect: React.FC<Props> = ({
|
||||
: issue.priority === "low"
|
||||
? "text-green-500"
|
||||
: "text-custom-text-200"
|
||||
}`
|
||||
)}
|
||||
{noBorder
|
||||
? issue.priority && issue.priority !== ""
|
||||
? capitalizeFirstLetter(issue.priority) ?? ""
|
||||
: "None"
|
||||
: ""}
|
||||
}`}
|
||||
/>
|
||||
{noBorder ? capitalizeFirstLetter(issue.priority ?? "None") : ""}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</button>
|
||||
@ -108,7 +104,7 @@ export const ViewPrioritySelect: React.FC<Props> = ({
|
||||
{PRIORITIES?.map((priority) => (
|
||||
<CustomSelect.Option key={priority} value={priority} className="capitalize">
|
||||
<>
|
||||
{getPriorityIcon(priority, "text-sm")}
|
||||
<PriorityIcon priority={priority} className="text-sm" />
|
||||
{priority ?? "None"}
|
||||
</>
|
||||
</CustomSelect.Option>
|
||||
|
@ -18,7 +18,7 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
|
||||
// helpers
|
||||
import { orderArrayBy } from "helpers/array.helper";
|
||||
// types
|
||||
import { IIssue, IIssueFilterOptions } from "types";
|
||||
import { IIssue, IIssueFilterOptions, TIssuePriorities } from "types";
|
||||
// fetch-keys
|
||||
import { USER_PROFILE_PROJECT_SEGREGATION, WORKSPACE_LABELS } from "constants/fetch-keys";
|
||||
|
||||
@ -108,7 +108,7 @@ export const ProfileIssuesView = () => {
|
||||
const sourceGroup = source.droppableId;
|
||||
const destinationGroup = destination.droppableId;
|
||||
|
||||
draggedItem[groupByProperty] = destinationGroup;
|
||||
draggedItem[groupByProperty] = destinationGroup as TIssuePriorities;
|
||||
|
||||
mutateProfileIssues((prevData: any) => {
|
||||
if (!prevData) return prevData;
|
||||
|
@ -13,7 +13,7 @@ import { DateFilterModal } from "components/core";
|
||||
// ui
|
||||
import { Avatar, MultiLevelDropdown } from "components/ui";
|
||||
// icons
|
||||
import { StateGroupIcon, getPriorityIcon } from "components/icons";
|
||||
import { PriorityIcon, StateGroupIcon } from "components/icons";
|
||||
// helpers
|
||||
import { getStatesList } from "helpers/state.helper";
|
||||
import { checkIfArraysHaveSameElements } from "helpers/array.helper";
|
||||
@ -99,7 +99,8 @@ export const SelectFilters: React.FC<Props> = ({
|
||||
id: priority === null ? "null" : priority,
|
||||
label: (
|
||||
<div className="flex items-center gap-2 capitalize">
|
||||
{getPriorityIcon(priority)} {priority ?? "None"}
|
||||
<PriorityIcon priority={priority} />
|
||||
{priority ?? "None"}
|
||||
</div>
|
||||
),
|
||||
value: {
|
||||
|
@ -109,7 +109,7 @@ export const IssuePropertiesDetail: React.FC<Props> = (props) => {
|
||||
render={({ field: { value } }) => (
|
||||
<PrioritySelect
|
||||
value={value}
|
||||
onChange={(val: string) => submitChanges({ priority: val })}
|
||||
onChange={(val) => submitChanges({ priority: val })}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
@ -8,15 +8,17 @@ import { ChevronDown } from "lucide-react";
|
||||
import { PRIORITIES } from "constants/project";
|
||||
|
||||
// components
|
||||
import { getPriorityIcon } from "components/icons";
|
||||
import { PriorityIcon } from "components/icons";
|
||||
import { WebViewModal } from "./web-view-modal";
|
||||
|
||||
// helpers
|
||||
import { capitalizeFirstLetter } from "helpers/string.helper";
|
||||
// types
|
||||
import { TIssuePriorities } from "types";
|
||||
|
||||
type Props = {
|
||||
value: any;
|
||||
onChange: (value: any) => void;
|
||||
onChange: (value: TIssuePriorities) => void;
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
@ -59,7 +61,7 @@ export const PrioritySelect: React.FC<Props> = (props) => {
|
||||
: "border-custom-border-200 text-custom-text-200"
|
||||
}`}
|
||||
>
|
||||
{getPriorityIcon(priority, "text-sm")}
|
||||
<PriorityIcon priority={priority} className="text-sm" />
|
||||
</span>
|
||||
),
|
||||
})) || []
|
||||
|
@ -1,3 +1,5 @@
|
||||
import { TIssuePriorities } from "types";
|
||||
|
||||
export const NETWORK_CHOICES: { key: 0 | 2; label: string; icon: string }[] = [
|
||||
{
|
||||
key: 0,
|
||||
@ -19,7 +21,7 @@ export const GROUP_CHOICES = {
|
||||
cancelled: "Cancelled",
|
||||
};
|
||||
|
||||
export const PRIORITIES = ["urgent", "high", "medium", "low", null];
|
||||
export const PRIORITIES: TIssuePriorities[] = ["urgent", "high", "medium", "low", null];
|
||||
|
||||
export const MONTHS = [
|
||||
"January",
|
||||
|
@ -26,7 +26,7 @@ import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const defaultValues = {
|
||||
const defaultValues: Partial<IIssue> = {
|
||||
name: "",
|
||||
description: "",
|
||||
description_html: "",
|
||||
|
@ -27,7 +27,7 @@ import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
|
||||
// helper
|
||||
import { truncateText } from "helpers/string.helper";
|
||||
|
||||
const defaultValues = {
|
||||
const defaultValues: Partial<IIssue> = {
|
||||
assignees_list: [],
|
||||
description: "",
|
||||
description_html: "",
|
||||
|
4
web/types/issues.d.ts
vendored
4
web/types/issues.d.ts
vendored
@ -102,7 +102,7 @@ export interface IIssue {
|
||||
name: string;
|
||||
parent: string | null;
|
||||
parent_detail: IIssueParent | null;
|
||||
priority: string | null;
|
||||
priority: TIssuePriorities;
|
||||
project: string;
|
||||
project_detail: IProjectLite;
|
||||
sequence_id: number;
|
||||
@ -294,3 +294,5 @@ export interface IIssueViewProps {
|
||||
properties: Properties;
|
||||
showEmptyGroups: boolean;
|
||||
}
|
||||
|
||||
export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | null;
|
||||
|
Loading…
Reference in New Issue
Block a user