binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor project states to ake way for new features (#6156)

Browse source
This commit is contained in:
rahulramesha 2024-12-05 12:46:51 +05:30 • committed by GitHub
parent 3bccda0c86
commit 66652a5d71
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
38 changed files with 462 additions and 161 deletions
Download patch file Download diff file Expand all files Collapse all files

42
web/core/components/dropdowns/state.tsx
View file

@ -1,10 +1,10 @@
"use client";
import { Fragment, ReactNode, useEffect, useRef, useState } from "react";
import { ReactNode, useEffect, useRef, useState } from "react";
import { observer } from "mobx-react";
import { useParams } from "next/navigation";
import { usePopper } from "react-popper";
import { Check, ChevronDown, Search } from "lucide-react";
import { ChevronDown, Search } from "lucide-react";
import { Combobox } from "@headlessui/react";
// ui
import { ComboDropDown, Spinner, StateGroupIcon } from "@plane/ui";
@ -13,6 +13,8 @@ import { cn } from "@/helpers/common.helper";
// hooks
import { useProjectState } from "@/hooks/store";
import { useDropdown } from "@/hooks/use-dropdown";
// Plane-web
import { StateOption } from "@/plane-web/components/workflow";
// components
import { DropdownButton } from "./buttons";
// constants
@ -30,6 +32,8 @@ type Props = TDropdownProps & {
showDefaultState?: boolean;
value: string | undefined | null;
renderByDefault?: boolean;
stateIds?: string[];
filterAvailableStateIds?: boolean;
};
export const StateDropdown: React.FC<Props> = observer((props) => {
@ -52,6 +56,8 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
tabIndex,
value,
renderByDefault = true,
stateIds,
filterAvailableStateIds = true,
} = props;
// states
const [query, setQuery] = useState("");
@ -78,16 +84,18 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
// store hooks
const { workspaceSlug } = useParams();
const { fetchProjectStates, getProjectStates, getStateById } = useProjectState();
const statesList = getProjectStates(projectId);
const defaultState = statesList?.find((state) => state.default);
const statesList = stateIds
? stateIds.map((stateId) => getStateById(stateId)).filter((state) => !!state)
: getProjectStates(projectId);
const defaultState = statesList?.find((state) => state?.default);
const stateValue = !!value ? value : showDefaultState ? defaultState?.id : undefined;
const options = statesList?.map((state) => ({
value: state.id,
value: state?.id,
query: `${state?.name}`,
content: (
<div className="flex items-center gap-2">
<StateGroupIcon stateGroup={state.group} color={state.color} className="h-3 w-3 flex-shrink-0" />
<StateGroupIcon stateGroup={state?.group ?? "backlog"} color={state?.color} className="h-3 w-3 flex-shrink-0" />
<span className="flex-grow truncate">{state?.name}</span>
</div>
),
@ -226,22 +234,14 @@ export const StateDropdown: React.FC<Props> = observer((props) => {
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
<StateOption
key={option.value}
value={option.value}
className={({ active, selected }) =>
`flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5 ${
active ? "bg-custom-background-80" : ""
} ${selected ? "text-custom-text-100" : "text-custom-text-200"}`
}
>
{({ selected }) => (
<>
<span className="flex-grow truncate">{option.content}</span>
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
</>
)}
</Combobox.Option>
option={option}
projectId={projectId}
filterAvailableStateIds={filterAvailableStateIds}
selectedValue={value}
className="flex w-full cursor-pointer select-none items-center justify-between gap-2 truncate rounded px-1 py-1.5"
/>
))
) : (
<p className="px-1.5 py-1 italic text-custom-text-400">No matches found</p>