forked from github/plane
chore: implemented filters for issues
This commit is contained in:
gurusainath
parent
04242800c9
commit
3b85444e1f
@ -20,7 +20,7 @@ export const ModuleCancelledIcon: React.FC<Props> = ({
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_4052_100277)">
|
||||
<g clipPath="url(#clip0_4052_100277)">
|
||||
<path
|
||||
d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
|
||||
fill="#ef4444"
|
||||
|
||||
@ -16,7 +16,7 @@ export const ModulePausedIcon: React.FC<Props> = ({ width = "20", height = "20",
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_4052_100275)">
|
||||
<g clipPath="url(#clip0_4052_100275)">
|
||||
<path
|
||||
d="M6.4435 10.34C6.6145 10.34 6.75667 10.2825 6.87 10.1675C6.98333 10.0525 7.04 9.91 7.04 9.74V6.24C7.04 6.07 6.98217 5.9275 6.8665 5.8125C6.75082 5.6975 6.60749 5.64 6.4365 5.64C6.2655 5.64 6.12333 5.6975 6.01 5.8125C5.89667 5.9275 5.84 6.07 5.84 6.24V9.74C5.84 9.91 5.89783 10.0525 6.0135 10.1675C6.12918 10.2825 6.27251 10.34 6.4435 10.34ZM9.5635 10.34C9.7345 10.34 9.87667 10.2825 9.99 10.1675C10.1033 10.0525 10.16 9.91 10.16 9.74V6.24C10.16 6.07 10.1022 5.9275 9.9865 5.8125C9.87082 5.6975 9.72749 5.64 9.5565 5.64C9.3855 5.64 9.24333 5.6975 9.13 5.8125C9.01667 5.9275 8.96 6.07 8.96 6.24V9.74C8.96 9.91 9.01783 10.0525 9.1335 10.1675C9.24918 10.2825 9.39251 10.34 9.5635 10.34ZM8 16C6.89333 16 5.85333 15.79 4.88 15.37C3.90667 14.95 3.06 14.38 2.34 13.66C1.62 12.94 1.05 12.0933 0.63 11.12C0.21 10.1467 0 9.10667 0 8C0 7.54667 0.0366667 7.09993 0.11 6.6598C0.183333 6.21965 0.293333 5.78639 0.44 5.36C0.493333 5.21333 0.593333 5.11667 0.74 5.07C0.886667 5.02333 1.02667 5.04199 1.16 5.12596C1.30285 5.20993 1.40523 5.33327 1.46714 5.49596C1.52905 5.65865 1.54 5.82 1.5 5.98C1.42 6.31333 1.35 6.64765 1.29 6.98294C1.23 7.31823 1.2 7.65725 1.2 8C1.2 9.89833 1.85875 11.5063 3.17624 12.8238C4.49375 14.1413 6.10167 14.8 8 14.8C9.89833 14.8 11.5063 14.1413 12.8238 12.8238C14.1413 11.5063 14.8 9.89833 14.8 8C14.8 6.10167 14.1413 4.49375 12.8238 3.17624C11.5063 1.85875 9.89833 1.2 8 1.2C7.63235 1.2 7.26852 1.22667 6.90852 1.28C6.54852 1.33333 6.19235 1.41333 5.84 1.52C5.68 1.57333 5.52 1.56667 5.36 1.5C5.2 1.43333 5.08667 1.32667 5.02 1.18C4.95333 1.03333 4.96 0.886667 5.04 0.74C5.12 0.593333 5.23333 0.493333 5.38 0.44C5.79333 0.306667 6.21333 0.2 6.64 0.12C7.06667 0.04 7.49333 0 7.92 0C9.02667 0 10.07 0.21 11.05 0.63C12.03 1.05 12.8863 1.62 13.6189 2.34C14.3516 3.06 14.9316 3.90667 15.3589 4.88C15.7863 5.85333 16 6.89333 16 8C16 9.10667 15.79 10.1467 15.37 11.12C14.95 12.0933 14.38 12.94 13.66 13.66C12.94 14.38 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM2.65764 3.62C2.37921 3.62 2.14333 3.52255 1.95 3.32764C1.75667 3.13275 1.66 2.89608 1.66 2.61764C1.66 2.33921 1.75745 2.10333 1.95236 1.91C2.14725 1.71667 2.38392 1.62 2.66236 1.62C2.94079 1.62 3.17667 1.71745 3.37 1.91236C3.56333 2.10725 3.66 2.34392 3.66 2.62236C3.66 2.90079 3.56255 3.13667 3.36764 3.33C3.17275 3.52333 2.93608 3.62 2.65764 3.62Z"
|
||||
fill="#525252"
|
||||
|
||||
@ -19,6 +19,6 @@ export const StateGroupBacklogIcon: React.FC<Props> = ({
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="6" cy="6" r="5.6" stroke={color} stroke-width="0.8" stroke-dasharray="4 4" />
|
||||
<circle cx="6" cy="6" r="5.6" stroke={color} strokeWidth="0.8" strokeDasharray="4 4" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -19,7 +19,7 @@ export const StateGroupCancelledIcon: React.FC<Props> = ({
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g clip-path="url(#clip0_4052_100277)">
|
||||
<g clipPath="url(#clip0_4052_100277)">
|
||||
<path
|
||||
d="M8 8.84L10.58 11.42C10.7 11.54 10.84 11.6 11 11.6C11.16 11.6 11.3 11.54 11.42 11.42C11.54 11.3 11.6 11.16 11.6 11C11.6 10.84 11.54 10.7 11.42 10.58L8.84 8L11.42 5.42C11.54 5.3 11.6 5.16 11.6 5C11.6 4.84 11.54 4.7 11.42 4.58C11.3 4.46 11.16 4.4 11 4.4C10.84 4.4 10.7 4.46 10.58 4.58L8 7.16L5.42 4.58C5.3 4.46 5.16 4.4 5 4.4C4.84 4.4 4.7 4.46 4.58 4.58C4.46 4.7 4.4 4.84 4.4 5C4.4 5.16 4.46 5.3 4.58 5.42L7.16 8L4.58 10.58C4.46 10.7 4.4 10.84 4.4 11C4.4 11.16 4.46 11.3 4.58 11.42C4.7 11.54 4.84 11.6 5 11.6C5.16 11.6 5.3 11.54 5.42 11.42L8 8.84ZM8 16C6.90667 16 5.87333 15.79 4.9 15.37C3.92667 14.95 3.07667 14.3767 2.35 13.65C1.62333 12.9233 1.05 12.0733 0.63 11.1C0.21 10.1267 0 9.09333 0 8C0 6.89333 0.21 5.85333 0.63 4.88C1.05 3.90667 1.62333 3.06 2.35 2.34C3.07667 1.62 3.92667 1.05 4.9 0.63C5.87333 0.21 6.90667 0 8 0C9.10667 0 10.1467 0.21 11.12 0.63C12.0933 1.05 12.94 1.62 13.66 2.34C14.38 3.06 14.95 3.90667 15.37 4.88C15.79 5.85333 16 6.89333 16 8C16 9.09333 15.79 10.1267 15.37 11.1C14.95 12.0733 14.38 12.9233 13.66 13.65C12.94 14.3767 12.0933 14.95 11.12 15.37C10.1467 15.79 9.10667 16 8 16ZM8 14.8C9.89333 14.8 11.5 14.1367 12.82 12.81C14.14 11.4833 14.8 9.88 14.8 8C14.8 6.10667 14.14 4.5 12.82 3.18C11.5 1.86 9.89333 1.2 8 1.2C6.12 1.2 4.51667 1.86 3.19 3.18C1.86333 4.5 1.2 6.10667 1.2 8C1.2 9.88 1.86333 11.4833 3.19 12.81C4.51667 14.1367 6.12 14.8 8 14.8Z"
|
||||
fill={color}
|
||||
|
||||
@ -19,7 +19,7 @@ export const StateGroupStartedIcon: React.FC<Props> = ({
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
>
|
||||
<circle cx="6" cy="6" r="5.6" stroke={color} stroke-width="0.8" />
|
||||
<circle cx="6" cy="6" r="3.35" stroke={color} stroke-width="0.8" stroke-dasharray="2.4 2.4" />
|
||||
<circle cx="6" cy="6" r="5.6" stroke={color} strokeWidth="0.8" />
|
||||
<circle cx="6" cy="6" r="3.35" stroke={color} strokeWidth="0.8" strokeDasharray="2.4 2.4" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -19,6 +19,6 @@ export const StateGroupUnstartedIcon: React.FC<Props> = ({
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<circle cx="8" cy="8" r="7.4" stroke={color} stroke-width="1.2" />
|
||||
<circle cx="8" cy="8" r="7.4" stroke={color} strokeWidth="1.2" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
@ -1,90 +1,65 @@
|
||||
import React from "react";
|
||||
// lucide icons
|
||||
import {
|
||||
AlertCircleIcon,
|
||||
SignalHighIcon,
|
||||
SignalMediumIcon,
|
||||
SignalLowIcon,
|
||||
BanIcon,
|
||||
CheckIcon,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
||||
// components
|
||||
import { FilterHeader } from "./filter-header";
|
||||
import { FilterCard } from "./filter-card";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { RootStore } from "store/root";
|
||||
|
||||
export const MemberIcons = ({
|
||||
display_name,
|
||||
avatar,
|
||||
}: {
|
||||
display_name: string;
|
||||
avatar: string | null;
|
||||
}) => (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center bg-custom-background-80">
|
||||
{avatar ? (
|
||||
<img src={avatar} alt={display_name || ""} className="" />
|
||||
) : (
|
||||
<div className="text-[12px] w-full h-full flex justify-center items-center capitalize font-medium bg-gray-700 text-white">
|
||||
{(display_name ?? "U")[0]}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const FilterAssignees = observer(() => {
|
||||
const store: RootStore = useMobxStore();
|
||||
const { issueFilters: issueFilterStore, issueView: issueStore } = store;
|
||||
|
||||
const [allFiltersToggle, setAllFiltersToggle] = React.useState(false);
|
||||
|
||||
const PriorityIcons = ({ priority }: { priority: string }) => {
|
||||
if (priority === "urgent")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-red-500 bg-red-500 text-white flex justify-center items-center">
|
||||
<AlertCircleIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "high")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-red-500 flex justify-center items-center pl-1">
|
||||
<SignalHighIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "medium")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-orange-500 flex justify-center items-center pl-1">
|
||||
<SignalMediumIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "low")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-green-500 flex justify-center items-center pl-1">
|
||||
<SignalLowIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-gray-500 flex justify-center items-center">
|
||||
<BanIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const [previewEnabled, setPreviewEnabled] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2 p-[6px] pb-2">
|
||||
<div className="text-gray-500 text-sm text-custom-text-300 font-medium">Assignees</div>
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-border-100 cursor-pointer"
|
||||
onClick={() => setAllFiltersToggle(!allFiltersToggle)}
|
||||
>
|
||||
{allFiltersToggle ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
<FilterHeader
|
||||
title={"Assignees"}
|
||||
isPreviewEnabled={previewEnabled}
|
||||
handleIsPreviewEnabled={setPreviewEnabled}
|
||||
/>
|
||||
{previewEnabled && (
|
||||
<div className="space-y-[2px] pt-1">
|
||||
{issueFilterStore?.projectMembers &&
|
||||
issueFilterStore?.projectMembers.length > 0 &&
|
||||
issueFilterStore?.projectMembers.map((_member) => (
|
||||
<FilterCard
|
||||
key={`assignees-${_member?.member?.id}`}
|
||||
isChecked={false}
|
||||
icon={
|
||||
<MemberIcons
|
||||
display_name={_member?.member.display_name}
|
||||
avatar={_member?.member.avatar}
|
||||
/>
|
||||
}
|
||||
title={`${_member?.member?.display_name} (${_member?.member?.first_name} ${_member?.member?.last_name})`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[2px]">
|
||||
{issueFilterStore?.issueRenderFilters?.priority &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.length > 0 &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.map((priority) => (
|
||||
<div
|
||||
key={priority?.key}
|
||||
className={`flex items-center gap-2 cursor-pointer rounded-sm p-[6px] py-[5px] transition-all ${
|
||||
false ? `bg-custom-border-100` : `hover:bg-custom-border-100`
|
||||
}`}
|
||||
>
|
||||
<PriorityIcons priority={priority.key} />
|
||||
<div className="hyphens-auto line-clamp-2 text-custom-text-200 text-sm w-full">
|
||||
{priority.title}
|
||||
</div>
|
||||
<div className="ml-auto flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm text-custom-text-200">
|
||||
<CheckIcon size={14} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,15 +1,10 @@
|
||||
import React from "react";
|
||||
// lucide icons
|
||||
import {
|
||||
AlertCircleIcon,
|
||||
SignalHighIcon,
|
||||
SignalMediumIcon,
|
||||
SignalLowIcon,
|
||||
BanIcon,
|
||||
CheckIcon,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
||||
// components
|
||||
import { MemberIcons } from "./assignees";
|
||||
import { FilterHeader } from "./filter-header";
|
||||
import { FilterCard } from "./filter-card";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
@ -20,71 +15,34 @@ export const FilterCreatedBy = observer(() => {
|
||||
const store: RootStore = useMobxStore();
|
||||
const { issueFilters: issueFilterStore, issueView: issueStore } = store;
|
||||
|
||||
const [allFiltersToggle, setAllFiltersToggle] = React.useState(false);
|
||||
|
||||
const PriorityIcons = ({ priority }: { priority: string }) => {
|
||||
if (priority === "urgent")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-red-500 bg-red-500 text-white flex justify-center items-center">
|
||||
<AlertCircleIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "high")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-red-500 flex justify-center items-center pl-1">
|
||||
<SignalHighIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "medium")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-orange-500 flex justify-center items-center pl-1">
|
||||
<SignalMediumIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "low")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-green-500 flex justify-center items-center pl-1">
|
||||
<SignalLowIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-gray-500 flex justify-center items-center">
|
||||
<BanIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const [previewEnabled, setPreviewEnabled] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2 p-[6px] pb-2">
|
||||
<div className="text-gray-500 text-sm text-custom-text-300 font-medium">Created By</div>
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-border-100 cursor-pointer"
|
||||
onClick={() => setAllFiltersToggle(!allFiltersToggle)}
|
||||
>
|
||||
{allFiltersToggle ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
<FilterHeader
|
||||
title={"Created By"}
|
||||
isPreviewEnabled={previewEnabled}
|
||||
handleIsPreviewEnabled={setPreviewEnabled}
|
||||
/>
|
||||
{previewEnabled && (
|
||||
<div className="space-y-[2px] pt-1">
|
||||
{issueFilterStore?.projectMembers &&
|
||||
issueFilterStore?.projectMembers.length > 0 &&
|
||||
issueFilterStore?.projectMembers.map((_member) => (
|
||||
<FilterCard
|
||||
key={`create-by-${_member?.member?.id}`}
|
||||
isChecked={false}
|
||||
icon={
|
||||
<MemberIcons
|
||||
display_name={_member?.member.display_name}
|
||||
avatar={_member?.member.avatar}
|
||||
/>
|
||||
}
|
||||
title={`${_member?.member?.display_name} (${_member?.member?.first_name} ${_member?.member?.last_name})`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[2px]">
|
||||
{issueFilterStore?.issueRenderFilters?.priority &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.length > 0 &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.map((priority) => (
|
||||
<div
|
||||
key={priority?.key}
|
||||
className={`flex items-center gap-2 cursor-pointer rounded-sm p-[6px] py-[5px] transition-all ${
|
||||
false ? `bg-custom-border-100` : `hover:bg-custom-border-100`
|
||||
}`}
|
||||
>
|
||||
<PriorityIcons priority={priority.key} />
|
||||
<div className="hyphens-auto line-clamp-2 text-custom-text-200 text-sm w-full">
|
||||
{priority.title}
|
||||
</div>
|
||||
<div className="ml-auto flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm text-custom-text-200">
|
||||
<CheckIcon size={14} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
23
web/components/issue-layouts/header/filters/filter-card.tsx
Normal file
23
web/components/issue-layouts/header/filters/filter-card.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import React from "react";
|
||||
// lucide icons
|
||||
import { Check } from "lucide-react";
|
||||
|
||||
interface IFilterCard {
|
||||
isChecked: boolean;
|
||||
icon?: React.ReactNode;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export const FilterCard = ({ isChecked, icon, title }: IFilterCard) => (
|
||||
<div className="flex items-center gap-3 cursor-pointer rounded-sm p-[6px] py-[5px] transition-all hover:bg-custom-border-100">
|
||||
<div
|
||||
className={`flex-shrink-0 w-[14px] h-[14px] flex justify-center items-center rounded-sm border border-custom-border-300 bg-custom-background-90 ${
|
||||
isChecked ? `bg-custom-primary-300 text-white` : ``
|
||||
}`}
|
||||
>
|
||||
{isChecked && <Check size={10} strokeWidth={2} />}
|
||||
</div>
|
||||
{icon}
|
||||
<div className="hyphens-auto line-clamp-2 text-custom-text-200 text-sm w-full">{title}</div>
|
||||
</div>
|
||||
);
|
||||
@ -0,0 +1,25 @@
|
||||
import React from "react";
|
||||
// lucide icons
|
||||
import { ChevronDown, ChevronUp } from "lucide-react";
|
||||
|
||||
interface IFilterHeader {
|
||||
title: string;
|
||||
isPreviewEnabled: boolean;
|
||||
handleIsPreviewEnabled: (isPreviewEnabled: boolean) => void;
|
||||
}
|
||||
|
||||
export const FilterHeader = ({
|
||||
title,
|
||||
isPreviewEnabled,
|
||||
handleIsPreviewEnabled,
|
||||
}: IFilterHeader) => (
|
||||
<div className="flex items-center justify-between gap-2 p-[6px] pb-2 bg-custom-background-80 sticky top-0">
|
||||
<div className="text-gray-500 text-sm text-custom-text-300 font-medium">{title}</div>
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-border-100 cursor-pointer"
|
||||
onClick={() => handleIsPreviewEnabled(!isPreviewEnabled)}
|
||||
>
|
||||
{isPreviewEnabled ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -1,90 +1,48 @@
|
||||
import React from "react";
|
||||
// lucide icons
|
||||
import {
|
||||
AlertCircleIcon,
|
||||
SignalHighIcon,
|
||||
SignalMediumIcon,
|
||||
SignalLowIcon,
|
||||
BanIcon,
|
||||
CheckIcon,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
||||
// components
|
||||
import { FilterHeader } from "./filter-header";
|
||||
import { FilterCard } from "./filter-card";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { RootStore } from "store/root";
|
||||
|
||||
const LabelIcons = ({ color }: { color: string }) => (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
|
||||
<div className={`w-[12px] h-[12px] rounded-full`} style={{ backgroundColor: color }} />
|
||||
</div>
|
||||
);
|
||||
|
||||
export const FilterLabels = observer(() => {
|
||||
const store: RootStore = useMobxStore();
|
||||
const { issueFilters: issueFilterStore, issueView: issueStore } = store;
|
||||
|
||||
const [allFiltersToggle, setAllFiltersToggle] = React.useState(false);
|
||||
|
||||
const PriorityIcons = ({ priority }: { priority: string }) => {
|
||||
if (priority === "urgent")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-red-500 bg-red-500 text-white flex justify-center items-center">
|
||||
<AlertCircleIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "high")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-red-500 flex justify-center items-center pl-1">
|
||||
<SignalHighIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "medium")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-orange-500 flex justify-center items-center pl-1">
|
||||
<SignalMediumIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "low")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-green-500 flex justify-center items-center pl-1">
|
||||
<SignalLowIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-gray-500 flex justify-center items-center">
|
||||
<BanIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const [previewEnabled, setPreviewEnabled] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2 p-[6px] pb-2">
|
||||
<div className="text-gray-500 text-sm text-custom-text-300 font-medium">Labels</div>
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-border-100 cursor-pointer"
|
||||
onClick={() => setAllFiltersToggle(!allFiltersToggle)}
|
||||
>
|
||||
{allFiltersToggle ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
<FilterHeader
|
||||
title={"labels"}
|
||||
isPreviewEnabled={previewEnabled}
|
||||
handleIsPreviewEnabled={setPreviewEnabled}
|
||||
/>
|
||||
{previewEnabled && (
|
||||
<div className="space-y-[2px] pt-1">
|
||||
{issueFilterStore?.projectLabels &&
|
||||
issueFilterStore?.projectLabels.length > 0 &&
|
||||
issueFilterStore?.projectLabels.map((_label) => (
|
||||
<FilterCard
|
||||
key={_label?.key}
|
||||
isChecked={false}
|
||||
icon={<LabelIcons color={_label.color} />}
|
||||
title={_label.name}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[2px]">
|
||||
{issueFilterStore?.issueRenderFilters?.priority &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.length > 0 &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.map((priority) => (
|
||||
<div
|
||||
key={priority?.key}
|
||||
className={`flex items-center gap-2 cursor-pointer rounded-sm p-[6px] py-[5px] transition-all ${
|
||||
false ? `bg-custom-border-100` : `hover:bg-custom-border-100`
|
||||
}`}
|
||||
>
|
||||
<PriorityIcons priority={priority.key} />
|
||||
<div className="hyphens-auto line-clamp-2 text-custom-text-200 text-sm w-full">
|
||||
{priority.title}
|
||||
</div>
|
||||
<div className="ml-auto flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm text-custom-text-200">
|
||||
<CheckIcon size={14} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,49 +1,51 @@
|
||||
import React from "react";
|
||||
// lucide icons
|
||||
import {
|
||||
AlertCircle,
|
||||
SignalHigh,
|
||||
SignalMedium,
|
||||
SignalLow,
|
||||
Ban,
|
||||
Check,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
import { AlertCircle, SignalHigh, SignalMedium, SignalLow, Ban, Check } from "lucide-react";
|
||||
// components
|
||||
import { FilterHeader } from "./filter-header";
|
||||
import { FilterCard } from "./filter-card";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { RootStore } from "store/root";
|
||||
|
||||
const PriorityIcons = ({ priority }: { priority: string }) => {
|
||||
const PriorityIcons = ({
|
||||
priority,
|
||||
size = 14,
|
||||
strokeWidth = 2,
|
||||
}: {
|
||||
priority: string;
|
||||
size?: number;
|
||||
strokeWidth?: number;
|
||||
}) => {
|
||||
if (priority === "urgent")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-red-500 bg-red-500 text-white flex justify-center items-center">
|
||||
<AlertCircle size={14} strokeWidth={2} />
|
||||
<AlertCircle size={size} strokeWidth={strokeWidth} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "high")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-red-500 flex justify-center items-center pl-1">
|
||||
<SignalHigh size={14} strokeWidth={2} />
|
||||
<SignalHigh size={size} strokeWidth={strokeWidth} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "medium")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-orange-500 flex justify-center items-center pl-1">
|
||||
<SignalMedium size={14} strokeWidth={2} />
|
||||
<SignalMedium size={size} strokeWidth={strokeWidth} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "low")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-green-500 flex justify-center items-center pl-1">
|
||||
<SignalLow size={14} strokeWidth={2} />
|
||||
<SignalLow size={size} strokeWidth={strokeWidth} />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-gray-500 flex justify-center items-center">
|
||||
<Ban size={14} strokeWidth={2} />
|
||||
<Ban size={size} strokeWidth={strokeWidth} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -52,39 +54,29 @@ export const FilterPriority = observer(() => {
|
||||
const store: RootStore = useMobxStore();
|
||||
const { issueFilters: issueFilterStore, issueView: issueStore } = store;
|
||||
|
||||
const [allFiltersToggle, setAllFiltersToggle] = React.useState(false);
|
||||
const [previewEnabled, setPreviewEnabled] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2 p-[6px] pb-2">
|
||||
<div className="text-gray-500 text-sm text-custom-text-300 font-medium">Priority</div>
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-border-100 cursor-pointer"
|
||||
onClick={() => setAllFiltersToggle(!allFiltersToggle)}
|
||||
>
|
||||
{allFiltersToggle ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
<FilterHeader
|
||||
title={"Priority"}
|
||||
isPreviewEnabled={previewEnabled}
|
||||
handleIsPreviewEnabled={setPreviewEnabled}
|
||||
/>
|
||||
{previewEnabled && (
|
||||
<div className="space-y-[2px] pt-1">
|
||||
{issueFilterStore?.issueRenderFilters?.priority &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.length > 0 &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.map((_priority) => (
|
||||
<FilterCard
|
||||
key={_priority?.key}
|
||||
isChecked={false}
|
||||
icon={<PriorityIcons priority={_priority.key} />}
|
||||
title={_priority.title}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[2px]">
|
||||
{issueFilterStore?.issueRenderFilters?.priority &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.length > 0 &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.map((_priority) => (
|
||||
<div
|
||||
key={_priority?.key}
|
||||
className={`flex items-center gap-2 cursor-pointer rounded-sm p-[6px] py-[5px] transition-all ${
|
||||
false ? `bg-custom-border-100` : `hover:bg-custom-border-100`
|
||||
}`}
|
||||
>
|
||||
<PriorityIcons priority={_priority.key} />
|
||||
<div className="hyphens-auto line-clamp-2 text-custom-text-200 text-sm w-full">
|
||||
{_priority.title}
|
||||
</div>
|
||||
<div className="ml-auto flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm text-custom-text-200">
|
||||
{false && <Check size={14} />}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,15 +1,9 @@
|
||||
import React from "react";
|
||||
// lucide icons
|
||||
import {
|
||||
AlertCircleIcon,
|
||||
SignalHighIcon,
|
||||
SignalMediumIcon,
|
||||
SignalLowIcon,
|
||||
BanIcon,
|
||||
CheckIcon,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
||||
// components
|
||||
import { FilterHeader } from "./filter-header";
|
||||
import { FilterCard } from "./filter-card";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
@ -20,71 +14,24 @@ export const FilterStartDate = observer(() => {
|
||||
const store: RootStore = useMobxStore();
|
||||
const { issueFilters: issueFilterStore, issueView: issueStore } = store;
|
||||
|
||||
const [allFiltersToggle, setAllFiltersToggle] = React.useState(false);
|
||||
|
||||
const PriorityIcons = ({ priority }: { priority: string }) => {
|
||||
if (priority === "urgent")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-red-500 bg-red-500 text-white flex justify-center items-center">
|
||||
<AlertCircleIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "high")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-red-500 flex justify-center items-center pl-1">
|
||||
<SignalHighIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "medium")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-orange-500 flex justify-center items-center pl-1">
|
||||
<SignalMediumIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "low")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-green-500 flex justify-center items-center pl-1">
|
||||
<SignalLowIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-gray-500 flex justify-center items-center">
|
||||
<BanIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const [previewEnabled, setPreviewEnabled] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2 p-[6px] pb-2">
|
||||
<div className="text-gray-500 text-sm text-custom-text-300 font-medium">Start Date</div>
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-border-100 cursor-pointer"
|
||||
onClick={() => setAllFiltersToggle(!allFiltersToggle)}
|
||||
>
|
||||
{allFiltersToggle ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
<FilterHeader
|
||||
title={"Start Date"}
|
||||
isPreviewEnabled={previewEnabled}
|
||||
handleIsPreviewEnabled={setPreviewEnabled}
|
||||
/>
|
||||
{previewEnabled && (
|
||||
<div className="space-y-[2px] pt-1">
|
||||
{issueFilterStore?.issueRenderFilters?.start_date &&
|
||||
issueFilterStore?.issueRenderFilters?.start_date.length > 0 &&
|
||||
issueFilterStore?.issueRenderFilters?.start_date.map((_startDate) => (
|
||||
<FilterCard key={_startDate?.key} isChecked={false} title={_startDate.title} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[2px]">
|
||||
{issueFilterStore?.issueRenderFilters?.priority &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.length > 0 &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.map((priority) => (
|
||||
<div
|
||||
key={priority?.key}
|
||||
className={`flex items-center gap-2 cursor-pointer rounded-sm p-[6px] py-[5px] transition-all ${
|
||||
false ? `bg-custom-border-100` : `hover:bg-custom-border-100`
|
||||
}`}
|
||||
>
|
||||
<PriorityIcons priority={priority.key} />
|
||||
<div className="hyphens-auto line-clamp-2 text-custom-text-200 text-sm w-full">
|
||||
{priority.title}
|
||||
</div>
|
||||
<div className="ml-auto flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm text-custom-text-200">
|
||||
<CheckIcon size={14} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,90 +1,115 @@
|
||||
import React from "react";
|
||||
// lucide icons
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
||||
import {
|
||||
AlertCircleIcon,
|
||||
SignalHighIcon,
|
||||
SignalMediumIcon,
|
||||
SignalLowIcon,
|
||||
BanIcon,
|
||||
CheckIcon,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
StateGroupBacklogIcon,
|
||||
StateGroupCancelledIcon,
|
||||
StateGroupCompletedIcon,
|
||||
StateGroupStartedIcon,
|
||||
StateGroupUnstartedIcon,
|
||||
} from "components/icons";
|
||||
// components
|
||||
import { FilterHeader } from "./filter-header";
|
||||
import { FilterCard } from "./filter-card";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { RootStore } from "store/root";
|
||||
// constants
|
||||
import { STATE_GROUP_COLORS } from "constants/state";
|
||||
|
||||
export const StateGroupIcons = ({ stateGroup }: { stateGroup: string }) => {
|
||||
export const StateGroupIcons = ({
|
||||
stateGroup,
|
||||
width = "14px",
|
||||
height = "14px",
|
||||
color = null,
|
||||
}: {
|
||||
stateGroup: string;
|
||||
width?: string | undefined;
|
||||
height?: string | undefined;
|
||||
color?: string | null;
|
||||
}) => {
|
||||
if (stateGroup === "cancelled")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-red-500 bg-red-500 text-white flex justify-center items-center">
|
||||
<AlertCircleIcon size={14} strokeWidth={2} />
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
|
||||
<StateGroupCancelledIcon
|
||||
width={width}
|
||||
height={height}
|
||||
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
if (stateGroup === "completed")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-red-500 flex justify-center items-center pl-1">
|
||||
<SignalHighIcon size={14} strokeWidth={2} />
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
|
||||
<StateGroupCompletedIcon
|
||||
width={width}
|
||||
height={height}
|
||||
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
if (stateGroup === "started")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-orange-500 flex justify-center items-center pl-1">
|
||||
<SignalMediumIcon size={14} strokeWidth={2} />
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
|
||||
<StateGroupStartedIcon
|
||||
width={width}
|
||||
height={height}
|
||||
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
if (stateGroup === "unstarted")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-green-500 flex justify-center items-center pl-1">
|
||||
<SignalLowIcon size={14} strokeWidth={2} />
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
|
||||
<StateGroupUnstartedIcon
|
||||
width={width}
|
||||
height={height}
|
||||
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-gray-500 flex justify-center items-center">
|
||||
<BanIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (stateGroup === "backlog")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] flex justify-center items-center">
|
||||
<StateGroupBacklogIcon
|
||||
width={width}
|
||||
height={height}
|
||||
color={color ? color : STATE_GROUP_COLORS[stateGroup]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
return <></>;
|
||||
};
|
||||
|
||||
export const FilterStateGroup = observer(() => {
|
||||
const store: RootStore = useMobxStore();
|
||||
const { issueFilters: issueFilterStore, issueView: issueStore } = store;
|
||||
|
||||
const [allFiltersToggle, setAllFiltersToggle] = React.useState(false);
|
||||
const [previewEnabled, setPreviewEnabled] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2 p-[6px] pb-2">
|
||||
<div className="text-gray-500 text-sm text-custom-text-300 font-medium">State Group</div>
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-border-100 cursor-pointer"
|
||||
onClick={() => setAllFiltersToggle(!allFiltersToggle)}
|
||||
>
|
||||
{allFiltersToggle ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
<FilterHeader
|
||||
title={"State Group"}
|
||||
isPreviewEnabled={previewEnabled}
|
||||
handleIsPreviewEnabled={setPreviewEnabled}
|
||||
/>
|
||||
{previewEnabled && (
|
||||
<div className="space-y-[2px] pt-1">
|
||||
{issueFilterStore?.issueRenderFilters?.state_group &&
|
||||
issueFilterStore?.issueRenderFilters?.state_group.length > 0 &&
|
||||
issueFilterStore?.issueRenderFilters?.state_group.map((_stateGroup) => (
|
||||
<FilterCard
|
||||
key={_stateGroup?.key}
|
||||
isChecked={false}
|
||||
icon={<StateGroupIcons stateGroup={_stateGroup.key} />}
|
||||
title={_stateGroup.title}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[2px]">
|
||||
{issueFilterStore?.issueRenderFilters?.state_group &&
|
||||
issueFilterStore?.issueRenderFilters?.state_group.length > 0 &&
|
||||
issueFilterStore?.issueRenderFilters?.state_group.map((_stateGroup) => (
|
||||
<div
|
||||
key={_stateGroup?.key}
|
||||
className={`flex items-center gap-2 cursor-pointer rounded-sm p-[6px] py-[5px] transition-all ${
|
||||
false ? `bg-custom-border-100` : `hover:bg-custom-border-100`
|
||||
}`}
|
||||
>
|
||||
<StateGroupIcons stateGroup={_stateGroup.key} />
|
||||
<div className="hyphens-auto line-clamp-2 text-custom-text-200 text-sm w-full">
|
||||
{_stateGroup.title}
|
||||
</div>
|
||||
<div className="ml-auto flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm text-custom-text-200">
|
||||
<CheckIcon size={14} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,51 +1,49 @@
|
||||
import React from "react";
|
||||
// lucide icons
|
||||
import { CheckIcon, ChevronDown, ChevronUp } from "lucide-react";
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
||||
// components
|
||||
import { StateGroupIcons } from "./state-group";
|
||||
import { FilterHeader } from "./filter-header";
|
||||
import { FilterCard } from "./filter-card";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
import { useMobxStore } from "lib/mobx/store-provider";
|
||||
import { RootStore } from "store/root";
|
||||
// store default data
|
||||
import { issueStateGroupKeys } from "store/issue-views/issue_data";
|
||||
|
||||
export const FilterState = observer(() => {
|
||||
const store: RootStore = useMobxStore();
|
||||
const { issueFilters: issueFilterStore, issueView: issueStore } = store;
|
||||
|
||||
const [allFiltersToggle, setAllFiltersToggle] = React.useState(false);
|
||||
const [previewEnabled, setPreviewEnabled] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2 p-[6px] pb-2">
|
||||
<div className="text-gray-500 text-sm text-custom-text-300 font-medium">State</div>
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-border-100 cursor-pointer"
|
||||
onClick={() => setAllFiltersToggle(!allFiltersToggle)}
|
||||
>
|
||||
{allFiltersToggle ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
<FilterHeader
|
||||
title={"State"}
|
||||
isPreviewEnabled={previewEnabled}
|
||||
handleIsPreviewEnabled={setPreviewEnabled}
|
||||
/>
|
||||
{previewEnabled && (
|
||||
<div className="space-y-[2px] pt-1">
|
||||
{issueStateGroupKeys.map(
|
||||
(_stateGroup) =>
|
||||
issueFilterStore?.projectStates &&
|
||||
issueFilterStore?.projectStates[_stateGroup] &&
|
||||
issueFilterStore?.projectStates[_stateGroup].length > 0 &&
|
||||
issueFilterStore?.projectStates[_stateGroup].map((_state: any) => (
|
||||
<FilterCard
|
||||
key={_state?.id}
|
||||
isChecked={false}
|
||||
icon={<StateGroupIcons stateGroup={_stateGroup} color={_state?.color} />}
|
||||
title={_state?.name}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[2px]">
|
||||
{issueFilterStore?.projectStates &&
|
||||
issueFilterStore?.projectStates.length > 0 &&
|
||||
issueFilterStore?.projectStates.map((_state) => (
|
||||
<div
|
||||
key={_state?.key}
|
||||
className={`flex items-center gap-2 cursor-pointer rounded-sm p-[6px] py-[5px] transition-all ${
|
||||
false ? `bg-custom-border-100` : `hover:bg-custom-border-100`
|
||||
}`}
|
||||
>
|
||||
<StateGroupIcons stateGroup={_state.group} />
|
||||
<div className="hyphens-auto line-clamp-2 text-custom-text-200 text-sm w-full">
|
||||
{_state?.name}
|
||||
</div>
|
||||
<div className="ml-auto flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm text-custom-text-200">
|
||||
<CheckIcon size={14} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -1,15 +1,9 @@
|
||||
import React from "react";
|
||||
// lucide icons
|
||||
import {
|
||||
AlertCircleIcon,
|
||||
SignalHighIcon,
|
||||
SignalMediumIcon,
|
||||
SignalLowIcon,
|
||||
BanIcon,
|
||||
CheckIcon,
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
} from "lucide-react";
|
||||
import { Check, ChevronDown, ChevronUp } from "lucide-react";
|
||||
// components
|
||||
import { FilterHeader } from "./filter-header";
|
||||
import { FilterCard } from "./filter-card";
|
||||
// mobx react lite
|
||||
import { observer } from "mobx-react-lite";
|
||||
// mobx store
|
||||
@ -20,71 +14,24 @@ export const FilterTargetDate = observer(() => {
|
||||
const store: RootStore = useMobxStore();
|
||||
const { issueFilters: issueFilterStore, issueView: issueStore } = store;
|
||||
|
||||
const [allFiltersToggle, setAllFiltersToggle] = React.useState(false);
|
||||
|
||||
const PriorityIcons = ({ priority }: { priority: string }) => {
|
||||
if (priority === "urgent")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-red-500 bg-red-500 text-white flex justify-center items-center">
|
||||
<AlertCircleIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "high")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-red-500 flex justify-center items-center pl-1">
|
||||
<SignalHighIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "medium")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-orange-500 flex justify-center items-center pl-1">
|
||||
<SignalMediumIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
if (priority === "low")
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-green-500 flex justify-center items-center pl-1">
|
||||
<SignalLowIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="flex-shrink-0 rounded-sm overflow-hidden w-[20px] h-[20px] border border-custom-border-300 text-gray-500 flex justify-center items-center">
|
||||
<BanIcon size={14} strokeWidth={2} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const [previewEnabled, setPreviewEnabled] = React.useState(false);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between gap-2 p-[6px] pb-2">
|
||||
<div className="text-gray-500 text-sm text-custom-text-300 font-medium">Target Date</div>
|
||||
<div
|
||||
className="flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm transition-all hover:bg-custom-border-100 cursor-pointer"
|
||||
onClick={() => setAllFiltersToggle(!allFiltersToggle)}
|
||||
>
|
||||
{allFiltersToggle ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
||||
<FilterHeader
|
||||
title={"Target Date"}
|
||||
isPreviewEnabled={previewEnabled}
|
||||
handleIsPreviewEnabled={setPreviewEnabled}
|
||||
/>
|
||||
{previewEnabled && (
|
||||
<div className="space-y-[2px] pt-1">
|
||||
{issueFilterStore?.issueRenderFilters?.due_date &&
|
||||
issueFilterStore?.issueRenderFilters?.due_date.length > 0 &&
|
||||
issueFilterStore?.issueRenderFilters?.due_date.map((_targetDate) => (
|
||||
<FilterCard key={_targetDate?.key} isChecked={false} title={_targetDate.title} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-[2px]">
|
||||
{issueFilterStore?.issueRenderFilters?.priority &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.length > 0 &&
|
||||
issueFilterStore?.issueRenderFilters?.priority.map((priority) => (
|
||||
<div
|
||||
key={priority?.key}
|
||||
className={`flex items-center gap-2 cursor-pointer rounded-sm p-[6px] py-[5px] transition-all ${
|
||||
false ? `bg-custom-border-100` : `hover:bg-custom-border-100`
|
||||
}`}
|
||||
>
|
||||
<PriorityIcons priority={priority.key} />
|
||||
<div className="hyphens-auto line-clamp-2 text-custom-text-200 text-sm w-full">
|
||||
{priority.title}
|
||||
</div>
|
||||
<div className="ml-auto flex-shrink-0 w-[20px] h-[20px] flex justify-center items-center rounded-sm text-custom-text-200">
|
||||
<CheckIcon size={14} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@ -2,25 +2,25 @@
|
||||
<mask id="path-1-inside-1_6456_90192" fill="white">
|
||||
<path d="M34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 7.61116 7.61116 0 17 0C26.3888 0 34 7.61116 34 17ZM5.09529 17C5.09529 23.5748 10.4252 28.9047 17 28.9047C23.5748 28.9047 28.9047 23.5748 28.9047 17C28.9047 10.4252 23.5748 5.09529 17 5.09529C10.4252 5.09529 5.09529 10.4252 5.09529 17Z"/>
|
||||
</mask>
|
||||
<path d="M34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 7.61116 7.61116 0 17 0C26.3888 0 34 7.61116 34 17ZM5.09529 17C5.09529 23.5748 10.4252 28.9047 17 28.9047C23.5748 28.9047 28.9047 23.5748 28.9047 17C28.9047 10.4252 23.5748 5.09529 17 5.09529C10.4252 5.09529 5.09529 10.4252 5.09529 17Z" fill="#DEE2E6" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-1-inside-1_6456_90192)"/>
|
||||
<path d="M34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 7.61116 7.61116 0 17 0C26.3888 0 34 7.61116 34 17ZM5.09529 17C5.09529 23.5748 10.4252 28.9047 17 28.9047C23.5748 28.9047 28.9047 23.5748 28.9047 17C28.9047 10.4252 23.5748 5.09529 17 5.09529C10.4252 5.09529 5.09529 10.4252 5.09529 17Z" fill="#DEE2E6" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-1-inside-1_6456_90192)"/>
|
||||
<mask id="path-2-inside-2_6456_90192" fill="white">
|
||||
<path d="M17 0C19.8546 3.40409e-08 22.6633 0.718838 25.1669 2.09021C27.6705 3.46158 29.7885 5.44133 31.3255 7.84684C32.8625 10.2524 33.769 13.0062 33.9613 15.8543C34.1537 18.7024 33.6258 21.5531 32.4263 24.1435C31.2268 26.7339 29.3943 28.9804 27.0978 30.6761C24.8013 32.3717 22.1149 33.4617 19.2862 33.8456C16.4575 34.2295 13.5777 33.8949 10.9124 32.8727C8.24708 31.8504 5.8821 30.1735 4.03558 27.9965L7.92131 24.7006C9.21439 26.2251 10.8705 27.3994 12.737 28.1153C14.6034 28.8311 16.6201 29.0654 18.601 28.7966C20.5818 28.5277 22.4631 27.7644 24.0713 26.577C25.6794 25.3896 26.9627 23.8164 27.8027 22.0024C28.6427 20.1885 29.0124 18.1922 28.8776 16.1977C28.7429 14.2032 28.1081 12.2748 27.0318 10.5903C25.9555 8.90572 24.4723 7.51935 22.7191 6.55901C20.9659 5.59867 18.999 5.09529 17 5.09529V0Z"/>
|
||||
</mask>
|
||||
<path d="M17 0C19.8546 3.40409e-08 22.6633 0.718838 25.1669 2.09021C27.6705 3.46158 29.7885 5.44133 31.3255 7.84684C32.8625 10.2524 33.769 13.0062 33.9613 15.8543C34.1537 18.7024 33.6258 21.5531 32.4263 24.1435C31.2268 26.7339 29.3943 28.9804 27.0978 30.6761C24.8013 32.3717 22.1149 33.4617 19.2862 33.8456C16.4575 34.2295 13.5777 33.8949 10.9124 32.8727C8.24708 31.8504 5.8821 30.1735 4.03558 27.9965L7.92131 24.7006C9.21439 26.2251 10.8705 27.3994 12.737 28.1153C14.6034 28.8311 16.6201 29.0654 18.601 28.7966C20.5818 28.5277 22.4631 27.7644 24.0713 26.577C25.6794 25.3896 26.9627 23.8164 27.8027 22.0024C28.6427 20.1885 29.0124 18.1922 28.8776 16.1977C28.7429 14.2032 28.1081 12.2748 27.0318 10.5903C25.9555 8.90572 24.4723 7.51935 22.7191 6.55901C20.9659 5.59867 18.999 5.09529 17 5.09529V0Z" fill="#ACB5BD" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-2-inside-2_6456_90192)"/>
|
||||
<path d="M17 0C19.8546 3.40409e-08 22.6633 0.718838 25.1669 2.09021C27.6705 3.46158 29.7885 5.44133 31.3255 7.84684C32.8625 10.2524 33.769 13.0062 33.9613 15.8543C34.1537 18.7024 33.6258 21.5531 32.4263 24.1435C31.2268 26.7339 29.3943 28.9804 27.0978 30.6761C24.8013 32.3717 22.1149 33.4617 19.2862 33.8456C16.4575 34.2295 13.5777 33.8949 10.9124 32.8727C8.24708 31.8504 5.8821 30.1735 4.03558 27.9965L7.92131 24.7006C9.21439 26.2251 10.8705 27.3994 12.737 28.1153C14.6034 28.8311 16.6201 29.0654 18.601 28.7966C20.5818 28.5277 22.4631 27.7644 24.0713 26.577C25.6794 25.3896 26.9627 23.8164 27.8027 22.0024C28.6427 20.1885 29.0124 18.1922 28.8776 16.1977C28.7429 14.2032 28.1081 12.2748 27.0318 10.5903C25.9555 8.90572 24.4723 7.51935 22.7191 6.55901C20.9659 5.59867 18.999 5.09529 17 5.09529V0Z" fill="#ACB5BD" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-2-inside-2_6456_90192)"/>
|
||||
<mask id="path-3-inside-3_6456_90192" fill="white">
|
||||
<path d="M17 0C21.3598 5.19899e-08 25.5529 1.67502 28.7128 4.67885C31.8726 7.68269 33.7577 11.7857 33.9782 16.1399C34.1988 20.4941 32.7381 24.7666 29.898 28.0744C27.0578 31.3822 23.0554 33.4724 18.718 33.913C14.3805 34.3536 10.0395 33.1109 6.5923 30.4417C3.14507 27.7726 0.855066 23.881 0.195603 19.5714C-0.46386 15.2618 0.557627 10.8635 3.04894 7.28569C5.54025 3.70783 9.31095 1.22387 13.5817 0.347219L14.6062 5.33844C11.6155 5.95234 8.975 7.69179 7.23039 10.1973C5.48578 12.7028 4.77045 15.7828 5.23226 18.8007C5.69407 21.8186 7.2977 24.5438 9.71173 26.4129C12.1257 28.2821 15.1656 29.1523 18.203 28.8438C21.2405 28.5352 24.0433 27.0715 26.0321 24.7552C28.021 22.4388 29.0439 19.4469 28.8895 16.3977C28.735 13.3486 27.415 10.4753 25.2022 8.37178C22.9894 6.26826 20.0531 5.09529 17 5.09529V0Z"/>
|
||||
</mask>
|
||||
<path d="M17 0C21.3598 5.19899e-08 25.5529 1.67502 28.7128 4.67885C31.8726 7.68269 33.7577 11.7857 33.9782 16.1399C34.1988 20.4941 32.7381 24.7666 29.898 28.0744C27.0578 31.3822 23.0554 33.4724 18.718 33.913C14.3805 34.3536 10.0395 33.1109 6.5923 30.4417C3.14507 27.7726 0.855066 23.881 0.195603 19.5714C-0.46386 15.2618 0.557627 10.8635 3.04894 7.28569C5.54025 3.70783 9.31095 1.22387 13.5817 0.347219L14.6062 5.33844C11.6155 5.95234 8.975 7.69179 7.23039 10.1973C5.48578 12.7028 4.77045 15.7828 5.23226 18.8007C5.69407 21.8186 7.2977 24.5438 9.71173 26.4129C12.1257 28.2821 15.1656 29.1523 18.203 28.8438C21.2405 28.5352 24.0433 27.0715 26.0321 24.7552C28.021 22.4388 29.0439 19.4469 28.8895 16.3977C28.735 13.3486 27.415 10.4753 25.2022 8.37178C22.9894 6.26826 20.0531 5.09529 17 5.09529V0Z" fill="#CED4DA" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-3-inside-3_6456_90192)"/>
|
||||
<path d="M17 0C21.3598 5.19899e-08 25.5529 1.67502 28.7128 4.67885C31.8726 7.68269 33.7577 11.7857 33.9782 16.1399C34.1988 20.4941 32.7381 24.7666 29.898 28.0744C27.0578 31.3822 23.0554 33.4724 18.718 33.913C14.3805 34.3536 10.0395 33.1109 6.5923 30.4417C3.14507 27.7726 0.855066 23.881 0.195603 19.5714C-0.46386 15.2618 0.557627 10.8635 3.04894 7.28569C5.54025 3.70783 9.31095 1.22387 13.5817 0.347219L14.6062 5.33844C11.6155 5.95234 8.975 7.69179 7.23039 10.1973C5.48578 12.7028 4.77045 15.7828 5.23226 18.8007C5.69407 21.8186 7.2977 24.5438 9.71173 26.4129C12.1257 28.2821 15.1656 29.1523 18.203 28.8438C21.2405 28.5352 24.0433 27.0715 26.0321 24.7552C28.021 22.4388 29.0439 19.4469 28.8895 16.3977C28.735 13.3486 27.415 10.4753 25.2022 8.37178C22.9894 6.26826 20.0531 5.09529 17 5.09529V0Z" fill="#CED4DA" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-3-inside-3_6456_90192)"/>
|
||||
<mask id="path-4-inside-4_6456_90192" fill="white">
|
||||
<path d="M17 0C21.5087 5.37655e-08 25.8327 1.79107 29.0208 4.97918C32.2089 8.1673 34 12.4913 34 17C34 21.5087 32.2089 25.8327 29.0208 29.0208C25.8327 32.2089 21.5087 34 17 34V28.9047C20.1573 28.9047 23.1853 27.6505 25.4179 25.4179C27.6505 23.1853 28.9047 20.1573 28.9047 17C28.9047 13.8427 27.6505 10.8147 25.4179 8.5821C23.1853 6.34953 20.1573 5.09529 17 5.09529V0Z"/>
|
||||
</mask>
|
||||
<path d="M17 0C21.5087 5.37655e-08 25.8327 1.79107 29.0208 4.97918C32.2089 8.1673 34 12.4913 34 17C34 21.5087 32.2089 25.8327 29.0208 29.0208C25.8327 32.2089 21.5087 34 17 34V28.9047C20.1573 28.9047 23.1853 27.6505 25.4179 25.4179C27.6505 23.1853 28.9047 20.1573 28.9047 17C28.9047 13.8427 27.6505 10.8147 25.4179 8.5821C23.1853 6.34953 20.1573 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-4-inside-4_6456_90192)"/>
|
||||
<path d="M17 0C21.5087 5.37655e-08 25.8327 1.79107 29.0208 4.97918C32.2089 8.1673 34 12.4913 34 17C34 21.5087 32.2089 25.8327 29.0208 29.0208C25.8327 32.2089 21.5087 34 17 34V28.9047C20.1573 28.9047 23.1853 27.6505 25.4179 25.4179C27.6505 23.1853 28.9047 20.1573 28.9047 17C28.9047 13.8427 27.6505 10.8147 25.4179 8.5821C23.1853 6.34953 20.1573 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-4-inside-4_6456_90192)"/>
|
||||
<mask id="path-5-inside-5_6456_90192" fill="white">
|
||||
<path d="M17 0C19.9437 3.51029e-08 22.8369 0.764364 25.3965 2.21827C27.956 3.67217 30.0942 5.76578 31.6017 8.29416C33.1091 10.8225 33.9342 13.699 33.9962 16.642C34.0582 19.5851 33.3549 22.4937 31.9553 25.0833L27.4728 22.6606C28.453 20.8471 28.9455 18.8103 28.9021 16.7493C28.8587 14.6884 28.2809 12.6741 27.2252 10.9035C26.1696 9.13293 24.6722 7.66682 22.8798 6.64869C21.0874 5.63055 19.0614 5.09529 17 5.09529V0Z"/>
|
||||
</mask>
|
||||
<path d="M17 0C19.9437 3.51029e-08 22.8369 0.764364 25.3965 2.21827C27.956 3.67217 30.0942 5.76578 31.6017 8.29416C33.1091 10.8225 33.9342 13.699 33.9962 16.642C34.0582 19.5851 33.3549 22.4937 31.9553 25.0833L27.4728 22.6606C28.453 20.8471 28.9455 18.8103 28.9021 16.7493C28.8587 14.6884 28.2809 12.6741 27.2252 10.9035C26.1696 9.13293 24.6722 7.66682 22.8798 6.64869C21.0874 5.63055 19.0614 5.09529 17 5.09529V0Z" fill="#DEE2E6" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-5-inside-5_6456_90192)"/>
|
||||
<path d="M17 0C19.9437 3.51029e-08 22.8369 0.764364 25.3965 2.21827C27.956 3.67217 30.0942 5.76578 31.6017 8.29416C33.1091 10.8225 33.9342 13.699 33.9962 16.642C34.0582 19.5851 33.3549 22.4937 31.9553 25.0833L27.4728 22.6606C28.453 20.8471 28.9455 18.8103 28.9021 16.7493C28.8587 14.6884 28.2809 12.6741 27.2252 10.9035C26.1696 9.13293 24.6722 7.66682 22.8798 6.64869C21.0874 5.63055 19.0614 5.09529 17 5.09529V0Z" fill="#DEE2E6" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-5-inside-5_6456_90192)"/>
|
||||
<mask id="path-6-inside-6_6456_90192" fill="white">
|
||||
<path d="M17 0C20.6461 4.34798e-08 24.1957 1.17228 27.1246 3.34381C30.0536 5.51533 32.2068 8.57102 33.2664 12.0598L28.391 13.5405C27.649 11.0974 26.1411 8.95755 24.0901 7.43688C22.039 5.91621 19.5533 5.09529 17 5.09529V0Z"/>
|
||||
</mask>
|
||||
<path d="M17 0C20.6461 4.34798e-08 24.1957 1.17228 27.1246 3.34381C30.0536 5.51533 32.2068 8.57102 33.2664 12.0598L28.391 13.5405C27.649 11.0974 26.1411 8.95755 24.0901 7.43688C22.039 5.91621 19.5533 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" stroke-width="0.482269" mask="url(#path-6-inside-6_6456_90192)"/>
|
||||
<path d="M17 0C20.6461 4.34798e-08 24.1957 1.17228 27.1246 3.34381C30.0536 5.51533 32.2068 8.57102 33.2664 12.0598L28.391 13.5405C27.649 11.0974 26.1411 8.95755 24.0901 7.43688C22.039 5.91621 19.5533 5.09529 17 5.09529V0Z" fill="#E9ECEF" stroke="#F8F9FA" strokeWidth="0.482269" mask="url(#path-6-inside-6_6456_90192)"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.7 KiB After Width: | Height: | Size: 6.7 KiB |
@ -2,7 +2,7 @@
|
||||
<g clip-path="url(#clip0_6990_114394)">
|
||||
<rect width="24" height="24" rx="12" fill="#FAFAFA"/>
|
||||
<path d="M13.4583 6.1665H8.49992C8.1905 6.1665 7.89375 6.28942 7.67496 6.50821C7.45617 6.72701 7.33325 7.02375 7.33325 7.33317V16.6665C7.33325 16.9759 7.45617 17.2727 7.67496 17.4915C7.89375 17.7103 8.1905 17.8332 8.49992 17.8332H15.4999C15.8093 17.8332 16.1061 17.7103 16.3249 17.4915C16.5437 17.2727 16.6666 16.9759 16.6666 16.6665V9.37484L13.4583 6.1665Z" stroke="#3F76FF" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.1665 6.1665V9.6665H16.6665M10.8332 11.9998C10.6785 11.9998 10.5301 12.0613 10.4207 12.1707C10.3113 12.2801 10.2498 12.4285 10.2498 12.5832V13.1665C10.2498 13.3212 10.1884 13.4696 10.079 13.579C9.96959 13.6884 9.82121 13.7498 9.6665 13.7498C9.82121 13.7498 9.96959 13.8113 10.079 13.9207C10.1884 14.0301 10.2498 14.1785 10.2498 14.3332V14.9165C10.2498 15.0712 10.3113 15.2196 10.4207 15.329C10.5301 15.4384 10.6785 15.4998 10.8332 15.4998M13.1665 15.4998C13.3212 15.4998 13.4696 15.4384 13.579 15.329C13.6884 15.2196 13.7498 15.0712 13.7498 14.9165V14.3332C13.7498 14.1785 13.8113 14.0301 13.9207 13.9207C14.0301 13.8113 14.1785 13.7498 14.3332 13.7498C14.1785 13.7498 14.0301 13.6884 13.9207 13.579C13.8113 13.4696 13.7498 13.3212 13.7498 13.1665V12.5832C13.7498 12.4285 13.6884 12.2801 13.579 12.1707C13.4696 12.0613 13.3212 11.9998 13.1665 11.9998" stroke="#3F76FF" stroke-width="0.75" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.1665 6.1665V9.6665H16.6665M10.8332 11.9998C10.6785 11.9998 10.5301 12.0613 10.4207 12.1707C10.3113 12.2801 10.2498 12.4285 10.2498 12.5832V13.1665C10.2498 13.3212 10.1884 13.4696 10.079 13.579C9.96959 13.6884 9.82121 13.7498 9.6665 13.7498C9.82121 13.7498 9.96959 13.8113 10.079 13.9207C10.1884 14.0301 10.2498 14.1785 10.2498 14.3332V14.9165C10.2498 15.0712 10.3113 15.2196 10.4207 15.329C10.5301 15.4384 10.6785 15.4998 10.8332 15.4998M13.1665 15.4998C13.3212 15.4998 13.4696 15.4384 13.579 15.329C13.6884 15.2196 13.7498 15.0712 13.7498 14.9165V14.3332C13.7498 14.1785 13.8113 14.0301 13.9207 13.9207C14.0301 13.8113 14.1785 13.7498 14.3332 13.7498C14.1785 13.7498 14.0301 13.6884 13.9207 13.579C13.8113 13.4696 13.7498 13.3212 13.7498 13.1665V12.5832C13.7498 12.4285 13.6884 12.2801 13.579 12.1707C13.4696 12.0613 13.3212 11.9998 13.1665 11.9998" stroke="#3F76FF" strokeWidth="0.75" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_6990_114394">
|
||||
|
||||
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
@ -1,3 +1,12 @@
|
||||
export type TStateGroup = "backlog" | "unstarted" | "started" | "completed" | "cancelled";
|
||||
export const issueStateGroupKeys: TStateGroup[] = [
|
||||
"backlog",
|
||||
"unstarted",
|
||||
"started",
|
||||
"completed",
|
||||
"cancelled",
|
||||
];
|
||||
|
||||
export const filtersPriority: { key: string; title: string }[] = [
|
||||
{ key: "urgent", title: "Urgent" },
|
||||
{ key: "high", title: "High" },
|
||||
@ -6,7 +15,7 @@ export const filtersPriority: { key: string; title: string }[] = [
|
||||
{ key: "null", title: "None" },
|
||||
];
|
||||
|
||||
export const filterStateGroup: { key: string; title: string }[] = [
|
||||
export const filterStateGroup: { key: TStateGroup; title: string }[] = [
|
||||
{ key: "backlog", title: "Backlog" },
|
||||
{ key: "unstarted", title: "Unstarted" },
|
||||
{ key: "started", title: "Started" },
|
||||
|
||||
@ -19,9 +19,7 @@ import {
|
||||
} from "./issue_data";
|
||||
|
||||
export type TIssueViews = "my_issues" | "issues" | "modules" | "views" | "cycles";
|
||||
|
||||
export type TIssueLayouts = "list" | "kanban" | "calendar" | "spreadsheet" | "gantt";
|
||||
|
||||
export interface IIssueFilter {
|
||||
priority: string[] | undefined;
|
||||
state: string[] | undefined;
|
||||
@ -78,7 +76,7 @@ export interface IIssueRenderFilters {
|
||||
labels: any[];
|
||||
project_properties: {
|
||||
[key: string]: {
|
||||
states: any[] | null;
|
||||
states: any | null;
|
||||
labels: any[] | null;
|
||||
members: any[] | null;
|
||||
};
|
||||
@ -622,11 +620,6 @@ class IssueFilterStore implements IIssueFilterStore {
|
||||
|
||||
const issuesStateResponse = await this.stateService.getStates(workspaceId, projectId);
|
||||
if (issuesStateResponse) {
|
||||
const _states: any[] = [];
|
||||
Object.keys(issuesStateResponse).map((state) => {
|
||||
_states.push(...issuesStateResponse[state]);
|
||||
});
|
||||
|
||||
const _issuesStateResponse = {
|
||||
...this.issueRenderFilters,
|
||||
workspace_properties: {
|
||||
@ -638,7 +631,7 @@ class IssueFilterStore implements IIssueFilterStore {
|
||||
[projectId]: {
|
||||
...this.issueRenderFilters?.workspace_properties?.[workspaceId]
|
||||
?.project_properties?.[projectId],
|
||||
states: _states,
|
||||
states: issuesStateResponse,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user